/* ================================================================================
   FIZIKSELSUNUCU.NET - MASTER TEMPLATE SYSTEM
   Version: 2.0.0
   Author: FizikselSunucu Design Team
   ================================================================================

   BU DOSYA TUM LANDING PAGE'LER ICIN STANDART SABLON SISTEMINI ICERIR
   - SEO-Optimized Typography (H1-H6)
   - Reusable Components (Hero, Features, Pricing, FAQ, CTA, Testimonials)
   - Seamless Graphics & Patterns
   - Responsive Grid System
   - Animation Library

   ================================================================================ */

/* ================================================================================
   1. BASE CONFIGURATION & CSS VARIABLES
   ================================================================================ */

:root {
    /* Primary Colors */
    --fs-primary: #2563eb;
    --fs-primary-rgb: 37, 99, 235;
    --fs-primary-50: #eff6ff;
    --fs-primary-100: #dbeafe;
    --fs-primary-200: #bfdbfe;
    --fs-primary-300: #93c5fd;
    --fs-primary-400: #60a5fa;
    --fs-primary-500: #3b82f6;
    --fs-primary-600: #2563eb;
    --fs-primary-700: #1d4ed8;
    --fs-primary-800: #1e40af;
    --fs-primary-900: #1e3a8a;

    /* Secondary Colors */
    --fs-secondary: #7c3aed;
    --fs-secondary-rgb: 124, 58, 237;
    --fs-secondary-50: #f5f3ff;
    --fs-secondary-100: #ede9fe;
    --fs-secondary-200: #ddd6fe;
    --fs-secondary-300: #c4b5fd;
    --fs-secondary-400: #a78bfa;
    --fs-secondary-500: #8b5cf6;
    --fs-secondary-600: #7c3aed;
    --fs-secondary-700: #6d28d9;
    --fs-secondary-800: #5b21b6;
    --fs-secondary-900: #4c1d95;

    /* Accent Colors */
    --fs-accent: #06b6d4;
    --fs-success: #10b981;
    --fs-warning: #f59e0b;
    --fs-danger: #ef4444;

    /* Neutral Colors */
    --fs-dark: #0f172a;
    --fs-gray-900: #111827;
    --fs-gray-800: #1f2937;
    --fs-gray-700: #374151;
    --fs-gray-600: #4b5563;
    --fs-gray-500: #6b7280;
    --fs-gray-400: #9ca3af;
    --fs-gray-300: #d1d5db;
    --fs-gray-200: #e5e7eb;
    --fs-gray-100: #f3f4f6;
    --fs-gray-50: #f9fafb;
    --fs-white: #ffffff;

    /* Gradients */
    --fs-gradient-primary: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    --fs-gradient-secondary: linear-gradient(135deg, #7c3aed 0%, #4f46e5 50%, #2563eb 100%);
    --fs-gradient-accent: linear-gradient(135deg, #0ea5e9 0%, #2563eb 50%, #7c3aed 100%);
    --fs-gradient-dark: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    --fs-gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --fs-gradient-warm: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);

    /* Shadows */
    --fs-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --fs-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --fs-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --fs-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --fs-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --fs-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --fs-shadow-primary: 0 10px 40px -10px rgba(37, 99, 235, 0.4);
    --fs-shadow-secondary: 0 10px 40px -10px rgba(124, 58, 237, 0.4);

    /* Border Radius */
    --fs-radius-sm: 8px;
    --fs-radius: 12px;
    --fs-radius-lg: 16px;
    --fs-radius-xl: 20px;
    --fs-radius-2xl: 24px;
    --fs-radius-3xl: 32px;
    --fs-radius-full: 9999px;

    /* Spacing Scale */
    --fs-space-1: 4px;
    --fs-space-2: 8px;
    --fs-space-3: 12px;
    --fs-space-4: 16px;
    --fs-space-5: 20px;
    --fs-space-6: 24px;
    --fs-space-8: 32px;
    --fs-space-10: 40px;
    --fs-space-12: 48px;
    --fs-space-16: 64px;
    --fs-space-20: 80px;
    --fs-space-24: 96px;

    /* Typography Scale */
    --fs-text-xs: 0.75rem;      /* 12px */
    --fs-text-sm: 0.875rem;     /* 14px */
    --fs-text-base: 1rem;       /* 16px */
    --fs-text-lg: 1.125rem;     /* 18px */
    --fs-text-xl: 1.25rem;      /* 20px */
    --fs-text-2xl: 1.5rem;      /* 24px */
    --fs-text-3xl: 1.875rem;    /* 30px */
    --fs-text-4xl: 2.25rem;     /* 36px */
    --fs-text-5xl: 3rem;        /* 48px */
    --fs-text-6xl: 3.75rem;     /* 60px */

    /* Transitions */
    --fs-transition-fast: 150ms ease;
    --fs-transition: 200ms ease;
    --fs-transition-slow: 300ms ease;
    --fs-transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ================================================================================
   2. SEO-OPTIMIZED TYPOGRAPHY (H1-H6 Hierarchy)
   ================================================================================ */

/* Base Typography */
.fs-page {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.7;
    color: var(--fs-gray-700);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* H1 - Primary Page Title (Only 1 per page - SEO Critical) */
.fs-h1,
.fs-page h1 {
    font-size: clamp(2rem, 5vw, 3rem);   /* 32px - 48px responsive */
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--fs-dark);
    margin: 0 0 var(--fs-space-6) 0;
}

.fs-h1-hero {
    font-size: clamp(2.25rem, 6vw, 3.5rem);  /* 36px - 56px for hero sections */
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

/* H2 - Section Titles (Multiple per page - SEO Important) */
.fs-h2,
.fs-page h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);  /* 28px - 40px responsive */
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--fs-dark);
    margin: 0 0 var(--fs-space-4) 0;
}

