/**
 * Accessibility Utilities
 * 
 * A11Y improvements for screen readers and keyboard navigation
 * Also helps with SEO by improving semantic structure
 */

/* ================================
   SKIP TO CONTENT LINK
   ================================ */

/**
 * Skip to main content link
 * - Hidden by default
 * - Visible on keyboard focus (Tab)
 * - Helps keyboard users skip navigation
 * - Improves SEO by highlighting main content
 */
.skip-to-main-content {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    padding: var(--spacing-3) var(--spacing-6);
    background: var(--primary-600);
    color: #ffffff;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    text-decoration: none;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-2xl);
    transition: top var(--transition-duration-300) var(--transition-timing-function-out);
}

.skip-to-main-content:focus {
    top: var(--spacing-5);
}

.skip-to-main-content:hover {
    background: var(--primary-700);
    color: #ffffff;
    text-decoration: none;
}

/* ================================
   VISUALLY HIDDEN
   ================================ */

/**
 * Visually hidden but accessible to screen readers
 * Use for SEO-friendly labels
 */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/**
 * Visually hidden but becomes visible on focus
 * Perfect for skip links
 */
.visually-hidden-focusable:not(:focus):not(:active) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ================================
   FOCUS VISIBLE STYLES
   ================================ */

/**
 * Improved focus indicators for keyboard navigation
 * Helps SEO by showing clear navigation structure
 */
:focus-visible {
    outline: 3px solid var(--primary-500);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}

/* Remove outline for mouse users (not keyboard) */
:focus:not(:focus-visible) {
    outline: none;
}

/* Enhanced focus for interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--primary-500);
    outline-offset: 2px;
}

/* ================================
   REDUCED MOTION
   ================================ */

/**
 * Respect user's motion preferences (accessibility + performance)
 * Also helps with SEO by preventing motion sickness
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ================================
   HIGH CONTRAST MODE
   ================================ */

/**
 * Improve readability in high contrast mode
 * Helps with SEO by ensuring text is always readable
 */
@media (prefers-contrast: high) {
    :root {
        --color-text-primary: #000000;
        --color-bg-primary: #ffffff;
    }
    
    .btn {
        border: 2px solid currentColor;
    }
}

/* ================================
   SCREEN READER ONLY
   ================================ */

/**
 * Content visible only to screen readers
 * Great for SEO as screen readers = search engine crawlers
 */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.sr-only-focusable:not(:focus):not(:active) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ================================
   ARIA LIVE REGIONS
   ================================ */

/**
 * Polite live region for non-intrusive announcements
 * Helps with SEO by marking dynamic content
 */
[aria-live="polite"] {
    position: relative;
}

[aria-live="assertive"] {
    position: relative;
}

/* ================================
   KEYBOARD NAVIGATION HELPERS
   ================================ */

/**
 * Show focus for keyboard users
 * Hide focus for mouse users
 * Improves SEO by showing clear interactive elements
 */
.keyboard-focused {
    outline: 3px solid var(--primary-500);
    outline-offset: 2px;
}

/* Skip links container */
.skip-links {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
}

/* ================================
   RESPONSIVE TEXT FOR A11Y
   ================================ */

/**
 * Ensure minimum text sizes for readability
 * Google considers this for SEO (mobile-friendly)
 */
