/* Urun karti stili — product-card.njk icinden tasindi. Snippet her kart icin yeniden basildigindan bu blok ana sayfada 85 kez tekrar ediyordu (913 KB). Artik master.njk icinde BIR KEZ yuklenir. */ .sm-pcard { position: relative; display: flex; flex-direction: column; height: 100%; background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.02)) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 18px !important; overflow: hidden; backdrop-filter: blur(8px); transition: transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s, border-color .32s; } .sm-pcard::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, #6366f1, #a855f7 50%, #22d3ee); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .32s; pointer-events: none; z-index: 4; } .sm-pcard:hover { transform: translateY(-7px); border-color: transparent !important; box-shadow: 0 26px 60px rgba(2,6,23,.65), 0 0 44px rgba(99,102,241,.16); } .sm-pcard:hover::after { opacity: 1; } .sm-pcard__media { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #10162a; overflow: hidden; } .sm-pcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.22,1,.36,1); } .sm-pcard:hover .sm-pcard__img { transform: scale(1.07); } .sm-pcard__shine { position: absolute; top: 0; bottom: 0; left: -80%; width: 55%; z-index: 2; background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent); transform: skewX(-18deg); transition: left .6s ease; pointer-events: none; } .sm-pcard:hover .sm-pcard__shine { left: 130%; } .sm-pcard__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #6366f1; opacity: .45; } .sm-pcard__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 3; } .sm-pcard__badge { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .03em; padding: 4px 11px; border-radius: 99px; line-height: 1.4; background: var(--bc, #6366f1); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 4px 16px rgba(0,0,0,.4); } /* SADE KART: başlık görselin altına gömülü tek satır (referans tasarım gibi). */ .sm-pcard__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 22px 12px 9px; background: linear-gradient(to top, rgba(5,8,18,.92) 0%, rgba(5,8,18,.55) 55%, rgba(5,8,18,0) 100%); pointer-events: none; } .sm-pcard__title { display: block; color: #f4f6ff; font-size: .84rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px rgba(0,0,0,.6); } /* ===== "from XX" fiyat rozeti ===== Kartın köşesinde durur, kutusu/çerçevesi yoktur — sadece yazı. "from" minik ve gri, fiyat gradyanlı. Karta gelince başlıkla birlikte silinir ki "View Details" katmanı tek başına kalsın. */ .sm-pcard__price { position: absolute; z-index: 4; pointer-events: none; display: flex; align-items: baseline; gap: 4px; line-height: 1.1; text-shadow: 0 1px 8px rgba(0,0,0,.55); transition: opacity .25s ease; } .sm-pcard__price--tr { right: 11px; top: 10px; } .sm-pcard__price--tl { left: 11px; top: 10px; } /* Alt köşeler: rozet başlık şeridinin içinde, başlıkla aynı satırda durur. */ .sm-pcard__price--inline { position: static; flex: 0 0 auto; } .sm-pcard__cap--withprice { display: flex; align-items: baseline; gap: 8px; } .sm-pcard__cap--withprice .sm-pcard__title { flex: 1 1 auto; min-width: 0; /* min-width:0 olmadan "…" kısaltması çalışmaz */ } .sm-pcard__price-from { font-size: var(--pf-lsize, 9px); font-weight: 600; letter-spacing: .06em; text-transform: lowercase; color: var(--pf-lc, #8e99ba); opacity: .95; } .sm-pcard__price-val { font-size: var(--pf-size, 15px); font-weight: 800; letter-spacing: -.02em; /* ⚠️ GRADYANLI YAZI KALDIRILDI — FİYATLARIN SİLİK GÖRÜNME SEBEBİ BUYDU. Fiyat `background-clip:text` + `-webkit-text-fill-color:transparent` ile çiziliyordu. Bu teknikte GÖLGE, saydam harflerin İÇİNDEN görünüyor ve rengi grileştiriyor: ürün adı bembeyaz okunurken hemen altındaki fiyat gri ve sönük kalıyordu (mağaza sahibi "fiyat görünmüyor" dedi; ekran görüntüsünde her kartta aynı fark vardı). 15px'lik bir sayıda gradyanın görsel katkısı yok, maliyeti okunurluk. Artık DÜZ BEYAZ + gölge: başlıkla aynı netlikte. ⚠️ background-clip:text'e geri dönme. */ color: #fff; } html[data-sm-theme="light"] .sm-pcard__price-val { color: #0E1726; } /* ⚠️ ARKAPLAN HAPI KALDIRILDI — mağaza sahibi "çirkin duruyor" dedi. Hap, fiyatın parlak ürün görselleri üzerinde silinmesini çözmek için konmuştu (IPTV kartında 2,34:1 ölçmüştüm). Kutu gidince o sorun geri gelmesin diye okunurluk GÖLGEYE devredildi: çift katmanlı, biri dar ve koyu (kenar ayrımı), biri geniş (parlak zeminde ayrışma). ⚠️ Gölgeyi zayıflatma — gradyanın açık ucu beyaz afiş üzerinde tek başına okunmuyor. */ .sm-pcard__price { text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 2px 10px rgba(0, 0, 0, .75); } .sm-pcard:hover .sm-pcard__price { opacity: 0; } /* Sol üstte rozet varsa, oraya konan fiyat rozetlerin altına insin. */ .sm-pcard__badges ~ .sm-pcard__price--tl { top: 44px; } /* Dokunmatik cihazlarda :hover yok — fiyat hep görünsün. */ @media (hover: none) { .sm-pcard:hover .sm-pcard__price { opacity: 1; } } /* Açık temada beyaz zemin: aynı gradyan koyulaştırılarak okunur kalır. */ html[data-sm-theme="light"] .sm-pcard__price { text-shadow: none; background: rgba(255,255,255,.72); } /* Eski `filter: brightness()` kuralı gradyan içindi; düz renkte gereksiz. */ html[data-sm-theme="light"] .sm-pcard__price-from { color: #6b7280; } /* Karta gelince gorselin uzerinde beliren "View Details" katmani. Normalde gorunmez — kart tamamen sade kalsin diye. */ .sm-pcard__hover { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16px; background: linear-gradient(to top, rgba(6,10,22,.85) 0%, rgba(6,10,22,.38) 45%, rgba(6,10,22,0) 78%); opacity: 0; transition: opacity .3s ease; pointer-events: none; } .sm-pcard:hover .sm-pcard__hover { opacity: 1; } .sm-pcard__cap { transition: opacity .25s ease; } .sm-pcard:hover .sm-pcard__cap { opacity: 0; } /* hover'da başlık çekilir, "View Details" kalır */ .sm-pcard__hover-btn { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; letter-spacing: -.01em; color: #fff; padding: 8px 18px; border-radius: 99px; background: linear-gradient(120deg, #6366f1, #a855f7 60%, #22d3ee); box-shadow: 0 8px 24px rgba(99,102,241,.5); transform: translateY(10px); transition: transform .32s cubic-bezier(.22,1,.36,1); } .sm-pcard:hover .sm-pcard__hover-btn { transform: translateY(0); } /* Dokunmatik cihazlarda :hover yok — orada katman hic gorunmesin, kart zaten tiklanabilir durumda. */ @media (hover: none) { .sm-pcard__hover { display: none; } } html[data-sm-theme="light"] .sm-pcard { background: #fff !important; border-color: #e2e7f4 !important; } html[data-sm-theme="light"] .sm-pcard__title { color: #0e1726; } html[data-sm-theme="light"] .sm-pcard__media { background: #eef1fb; } @media (min-width: 1200px) { .product-card-item { flex: 0 0 20% !important; max-width: 20% !important; } #cat-section-products .product-card-item { flex: 0 0 16.666% !important; max-width: 16.666% !important; } } /* ===== MOBİL: kompakt kare kart, gömülü tek satır başlık ===== */ @media (max-width: 991px) { .sm-pcard { border-radius: 13px !important; } .sm-pcard__media { aspect-ratio: 4 / 5; } .sm-pcard__cap { padding: 16px 8px 7px; } .sm-pcard__title { font-size: .72rem; } .sm-pcard__badge { font-size: .56rem; padding: 3px 7px; } .sm-pcard__badges { top: 6px; left: 6px; gap: 4px; } .product-card-item { margin-bottom: .6rem !important; } /* Mobilde kart küçüldüğü için fiyat da orantılı küçülür. */ .sm-pcard__price { gap: 3px; } .sm-pcard__price--tr { right: 8px; top: 8px; } .sm-pcard__price--tl { left: 8px; top: 8px; } .sm-pcard__price-val { font-size: calc(var(--pf-size, 15px) * .82); } .sm-pcard__price-from { font-size: calc(var(--pf-lsize, 9px) * .85); } .sm-pcard__cap--withprice { gap: 6px; } } /* ═══ MARKA KARTLARI — başlık yalnızca fareyle üzerine gelince ═══════════ Subscriptions bölümündeki kartların GÖRSELİNDE zaten servis adı yazıyor (public/images/marka/*.svg, scripts/abonelik-kart-gorsel.js). Altına bir de metin başlık koymak aynı şeyi iki kez yazmak oluyordu; mağaza sahibi "sadece fiyat görünsün, başlık hover'da çıksın" dedi. ⚠️ SEÇİCİ GÖRSEL YOLUNA BAKIYOR, bölüme değil. Böylece kural kendini sürdürür: marka kartı verilen her ürün otomatik girer, normal fotoğrafı olan ürün (Games, Social Media…) etkilenmez — orada başlık silinirse ürün tanınmaz olurdu. ⚠️ opacity kullanılıyor, display:none DEĞİL — öğe akışta kalsın ki kart yüksekliği değişmesin ve ızgara kaymasın. ⚠️ Bu kurallar yukarıdaki `.sm-pcard:hover .sm-pcard__cap{opacity:0}` ve `.sm-pcard:hover .sm-pcard__price{opacity:0}` kurallarını KASITLI olarak eziyor: normalde hover'da başlık+fiyat silinip "View Details" tek başına kalıyor; marka kartlarında tersi isteniyor. */ /* ⚠️ GİZLEME KALDIRILDI — kapaklar artık ürün adını YAZMIYOR, markanın logosunu gösteriyor (bkz. scripts/marka-kapak-uret.js). Eskiden kapakta "Netflix" yazdığı için başlık tekrardı ve gizleniyordu; şimdi logodan anlaşılmayan ürünler çıkıyor ("bazı ürünler belli olmuyor"). Başlık artık hep açık ama SAKİN: küçük punto, %78 opaklık, kartın altındaki mevcut gradyan şeridin içinde. Üstüne gelince tam beyaza çıkar. Kapak logosuyla yarışmasın diye kalın yapılmadı. */ .sm-pcard:has(.sm-pcard__img[src^="/images/marka/"]) .sm-pcard__title { opacity: .78; font-weight: 500; font-size: .78rem; letter-spacing: .01em; transition: opacity .2s ease; } .sm-pcard:has(.sm-pcard__img[src^="/images/marka/"]):hover .sm-pcard__cap, .sm-pcard:has(.sm-pcard__img[src^="/images/marka/"]):focus-within .sm-pcard__cap { opacity: 1; } .sm-pcard:has(.sm-pcard__img[src^="/images/marka/"]):hover .sm-pcard__title, .sm-pcard:has(.sm-pcard__img[src^="/images/marka/"]):focus-within .sm-pcard__title { opacity: 1; } .sm-pcard:has(.sm-pcard__img[src^="/images/marka/"]):hover .sm-pcard__price, .sm-pcard:has(.sm-pcard__img[src^="/images/marka/"]):focus-within .sm-pcard__price { opacity: 1; } /* ⚠️ DOKUNMATİKTE HOVER YOK. Kuralı olduğu gibi bırakırsak telefonda ürün adı HİÇ görünmez — ziyaretçilerin %65'i mobil. Orada başlık hep açık. */ @media (hover: none) { .sm-pcard:has(.sm-pcard__img[src^="/images/marka/"]) .sm-pcard__title { opacity: 1; } }