/* H3 - Subsection Titles / Card Titles */
.fs-h3,
.fs-page h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);  /* 20px - 24px responsive */
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--fs-dark);
    margin: 0 0 var(--fs-space-3) 0;
}

/* H4 - Component Titles / List Titles */
.fs-h4,
.fs-page h4 {
    font-size: clamp(1.1rem, 2vw, 1.25rem);   /* 17.6px - 20px responsive */
    font-weight: 700;
    line-height: 1.4;
    color: var(--fs-dark);
    margin: 0 0 var(--fs-space-2) 0;
}

/* H5 - Small Titles */
.fs-h5,
.fs-page h5 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--fs-dark);
    margin: 0 0 var(--fs-space-2) 0;
}

/* H6 - Label Titles */
.fs-h6,
.fs-page h6 {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fs-gray-600);
    margin: 0 0 var(--fs-space-2) 0;
}

/* Paragraph Styles */
.fs-lead {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    line-height: 1.7;
    color: var(--fs-gray-600);
}

.fs-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--fs-gray-600);
}

.fs-text-sm {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--fs-gray-500);
}

/* On-Page SEO Text Utilities */

/* Screen Reader Only - Accessibility */
.fs-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Text Colors - Light Background */
.fs-text-dark { color: var(--fs-dark) !important; }
.fs-text-primary { color: var(--fs-primary) !important; }
.fs-text-secondary { color: var(--fs-secondary) !important; }
.fs-text-muted { color: var(--fs-gray-500) !important; }
.fs-text-success { color: var(--fs-success) !important; }
.fs-text-warning { color: var(--fs-warning) !important; }
.fs-text-danger { color: var(--fs-danger) !important; }

/* Text Colors - Dark Background */
.fs-text-white { color: var(--fs-white) !important; }
.fs-text-light { color: var(--fs-gray-300) !important; }
.fs-text-light-muted { color: var(--fs-gray-400) !important; }

/* Dark Section Typography Override */
.fs-dark-section,
[class*="-section-dark"] {
    color: var(--fs-white) !important;
}

.fs-dark-section h1,
.fs-dark-section h2,
.fs-dark-section h3,
.fs-dark-section h4,
.fs-dark-section h5,
.fs-dark-section h6,
[class*="-section-dark"] h1,
[class*="-section-dark"] h2,
[class*="-section-dark"] h3,
[class*="-section-dark"] h4,
[class*="-section-dark"] h5,
[class*="-section-dark"] h6 {
    color: var(--fs-white) !important;
}

.fs-dark-section p,
.fs-dark-section li,
.fs-dark-section span:not([class*="highlight"]),
[class*="-section-dark"] p,
[class*="-section-dark"] li,
[class*="-section-dark"] span:not([class*="highlight"]) {
    color: var(--fs-gray-300) !important;
}

/* Text Alignment */
.fs-text-left { text-align: left !important; }
.fs-text-center { text-align: center !important; }
.fs-text-right { text-align: right !important; }

/* Text Weight */
.fs-font-normal { font-weight: 400 !important; }
.fs-font-medium { font-weight: 500 !important; }
.fs-font-semibold { font-weight: 600 !important; }
.fs-font-bold { font-weight: 700 !important; }
.fs-font-extrabold { font-weight: 800 !important; }

/* Text Transform */
.fs-uppercase { text-transform: uppercase !important; }
.fs-lowercase { text-transform: lowercase !important; }
.fs-capitalize { text-transform: capitalize !important; }
.fs-normal-case { text-transform: none !important; }

/* Line Height */
.fs-leading-tight { line-height: 1.25 !important; }
.fs-leading-snug { line-height: 1.375 !important; }
.fs-leading-normal { line-height: 1.5 !important; }
.fs-leading-relaxed { line-height: 1.625 !important; }
.fs-leading-loose { line-height: 2 !important; }

/* Letter Spacing */
.fs-tracking-tight { letter-spacing: -0.025em !important; }
.fs-tracking-normal { letter-spacing: 0 !important; }
.fs-tracking-wide { letter-spacing: 0.025em !important; }
.fs-tracking-wider { letter-spacing: 0.05em !important; }