@media (max-width: 767px) {
    body {
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
    
    input,
    textarea,
    select {
        font-size: 16px !important; /* Prevent zoom on focus */
    }
}

/* ================================
   LANDMARK ROLES (SEO Helper)
   ================================ */

/**
 * Style for ARIA landmarks
 * Helps search engines understand page structure
 */
[role="banner"] {
    /* Header */
}

[role="navigation"] {
    /* Navigation */
}

[role="main"] {
    /* Main content */
}

[role="complementary"] {
    /* Sidebar, related content */
}

[role="contentinfo"] {
    /* Footer */
}

[role="search"] {
    /* Search form */
}

/* ================================
   TOUCH TARGET SIZES
   ================================ */

/**
 * Ensure touch targets are large enough (A11Y + SEO)
 * Google Mobile-Friendly Test checks this
 */
@media (hover: none) and (pointer: coarse) {
    /* Mobile devices */
    button,
    a,
    input[type="button"],
    input[type="submit"],
    label {
        min-height: 48px; /* Google's guideline (upgraded from 44px) */
        min-width: 48px;
        padding: var(--spacing-3) var(--spacing-4);
    }
    
    /* Ensure all interactive elements meet 48x48px minimum */
    .btn,
    .nav-link,
    .social-link,
    .card-link {
        min-height: 48px;
        min-width: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ===================================
   AysimaPOS Landing Page - Header Styles
   Modern SaaS Design - Variables Based
   Bootstrap Grid Compliant
   =================================== */

.landing-header {
    position: sticky;
    top: 0;
    z-index: var(--z-index-sticky);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
    /* CRITICAL: Smooth transition without layout shift */
    transition: box-shadow var(--transition-duration-300) var(--transition-timing-function-out);
    /* Performance: Isolate reflow with CSS containment */
    contain: layout;
    /* CRITICAL FIX: Fixed height prevents layout shift (CLS) */
    min-height: 64px;
    /* IMPORTANT: Full width for proper Bootstrap grid */
    width: 100%;
    /* IMPORTANT: display: block respects Bootstrap .container grid */
    display: block;
}

.landing-header.scrolled {
    box-shadow: var(--shadow-md);
}

.landing-header .navbar {
    /* IMPORTANT: Bootstrap navbar has its own flexbox (don't override) */
    /* Vertical centering with calculated padding */
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    /* CRITICAL: Fixed total height (padding + content) */
    min-height: 64px;
}

/* Logo Container - Fixed height, smooth scale */
.navbar-brand {
    display: flex;
    align-items: center;
    font-weight: var(--font-weight-extrabold);
    font-size: var(--font-size-xl);
    color: var(--gray-800);
    /* CRITICAL: transform for GPU acceleration (no reflow) */
    transition: transform var(--transition-duration-200) var(--transition-timing-function-out);
    /* Performance: Use will-change for smoother animation */
    will-change: transform;
}

.navbar-brand:hover {
    color: var(--primary-600);
}

/* Logo Icon - Fixed size, scale transform */
.logo-icon {
    /* FIXED SIZE: Prevents reflow */
    height: 40px;
    width: 40px;
    /* CRITICAL: GPU-accelerated scale (no layout shift) */
    transition: transform var(--transition-duration-200) var(--transition-timing-function-out);
    will-change: transform;
}

.landing-header.scrolled .logo-icon {
    /* REMOVED height change (causes reflow) */
    /* ADDED: Scale transform (GPU accelerated, zero layout shift) */
    transform: scale(0.875); /* 35px / 40px = 0.875 */
}

.logo-text {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--gray-800);
}

.logo-text .text-primary {
    color: var(--primary-600) !important;
}

.logo-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Navigation Links */
.navbar-nav .nav-link {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    color: var(--gray-700);
    padding: var(--spacing-2) var(--spacing-4);
    margin: 0 var(--spacing-1);
    border-radius: var(--border-radius-lg);
    transition: all var(--transition-duration-200) var(--transition-timing-function-out);
    position: relative;
}

.navbar-nav .nav-link:hover {
    color: var(--primary-600);
    background-color: var(--gray-100);
}

.navbar-nav .nav-link.active {
    color: var(--primary-600);
    font-weight: var(--font-weight-semibold);
}

.navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 3px;
}

/* Auth Buttons */
.navbar-buttons {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.navbar-buttons .btn {
    padding: var(--spacing-2) var(--spacing-5);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

/* Mobile Toggle */
.navbar-toggler {
    border: none;
    padding: var(--spacing-2);
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler-icon {
    width: 25px;
    height: 2px;
    background-color: var(--gray-800);
    display: block;
    position: relative;
    transition: all var(--transition-duration-200) var(--transition-timing-function-out);
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: '';
    width: 25px;
    height: 2px;
    background-color: var(--gray-800);
    position: absolute;
    left: 0;
    transition: all var(--transition-duration-200) var(--transition-timing-function-out);
}

.navbar-toggler-icon::before {
    top: -8px;
}

.navbar-toggler-icon::after {
    top: 8px;
}

/* Mobile Menu */
@media (max-width: 991.98px) {
    .navbar-collapse {
        padding: var(--spacing-6) 0;
        margin-top: var(--spacing-4);
        border-top: 1px solid var(--gray-300);
        /* Enhanced: Smooth slide-in animation */
        animation: slideInDown 0.3s ease-out;
        /* Mobile menu scrollability: sticky header altında menü viewport'u aşınca
           login/register butonlarına erişilemiyordu. Açılan menüyü kendi içinde
           scrollable yap. dvh = dynamic viewport (iOS Safari address bar shrink safe). */
        max-height: calc(100dvh - 80px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Fallback: dvh desteklemeyen eski tarayıcılarda vh kullan */
    @supports not (height: 100dvh) {
        .navbar-collapse {
            max-height: calc(100vh - 80px);
        }
    }
    
    .navbar-nav {
        margin-bottom: var(--spacing-4);
    }
    
    .navbar-nav .nav-link {
        padding: var(--spacing-4) var(--spacing-4); /* Increased from spacing-3 for 48px touch target */
        margin: var(--spacing-1) 0;
        /* Enhanced: Touch-friendly hover effect */
        font-size: 1.05rem;
    }
    
    .navbar-nav .nav-link:active {
        transform: scale(0.98);
        transition: transform 0.1s ease-out;
    }
    
    .navbar-buttons {
        flex-direction: column;
        width: 100%;
        gap: var(--spacing-3);
    }
    
    .navbar-buttons .btn {
        width: 100%;
        justify-content: center;
        /* Enhanced: Larger touch targets */
        min-height: 48px;
        font-size: 1.05rem;
        padding: var(--spacing-4) var(--spacing-6);
    }
    
    /* Enhanced: Animated hamburger to X */
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        background-color: transparent;
    }
    
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
        transform: rotate(45deg);
        top: 0;
    }
    
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
        transform: rotate(-45deg);
        top: 0;
    }
}

/* Tablet & Desktop */
@media (min-width: 992px) {
    .navbar-nav {
        flex-direction: row;
    }
}

/* Sticky Animation */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Mobile Menu Slide-In Animation */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.landing-header.scrolled {
    animation: slideDown 0.3s ease-out;
    /* Premium glass-blur (Apple/iOS pattern) — semi-transparent + backdrop-filter */
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
}

/* Scrolled state navbar padding küçülür — akıcı küçülme hissi */
.landing-header.scrolled .navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    min-height: 56px;
}

@media (prefers-reduced-motion: reduce) {
    .landing-header.scrolled {
        animation: none;
    }
}

/* ===================================
   AysimaPOS Landing Page - Footer
   Modern SaaS Design - Variables Based
   =================================== */

.landing-footer {
    background: var(--gray-800);
    color: rgba(255, 255, 255, 0.8);
}

.footer-main {
    padding: var(--spacing-20) 0 var(--spacing-10);
}

/* Footer Brand */
.footer-brand {
    margin-bottom: var(--spacing-6);
}

.footer-logo-icon {
    height: 40px;
    width: 40px;
}

.footer-logo-text {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: #ffffff;
}

.footer-description {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0;
}

/* Social Links */
.social-links {
    display: flex;
    gap: var(--spacing-3);
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-full);
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: all var(--transition-duration-300) var(--transition-timing-function-out);
}

.social-link:hover {
    background: var(--primary-600);
    color: #ffffff;
    transform: translateY(-3px);
}

/* Footer Columns */
.footer-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: #ffffff;
    margin-bottom: var(--spacing-6);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: var(--spacing-3);
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: all var(--transition-duration-200) var(--transition-timing-function-out);
    display: inline-block;
}

.footer-links a:hover {
    color: #ffffff;
    padding-left: 5px;
}

/* Footer Contact */
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    display: flex;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    align-items: flex-start;
}

.footer-contact i {
    color: var(--primary-400);
    font-size: var(--font-size-lg);
    width: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.footer-contact span {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

/* Footer Bottom */
.footer-bottom {
    padding: var(--spacing-6) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.copyright-text {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.6);
}

.footer-legal-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--spacing-8);
    justify-content: flex-end;
    flex-wrap: wrap;
}

.footer-legal-links li {
    display: inline-block;
}

.footer-legal-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: all var(--transition-duration-200) var(--transition-timing-function-out);
}

.footer-legal-links a:hover {
    color: var(--white);
}

/* Payment Methods Section */
.payment-methods-section {
    padding: 1rem 0;
}

