/** * AysimaPOS — Ana Sayfa (Homepage) Stilleri * * Sayfa-scoped CSS. Butik & Özellikler sayfalarındaki design pattern'ları * `.homepage-*` BEM prefix ile ana sayfaya adapte eder. * * Palet: navy primary (#182045 → #2a3a72) + orange accent (#ea7c2c) * — landing-base.css'teki CSS variable'larla birebir uyumlu. * * Korunan: hero-section, founder-story, premium-spotlight gibi sayfa-özel * karakteri olan section'lar TEK CSS dosyasına dokunulmaz (landing-sections.css * + landing-components.css'te). * * @version 1.0.0 (Refactor 2026-05-19) */ /* ============================================ Sayfa Wrapper Scope (opsiyonel — gerekirse ile aktif) ============================================ */ /* ============================================ 1) Section Heading (butik shared pattern parity) Eyebrow badge + h2 + lead paragrafı. ============================================ */ .homepage-section-heading { text-align: center; margin-bottom: 2rem; } .homepage-section-heading h2 { font-size: 2rem; font-weight: 800; color: var(--color-primary-800, #1a2756); margin-bottom: 0.625rem; line-height: 1.25; letter-spacing: -0.005em; } .homepage-section-heading p { font-size: 1.0625rem; color: var(--color-gray-600, #5b6478); max-width: 760px; margin: 0 auto; line-height: 1.65; } .homepage-section-heading__eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-primary-700, #2a3a72); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; background: var(--color-primary-50, #f3f5fa); padding: 6px 14px; border-radius: 999px; margin-bottom: 0.875rem; border: 1px solid var(--color-primary-100, #e1e6ef); } /* ============================================ 2) Section Padding Utilities (inline style replacement) ============================================ */ .homepage-features-grid { padding: 1rem 0; } /* ============================================ 3) Info Card (no-hardware + muhasebeci ortak callout) Soft primary gradient + premium border + dramatic shadow. ============================================ */ .homepage-info-card { padding: 2rem 2.25rem; background: linear-gradient(135deg, var(--color-primary-50, #f4f6ff) 0%, #ffffff 100%); border: 1px solid var(--color-primary-100, #e6eaff); border-radius: 18px; box-shadow: 0 12px 32px -20px rgba(24, 32, 69, 0.18); position: relative; overflow: hidden; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .homepage-info-card:hover { border-color: var(--color-primary-200, #c5cde0); box-shadow: 0 18px 40px -22px rgba(24, 32, 69, 0.26); } .homepage-info-card--narrow { max-width: 1100px; margin-left: auto; margin-right: auto; } .homepage-info-card__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--gradient-primary, linear-gradient(135deg, #0e1b4d, #2c3a76)); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; } .homepage-info-card__title { color: var(--color-primary-800, #182045); font-weight: 800; margin-bottom: 0.5rem; line-height: 1.3; } .homepage-info-card__text { color: var(--color-text-secondary, #515773); line-height: 1.7; margin: 0; } .homepage-info-card__lead { font-size: 1.0625rem; line-height: 1.75; color: var(--color-gray-700, #4b5563); margin-bottom: 1rem; } /* ============================================ 4) Feature Item Card — butik preview-banner pattern (Özellikler sayfasındaki .feature-item-card stilinin homepage scope versiyonu). Ana sayfada şu an line 219'da E-fatura inline CTA kartı bu class'ı kullanır. ============================================ */ .feature-item-card { position: relative; background: #ffffff; border: 1px solid var(--color-primary-100, #e1e6ef); border-radius: 24px; padding: 2.25rem; margin-bottom: 2rem; box-shadow: 0 28px 60px -28px rgba(24, 32, 69, 0.28); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; overflow: hidden; scroll-margin-top: 90px; } .feature-item-card::before { content: ''; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background: var(--gradient-primary); z-index: 1; } .feature-item-card.image-right::before { left: auto; right: 0; } .feature-item-card:hover { transform: translateY(-3px); border-color: var(--color-primary-200, #c5cde0); box-shadow: 0 32px 70px -28px rgba(24, 32, 69, 0.38); } .feature-item-card--no-margin { margin-bottom: 0; } .feature-item-card--linked { text-decoration: none; color: inherit; display: block; cursor: pointer; } .feature-item-card--linked:hover { text-decoration: none; color: inherit; } .feature-item-card--einvoice::before { background: linear-gradient(180deg, #10b981 0%, #059669 100%); } .feature-item-card--einvoice .feature-number { background: #ecfdf5; color: #047857 !important; border-color: #a7f3d0; } .feature-item-card__cta { display: inline-flex; align-items: center; margin-top: 0.5rem; padding: 0.875rem 1.75rem; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #ffffff; border-radius: 12px; font-size: 1rem; font-weight: 600; box-shadow: 0 8px 22px -8px rgba(16, 185, 129, 0.55); transition: transform 0.2s ease, box-shadow 0.2s ease; } .feature-item-card--linked:hover .feature-item-card__cta { transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(16, 185, 129, 0.7); color: #ffffff; } .feature-image-wrapper { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--color-gray-200, #e5e7eb); background: var(--color-gray-50, #f3f5fa); box-shadow: 0 18px 44px -22px rgba(24, 32, 69, 0.45); transition: transform 0.3s ease, box-shadow 0.3s ease; } .feature-image-wrapper--clickable { cursor: pointer; } .feature-image-wrapper--has-overlay { overflow: visible; } .feature-image-wrapper--has-overlay > img { display: block; width: 100%; height: auto; border-radius: 14px; } .feature-screenshot { width: 100%; height: auto; display: block; transition: opacity 0.3s ease, transform 0.4s ease; } .feature-item-card:hover .feature-screenshot { transform: scale(1.015); } .feature-content { padding-left: 0.5rem; } .feature-item-card.image-right .feature-content { padding-left: 0; padding-right: 0.5rem; } .feature-number { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--color-primary-50, #f3f5fa); color: var(--color-primary-700, #2a3a72) !important; padding: 6px 14px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 1rem; border: 1px solid var(--color-primary-100, #e1e6ef); } .feature-title { font-size: 1.875rem; font-weight: 800; color: var(--color-primary-800, #1a2756); margin-bottom: 1rem; line-height: 1.25; letter-spacing: -0.005em; } .feature-description { font-size: 1rem; color: var(--color-gray-700, #4b5563); line-height: 1.75; margin-bottom: 1.25rem; } .feature-description strong { color: var(--color-primary-800, #1a2756); font-weight: 700; } .feature-list-label { font-size: 0.8125rem; color: var(--color-primary-700, #2a3a72); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 0.75rem; } .feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.625rem; } .feature-list li { font-size: 0.9375rem; color: var(--color-gray-800, #1f2937); line-height: 1.55; display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--color-primary-50, #f3f5fa); border-radius: 8px; border-left: 3px solid transparent; transition: background 0.2s ease, border-left-color 0.2s ease; } .feature-list li:hover { background: #ecfdf5; border-left-color: #10b981; } .feature-list li i { flex-shrink: 0; margin-top: 3px; color: #10b981 !important; } .feature-list li strong { color: var(--color-primary-800, #1a2756); } /* ============================================ 5) Comparison Table — butik stili adaptasyonu ============================================ */ .homepage-comparison-wrapper { max-width: 1080px; margin: 0 auto; overflow-x: auto; border-radius: 16px; box-shadow: 0 12px 36px -18px rgba(24, 32, 69, 0.25); border: 1px solid var(--color-gray-200, #e5e7eb); } .homepage-comparison-table { width: 100%; border-collapse: collapse; background: #ffffff; } .homepage-comparison-table thead th { background: var(--gradient-primary); color: #ffffff; padding: 1rem 1.25rem; text-align: left; font-size: 0.9375rem; font-weight: 700; } .homepage-comparison-table thead th:nth-child(2) { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); text-align: center; width: 26%; } .homepage-comparison-table thead th:nth-child(3) { text-align: center; width: 26%; } .homepage-comparison-table tbody tr { border-bottom: 1px solid var(--color-gray-200, #e5e7eb); transition: background 0.2s ease; } .homepage-comparison-table tbody tr:hover { background: var(--color-primary-50, #f3f5fa); } .homepage-comparison-table tbody tr:last-child { border-bottom: 0; } .homepage-comparison-table tbody td { padding: 0.875rem 1.25rem; font-size: 0.9375rem; color: var(--color-gray-800, #1f2937); vertical-align: middle; line-height: 1.5; } .homepage-comparison-table tbody td:first-child { font-weight: 600; color: var(--color-primary-800, #1a2756); } .homepage-comparison-table tbody td:nth-child(2), .homepage-comparison-table tbody td:nth-child(3) { text-align: center; font-size: 0.875rem; } .homepage-comparison-table tbody td .icon-cross { color: #9ca3af; font-size: 1rem; margin-right: 0.4rem; } .homepage-comparison-table tbody td .icon-check { color: #10b981; font-size: 1rem; margin-right: 0.4rem; } .homepage-comparison-table .badge-premium { display: inline-block; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; background: linear-gradient(135deg, #ea7c2c 0%, #d2641a 100%); color: #ffffff; padding: 2px 8px; border-radius: 4px; margin-left: 0.375rem; vertical-align: middle; } /* ============================================ 6) FAQ Accordion — butik

tarzı semantic Bootstrap accordion yerine native

— JS-free, daha hızlı. ============================================ */ .homepage-faq-wrapper { max-width: 920px; margin: 0 auto; } .homepage-faq-item { background: #ffffff; border: 1px solid var(--color-gray-200, #e5e7eb); border-radius: 14px; margin-bottom: 0.875rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; overflow: hidden; } .homepage-faq-item:hover { border-color: var(--color-primary-200, #c5cde0); } .homepage-faq-item[open] { border-color: var(--color-primary-400, #5d6fb1); box-shadow: 0 8px 24px -14px rgba(24, 32, 69, 0.25); } .homepage-faq-item__summary { list-style: none; cursor: pointer; padding: 1.125rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 1.0625rem; font-weight: 600; color: var(--color-primary-800, #1a2756); line-height: 1.45; transition: background 0.2s ease; } .homepage-faq-item__summary::-webkit-details-marker { display: none; } .homepage-faq-item__summary:hover { background: var(--color-primary-50, #f3f5fa); } .homepage-faq-item__summary::after { content: '\002B'; font-size: 1.5rem; font-weight: 400; color: var(--color-primary-600, #3b4e94); flex-shrink: 0; transition: transform 0.25s ease; } .homepage-faq-item[open] .homepage-faq-item__summary::after { content: '\2212'; transform: rotate(180deg); } .homepage-faq-item__q-text { flex: 1; margin: 0; font-size: inherit; font-weight: inherit; color: inherit; line-height: inherit; } .homepage-faq-item__body { padding: 0 1.5rem 1.25rem; font-size: 0.9375rem; line-height: 1.75; color: var(--color-gray-700, #4b5563); } .homepage-faq-item__body a { color: var(--color-primary-700, #2a3a72); text-decoration: underline; font-weight: 600; } .homepage-faq-item__body a:hover { color: var(--color-primary-900, #0f1535); } .homepage-faq-cta { text-align: center; margin-top: 1.5rem; } /* ============================================ 7) Final CTA Card — butik gradient bg + premium card pattern ============================================ */ .homepage-cta-section { background: var(--gradient-primary); padding: 3.5rem 0; position: relative; overflow: hidden; } .homepage-cta-section::before { content: ''; position: absolute; inset: 0; background: url('data:image/svg+xml,'); opacity: 0.8; z-index: 1; } .homepage-cta-card { position: relative; z-index: 10; background: #ffffff; border-radius: 20px; padding: 2.5rem 2rem; max-width: 880px; margin: 0 auto; text-align: center; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.4); } .homepage-cta-card__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--gradient-primary); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 1.25rem; animation: homepage-cta-pulse 2s infinite; box-shadow: 0 12px 28px -12px rgba(42, 58, 114, 0.55); } .homepage-cta-card__title { font-size: 1.875rem; font-weight: 800; color: var(--color-primary-800, #1a2756); margin-bottom: 0.875rem; line-height: 1.25; } .homepage-cta-card__desc { font-size: 1.0625rem; line-height: 1.65; color: var(--color-gray-700, #4b5563); margin-bottom: 1.5rem; max-width: 680px; margin-left: auto; margin-right: auto; } .homepage-cta-card__bullets { list-style: none; padding: 0; margin: 0 0 1.75rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.5rem; } .homepage-cta-card__bullets li { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-gray-800, #1f2937); font-size: 0.9375rem; font-weight: 600; } .homepage-cta-card__bullets i { color: #10b981; } .homepage-cta-card__action { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.875rem; } /* ============================================ 8) Founder Cite (cite tag inline-style replacement) ============================================ */ .homepage-founder-cite { display: block; margin-top: 0.5rem; font-style: normal; font-weight: 600; color: var(--color-primary-800, #1a2756); } /* ============================================ Animations + Responsive ============================================ */ @keyframes homepage-cta-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } @media (max-width: 991px) { .homepage-section-heading h2 { font-size: 1.65rem; } .feature-item-card { padding: 1.75rem; border-radius: 20px; } .feature-title { font-size: 1.5rem; } .feature-description { font-size: 0.9375rem; } .feature-item-card::before { width: 4px; } .homepage-info-card { padding: 1.5rem 1.75rem; } .homepage-cta-card { padding: 2rem 1.25rem; } .homepage-cta-card__title { font-size: 1.5rem; } } @media (max-width: 767px) { .feature-item-card { padding: 1.25rem; border-radius: 16px; margin-bottom: 1.25rem; } .feature-title { font-size: 1.375rem; } .feature-content, .feature-item-card.image-right .feature-content { padding-left: 0; padding-right: 0; margin-top: 1rem; } .feature-number { font-size: 0.75rem; padding: 5px 12px; } .feature-item-card.image-right::before { right: auto; left: 0; } }