/* Gradient Text */
.fs-text-gradient {
    background: var(--fs-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

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

/* Badge/Label Text */
.fs-badge-text {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.075em;
}

/* Price Text */
.fs-price {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1;
    color: var(--fs-dark);
}

.fs-price-currency {
    font-size: 0.5em;
    font-weight: 600;
    vertical-align: super;
}

.fs-price-period {
    font-size: 0.4em;
    font-weight: 500;
    color: var(--fs-gray-500);
}

/* Highlight/Accent Text */
.fs-highlight {
    background: linear-gradient(180deg, transparent 60%, rgba(37, 99, 235, 0.2) 60%);
    padding: 0 4px;
}

/* Max Width for Readability */
.fs-max-w-prose { max-width: 65ch; }
.fs-max-w-sm { max-width: 400px; }
.fs-max-w-md { max-width: 600px; }
.fs-max-w-lg { max-width: 800px; }
.fs-max-w-xl { max-width: 1000px; }

/* ================================================================================
   3. SEAMLESS GRAPHIC PATTERNS (SVG Based - No Image Dependencies)
   ================================================================================ */

/* Pattern: Dots */
.fs-pattern-dots {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Pattern: Grid */
.fs-pattern-grid {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M0 40V0h40'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Pattern: Crosses */
.fs-pattern-crosses {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Pattern: Waves */
.fs-pattern-waves {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072H21.22c-.457-.192-.9-.378-1.329-.558C10.67 16.147 5.503 15 0 15v-1zm50-6c10.271 0 15.362 1.222 24.629 4.928C84.112 16.722 89.438 18 100 18v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 7.278 60.562 6 50 6c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662C16.573 13.677 11.648 15 0 15v2c13.073 0 18.635-1.64 24.377-4.063l1.768-.661C33.64 9.347 39.647 8 50 8z' fill='%23ffffff' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* Pattern: Circles */
.fs-pattern-circles {
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M40 40c0-11.046-8.954-20-20-20v40c11.046 0 20-8.954 20-20zm20 0c0 11.046-8.954 20-20 20V20c11.046 0 20 8.954 20 20z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Pattern: Hexagons */
.fs-pattern-hexagons {
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Pattern: Topography */
.fs-pattern-topo {
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='topo' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 50 Q25 25 50 50 T100 50' stroke='%23ffffff' stroke-opacity='0.03' fill='none' stroke-width='1'/%3E%3Cpath d='M0 70 Q25 45 50 70 T100 70' stroke='%23ffffff' stroke-opacity='0.03' fill='none' stroke-width='1'/%3E%3Cpath d='M0 30 Q25 5 50 30 T100 30' stroke='%23ffffff' stroke-opacity='0.03' fill='none' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23topo)' width='100%25' height='100%25'/%3E%3C/svg%3E");
}

/* Decorative Elements */
.fs-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.3;
    pointer-events: none;
}

.fs-glow-primary {
    background: var(--fs-primary);
}

.fs-glow-secondary {
    background: var(--fs-secondary);
}

/* ================================================================================
   4. PAGE LAYOUT & CONTAINER
   ================================================================================ */

/* Hide cart sidebar in landing pages */
.fs-page .cart-sidebar,
.fs-page #order-standard_cart .cart-sidebar {
    display: none !important;
}

.fs-page .cart-body {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* Page Container */
.fs-page {
    margin: -40px -15px 0;
    overflow-x: hidden;
}

.fs-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.fs-container-sm {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.fs-container-lg {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ================================================================================
   5. SECTION COMPONENTS
   ================================================================================ */

/* Base Section */
.fs-section {
    padding: var(--fs-space-20) var(--fs-space-5);
    position: relative;
}

.fs-section-sm {
    padding: var(--fs-space-12) var(--fs-space-5);
}

.fs-section-lg {
    padding: var(--fs-space-24) var(--fs-space-5);
}

/* Section Backgrounds */
.fs-section-white {
    background: var(--fs-white);
}

.fs-section-gray {
    background: var(--fs-gray-50);
}

.fs-section-dark {
    background: var(--fs-gradient-dark);
    color: var(--fs-white);
}

.fs-section-dark .fs-h2,
.fs-section-dark .fs-h3,
.fs-section-dark h2,
.fs-section-dark h3 {
    color: var(--fs-white);
}

.fs-section-dark .fs-text,
.fs-section-dark .fs-lead,
.fs-section-dark p {
    color: var(--fs-gray-300);
}

.fs-section-primary {
    background: var(--fs-gradient-primary);
    color: var(--fs-white);
}

.fs-section-secondary {
    background: var(--fs-gradient-secondary);
    color: var(--fs-white);
}

.fs-section-accent {
    background: var(--fs-gradient-accent);
    color: var(--fs-white);
}

/* Section Header */
.fs-section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--fs-space-12);
}

.fs-section-header .fs-badge {
    margin-bottom: var(--fs-space-4);
}

.fs-section-header .fs-h2 {
    margin-bottom: var(--fs-space-4);
}

/* ================================================================================
   6. HERO COMPONENT
   ================================================================================ */

.fs-hero {
    padding: var(--fs-space-20) var(--fs-space-5);
    position: relative;
    overflow: hidden;
}

.fs-hero-lg {
    padding: var(--fs-space-24) var(--fs-space-5);
}

.fs-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.fs-hero-content .fs-h1-hero {
    color: var(--fs-white);
    margin-bottom: var(--fs-space-5);
}

.fs-hero-content .fs-lead {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--fs-space-8);
}

/* Hero Stats */
.fs-hero-stats {
    display: flex;
    justify-content: center;
    gap: var(--fs-space-10);
    flex-wrap: wrap;
    margin-top: var(--fs-space-10);
}

.fs-hero-stat {
    text-align: center;
}

.fs-hero-stat-value {
    display: block;
    font-size: var(--fs-text-3xl);
    font-weight: 800;
    line-height: 1.2;
}

.fs-hero-stat-label {
    font-size: var(--fs-text-sm);
    opacity: 0.8;
}

/* ================================================================================
   7. BADGE COMPONENT
   ================================================================================ */

.fs-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--fs-space-2);
    padding: var(--fs-space-2) var(--fs-space-5);
    border-radius: var(--fs-radius-full);
    font-size: var(--fs-text-sm);
    font-weight: 600;
}

.fs-badge-primary {
    background: rgba(37, 99, 235, 0.1);
    color: var(--fs-primary);
}

.fs-badge-secondary {
    background: rgba(124, 58, 237, 0.1);
    color: var(--fs-secondary);
}

.fs-badge-light {
    background: rgba(255, 255, 255, 0.15);
    color: var(--fs-white);
    backdrop-filter: blur(10px);
}

.fs-badge-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--fs-success);
}

.fs-badge i {
    font-size: 0.9em;
}

/* ================================================================================
   8. GRID SYSTEMS
   ================================================================================ */

.fs-grid {
    display: grid;
    gap: var(--fs-space-6);
}

.fs-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.fs-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.fs-grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.fs-grid-pricing {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--fs-space-6);
    max-width: 1200px;
    margin: 0 auto;
}

.fs-grid-features {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--fs-space-8);
    max-width: 1200px;
    margin: 0 auto;
}