.payment-title {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.payment-logos-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.payment-methods-image {
    max-width: 100%;
    height: auto;
    width: 430px;
    opacity: 0.95;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.payment-methods-image:hover {
    opacity: 1;
    transform: scale(1.02);
}

.payment-info {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: 0.75rem !important;
}

/* Responsive */
@media (max-width: 991.98px) {
    .footer-main {
        padding: 60px 0 30px;
    }
}

@media (max-width: 767.98px) {
    .footer-main {
        padding: 50px 0 20px;
    }
    
    .footer-brand {
        text-align: center;
    }
    
    .social-links {
        justify-content: center;
    }
    
    .footer-title {
        margin-top: 2rem;
    }
    
    .copyright-text {
        text-align: center !important;
    }
    
    .footer-legal-links {
        justify-content: center;
        gap: 1rem;
    }
    
    .payment-methods-image {
        width: 100%;
        max-width: 350px;
    }
}

/* ===================================================================
   WhatsApp Floating Contact Button — Shared Component
   (Daha önce ayrı whatsapp-button.css dosyasındaydı; tüm landing/auth
    sayfalarında gerektiği için components bundle'ına merge edildi.)
   =================================================================== */
/**
 * AysimaPOS Landing — WhatsApp Floating Contact Button
 *
 * Yeşil tonları (kullanıcı onaylı — canlı yaprak yeşili):
 *   - Default: #2BB344
 *   - Hover:   #229A36
 * Position: fixed bottom-LEFT, safe-area-inset destekli (iPhone notch)
 * Z-index: 1040 (sticky header üstü, BS modal altı)
 *
 * Pulse animasyonu prefers-reduced-motion'a saygılıdır.
 * Print mode'da gizlenir.
 */

/* ============================================================
   Floating Container
   ============================================================ */

.whatsapp-float {
    position: fixed;
    left: calc(28px + env(safe-area-inset-left, 0px));
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    z-index: 1040;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;
    border-radius: 50%;

    background: #2BB344;
    color: #ffffff;
    text-decoration: none;

    box-shadow:
        0 8px 24px rgba(43, 179, 68, 0.40),
        0 4px 8px rgba(0, 0, 0, 0.12);

    transition:
        transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.28s ease,
        box-shadow 0.28s ease;

    /* Mount entrance */
    animation: whatsapp-float-mount 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
    will-change: transform;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
    background: #229A36;
    color: #ffffff;
    text-decoration: none;
    transform: scale(1.08);
    box-shadow:
        0 12px 32px rgba(34, 154, 54, 0.50),
        0 6px 12px rgba(0, 0, 0, 0.14);
    outline: none;
}

.whatsapp-float:focus-visible {
    box-shadow:
        0 0 0 4px rgba(43, 179, 68, 0.35),
        0 12px 32px rgba(34, 154, 54, 0.50);
}

.whatsapp-float:active {
    transform: scale(0.96);
    transition-duration: 0.12s;
}

/* ============================================================
   Icon
   ============================================================ */

.whatsapp-float-icon {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    line-height: 1;
}

/* ============================================================
   Pulse Rings (attention catcher)
   ============================================================ */

.whatsapp-float-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #2BB344;
    opacity: 0.55;
    z-index: 1;
    pointer-events: none;
    animation: whatsapp-float-pulse 2.4s ease-out infinite;
}

.whatsapp-float-pulse--delayed {
    animation-delay: 1.2s;
}

/* ============================================================
   Tooltip (right of button — buton solda olduğu için)
   ============================================================ */

.whatsapp-float-tooltip {
    position: absolute;
    left: calc(100% + 16px);
    top: 50%;
    transform: translateY(-50%) translateX(-8px);

    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px;

    background: #1f1f23;
    color: #ffffff;
    border-radius: 10px;
    white-space: nowrap;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.whatsapp-float-tooltip::after {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #1f1f23;
}

.whatsapp-float-tooltip-title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
}

.whatsapp-float-tooltip-sub {
    font-size: 11.5px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.2;
}

.whatsapp-float:hover .whatsapp-float-tooltip,
.whatsapp-float:focus-visible .whatsapp-float-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* ============================================================
   Mobile Adjustments
   ============================================================ */

@media (max-width: 575.98px) {
    .whatsapp-float {
        left: calc(18px + env(safe-area-inset-left, 0px));
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        width: 62px;
        height: 62px;
    }

    .whatsapp-float-icon {
        font-size: 34px;
    }

    /* Mobilde tooltip gösterme — ekranı kapatır */
    .whatsapp-float-tooltip {
        display: none;
    }
}

/* ============================================================
   Animations
   ============================================================ */

@keyframes whatsapp-float-mount {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.6);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes whatsapp-float-pulse {
    0% {
        transform: scale(1);
        opacity: 0.55;
    }
    100% {
        transform: scale(1.85);
        opacity: 0;
    }
}

/* ============================================================
   Reduce Motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .whatsapp-float {
        animation: none;
    }
    .whatsapp-float-pulse {
        animation: none;
        opacity: 0;
    }
    .whatsapp-float:hover,
    .whatsapp-float:focus-visible {
        transform: none;
    }
}

/* ============================================================
   Print
   ============================================================ */

@media print {
    .whatsapp-float {
        display: none !important;
    }
}

/* ============================================================
   ANIMATION & MICRO-INTERACTION UTILITIES
   Sprint 3 — Premium subtle (CLAUDE.md §1.2 inline JS yasak,
   §14 prefers-reduced-motion guard zaten landing-base.css'te)
   ============================================================ */

/* ----- Eyebrow Badge (Hero, section intros) ----- */
.eyebrow-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1-5) var(--spacing-4);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    color: #ffffff;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    margin-bottom: var(--spacing-5);
    transition: all var(--transition-duration-300) var(--transition-timing-function-out);
}

.eyebrow-badge i {
    color: var(--cta-400);
    font-size: 0.875em;
}

.eyebrow-badge--light {
    background: rgba(42, 58, 114, 0.08);
    border-color: rgba(42, 58, 114, 0.2);
    color: var(--primary-700);
}

.eyebrow-badge--light i {
    color: var(--cta-500);
}

/* ----- Barcode Scan Animation (Hero monitor mockup overlay) ----- */
.barcode-scan-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
    border-radius: inherit;
}

.barcode-scan-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(234, 124, 44, 0.0) 10%,
        rgba(234, 124, 44, 0.85) 50%,
        rgba(234, 124, 44, 0.0) 90%,
        transparent 100%);
    box-shadow: 0 0 12px rgba(234, 124, 44, 0.65);
    animation: barcode-scan 2.8s linear infinite;
}

@keyframes barcode-scan {
    0%   { transform: translateY(-10%); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(calc(100% + 10%)); opacity: 0; }
}

/* ----- Floating Notification Card (Hero overlay) ----- */
.hero-floating-notification {
    position: absolute;
    top: 12%;
    right: -10%;
    background: #ffffff;
    border-radius: var(--border-radius-xl);
    box-shadow: 0 12px 35px rgba(42, 58, 114, 0.25);
    padding: var(--spacing-3) var(--spacing-4);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    z-index: 5;
    animation: notification-float 4s ease-in-out infinite;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-800);
}

.hero-floating-notification i {
    color: var(--primary-600);
    font-size: 1.1em;
}

@keyframes notification-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

@media (max-width: 992px) {
    .hero-floating-notification {
        display: none; /* Mobile'da yer yok */
    }
}

/* ----- Trust Signals Pills (hero-stats refinement) ----- */
.trust-signals-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    align-items: center;
    margin-top: var(--spacing-5);
}

.trust-signals-row .trust-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: #ffffff;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.trust-signals-row .trust-pill i {
    color: var(--primary-300);
    font-size: 0.95em;
}

/* ----- Ripple Effect (Material Design 3) ----- */
.has-ripple {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.has-ripple .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    transform: scale(0);
    animation: ripple-expand 600ms ease-out;
    pointer-events: none;
    z-index: 0;
}

@keyframes ripple-expand {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ----- Magnetic Button (cursor takip — desktop only) ----- */
@media (pointer: fine) {
    .is-magnetic {
        transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
        will-change: transform;
    }
}

/* ----- Shimmer Sweep ("Most Popular" badge, featured CTA) ----- */
.has-shimmer {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.has-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(115deg,
        transparent 0%,
        rgba(255, 255, 255, 0.0) 30%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0.0) 70%,
        transparent 100%);
    transform: skewX(-20deg);
    animation: shimmer-sweep 3.4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes shimmer-sweep {
    0%   { left: -150%; }
    60%  { left: 150%; }
    100% { left: 150%; }
}

/* ----- Arrow Translate (CTA secondary on hover) ----- */
.btn-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

.btn-arrow .btn-arrow-icon {
    transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
    display: inline-block;
}

.btn-arrow:hover .btn-arrow-icon {
    transform: translateX(4px);
}

/* ----- Section Heading Component (reusable) ----- */
.section-heading {
    text-align: center;
    margin-bottom: var(--spacing-12);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.section-heading--left {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

.section-heading__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-3);
    background: var(--primary-100);
    color: var(--primary-700);
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--spacing-4);
}

.section-heading__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: var(--font-weight-extrabold);
    color: var(--accent-700); /* Trust Navy heading */
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: var(--spacing-4);
}

.section-heading__subtitle {
    font-size: var(--font-size-lg);
    color: var(--gray-600);
    line-height: var(--line-height-relaxed);
    margin-bottom: 0;
}

/* ----- CTA Banner Component (reusable) ----- */
.cta-banner {
    background: var(--gradient-hero);
    border-radius: var(--border-radius-3xl);
    padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
    color: #ffffff;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(42, 58, 114, 0.25);
}

.cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 25%, rgba(138, 155, 205, 0.22) 0%, transparent 50%),
        radial-gradient(circle at 85% 75%, rgba(42, 58, 114, 0.22) 0%, transparent 50%);
    pointer-events: none;
}

.cta-banner > * {
    position: relative;
    z-index: 2;
}

.cta-banner__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: var(--font-weight-extrabold);
    color: #ffffff;
    margin-bottom: var(--spacing-4);
    letter-spacing: -0.02em;
}

.cta-banner__description {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.92);
    max-width: 640px;
    margin: 0 auto var(--spacing-7);
    line-height: var(--line-height-relaxed);
}

.cta-banner__buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    justify-content: center;
}

/* ----- Feature Card Component (reusable) ----- */
.feature-card {
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-7) var(--spacing-6);
    transition: transform var(--transition-duration-300) var(--transition-timing-function-out),
                box-shadow var(--transition-duration-300) var(--transition-timing-function-out),
                border-color var(--transition-duration-300) var(--transition-timing-function-out);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.feature-card:hover {
    transform: translateY(-6px);
    border-color: var(--primary-300);
    box-shadow: 0 18px 40px -15px rgba(42, 58, 114, 0.18);
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--border-radius-xl);
    background: var(--primary-50);
    color: var(--primary-600);
    font-size: 1.5rem;
    margin-bottom: var(--spacing-5);
    transition: transform var(--transition-duration-300) var(--transition-timing-function-out),
                background var(--transition-duration-300) var(--transition-timing-function-out);
}

.feature-card:hover .feature-card__icon {
    transform: scale(1.08) rotate(-4deg);
    background: var(--primary-100);
}

.feature-card__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--accent-700);
    margin-bottom: var(--spacing-3);
    letter-spacing: -0.015em;
}

.feature-card__description {
    font-size: var(--font-size-base);
    color: var(--gray-600);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

/* ----- Pricing Card Popular Modifier (Aşama 3) ----- */
.pricing-card--popular {
    position: relative;
    border: 2px solid transparent;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, var(--primary-600), var(--cta-500)) border-box;
    box-shadow: 0 30px 60px -25px rgba(42, 58, 114, 0.35),
                0 0 0 1px rgba(42, 58, 114, 0.05);
    transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (min-width: 992px) {
    .pricing-card--popular {
        transform: scale(1.02);
    }

    .pricing-card--popular:hover {
        transform: scale(1.04) translateY(-4px);
        box-shadow: 0 40px 80px -25px rgba(42, 58, 114, 0.45),
                    0 0 0 1px rgba(234, 124, 44, 0.18);
    }
}

.pricing-card--popular .pricing-badge {
    background: var(--gradient-cta);
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(234, 124, 44, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ----- Stats Counter Grid (reusable) ----- */
.stats-counter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-5);
}

.stats-counter-grid__item {
    text-align: center;
    padding: var(--spacing-5) var(--spacing-4);
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-2xl);
    transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 250ms ease,
                box-shadow 250ms ease;
}

.stats-counter-grid__item:hover {
    transform: translateY(-4px);
    border-color: var(--primary-300);
    box-shadow: 0 12px 30px -12px rgba(42, 58, 114, 0.18);
}

.stats-counter-grid__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary-50);
    color: var(--primary-600);
    font-size: 1.125rem;
    margin-bottom: var(--spacing-3);
}

.stats-counter-grid__value {
    display: inline-flex;
    align-items: baseline;
    gap: 0.15rem;
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--accent-700);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 0.4rem;
}

.stats-counter-grid__suffix {
    font-size: 1.25rem;
    color: var(--cta-500);
    font-weight: 700;
}

.stats-counter-grid__label {
    font-size: 0.875rem;
    color: var(--gray-600);
    font-weight: 500;
    line-height: 1.3;
}

/* ============================================================
   AŞAMA 5 — PROJEYE ÖZEL İNTERAKTİF ELEMENTLER
   Premium subtle, "live data illusion", esnaf domain-specific.
   Tümü prefers-reduced-motion guard ile durur (landing-base.css global).
   ============================================================ */

/* ----- Live Notification Card (floating) -----
   Hero'daki "Satış kaydedildi" pattern'ı genişletilmiş hâli.
   4 variant: sale (green), invoice (navy), stock-low (amber), payment (green).
   Glassmorphism + sequence fade-in-up (1x, statik kalır).
*/
.live-notification {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.9rem 0.625rem 0.7rem;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 14px;
    box-shadow:
        0 10px 30px -8px rgba(28, 25, 23, 0.18),
        0 2px 6px -2px rgba(28, 25, 23, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-800);
    line-height: 1.3;
    z-index: 5;
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.96);
    animation: live-notification-in 700ms cubic-bezier(0.2, 0.85, 0.25, 1) forwards;
    pointer-events: none;
    white-space: nowrap;
    max-width: 90%;
}

.live-notification__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 0.75rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(28, 25, 23, 0.15);
}

