/* SF Pro Display Font Stack */
* {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, #a78bfa 0%, #60a5fa 50%, #34d399 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-2 {
    background: linear-gradient(135deg, #f472b6 0%, #a78bfa 50%, #60a5fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glow Effects */
.glow-purple {
    box-shadow: 0 0 30px rgba(255,255,255,0.06), 0 0 60px rgba(255,255,255,0.03);
}
.glow-button {
    box-shadow: 0 2px 16px rgba(255, 255, 255, 0.12);
}

/* Gradient Border — border kaldırıldı, sadece arka plan */
.gradient-border {
    position: relative;
    background: #1a1a1a;
    border-radius: 20px;
}

.gradient-border-sm {
    position: relative;
    background: #161616;
    border-radius: 14px;
}

/* Marquee Animation */
.marquee-wrapper {
    overflow: hidden;
    width: 100%;
}
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 30s linear infinite;
}
.marquee-track:hover {
    animation-play-state: paused;
}
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Noise Texture Overlay */
.noise-overlay {
    position: relative;
}
.noise-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.4;
}

/* Hero Glow Background */
.hero-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 70%);
    pointer-events: none;
}
.hero-glow-2 {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* Smooth transitions */
a, button { transition: all 0.2s ease; }

/* Table custom */
.comparison-table th,
.comparison-table td {
    border-color: #2a2a2a;
}

/* FAQ Accordion */
.faq-item .faq-answer {
    display: none;
}
.faq-item.open .faq-answer {
    display: block;
}
.faq-item.open .faq-icon {
    transform: rotate(45deg);
}
.faq-icon {
    transition: transform 0.3s ease;
}

/* Badge Pulse */
.badge-pulse {
    position: relative;
}
.badge-pulse::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(167,139,250,0.4), rgba(96,165,250,0.4));
    animation: pulse-ring 2s ease-out infinite;
    z-index: -1;
}
@keyframes pulse-ring {
    0% { opacity: 0.8; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.3); }
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Hover card lift */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

/* Grid dot background */
.grid-bg {
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Section divider */
.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}

/* Mobile nav toggle */
#mobile-menu { display: none; }
#mobile-menu.open { display: flex; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-glow, .hero-glow-2 { display: none; }
    .marquee-track { animation-duration: 20s; }
}