/* ProductCard — ürün ızgarasının ve sürüklenebilir rayın paylaştığı kart. Gölge/çerçeve yok: ayrımı medya panelinin nötr tonu ve tipografi kurar. Bütün ölçü ve renkler global.css tokenlarından türetilir. */ .cc_n2k0mxzk_aBrpjIwWls .gpc, .cc_n2k0mxzk_h747a0Wz1N .gpc, .cc_n2k0mxzk_JFTNLiMJAo .gpc, .cc_n2k0mxzk_J2Kk2FA6tB .gpc, .cc_n2k0mxzk_wsFFejmZJy .gpc, .cc_n2k0mxzk_uy9eQAJHQG .gpc, .cc_n2k0mxzk_1CgEUeyjLq .gpc { display: flex; flex-direction: column; gap: var(--g-gap-tight); min-width: 0; margin: 0; } .cc_n2k0mxzk_aBrpjIwWls .gpc-media, .cc_n2k0mxzk_h747a0Wz1N .gpc-media, .cc_n2k0mxzk_JFTNLiMJAo .gpc-media, .cc_n2k0mxzk_J2Kk2FA6tB .gpc-media, .cc_n2k0mxzk_wsFFejmZJy .gpc-media, .cc_n2k0mxzk_uy9eQAJHQG .gpc-media, .cc_n2k0mxzk_1CgEUeyjLq .gpc-media { /* Animasyonlu hale katmanının (::before) konum kutusu. */ position: relative; display: block; color: inherit; text-decoration: none; /* Hale rengi: temanın NÖTR gölge kanalı (--g-overlay-rgb, kartın sabit gölgesiyle aynı) — kullanıcı (2026-09-24): "gölge rengi kırmızı olmayacak, sayfanın tasarımıyla uyumlu olacak". Kanal üçlüsü: rgb(var(--gpc-glow) / a) sözdizimi için. */ --gpc-glow: var(--g-overlay-rgb); } /* KART HALESİ — YALNIZCA ÜZERİNE GELİNCE (kullanıcı, 2026-09-24: önce "We Love animasyonu gibi", sonra "renk sayfayla uyumlu olsun", en son "sürekli tekrar etmeyecek, sadece hover durumunda olacak"). Kart dururken hale YOK; imleç gelince kartın gölgesi We Love ritmiyle (1.4s) yumuşakça derinleşip çözülür, imleç gidince söner. Dokunmatikte (hover yok) hiç görünmez. Renk nötr gölge kanalı; hale hafif aşağı kaymış (8px), doğal ışık yönü. PERFORMANS: box-shadow'un kendisi ANİME EDİLMİYOR (her karede yeniden boyama). Hale sabit bir gölge olarak ayrı katmanda duruyor, yalnızca SAYDAMLIĞI değişiyor — tarayıcı bunu boyamadan birleştirir. Katman görselle aynı köşeyi izler (--gpc-radius, ProductCard'da inline; yoksa medya köşesi). Görselin ARKASINDA: DOM'da önce geliyor, MediaFrame (position: relative) üstüne boyanıyor; yalnızca dış gölge görünür. Yatay raylar bu haleye yer açıyor (global.css .g-rail). */ .cc_n2k0mxzk_aBrpjIwWls .gpc-media::before, .cc_n2k0mxzk_h747a0Wz1N .gpc-media::before, .cc_n2k0mxzk_JFTNLiMJAo .gpc-media::before, .cc_n2k0mxzk_J2Kk2FA6tB .gpc-media::before, .cc_n2k0mxzk_wsFFejmZJy .gpc-media::before, .cc_n2k0mxzk_uy9eQAJHQG .gpc-media::before, .cc_n2k0mxzk_1CgEUeyjLq .gpc-media::before { content: ""; position: absolute; inset: 0; border-radius: var(--gpc-radius, var(--g-radius-media)); box-shadow: 0 8px 28px 2px rgb(var(--gpc-glow) / 0.2); opacity: 0; pointer-events: none; } @media (hover: hover) and (pointer: fine) { .cc_n2k0mxzk_aBrpjIwWls .gpc:hover .gpc-media::before, .cc_n2k0mxzk_h747a0Wz1N .gpc:hover .gpc-media::before, .cc_n2k0mxzk_JFTNLiMJAo .gpc:hover .gpc-media::before, .cc_n2k0mxzk_J2Kk2FA6tB .gpc:hover .gpc-media::before, .cc_n2k0mxzk_wsFFejmZJy .gpc:hover .gpc-media::before, .cc_n2k0mxzk_uy9eQAJHQG .gpc:hover .gpc-media::before, .cc_n2k0mxzk_1CgEUeyjLq .gpc:hover .gpc-media::before { animation: gpc-glow-hover 1.4s ease-in-out infinite; } } /* We Love halesiyle aynı zaman çizgisi: %27'de en koyu, %60'tan sonra hafifler. Üzerindeyken hiç tamamen sönmez (0.35) — imleç girer girmez hale görünür. */ @keyframes gpc-glow-hover { 0%, 60%, 100% { opacity: 0.35; } 27% { opacity: 1; } } /* Hareket azaltma: nabız yok; üzerine gelince hale SABİT görünür (geri bildirim kalır, hareket kalmaz). */ @media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) { .cc_n2k0mxzk_aBrpjIwWls .gpc:hover .gpc-media::before, .cc_n2k0mxzk_h747a0Wz1N .gpc:hover .gpc-media::before, .cc_n2k0mxzk_JFTNLiMJAo .gpc:hover .gpc-media::before, .cc_n2k0mxzk_J2Kk2FA6tB .gpc:hover .gpc-media::before, .cc_n2k0mxzk_wsFFejmZJy .gpc:hover .gpc-media::before, .cc_n2k0mxzk_uy9eQAJHQG .gpc:hover .gpc-media::before, .cc_n2k0mxzk_1CgEUeyjLq .gpc:hover .gpc-media::before { animation: none; opacity: 1; } } /* HAFİF GÖLGE (kullanıcı isteği, referans görsel: görselin altında yumuşak bir yayılım). Gölge MediaFrame'in kendi kutusuna verilir, çünkü köşe yarıçapı inline style ile orada duruyor — bağlantıya verilseydi yuvarlak görselin arkasında köşeli bir iz kalırdı. Renk --g-overlay-rgb (17 19 21, nötr is siyahı): ten/bej/kahve tonu yasak, bu yüzden gölge sıcak bir tona kaydırılmadı, yalnızca saydamlık değişiyor. Değerler düşük: kart hâlâ düz bir yüzey, kabarmış bir kutu değil. */ /* REFERANS GÖRSELDEN ÖLÇÜLDÜ (kullanıcının verdiği kart, 405x525 px). Ölçüm: görsel alanının zemini üstte düz #F3F4F6, yaklaşık %52'den sonra aşağı doğru açılıyor ve %95'te tam beyaza (#FFFFFF) varıyor; kartın DIŞINDA koyu bir hale YOK. Yani oradaki "gölge" hissi, ürünün altındaki yüzeyin beyaza dönmesinden geliyor. Ölçülen #F3F4F6 temanın --g-surface değeriyle (#f4f5f6) pratikte aynı, beyaz da --g-bg; bu yüzden yeni renk tanımlanmadı, duruşlar ölçüme göre yazıldı. NOT: geçiş görselin ARKASINDA durur. Fotoğraf çerçeveyi tamamen dolduruyorsa (Görsel Sığdırma = "Doldur") arkası görünmez; "Sığdır" seçildiğinde ürün bu yüzeyin üstünde durur ve referanstaki görünüm birebir çıkar. Fotoğrafın üstüne hiçbir katman basılmıyor — ürün rengi değiştirilmez. */ .cc_n2k0mxzk_aBrpjIwWls .gpc-media .gost-media, .cc_n2k0mxzk_h747a0Wz1N .gpc-media .gost-media, .cc_n2k0mxzk_JFTNLiMJAo .gpc-media .gost-media, .cc_n2k0mxzk_J2Kk2FA6tB .gpc-media .gost-media, .cc_n2k0mxzk_wsFFejmZJy .gpc-media .gost-media, .cc_n2k0mxzk_uy9eQAJHQG .gpc-media .gost-media, .cc_n2k0mxzk_1CgEUeyjLq .gpc-media .gost-media { background-image: linear-gradient( to bottom, var(--g-surface) 0%, var(--g-surface) 52%, var(--g-bg) 96% ); /* Derinlik için iki katmanlı yumuşak gölge: 1px temas + geniş yayılım. Referansta dış gölge yok, ama kullanıcı ayrıca "hafif shadow" istedi; değerler düşük tutuldu, kart kabarmış bir kutuya dönmüyor. */ box-shadow: 0 1px 3px rgb(var(--g-overlay-rgb) / 0.08), 0 10px 24px rgb(var(--g-overlay-rgb) / 0.16); transition: box-shadow var(--g-dur) var(--g-ease); } /* ALT KENAR BEYAZA AÇILIR — referans görselin asıl "efekti" bu. Ölçüm (405x525 referans kart): yüzey üstte düz #F3F4F6, %52'den sonra açılıp %95'te tam beyaz. Gostliria fotoğrafları 4:5 ve kendi stüdyo zemini açık gri; kareyi TAMAMEN dolduruyorlar, yani arkadaki geçiş görünmüyor. Bu yüzden geçiş ayrı bir katman olarak görselin ÜSTÜNE, yalnızca alt şeride konuyor. Katman ::after; fotoğrafa dokunulmuyor, tek kural silinince eski hâl döner. Yükseklik %30 ve renk yalnızca --g-bg (nötr beyaz): ürünün rengi değiştirilmiyor, sadece altındaki zemin sayfaya karışıyor. Model çekiminde en alttaki şerit hafifçe açılır — bilinçli ödün. Şeffaftan beyaza geçiş premultiplied hesaplanır, gri leke oluşmaz. */ .cc_n2k0mxzk_aBrpjIwWls .gpc-media .gost-media::after, .cc_n2k0mxzk_h747a0Wz1N .gpc-media .gost-media::after, .cc_n2k0mxzk_JFTNLiMJAo .gpc-media .gost-media::after, .cc_n2k0mxzk_J2Kk2FA6tB .gpc-media .gost-media::after, .cc_n2k0mxzk_wsFFejmZJy .gpc-media .gost-media::after, .cc_n2k0mxzk_uy9eQAJHQG .gpc-media .gost-media::after, .cc_n2k0mxzk_1CgEUeyjLq .gpc-media .gost-media::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 22%; /* Beyaz %60'ta durur: fotoğrafın alt şeridi (düz #EEEEEE stüdyo zemini) sayfaya karışır ama ürünün kendisi yıkanmaz. Ölçüm: ürün fotoğrafları 720x900 ve ürün yüzeyi yaklaşık %89'a kadar iniyor. */ background-image: linear-gradient( to bottom, transparent 0%, color-mix(in srgb, var(--g-bg) 60%, transparent) 100% ); pointer-events: none; } /* İmleçli aygıtta gölge biraz derinleşir — dokunmatikte takılı kalmasın. */ @media (hover: hover) and (pointer: fine) { .cc_n2k0mxzk_aBrpjIwWls .gpc:hover .gpc-media .gost-media, .cc_n2k0mxzk_h747a0Wz1N .gpc:hover .gpc-media .gost-media, .cc_n2k0mxzk_JFTNLiMJAo .gpc:hover .gpc-media .gost-media, .cc_n2k0mxzk_J2Kk2FA6tB .gpc:hover .gpc-media .gost-media, .cc_n2k0mxzk_wsFFejmZJy .gpc:hover .gpc-media .gost-media, .cc_n2k0mxzk_uy9eQAJHQG .gpc:hover .gpc-media .gost-media, .cc_n2k0mxzk_1CgEUeyjLq .gpc:hover .gpc-media .gost-media { box-shadow: 0 2px 6px rgb(var(--g-overlay-rgb) / 0.1), 0 16px 34px rgb(var(--g-overlay-rgb) / 0.22); } } /* Hareket azaltma: gölge geçişi de kapanır. */ @media (prefers-reduced-motion: reduce) { .cc_n2k0mxzk_aBrpjIwWls .gpc-media .gost-media, .cc_n2k0mxzk_h747a0Wz1N .gpc-media .gost-media, .cc_n2k0mxzk_JFTNLiMJAo .gpc-media .gost-media, .cc_n2k0mxzk_J2Kk2FA6tB .gpc-media .gost-media, .cc_n2k0mxzk_wsFFejmZJy .gpc-media .gost-media, .cc_n2k0mxzk_uy9eQAJHQG .gpc-media .gost-media, .cc_n2k0mxzk_1CgEUeyjLq .gpc-media .gost-media { transition: none; } } /* YAZI BLOĞU (ad + fiyat). Kartın kendi aralığını devralır (gap: inherit), böylece ad ↔ fiyat mesafesi eskisiyle aynı: düz kartta 12px, dikey kartta 4px + foot'un 4px'i. Varsayılanda REZERV YOK — kullanıcı (2026-09-24): "fiyat ile ürün adı arasında çok boşluk var". Eskiden adın iki satırlık yeri ve fiyatın iki satırlık yeri (fiyat alta yaslı) içeride boş kalıyordu; tek satırlık adda ve indirimsiz fiyatta ad ile fiyat arasına ~2 boş satır giriyordu. Kartların eşit boy tutması gereken bölümler (EditorialSplit, PackMosaic) rezervi bu bloğun min-height'ına verir: içerik üstten akar, artan yer bloğun EN ALTINDA kalır. */ .cc_n2k0mxzk_aBrpjIwWls .gpc-caption, .cc_n2k0mxzk_h747a0Wz1N .gpc-caption, .cc_n2k0mxzk_JFTNLiMJAo .gpc-caption, .cc_n2k0mxzk_J2Kk2FA6tB .gpc-caption, .cc_n2k0mxzk_wsFFejmZJy .gpc-caption, .cc_n2k0mxzk_uy9eQAJHQG .gpc-caption, .cc_n2k0mxzk_1CgEUeyjLq .gpc-caption { display: flex; flex-direction: column; gap: inherit; min-width: 0; } /* Ürün adı: --g-fs-body-sm / 500 (masaüstü 15px, mobil 14px), satır yüksekliği 1.4 (spec). İki satırda kesilir; boş satır rezervi YOK (yukarıdaki not). */ .cc_n2k0mxzk_aBrpjIwWls .gpc-name, .cc_n2k0mxzk_h747a0Wz1N .gpc-name, .cc_n2k0mxzk_JFTNLiMJAo .gpc-name, .cc_n2k0mxzk_J2Kk2FA6tB .gpc-name, .cc_n2k0mxzk_wsFFejmZJy .gpc-name, .cc_n2k0mxzk_uy9eQAJHQG .gpc-name, .cc_n2k0mxzk_1CgEUeyjLq .gpc-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; color: var(--g-ink); font-size: var(--g-fs-body-sm); font-weight: var(--g-w-medium); line-height: 1.4; text-decoration: none; transition: color var(--g-dur) var(--g-ease); } .cc_n2k0mxzk_aBrpjIwWls .gpc-name:hover, .cc_n2k0mxzk_h747a0Wz1N .gpc-name:hover, .cc_n2k0mxzk_JFTNLiMJAo .gpc-name:hover, .cc_n2k0mxzk_J2Kk2FA6tB .gpc-name:hover, .cc_n2k0mxzk_wsFFejmZJy .gpc-name:hover, .cc_n2k0mxzk_uy9eQAJHQG .gpc-name:hover, .cc_n2k0mxzk_1CgEUeyjLq .gpc-name:hover { color: var(--g-cool-deep); } /* Fiyat solda, hızlı ekle / stok etiketi sağda. */ .cc_n2k0mxzk_aBrpjIwWls .gpc-foot, .cc_n2k0mxzk_h747a0Wz1N .gpc-foot, .cc_n2k0mxzk_JFTNLiMJAo .gpc-foot, .cc_n2k0mxzk_J2Kk2FA6tB .gpc-foot, .cc_n2k0mxzk_wsFFejmZJy .gpc-foot, .cc_n2k0mxzk_uy9eQAJHQG .gpc-foot, .cc_n2k0mxzk_1CgEUeyjLq .gpc-foot { display: flex; align-items: center; justify-content: space-between; /* Sarma AÇIK: etiketli "seçenekler" butonu dar kartta (mobil 2'li ızgara) fiyatın yanına sığmıyor; alt satıra inmesi taşmasından iyidir. */ flex-wrap: wrap; gap: var(--g-gap-tight); min-width: 0; } /* DİKEY KART (mozaiğin büyük kartı — kullanıcı isteği): fiyat adın hemen altında (iki satır rezervi yok, aralık 4px), "İncele" fiyatın ALTINDA; ad, fiyat ve buton ORTALI. Küçük kartlarda yatay düzen (ad solda, fiyat solda, buton sağda) aynen kalır. */ .cc_n2k0mxzk_aBrpjIwWls .gpc--stacked, .cc_n2k0mxzk_h747a0Wz1N .gpc--stacked, .cc_n2k0mxzk_JFTNLiMJAo .gpc--stacked, .cc_n2k0mxzk_J2Kk2FA6tB .gpc--stacked, .cc_n2k0mxzk_wsFFejmZJy .gpc--stacked, .cc_n2k0mxzk_uy9eQAJHQG .gpc--stacked, .cc_n2k0mxzk_1CgEUeyjLq .gpc--stacked { gap: var(--g-space-1); align-items: center; text-align: center; } .cc_n2k0mxzk_aBrpjIwWls .gpc--stacked .gpc-media, .cc_n2k0mxzk_h747a0Wz1N .gpc--stacked .gpc-media, .cc_n2k0mxzk_JFTNLiMJAo .gpc--stacked .gpc-media, .cc_n2k0mxzk_J2Kk2FA6tB .gpc--stacked .gpc-media, .cc_n2k0mxzk_wsFFejmZJy .gpc--stacked .gpc-media, .cc_n2k0mxzk_uy9eQAJHQG .gpc--stacked .gpc-media, .cc_n2k0mxzk_1CgEUeyjLq .gpc--stacked .gpc-media { align-self: stretch; margin-bottom: var(--g-space-2); } /* Yazı bloğu kartın tam genişliğinde; ad ve fiyat onun içinde ortalı — blok gelmeden önce ikisi de doğrudan kartın ortalı öğesiydi, görünüm aynı. */ .cc_n2k0mxzk_aBrpjIwWls .gpc--stacked .gpc-caption, .cc_n2k0mxzk_h747a0Wz1N .gpc--stacked .gpc-caption, .cc_n2k0mxzk_JFTNLiMJAo .gpc--stacked .gpc-caption, .cc_n2k0mxzk_J2Kk2FA6tB .gpc--stacked .gpc-caption, .cc_n2k0mxzk_wsFFejmZJy .gpc--stacked .gpc-caption, .cc_n2k0mxzk_uy9eQAJHQG .gpc--stacked .gpc-caption, .cc_n2k0mxzk_1CgEUeyjLq .gpc--stacked .gpc-caption { align-self: stretch; align-items: center; } .cc_n2k0mxzk_aBrpjIwWls .gpc--stacked .gpc-foot, .cc_n2k0mxzk_h747a0Wz1N .gpc--stacked .gpc-foot, .cc_n2k0mxzk_JFTNLiMJAo .gpc--stacked .gpc-foot, .cc_n2k0mxzk_J2Kk2FA6tB .gpc--stacked .gpc-foot, .cc_n2k0mxzk_wsFFejmZJy .gpc--stacked .gpc-foot, .cc_n2k0mxzk_uy9eQAJHQG .gpc--stacked .gpc-foot, .cc_n2k0mxzk_1CgEUeyjLq .gpc--stacked .gpc-foot { flex-direction: column; align-items: center; gap: var(--g-space-3); margin-top: var(--g-space-1); } /* Dolu vurgu butonu (g-btn--primary) — global stil; burada yalnızca fiyatla arasına bir nefes. */ .cc_n2k0mxzk_aBrpjIwWls .gpc-cta, .cc_n2k0mxzk_h747a0Wz1N .gpc-cta, .cc_n2k0mxzk_JFTNLiMJAo .gpc-cta, .cc_n2k0mxzk_J2Kk2FA6tB .gpc-cta, .cc_n2k0mxzk_wsFFejmZJy .gpc-cta, .cc_n2k0mxzk_uy9eQAJHQG .gpc-cta, .cc_n2k0mxzk_1CgEUeyjLq .gpc-cta { margin-top: var(--g-space-1); } /* Kartın tek aksiyonu: ürün sayfasına git. Sepete ekleme kartta YOK (gerekçe index.tsx başlığında), bu yüzden vermilion dolgu da yok — marka aksiyon rengi gerçek aksiyonun olduğu yerde, PDP'de kalır. */ .cc_n2k0mxzk_aBrpjIwWls .gpc-options, .cc_n2k0mxzk_h747a0Wz1N .gpc-options, .cc_n2k0mxzk_JFTNLiMJAo .gpc-options, .cc_n2k0mxzk_J2Kk2FA6tB .gpc-options, .cc_n2k0mxzk_wsFFejmZJy .gpc-options, .cc_n2k0mxzk_uy9eQAJHQG .gpc-options, .cc_n2k0mxzk_1CgEUeyjLq .gpc-options { display: inline-flex; align-items: center; box-sizing: border-box; flex: 0 0 auto; /* Küçültüldü (kullanıcı isteği): 44px fiyatın yanında iri duruyordu. 34px, WCAG 2.2 AA'nın 24px hedef tabanının üstünde. */ min-height: 34px; padding-inline: var(--g-space-3); border: 1px solid var(--g-line-strong); border-radius: var(--g-radius-media); color: var(--g-ink); font-size: var(--g-fs-meta); font-weight: var(--g-w-semibold); letter-spacing: var(--g-track-caps); text-transform: uppercase; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color var(--g-dur) var(--g-ease), color var(--g-dur) var(--g-ease); } .cc_n2k0mxzk_aBrpjIwWls .gpc-options:hover, .cc_n2k0mxzk_h747a0Wz1N .gpc-options:hover, .cc_n2k0mxzk_JFTNLiMJAo .gpc-options:hover, .cc_n2k0mxzk_J2Kk2FA6tB .gpc-options:hover, .cc_n2k0mxzk_wsFFejmZJy .gpc-options:hover, .cc_n2k0mxzk_uy9eQAJHQG .gpc-options:hover, .cc_n2k0mxzk_1CgEUeyjLq .gpc-options:hover { background: var(--g-ink); color: var(--g-bg); } /* Ok ikonu kuralları KALDIRILDI (2026-09-16): buton yalnızca metin. */ /* Stokta olmayan ürün: gerçek durum etiketi, dekoratif rozet değil. */ .cc_n2k0mxzk_aBrpjIwWls .gpc-soldout, .cc_n2k0mxzk_h747a0Wz1N .gpc-soldout, .cc_n2k0mxzk_JFTNLiMJAo .gpc-soldout, .cc_n2k0mxzk_J2Kk2FA6tB .gpc-soldout, .cc_n2k0mxzk_wsFFejmZJy .gpc-soldout, .cc_n2k0mxzk_uy9eQAJHQG .gpc-soldout, .cc_n2k0mxzk_1CgEUeyjLq .gpc-soldout { flex: 0 0 auto; padding: var(--g-space-2) var(--g-space-3); /* Gri çerçeve YOK (kullanıcı: "gri çizgi asla"); yüzey zemini ayırır. */ border: 1px solid transparent; border-radius: var(--g-radius); background: var(--g-surface); color: var(--g-ink-2); font-size: var(--g-fs-meta); font-weight: var(--g-w-medium); line-height: var(--g-lh-tight); white-space: nowrap; } /* Kart hata mesajı kuralı KALDIRILDI (2026-09-16): kartta sepete ekleme kalmadığı için gösterilecek bir hata da yok. Kartın tek aksiyonu ürün sayfasına gitmek; hata durumları PDP'de ele alınıyor. */ /* Ortalı (stacked) kartta alt alta fiyat satırları da ortada. */ .cc_n2k0mxzk_aBrpjIwWls .gpc--stacked .gost-price--stack, .cc_n2k0mxzk_h747a0Wz1N .gpc--stacked .gost-price--stack, .cc_n2k0mxzk_JFTNLiMJAo .gpc--stacked .gost-price--stack, .cc_n2k0mxzk_J2Kk2FA6tB .gpc--stacked .gost-price--stack, .cc_n2k0mxzk_wsFFejmZJy .gpc--stacked .gost-price--stack, .cc_n2k0mxzk_uy9eQAJHQG .gpc--stacked .gost-price--stack, .cc_n2k0mxzk_1CgEUeyjLq .gpc--stacked .gost-price--stack { align-items: center; } /* ---------- DÜZ KART (flat) ---------- Kategori sayfası (kullanıcı, 2026-09-24: "kategori sayfalarında efekt ve hover gölgelendirmeleri kalkacak"). Kapananlar: üzerine gelince nabız atan hale (::before katmanı hiç üretilmez), görselin sabit gölgesi ve üzerine gelince derinleşen gölgesi, arkadaki yüzey geçişi, görselin alt şeridini beyaza açan katman (::after), adın üzerine gelince renk değiştirmesi. Kalanlar içerik davranışları: ikinci görsel/video geçişi (panelden "İkinci görseli göster" ile yönetilir) ve klavye odak halkası. Bu blok dosyanın SONUNDA: aynı özgüllükteki efekt kurallarını kaynak sırasıyla geçer. Stok etiketinin gri çerçevesi de yok (gri çizgi yok kuralı) — yerine yüzey zemini. */ .cc_n2k0mxzk_aBrpjIwWls .gpc--flat .gpc-media::before, .cc_n2k0mxzk_h747a0Wz1N .gpc--flat .gpc-media::before, .cc_n2k0mxzk_JFTNLiMJAo .gpc--flat .gpc-media::before, .cc_n2k0mxzk_J2Kk2FA6tB .gpc--flat .gpc-media::before, .cc_n2k0mxzk_wsFFejmZJy .gpc--flat .gpc-media::before, .cc_n2k0mxzk_uy9eQAJHQG .gpc--flat .gpc-media::before, .cc_n2k0mxzk_1CgEUeyjLq .gpc--flat .gpc-media::before { content: none; } .cc_n2k0mxzk_aBrpjIwWls .gpc--flat .gpc-media .gost-media, .cc_n2k0mxzk_h747a0Wz1N .gpc--flat .gpc-media .gost-media, .cc_n2k0mxzk_JFTNLiMJAo .gpc--flat .gpc-media .gost-media, .cc_n2k0mxzk_J2Kk2FA6tB .gpc--flat .gpc-media .gost-media, .cc_n2k0mxzk_wsFFejmZJy .gpc--flat .gpc-media .gost-media, .cc_n2k0mxzk_uy9eQAJHQG .gpc--flat .gpc-media .gost-media, .cc_n2k0mxzk_1CgEUeyjLq .gpc--flat .gpc-media .gost-media, .cc_n2k0mxzk_aBrpjIwWls .gpc--flat:hover .gpc-media .gost-media, .cc_n2k0mxzk_h747a0Wz1N .gpc--flat:hover .gpc-media .gost-media, .cc_n2k0mxzk_JFTNLiMJAo .gpc--flat:hover .gpc-media .gost-media, .cc_n2k0mxzk_J2Kk2FA6tB .gpc--flat:hover .gpc-media .gost-media, .cc_n2k0mxzk_wsFFejmZJy .gpc--flat:hover .gpc-media .gost-media, .cc_n2k0mxzk_uy9eQAJHQG .gpc--flat:hover .gpc-media .gost-media, .cc_n2k0mxzk_1CgEUeyjLq .gpc--flat:hover .gpc-media .gost-media { background-image: none; box-shadow: none; transition: none; } .cc_n2k0mxzk_aBrpjIwWls .gpc--flat .gpc-media .gost-media::after, .cc_n2k0mxzk_h747a0Wz1N .gpc--flat .gpc-media .gost-media::after, .cc_n2k0mxzk_JFTNLiMJAo .gpc--flat .gpc-media .gost-media::after, .cc_n2k0mxzk_J2Kk2FA6tB .gpc--flat .gpc-media .gost-media::after, .cc_n2k0mxzk_wsFFejmZJy .gpc--flat .gpc-media .gost-media::after, .cc_n2k0mxzk_uy9eQAJHQG .gpc--flat .gpc-media .gost-media::after, .cc_n2k0mxzk_1CgEUeyjLq .gpc--flat .gpc-media .gost-media::after { content: none; } .cc_n2k0mxzk_aBrpjIwWls .gpc--flat .gpc-name:hover, .cc_n2k0mxzk_h747a0Wz1N .gpc--flat .gpc-name:hover, .cc_n2k0mxzk_JFTNLiMJAo .gpc--flat .gpc-name:hover, .cc_n2k0mxzk_J2Kk2FA6tB .gpc--flat .gpc-name:hover, .cc_n2k0mxzk_wsFFejmZJy .gpc--flat .gpc-name:hover, .cc_n2k0mxzk_uy9eQAJHQG .gpc--flat .gpc-name:hover, .cc_n2k0mxzk_1CgEUeyjLq .gpc--flat .gpc-name:hover { color: var(--g-ink); } .cc_n2k0mxzk_aBrpjIwWls .gpc--flat .gpc-soldout, .cc_n2k0mxzk_h747a0Wz1N .gpc--flat .gpc-soldout, .cc_n2k0mxzk_JFTNLiMJAo .gpc--flat .gpc-soldout, .cc_n2k0mxzk_J2Kk2FA6tB .gpc--flat .gpc-soldout, .cc_n2k0mxzk_wsFFejmZJy .gpc--flat .gpc-soldout, .cc_n2k0mxzk_uy9eQAJHQG .gpc--flat .gpc-soldout, .cc_n2k0mxzk_1CgEUeyjLq .gpc--flat .gpc-soldout { border-color: transparent; background: var(--g-surface); }