.live-notification__body {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.live-notification__title {
    font-size: 0.7rem;
    color: var(--gray-500);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.live-notification__value {
    font-size: 0.875rem;
    color: var(--gray-900);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.live-notification__value strong {
    color: var(--accent-700);
    font-weight: 800;
}

/* ----- Variant: sale ----- */
.live-notification--sale .live-notification__icon {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
}

/* ----- Variant: invoice ----- */
.live-notification--invoice .live-notification__icon {
    background: linear-gradient(135deg, var(--accent-500), var(--accent-700));
}

/* ----- Variant: stock-low (warning) ----- */
.live-notification--stock-low .live-notification__icon {
    background: linear-gradient(135deg, var(--cta-400), var(--cta-600));
}
.live-notification--stock-low .live-notification__value strong {
    color: var(--cta-700);
}

/* ----- Variant: payment ----- */
.live-notification--payment .live-notification__icon {
    background: linear-gradient(135deg, var(--primary-400), var(--primary-600));
}

/* ----- Variant: report ----- */
.live-notification--report .live-notification__icon {
    background: linear-gradient(135deg, var(--accent-500), var(--accent-700));
}

/* Position helpers */
.live-notification--top-right { top: 8%; right: -6%; }
.live-notification--top-left { top: 8%; left: -6%; }
.live-notification--bottom-right { bottom: 14%; right: -8%; }
.live-notification--bottom-left { bottom: 14%; left: -8%; }
.live-notification--mid-right { top: 50%; right: -6%; transform: translate3d(0, 0, 0) scale(0.96) translateY(-50%); }

/* Sequence delays */
.live-notification[data-delay="0"] { animation-delay: 200ms; }
.live-notification[data-delay="1"] { animation-delay: 700ms; }
.live-notification[data-delay="2"] { animation-delay: 1200ms; }
.live-notification[data-delay="3"] { animation-delay: 1700ms; }

@keyframes live-notification-in {
    0%   { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.96); }
    60%  { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.02); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Mobile: kompakt ve daha az dramatik */
@media (max-width: 768px) {
    .live-notification {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem 0.5rem 0.55rem;
    }
    .live-notification__title { font-size: 0.65rem; }
    .live-notification__value { font-size: 0.8125rem; }
    .live-notification__icon { width: 24px; height: 24px; font-size: 0.7rem; }
    .live-notification--top-right,
    .live-notification--top-left,
    .live-notification--bottom-right,
    .live-notification--bottom-left {
        right: 4%;
        left: auto;
    }
    .live-notification--top-left,
    .live-notification--bottom-left {
        left: 4%;
        right: auto;
    }
}

/* ----- Live KPI Widget (floating mini-dashboard) -----
   4 variant: revenue-spark (sparkline), top-product (bars),
   stock-status (donut), customer-counter (avatar group).
*/
.live-kpi {
    position: relative;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 16px;
    padding: 1rem 1.125rem;
    box-shadow:
        0 12px 32px -10px rgba(42, 58, 114, 0.18),
        0 2px 8px -2px rgba(28, 25, 23, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    min-width: 200px;
}

.live-kpi__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}

.live-kpi__label {
    font-size: 0.7rem;
    color: var(--gray-500);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.live-kpi__trend {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary-600);
    padding: 0.15rem 0.45rem;
    background: var(--primary-50);
    border-radius: 999px;
}

.live-kpi__trend--down {
    color: var(--cta-700);
    background: var(--cta-50);
}

.live-kpi__value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent-700);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.live-kpi__subtitle {
    font-size: 0.75rem;
    color: var(--gray-600);
    line-height: 1.3;
}

/* Sparkline SVG (CSS-only path draw) */
.live-kpi__sparkline {
    display: block;
    width: 100%;
    height: 36px;
    margin-top: 0.5rem;
    overflow: visible;
}

.live-kpi__sparkline-path {
    fill: none;
    stroke: url(#sparkGradient);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    animation: spark-draw 1.6s cubic-bezier(0.4, 0, 0.2, 1) 400ms forwards;
}

.live-kpi__sparkline-fill {
    fill: url(#sparkFillGradient);
    opacity: 0;
    animation: spark-fill-fade 800ms ease-out 1500ms forwards;
}

.live-kpi__sparkline-dot {
    fill: var(--cta-500);
    opacity: 0;
    transform-origin: center;
    animation: spark-dot-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 1800ms forwards;
}

@keyframes spark-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes spark-fill-fade {
    to { opacity: 0.18; }
}

@keyframes spark-dot-pop {
    0%   { opacity: 0; transform: scale(0); }
    100% { opacity: 1; transform: scale(1); }
}

/* Top product bars (sequential grow) */
.live-kpi__bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 36px;
    margin-top: 0.5rem;
}

.live-kpi__bar {
    flex: 1;
    background: linear-gradient(180deg, var(--primary-400), var(--primary-600));
    border-radius: 3px 3px 0 0;
    transform: scaleY(0);
    transform-origin: bottom;
    animation: bar-grow 700ms cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

@keyframes bar-grow {
    to { transform: scaleY(1); }
}

/* Donut chart (stock-status) — SVG circle dasharray draw */
.live-kpi__donut {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.live-kpi__donut-track {
    fill: none;
    stroke: var(--gray-100);
    stroke-width: 7;
}

.live-kpi__donut-arc {
    fill: none;
    stroke: var(--primary-600);
    stroke-width: 7;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: center;
    stroke-dasharray: 0 132;
    animation: donut-fill 1.4s cubic-bezier(0.4, 0, 0.2, 1) 500ms forwards;
}

@keyframes donut-fill {
    to { stroke-dasharray: var(--donut-target, 112) 132; }
}

.live-kpi__donut-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.live-kpi__donut-stats {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.75rem;
    color: var(--gray-600);
}

.live-kpi__donut-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.live-kpi__donut-stat::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.live-kpi__donut-stat--ok::before { background: var(--primary-600); }
.live-kpi__donut-stat--low::before { background: var(--cta-500); }

/* Customer counter (avatar group) */
.live-kpi__avatars {
    display: inline-flex;
    align-items: center;
    margin-top: 0.5rem;
}

.live-kpi__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(28, 25, 23, 0.12);
    margin-left: -8px;
    opacity: 0;
    transform: scale(0.6);
    animation: avatar-pop 500ms cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

.live-kpi__avatar:first-child { margin-left: 0; }
.live-kpi__avatar:nth-child(1) { animation-delay: 200ms; background: linear-gradient(135deg, var(--primary-500), var(--primary-700)); }
.live-kpi__avatar:nth-child(2) { animation-delay: 350ms; background: linear-gradient(135deg, var(--accent-500), var(--accent-700)); }
.live-kpi__avatar:nth-child(3) { animation-delay: 500ms; background: linear-gradient(135deg, var(--cta-400), var(--cta-600)); }
.live-kpi__avatar:nth-child(4) { animation-delay: 650ms; background: linear-gradient(135deg, var(--primary-600), var(--accent-700)); }
.live-kpi__avatar:nth-child(5) { animation-delay: 800ms; background: linear-gradient(135deg, var(--accent-600), var(--cta-500)); }

.live-kpi__avatar--more {
    background: var(--gray-200) !important;
    color: var(--accent-700);
}

@keyframes avatar-pop {
    to { opacity: 1; transform: scale(1); }
}

/* KPI float positioning (image overlay context) */
.live-kpi--floating {
    position: absolute;
    z-index: 5;
}

@media (max-width: 768px) {
    .live-kpi {
        min-width: 0;
        padding: 0.75rem 0.875rem;
    }
    .live-kpi__value { font-size: 1.25rem; }
    .live-kpi--floating { display: none; }
}

/* ----- Trust Ticker (yatay marquee) ----- */
.trust-ticker {
    position: relative;
    overflow: hidden;
    padding: 1rem 0;
    background: linear-gradient(90deg, transparent, var(--primary-50) 20%, var(--primary-50) 80%, transparent);
    border-radius: 999px;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.trust-ticker__track {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    width: max-content;
    animation: ticker-marquee 38s linear infinite;
}

.trust-ticker:hover .trust-ticker__track {
    animation-play-state: paused;
}

.trust-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4rem 1rem;
    font-size: 0.875rem;
    color: var(--accent-700);
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.trust-ticker__item i {
    color: var(--primary-600);
    font-size: 0.95em;
}

.trust-ticker__item-value {
    font-weight: 800;
    color: var(--cta-700);
    font-variant-numeric: tabular-nums;
}

.trust-ticker__divider {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gray-400);
    flex-shrink: 0;
}

@keyframes ticker-marquee {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 768px) {
    .trust-ticker__track { gap: 1.5rem; animation-duration: 50s; }
    .trust-ticker__item { padding: 0.3rem 0.6rem; font-size: 0.8125rem; }
}

/* ----- Status Pulse Dot (online/processing/alert) ----- */
.status-pulse {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.875rem 0.4rem 0.625rem;
    background: rgba(42, 58, 114, 0.06);
    border: 1px solid rgba(42, 58, 114, 0.18);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary-700);
    letter-spacing: -0.005em;
}

.status-pulse__dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-500);
    flex-shrink: 0;
}

.status-pulse__dot::before,
.status-pulse__dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    opacity: 0.5;
    animation: pulse-ring 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.status-pulse__dot::after {
    animation-delay: 1s;
}

@keyframes pulse-ring {
    0%   { transform: scale(1); opacity: 0.55; }
    80%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* Variant: processing */
.status-pulse--processing {
    background: rgba(234, 124, 44, 0.08);
    border-color: rgba(234, 124, 44, 0.2);
    color: var(--cta-700);
}

.status-pulse--processing .status-pulse__dot {
    background: var(--cta-500);
}

/* Variant: alert */
.status-pulse--alert {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.18);
    color: var(--danger-600);
}

.status-pulse--alert .status-pulse__dot {
    background: var(--danger-500);
}

/* Inverse — dark/gradient background üstüne glassmorphism */
.status-pulse--inverse {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
}

.status-pulse--inverse .status-pulse__dot {
    background: var(--primary-300);
    box-shadow: 0 0 12px rgba(110, 231, 183, 0.7);
}

/* ============================================================
   ONBOARDING STEPS — Premium 3-adımda satışa başla kartı
   Schema.org HowTo uyumlu, esnaf-domain content,
   bulut tabanlı vurgu (kurulum yok, her cihaz).
   ============================================================ */

.onboarding-section {
    padding: 4rem 0 3rem;
    position: relative;
}

.onboarding-section__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 3rem;
}

.onboarding-section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.95rem;
    background: var(--primary-50);
    color: var(--primary-700);
    border: 1px solid var(--primary-100);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.onboarding-section__eyebrow i {
    color: var(--cta-500);
}

.onboarding-section__title {
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 800;
    color: var(--accent-700);
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin-bottom: 1rem;
}

/* Amber highlight (onboarding heading vurgu) — CLAUDE.md §1.2 inline style yasak */
.onboarding-section__title .highlight-amber {
    background-image: linear-gradient(135deg, var(--cta-500) 0%, var(--cta-700) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 900;
}

.onboarding-section__subtitle {
    font-size: 1.0625rem;
    color: var(--gray-600);
    line-height: 1.65;
    margin-bottom: 0;
}

.onboarding-section__subtitle strong {
    color: var(--primary-700);
    font-weight: 700;
}

/* ----- Steps Grid (responsive — desktop 3-col, tablet vertical, mobile vertical compact) ----- */
.onboarding-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Connector line (desktop only) — sayılar arası premium dashed flow */
.onboarding-steps::before {
    content: '';
    position: absolute;
    top: 70px;
    left: 16.66%;
    right: 16.66%;
    height: 2px;
    background-image: linear-gradient(90deg,
        var(--primary-300) 0%, var(--primary-300) 50%,
        transparent 50%, transparent 100%);
    background-size: 14px 2px;
    background-repeat: repeat-x;
    z-index: 0;
    opacity: 0.7;
    pointer-events: none;
}

@media (max-width: 992px) {
    .onboarding-steps {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .onboarding-steps::before {
        display: none;
    }
}

/* ----- Single Step Card ----- */
.onboarding-step {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    padding: 2rem 1.75rem 1.75rem;
    transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 350ms cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 1;
}

.onboarding-step:hover {
    transform: translateY(-6px);
    border-color: var(--primary-300);
    box-shadow: 0 24px 50px -20px rgba(42, 58, 114, 0.25);
}

/* Premium gradient top accent — hover'da slide-in */
.onboarding-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 20px 20px 0 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.onboarding-step:hover::before {
    transform: scaleX(1);
}

/* ----- Step Number Badge (üstte, konumlu) ----- */
.onboarding-step__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 0.875rem;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 12px 28px -8px rgba(42, 58, 114, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 2;
}

/* ----- Step Quick Tag (badge alt — "30 saniyede" vb.) ----- */
.onboarding-step__quick-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: center;
    padding: 0.25rem 0.75rem;
    background: var(--cta-50);
    color: var(--cta-700);
    border: 1px solid var(--cta-100);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 1.25rem;
}

.onboarding-step__quick-tag i {
    color: var(--cta-500);
}

/* ----- Step Media (image / illustration) ----- */
.onboarding-step__media {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-50), var(--accent-50));
    margin-bottom: 1.25rem;
    box-shadow: 0 8px 24px -10px rgba(42, 58, 114, 0.18);
}