.fs-grid-specs {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--fs-space-6);
    max-width: 1000px;
    margin: 0 auto;
}

.fs-grid-faq {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--fs-space-5);
    max-width: 1100px;
    margin: 0 auto;
}

/* ================================================================================
   9. CARD COMPONENTS
   ================================================================================ */

/* Base Card */
.fs-card {
    background: var(--fs-white);
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-radius-lg);
    padding: var(--fs-space-6);
    transition: all var(--fs-transition-slow);
}

.fs-card:hover {
    border-color: var(--fs-primary);
    box-shadow: var(--fs-shadow-lg);
    transform: translateY(-4px);
}

/* Feature Card */
.fs-feature-card {
    background: var(--fs-white);
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-radius-xl);
    padding: var(--fs-space-8);
    transition: all var(--fs-transition-slow);
}

.fs-feature-card:hover {
    border-color: var(--fs-primary);
    box-shadow: var(--fs-shadow-xl);
    transform: translateY(-6px);
}

.fs-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--fs-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: var(--fs-space-5);
}

.fs-feature-icon-primary {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(37, 99, 235, 0.05));
    color: var(--fs-primary);
}

.fs-feature-icon-secondary {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(124, 58, 237, 0.05));
    color: var(--fs-secondary);
}

.fs-feature-icon-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
    color: var(--fs-success);
}

.fs-feature-icon-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
    color: var(--fs-warning);
}

.fs-feature-icon-accent {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(6, 182, 212, 0.05));
    color: var(--fs-accent);
}

.fs-feature-icon-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
    color: var(--fs-danger);
}

/* Pricing Card */
.fs-pricing-card {
    background: var(--fs-white);
    border: 2px solid var(--fs-gray-200);
    border-radius: var(--fs-radius-2xl);
    padding: var(--fs-space-8);
    transition: all var(--fs-transition-slow);
    position: relative;
    overflow: hidden;
}

.fs-pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--fs-gradient-primary);
    opacity: 0;
    transition: opacity var(--fs-transition);
}

.fs-pricing-card:hover {
    border-color: var(--fs-primary);
    transform: translateY(-8px);
    box-shadow: var(--fs-shadow-2xl);
}

.fs-pricing-card:hover::before {
    opacity: 1;
}

.fs-pricing-card.fs-popular {
    border-color: var(--fs-primary);
    background: linear-gradient(180deg, var(--fs-primary-50) 0%, var(--fs-white) 100%);
}

.fs-pricing-card.fs-popular::before {
    opacity: 1;
}

.fs-pricing-card.fs-popular::after {
    content: 'POPULER';
    position: absolute;
    top: 20px;
    right: -30px;
    background: var(--fs-gradient-primary);
    color: var(--fs-white);
    padding: 4px 40px;
    font-size: var(--fs-text-xs);
    font-weight: 700;
    transform: rotate(45deg);
}

.fs-pricing-header {
    display: flex;
    align-items: center;
    gap: var(--fs-space-4);
    margin-bottom: var(--fs-space-5);
}

.fs-pricing-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--fs-radius);
    background: var(--fs-gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fs-white);
    font-size: 1.25rem;
}

.fs-pricing-name {
    font-size: var(--fs-text-xl);
    font-weight: 700;
    color: var(--fs-dark);
}

.fs-pricing-desc {
    font-size: var(--fs-text-sm);
    color: var(--fs-gray-500);
    margin-bottom: var(--fs-space-5);
}

.fs-pricing-price {
    margin-bottom: var(--fs-space-6);
}

.fs-pricing-amount {
    font-size: var(--fs-text-4xl);
    font-weight: 800;
    color: var(--fs-dark);
}

.fs-pricing-period {
    font-size: var(--fs-text-base);
    font-weight: 500;
    color: var(--fs-gray-500);
}

.fs-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--fs-space-6);
}

.fs-pricing-features li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--fs-space-3) 0;
    border-bottom: 1px solid var(--fs-gray-100);
    font-size: var(--fs-text-sm);
}

.fs-pricing-features li:last-child {
    border-bottom: none;
}

.fs-pricing-features .fs-feature-label {
    color: var(--fs-gray-600);
    display: flex;
    align-items: center;
    gap: var(--fs-space-2);
}

.fs-pricing-features .fs-feature-label i {
    color: var(--fs-primary);
    width: 16px;
}

.fs-pricing-features .fs-feature-value {
    font-weight: 700;
    color: var(--fs-dark);
}

/* Spec Card (Dark background) */
.fs-spec-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--fs-radius-xl);
    padding: var(--fs-space-8);
    text-align: center;
    backdrop-filter: blur(10px);
    transition: all var(--fs-transition-slow);
}

.fs-spec-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-4px);
}

