/* ============================================================= AXENDELL — COMPONENTS Reusable: button, chip, badge, card primitives, trust pill. ============================================================= */ /* ============================================================ BUTTON SYSTEM .ax-btn, variants .ax-btn--{primary,secondary,ghost,icon} sizes .ax-btn--{sm,md,lg} states default/hover/active/focus/disabled/loading ============================================================ */ .ax-btn { --btn-h: 44px; --btn-pad-x: 20px; --btn-fs: var(--fs-sm); --btn-fw: var(--fw-semibold); --btn-radius: var(--rad-md); --btn-bg: transparent; --btn-color: var(--text-primary); --btn-border: var(--border-default); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: var(--btn-h); padding-inline: var(--btn-pad-x); border: 1px solid var(--btn-border); border-radius: var(--btn-radius); background: var(--btn-bg); color: var(--btn-color); font-family: var(--font-body); font-size: var(--btn-fs); font-weight: var(--btn-fw); letter-spacing: .01em; line-height: 1; white-space: nowrap; cursor: pointer; user-select: none; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); overflow: hidden; } .ax-btn:hover { transform: translateY(-1px); } .ax-btn:active { transform: translateY(0); } .ax-btn:disabled, .ax-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; } .ax-btn svg { flex-shrink: 0; } /* Sizes */ .ax-btn--sm { --btn-h: 36px; --btn-pad-x: 14px; --btn-fs: var(--fs-xs); } .ax-btn--lg { --btn-h: 54px; --btn-pad-x: 28px; --btn-fs: var(--fs-md); } /* Variant: primary (gold) */ .ax-btn--primary { --btn-bg: var(--accent-gold-grad); --btn-color: var(--text-on-gold); --btn-border: transparent; box-shadow: 0 8px 24px rgba(212,175,55,.18), inset 0 1px 0 rgba(255,255,255,.30); } .ax-btn--primary:hover { box-shadow: 0 12px 32px rgba(212,175,55,.30), inset 0 1px 0 rgba(255,255,255,.40); filter: brightness(1.06); } /* Variant: secondary (outline gold) */ .ax-btn--secondary { --btn-bg: transparent; --btn-color: var(--accent-gold-hi); --btn-border: var(--border-active); } .ax-btn--secondary:hover { --btn-bg: var(--accent-gold-soft); --btn-border: var(--accent-gold); --btn-color: var(--accent-gold-hi); } /* Variant: ghost (subtle) */ .ax-btn--ghost { --btn-bg: transparent; --btn-color: var(--text-secondary); --btn-border: transparent; } .ax-btn--ghost:hover { --btn-bg: var(--surface-soft); --btn-color: var(--text-primary); } /* Variant: WhatsApp (used only by floating + nav CTA) */ .ax-btn--whatsapp { --btn-bg: #1f8d4f; --btn-color: #fff; --btn-border: rgba(255,255,255,.10); } .ax-btn--whatsapp:hover { --btn-bg: #25a85b; } /* Variant: icon-only square */ .ax-btn--icon { width: var(--btn-h); padding-inline: 0; } /* Loading state */ .ax-btn.is-loading { color: transparent !important; pointer-events: none; } .ax-btn.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; color: var(--text-on-gold); animation: ax-spin .7s linear infinite; } @keyframes ax-spin { to { transform: rotate(360deg); } } /* ============================================================ CHIP / FILTER PILL ============================================================ */ .ax-chip { --chip-bg: transparent; --chip-color: var(--text-secondary); --chip-border: var(--border-default); display: inline-flex; align-items: center; gap: var(--sp-2); height: 36px; padding-inline: var(--sp-4); background: var(--chip-bg); color: var(--chip-color); border: 1px solid var(--chip-border); border-radius: var(--rad-pill); font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: .01em; cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .ax-chip:hover { --chip-color: var(--text-primary); --chip-border: var(--border-active); } .ax-chip.is-active { --chip-bg: var(--accent-gold-soft); --chip-color: var(--accent-gold-hi); --chip-border: var(--accent-gold); } .ax-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--chip-dot, var(--text-muted)); box-shadow: 0 0 0 2px rgba(255,255,255,.04); } /* ============================================================ BADGE — small contextual labels ============================================================ */ .ax-badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; line-height: 1; border-radius: var(--rad-pill); background: rgba(0,0,0,.55); color: var(--text-primary); border: 1px solid var(--border-subtle); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .ax-badge__ico { font-size: 11px; line-height: 1; } .ax-badge--feat { color: var(--accent-gold-hi); border-color: var(--border-active); background: linear-gradient(135deg, rgba(212,175,55,.18), rgba(0,0,0,.5)); } .ax-badge--deal { color: #ffd17a; border-color: rgba(255, 169, 59, .35); background: rgba(232, 169, 59, .14); } .ax-badge--active { color: #6dd6a3; border-color: rgba(45, 183, 122, .35); background: var(--success-soft); } .ax-badge--active .ax-badge__ico { color: var(--success); text-shadow: 0 0 8px rgba(45,183,122,.6); } .ax-badge--photo { color: var(--text-primary); background: rgba(0,0,0,.65); border-color: rgba(255,255,255,.10); } /* ============================================================ TRUST PILL (Faz 2'de daha çok varyant gelir) ============================================================ */ .ax-trust { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border-gold-soft); border-radius: var(--rad-pill); background: var(--accent-gold-soft); color: var(--accent-gold-hi); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: .02em; } .ax-trust__dot { width: 6px; height: 6px; background: var(--success); border-radius: 50%; box-shadow: 0 0 8px var(--success); } /* ============================================================ CARD PRIMITIVES ============================================================ */ .ax-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--rad-xl); overflow: hidden; transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); color: inherit; text-decoration: none; } .ax-card:hover { border-color: var(--border-active); transform: translateY(-4px); box-shadow: var(--sh-glow-gold), var(--sh-lg); } .ax-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-secondary); } .ax-card__link { position: absolute; inset: 0; z-index: 5; display: block; } .ax-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .ax-card:hover .ax-card__media img { transform: scale(1.04); } .ax-card__media-gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,7,10,0) 50%, rgba(7,7,10,.55) 100%); pointer-events: none; } .ax-card__badges { position: absolute; top: var(--sp-3); left: var(--sp-3); right: var(--sp-3); display: flex; flex-wrap: wrap; gap: 6px; z-index: 2; } .ax-card__badges--right { justify-content: flex-end; } .ax-card__photo-count { position: absolute; bottom: var(--sp-3); left: var(--sp-3); z-index: 2; } .ax-card__rank { position: absolute; bottom: var(--sp-3); right: var(--sp-3); z-index: 2; padding: 6px 10px; border-radius: var(--rad-pill); background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--border-active); color: var(--accent-gold-hi); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; } .ax-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; } .ax-card__meta { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; } .ax-card__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: 1.3; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } .ax-card__stats { display: flex; gap: var(--sp-4); color: var(--text-secondary); font-size: var(--fs-sm); } .ax-card__stats span { display: inline-flex; align-items: center; gap: 5px; } .ax-card__price-row { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle); } .ax-card__price-stack { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; } .ax-card__old-price { font-size: var(--fs-xs); color: var(--text-muted); text-decoration: line-through; letter-spacing: .02em; } .ax-card__price { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--text-primary); line-height: 1; } .ax-card__price .ax-currency { font-size: var(--fs-md); color: var(--accent-gold); margin-left: 2px; } /* SOLD overlay (yeni stil — diagonal kalın band yerine glass + center pill) */ .ax-card.is-sold .ax-card__media::after { content: ""; position: absolute; inset: 0; background: rgba(7,7,10,.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 3; } .ax-card__sold-pill { display: none; } .ax-card.is-sold .ax-card__sold-pill { display: inline-flex; position: absolute; inset: 0; margin: auto; height: 38px; width: max-content; align-items: center; padding: 0 18px; background: var(--surface); color: var(--accent-gold-hi); border: 1px solid var(--accent-gold); border-radius: var(--rad-pill); font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: .14em; text-transform: uppercase; z-index: 4; box-shadow: var(--sh-ring-gold); } .ax-card.is-sold:hover { transform: none; box-shadow: none; border-color: var(--border-subtle); } .ax-card.is-sold .ax-card__media img { filter: grayscale(.4); }