.onboarding-step__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.onboarding-step:hover .onboarding-step__media img {
    transform: scale(1.04);
}

/* ----- Illustration variant (Adım 1 için custom SVG) ----- */
.onboarding-step__illustration {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        var(--accent-50) 0%,
        var(--primary-50) 50%,
        var(--cta-50) 100%);
    overflow: hidden;
}

.onboarding-step__illustration::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 30%, rgba(42, 58, 114, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 75% 70%, rgba(234, 124, 44, 0.06) 0%, transparent 40%);
}

.onboarding-step__illustration svg {
    position: relative;
    z-index: 1;
    width: 80%;
    max-width: 280px;
    height: auto;
}

/* SVG inner anim (cloud icon halka pulse) */
.onboarding-illustration__cloud {
    animation: onboarding-cloud-float 4s ease-in-out infinite;
    transform-origin: center;
}

.onboarding-illustration__device {
    animation: onboarding-device-pop 3s ease-in-out infinite;
}

.onboarding-illustration__device--laptop { animation-delay: 0s; }
.onboarding-illustration__device--tablet { animation-delay: 0.7s; }
.onboarding-illustration__device--phone  { animation-delay: 1.4s; }

@keyframes onboarding-cloud-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

@keyframes onboarding-device-pop {
    0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
    50%      { transform: translateY(-3px) scale(1.04); opacity: 0.95; }
}

/* ----- Step Title & Description ----- */
.onboarding-step__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-700);
    letter-spacing: -0.018em;
    line-height: 1.3;
    margin: 0 0 0.625rem;
    text-align: center;
}

.onboarding-step__description {
    font-size: 0.9375rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0 0 1.25rem;
    text-align: center;
    flex: 1;
}

.onboarding-step__description strong {
    color: var(--gray-800);
    font-weight: 700;
}

/* ----- Step Highlights (check list — gerçek özellikler) ----- */
.onboarding-step__highlights {
    list-style: none;
    padding: 0.875rem 0 0;
    margin: 0;
    border-top: 1px dashed var(--gray-200);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.onboarding-step__highlight {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--gray-700);
    line-height: 1.4;
}

.onboarding-step__highlight i {
    color: var(--primary-600);
    font-size: 0.875rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.onboarding-step__highlight strong {
    color: var(--accent-700);
    font-weight: 700;
}

/* ----- Final CTA Row (steps altı) ----- */
.onboarding-section__cta {
    text-align: center;
    margin-top: 2.75rem;
}

.onboarding-section__cta-note {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin-top: 1rem;
}

.onboarding-section__cta-note i {
    color: var(--primary-600);
    margin-right: 0.35rem;
}

/* Sequence reveal stagger (data-aos parent, ::before delay) */
.onboarding-step[data-step="1"] { transition-delay: 0ms; }
.onboarding-step[data-step="2"] { transition-delay: 80ms; }
.onboarding-step[data-step="3"] { transition-delay: 160ms; }

/* ----- Features KPI Glimpse Grid (features.blade.php hero altı) ----- */
.features-kpi-glimpse {
    padding: 3rem 0 2rem;
    margin-top: -4rem;
    position: relative;
    z-index: 3;
}

.features-kpi-glimpse__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .features-kpi-glimpse {
        margin-top: -2rem;
        padding: 1.5rem 0 1rem;
    }
    .features-kpi-glimpse__grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .features-kpi-glimpse__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Sector Carousel (Homepage — "Hangi Esnaf Kullanır?")
   CSS scroll-snap pattern. Desktop 4 kart, tablet 2, mobil 1.
   Manager: js/landing/modules/sector-carousel-manager.js
   ============================================================ */
.sector-carousel-section {
    padding: var(--spacing-12) 0;
    background: linear-gradient(180deg, #ffffff 0%, var(--color-primary-50) 100%);
}

.sector-carousel__header {
    text-align: center;
    margin-bottom: var(--spacing-8);
}

.sector-carousel__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-primary-700);
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-200);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-3);
}