.fs-spec-card i {
    font-size: var(--fs-text-4xl);
    margin-bottom: var(--fs-space-4);
    background: linear-gradient(135deg, var(--fs-secondary-400), var(--fs-primary-400));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fs-spec-card .fs-h4 {
    color: var(--fs-white);
    margin-bottom: var(--fs-space-2);
}

.fs-spec-card p {
    font-size: var(--fs-text-sm);
    color: var(--fs-gray-400);
    margin: 0;
}

/* FAQ Card */
.fs-faq-card {
    background: var(--fs-white);
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-radius-xl);
    padding: var(--fs-space-6);
    transition: all var(--fs-transition-slow);
}

.fs-faq-card:hover {
    border-color: var(--fs-primary);
    box-shadow: var(--fs-shadow-md);
}

.fs-faq-card .fs-h4 {
    display: flex;
    align-items: flex-start;
    gap: var(--fs-space-3);
    margin-bottom: var(--fs-space-3);
}

.fs-faq-card .fs-h4 i {
    color: var(--fs-primary);
    margin-top: 3px;
    flex-shrink: 0;
}

.fs-faq-card p {
    padding-left: var(--fs-space-8);
    color: var(--fs-gray-600);
    margin: 0;
}

/* ================================================================================
   10. BUTTON COMPONENTS
   ================================================================================ */

.fs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fs-space-2);
    padding: var(--fs-space-4) var(--fs-space-8);
    border-radius: var(--fs-radius);
    font-family: inherit;
    font-size: var(--fs-text-base);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all var(--fs-transition);
}

.fs-btn-primary {
    background: var(--fs-gradient-primary);
    color: var(--fs-white) !important;
    box-shadow: var(--fs-shadow-primary);
}

.fs-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px -10px rgba(37, 99, 235, 0.5);
}

.fs-btn-secondary {
    background: var(--fs-gradient-secondary);
    color: var(--fs-white) !important;
    box-shadow: var(--fs-shadow-secondary);
}

.fs-btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px -10px rgba(124, 58, 237, 0.5);
}

.fs-btn-white {
    background: var(--fs-white);
    color: var(--fs-primary) !important;
}

.fs-btn-white:hover {
    transform: scale(1.05);
    box-shadow: var(--fs-shadow-xl);
}

.fs-btn-outline {
    background: var(--fs-gray-100);
    color: var(--fs-gray-700) !important;
}

.fs-btn-outline:hover {
    background: var(--fs-gray-200);
}

.fs-btn-lg {
    padding: var(--fs-space-5) var(--fs-space-10);
    font-size: var(--fs-text-lg);
    border-radius: var(--fs-radius-lg);
}

.fs-btn-sm {
    padding: var(--fs-space-2) var(--fs-space-4);
    font-size: var(--fs-text-sm);
}

.fs-btn-block {
    display: flex;
    width: 100%;
}

/* ================================================================================
   11. CTA COMPONENT
   ================================================================================ */

.fs-cta {
    padding: var(--fs-space-20) var(--fs-space-5);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.fs-cta-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
}

.fs-cta .fs-h2 {
    color: var(--fs-white);
    margin-bottom: var(--fs-space-4);
}

.fs-cta p {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--fs-text-lg);
    margin-bottom: var(--fs-space-8);
}

/* CTA Pulse Animation */
.fs-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: fs-pulse 4s ease-in-out infinite;
}

@keyframes fs-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

/* ================================================================================
   12. UTILITY CLASSES
   ================================================================================ */

/* Text Alignment */
.fs-text-center { text-align: center; }
.fs-text-left { text-align: left; }
.fs-text-right { text-align: right; }

/* Colors */
.fs-text-white { color: var(--fs-white) !important; }
.fs-text-primary { color: var(--fs-primary) !important; }
.fs-text-secondary { color: var(--fs-secondary) !important; }
.fs-text-muted { color: var(--fs-gray-500) !important; }

/* Spacing */
.fs-mt-0 { margin-top: 0 !important; }
.fs-mb-0 { margin-bottom: 0 !important; }
.fs-mb-4 { margin-bottom: var(--fs-space-4) !important; }
.fs-mb-6 { margin-bottom: var(--fs-space-6) !important; }
.fs-mb-8 { margin-bottom: var(--fs-space-8) !important; }

/* Display */
.fs-flex { display: flex; }
.fs-flex-center { display: flex; align-items: center; justify-content: center; }
.fs-flex-between { display: flex; align-items: center; justify-content: space-between; }
.fs-flex-wrap { flex-wrap: wrap; }
.fs-gap-4 { gap: var(--fs-space-4); }
.fs-gap-6 { gap: var(--fs-space-6); }

/* ================================================================================
   13. ANIMATIONS
   ================================================================================ */

@keyframes fs-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fs-fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fs-fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fs-scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

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

.fs-animate-fadeIn { animation: fs-fadeIn 0.5s ease forwards; }
.fs-animate-fadeInUp { animation: fs-fadeInUp 0.5s ease forwards; }
.fs-animate-fadeInDown { animation: fs-fadeInDown 0.5s ease forwards; }
.fs-animate-scaleIn { animation: fs-scaleIn 0.3s ease forwards; }
.fs-animate-float { animation: fs-float 3s ease-in-out infinite; }

