/* ============================================================ AXENDELL — sections-v2.css Faz 2.1: Features, How, Testimonials, FAQ, Final CTA ============================================================ */ /* ─── Section section yardımcıları ─────────────────────────── */ .ax-section--features, .ax-section--how, .ax-section--testimonials, .ax-section--faq, .ax-section--cta { position: relative; padding: clamp(64px, 9vw, 120px) 0; } .ax-section--features::before, .ax-section--testimonials::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 0% 0%, rgba(212, 175, 55, .045), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(212, 175, 55, .035), transparent 60%); pointer-events: none; } /* ============================================================ FEATURES — Premium "Neden Biz?" grid ============================================================ */ .ax-features { margin-top: clamp(40px, 6vw, 64px); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-5); } .ax-feature { position: relative; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-7); background: linear-gradient(180deg, rgba(20, 20, 26, .9), rgba(12, 12, 16, .96)); border: 1px solid rgba(212, 175, 55, .12); border-radius: var(--rad-lg); overflow: hidden; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .ax-feature::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 0%, rgba(212, 175, 55, .08), transparent 70%); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); pointer-events: none; } .ax-feature:hover { transform: translateY(-6px); border-color: rgba(212, 175, 55, .35); box-shadow: 0 20px 50px -20px rgba(212, 175, 55, .25); } .ax-feature:hover::before { opacity: 1; } .ax-feature__icon { position: relative; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rad-md); color: var(--accent-gold); background: linear-gradient(180deg, rgba(212, 175, 55, .14), rgba(212, 175, 55, .04)); border: 1px solid rgba(212, 175, 55, .22); } .ax-feature__icon svg { width: 26px; height: 26px; } .ax-feature__body { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; } .ax-feature__title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--text-primary); letter-spacing: -.01em; line-height: 1.25; } .ax-feature__desc { color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.65; } .ax-feature__meta { position: relative; align-self: flex-start; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-gold); padding: 6px 12px; border-radius: var(--rad-pill); background: rgba(212, 175, 55, .08); border: 1px solid rgba(212, 175, 55, .2); } /* ============================================================ HOW — Premium "Süreç" timeline ============================================================ */ .ax-section--how { background: linear-gradient(180deg, transparent, rgba(212, 175, 55, .025) 50%, transparent), var(--bg-primary); } .ax-steps { list-style: none; margin: clamp(40px, 6vw, 64px) 0 var(--sp-9); padding: 0; display: grid; gap: var(--sp-3); position: relative; counter-reset: step; } .ax-step { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); background: linear-gradient(180deg, rgba(20, 20, 26, .85), rgba(12, 12, 16, .94)); border: 1px solid rgba(212, 175, 55, .12); border-radius: var(--rad-lg); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .ax-step:hover { transform: translateX(4px); border-color: rgba(212, 175, 55, .3); } .ax-step__num { font-family: var(--font-display); font-size: clamp(36px, 5vw, 52px); font-weight: var(--fw-bold); line-height: 1; background: linear-gradient(180deg, #f3dd84 0%, #8c6a16 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; letter-spacing: -.03em; min-width: 64px; } .ax-step__body { display: flex; flex-direction: column; gap: 4px; } .ax-step__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text-primary); letter-spacing: -.01em; } .ax-step__desc { color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.6; } .ax-step__micro { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-gold); white-space: nowrap; padding: 6px 12px; border-radius: var(--rad-pill); background: rgba(212, 175, 55, .08); border: 1px solid rgba(212, 175, 55, .2); } .ax-how__cta { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); margin-top: var(--sp-7); } .ax-how__cta-hint { font-size: var(--fs-xs); color: var(--text-secondary); letter-spacing: .04em; } /* ============================================================ TESTIMONIALS — Premium quotes ============================================================ */ .ax-testimonials { margin-top: clamp(40px, 6vw, 64px); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-5); } .ax-quote { position: relative; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-7) var(--sp-6) var(--sp-5); background: linear-gradient(180deg, rgba(22, 22, 28, .9), rgba(14, 14, 18, .96)); border: 1px solid rgba(212, 175, 55, .14); border-radius: var(--rad-lg); overflow: hidden; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .ax-quote:hover { transform: translateY(-4px); border-color: rgba(212, 175, 55, .3); } .ax-quote__mark { position: absolute; top: 8px; right: 24px; font-family: var(--font-display); font-size: 96px; line-height: 1; color: rgba(212, 175, 55, .12); pointer-events: none; user-select: none; } .ax-quote__text { font-family: var(--font-body); font-size: var(--fs-md); line-height: 1.7; color: var(--text-primary); flex: 1; margin: 0; } .ax-quote__rating { display: flex; gap: 2px; color: rgba(255, 255, 255, .15); } .ax-quote__star { width: 16px; height: 16px; } .ax-quote__star.is-on { color: var(--accent-gold); } .ax-quote__foot { display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid rgba(255, 255, 255, .06); } .ax-quote__avatar { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 14px; color: #1a1a1a; background: linear-gradient(180deg, #f3dd84, #d4af37); flex-shrink: 0; } .ax-quote__who { display: flex; flex-direction: column; gap: 2px; } .ax-quote__name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-primary); } .ax-quote__meta { font-size: var(--fs-xs); color: var(--text-secondary); } /* ============================================================ FAQ — Premium accordion using <details> ============================================================ */ .ax-faq { max-width: 760px; margin: clamp(40px, 6vw, 64px) auto 0; display: flex; flex-direction: column; gap: var(--sp-3); } .ax-faq__item { background: linear-gradient(180deg, rgba(20, 20, 26, .85), rgba(12, 12, 16, .94)); border: 1px solid rgba(212, 175, 55, .12); border-radius: var(--rad-md); overflow: hidden; transition: border-color var(--dur-base) var(--ease-out); } .ax-faq__item[open], .ax-faq__item:hover { border-color: rgba(212, 175, 55, .32); } .ax-faq__q { list-style: none; cursor: pointer; padding: var(--sp-5) var(--sp-6); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--text-primary); transition: color var(--dur-fast) var(--ease-out); user-select: none; } .ax-faq__q::-webkit-details-marker { display: none; } .ax-faq__q:hover { color: var(--accent-gold); } .ax-faq__icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--accent-gold); background: rgba(212, 175, 55, .1); border: 1px solid rgba(212, 175, 55, .25); transition: transform var(--dur-base) var(--ease-out); flex-shrink: 0; } .ax-faq__icon svg { width: 16px; height: 16px; } .ax-faq__item[open] .ax-faq__icon { transform: rotate(45deg); } .ax-faq__a { padding: 0 var(--sp-6) var(--sp-5); color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.75; } /* ============================================================ FINAL CTA — Hero-ish call to action ============================================================ */ .ax-section--cta { padding: clamp(64px, 9vw, 120px) 0; } .ax-cta { position: relative; padding: clamp(48px, 7vw, 88px) clamp(28px, 5vw, 72px); border-radius: var(--rad-xl); background: linear-gradient(180deg, rgba(22, 22, 28, .95), rgba(10, 10, 14, .98)); border: 1px solid rgba(212, 175, 55, .25); overflow: hidden; text-align: center; } .ax-cta__bg { position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 0%, rgba(212, 175, 55, .14), transparent 70%), radial-gradient(50% 60% at 50% 100%, rgba(212, 175, 55, .08), transparent 70%); pointer-events: none; } .ax-cta__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); max-width: 640px; margin: 0 auto; } .ax-cta__title { font-family: var(--font-display); font-size: clamp(28px, 4.5vw, 48px); font-weight: var(--fw-bold); line-height: 1.15; letter-spacing: -.02em; color: var(--text-primary); margin: 0; } .ax-cta__title .gold { color: var(--accent-gold); } .ax-cta__desc { color: var(--text-secondary); font-size: var(--fs-md); line-height: 1.65; max-width: 52ch; margin: 0; } .ax-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-3); } /* ============================================================ Reveal stagger using --i ============================================================ */ .ax-features .ax-reveal, .ax-steps .ax-reveal, .ax-testimonials .ax-reveal, .ax-faq .ax-reveal { transition-delay: calc(var(--i, 0) * 60ms); } /* ============================================================ Responsive ============================================================ */ @media (max-width: 720px) { .ax-step { grid-template-columns: auto 1fr; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); } .ax-step__num { font-size: 38px; min-width: 48px; } .ax-step__micro { grid-column: 1 / -1; align-self: flex-start; } .ax-faq__q { padding: var(--sp-4) var(--sp-5); font-size: var(--fs-base); } .ax-faq__a { padding: 0 var(--sp-5) var(--sp-4); } .ax-cta { padding: 40px 22px; } .ax-cta__actions .ax-btn { width: 100%; } }