.sector-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    max-width: 1280px;
    margin: 0 auto;
}

.sector-carousel__viewport {
    flex: 1;
    overflow: hidden;
    border-radius: var(--radius-2xl);
}

.sector-carousel__track {
    list-style: none;
    margin: 0;
    padding: var(--spacing-2) 0;
    display: flex;
    gap: var(--spacing-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
}

.sector-carousel__track::-webkit-scrollbar {
    display: none; /* WebKit */
}

.sector-carousel__slide {
    flex: 0 0 calc((100% - var(--spacing-4) * 3) / 4); /* Desktop: 4 cards visible */
    scroll-snap-align: start;
    list-style: none;
}

@media (max-width: 992px) {
    .sector-carousel__slide {
        flex: 0 0 calc((100% - var(--spacing-4)) / 2); /* Tablet: 2 cards */
    }
}

@media (max-width: 576px) {
    .sector-carousel__slide {
        flex: 0 0 100%; /* Mobile: 1 card */
    }
}

/* Mini Card — premium SaaS sector card */
.sector-mini-card {
    height: 100%;
    background: #ffffff;
    border: 1px solid var(--color-primary-100);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-5);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    box-shadow: 0 8px 24px -12px rgba(24, 32, 69, 0.15);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.sector-mini-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary-300);
    box-shadow: 0 24px 50px -20px rgba(24, 32, 69, 0.3);
}

.sector-mini-card__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-xl);
    background: var(--gradient-primary);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 8px 22px -8px rgba(42, 58, 114, 0.45);
}

.sector-mini-card__name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-900);
    margin: 0;
    line-height: var(--line-height-snug);
}

.sector-mini-card__description {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: var(--line-height-snug);
    margin: 0;
    flex: 1;
}

.sector-mini-card__feature {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    background: var(--color-primary-50);
    border-left: 3px solid var(--color-primary-600);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    color: var(--color-primary-800);
    line-height: var(--line-height-snug);
}

.sector-mini-card__feature i {
    color: var(--color-primary-600);
    font-size: 0.875rem;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Navigation buttons */
.sector-carousel__nav {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--color-primary-200);
    color: var(--color-primary-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 12px -4px rgba(24, 32, 69, 0.15);
    transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
}

.sector-carousel__nav:hover:not(:disabled) {
    background: var(--gradient-primary);
    color: #ffffff;
    border-color: transparent;
    transform: scale(1.05);
}

.sector-carousel__nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.sector-carousel__nav:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 3px;
}

@media (max-width: 576px) {
    .sector-carousel__nav {
        width: 36px;
        height: 36px;
        font-size: 0.875rem;
    }
}

/* Dots */
.sector-carousel__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-6);
}

.sector-carousel__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary-200);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background var(--transition-base), transform var(--transition-base), width var(--transition-base);
}

.sector-carousel__dot:hover {
    background: var(--color-primary-400);
}

.sector-carousel__dot--active {
    background: var(--color-primary-600);
    width: 28px;
    border-radius: var(--radius-full);
}

.sector-carousel__dot:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 3px;
}

/* CTA footer */
.sector-carousel__cta {
    text-align: center;
    margin-top: var(--spacing-6);
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
}

.sector-carousel__cta i {
    color: var(--color-primary-600);
    margin-right: var(--spacing-1);
}

/* Reduced motion guard */
@media (prefers-reduced-motion: reduce) {
    .sector-carousel__track {
        scroll-behavior: auto;
    }

    .sector-mini-card,
    .sector-carousel__nav,
    .sector-carousel__dot {
        transition: none;
    }
}

/* ============================================================
   Comparison Table (Global — homepage + einvoice + diğer sayfalar)
   Stripe/Linear premium SaaS pricing comparison pattern
   ============================================================ */
.homepage-comparison-section {
    padding: var(--spacing-12) 0;
    background: #ffffff;
}

.comparison-table-wrapper {
    max-width: 1080px;
    margin: 0 auto;
    overflow-x: auto;
    border-radius: var(--radius-2xl);
    box-shadow: 0 20px 60px -20px rgba(24, 32, 69, 0.25);
    background: #ffffff;
    border: 1px solid var(--color-primary-100);
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-base);
}

.comparison-table thead {
    background: linear-gradient(135deg, var(--color-primary-800) 0%, var(--color-primary-600) 100%);
}

.comparison-table thead th {
    padding: var(--spacing-5);
    color: #ffffff;
    font-weight: var(--font-weight-semibold);
    text-align: left;
    font-size: var(--font-size-sm);
    letter-spacing: 0.3px;
}

.comparison-table__feature-col { width: 32%; }
.comparison-table__competitor-col,
.comparison-table__aysima-col { width: 34%; }

.comparison-table__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
}

.comparison-table__brand--competitor { color: rgba(255, 255, 255, 0.7); }
.comparison-table__brand--competitor i { color: var(--color-danger-300); }
.comparison-table__brand--aysima { color: #ffffff; }
.comparison-table__brand--aysima i { color: var(--color-warning-300); }

.comparison-table tbody tr {
    border-bottom: 1px solid var(--color-primary-50);
    transition: background-color var(--transition-fast);
}

.comparison-table tbody tr:last-child { border-bottom: none; }
.comparison-table tbody tr:hover { background: var(--color-primary-50); }

.comparison-table tbody th {
    padding: var(--spacing-4) var(--spacing-5);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-900);
    font-size: var(--font-size-sm);
    vertical-align: middle;
}

.comparison-table tbody td {
    padding: var(--spacing-4) var(--spacing-5);
    vertical-align: middle;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
}

.comparison-table tbody td i {
    margin-right: var(--spacing-2);
    font-size: 1rem;
    width: 18px;
    text-align: center;
}

.comparison-table__negative { color: var(--color-gray-600); }
.comparison-table__negative i { color: var(--color-danger-500); }

.comparison-table__positive {
    color: var(--color-primary-800);
    font-weight: var(--font-weight-medium);
    background: linear-gradient(90deg, rgba(42, 58, 114, 0.04) 0%, transparent 100%);
}
.comparison-table__positive i { color: var(--color-success-600); }

.comparison-table__note {
    text-align: center;
    margin-top: var(--spacing-6);
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
}
.comparison-table__note i {
    color: var(--color-primary-600);
    margin-right: var(--spacing-1);
}

@media (max-width: 768px) {
    .comparison-table thead th {
        padding: var(--spacing-3);
        font-size: var(--font-size-xs);
    }
    .comparison-table__brand { font-size: var(--font-size-sm); gap: var(--spacing-1); }
    .comparison-table tbody th,
    .comparison-table tbody td {
        padding: var(--spacing-3);
        font-size: var(--font-size-xs);
    }
    .comparison-table tbody td i { font-size: 0.875rem; width: 14px; }
}

/* ============================================================
   FAQ Accordion (Global — homepage + features + einvoice + diğer sayfalar)
   Native <details>/<summary> pattern, FAQ schema ile aynı kaynaktan beslenir.
   Class adı einvoice-faq-* tarihsel sebeple korundu (reusable selector).
   ============================================================ */