/* Staggered animations */
.fs-stagger > *:nth-child(1) { animation-delay: 0ms; }
.fs-stagger > *:nth-child(2) { animation-delay: 100ms; }
.fs-stagger > *:nth-child(3) { animation-delay: 200ms; }
.fs-stagger > *:nth-child(4) { animation-delay: 300ms; }
.fs-stagger > *:nth-child(5) { animation-delay: 400ms; }
.fs-stagger > *:nth-child(6) { animation-delay: 500ms; }

/* ================================================================================
   14. RESPONSIVE DESIGN
   ================================================================================ */

@media (max-width: 1024px) {
    .fs-section {
        padding: var(--fs-space-16) var(--fs-space-5);
    }

    .fs-hero {
        padding: var(--fs-space-16) var(--fs-space-5);
    }

    .fs-grid-faq {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .fs-section {
        padding: var(--fs-space-12) var(--fs-space-4);
    }

    .fs-hero {
        padding: var(--fs-space-12) var(--fs-space-4);
    }

    .fs-hero-stats {
        gap: var(--fs-space-6);
    }

    .fs-grid-3,
    .fs-grid-features {
        grid-template-columns: 1fr;
    }

    .fs-pricing-card {
        padding: var(--fs-space-6);
    }

    .fs-feature-card {
        padding: var(--fs-space-6);
    }
}

@media (max-width: 480px) {
    .fs-h1-hero {
        font-size: 1.75rem;
    }

    .fs-h2 {
        font-size: 1.5rem;
    }

    .fs-btn-lg {
        padding: var(--fs-space-4) var(--fs-space-6);
        font-size: var(--fs-text-base);
    }
}

/* ================================================================================
   15. LANDING PAGE - SIDEBAR HIDE
   ================================================================================ */

/* Hide cart sidebar in all landing pages - show cart info only in header */
.wh-landing ~ .cart-sidebar,
.vps-landing ~ .cart-sidebar,
.vds-landing ~ .cart-sidebar,
.dedicated-landing ~ .cart-sidebar,
#order-standard_cart:has(.wh-landing) .cart-sidebar,
#order-standard_cart:has(.vps-landing) .cart-sidebar,
#order-standard_cart:has(.vds-landing) .cart-sidebar,
#order-standard_cart:has(.dedicated-landing) .cart-sidebar,
#order-standard_cart:has(.wh-landing) > .row > .sidebar,
#order-standard_cart:has(.vps-landing) > .row > .sidebar,
#order-standard_cart:has(.vds-landing) > .row > .sidebar,
#order-standard_cart:has(.dedicated-landing) > .row > .sidebar,
body:has(.wh-landing) .cart-sidebar,
body:has(.vps-landing) .cart-sidebar,
body:has(.vds-landing) .cart-sidebar,
body:has(.dedicated-landing) .cart-sidebar {
    display: none !important;
}

#order-standard_cart:has(.wh-landing) .cart-body,
#order-standard_cart:has(.vps-landing) .cart-body,
#order-standard_cart:has(.vds-landing) .cart-body,
#order-standard_cart:has(.dedicated-landing) .cart-body,
body:has(.wh-landing) .cart-body,
body:has(.vps-landing) .cart-body,
body:has(.vds-landing) .cart-body,
body:has(.dedicated-landing) .cart-body {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#order-standard_cart:has(.wh-landing) > .row,
#order-standard_cart:has(.vps-landing) > .row,
#order-standard_cart:has(.vds-landing) > .row,
#order-standard_cart:has(.dedicated-landing) > .row {
    margin: 0 !important;
}

/* Hide page title/breadcrumb "Sepet" in landing pages */
body:has(.wh-landing) .fs-breadcrumb,
body:has(.vps-landing) .fs-breadcrumb,
body:has(.vds-landing) .fs-breadcrumb,
body:has(.dedicated-landing) .fs-breadcrumb,
body:has(.wh-landing) .breadcrumb,
body:has(.vps-landing) .breadcrumb,
body:has(.vds-landing) .breadcrumb,
body:has(.dedicated-landing) .breadcrumb,
body:has(.wh-landing) .cart-title,
body:has(.vps-landing) .cart-title,
body:has(.vds-landing) .cart-title,
body:has(.dedicated-landing) .cart-title,
body:has(.wh-landing) .page-title,
body:has(.vps-landing) .page-title,
body:has(.vds-landing) .page-title,
body:has(.dedicated-landing) .page-title,
body:has(.wh-landing) #main-body > h2:first-child,
body:has(.vps-landing) #main-body > h2:first-child,
body:has(.wh-landing) .main-content > h2:first-of-type,
body:has(.vps-landing) .main-content > h2:first-of-type,
body:has(.wh-landing) #order-standard_cart > h2,
body:has(.vps-landing) #order-standard_cart > h2,
body:has(.wh-landing) .store-header,
body:has(.vps-landing) .store-header {
    display: none !important;
}

/* ================================================================================
   16. WEB HOSTING LANDING PAGE STYLES
   ================================================================================ */

.wh-landing {
    font-family: 'Plus Jakarta Sans', sans-serif;
    margin: -40px -15px 0;
}

.wh-hero {
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 50%, #7c3aed 100%);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.wh-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.wh-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.wh-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255,255,255,0.15);
    border-radius: 50px;
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.wh-hero h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.2;
}

.wh-hero p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 24px;
}

.wh-hero-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.wh-hero-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.wh-hero-feature i {
    color: #34d399;
}

.wh-section {
    padding: 60px 20px;
}

.wh-section-gray {
    background: #f9fafb;
}

.wh-section-dark {
    background: #0f172a;
    color: #fff !important;
}

.wh-section-dark * {
    color: inherit;
}

