/**
* NECOX K1 — Ad Card Component
*
* Frontend CSS for the advert card component with 8 card style variants
* used across listings, archives and search results.
*
* @file ad-card.css
* @component K1
* @since v4.1.0
*/
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
GRID KONTEYNER
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.necox-ad-grid {
display: grid;
gap: var(--necox-card-gap, 16px);
/* v7.16.8.67 — Varsayilan grid kolonu: ~300px (begenilen genislik).
"Asagi uzun his" vermeme garantisinin 2. yarisi (genislik). Kolon tanimlamayan
component'ler bunu alir; kendi grid-template-columns'u olanlar override eder. */
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.necox-ad-grid--list {
grid-template-columns: 1fr;
}
/* v8.3.314 (FD→F AUDIT): related-ads + recent-views "Kart Boşluğu" ölüydü — element
--necox-related-gap / --necox-recent-gap :root'a yazıyordu ama ortak .necox-ad-grid
yalnız --necox-card-gap okuyordu (köprü kopuktu). Element-scope override ile bağlandı;
fallback = ortak grid gap'i → ayar boşsa çıktı bayt-birebir, diğer .necox-ad-grid'ler etkilenmez. */
.necox-related-ads-element .necox-ad-grid { gap: var(--necox-related-gap, var(--necox-card-gap, 16px)); }
.necox-recent-views-element .necox-recent-views__grid { gap: var(--necox-recent-gap, var(--necox-card-gap, 16px)); }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
ORTAK KART YAPISI (tum stiller)
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.necox-ad-card {
width: var(--necox-card-width, 100%);
height: var(--necox-card-height, auto);
min-height: 120px;
background: var(--necox-card-bg, var(--necox-white));
border-radius: var(--necox-card-border-radius, var(--necox-radius-lg));
overflow: hidden;
border-width: var(--necox-card-border-width, 1px);
border-style: solid;
border-color: var(--necox-card-border-color, var(--necox-border));
box-shadow: var(--necox-card-shadow, none);
backdrop-filter: var(--necox-card-glass-blur, none);
-webkit-backdrop-filter: var(--necox-card-glass-blur, none);
transition: box-shadow 0.3s, transform 0.3s, backdrop-filter 0.2s, background 0.2s, border-color 0.2s, border-width 0.2s;
position: relative;
/* v6.70.3 — Kart hizalama: grid stretch ile dis yukseklik esitleniyor ama icerde
media + body ardisik blok oldugu icin body'nin flex:1'i parent flex degilse
calismiyordu. Parent'i column flex yapinca __media sabit kalir, __body
genisler, body icindeki son blok (meta/footer) kartin altina yaslanir.
Sonuc: ayni satirdaki tum kartlar gorsel olarak ayni dolulukta. */
display: flex;
flex-direction: column;
}
.necox-ad-card:hover {
background: var(--necox-card-hover-bg, var(--necox-card-bg, #fff));
border-color: var(--necox-card-hover-border, var(--necox-card-border-color, #e8e8e8));
box-shadow: var(--necox-card-hover-shadow, 0 8px 28px rgba(0,0,0,0.1));
backdrop-filter: var(--necox-card-glass-hover-blur, var(--necox-card-glass-blur, none));
-webkit-backdrop-filter: var(--necox-card-glass-hover-blur, var(--necox-card-glass-blur, none));
transform: translateY(-3px);
}
/* ── Gorsel ──
v6.70.4 fix: __media'nin kendisine aspect-ratio:4/3 + child fill verildi.
Onceden aspect-ratio sadece ![]()
'daydi — lazy-load veya no-img durumlarinda
__media collapse oluyordu ve kart kisaliyordu. Artik media slot her zaman
ayni yukseklik kaplar, icerigi tam doldurur (gorsel ister yuklensin ister no-img). */
.necox-ad-card__media {
position: relative;
overflow: hidden;
aspect-ratio: 4/3;
width: 100%;
}
.necox-ad-card__thumb {
display: block;
width: 100%;
height: 100%;
}
.necox-ad-card__thumb img {
width: 100%;
height: 100%;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
transition: transform 0.45s cubic-bezier(0.4,0,0.2,1), filter 0.45s;
}
/* Tum stillerde zoom efekti */
.necox-ad-card:hover .necox-ad-card__thumb img {
transform: scale(1.06);
}
.necox-ad-card__no-img {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 4/3;
background: var(--necox-bg);
color: var(--necox-muted);
}
/* ── Badge ── */
/* v6.24.3 K-173 — CSS variable'lara baglandi + 4 pozisyon modifier eklendi.
* Default top-left (sol-ust). Promo varsa render kosulu ile gizlenir
* (ad-card.php sat 90 has_visible_promo kontrolu). */
.necox-ad-card__badge {
position: absolute;
font-size: var(--necox-ad-type-font-size, 11px);
font-weight: var(--necox-ad-type-font-weight, 600);
color: var(--necox-ad-overlay-text-color, #ffffff);
padding: var(--necox-ad-type-pad-v, 3px) var(--necox-ad-type-pad-h, 10px);
border-radius: var(--necox-ad-type-radius, 4px);
z-index: 5;
}
.necox-ad-card__badge--top-left { top: 10px; left: 10px; }
.necox-ad-card__badge--top-right { top: 10px; right: 10px; }
.necox-ad-card__badge--bottom-left { bottom: 10px; left: 10px; }
.necox-ad-card__badge--bottom-right { bottom: 10px; right: 10px; }
/* ── Kart Icerigi ── */
.necox-ad-card__body {
padding: var(--necox-card-body-padding, 14px 16px);
display: flex;
flex-direction: column;
flex: 1;
}
.necox-ad-card__title {
font-size: var(--necox-card-title-size, 14px);
font-weight: var(--necox-card-title-weight, 600);
font-family: var(--necox-card-title-font, inherit);
margin: 0 0 6px;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(var(--necox-card-title-size, 14px) * 1.3 * 2);
}
.necox-ad-card__title a {
color: var(--necox-card-title-color, var(--necox-text));
text-decoration: none;
}
.necox-ad-card__title a:hover {
color: var(--necox-card-title-hover, var(--necox-primary, #00a591));
}
/* ── Aciklama (Excerpt) ──
v6.70.5: Excerpt slot HER ZAMAN yer korur. Boş ise gorunmez ama yer kaplar,
boylece title/price/meta her kartta ayni vertical pozisyonda. */
.necox-ad-card__excerpt {
font-size: var(--necox-card-excerpt-size, 13px);
font-family: var(--necox-card-excerpt-font, inherit);
font-weight: var(--necox-card-excerpt-weight, 400);
color: var(--necox-card-excerpt-color, var(--necox-muted));
line-height: 1.4;
margin: 0 0 6px;
display: -webkit-box;
-webkit-line-clamp: var(--necox-card-excerpt-lines, 2);
-webkit-box-orient: vertical;
overflow: hidden;
/* Excerpt 2 satir sabit slot — kart icindeki hizalanma icin */
min-height: calc(var(--necox-card-excerpt-size, 13px) * 1.4 * var(--necox-card-excerpt-lines, 2));
}
/* Hidden variant: yer korur ama gorunmez (display:none degil) */
.necox-ad-card__excerpt--hidden {
visibility: hidden;
display: -webkit-box;
}
.necox-ad-card__price {
margin-bottom: 8px;
min-height: calc(var(--necox-card-price-size, 16px) * 1.3);
}
.necox-price {
font-size: var(--necox-card-price-size, 16px);
font-weight: var(--necox-card-price-weight, 700);
font-family: var(--necox-card-price-font, inherit);
color: var(--necox-card-price-color, #d54b4f);
}
.necox-price--empty {
visibility: hidden;
}
/* Fiyat yoksa kategori adi fiyat alaninda */
.necox-ad-card__price-cat,
a.necox-ad-card__price-cat,
a.necox-ad-card__price-cat:visited {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--necox-card-price-size, 14px);
font-weight: var(--necox-card-price-weight, 600);
font-family: var(--necox-card-price-font, inherit);
color: var(--necox-card-price-color, #d54b4f);
text-decoration: none;
transition: color 0.2s ease;
}
a.necox-ad-card__price-cat:hover {
color: var(--necox-primary, var(--necox-primary));
}
.necox-ad-card__price-cat svg,
.necox-ad-card__price-cat .necox-ad-card__meta-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.necox-ad-card__price-cat-icon {
font-size: 16px;
line-height: 1;
flex-shrink: 0;
}
/* ── Meta (kategori + lokasyon + tarih) ── */
.necox-ad-card__meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
font-size: var(--necox-card-meta-size, 12px);
font-family: var(--necox-card-meta-font, inherit);
font-weight: var(--necox-card-meta-weight, inherit);
color: var(--necox-card-meta-color, var(--necox-muted));
margin-top: auto;
min-height: calc(var(--necox-card-meta-size, 12px) * 1.4);
}
.necox-ad-card__cat,
.necox-ad-card__loc {
display: inline-flex;
align-items: center;
gap: 3px;
min-width: 0;
text-decoration: none;
transition: color 0.2s ease;
}
a.necox-ad-card__cat:hover,
a.necox-ad-card__loc:hover {
color: var(--necox-primary, var(--necox-primary));
}
.necox-ad-card__cat {
color: var(--necox-card-cat-color, inherit);
}
.necox-ad-card__loc {
color: var(--necox-card-loc-color, inherit);
}
.necox-ad-card__date {
color: var(--necox-card-date-color, inherit);
font-size: var(--necox-card-date-size, inherit);
}
/* v7.0.2 tespit 125 — goruntulenme sayisi */
.necox-ad-card__views {
display: inline-flex;
align-items: center;
gap: 3px;
min-width: 0;
color: var(--necox-card-views-color, inherit);
}
.necox-ad-card__views svg {
width: var(--necox-card-icon-size, 13px);
height: var(--necox-card-icon-size, 13px);
flex-shrink: 0;
}
.necox-ad-card__meta-icon {
width: var(--necox-card-icon-size, 13px);
height: var(--necox-card-icon-size, 13px);
flex-shrink: 0;
}
/* ── Ikon renkleri ── */
.necox-ad-card__cat .necox-ad-card__meta-icon {
color: var(--necox-card-cat-icon-color, inherit);
}
.necox-ad-card__loc .necox-ad-card__meta-icon {
color: var(--necox-card-loc-icon-color, inherit);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
v7.16.8.67 — COMPACT GRID KART (tum sitenin varsayilan grid karti)
"Asagi uzun his" vermeyen dengeli kart: 3/2 gorsel + tek-satir aciklama +
eyebrow(kategori sol + ilan no sag) + fiyat satiri(fiyat sol + teklif sag) +
alt meta(tarih . goruntulenme . konum sag alt).
SADECE grid gorunumu (--grid) — liste (--list) ve action stilleri (--s1..s8) DOKUNULMAZ.
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Gorsel: 4/3 -> 3/2 (yatay, kart kareye yakin -> dikey-uzun his gider) */
.necox-ad-card--grid .necox-ad-card__media { aspect-ratio: 3/2; }
.necox-ad-card--grid .necox-ad-card__thumb img { aspect-ratio: 3/2; }
/* Govde orantili dikey ritim */
.necox-ad-card--grid .necox-ad-card__body { padding: 14px 16px 15px; gap: 0; }
/* 1) Eyebrow: kategori (baslik ustu, tek basina — STANDART, mono caps) */
.necox-ad-card--grid .necox-ad-card__eyebrow-row {
display: flex; align-items: center; gap: 10px; margin: 0 0 7px;
}
.necox-ad-card--grid .necox-ad-card__cat-top {
font-family: var(--necox-mono-font);
font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
color: var(--necox-card-cat-color, var(--necox-primary)); text-decoration: none;
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
/* v7.17.52 — PageSpeed target-size: link 180x16px idi (min 24x24 gerekir).
Gorunum bozulmadan dokunma alanini buyut: inline-flex + min-height 24px
(eyebrow-row align-items:center oldugu icin metin yine ortalanir). */
display: inline-flex; align-items: center; min-height: 24px;
}
.necox-ad-card--grid .necox-ad-card__cat-top:hover { opacity: .8; }
.necox-ad-card--grid .necox-ad-card__ad-no--top {
flex: none; font-size: 10.5px; font-weight: 600; color: var(--necox-muted);
font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; letter-spacing: 0;
}
.necox-ad-card--grid .necox-ad-card__ad-no--top:hover { color: var(--necox-text); }
/* 2) Baslik — Hanken Grotesk (standart), 2 satir compact ritim */
.necox-ad-card--grid .necox-ad-card__title {
font-family: var(--necox-card-title-font, var(--necox-title-font));
font-size: var(--necox-card-title-size, 15.5px); font-weight: 700;
line-height: 1.3; letter-spacing: -.01em; margin: 0;
-webkit-line-clamp: 2; min-height: 2.6em;
}
/* 3) Aciklama — TEK satir (bos 2-satir slot kalkar -> en buyuk dikey tasarruf) */
.necox-ad-card--grid .necox-ad-card__excerpt {
-webkit-line-clamp: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
min-height: 0; margin: 6px 0 0; /* baslik-aciklama yakin */
}
.necox-ad-card--grid .necox-ad-card__excerpt--hidden { display: none; }
/* 4) Fiyat satiri: fiyat (sol, buyuk Hanken) + teklif (sag, ayni font) */
.necox-ad-card--grid .necox-ad-card__pricerow {
display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
margin: 12px 0 0; /* aciklama-fiyat: net grup ayrimi */
}
.necox-ad-card--grid .necox-ad-card__price { margin: 0; min-width: 0; }
.necox-ad-card--grid .necox-ad-card__price .necox-price {
font-family: var(--necox-card-price-font, var(--necox-title-font));
font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap;
}
.necox-ad-card--grid .necox-ad-card__price .necox-price__label,
.necox-ad-card--grid .necox-ad-card__price .necox-price__period,
.necox-ad-card--grid .necox-ad-card__price .necox-price__sub { font-size: 12px; white-space: nowrap; }
/* Teklif — fiyatla AYNI font (boyut/agirlik/renk) */
.necox-ad-card--grid .necox-ad-card__bids-pr {
flex: none; font-size: 20px; font-weight: 800; color: var(--necox-card-price-color, var(--necox-primary));
letter-spacing: -.02em; line-height: 1.1;
white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; align-self: baseline;
}
/* v7.16.13 STANDART — 5) Konum: ayri satir, divider ust kenarda (fiyat ile meta arasi).
Konum karta ait en belirgin ikincil bilgi; tek basina satir + amber ikon. */
.necox-ad-card--grid .necox-ad-card__loc--row {
display: flex; align-items: center; gap: 5px; min-width: 0;
padding-top: 11px; border-top: 1px solid var(--necox-border); margin-top: auto;
color: var(--necox-card-loc-color, var(--necox-muted)); text-decoration: none;
font-size: 13px;
}
.necox-ad-card--grid .necox-ad-card__loc--row span {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.necox-ad-card--grid .necox-ad-card__loc--row .necox-ad-card__meta-icon { color: var(--necox-primary); }
.necox-ad-card--grid .necox-ad-card__loc--row:hover { color: var(--necox-text); }
/* 6) Meta: tarih · goruntulenme (sol kume) ........ #ilanno (sag, AYRI) — MONO, en sonuk.
v7.16.13 — ilan no diger meta'dan net ayrik: sag uca itilir + sol pad + ince ayrac. */
.necox-ad-card--grid .necox-ad-card__meta {
display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap;
margin-top: 10px; padding-top: 0; border-top: 0; min-height: 0;
font-family: var(--necox-mono-font); font-size: 10.5px; letter-spacing: .01em;
color: var(--necox-muted);
}
.necox-ad-card--grid .necox-ad-card__date,
.necox-ad-card--grid .necox-ad-card__views { flex: none; }
.necox-ad-card--grid .necox-ad-card__ad-no--meta {
flex: none; font-weight: 600; cursor: pointer;
font-variant-numeric: tabular-nums; white-space: nowrap;
color: color-mix(in srgb, var(--necox-muted) 75%, transparent);
}
.necox-ad-card--grid .necox-ad-card__ad-no--meta:hover { color: var(--necox-text); }
/* ── Baslik gradient (CSS degiskeni ile) ── */
.necox-ad-card__title a.has-gradient,
.necox-ads-element--has-gradient .necox-ad-card__title a {
background: var(--necox-card-title-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── Ortak aksiyon SVG boyutlari ── */
.necox-ad-card__action-bar svg,
.necox-ad-card__action-stack svg,
.necox-ad-card__overlay-full svg,
.necox-ad-card__fan-wrap svg,
.necox-ad-card__side-panel svg,
.necox-ad-card__glass-bar svg,
.necox-ad-card__corner-actions svg,
.necox-ad-card__fav-float svg,
.necox-ad-card__fav-corner svg,
.necox-ad-card__hover-strip svg {
width: 16px;
height: 16px;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
STIL 1 — Alttan kayan ikonlar
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.necox-ad-card__action-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 8px;
padding: 10px;
background: linear-gradient(transparent, rgba(0,0,0,0.65));
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
z-index: 4;
}
.necox-ad-card:hover .necox-ad-card__action-bar {
transform: translateY(0);
}
.necox-ad-card__ab-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.2);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.25);
color: var(--necox-ad-overlay-text-color, #ffffff);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s, transform 0.15s;
}
.necox-ad-card__ab-btn:hover {
background: rgba(255,255,255,0.4);
transform: scale(1.12);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
STIL 2 — Sag ust kayan ikonlar
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.necox-ad-card__action-stack {
position: absolute;
top: 8px;
right: 8px;
display: flex;
flex-direction: column;
gap: 6px;
opacity: 0;
transform: translateX(8px);
transition: opacity 0.25s, transform 0.25s;
z-index: 4;
}
.necox-ad-card:hover .necox-ad-card__action-stack {
opacity: 1;
transform: translateX(0);
}
.necox-ad-card__action-pill {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s, color 0.2s;
color: var(--necox-muted);
border: none;
}
.necox-ad-card__action-pill:hover {
background: var(--necox-white);
color: var(--necox-primary, var(--necox-primary));
}
.necox-ad-card__action-pill svg { width: 15px; height: 15px; }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
STIL 3 — Tam overlay + blur
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.necox-ad-card__overlay-full {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.45);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
opacity: 0;
transition: opacity 0.3s;
z-index: 4;
}
.necox-ad-card:hover .necox-ad-card__overlay-full {
opacity: 1;
}
.necox-ad-card__ov-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
border: 1.5px solid rgba(255,255,255,0.5);
color: var(--necox-ad-overlay-text-color, #ffffff);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
transform: scale(0.7);
text-decoration: none;
}
.necox-ad-card:hover .necox-ad-card__ov-btn {
transform: scale(1);
}
.necox-ad-card__ov-btn:hover {
background: var(--necox-white);
color: var(--necox-text);
border-color: var(--necox-ad-overlay-text-color, #ffffff);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
STIL 4 — Favori kalp + alt etiketler
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.necox-ad-card--s4 { border-radius: 16px; }
.necox-ad-card--s4 .necox-ad-card__media { border-radius: 16px 16px 0 0; overflow: hidden; }
.necox-ad-card__fav-float {
position: absolute;
top: 10px;
right: 10px;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255,255,255,0.9);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
z-index: 4;
color: var(--necox-muted);
border: none;
}
.necox-ad-card__fav-float:hover {
color: var(--necox-danger, #e74c3c);
transform: scale(1.15);
}
.necox-ad-card__corner-actions {
position: absolute;
bottom: 10px;
right: 10px;
display: flex;
gap: 6px;
opacity: 0;
transform: translateY(6px);
transition: all 0.25s;
z-index: 4;
}
.necox-ad-card:hover .necox-ad-card__corner-actions {
opacity: 1;
transform: translateY(0);
}
.necox-ad-card__corner-btn {
padding: 6px 12px;
border-radius: 20px;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--necox-ad-overlay-text-color, #ffffff);
font-size: 11px;
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
transition: background 0.2s;
border: none;
}
.necox-ad-card__corner-btn:hover {
background: var(--necox-primary, var(--necox-primary));
}
.necox-ad-card__corner-btn svg { width: 13px; height: 13px; }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
STIL 5 — Alt serit + accent cizgi
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.necox-ad-card--s5 { overflow: visible; }
.necox-ad-card--s5::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: var(--necox-primary, var(--necox-primary));
transform: scaleX(0);
transition: transform 0.3s;
transform-origin: left;
z-index: 5;
border-radius: 0 0 10px 10px;
}
.necox-ad-card--s5:hover::after {
transform: scaleX(1);
}
.necox-ad-card__hover-strip {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-around;
padding: 8px 16px;
/* v7.16.10 — opak beyaz arka plan KALDIRILDI, cam efekti (glassmorphism).
Koyu yari saydam + blur: gorsel uzerinde okunabilir, premium his. */
background: rgba(17, 24, 39, 0.38);
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
border-top: 0.5px solid rgba(255, 255, 255, 0.18);
transform: translateY(100%);
transition: transform 0.3s;
z-index: 4;
}
/* Cam zemin uzerinde ikonlar/metin acik renk + okunabilir golge */
.necox-ad-card--s5 .necox-ad-card__strip-btn {
color: rgba(255, 255, 255, 0.92);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
/* v7.16.10 — her buton ayri cam kapsul (glassmorphism). */
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
border: 0.5px solid rgba(255, 255, 255, 0.18);
border-radius: 10px;
padding: 6px 8px;
transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
}
.necox-ad-card--s5 .necox-ad-card__strip-btn:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.35);
transform: translateY(-1px);
}
.necox-ad-card--s5 { overflow: hidden; }
.necox-ad-card--s5:hover .necox-ad-card__hover-strip {
transform: translateY(0);
}
.necox-ad-card__strip-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
cursor: pointer;
color: var(--necox-muted);
transition: color 0.2s;
background: none;
border: none;
font-size: 10px;
padding: 4px;
}
.necox-ad-card__strip-btn:hover {
color: var(--necox-primary, var(--necox-primary));
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
STIL 6 — Yelpaze ikonlar
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.necox-ad-card__fan-wrap {
position: absolute;
bottom: 10px;
right: 10px;
width: 40px;
height: 40px;
z-index: 4;
}
.necox-ad-card__fan-trigger {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.9);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
display: flex;
align-items: center;
justify-content: center;
color: var(--necox-muted);
position: absolute;
bottom: 0;
right: 0;
z-index: 5;
transition: transform 0.3s, background 0.3s, color 0.3s;
cursor: pointer;
}
.necox-ad-card__fan-trigger svg { transition: transform 0.3s; }
.necox-ad-card:hover .necox-ad-card__fan-trigger {
background: var(--necox-primary, var(--necox-primary));
color: var(--necox-ad-overlay-text-color, #ffffff);
transform: rotate(45deg);
}
.necox-ad-card:hover .necox-ad-card__fan-trigger svg {
transform: rotate(-45deg);
}
.necox-ad-card__fan-item {
position: absolute;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
display: flex;
align-items: center;
justify-content: center;
color: var(--necox-muted);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
bottom: 2px;
right: 2px;
opacity: 0;
transform: scale(0.5);
border: none;
}
.necox-ad-card__fan-item svg { width: 14px; height: 14px; }
.necox-ad-card__fan-item:hover { color: var(--necox-primary, var(--necox-primary)); background: var(--necox-white); }
.necox-ad-card:hover .necox-ad-card__fan-item {
opacity: 1;
transform: scale(1);
}
.necox-ad-card:hover .necox-ad-card__fan-item:nth-child(1) { bottom: 44px; right: 2px; transition-delay: 0.05s; }
.necox-ad-card:hover .necox-ad-card__fan-item:nth-child(2) { bottom: 34px; right: 38px; transition-delay: 0.1s; }
.necox-ad-card:hover .necox-ad-card__fan-item:nth-child(3) { bottom: 4px; right: 42px; transition-delay: 0.15s; }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
STIL 7 — Sag kenar kayar panel
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.necox-ad-card--s7 { border-radius: 14px; }
.necox-ad-card--s7 .necox-ad-card__media { border-radius: 14px 14px 0 0; overflow: hidden; }
.necox-ad-card__side-panel {
position: absolute;
top: 0;
right: 0;
width: 52px;
height: 100%;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
z-index: 4;
border-left: 1px solid rgba(255,255,255,0.1);
}
.necox-ad-card:hover .necox-ad-card__side-panel {
transform: translateX(0);
}
.necox-ad-card__sp-btn {
width: 34px;
height: 34px;
border-radius: 8px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.15);
color: var(--necox-ad-overlay-text-color, rgba(255,255,255,0.85));
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
}
.necox-ad-card__sp-btn:hover {
background: rgba(255,255,255,0.3);
color: var(--necox-ad-overlay-text-color, #ffffff);
transform: scale(1.1);
}
.necox-ad-card__sp-btn svg { width: 15px; height: 15px; }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
STIL 8 — Alt cam serit + kose favori
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.necox-ad-card__fav-corner {
position: absolute;
top: 8px;
right: 8px;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(0,0,0,0.35);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
color: var(--necox-ad-overlay-text-color, rgba(255,255,255,0.8));
cursor: pointer;
transition: all 0.2s;
z-index: 4;
opacity: 0;
border: none;
}
.necox-ad-card:hover .necox-ad-card__fav-corner { opacity: 1; }
.necox-ad-card__fav-corner:hover { color: var(--necox-danger, #e74c3c); background: rgba(255,255,255,0.9); transform: scale(1.15); }
.necox-ad-card__fav-corner svg { width: 14px; height: 14px; }
.necox-ad-card__glass-bar {
position: absolute;
bottom: 8px;
left: 8px;
right: 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 7px 10px;
background: rgba(255,255,255,0.15);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.25);
border-radius: 10px;
opacity: 0;
transform: translateY(8px);
transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
z-index: 4;
}
.necox-ad-card:hover .necox-ad-card__glass-bar {
opacity: 1;
transform: translateY(0);
}
.necox-ad-card__gb-btn {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 6px;
background: rgba(255,255,255,0.2);
color: var(--necox-ad-overlay-text-color, #ffffff);
font-size: 10px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
border: none;
white-space: nowrap;
text-decoration: none;
}
.necox-ad-card__gb-btn:hover { background: rgba(255,255,255,0.45); }
.necox-ad-card__gb-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.necox-ad-card__gb-sep { width: 1px; height: 18px; background: rgba(255,255,255,0.2); flex-shrink: 0; }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
AJAX SEARCH SONUC PANELI
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.necox-search-panel { position: absolute; top: 100%; left: 0; right: 0; background: var(--necox-white); border: 1px solid #e0e0e0; border-radius: 0 0 12px 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.12); max-height: 480px; overflow-y: auto; z-index: 500; display: none; }
.necox-search-panel.is-open { display: block; }
.necox-search-panel__cats { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--necox-border); flex-wrap: wrap; }
.necox-search-panel__cat-tag { font-size: 12px; padding: 4px 10px; background: var(--necox-bg); border-radius: 20px; color: var(--necox-muted); text-decoration: none; white-space: nowrap; }
.necox-search-panel__cat-tag:hover { background: var(--necox-primary, var(--necox-primary)); color: #ffffff; }
.necox-search-panel__cat-count { font-size: 10px; color: var(--necox-muted); margin-left: 2px; }
.necox-search-panel__results { list-style: none; margin: 0; padding: 0; }
.necox-search-panel__item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--necox-border); transition: background 0.12s; }
.necox-search-panel__item:hover { background: var(--necox-bg); }
.necox-search-panel__item-thumb { width: 56px; height: 42px; border-radius: 4px; object-fit: cover; flex-shrink: 0; background: var(--necox-bg); }
.necox-search-panel__item-body { flex: 1; min-width: 0; }
.necox-search-panel__item-title { font-size: 13px; font-weight: 500; color: var(--necox-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.necox-search-panel__item-title a { color: inherit; text-decoration: none; }
.necox-search-panel__item-meta { font-size: 11px; color: var(--necox-muted); margin-top: 2px; }
.necox-search-panel__item-price { font-size: 14px; font-weight: 700; color: var(--necox-danger, #d54b4f); flex-shrink: 0; }
.necox-search-panel__recent { padding: 12px 16px; }
.necox-search-panel__recent-title { font-size: 11px; font-weight: 600; color: var(--necox-muted); text-transform: uppercase; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.necox-search-panel__recent-clear { font-size: 11px; color: #d63638; cursor: pointer; background: none; border: none; text-transform: none; }
.necox-search-panel__recent-list { list-style: none; padding: 0; margin: 0; }
.necox-search-panel__recent-item { padding: 6px 0; font-size: 13px; color: var(--necox-muted); cursor: pointer; }
.necox-search-panel__recent-item:hover { color: var(--necox-primary, var(--necox-primary)); }
.necox-search-panel__empty { padding: 24px 16px; text-align: center; color: var(--necox-muted); font-size: 13px; }
@media (max-width: 768px) {
.necox-search-panel { position: fixed; inset: 0; max-height: none; border-radius: 0; z-index: 10000; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
LIST GORUNUMU
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.necox-ad-card--list {
display: flex;
flex-direction: row;
}
.necox-ad-card--list .necox-ad-card__media {
flex: 0 0 220px;
/* v6.70.4 — Grid view'da 4/3 ratio var, list view'da sabit width + parent yuksekligine uyma */
aspect-ratio: auto;
align-self: stretch;
}
.necox-ad-card--list .necox-ad-card__thumb img {
aspect-ratio: 4/3;
height: 100%;
}
.necox-ad-card--list .necox-ad-card__body {
flex: 1;
/* v7.17.84 — KOK NEDEN FIX (kullanici: Preset 3'te bazi kartlar sag border'dan
TASIYOR, bazilari kompakt). Flex item varsayilan min-width:auto -> uzun
baslik/aciklama icerikli body KUCULMUYOR, kartin sag kenarini asiyordu
(Playwright olcum: body sag 697px > kart sag 543px = 154px tasma; KISA icerikli
kartlar sigdigi icin temiz gorunuyordu -> tutarsizlik). min-width:0 body'nin
kuculup icindeki baslik/aciklama ellipsis yapmasina izin verir -> TUM kartlar
kart kutusuna sigar, gorunum birligi olusur. */
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: 18px 22px;
}
/* v7.17.86 — KOK NEDEN (v7.17.84 yuzeysel kaldi): min-width:0 SADECE __body'ye konmustu;
flexbox'ta zincirdeki HER item min-width:0 olmali — ic cocuklar (__meta, __title,
__excerpt, __eyebrow-row, __pricerow, alt span/__ad-no) min-width:auto kalinca shrink
KIRILIR -> body kuculmez -> kart sag border'dan tasar (overflow:hidden gorsel kirpar ama
geometri tasar). Playwright kanit: 4 preset x 8 kart TASIYORDU; ic cocuklara min-width:0
enjekte edilince (deploy-oncesi addStyleTag testi) tasma 8->0 dustu, 4 preset hepsinde ✓.
NOT: rapor "LiteSpeed combine cache" sandi ama YANLIS — combine CSS guncel, kural matched;
gercek neden ic flex zinciriydi. */
.necox-ad-card--list .necox-ad-card__body > *,
.necox-ad-card--list .necox-ad-card__meta,
.necox-ad-card--list .necox-ad-card__meta > * {
min-width: 0;
}
/* v7.16.13 STANDART — net dikey ritim (8px tabanli, "tikis tikis" degil).
Tum dikey bosluklari margin sifirla, sonra her ogeye anlamli ust bosluk ver. */
.necox-ad-card--list .necox-ad-card__title,
.necox-ad-card--list .necox-ad-card__excerpt,
.necox-ad-card--list .necox-ad-card__pricerow,
.necox-ad-card--list .necox-ad-card__price,
.necox-ad-card--list .necox-ad-card__loc--row,
.necox-ad-card--list .necox-ad-card__meta { margin: 0; min-height: 0; }
/* Liste'de aciklama 2 satira kadar, ama bos slot yer kaplamasin */
/* v7.17.84 — overflow-wrap:anywhere: bosluksuz cok uzun kelime/string ("crosssssss...")
karti asmasin diye kelime icinden kirilir (Playwright: kart 6 aciklama scroll 336>186). */
.necox-ad-card--list .necox-ad-card__excerpt { margin-top: 8px; -webkit-line-clamp: 2; overflow-wrap: anywhere; word-break: break-word; } /* baslik-aciklama */
.necox-ad-card--list .necox-ad-card__excerpt--hidden { display: none; }
.necox-ad-card--list .necox-ad-card__pricerow { margin-top: 16px; } /* aciklama-fiyat: net grup ayrimi */
.necox-ad-card--list .necox-ad-card__loc--row { margin-top: 13px; } /* fiyat-konum */
.necox-ad-card--list .necox-ad-card__meta { margin-top: 13px; } /* konum-meta: konum+meta esit ayrik (yapisik degil) */
/* Liste eyebrow: kategori baslik ustu, mono caps */
.necox-ad-card--list .necox-ad-card__eyebrow-row { display: flex; align-items: center; margin: 0 0 8px; }
.necox-ad-card--list .necox-ad-card__cat-top {
font-family: var(--necox-mono-font);
font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
color: var(--necox-card-cat-color, var(--necox-primary)); text-decoration: none;
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
/* v7.17.52 — PageSpeed target-size: min 24px dokunma alani (bkz. grid varianti) */
display: inline-flex; align-items: center; min-height: 24px;
}
.necox-ad-card--list .necox-ad-card__cat-top:hover { opacity: .8; }
.necox-ad-card--list .necox-ad-card__title {
font-family: var(--necox-card-title-font, var(--necox-title-font));
font-size: var(--necox-card-title-size, 17px); font-weight: 700; letter-spacing: -.01em;
/* v7.17.72 — Liste basligi TEK satir: -webkit-box/line-clamp:1 yerine GERCEK
yatay ellipsis. Box-clamp tek satirda son kelime sarinca yer varken erken
"..." koyuyordu ("samsung piril piril s23 ultra" full 209px, kutu 225px
-> 16px bos ama kesik). nowrap+text-overflow ile sadece sagda yer
kalmayinca kesilir; soldan saga dogru doldurur. min-height/-webkit-box ezilir. */
display: block; -webkit-line-clamp: none; -webkit-box-orient: initial;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
min-height: 0;
}
.necox-ad-card--list .necox-ad-card__title a {
display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.necox-ad-card--list .necox-ad-card__price .necox-price {
font-family: var(--necox-card-price-font, var(--necox-title-font));
font-size: var(--necox-card-price-size, 22px); font-weight: 800; letter-spacing: -.02em;
}
/* v7.16.13 STANDART — liste: konum ayri satir + meta mono (#ilanno) */
.necox-ad-card--list .necox-ad-card__loc--row {
display: flex; align-items: center; gap: 5px; min-width: 0; margin-top: 8px;
color: var(--necox-card-loc-color, var(--necox-muted)); text-decoration: none; font-size: 13px;
}
.necox-ad-card--list .necox-ad-card__loc--row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.necox-ad-card--list .necox-ad-card__loc--row .necox-ad-card__meta-icon { color: var(--necox-primary); }
.necox-ad-card--list .necox-ad-card__loc--row:hover { color: var(--necox-text); }
/* v7.16.13 — meta 3 oge ESIT DAGILIMLI: tarih (sol) · goruntulenme (orta) · ilan no (sag).
space-between ile goruntulenme tam ortaya gelir, tarihe yapisik durmaz. */
.necox-ad-card--list .necox-ad-card__meta {
display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap;
font-family: var(--necox-mono-font); font-size: 10.5px; letter-spacing: .01em;
color: var(--necox-muted);
}
.necox-ad-card--list .necox-ad-card__date,
.necox-ad-card--list .necox-ad-card__views { flex: none; }
.necox-ad-card--list .necox-ad-card__ad-no--meta {
flex: none; font-weight: 600; cursor: pointer;
font-variant-numeric: tabular-nums; white-space: nowrap;
color: color-mix(in srgb, var(--necox-muted) 75%, transparent);
}
.necox-ad-card--list .necox-ad-card__ad-no--meta:hover { color: var(--necox-text); }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1024px) {
.necox-ad-card__title {
min-height: auto;
}
.necox-ad-card__excerpt {
-webkit-line-clamp: 2;
}
.necox-ad-card--list .necox-ad-card__media {
flex: 0 0 180px;
}
}
@media (max-width: 640px) {
.necox-ad-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.necox-ad-card__body { padding: 10px 12px; }
.necox-ad-card__title {
font-size: var(--necox-card-title-size, 13px);
-webkit-line-clamp: 2;
min-height: auto;
}
.necox-ad-card__excerpt {
font-size: calc(var(--necox-card-excerpt-size, 13px) * 0.9);
-webkit-line-clamp: 1;
margin-bottom: 4px;
}
.necox-price { font-size: var(--necox-card-price-size, 14px); }
.necox-ad-card__price { min-height: auto; margin-bottom: 4px; }
.necox-ad-card__meta {
font-size: calc(var(--necox-card-meta-size, 12px) * 0.9);
gap: 6px;
min-height: auto;
}
/* v7.17.72 — max-width KISITI yalnizca ESKI meta-ici konum/kategori icindir
(.necox-ad-card__loc / __cat, meta satiri icinde yan yana durur).
AYRI SATIR konum (.necox-ad-card__loc--row) bundan HARIC tutulur: kendi
satirinda kart genisligi kadar yer vardir, 100/120px'e kisilirsa "Sivas,
Sivas Merkez" gibi metinler ortada bos alan varken erken "..." yiyordu.
loc--row zaten yatay text-overflow:ellipsis ile dogru kesilir (sat.1027). */
.necox-ad-card__cat:not(.necox-ad-card__cat-top),
.necox-ad-card__loc:not(.necox-ad-card__loc--row) {
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.necox-ad-card--list { flex-direction: column; }
.necox-ad-card--list .necox-ad-card__media { flex: none; }
.necox-ad-card--list .necox-ad-card__excerpt { -webkit-line-clamp: 2; }
}
@media (max-width: 400px) {
.necox-ad-grid { grid-template-columns: 1fr; }
/* v7.17.72 — bkz. 640px kurali: ayri satir konum (loc--row) HARIC. */
.necox-ad-card__cat:not(.necox-ad-card__cat-top),
.necox-ad-card__loc:not(.necox-ad-card__loc--row) {
max-width: 100px;
}
.necox-ad-card__excerpt { display: none; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
RIBBON / ETIKET SISTEMI
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.necox-ad-card__ribbons {
position: absolute;
z-index: 4;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
/* Konum varyasyonlari */
.necox-ad-card__ribbons--top-left { top: 8px; left: 8px; }
.necox-ad-card__ribbons--top-right { top: 8px; right: 8px; }
.necox-ad-card__ribbons--bottom-left { bottom: 8px; left: 8px; }
.necox-ad-card__ribbons--bottom-right { bottom: 8px; right: 8px; }
/* Yon varyasyonlari */
.necox-ad-card__ribbons--horizontal { flex-direction: row; }
.necox-ad-card__ribbons--vertical { flex-direction: column; }
.necox-ad-card__ribbon {
display: inline-block;
padding: var(--necox-promo-pad-v, var(--necox-ribbon-pad-v, 2px))
var(--necox-promo-pad-h, var(--necox-ribbon-pad-h, 8px));
font-size: var(--necox-promo-font-size, var(--necox-ribbon-font-size, 10px));
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: var(--necox-ribbon-radius, 4px);
color: var(--necox-ad-overlay-text-color, #ffffff);
line-height: 1.4;
}
/* v6.15.0 (Faz P1) — Promo cascade chain
promo-settings > el-ads ribbon > fallback
Border ve text-color promo-* degiskenleri varsa override eder. */
/* v7.17.26 — Promo rozet ANIMASYONU (admin onizlemesiyle birebir).
fonts.php emitter --necox-promo-{tip}-anim-name / -anim-duration degiskenlerini
basar (admin.js getRibbonStyle ile ayni eslemesi). Animasyon "Yok" ise degisken
basilmaz → anim-name var()'i bos kalir, animation gecersiz olur (animasyon yok).
Keyframe'ler asagida (admin onizlemesindeki promoKeyframesCss ile ayni). */
.necox-ad-card__ribbon--urgent { animation: var(--necox-promo-urgent-anim-name) var(--necox-promo-urgent-anim-duration, 2s) ease-in-out infinite; }
.necox-ad-card__ribbon--featured { animation: var(--necox-promo-topad-anim-name) var(--necox-promo-topad-anim-duration, 2s) ease-in-out infinite; }
.necox-ad-card__ribbon--vip { animation: var(--necox-promo-vip-anim-name) var(--necox-promo-vip-anim-duration, 2s) ease-in-out infinite; }
.necox-ad-card__ribbon--pinned { animation: var(--necox-promo-pinned-anim-name) var(--necox-promo-pinned-anim-duration, 2s) ease-in-out infinite; }
.necox-ad-card__ribbon--hot { animation: var(--necox-promo-hot-anim-name) var(--necox-promo-hot-anim-duration, 2s) ease-in-out infinite; }
.necox-ad-card__ribbon--new { animation: var(--necox-promo-new-anim-name) var(--necox-promo-new-anim-duration, 2s) ease-in-out infinite; }
.necox-ad-card__ribbon--negotiable { animation: var(--necox-promo-negotiable-anim-name) var(--necox-promo-negotiable-anim-duration, 2s) ease-in-out infinite; }
.necox-ad-card__ribbon--swap { animation: var(--necox-promo-swap-anim-name) var(--necox-promo-swap-anim-duration, 2s) ease-in-out infinite; }
.necox-ad-card__ribbon--sold { animation: var(--necox-promo-sold-anim-name) var(--necox-promo-sold-anim-duration, 2s) ease-in-out infinite; }
@keyframes necox-promo-pulse { 0%,100%{opacity:1} 50%{opacity:.55} }
@keyframes necox-promo-shake { 0%,100%{transform:translateX(0)} 10%,30%,50%,70%,90%{transform:translateX(-2px)} 20%,40%,60%,80%{transform:translateX(2px)} }
@keyframes necox-promo-bounce { 0%,100%{transform:translateY(0)} 25%{transform:translateY(-4px)} 50%{transform:translateY(0)} 75%{transform:translateY(-2px)} }
@keyframes necox-promo-glow { 0%,100%{box-shadow:0 0 0 rgba(255,255,255,0);filter:brightness(1)} 50%{box-shadow:0 0 12px rgba(255,255,255,.6);filter:brightness(1.2)} }
@keyframes necox-promo-flash { 0%,49%,100%{opacity:1} 50%,99%{opacity:.2} }
@keyframes necox-promo-slide { 0%{transform:translateX(-3px)} 50%{transform:translateX(3px)} 100%{transform:translateX(-3px)} }
@keyframes necox-promo-scale { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
/* Erisilebilirlik: hareketi azalt tercihinde animasyonlari kapat */
@media (prefers-reduced-motion: reduce) {
.necox-ad-card__ribbon { animation: none !important; }
}
.necox-ad-card__ribbon--urgent {
background: var(--necox-promo-urgent-bg, var(--necox-ribbon-urgent-bg, linear-gradient(135deg, #ef4444, #dc2626)));
color: var(--necox-promo-urgent-text-color, #ffffff);
border: var(--necox-promo-urgent-border-width, 0) solid var(--necox-promo-urgent-border-color, transparent);
border-radius: var(--necox-promo-urgent-border-radius, var(--necox-ribbon-radius, 4px));
}
.necox-ad-card__ribbon--featured {
background: var(--necox-promo-topad-bg, var(--necox-ribbon-featured-bg, linear-gradient(135deg, #f59e0b, #d97706)));
color: var(--necox-promo-topad-text-color, #ffffff);
border: var(--necox-promo-topad-border-width, 0) solid var(--necox-promo-topad-border-color, transparent);
border-radius: var(--necox-promo-topad-border-radius, var(--necox-ribbon-radius, 4px));
}
.necox-ad-card__ribbon--vip {
background: var(--necox-promo-vip-bg, linear-gradient(135deg, #7c3aed, #6d28d9));
color: var(--necox-promo-vip-text-color, #ffffff);
border: var(--necox-promo-vip-border-width, 0) solid var(--necox-promo-vip-border-color, transparent);
border-radius: var(--necox-promo-vip-border-radius, var(--necox-ribbon-radius, 4px));
}
.necox-ad-card__ribbon--pinned {
background: var(--necox-promo-pinned-bg, linear-gradient(135deg, #6b7280, #4b5563));
color: var(--necox-promo-pinned-text-color, #ffffff);
border: var(--necox-promo-pinned-border-width, 0) solid var(--necox-promo-pinned-border-color, transparent);
border-radius: var(--necox-promo-pinned-border-radius, var(--necox-ribbon-radius, 4px));
}
.necox-ad-card__ribbon--hot {
background: var(--necox-promo-hot-bg, linear-gradient(135deg, #f97316, #ea580c));
color: var(--necox-promo-hot-text-color, #ffffff);
border: var(--necox-promo-hot-border-width, 0) solid var(--necox-promo-hot-border-color, transparent);
border-radius: var(--necox-promo-hot-border-radius, var(--necox-ribbon-radius, 4px));
}
.necox-ad-card__ribbon--new {
background: var(--necox-promo-new-bg, linear-gradient(135deg, #10b981, #059669));
color: var(--necox-promo-new-text-color, #ffffff);
border: var(--necox-promo-new-border-width, 0) solid var(--necox-promo-new-border-color, transparent);
border-radius: var(--necox-promo-new-border-radius, var(--necox-ribbon-radius, 4px));
}
.necox-ad-card__ribbon--negotiable {
background: var(--necox-promo-negotiable-bg, var(--necox-ribbon-negotiable-bg, linear-gradient(135deg, #3b82f6, #2563eb)));
color: var(--necox-promo-negotiable-text-color, #ffffff);
border: var(--necox-promo-negotiable-border-width, 0) solid var(--necox-promo-negotiable-border-color, transparent);
border-radius: var(--necox-promo-negotiable-border-radius, var(--necox-ribbon-radius, 4px));
}
.necox-ad-card__ribbon--swap {
background: var(--necox-promo-swap-bg, var(--necox-ribbon-swap-bg, linear-gradient(135deg, #fb923c, #ea580c)));
color: var(--necox-promo-swap-text-color, #ffffff);
border: var(--necox-promo-swap-border-width, 0) solid var(--necox-promo-swap-border-color, transparent);
border-radius: var(--necox-promo-swap-border-radius, var(--necox-ribbon-radius, 4px));
}
.necox-ad-card__ribbon--sold {
background: var(--necox-promo-sold-bg, var(--necox-ribbon-sold-bg, linear-gradient(135deg, #6b7280, #4b5563)));
color: var(--necox-promo-sold-text-color, #ffffff);
border: var(--necox-promo-sold-border-width, 0) solid var(--necox-promo-sold-border-color, transparent);
border-radius: var(--necox-promo-sold-border-radius, var(--necox-ribbon-radius, 4px));
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
v6.18.0 — RIBBON ANIMASYONLARI
━━━━━━━━━━━━━━━━━━━━━━━━━━━
Tip basina --necox-promo--anim-name + --necox-promo--anim-duration
degiskenleri admin panelden gelir. Default: none / 2s.
transform-origin center, GPU-friendly (transform/opacity).
*/
.necox-ad-card__ribbon { transform-origin: center; will-change: auto; }
.necox-ad-card__ribbon--featured {
animation: var(--necox-promo-topad-anim-name, none) var(--necox-promo-topad-anim-duration, 2s) ease-in-out infinite;
}
.necox-ad-card__ribbon--urgent {
animation: var(--necox-promo-urgent-anim-name, none) var(--necox-promo-urgent-anim-duration, 2s) ease-in-out infinite;
}
.necox-ad-card__ribbon--vip {
animation: var(--necox-promo-vip-anim-name, none) var(--necox-promo-vip-anim-duration, 2s) ease-in-out infinite;
}
.necox-ad-card__ribbon--pinned {
animation: var(--necox-promo-pinned-anim-name, none) var(--necox-promo-pinned-anim-duration, 2s) ease-in-out infinite;
}
.necox-ad-card__ribbon--hot {
animation: var(--necox-promo-hot-anim-name, none) var(--necox-promo-hot-anim-duration, 2s) ease-in-out infinite;
}
.necox-ad-card__ribbon--new {
animation: var(--necox-promo-new-anim-name, none) var(--necox-promo-new-anim-duration, 2s) ease-in-out infinite;
}
.necox-ad-card__ribbon--negotiable {
animation: var(--necox-promo-negotiable-anim-name, none) var(--necox-promo-negotiable-anim-duration, 2s) ease-in-out infinite;
}
.necox-ad-card__ribbon--swap {
animation: var(--necox-promo-swap-anim-name, none) var(--necox-promo-swap-anim-duration, 2s) ease-in-out infinite;
}
.necox-ad-card__ribbon--sold {
animation: var(--necox-promo-sold-anim-name, none) var(--necox-promo-sold-anim-duration, 2s) ease-in-out infinite;
}
/* 7 keyframes — sade, GPU-friendly (transform/opacity sadece) */
@keyframes necox-promo-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
@keyframes necox-promo-shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
20%, 40%, 60%, 80% { transform: translateX(2px); }
}
@keyframes necox-promo-bounce {
0%, 100% { transform: translateY(0); }
25% { transform: translateY(-4px); }
50% { transform: translateY(0); }
75% { transform: translateY(-2px); }
}
@keyframes necox-promo-glow {
0%, 100% { box-shadow: 0 0 0 rgba(255,255,255,0); filter: brightness(1); }
50% { box-shadow: 0 0 12px rgba(255,255,255,0.6); filter: brightness(1.2); }
}
@keyframes necox-promo-flash {
0%, 49%, 100% { opacity: 1; }
50%, 99% { opacity: 0.2; }
}
@keyframes necox-promo-slide {
0% { transform: translateX(-3px); }
50% { transform: translateX(3px); }
100% { transform: translateX(-3px); }
}
@keyframes necox-promo-scale {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.12); }
}
/* prefers-reduced-motion: erisilebilirlik */
@media (prefers-reduced-motion: reduce) {
.necox-ad-card__ribbon { animation: none !important; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
HIGHLIGHTED (VURGULU) ILAN
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.necox-ad-card--highlighted {
border-color: var(--necox-ads-highlight-border, #f59e0b);
background: var(--necox-ads-highlight-bg, #fffbeb);
}
.necox-ad-card--highlighted:hover {
border-color: var(--necox-ads-highlight-border, #d97706);
box-shadow: 0 8px 32px rgba(245, 158, 11, 0.2);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
SATILDI DURUMU
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.necox-ad-card--sold .necox-ad-card__media::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0,0,0,0.35);
z-index: 2;
pointer-events: none;
}
.necox-ad-card--sold .necox-ad-card__thumb img {
filter: grayscale(60%);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
URUN DURUMU ETIKETI
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.necox-ad-card__condition {
position: absolute;
bottom: 8px;
left: 8px;
z-index: 3;
padding: 2px 8px;
font-size: 10px;
font-weight: 600;
color: var(--necox-ad-overlay-text-color, #ffffff);
background: rgba(0,0,0,0.55);
border-radius: 4px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
FIYAT TIPLERI
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.necox-price__old {
text-decoration: line-through;
/* v7.17.52 — PageSpeed kontrast: eski opacity 0.55 + parent fiyat rengi (#0087a6)
koyu presette efektif 3.08 veriyordu; opacity 1.0'da bile preset fiyat rengi
4.42 (esik 4.5 alti). COZUM: ana metin rengine bagla (--necox-text her presette
arka plana karsi yuksek kontrastli) + opacity 0.8 (silik ama esik ustu, koyu
Ocean'da ~7.2). Hem koyu hem acik presette gecerli; ustu cizili zaten ayirir. */
color: var(--necox-text);
opacity: 0.8;
font-size: 0.85em;
margin-right: 6px;
}
.necox-price__label {
font-size: 0.9em;
font-weight: 600;
opacity: 0.85;
}
.necox-price__sub {
font-size: 0.8em;
opacity: 0.65;
margin-left: 4px;
}
.necox-price__bids {
display: inline-block;
font-size: 0.75em;
font-weight: 500;
opacity: 0.7;
margin-left: 6px;
padding: 1px 6px;
background: rgba(0,0,0,0.06);
border-radius: 4px;
}
.necox-price__period {
font-size: 0.75em;
font-weight: 400;
opacity: 0.7;
margin-left: 2px;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
PLACEHOLDER GORSEL
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.necox-ad-card__placeholder {
opacity: 0.6;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
NEON BORDER EFEKTI (3 renk)
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.necox-ad-card--neon {
--neon-c1: var(--necox-ads-neon-c1, var(--necox-primary));
--neon-c2: var(--necox-ads-neon-c2, #0077b6);
--neon-c3: var(--necox-ads-neon-c3, #7c3aed);
--neon-size: var(--necox-ads-neon-size, 8px);
position: relative;
border-color: transparent;
transition: box-shadow 0.4s ease, transform 0.3s ease, border-color 0.3s ease;
}
/* Sabit glow — hover'da 3 renkli parlama */
.necox-ad-card--neon:hover {
border-color: var(--neon-c1);
box-shadow:
0 0 var(--neon-size) var(--neon-c1),
0 0 calc(var(--neon-size) * 2) var(--neon-c2),
0 0 calc(var(--neon-size) * 4) color-mix(in srgb, var(--neon-c3) 40%, transparent),
inset 0 0 calc(var(--neon-size) / 2) color-mix(in srgb, var(--neon-c1) 15%, transparent);
}
/* Donen gradient border — ::before ile conic-gradient */
.necox-ad-card--neon-rotate::before {
content: '';
position: absolute;
inset: -2px;
z-index: -1;
border-radius: inherit;
background: conic-gradient(
from 0deg,
var(--neon-c1),
var(--neon-c2),
var(--neon-c3),
var(--neon-c1)
);
opacity: 0;
transition: opacity 0.3s ease;
animation: necox-neon-spin 3s linear infinite paused;
}
.necox-ad-card--neon-rotate::after {
content: '';
position: absolute;
inset: 1px;
z-index: -1;
border-radius: inherit;
background: inherit;
}
.necox-ad-card--neon-rotate:hover::before {
opacity: 1;
animation-play-state: running;
}
.necox-ad-card--neon-rotate:hover {
border-color: transparent;
box-shadow:
0 0 var(--neon-size) var(--neon-c1),
0 0 calc(var(--neon-size) * 2) var(--neon-c2),
0 0 calc(var(--neon-size) * 3) color-mix(in srgb, var(--neon-c3) 35%, transparent);
}
@keyframes necox-neon-spin {
to { transform: rotate(360deg); }
}
/* Kart arka planini ::after ile kapat — donen gradient'in uzerini ort */
.necox-ad-card--neon-rotate {
overflow: visible;
z-index: 0;
}
.necox-ad-card--neon-rotate > * {
position: relative;
z-index: 1;
}
/* Pulse efekti — 3 renk arasinda nabiz gecisi */
.necox-ad-card--neon-pulse:hover {
animation: necox-neon-pulse-3c 3s ease-in-out infinite;
}
@keyframes necox-neon-pulse-3c {
0%, 100% {
border-color: var(--neon-c1);
box-shadow:
0 0 var(--neon-size) var(--neon-c1),
0 0 calc(var(--neon-size) * 2) var(--neon-c1),
0 0 calc(var(--neon-size) * 4) color-mix(in srgb, var(--neon-c1) 35%, transparent);
}
33% {
border-color: var(--neon-c2);
box-shadow:
0 0 calc(var(--neon-size) * 1.3) var(--neon-c2),
0 0 calc(var(--neon-size) * 2.5) var(--neon-c2),
0 0 calc(var(--neon-size) * 5) color-mix(in srgb, var(--neon-c2) 45%, transparent),
inset 0 0 var(--neon-size) color-mix(in srgb, var(--neon-c2) 15%, transparent);
}
66% {
border-color: var(--neon-c3);
box-shadow:
0 0 calc(var(--neon-size) * 1.5) var(--neon-c3),
0 0 calc(var(--neon-size) * 3) var(--neon-c3),
0 0 calc(var(--neon-size) * 6) color-mix(in srgb, var(--neon-c3) 50%, transparent),
inset 0 0 calc(var(--neon-size) * 0.8) color-mix(in srgb, var(--neon-c3) 20%, transparent);
}
}
/* Sadece highlighted ilanlara */
.necox-ad-card--neon-highlighted-only:not(.necox-ad-card--highlighted) {
--neon-c1: transparent;
--neon-c2: transparent;
--neon-c3: transparent;
}
.necox-ad-card--neon-highlighted-only:not(.necox-ad-card--highlighted)::before {
display: none;
}
/* Harita koordinat verisi — gizli */
.necox-ad-card__coords { display: none !important; }
/* Ilan numarasi stilleri v3.73.0'da ad-number.css'e tasindi (K2 ozellestirilebilir) */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PREMIUM HOVER EFEKTLERI (v7.16.10) — opt-in: kart koku .necox-ad-card--fxN
4 farkli premium his. Hepsi prefers-reduced-motion guard'li.
fx1: Ice cekilme (frame inset) — gorsel hover'da ~10px kuculur, etrafinda bosluk
fx2: Ken Burns + karartma — yavas zoom + alttan gradient
fx3: Tilt — hafif 3B perspektif egim
fx4: Reveal — gorsel hafif kuculur + ust katman parlama suzulur
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── fx1 — Ice cekilme (frame inset). Kullanicinin tarif ettigi efekt. ── */
.necox-ad-card--fx1 .necox-ad-card__media {
background: var(--necox-card-fx-frame, #0e1525);
}
.necox-ad-card--fx1 .necox-ad-card__thumb img {
transition: transform .5s cubic-bezier(.2,.7,.2,1), border-radius .5s cubic-bezier(.2,.7,.2,1), filter .5s;
border-radius: 0;
will-change: transform, border-radius;
}
/* Hover: gorsel ~20px ice kuculur + koseler yuvarlanir.
Genel scale(1.06) buyutme kuralini fx1'de ezeriz.
Kullanici istegi: 20px geri cekilme (orta boy kartta scale .88 ≈ kenar ~18-20px). */
.necox-ad-card--fx1:hover .necox-ad-card__thumb img {
transform: scale(.88);
border-radius: 16px;
filter: saturate(1.05);
}
/* ── fx2 — Ken Burns + alttan gradient karartma ── */
.necox-ad-card--fx2 .necox-ad-card__media::after {
content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: linear-gradient(to top, rgba(0,0,0,.45), transparent 55%);
opacity: 0; transition: opacity .5s ease;
}
.necox-ad-card--fx2 .necox-ad-card__thumb img {
transition: transform 6s cubic-bezier(.2,.4,.2,1), filter .5s;
}
.necox-ad-card--fx2:hover .necox-ad-card__media::after { opacity: 1; }
.necox-ad-card--fx2:hover .necox-ad-card__thumb img {
transform: scale(1.14);
filter: brightness(1.03);
}
/* ── fx4 — Reveal (gorsel hafif kuculur + diagonal parlama suzulur) ── */
.necox-ad-card--fx4 .necox-ad-card__media { background: var(--necox-card-fx-frame, #0e1525); }
.necox-ad-card--fx4 .necox-ad-card__media::before {
content: ''; position: absolute; top: 0; left: -60%; width: 50%; height: 100%; z-index: 2;
/* v7.16.10 — parlama belirginligi azaltildi: .18 -> .09 (%50) -> .075 (ek %15, premium his) */
background: linear-gradient(105deg, transparent, rgba(255,255,255,.075), transparent);
transform: skewX(-18deg); transition: left .7s cubic-bezier(.2,.7,.2,1); pointer-events: none;
}
.necox-ad-card--fx4 .necox-ad-card__thumb img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.necox-ad-card--fx4:hover .necox-ad-card__thumb img { transform: scale(.96); }
.necox-ad-card--fx4:hover .necox-ad-card__media::before { left: 140%; }
@media (prefers-reduced-motion: reduce) {
.necox-ad-card--fx1 .necox-ad-card__thumb img,
.necox-ad-card--fx2 .necox-ad-card__thumb img,
.necox-ad-card--fx4 .necox-ad-card__thumb img,
.necox-ad-card--fx2 .necox-ad-card__media::after,
.necox-ad-card--fx4 .necox-ad-card__media::before { transition: none; }
.necox-ad-card--fx1:hover .necox-ad-card__thumb img,
.necox-ad-card--fx2:hover .necox-ad-card__thumb img,
.necox-ad-card--fx4:hover .necox-ad-card__thumb img { transform: none; }
}