.einvoice-faq-section {
    padding: var(--spacing-12) 0;
    background: linear-gradient(180deg, #ffffff 0%, var(--color-primary-50) 100%);
}

.einvoice-faq-list {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.einvoice-faq-item {
    background: #ffffff;
    border: 1px solid var(--color-primary-100);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.einvoice-faq-item:hover {
    border-color: var(--color-primary-300);
    box-shadow: 0 10px 30px -10px rgba(24, 32, 69, 0.15);
}

.einvoice-faq-item[open] {
    border-color: var(--color-primary-600);
    box-shadow: 0 20px 50px -20px rgba(24, 32, 69, 0.25);
}

.einvoice-faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    padding: var(--spacing-5) var(--spacing-6);
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    color: var(--color-primary-900);
    list-style: none;
    user-select: none;
}

.einvoice-faq-item__question::-webkit-details-marker {
    display: none;
}

.einvoice-faq-item__q-text {
    flex: 1;
    line-height: var(--line-height-snug);
}

.einvoice-faq-item__toggle {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    transition: transform var(--transition-base), background-color var(--transition-base), color var(--transition-base);
}

.einvoice-faq-item[open] .einvoice-faq-item__toggle {
    background: var(--gradient-primary);
    color: #ffffff;
    transform: rotate(45deg);
}

.einvoice-faq-item__answer {
    padding: 0 var(--spacing-6) var(--spacing-5);
    color: var(--color-gray-700);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    animation: einvoice-faq-fadein 280ms ease-out;
}

.einvoice-faq-item__answer p {
    margin: 0;
}

@keyframes einvoice-faq-fadein {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.einvoice-faq-section__more {
    text-align: center;
    margin-top: var(--spacing-8);
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
    .einvoice-faq-item__question {
        padding: var(--spacing-4) var(--spacing-5);
        font-size: var(--font-size-base);
        gap: var(--spacing-3);
    }
    .einvoice-faq-item__toggle {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .einvoice-faq-item__answer {
        padding: 0 var(--spacing-5) var(--spacing-4);
        font-size: var(--font-size-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .einvoice-faq-item__answer { animation: none; }
    .einvoice-faq-item__toggle { transition: none; }
}

/* ===================================
   Sektörler Hover Dropdown — CSS-only, sıfır JS bağımlılığı
   Pattern: parent relative + submenu absolute + :hover/:focus-within toggle
   =================================== */
.nav-item--has-submenu {
    position: relative;
}

.nav-submenu-caret {
    font-size: 0.65em;
    margin-left: 0.35rem;
    vertical-align: 0.1em;
    transition: transform 0.2s ease;
    color: var(--gray-500, #78716c);
}

.nav-item--has-submenu:hover .nav-submenu-caret,
.nav-item--has-submenu:focus-within .nav-submenu-caret {
    transform: rotate(180deg);
    color: var(--primary-600, #2a3a72);
}

.nav-submenu {
    list-style: none;
    margin: 0;
    padding: 0.5rem;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 320px;
    background: #ffffff;
    border: 1px solid var(--primary-100, #dbe1f1);
    border-radius: 14px;
    box-shadow: 0 18px 44px -18px rgba(24, 32, 69, 0.28);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.nav-item--has-submenu:hover > .nav-submenu,
.nav-item--has-submenu:focus-within > .nav-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}

.nav-submenu__header {
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--primary-600, #2a3a72);
    padding: 0.4rem 0.75rem 0.5rem;
}

.nav-submenu__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--gray-800, #292524);
    transition: background 0.18s ease;
}

.nav-submenu__item:hover,
.nav-submenu__item:focus {
    background: var(--primary-50, #f1f3fb);
    color: var(--primary-800, #182045);
    text-decoration: none;
}

.nav-submenu__icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--primary-800, #182045) 0%, var(--primary-600, #2a3a72) 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
    box-shadow: 0 6px 14px -6px rgba(42, 58, 114, 0.4);
}

.nav-submenu__body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.nav-submenu__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--primary-800, #182045);
    line-height: 1.3;
}

.nav-submenu__desc {
    font-size: 0.75rem;
    color: var(--gray-600, #57534e);
    line-height: 1.4;
}

/* Mobile: collapse-within-collapse — submenu inline'a düşer */
@media (max-width: 991px) {
    .nav-submenu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        min-width: 100%;
        box-shadow: none;
        border: 0;
        border-left: 2px solid var(--primary-200, #b8c4e3);
        margin-left: 1rem;
        margin-top: 0.25rem;
        margin-bottom: 0.5rem;
        background: transparent;
        transition: none;
    }
    .nav-item--has-submenu:hover > .nav-submenu,
    .nav-item--has-submenu:focus-within > .nav-submenu {
        transform: none;
    }
    .nav-submenu__icon {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-submenu,
    .nav-submenu-caret,
    .nav-submenu__item {
        transition: none;
    }
}

/* ===================================
   Announcement Bar — Üst conversion bandı
   position: relative (sticky değil) — sayfa scroll'da kayar
   z-index düşük, mevcut sticky header'ı etkilemez
   =================================== */
.announcement-bar {
    background: var(--gradient-primary);
    color: #ffffff;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.announcement-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1rem;
    min-height: 38px;
}

.announcement-bar__text {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    color: rgba(255, 255, 255, 0.96);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem 0.5rem;
}

.announcement-bar__text strong {
    font-weight: 800;
    color: #ffffff;
}

.announcement-bar__icon {
    font-size: 1.05rem;
    margin-right: 0.15rem;
}

.announcement-bar__sep {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 300;
}

@media (max-width: 767px) {
    .announcement-bar__text {
        font-size: 0.8125rem;
    }
    .announcement-bar__inner {
        padding: 0.5rem 0.75rem;
    }
}

/* (Announcement bar dismiss kuralları kaldırıldı — banner kalıcı, kapatılamaz) */
@media (prefers-reduced-motion: reduce) {
    .announcement-bar {
        transition: none;
    }
}

/* ===================================
   Navbar Auth: Login Text-Link + CTA Accent
   Fitts's Law — primary CTA büyük target, secondary sade text
   =================================== */
.navbar-login-link {
    color: var(--primary-700, #1f2c5a);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.navbar-login-link:hover,
.navbar-login-link:focus {
    background: var(--primary-50, #f1f3fb);
    color: var(--primary-900, #0c1535);
    text-decoration: none;
}

.btn-cta-primary {
    background: var(--gradient-primary);
    color: #ffffff;
    border: 0;
    font-weight: 700;
    padding: 0.55rem 1.15rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 10px 22px -10px rgba(42, 58, 114, 0.55);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-cta-primary:hover,
.btn-cta-primary:focus {
    background: var(--gradient-primary-hover, var(--gradient-primary));
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px -10px rgba(42, 58, 114, 0.7);
    text-decoration: none;
}

.btn-cta-primary:active {
    transform: translateY(0);
}

.btn-cta-primary__arrow {
    transition: transform 0.2s ease;
    font-size: 0.85em;
}

.btn-cta-primary:hover .btn-cta-primary__arrow {
    transform: translateX(3px);
}

/* Mobile: navbar buttons full-width, CTA prominent */
@media (max-width: 991px) {
    .navbar-buttons {
        padding-top: 0.75rem;
        margin-top: 0.5rem;
        border-top: 1px solid var(--gray-200, #e7e5e4);
        flex-wrap: wrap;
    }
    .navbar-buttons .btn-cta-primary {
        flex: 1;
        justify-content: center;
    }
    .navbar-login-link {
        text-align: center;
        justify-content: center;
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-cta-primary,
    .btn-cta-primary__arrow,
    .navbar-login-link {
        transition: none;
    }
    .btn-cta-primary:hover {
        transform: none;
    }
    .btn-cta-primary:hover .btn-cta-primary__arrow {
        transform: none;
    }
}