.wh-section-title {
    text-align: center;
    margin-bottom: 40px;
}

.wh-section-title h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 12px;
}

.wh-section-dark .wh-section-title h2,
.wh-section-dark h2 {
    color: #ffffff !important;
}

.wh-section-title p {
    font-size: 1rem;
    color: #6b7280;
}

.wh-section-dark .wh-section-title p,
.wh-section-dark p {
    color: #94a3b8 !important;
}

.wh-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.wh-pricing-card {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    border: 2px solid #e5e7eb;
    transition: all 0.3s;
    position: relative;
}

.wh-pricing-card:hover {
    border-color: #2563eb;
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.wh-pricing-card.popular {
    border-color: #2563eb;
    background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
}

.wh-pricing-card.popular::before {
    content: 'EN POPULER';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff;
    padding: 4px 16px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
}

.wh-pricing-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.wh-pricing-desc {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 16px;
}

.wh-pricing-price {
    margin-bottom: 20px;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.wh-pricing-price .price-amount {
    font-size: 2.25rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

.wh-pricing-price .price-currency {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.wh-pricing-price .price-period {
    font-size: 0.9rem;
    font-weight: 500;
    color: #6b7280;
}

.wh-pricing-features {
    margin: 0 0 20px;
}

.wh-pricing-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wh-pricing-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.9rem;
    color: #374151;
}

.wh-pricing-features li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #10b981;
    font-size: 0.8rem;
}

.wh-pricing-features li:last-child {
    border-bottom: none;
}

.wh-pricing-tagline {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 16px;
}

.wh-pricing-btn {
    display: block;
    text-align: center;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    font-size: 0.95rem;
}

.wh-pricing-btn-primary {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff !important;
}

.wh-pricing-btn-primary:hover {
    box-shadow: 0 8px 20px rgba(37,99,235,0.4);
}

.wh-pricing-btn-outline {
    background: #f3f4f6;
    color: #374151 !important;
}

.wh-pricing-btn-outline:hover {
    background: #e5e7eb;
}

.wh-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.wh-feature-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 24px;
    transition: all 0.3s;
}

.wh-feature-card:hover {
    border-color: #2563eb;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Icon + Title Horizontal Layout */
.wh-feature-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.wh-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.wh-feature-icon.blue { background: rgba(37,99,235,0.1); color: #2563eb; }
.wh-feature-icon.green { background: rgba(16,185,129,0.1); color: #10b981; }
.wh-feature-icon.purple { background: rgba(124,58,237,0.1); color: #7c3aed; }
.wh-feature-icon.orange { background: rgba(245,158,11,0.1); color: #f59e0b; }
.wh-feature-icon.cyan { background: rgba(6,182,212,0.1); color: #06b6d4; }
.wh-feature-icon.red { background: rgba(239,68,68,0.1); color: #ef4444; }

.wh-feature-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.wh-feature-card p {
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

.wh-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.wh-spec-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
}

.wh-spec-card i {
    font-size: 2rem;
    margin-bottom: 12px;
    color: #60a5fa;
}

.wh-spec-card h4 {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 4px;
    color: #fff;
}

.wh-spec-card p {
    font-size: 0.85rem;
    color: #94a3b8;
    margin: 0;
}

.wh-faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.wh-faq-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 20px 24px;
}

.wh-faq-item h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.wh-faq-item h4 i {
    color: #2563eb;
    margin-top: 2px;
}

.wh-faq-item p {
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
    padding-left: 26px;
}

.wh-cta {
    padding: 60px 20px;
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    text-align: center;
    color: #fff;
}

.wh-cta h2 {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.wh-cta p {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 24px;
}

.wh-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: #fff;
    color: #2563eb !important;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

.wh-cta-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
    .wh-hero h1 { font-size: 1.75rem; }
    .wh-faq-grid { grid-template-columns: 1fr; }
}

/* ================================================================================
   17. VPS SUNUCU LANDING PAGE STYLES
   ================================================================================ */

.vps-landing {
    font-family: 'Plus Jakarta Sans', sans-serif;
    margin: -40px -15px 0;
}

.vps-hero {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 50%, #2563eb 100%);
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}

.vps-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M40 40c0-11.046-8.954-20-20-20v40c11.046 0 20-8.954 20-20zm20 0c0 11.046-8.954 20-20 20V20c11.046 0 20 8.954 20 20z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.vps-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
    max-width: 850px;
    margin: 0 auto;
    padding: 0 20px;
}

.vps-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: rgba(255,255,255,0.15);
    border-radius: 50px;
    font-size: 0.9rem;
    margin-bottom: 24px;
    backdrop-filter: blur(10px);
}

.vps-hero h1 {
    font-size: 2.75rem;
    font-weight: 800;
    margin-bottom: 18px;
    line-height: 1.2;
}

.vps-hero p {
    font-size: 1.15rem;
    opacity: 0.9;
    margin-bottom: 28px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.vps-hero-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.vps-hero-stat {
    text-align: center;
}

.vps-hero-stat-value {
    font-size: 2rem;
    font-weight: 800;
    display: block;
}

.vps-hero-stat-label {
    font-size: 0.85rem;
    opacity: 0.8;
}

.vps-section {
    padding: 70px 20px;
}

.vps-section-gray {
    background: #f9fafb;
}

.vps-section-dark {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    color: #fff !important;
}

.vps-section-dark * {
    color: inherit;
}

.vps-section-title {
    text-align: center;
    margin-bottom: 50px;
}

.vps-section-title h2 {
    font-size: 2.25rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 14px;
}

.vps-section-dark .vps-section-title h2,
.vps-section-dark h2 {
    color: #ffffff !important;
}

.vps-section-title p {
    font-size: 1.05rem;
    color: #6b7280;
    max-width: 600px;
    margin: 0 auto;
}

.vps-section-dark .vps-section-title p,
.vps-section-dark p {
    color: #94a3b8 !important;
}

.vps-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.vps-pricing-card {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    border: 2px solid #e5e7eb;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.vps-pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #7c3aed, #2563eb);
    opacity: 0;
    transition: opacity 0.3s;
}

.vps-pricing-card:hover {
    border-color: #7c3aed;
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(124,58,237,0.15);
}

.vps-pricing-card:hover::before {
    opacity: 1;
}

.vps-pricing-card.popular {
    border-color: #7c3aed;
    background: linear-gradient(180deg, #faf5ff 0%, #fff 100%);
}

.vps-pricing-card.popular::before {
    opacity: 1;
}

.vps-pricing-card.popular::after {
    content: 'TAVSIYE EDILEN';
    position: absolute;
    top: 16px;
    right: -32px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    padding: 4px 40px;
    font-size: 0.65rem;
    font-weight: 700;
    transform: rotate(45deg);
}

.vps-pricing-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.vps-pricing-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(124,58,237,0.1), rgba(79,70,229,0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7c3aed;
    font-size: 1.25rem;
}

.vps-pricing-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}

.vps-pricing-desc {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 20px;
}

.vps-pricing-price {
    margin-bottom: 24px;
}

.vps-pricing-price .amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0f172a;
}

.vps-pricing-price .period {
    font-size: 1rem;
    font-weight: 500;
    color: #6b7280;
}

.vps-pricing-specs {
    margin: 0 0 24px;
}

.vps-pricing-specs ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vps-pricing-specs li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.9rem;
    color: #374151;
}

.vps-pricing-specs li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #7c3aed;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.vps-pricing-specs li:last-child {
    border-bottom: none;
}

/* VDS specific color */
.vds-specs li::before {
    color: #059669;
}

/* Dedicated specific color */
.dedicated-specs li::before {
    color: #dc2626;
}

.vps-pricing-specs .spec-label {
    color: #374151;
}

.vps-pricing-specs .spec-value {
    font-weight: 700;
    color: #0f172a;
}

.vps-pricing-btn {
    display: block;
    text-align: center;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    font-size: 1rem;
}

.vps-pricing-btn-primary {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff !important;
}

.vps-pricing-btn-primary:hover {
    box-shadow: 0 10px 25px rgba(124,58,237,0.4);
    transform: translateY(-2px);
}

.vps-pricing-btn-outline {
    background: #f3f4f6;
    color: #374151 !important;
}

.vps-pricing-btn-outline:hover {
    background: #e5e7eb;
}

.vps-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
}

.vps-feature-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 28px;
    transition: all 0.3s;
}

.vps-feature-card:hover {
    border-color: #7c3aed;
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
    transform: translateY(-4px);
}

/* Icon + Title Horizontal Layout */
.vps-feature-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.vps-feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.vps-feature-icon.purple { background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(124,58,237,0.05)); color: #7c3aed; }
.vps-feature-icon.blue { background: linear-gradient(135deg, rgba(37,99,235,0.15), rgba(37,99,235,0.05)); color: #2563eb; }
.vps-feature-icon.green { background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(16,185,129,0.05)); color: #10b981; }
.vps-feature-icon.orange { background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.05)); color: #f59e0b; }
.vps-feature-icon.cyan { background: linear-gradient(135deg, rgba(6,182,212,0.15), rgba(6,182,212,0.05)); color: #06b6d4; }
.vps-feature-icon.red { background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(239,68,68,0.05)); color: #ef4444; }

.vps-feature-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.vps-feature-card p {
    font-size: 0.95rem;
    color: #6b7280;
    line-height: 1.7;
    margin: 0;
}

.vps-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

.vps-spec-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 28px;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: all 0.3s;
}

.vps-spec-card:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-4px);
}

.vps-spec-card i {
    font-size: 2.25rem;
    margin-bottom: 14px;
    background: linear-gradient(135deg, #a78bfa, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.vps-spec-card h4 {
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 6px;
    color: #fff !important;
}

.vps-spec-card p {
    font-size: 0.9rem;
    color: #94a3b8 !important;
    margin: 0;
}

.vps-faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.vps-faq-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px 28px;
    transition: all 0.3s;
}

.vps-faq-item:hover {
    border-color: #7c3aed;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.vps-faq-item h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.vps-faq-item h4 i {
    color: #7c3aed;
    margin-top: 3px;
    font-size: 0.9rem;
}

.vps-faq-item p {
    font-size: 0.95rem;
    color: #6b7280;
    line-height: 1.7;
    margin: 0;
    padding-left: 28px;
}

.vps-cta {
    padding: 80px 20px;
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 50%, #2563eb 100%);
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.vps-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.vps-cta-content {
    position: relative;
    z-index: 1;
}

.vps-cta h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 14px;
}

.vps-cta p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 28px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.vps-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    background: #fff;
    color: #7c3aed !important;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: all 0.2s;
}

.vps-cta-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}

@media (max-width: 768px) {
    .vps-hero h1 { font-size: 1.85rem; }
    .vps-hero-stats { gap: 24px; }
    .vps-faq-grid { grid-template-columns: 1fr; }
}