/**
 * PERAKON - Ultra Premium Dark Glassmorphism Design System
 * v2.0 — Stunning, rich, immersive
 */

/* ========================================
   CSS VARIABLES — Premium Palette
   ======================================== */
:root {
    /* Deep Background Layers */
    --bg-primary: #030014;
    --bg-secondary: #0a0a1a;
    --bg-elevated: #0f0f23;

    /* Glassmorphism Surfaces */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-bg-hover: rgba(255, 255, 255, 0.06);
    --glass-bg-strong: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-border-hover: rgba(255, 255, 255, 0.12);
    --glass-blur: blur(24px);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

    /* Accent Gradient Spectrum */
    --accent-1: #6366f1;
    --accent-2: #8b5cf6;
    --accent-3: #a855f7;
    --accent-4: #c084fc;
    --accent-emerald: #10b981;
    --accent-rose: #f43f5e;
    --accent-amber: #f59e0b;
    --accent-cyan: #06b6d4;
    --gradient-main: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    --gradient-warm: linear-gradient(135deg, #f43f5e, #fb923c, #f59e0b);
    --gradient-ocean: linear-gradient(135deg, #06b6d4, #3b82f6, #6366f1);
    --gradient-glow: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.1), rgba(168, 85, 247, 0.05));

    /* Typography */
    --text-white: #ffffff;
    --text-primary: #f0f0f5;
    --text-secondary: #a0a0b8;
    --text-muted: rgba(255, 255, 255, 0.35);
    --text-dim: rgba(255, 255, 255, 0.2);
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* Transition */
    --transition-fast: all 0.15s ease;
    --transition-base: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========================================
   RESET & BASE
   ======================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-main);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.7;
    overflow-x: hidden;
    position: relative;
}

/* Noise texture overlay for depth */
body::before {
    content: '';
    position: fixed;
    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='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

a {
    color: var(--accent-4);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--text-white);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-1), var(--accent-3));
    border-radius: 10px;
}

/* Selection */
::selection {
    background: rgba(99, 102, 241, 0.3);
    color: #fff;
}

/* ========================================
   LAYOUT
   ======================================== */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

.section {
    padding: var(--space-4xl) 0;
    position: relative;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-white);
    letter-spacing: -0.02em;
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    33% {
        transform: translateY(-12px) rotate(1deg);
    }

    66% {
        transform: translateY(-6px) rotate(-1deg);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

@keyframes orbit {
    0% {
        transform: rotate(0deg) translateX(150px) rotate(0deg);
    }

    100% {
        transform: rotate(360deg) translateX(150px) rotate(-360deg);
    }
}

@keyframes border-dance {

    0%,
    100% {
        border-color: rgba(99, 102, 241, 0.2);
    }

    25% {
        border-color: rgba(139, 92, 246, 0.3);
    }

    50% {
        border-color: rgba(168, 85, 247, 0.2);
    }

    75% {
        border-color: rgba(99, 102, 241, 0.3);
    }
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   TOP BAR
   ======================================== */
.top-bar {
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 8px 0;
    font-size: 0.8rem;
    position: relative;
    z-index: 1001;
}

.top-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top-bar-left,
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.top-bar a {
    color: var(--text-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-base);
    font-weight: 500;
}

.top-bar a:hover {
    color: var(--text-white);
}

.top-bar a i {
    font-size: 0.72rem;
    opacity: 0.6;
}

/* ========================================
   MAIN HEADER — WHMVM Style
   ======================================== */
.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(6, 4, 18, 0.85);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0;
    transition: var(--transition-smooth);
}

.main-header.scrolled {
    background: rgba(6, 4, 18, 0.95);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.main-header>.container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    position: static;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-icon {
    width: 42px;
    height: 42px;
    background: var(--gradient-main);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
    transition: var(--transition-base);
}

.logo:hover .logo-icon {
    transform: rotate(-8deg) scale(1.05);
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.45);
}

.logo-text {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-white);
    letter-spacing: -0.02em;
}

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

/* SVG Logo Image */
.logo-img {
    height: 38px;
    width: auto;
    transition: var(--transition-base);
}

.logo:hover .logo-img {
    transform: scale(1.03);
    filter: drop-shadow(0 2px 12px rgba(6, 182, 212, 0.3));
}

/* Navigation */
.main-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.mobile-nav-header {
    display: none;
}

.mobile-nav-footer {
    display: none;
}

.nav-menu .mobile-only {
    display: none;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu>li>a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: var(--transition-base);
    white-space: nowrap;
    position: relative;
}

.nav-menu>li>a i:first-child {
    font-size: 0.82rem;
    opacity: 0.6;
}

.nav-menu>li>a:hover,
.nav-menu>li.active>a {
    color: var(--text-white);
    background: rgba(255, 255, 255, 0.05);
}

.nav-menu>li.active>a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--gradient-main);
    border-radius: 2px;
}

/* Dropdown Arrow */
.dropdown-arrow {
    font-size: 0.6rem;
    opacity: 0.5;
    transition: var(--transition-base);
    margin-left: 2px;
}

.has-dropdown.open .dropdown-arrow,
.has-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
    opacity: 0.8;
}

/* Mega Menu — WHMVM Full-Width Style */
.has-dropdown {
    position: static;
}

.nav-menu {
    position: static;
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 30px 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.2s ease;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    margin-top: 0;
}

.mega-menu::before {
    display: none;
}

.has-dropdown.open .mega-menu,
.has-dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Mega Menu Inner Grid — 3 Columns, Full Width */
.mega-menu-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    max-width: 100%;
    margin: 0;
    padding: 0 20px;
}

/* Mega Section Columns */
.mega-section {
    padding: 0 30px;
    border-right: 1px solid #e2e8f0;
}

.mega-section:last-child {
    border-right: none;
}

.mega-section h4 {
    font-size: 15px;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 20px;
    text-transform: none;
    letter-spacing: 0;
}

.mega-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mega-section ul li a {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #f8fafc;
    text-decoration: none;
    transition: all 0.3s ease;
}

.mega-section ul li a:hover {
    background: #ffffff;
    border-color: var(--accent-1, #6366f1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transform: translateY(-3px);
}

/* Large Icon Box */
.menu-icon {
    width: 60px;
    height: 60px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.menu-icon i {
    color: var(--accent-1, #6366f1);
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: unset;
}

.mega-section ul li a:hover .menu-icon {
    background: var(--accent-1, #6366f1);
    border-color: var(--accent-1, #6366f1);
    transform: none;
}

.mega-section ul li a:hover .menu-icon i {
    color: #ffffff;
}

/* Menu Info Text */
.menu-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 2px;
}

.menu-info strong {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
    transition: all 0.3s ease;
}

.mega-section ul li a:hover .menu-info strong {
    color: var(--accent-1, #6366f1);
}

.menu-info span {
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-header-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--gradient-main);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-base);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}

.btn-header-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.5);
    color: #fff;
}

.btn-header-cta i {
    font-size: 0.78rem;
}

.hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    color: var(--text-white);
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition-base);
}

.hamburger:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Close Nav Button (Mobile) */
.close-nav {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    color: var(--text-white);
    font-size: 1rem;
    cursor: pointer;
}

/* Mobile Overlay */
.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s;
}

.mobile-overlay.active {
    display: block;
    opacity: 1;
}




/* ========================================
   HERO — Immersive, Cinematic
   ======================================== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 80px;
}

.hero-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.6;
}

.hero-orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.25), transparent 70%);
    top: -10%;
    right: -5%;
    animation: pulse-glow 8s ease-in-out infinite;
}

.hero-orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.2), transparent 70%);
    bottom: -10%;
    left: -10%;
    animation: pulse-glow 10s ease-in-out infinite 2s;
}

.hero-orb-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.15), transparent 70%);
    top: 40%;
    left: 30%;
    animation: pulse-glow 12s ease-in-out infinite 4s;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 70%);
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--radius-full);
    padding: 8px 20px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent-4);
    margin-bottom: var(--space-xl);
    animation: fadeInUp 0.8s ease forwards;
    letter-spacing: 0.02em;
}

.hero-badge i {
    color: var(--accent-amber);
}

.hero-title {
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--text-white);
    margin-bottom: var(--space-xl);
    animation: fadeInUp 0.8s ease forwards 0.1s;
    opacity: 0;
}

.hero-title-gradient {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

.hero-description {
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-2xl);
    max-width: 540px;
    animation: fadeInUp 0.8s ease forwards 0.2s;
    opacity: 0;
}

.hero-buttons {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-3xl);
    animation: fadeInUp 0.8s ease forwards 0.3s;
    opacity: 0;
}

/* Buttons — Premium */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-main);
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: var(--transition-base);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.btn-lg {
    padding: 16px 36px;
    font-size: 1rem;
}

.btn-primary {
    background: var(--gradient-main);
    color: #fff;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent);
    opacity: 0;
    transition: var(--transition-base);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(99, 102, 241, 0.5), 0 0 60px rgba(99, 102, 241, 0.15);
    color: #fff;
}

.btn-primary:hover::before {
    opacity: 1;
}

.btn-outline {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 16px 36px;
    font-size: 1rem;
}

.btn-outline:hover {
    border-color: var(--accent-1);
    color: var(--text-white);
    background: rgba(99, 102, 241, 0.06);
    transform: translateY(-3px);
}

/* Hero Stats */
.hero-stats {
    display: flex;
    gap: var(--space-2xl);
    animation: fadeInUp 0.8s ease forwards 0.4s;
    opacity: 0;
}

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

.hero-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-white);
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-stat-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 500;
}

/* Hero Visual (Right Side) */
.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    animation: fadeIn 1.2s ease forwards 0.5s;
    opacity: 0;
}

.hero-card-stack {
    position: relative;
    width: 420px;
    height: 420px;
}

.hero-float-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-2xl);
    padding: 32px;
    backdrop-filter: blur(30px);
    box-shadow: var(--glass-shadow);
    animation: float 6s ease-in-out infinite;
}

.hero-mini-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.hero-mini-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    transition: var(--transition-base);
}

.hero-mini-card:hover {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.2);
    transform: translateY(-4px);
}

.hero-mini-card i {
    font-size: 1.4rem;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-mini-card span {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Floating Badges */
.hero-floating-badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(10, 10, 26, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(20px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    animation: float 7s ease-in-out infinite 1s;
}

.badge-top {
    top: 20px;
    right: -20px;
}

.badge-bottom {
    bottom: 30px;
    left: -30px;
    animation-delay: 2s;
}

.floating-badge-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.floating-badge-icon.emerald {
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
}

.floating-badge-icon.purple {
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
}

.floating-badge-text {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-white);
}

.floating-badge-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ========================================
   SECTION HEADERS — Elegant
   ======================================== */
.section-header {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-full);
    padding: 8px 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-4);
    margin-bottom: var(--space-lg);
    letter-spacing: 0.03em;
}

.section-badge i {
    font-size: 0.75rem;
}

.section-title {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-white);
    margin-bottom: var(--space-md);
}

.section-subtitle {
    font-size: 1.05rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ========================================
   SERVICES GRID — Glassmorphic Cards
   ======================================== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.service-card {
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: 36px 28px;
    text-decoration: none;
    color: inherit;
    transition: var(--transition-smooth);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-main);
    opacity: 0;
    transition: var(--transition-base);
}

.service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.06), transparent 60%);
    opacity: 0;
    transition: var(--transition-base);
}

.service-card:hover {
    border-color: rgba(99, 102, 241, 0.2);
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 60px rgba(99, 102, 241, 0.08);
    color: inherit;
}

.service-card:hover::before {
    opacity: 1;
}

.service-card:hover::after {
    opacity: 1;
}

.service-icon {
    width: 56px;
    height: 56px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: var(--space-xl);
    position: relative;
    z-index: 1;
    transition: var(--transition-base);
}

.service-icon i {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.service-card:hover .service-icon {
    background: rgba(99, 102, 241, 0.15);
    transform: scale(1.08);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.2);
}

.service-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
    position: relative;
    z-index: 1;
}

.service-card-desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
    flex: 1;
    position: relative;
    z-index: 1;
}

.service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-4);
    margin-top: var(--space-xl);
    position: relative;
    z-index: 1;
    transition: var(--transition-base);
}

.service-card:hover .service-card-link {
    color: var(--text-white);
    gap: 12px;
}

/* ========================================
   EKİBİMİZ — 🔥 BOUNDARY-BREAKING
   Prefix: ekp-
   Palette: Cyan (#06b6d4) + Violet (#8b5cf6) + Dark (#0a0a0f)
   ======================================== */

/* ── Hero ── */
.ekp-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0a0f;
    overflow: hidden;
    text-align: center;
}

.ekp-hero__grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(6, 182, 212, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: ekp-gridDrift 30s linear infinite;
}

@keyframes ekp-gridDrift {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(40px, 40px);
    }
}

.ekp-hero__scanline {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #06b6d4, #8b5cf6, #06b6d4, transparent);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
    animation: ekp-scan 5s ease-in-out infinite;
    z-index: 1;
}

@keyframes ekp-scan {
    0% {
        top: 8%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        top: 92%;
    }

    60% {
        opacity: 1;
    }

    100% {
        top: 8%;
        opacity: 0;
    }
}

.ekp-hero__floats {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ekp-hero__float {
    position: absolute;
    font-size: 1.8rem;
    color: rgba(6, 182, 212, 0.15);
    animation: ekp-float 12s ease-in-out infinite;
}

.ekp-hero__float:nth-child(2n) {
    color: rgba(139, 92, 246, 0.12);
    animation-delay: -3s;
}

.ekp-hero__float:nth-child(3n) {
    color: rgba(6, 182, 212, 0.1);
    animation-delay: -5s;
}

.ekp-hero__float:nth-child(4n) {
    animation-delay: -7s;
}

@keyframes ekp-float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    33% {
        transform: translateY(-20px) rotate(5deg);
    }

    66% {
        transform: translateY(-8px) rotate(-3deg);
    }
}

.ekp-hero__content {
    position: relative;
    z-index: 2;
}

.ekp-hero__title {
    font-size: clamp(3.5rem, 10vw, 8rem);
    font-weight: 900;
    line-height: 0.9;
    margin: 20px 0 16px;
    letter-spacing: -3px;
}

.ekp-hero__glitch {
    position: relative;
    display: inline-block;
    color: #fff;
}

.ekp-hero__glitch::before,
.ekp-hero__glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ekp-hero__glitch::before {
    color: #06b6d4;
    z-index: -1;
    animation: ekp-glitch1 3s infinite linear alternate;
}

.ekp-hero__glitch::after {
    color: #8b5cf6;
    z-index: -1;
    animation: ekp-glitch2 3s infinite linear alternate;
}

@keyframes ekp-glitch1 {
    0% {
        clip-path: inset(20% 0 60% 0);
        transform: translate(-3px, 2px);
    }

    20% {
        clip-path: inset(50% 0 10% 0);
        transform: translate(3px, -1px);
    }

    40% {
        clip-path: inset(30% 0 30% 0);
        transform: translate(-2px, 1px);
    }

    60% {
        clip-path: inset(70% 0 5% 0);
        transform: translate(2px, -2px);
    }

    80% {
        clip-path: inset(10% 0 70% 0);
        transform: translate(-1px, 3px);
    }

    100% {
        clip-path: inset(40% 0 20% 0);
        transform: translate(3px, -1px);
    }
}

@keyframes ekp-glitch2 {
    0% {
        clip-path: inset(60% 0 10% 0);
        transform: translate(3px, -2px);
    }

    20% {
        clip-path: inset(10% 0 50% 0);
        transform: translate(-3px, 1px);
    }

    40% {
        clip-path: inset(40% 0 20% 0);
        transform: translate(2px, -1px);
    }

    60% {
        clip-path: inset(5% 0 70% 0);
        transform: translate(-2px, 2px);
    }

    80% {
        clip-path: inset(70% 0 10% 0);
        transform: translate(1px, -3px);
    }

    100% {
        clip-path: inset(20% 0 40% 0);
        transform: translate(-3px, 1px);
    }
}

.ekp-hero__outline {
    -webkit-text-stroke: 2px #06b6d4;
    color: transparent;
    display: block;
    font-size: 80%;
}

.ekp-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.ekp-hero__badge-dot {
    width: 8px;
    height: 8px;
    background: #06b6d4;
    border-radius: 50%;
    animation: ekp-dotPulse 1.5s ease-in-out infinite;
}

@keyframes ekp-dotPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.5);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(6, 182, 212, 0);
    }
}

.ekp-hero__desc {
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    color: rgba(255, 255, 255, 0.45);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

.ekp-hero__scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.ekp-hero__scroll-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, #06b6d4, transparent);
    border-radius: 2px;
    animation: ekp-scrollPulse 2s ease-in-out infinite;
}

@keyframes ekp-scrollPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scaleY(1);
    }

    50% {
        opacity: 1;
        transform: scaleY(1.2);
    }
}

/* ── Marquee ── */
.ekp-marquee-wrap {
    background: #0a0a0f;
    border-top: 1px solid rgba(6, 182, 212, 0.1);
    border-bottom: 1px solid rgba(6, 182, 212, 0.1);
}

.ekp-marquee {
    padding: 14px 0;
    overflow: hidden;
}

.ekp-marquee__track {
    display: flex;
    gap: 28px;
    white-space: nowrap;
    animation: ekp-marqueeScroll 22s linear infinite;
}

.ekp-marquee__track span {
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(6, 182, 212, 0.25);
}

@keyframes ekp-marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ── Team Grid ── */
.ekp-team__header {
    text-align: center;
    margin-bottom: 48px;
}

.ekp-team__title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    color: var(--text-white);
    line-height: 1.1;
}

.ekp-team__title span {
    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ekp-team__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 28px;
}

.ekp-team__card {
    background: rgba(6, 182, 212, 0.03);
    border: 1px solid rgba(6, 182, 212, 0.06);
    border-radius: 20px;
    padding: 36px 24px 28px;
    text-align: center;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.ekp-team__card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, transparent, rgba(6, 182, 212, 0.2), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.35s;
}

.ekp-team__card:hover::before {
    opacity: 1;
}

.ekp-team__card:hover {
    transform: translateY(-6px);
    background: rgba(6, 182, 212, 0.05);
    box-shadow: 0 12px 40px rgba(6, 182, 212, 0.08);
}

/* Photo wrapper */
.ekp-team__photo-wrap {
    position: relative;
    width: 110px;
    height: 110px;
    margin: 0 auto 20px;
}

.ekp-team__photo {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(6, 182, 212, 0.2);
    position: relative;
    z-index: 2;
    transition: all 0.35s ease;
}

.ekp-team__card:hover .ekp-team__photo {
    border-color: rgba(6, 182, 212, 0.5);
    box-shadow: 0 0 24px rgba(6, 182, 212, 0.15);
}

.ekp-team__avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(139, 92, 246, 0.15));
    border: 3px solid rgba(6, 182, 212, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: #06b6d4;
    position: relative;
    z-index: 2;
    transition: all 0.35s ease;
}

.ekp-team__card:hover .ekp-team__avatar {
    border-color: rgba(6, 182, 212, 0.4);
    box-shadow: 0 0 24px rgba(6, 182, 212, 0.12);
}

.ekp-team__photo-glow {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.08), transparent 70%);
    z-index: 1;
    transition: all 0.3s;
}

.ekp-team__card:hover .ekp-team__photo-glow {
    background: radial-gradient(circle, rgba(6, 182, 212, 0.15), transparent 70%);
    inset: -16px;
}

.ekp-team__name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 4px;
}

.ekp-team__role {
    font-size: 0.82rem;
    color: #06b6d4;
    font-weight: 600;
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ekp-team__bio {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 12px;
}

.ekp-team__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(6, 182, 212, 0.08);
    color: #06b6d4;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s;
}

.ekp-team__social:hover {
    background: rgba(6, 182, 212, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15);
}

/* ── Stats ── */
.ekp-stats {
    position: relative;
    padding: 80px 0;
    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
    overflow: hidden;
}

.ekp-stats__skew {
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
    transform: skewY(-2deg);
}

.ekp-stats__skew--bottom {
    top: auto;
    bottom: -40px;
    transform: skewY(2deg);
}

.ekp-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    position: relative;
    z-index: 2;
}

.ekp-stats__item {
    text-align: center;
}

.ekp-stats__num {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: #fff;
}

.ekp-stats__num span {
    opacity: 0.6;
}

.ekp-stats__label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 4px;
    font-weight: 600;
}

/* ── CTA ── */
.ekp-cta {
    position: relative;
    padding: 100px 0;
    background: #0a0a0f;
    overflow: hidden;
}

.ekp-cta__glow {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
}

.ekp-cta__glow--1 {
    top: -100px;
    left: -100px;
    background: rgba(6, 182, 212, 0.12);
    animation: ekp-glowFloat 8s ease-in-out infinite;
}

.ekp-cta__glow--2 {
    bottom: -100px;
    right: -100px;
    background: rgba(139, 92, 246, 0.1);
    animation: ekp-glowFloat 8s ease-in-out infinite reverse;
}

@keyframes ekp-glowFloat {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(40px, -30px);
    }
}

.ekp-cta__inner {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.ekp-cta__title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    color: var(--text-white);
    margin: 0 0 16px;
    line-height: 1.1;
}

.ekp-cta__title span {
    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ekp-cta__inner p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 32px;
}

.ekp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 60px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ekp-btn--neon {
    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
    color: #fff;
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.3), 0 0 40px rgba(139, 92, 246, 0.15);
}

.ekp-btn--neon:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(6, 182, 212, 0.5), 0 0 60px rgba(139, 92, 246, 0.25);
}

.ekp-btn--lg {
    padding: 18px 40px;
    font-size: 1.05rem;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .ekp-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ekp-hero {
        min-height: auto;
        padding: 140px 0 80px;
    }

    .ekp-hero__floats {
        display: none;
    }

    .ekp-hero__scanline {
        display: none;
    }

    .ekp-team__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .ekp-team__card {
        padding: 24px 16px 20px;
    }

    .ekp-team__photo-wrap {
        width: 80px;
        height: 80px;
    }

    .ekp-team__photo,
    .ekp-team__avatar {
        width: 80px;
        height: 80px;
    }

    .ekp-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ekp-cta__inner {
        padding: 40px 24px;
    }
}

@media (max-width: 480px) {
    .ekp-team__grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   CTA SECTION — Cinematic
   ======================================== */
.cta-section {
    padding: var(--space-3xl) 0 var(--space-4xl);
}

.cta-card {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-2xl);
    padding: var(--space-4xl) var(--space-3xl);
    text-align: center;
    overflow: hidden;
}

.cta-ambient {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.cta-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
}

.cta-orb:first-child {
    width: 400px;
    height: 400px;
    background: rgba(99, 102, 241, 0.12);
    top: -100px;
    right: -50px;
}

.cta-orb:last-child {
    width: 300px;
    height: 300px;
    background: rgba(168, 85, 247, 0.08);
    bottom: -50px;
    left: -50px;
}

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

.cta-title {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    margin-bottom: var(--space-lg);
    letter-spacing: -0.02em;
}

.cta-desc {
    font-size: 1.05rem;
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto var(--space-xl);
    line-height: 1.7;
}

/* ========================================
   STATS GRID — About Page
   ======================================== */
.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

.about-text h3 {
    font-size: 1.8rem;
    margin-bottom: var(--space-xl);
}

.about-text p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-lg);
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.stat-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: 32px 24px;
    text-align: center;
    transition: var(--transition-smooth);
}

.stat-card:hover {
    border-color: rgba(99, 102, 241, 0.2);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.stat-value {
    font-size: 2.4rem;
    font-weight: 900;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ========================================
   PAGE HERO — Inner pages
   ======================================== */
.page-hero {
    padding: 160px 0 80px;
    position: relative;
    overflow: hidden;
}

.page-hero-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.page-hero-content {
    position: relative;
    z-index: 1;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    margin-bottom: var(--space-lg);
}

.breadcrumb a {
    color: var(--text-muted);
}

.breadcrumb a:hover {
    color: var(--accent-4);
}

.breadcrumb i {
    font-size: 0.6rem;
    color: var(--text-dim);
}

.breadcrumb span {
    color: var(--text-secondary);
}

.page-title {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-md);
}

.page-title-gradient {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-desc {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 600px;
    line-height: 1.7;
}

/* ========================================
   SERVICE DETAIL — V2 FULL LANDING
   ======================================== */

/* ─── HERO ─────────────────────────────── */
.sdhero {
    position: relative;
    padding: 80px 0 60px;
    overflow: hidden;
}

.sdhero__ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sdhero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
}

.sdhero__orb--1 {
    width: 600px;
    height: 600px;
    background: rgba(99, 102, 241, 0.18);
    top: -250px;
    left: -200px;
}

.sdhero__orb--2 {
    width: 500px;
    height: 500px;
    background: rgba(139, 92, 246, 0.12);
    bottom: -200px;
    right: -150px;
}

.sdhero__mesh {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 48px 48px;
}

.sdhero__inner {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Hero Left */
.sdhero__left {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sdhero__left .breadcrumb {
    margin-bottom: 28px;
}

.sdhero__title {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.65) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sdhero__desc {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 32px;
    max-width: 520px;
}

.sdhero__actions {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

/* Phone CTA */
.sdhero__phone {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--text-white);
    transition: var(--transition-base);
}

.sdhero__phone:hover {
    color: var(--accent-4);
}

.sdhero__phone-ring {
    width: 48px;
    height: 48px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--accent-4);
    transition: all 0.3s ease;
}

.sdhero__phone:hover .sdhero__phone-ring {
    background: var(--accent-1);
    border-color: var(--accent-1);
    color: #fff;
    transform: scale(1.08);
}

.sdhero__phone-text {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
}

.sdhero__phone-text small {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Trust Bar */
.sdhero__trust {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sdhero__trust-avatars {
    display: flex;
}

.sdhero__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: #fff;
    border: 2px solid var(--bg-primary);
    margin-right: -10px;
}

.sdhero__avatar--count {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.sdhero__trust-text {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.sdhero__trust-text strong {
    color: var(--text-white);
}

/* Hero Right — Stats Card */
.sdhero__card {
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 48px 36px;
    text-align: center;
    overflow: hidden;
}

.sdhero__card-glow {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    background: var(--gradient-main);
    border-radius: 50%;
    opacity: 0.15;
    filter: blur(50px);
    animation: sdhero-pulse 4s ease-in-out infinite;
}

@keyframes sdhero-pulse {

    0%,
    100% {
        opacity: 0.15;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 0.25;
        transform: translateX(-50%) scale(1.15);
    }
}

.sdhero__card-icon {
    width: 100px;
    height: 100px;
    background: var(--gradient-main);
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    color: #fff;
    margin: 0 auto 32px;
    position: relative;
    box-shadow: 0 16px 48px rgba(99, 102, 241, 0.35);
}

.sdhero__card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    position: relative;
}

.sdhero__card-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sdhero__card-stat-num {
    font-size: 1.6rem;
    font-weight: 800;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sdhero__card-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ─── ABOUT ────────────────────────────── */
.sdabout__inner {
    max-width: 860px;
    margin: 0 auto;
}

.sdabout__label,
.sdfeats__label,
.sdwhy__label,
.sdothers__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: rgba(99, 102, 241, 0.07);
    border: 1px solid rgba(99, 102, 241, 0.14);
    border-radius: var(--radius-full);
    font-size: 0.73rem;
    font-weight: 600;
    color: var(--accent-4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
}

.sdabout__label i,
.sdfeats__label i,
.sdwhy__label i,
.sdothers__label i {
    font-size: 0.68rem;
}

.sdabout__title,
.sdfeats__title,
.sdwhy__title,
.sdothers__title {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.sdabout__text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.9;
    padding: 32px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    border-left: 4px solid var(--accent-1);
    margin-top: 24px;
}

/* ─── FEATURES BENTO ───────────────────── */
.sdfeats__header {
    text-align: center;
    margin-bottom: 40px;
}

.sdfeats__subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-top: 8px;
}

.sdfeats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.sdfeats__card {
    padding: 28px 24px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.sdfeats__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--fi-color, var(--accent-1));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sdfeats__card:hover {
    border-color: var(--fi-color, var(--accent-1));
    transform: translateY(-6px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
}

.sdfeats__card:hover::before {
    opacity: 1;
}

.sdfeats__card-icon {
    width: 52px;
    height: 52px;
    background: var(--fi-bg, rgba(99, 102, 241, 0.1));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    transition: all 0.3s ease;
}

.sdfeats__card-icon i {
    font-size: 1.2rem;
    color: var(--fi-color, var(--accent-1));
    transition: color 0.3s;
}

.sdfeats__card:hover .sdfeats__card-icon {
    background: var(--fi-color, var(--accent-1));
    transform: scale(1.08);
}

.sdfeats__card:hover .sdfeats__card-icon i {
    color: #fff;
}

.sdfeats__card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    transition: color 0.3s;
}

.sdfeats__card:hover .sdfeats__card-title {
    color: var(--text-white);
}

.sdfeats__card-line {
    width: 0;
    height: 2px;
    background: var(--fi-color, var(--accent-1));
    border-radius: 2px;
    margin-top: 16px;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.sdfeats__card:hover .sdfeats__card-line {
    width: 48px;
}

/* ─── WHY CHOOSE US ────────────────────── */
.sdwhy__header {
    text-align: center;
    margin-bottom: 40px;
}

.sdwhy__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.sdwhy__card {
    padding: 32px 24px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    text-align: center;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.sdwhy__card:hover {
    transform: translateY(-6px);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.sdwhy__card-num {
    font-size: 2.4rem;
    font-weight: 900;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin-bottom: 16px;
}

.sdwhy__card h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-white);
}

.sdwhy__card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ─── OTHER SERVICES ───────────────────── */
.sdothers__header {
    text-align: center;
    margin-bottom: 40px;
}

.sdothers__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.sdothers__card {
    padding: 32px 28px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    text-decoration: none;
    color: inherit;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sdothers__card:hover {
    transform: translateY(-8px);
    border-color: rgba(99, 102, 241, 0.25);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}

.sdothers__card-icon {
    width: 56px;
    height: 56px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--accent-4);
    margin-bottom: 4px;
    transition: all 0.3s ease;
}

.sdothers__card:hover .sdothers__card-icon {
    background: var(--gradient-main);
    color: #fff;
    transform: scale(1.06);
}

.sdothers__card h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0;
}

.sdothers__card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.sdothers__card-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent-4);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    transition: gap 0.3s ease;
}

.sdothers__card:hover .sdothers__card-link {
    gap: 12px;
}

/* ─── FULL CTA ─────────────────────────── */
.sdcta {
    position: relative;
    padding: 80px 0;
    background: var(--gradient-main);
    overflow: hidden;
}

.sdcta__glow {
    position: absolute;
    top: -40%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    filter: blur(60px);
}

.sdcta__inner {
    text-align: center;
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
}

.sdcta__title {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
}

.sdcta__desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.7;
    margin-bottom: 32px;
}

.sdcta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.sdcta__actions .btn-primary {
    background: #fff;
    color: var(--accent-1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.sdcta__actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

.sdcta__phone-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: var(--transition-base);
}

.sdcta__phone-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

/* ─── SD RESPONSIVE ────────────────────── */
@media (max-width: 1024px) {
    .sdhero__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sdhero__right {
        max-width: 420px;
        margin: 0 auto;
        width: 100%;
    }

    .sdwhy__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sdothers__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sdhero {
        padding: 50px 0 40px;
    }

    .sdhero__actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .sdhero__card {
        padding: 32px 20px;
    }

    .sdhero__card-icon {
        width: 80px;
        height: 80px;
        font-size: 2rem;
        border-radius: 22px;
    }

    .sdfeats__grid {
        grid-template-columns: 1fr;
    }

    .sdwhy__grid {
        grid-template-columns: 1fr;
    }

    .sdothers__grid {
        grid-template-columns: 1fr;
    }

    .sdcta {
        padding: 50px 0;
    }

    .sdcta__title {
        font-size: 1.5rem;
    }

    .sdcta__actions {
        flex-direction: column;
    }
}



/* ========================================
   PERAKENDE MAĞAZACILIK — 🔥 BOUNDARY-BREAKING
   Prefix: prk-
   Palette: Neon Orange (#f97316) + Hot Magenta (#d946ef) + Lime (#84cc16) + Dark (#0a0a0f)
   ======================================== */

/* ── Hero — Barcode Scanner ── */
.prk-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0a0f;
    overflow: hidden;
    text-align: center;
}

.prk-hero__barcode-bg {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg,
            transparent 0px,
            transparent 3px,
            rgba(249, 115, 22, 0.03) 3px,
            rgba(249, 115, 22, 0.03) 5px,
            transparent 5px,
            transparent 12px,
            rgba(249, 115, 22, 0.02) 12px,
            rgba(249, 115, 22, 0.02) 14px,
            transparent 14px,
            transparent 22px,
            rgba(249, 115, 22, 0.04) 22px,
            rgba(249, 115, 22, 0.04) 23px,
            transparent 23px,
            transparent 30px);
    animation: prk-barcodeDrift 20s linear infinite;
}

@keyframes prk-barcodeDrift {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-60px);
    }
}

.prk-hero__scanline {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f97316, #84cc16, #f97316, transparent);
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.5), 0 0 60px rgba(249, 115, 22, 0.2);
    animation: prk-scan 4s ease-in-out infinite;
    z-index: 1;
}

@keyframes prk-scan {
    0% {
        top: 10%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        top: 90%;
    }

    60% {
        opacity: 1;
    }

    100% {
        top: 10%;
        opacity: 0;
    }
}

/* Floating icons */
.prk-hero__floats {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.prk-hero__float {
    position: absolute;
    font-size: 2rem;
    color: rgba(249, 115, 22, 0.2);
    animation: prk-iconFloat 10s ease-in-out infinite;
}

.prk-hero__float:nth-child(2n) {
    color: rgba(217, 70, 239, 0.18);
    animation-delay: -2s;
}

.prk-hero__float:nth-child(3n) {
    color: rgba(132, 204, 22, 0.15);
    animation-delay: -4s;
}

.prk-hero__float:nth-child(4n) {
    animation-delay: -6s;
}

.prk-hero__float:nth-child(5n) {
    animation-delay: -3s;
}

@keyframes prk-iconFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }

    25% {
        transform: translateY(-18px) rotate(5deg) scale(1.1);
    }

    50% {
        transform: translateY(-30px) rotate(-4deg) scale(0.95);
    }

    75% {
        transform: translateY(-10px) rotate(8deg) scale(1.05);
    }
}

/* Price tags */
.prk-hero__tags {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.prk-hero__tag {
    position: absolute;
    background: rgba(249, 115, 22, 0.15);
    border: 1px solid rgba(249, 115, 22, 0.3);
    color: #f97316;
    font-size: 0.75rem;
    font-weight: 900;
    padding: 4px 12px;
    border-radius: 6px;
    animation: prk-tagPop 5s ease-in-out infinite;
}

.prk-hero__tag:nth-child(2) {
    animation-delay: -1.5s;
    background: rgba(217, 70, 239, 0.12);
    border-color: rgba(217, 70, 239, 0.3);
    color: #d946ef;
}

.prk-hero__tag:nth-child(3) {
    animation-delay: -3s;
    background: rgba(132, 204, 22, 0.1);
    border-color: rgba(132, 204, 22, 0.3);
    color: #84cc16;
}

.prk-hero__tag--hot {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #ef4444 !important;
    text-transform: uppercase;
    letter-spacing: 2px;
}

@keyframes prk-tagPop {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.2) rotate(3deg);
        opacity: 0.8;
    }
}

/* Glitch Title */
.prk-hero__content {
    position: relative;
    z-index: 2;
}

.prk-hero__title {
    font-size: clamp(3.5rem, 10vw, 8rem);
    font-weight: 900;
    line-height: 0.9;
    margin: 20px 0 16px;
    letter-spacing: -3px;
}

.prk-hero__glitch {
    position: relative;
    display: inline-block;
    color: #fff;
}

.prk-hero__glitch::before,
.prk-hero__glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.prk-hero__glitch::before {
    color: #f97316;
    z-index: -1;
    animation: prk-glitch1 3s infinite linear alternate;
}

.prk-hero__glitch::after {
    color: #84cc16;
    z-index: -1;
    animation: prk-glitch2 3s infinite linear alternate;
}

@keyframes prk-glitch1 {
    0% {
        clip-path: inset(20% 0 60% 0);
        transform: translate(-3px, 2px);
    }

    20% {
        clip-path: inset(50% 0 10% 0);
        transform: translate(3px, -1px);
    }

    40% {
        clip-path: inset(30% 0 30% 0);
        transform: translate(-2px, 1px);
    }

    60% {
        clip-path: inset(70% 0 5% 0);
        transform: translate(2px, -2px);
    }

    80% {
        clip-path: inset(10% 0 70% 0);
        transform: translate(-1px, 3px);
    }

    100% {
        clip-path: inset(40% 0 20% 0);
        transform: translate(3px, -1px);
    }
}

@keyframes prk-glitch2 {
    0% {
        clip-path: inset(60% 0 10% 0);
        transform: translate(3px, -2px);
    }

    20% {
        clip-path: inset(10% 0 50% 0);
        transform: translate(-3px, 1px);
    }

    40% {
        clip-path: inset(40% 0 20% 0);
        transform: translate(2px, -1px);
    }

    60% {
        clip-path: inset(5% 0 70% 0);
        transform: translate(-2px, 2px);
    }

    80% {
        clip-path: inset(70% 0 10% 0);
        transform: translate(1px, -3px);
    }

    100% {
        clip-path: inset(20% 0 40% 0);
        transform: translate(-3px, 1px);
    }
}

.prk-hero__title-outline {
    -webkit-text-stroke: 2px #f97316;
    color: transparent;
    display: block;
}

/* Receipt badge */
.prk-hero__receipt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.prk-hero__receipt-dot {
    width: 8px;
    height: 8px;
    background: #f97316;
    border-radius: 50%;
    animation: prk-dotPulse 1.5s ease-in-out infinite;
}

@keyframes prk-dotPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.5);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(249, 115, 22, 0);
    }
}

.prk-hero__tagline {
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    color: rgba(255, 255, 255, 0.5);
    max-width: 580px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

/* Neon button */
.prk-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 60px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.prk-btn--neon {
    background: linear-gradient(135deg, #f97316, #d946ef);
    color: #fff;
    box-shadow: 0 4px 20px rgba(249, 115, 22, 0.3), 0 0 40px rgba(217, 70, 239, 0.15);
}

.prk-btn--neon:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(249, 115, 22, 0.5), 0 0 60px rgba(217, 70, 239, 0.25);
}

.prk-btn--lg {
    padding: 18px 40px;
    font-size: 1.05rem;
}

.prk-hero__phone,
.prk-cta__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 0.9rem;
    margin-left: 16px;
    transition: color 0.3s;
}

.prk-hero__phone:hover,
.prk-cta__phone:hover {
    color: #f97316;
}

.prk-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Scroll indicator */
.prk-hero__scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.prk-hero__scroll-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, #f97316, transparent);
    border-radius: 2px;
    animation: prk-scrollPulse 2s ease-in-out infinite;
}

@keyframes prk-scrollPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scaleY(1);
    }

    50% {
        opacity: 1;
        transform: scaleY(1.2);
    }
}

/* ── Double Marquee ── */
.prk-marquee-wrap {
    background: #0a0a0f;
    border-top: 1px solid rgba(249, 115, 22, 0.1);
    border-bottom: 1px solid rgba(249, 115, 22, 0.1);
}

.prk-marquee {
    padding: 12px 0;
    overflow: hidden;
}

.prk-marquee--reverse {
    border-top: 1px solid rgba(217, 70, 239, 0.08);
}

.prk-marquee__track {
    display: flex;
    gap: 28px;
    white-space: nowrap;
    animation: prk-marqueeScroll 25s linear infinite;
}

.prk-marquee__track--reverse {
    animation: prk-marqueeReverse 20s linear infinite;
}

.prk-marquee__track span {
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(249, 115, 22, 0.3);
}

.prk-marquee--reverse .prk-marquee__track span {
    color: rgba(217, 70, 239, 0.25);
}

@keyframes prk-marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes prk-marqueeReverse {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

/* ── Stats — Diagonal ── */
.prk-stats {
    position: relative;
    padding: 80px 0;
    background: linear-gradient(135deg, #f97316, #d946ef);
    overflow: hidden;
}

.prk-stats__skew {
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(135deg, #f97316, #d946ef);
    transform: skewY(-2deg);
}

.prk-stats__skew--bottom {
    top: auto;
    bottom: -40px;
    transform: skewY(2deg);
}

.prk-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    position: relative;
    z-index: 2;
}

.prk-stats__item {
    text-align: center;
}

.prk-stats__num {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: #fff;
}

.prk-stats__num span {
    opacity: 0.6;
}

.prk-stats__label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 4px;
    font-weight: 600;
}

/* ── Services — Hex Grid ── */
.prk-services__header {
    text-align: center;
    margin-bottom: 48px;
}

.prk-services__title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    color: var(--text-white);
    line-height: 1.1;
}

.prk-services__title span {
    background: linear-gradient(135deg, #f97316, #d946ef);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.prk-services__hex-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.prk-services__hex {
    position: relative;
}

.prk-services__hex-inner {
    background: rgba(249, 115, 22, 0.04);
    border: 1px solid rgba(249, 115, 22, 0.08);
    border-radius: 20px;
    padding: 36px 28px;
    text-align: center;
    transition: all 0.35s ease;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.prk-services__hex-inner:hover {
    background: rgba(249, 115, 22, 0.08);
    transform: translateY(-4px);
    box-shadow: 0 0 30px rgba(249, 115, 22, 0.1);
}

.prk-services__hex-inner i {
    font-size: 1.8rem;
    color: #f97316;
    margin-bottom: 14px;
}

.prk-services__hex-inner h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 8px;
}

.prk-services__hex-inner p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ── Split — Neden Biz ── */
.prk-split__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-start;
}

.prk-split__big-text {
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 900;
    color: var(--text-white);
    line-height: 0.95;
    letter-spacing: -2px;
    margin: 0;
    position: sticky;
    top: 120px;
}

.prk-split__big-text span {
    background: linear-gradient(135deg, #f97316, #d946ef);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.prk-split__question {
    background: linear-gradient(135deg, #84cc16, #f97316) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 140%;
}

.prk-split__right {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.prk-split__reason {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.prk-split__reason:hover {
    background: rgba(249, 115, 22, 0.03);
}

.prk-split__reason-line {
    width: 3px;
    min-height: 50px;
    height: 100%;
    background: linear-gradient(180deg, #f97316, #d946ef);
    border-radius: 3px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.prk-split__reason:hover .prk-split__reason-line {
    box-shadow: 0 0 14px rgba(249, 115, 22, 0.5);
}

.prk-split__reason h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 6px;
}

.prk-split__reason p {
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ── CTA — Dual Neon Glow ── */
.prk-cta {
    position: relative;
    padding: 100px 0;
    background: #0a0a0f;
    overflow: hidden;
}

.prk-cta__glow {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
}

.prk-cta__glow--1 {
    top: -100px;
    left: -100px;
    background: rgba(249, 115, 22, 0.12);
    animation: prk-glowFloat 8s ease-in-out infinite;
}

.prk-cta__glow--2 {
    bottom: -100px;
    right: -100px;
    background: rgba(217, 70, 239, 0.1);
    animation: prk-glowFloat 8s ease-in-out infinite reverse;
}

@keyframes prk-glowFloat {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(40px, -30px);
    }
}

.prk-cta__inner {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.prk-cta__title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    color: var(--text-white);
    margin: 0 0 16px;
    line-height: 1.1;
}

.prk-cta__title span {
    background: linear-gradient(135deg, #f97316, #d946ef);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.prk-cta__inner p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 32px;
}

.prk-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .prk-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .prk-services__hex-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .prk-split__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .prk-split__big-text {
        position: static;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .prk-hero {
        min-height: auto;
        padding: 140px 0 80px;
    }

    .prk-hero__floats,
    .prk-hero__tags {
        display: none;
    }

    .prk-hero__scanline {
        display: none;
    }

    .prk-services__hex-grid {
        grid-template-columns: 1fr;
    }

    .prk-services__hex-inner {
        clip-path: none;
        min-height: auto;
    }

    .prk-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .prk-cta__inner {
        padding: 40px 24px;
    }
}

/* ========================================
   YAZILIM / PROGRAMLAMA — Bireysel Tasarım
   ======================================== */

/* ─── YZL HERO ─────────────────────────── */
.yzl-hero {
    position: relative;
    padding: 80px 0 60px;
    overflow: hidden;
}

.yzl-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.yzl-hero__gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 40%, rgba(6, 182, 212, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 60%, rgba(59, 130, 246, 0.08) 0%, transparent 50%);
}

/* Code rain lines */
.yzl-hero__code-line {
    position: absolute;
    width: 1px;
    height: 80px;
    background: linear-gradient(180deg, rgba(6, 182, 212, 0.2), transparent);
    animation: yzl-rain 4s linear infinite;
    opacity: 0.3;
}

.yzl-hero__code-line--1 {
    left: 10%;
    animation-delay: 0s;
}

.yzl-hero__code-line--2 {
    left: 25%;
    animation-delay: 0.8s;
    height: 60px;
}

.yzl-hero__code-line--3 {
    left: 55%;
    animation-delay: 1.6s;
    height: 100px;
}

.yzl-hero__code-line--4 {
    left: 75%;
    animation-delay: 2.4s;
    height: 50px;
}

.yzl-hero__code-line--5 {
    left: 90%;
    animation-delay: 3.2s;
}

@keyframes yzl-rain {
    0% {
        top: -100px;
        opacity: 0;
    }

    20% {
        opacity: 0.3;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

.yzl-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.yzl-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(6, 182, 212, 0.06);
    border: 1px solid rgba(6, 182, 212, 0.16);
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 600;
    color: #06b6d4;
    margin-bottom: 24px;
}

.yzl-hero__badge code {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.8rem;
    color: #22d3ee;
}

.yzl-hero__badge-dot {
    width: 8px;
    height: 8px;
    background: #06b6d4;
    border-radius: 50%;
    animation: yzl-pulse 2s ease-in-out infinite;
}

@keyframes yzl-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.8);
    }
}

.yzl-hero__title {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--text-white);
}

.yzl-hero__title-accent {
    background: linear-gradient(135deg, #06b6d4, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.yzl-hero__desc {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 32px;
    max-width: 480px;
}

.yzl-hero__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.yzl-hero__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: rgba(6, 182, 212, 0.06);
    border: 1px solid rgba(6, 182, 212, 0.16);
    border-radius: var(--radius-full);
    color: #06b6d4;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    transition: var(--transition-base);
}

.yzl-hero__phone:hover {
    background: rgba(6, 182, 212, 0.14);
    color: #22d3ee;
}

/* Terminal Card */
.yzl-hero__terminal {
    border-radius: var(--radius-xl);
    border: 1px solid rgba(6, 182, 212, 0.12);
    background: rgba(0, 0, 0, 0.4);
    overflow: hidden;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(6, 182, 212, 0.06);
}

.yzl-hero__terminal-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.yzl-hero__terminal-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.yzl-hero__terminal-title {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.yzl-hero__terminal-body {
    padding: 20px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.82rem;
    line-height: 2;
}

.yzl-hero__terminal-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.yzl-term-prompt {
    color: #06b6d4;
    font-weight: 700;
}

.yzl-term-cmd {
    color: #22d3ee;
}

.yzl-term-flag {
    color: #a5f3fc;
}

.yzl-term-output {
    color: var(--text-muted);
    gap: 10px;
}

.yzl-term-cursor {
    color: #06b6d4;
    animation: yzl-blink 1s step-end infinite;
}

@keyframes yzl-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* ─── YZL STACK ────────────────────────── */
.yzl-stack__header {
    text-align: center;
    margin-bottom: 40px;
}

.yzl-stack__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(6, 182, 212, 0.06);
    border: 1px solid rgba(6, 182, 212, 0.14);
    border-radius: var(--radius-full);
    font-size: 0.73rem;
    font-weight: 600;
    color: #06b6d4;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
}

.yzl-stack__label code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #22d3ee;
}

.yzl-stack__title {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.yzl-stack__grid {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.yzl-stack__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 24px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    transition: all 0.3s ease;
    width: 110px;
}

.yzl-stack__item i {
    font-size: 1.8rem;
    color: #06b6d4;
    transition: transform 0.3s ease;
}

.yzl-stack__item span {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.yzl-stack__item:hover {
    border-color: rgba(6, 182, 212, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(6, 182, 212, 0.08);
}

.yzl-stack__item:hover i {
    transform: scale(1.15);
}

/* ─── YZL ABOUT ────────────────────────── */
.yzl-about__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: start;
}

.yzl-about__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: rgba(6, 182, 212, 0.06);
    border: 1px solid rgba(6, 182, 212, 0.14);
    border-radius: var(--radius-full);
    font-size: 0.73rem;
    font-weight: 600;
    color: #06b6d4;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
}

.yzl-about__title {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.yzl-about__text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.85;
}

.yzl-about__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.yzl-about__stat-card {
    padding: 24px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    text-align: center;
    transition: all 0.3s ease;
}

.yzl-about__stat-card:hover {
    border-color: rgba(6, 182, 212, 0.25);
    transform: translateY(-4px);
}

.yzl-about__stat-num {
    font-size: 1.8rem;
    font-weight: 900;
    color: #06b6d4;
    letter-spacing: -0.03em;
    margin-bottom: 4px;
}

.yzl-about__stat-num span {
    font-size: 1.1rem;
    color: #22d3ee;
}

.yzl-about__stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ─── YZL FEATURES ─────────────────────── */
.yzl-features__header {
    text-align: center;
    margin-bottom: 40px;
}

.yzl-features__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: rgba(6, 182, 212, 0.06);
    border: 1px solid rgba(6, 182, 212, 0.14);
    border-radius: var(--radius-full);
    font-size: 0.73rem;
    font-weight: 600;
    color: #06b6d4;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
}

.yzl-features__title {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.yzl-features__subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.yzl-features__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.yzl-features__card {
    padding: 28px 24px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.yzl-features__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #06b6d4, #3b82f6);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.yzl-features__card:hover {
    transform: translateY(-6px);
    border-color: rgba(6, 182, 212, 0.25);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
}

.yzl-features__card:hover::before {
    transform: scaleX(1);
}

.yzl-features__card-icon {
    width: 48px;
    height: 48px;
    background: rgba(6, 182, 212, 0.06);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #06b6d4;
    margin-bottom: 14px;
    transition: all 0.3s ease;
}

.yzl-features__card:hover .yzl-features__card-icon {
    background: #06b6d4;
    color: #fff;
    transform: scale(1.06);
}

.yzl-features__card h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
    transition: color 0.3s;
}

.yzl-features__card:hover h4 {
    color: var(--text-white);
}

.yzl-features__card p {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 12px;
}

.yzl-features__card-bar {
    width: 32px;
    height: 3px;
    background: rgba(6, 182, 212, 0.2);
    border-radius: 2px;
    transition: width 0.4s ease, background 0.3s ease;
}

.yzl-features__card:hover .yzl-features__card-bar {
    width: 56px;
    background: #06b6d4;
}

/* ─── YZL PROCESS ──────────────────────── */
.yzl-process__header {
    text-align: center;
    margin-bottom: 48px;
}

.yzl-process__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: rgba(6, 182, 212, 0.06);
    border: 1px solid rgba(6, 182, 212, 0.14);
    border-radius: var(--radius-full);
    font-size: 0.73rem;
    font-weight: 600;
    color: #06b6d4;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
}

.yzl-process__title {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.yzl-process__steps {
    display: flex;
    align-items: stretch;
    gap: 0;
    justify-content: center;
}

.yzl-process__step {
    flex: 1;
    max-width: 260px;
    padding: 28px 20px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    text-align: center;
    transition: all 0.3s ease;
}

.yzl-process__step:hover {
    border-color: rgba(6, 182, 212, 0.3);
    transform: translateY(-6px);
    box-shadow: 0 12px 36px rgba(6, 182, 212, 0.06);
}

.yzl-process__step-icon {
    width: 56px;
    height: 56px;
    background: rgba(6, 182, 212, 0.06);
    border: 1px solid rgba(6, 182, 212, 0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #06b6d4;
    margin: 0 auto 16px;
    transition: all 0.3s ease;
}

.yzl-process__step:hover .yzl-process__step-icon {
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    border-color: transparent;
    color: #fff;
    transform: scale(1.08);
}

.yzl-process__step-num {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    color: #06b6d4;
    opacity: 0.5;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
}

.yzl-process__step-info h4 {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 8px;
}

.yzl-process__step-info p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.yzl-process__connector {
    display: flex;
    align-items: center;
    padding: 0 8px;
    color: rgba(6, 182, 212, 0.3);
    font-size: 0.8rem;
}

/* ─── YZL CTA ──────────────────────────── */
.yzl-cta {
    position: relative;
    padding: 80px 0;
    background: linear-gradient(135deg, #0e7490, #06b6d4, #22d3ee);
    overflow: hidden;
}

.yzl-cta__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.yzl-cta__orb {
    position: absolute;
    top: -30%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    filter: blur(60px);
}

.yzl-cta__inner {
    text-align: center;
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
}

.yzl-cta__icon {
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #fff;
    margin: 0 auto 24px;
}

.yzl-cta__inner h2 {
    font-size: 1.9rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 14px;
}

.yzl-cta__inner p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    margin-bottom: 32px;
}

.yzl-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.yzl-cta__actions .btn-primary {
    background: #fff;
    color: #0e7490;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.yzl-cta__actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}

.yzl-cta__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-full);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: var(--transition-base);
}

.yzl-cta__phone:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* ─── YZL RESPONSIVE ───────────────────── */
@media (max-width: 1024px) {
    .yzl-hero__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .yzl-about__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .yzl-process__steps {
        flex-wrap: wrap;
        gap: 16px;
    }

    .yzl-process__connector {
        display: none;
    }

    .yzl-process__step {
        flex: 0 0 calc(50% - 8px);
        max-width: none;
    }
}

@media (max-width: 768px) {
    .yzl-hero {
        padding: 50px 0 40px;
    }

    .yzl-hero__actions {
        flex-direction: column;
    }

    .yzl-stack__item {
        width: 90px;
        padding: 14px 12px;
    }

    .yzl-stack__item i {
        font-size: 1.4rem;
    }

    .yzl-about__stats {
        grid-template-columns: 1fr 1fr;
    }

    .yzl-features__grid {
        grid-template-columns: 1fr;
    }

    .yzl-process__step {
        flex: 0 0 100%;
    }

    .yzl-cta {
        padding: 50px 0;
    }

    .yzl-cta__inner h2 {
        font-size: 1.5rem;
    }

    .yzl-cta__actions {
        flex-direction: column;
    }
}

/* ========================================
   CONTACT PAGE

   ======================================== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-2xl);
    align-items: start;
}

.contact-info-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-info-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    transition: var(--transition-base);
}

.contact-info-card:hover {
    border-color: rgba(99, 102, 241, 0.15);
    transform: translateX(4px);
}

.contact-info-icon {
    width: 48px;
    height: 48px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-info-icon i {
    font-size: 1.1rem;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-info-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 4px;
}

.contact-info-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* Contact Form */
.contact-form-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: 36px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.form-control {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 0.92rem;
    outline: none;
    transition: var(--transition-base);
    resize: vertical;
}

.form-control:focus {
    border-color: var(--accent-1);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1), 0 0 20px rgba(99, 102, 241, 0.05);
    background: rgba(255, 255, 255, 0.05);
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.15);
}

textarea.form-control {
    min-height: 130px;
}

select.form-control {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='rgba(255,255,255,0.3)' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

/* ========================================
   FOOTER — Rich & Immersive
   ======================================== */
.footer {
    background: rgba(3, 0, 14, 0.9);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding: var(--space-4xl) 0 var(--space-xl);
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gradient-main);
    opacity: 0.3;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-2xl);
    margin-bottom: var(--space-3xl);
}

.footer-brand .brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-lg);
}

.footer-brand .brand-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient-main);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.95rem;
}

.footer-brand .brand-name {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-white);
}

.footer-brand .brand-accent {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-brand p {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

.footer-socials {
    display: flex;
    gap: 10px;
}

.footer-col h4 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-white);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-lg);
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links a {
    color: var(--text-secondary);
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-base);
}

.footer-links a:hover {
    color: var(--accent-4);
    transform: translateX(4px);
}

.footer-links a i {
    font-size: 0.7rem;
    opacity: 0.4;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.footer-contact-item i {
    color: var(--accent-1);
    font-size: 0.85rem;
    margin-top: 3px;
}

.footer-contact-item span {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.5;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom p {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* ========================================
   FLASH MESSAGES
   ======================================== */
.flash-message {
    position: fixed;
    top: 100px;
    right: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    backdrop-filter: blur(20px);
    animation: fadeInUp 0.4s ease;
    max-width: 420px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.flash-success {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.flash-error {
    background: rgba(244, 63, 94, 0.12);
    border: 1px solid rgba(244, 63, 94, 0.2);
    color: #fb7185;
}

.flash-close {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    opacity: 0.6;
    padding: 4px;
}

.flash-close:hover {
    opacity: 1;
}

/* ========================================
   HERO — Center-aligned, Cinematic
   ======================================== */
.hero-center {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-4);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--space-xl);
    animation: fadeInUp 0.6s ease forwards;
}

.eyebrow-dot {
    width: 8px;
    height: 8px;
    background: var(--accent-emerald);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--accent-emerald);
    animation: pulse-glow 2s ease-in-out infinite;
}

.hero-center .hero-title {
    animation-delay: 0s;
    opacity: 0;
}

.hero-center .hero-description {
    max-width: 560px;
    margin: 0 auto var(--space-2xl);
    animation-delay: 0.1s;
    opacity: 0;
}

.hero-center .hero-buttons {
    justify-content: center;
    margin-bottom: var(--space-2xl);
    animation-delay: 0.2s;
    opacity: 0;
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    padding: 16px 36px;
    font-size: 1rem;
    border: none;
}

.btn-ghost:hover {
    color: var(--text-white);
}

.btn-ghost i {
    animation: float 2s ease-in-out infinite;
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--accent-1), transparent);
    animation: pulse-glow 2s ease-in-out infinite;
}

/* ========================================
   MARQUEE STRIP
   ======================================== */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.marquee-strip {
    padding: 20px 0;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.marquee-track {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

.marquee-content {
    display: flex;
    align-items: center;
    gap: 32px;
    white-space: nowrap;
    animation: marquee-scroll 30s linear infinite;
    width: max-content;
}

.marquee-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.marquee-item i {
    color: var(--accent-emerald);
    font-size: 0.75rem;
}

.marquee-divider {
    color: rgba(255, 255, 255, 0.08);
    font-size: 0.5rem;
}

/* ========================================
   BENTO GRID SYSTEM
   ======================================== */
.text-gradient {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Section Label — Line + Text + Line */
.section-label {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: var(--space-3xl) 0 var(--space-xl);
}

.section-label-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

.section-label-text {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.section-label-text i {
    color: var(--accent-1);
    font-size: 0.7rem;
}

/* Bento Rows */
.bento-row {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
}

/* Row: Intro (wide card + 2 stacked stats) */
.bento-intro {
    grid-template-columns: 1.6fr 1fr;
}

/* Row: Top Services (3 equal) */
.bento-services-top {
    grid-template-columns: repeat(3, 1fr);
}

/* Row: Bottom Services (compact, auto-fill) */
.bento-services-bottom {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Row: Team */
.bento-team-row {
    grid-template-columns: 340px 1fr;
    min-height: 280px;
}

/* Row: CTA */
.bento-cta-row {
    grid-template-columns: 1.6fr 1fr;
}

/* Bento Card — Base */
.bento-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.bento-card:hover {
    border-color: var(--glass-border-hover);
}

/* Bento Label */
.bento-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-lg);
}

.bento-label i {
    font-size: 0.7rem;
}

/* Bento Headings */
.bento-heading {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-lg);
}

.bento-heading-sm {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-md);
}

.bento-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.bento-text-sm {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

.bento-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent-4);
    transition: var(--transition-base);
}

.bento-link:hover {
    color: var(--text-white);
    gap: 12px;
}

/* Accent Card */
.bento-accent {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(139, 92, 246, 0.03));
    border-color: rgba(99, 102, 241, 0.12);
}

.bento-accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-main);
    opacity: 0.6;
}

.bento-card-inner {
    position: relative;
    z-index: 1;
}

/* Stats Column */
.bento-stats-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Stat Cards */
.bento-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex: 1;
}

.bento-stat:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.bento-stat-number {
    font-size: 3rem;
    font-weight: 900;
    color: var(--text-white);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -0.04em;
}

.bento-stat-text {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bento-stat-accent {
    background: rgba(99, 102, 241, 0.04);
    border-color: rgba(99, 102, 241, 0.1);
}

/* ========================================
   BENTO SERVICE CARDS
   ======================================== */
.bento-service {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
}

.bento-service::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.05), transparent 60%);
    opacity: 0;
    transition: var(--transition-base);
}

.bento-service:hover {
    border-color: rgba(99, 102, 241, 0.2);
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3), 0 0 50px rgba(99, 102, 241, 0.06);
    color: inherit;
}

.bento-service:hover::after {
    opacity: 1;
}

.bento-service-icon {
    width: 52px;
    height: 52px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: var(--space-xl);
    position: relative;
    z-index: 1;
    transition: var(--transition-base);
}

.bento-service-icon i {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bento-service:hover .bento-service-icon {
    background: rgba(99, 102, 241, 0.15);
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2);
}

.bento-service-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.bento-service-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    flex: 1;
    position: relative;
    z-index: 1;
}

.bento-service-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 8px;
    color: var(--accent-4);
    font-size: 0.75rem;
    margin-top: var(--space-lg);
    position: relative;
    z-index: 1;
    transition: var(--transition-base);
}

.bento-service:hover .bento-service-arrow {
    background: rgba(99, 102, 241, 0.2);
    transform: translateX(4px);
}

/* Compact Service Cards */
.bento-service-sm {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
}

.bento-service-sm:hover {
    border-color: rgba(99, 102, 241, 0.15);
    transform: translateY(-3px);
    color: inherit;
}

.bento-service-icon-sm {
    width: 44px;
    height: 44px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.bento-service-icon-sm i {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bento-service-sm-title {
    font-size: 0.92rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.bento-service-sm-link {
    font-size: 0.78rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-base);
}

.bento-service-sm:hover .bento-service-sm-link {
    color: var(--accent-4);
}

/* ========================================
   BENTO TEAM
   ======================================== */
.bento-team-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bento-team-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.3) transparent;
}

.bento-team-scroll::-webkit-scrollbar {
    height: 4px;
}

.bento-team-scroll::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.3);
    border-radius: 4px;
}

.bento-team-member {
    flex-shrink: 0;
    width: 160px;
    text-align: center;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: 28px 16px;
    transition: var(--transition-smooth);
}

.bento-team-member:hover {
    border-color: rgba(99, 102, 241, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.bento-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gradient-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
    margin: 0 auto 14px;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
}

.bento-member-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 4px;
}

.bento-member-title {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* ========================================
   BENTO CTA
   ======================================== */
.bento-cta-main {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 280px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.04), rgba(139, 92, 246, 0.02));
    border-color: rgba(99, 102, 241, 0.1);
}

.bento-cta-ambient {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.bento-cta-orb {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    filter: blur(100px);
    background: rgba(99, 102, 241, 0.1);
    top: -100px;
    right: -50px;
    animation: pulse-glow 8s ease-in-out infinite;
}

.bento-cta-orb-2 {
    background: rgba(168, 85, 247, 0.08);
    top: auto;
    bottom: -80px;
    right: auto;
    left: -50px;
    animation-delay: 3s;
}

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

.bento-cta-content .bento-heading {
    margin-bottom: var(--space-md);
}

.bento-cta-content .bento-text {
    max-width: 420px;
    margin: 0 auto var(--space-xl);
}

.bento-side-stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ========================================
   RESPONSIVE — Premium Mobile
   ======================================== */
@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-2xl);
    }

    .hero-description {
        margin: 0 auto var(--space-2xl);
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-stats {
        justify-content: center;
    }

    .hero-visual {
        display: none;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-detail-grid {
        grid-template-columns: 1fr;
    }

    .service-sidebar {
        position: static;
    }

    .about-content {
        grid-template-columns: 1fr;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }

    /* Bento Responsive */
    .bento-intro {
        grid-template-columns: 1fr;
    }

    .bento-services-top {
        grid-template-columns: repeat(2, 1fr);
    }

    .bento-team-row {
        grid-template-columns: 1fr;
    }

    .bento-cta-row {
        grid-template-columns: 1fr;
    }

    .bento-side-stats {
        flex-direction: row;
    }
}

@media (max-width: 768px) {

    /* Top bar hidden on mobile */
    .top-bar {
        display: none;
    }

    /* Main Header mobile */
    .hamburger {
        display: flex;
    }

    .btn-header-cta {
        display: none;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        height: 100vh;
        background: rgba(6, 4, 18, 0.98);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 0;
        transition: var(--transition-smooth);
        z-index: 999;
        border-left: 1px solid rgba(255, 255, 255, 0.06);
        overflow-y: auto;
    }

    .main-nav.active {
        right: 0;
    }

    .mobile-nav-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .close-nav {
        display: flex;
    }

    .nav-menu {
        flex-direction: column;
        gap: 0;
        padding: 12px;
    }

    .nav-menu>li>a {
        width: 100%;
        padding: 10px 16px;
        border-radius: var(--radius-md);
        font-size: 0.92rem;
    }

    .nav-menu .mobile-only {
        display: list-item;
    }

    /* Mega Menu on mobile */
    .mega-menu {
        position: static;
        transform: none;
        width: 100%;
        min-width: unset;
        background: rgba(255, 255, 255, 0.02);
        border: none;
        border-radius: var(--radius-md);
        padding: 0;
        margin: 0;
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        max-height: 0;
        overflow: hidden;
        backdrop-filter: none;
        transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.25s ease;
    }

    .mega-menu::before {
        display: none;
    }

    .has-dropdown.open .mega-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        max-height: 1000px;
        padding: 8px 12px;
    }

    .mega-menu-inner {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Mega menu descriptions hidden on mobile for cleaner look */
    .mega-menu .menu-info span {
        display: none;
    }

    /* Dropdown arrow rotation */
    .has-dropdown.open>a .dropdown-arrow {
        transform: rotate(180deg);
    }

    .dropdown-arrow {
        transition: transform 0.3s;
    }

    /* Mobile Nav Footer (Auth + CTA) */
    .mobile-nav-footer {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 20px 16px;
        margin-top: auto;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .mobile-nav-footer__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 20px;
        border-radius: 12px;
        font-size: 0.88rem;
        font-weight: 600;
        text-decoration: none;
        color: rgba(255, 255, 255, .7);
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .08);
        transition: all 0.3s;
    }

    .mobile-nav-footer__btn:hover {
        background: rgba(255, 255, 255, .08);
        color: #fff;
    }

    .mobile-nav-footer__btn--primary {
        background: linear-gradient(135deg, #8b5cf6, #6366f1);
        color: #fff;
        border: none;
    }

    .mobile-nav-footer__btn--outline {
        border-color: rgba(239, 68, 68, .2);
        color: rgba(239, 68, 68, .7);
    }

    .hero {
        min-height: auto;
        padding: 140px 0 80px;
    }

    .hero-title {
        font-size: 2.4rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero-stats {
        flex-direction: column;
        gap: var(--space-lg);
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .section {
        padding: var(--space-3xl) 0;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .page-hero {
        padding: 120px 0 60px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-form-card {
        padding: 24px;
    }

    /* Bento Responsive Mobile */
    .bento-services-top {
        grid-template-columns: 1fr;
    }

    .bento-services-bottom {
        grid-template-columns: 1fr;
    }

    .bento-heading {
        font-size: 1.6rem;
    }

    .bento-stat-number {
        font-size: 2.2rem;
    }

    .bento-side-stats {
        flex-direction: column;
    }

    .scroll-indicator {
        display: none;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .section-title {
        font-size: 1.6rem;
    }

    .page-title {
        font-size: 1.8rem;
    }

    .btn-lg {
        padding: 14px 24px;
        font-size: 0.92rem;
    }
}

/* ========================================
   REFERANSLAR (REFERENCES) PAGE
   Prefix: ref-
   Accent: #f59e0b (amber/gold)
   ======================================== */

/* ── Hero ── */
.ref-hero {
    padding: 160px 0 70px;
    background: linear-gradient(180deg, #0a0a1a 0%, #12122a 50%, #1a1a35 100%);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.ref-hero__shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.ref-hero__shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.06;
}

.ref-hero__shape--1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    top: -120px;
    right: -80px;
    animation: refFloat 8s ease-in-out infinite;
}

.ref-hero__shape--2 {
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    bottom: -60px;
    left: -40px;
    animation: refFloat 10s ease-in-out infinite reverse;
}

.ref-hero__shape--3 {
    width: 180px;
    height: 180px;
    background: linear-gradient(135deg, #10b981, #06b6d4);
    top: 40%;
    left: 60%;
    animation: refFloat 12s ease-in-out infinite 2s;
}

@keyframes refFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(20px, -20px) scale(1.05);
    }
}

.ref-hero__content {
    position: relative;
    z-index: 1;
}

.ref-hero__title {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin: 0 0 0;
    letter-spacing: -0.5px;
}

.ref-hero__divider {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #f59e0b, #f97316);
    border-radius: 4px;
    margin: 20px auto 24px;
}

.ref-hero__subtitle {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.8;
}

/* ── Stats ── */
.ref-hero__stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    margin-top: 40px;
    padding: 28px 40px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.ref-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.ref-hero__stat-num {
    font-size: 1.6rem;
    font-weight: 800;
    color: #f59e0b;
}

.ref-hero__stat-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ref-hero__stat-sep {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
}

/* ── Logo Grid ── */
.ref-grid {
    padding: 80px 0;
    background: #ffffff;
}

.ref-grid__logos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px;
}

.ref-grid__item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    padding: 32px 20px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    transition: all 0.35s ease;
    position: relative;
}

.ref-grid__item:hover {
    border-color: rgba(245, 158, 11, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.ref-grid__item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.ref-grid__item img {
    max-width: 140px;
    max-height: 70px;
    object-fit: contain;
    filter: grayscale(40%);
    opacity: 0.85;
    transition: all 0.35s ease;
}

.ref-grid__item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Logo Theme: dark logo → white/light bg (default on white section) */
.ref-grid__item--dark {
    background: #ffffff;
    border: 5px solid #ccc;
}

.ref-grid__item--dark img {
    filter: grayscale(30%);
    opacity: 0.85;
}

.ref-grid__item--dark:hover {
    background: #fff;
    border-color: rgba(245, 158, 11, 0.4);
}

.ref-grid__item--dark:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

.ref-grid__item--dark .ref-grid__name {
    color: #555;
}

/* Logo Theme: light/white logo → dark background card */
.ref-grid__item--light {
    background: #1a1a2e;
    border-color: #2a2a3e;
}

.ref-grid__item--light:hover {
    border-color: rgba(245, 158, 11, 0.4);
    background: #1e1e32;
}

.ref-grid__item--light img {
    filter: grayscale(40%) brightness(1.1);
    opacity: 0.85;
}

.ref-grid__item--light:hover img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}

.ref-grid__item--light .ref-grid__name {
    color: #ccc;
}

.ref-grid__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}

.ref-grid__placeholder i {
    font-size: 2rem;
    color: rgba(245, 158, 11, 0.4);
}

.ref-grid__placeholder span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.ref-grid__name {
    display: none;
}

/* ── Empty State ── */
.ref-grid__empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-muted);
}

.ref-grid__empty i {
    font-size: 3rem;
    color: rgba(245, 158, 11, 0.3);
    margin-bottom: 20px;
}

.ref-grid__empty h3 {
    font-size: 1.3rem;
    color: #333;
    margin: 0 0 8px;
}

.ref-grid__empty p {
    font-size: 0.92rem;
    color: #777;
}

/* ── CTA ── */
.ref-cta {
    padding: 80px 0;
}

.ref-cta__content {
    text-align: center;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(249, 115, 22, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.15);
    border-radius: 24px;
    padding: 60px 40px;
}

.ref-cta__content h2 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 12px;
}

.ref-cta__content p {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 520px;
    margin: 0 auto 28px;
    line-height: 1.7;
}

.ref-cta__actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ref-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ref-cta__btn--primary {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
    border: none;
}

.ref-cta__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
}

.ref-cta__btn--outline {
    background: transparent;
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

.ref-cta__btn--outline:hover {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.5);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .ref-hero {
        padding: 130px 0 50px;
    }

    .ref-hero__stats {
        gap: 20px;
        padding: 20px 24px;
        flex-wrap: wrap;
    }

    .ref-hero__stat-num {
        font-size: 1.3rem;
    }

    .ref-grid__logos {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .ref-grid__item {
        padding: 24px 16px 16px;
        min-height: 120px;
    }

    .ref-cta__content {
        padding: 40px 24px;
    }
}

@media (max-width: 480px) {
    .ref-grid__logos {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .ref-grid__item img {
        max-width: 100px;
        max-height: 50px;
    }
}

/* ========================================
   FRANCHISING & SOURCING
   🔥 BOUNDARY-BREAKING — Globe/Network/Chain
   Prefix: frc-
   Palette: Emerald (#064e3b) + Gold (#d4a853) + Teal (#14b8a6) + Dark (#0a0f0d)
   ======================================== */

/* ── Hero — Full Viewport Network ── */
.frc-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0f0d;
    overflow: hidden;
    text-align: center;
}

.frc-hero__net-bg {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(20, 184, 166, 0.15) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: frc-netDrift 20s linear infinite;
}

@keyframes frc-netDrift {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 40px 40px;
    }
}

.frc-hero__beam {
    position: absolute;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #14b8a6, transparent);
    opacity: 0.12;
}

.frc-hero__beam--1 {
    left: 20%;
    animation: frc-beamPulse 4s ease-in-out infinite;
}

.frc-hero__beam--2 {
    left: 50%;
    animation: frc-beamPulse 4s ease-in-out infinite 1.5s;
}

.frc-hero__beam--3 {
    left: 80%;
    animation: frc-beamPulse 4s ease-in-out infinite 3s;
}

@keyframes frc-beamPulse {

    0%,
    100% {
        opacity: 0.05;
    }

    50% {
        opacity: 0.18;
    }
}

/* Floating Icons */
.frc-hero__floats {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.frc-hero__float {
    position: absolute;
    font-size: 1.8rem;
    color: rgba(212, 168, 83, 0.2);
    animation: frc-float 8s ease-in-out infinite;
}

.frc-hero__float:nth-child(2) {
    animation-delay: -1.5s;
    color: rgba(20, 184, 166, 0.2);
}

.frc-hero__float:nth-child(3) {
    animation-delay: -3s;
}

.frc-hero__float:nth-child(4) {
    animation-delay: -4.5s;
    color: rgba(20, 184, 166, 0.2);
}

.frc-hero__float:nth-child(5) {
    animation-delay: -6s;
}

.frc-hero__float:nth-child(6) {
    animation-delay: -7s;
    color: rgba(20, 184, 166, 0.2);
}

@keyframes frc-float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(8deg);
    }
}

/* Hero Content */
.frc-hero__content {
    position: relative;
    z-index: 2;
}

.frc-hero__title {
    font-size: clamp(3.5rem, 10vw, 8rem);
    font-weight: 900;
    line-height: 0.9;
    margin: 20px 0 24px;
    color: #fff;
    letter-spacing: -3px;
}

.frc-hero__title-outline {
    -webkit-text-stroke: 2px #d4a853;
    color: transparent;
    display: block;
}

.frc-hero__tagline {
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    color: rgba(255, 255, 255, 0.5);
    max-width: 560px;
    margin: 0 auto 32px;
}

/* Actions */
.frc-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 60px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.frc-btn--gold {
    background: linear-gradient(135deg, #d4a853, #b8922e);
    color: #0a0f0d;
    box-shadow: 0 4px 20px rgba(212, 168, 83, 0.3);
}

.frc-btn--gold:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(212, 168, 83, 0.5);
}

.frc-btn--lg {
    padding: 18px 40px;
    font-size: 1.05rem;
}

.frc-hero__phone,
.frc-cta__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 0.9rem;
    margin-left: 16px;
    transition: color 0.3s;
}

.frc-hero__phone:hover,
.frc-cta__phone:hover {
    color: #d4a853;
}

.frc-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Scroll indicator */
.frc-hero__scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.frc-hero__scroll-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, #14b8a6, transparent);
    border-radius: 2px;
    animation: frc-scrollPulse 2s ease-in-out infinite;
}

@keyframes frc-scrollPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scaleY(1);
    }

    50% {
        opacity: 1;
        transform: scaleY(1.2);
    }
}

/* ── Marquee ── */
.frc-marquee {
    background: linear-gradient(90deg, #064e3b, #0a0f0d, #064e3b);
    padding: 16px 0;
    overflow: hidden;
    border-top: 1px solid rgba(20, 184, 166, 0.1);
    border-bottom: 1px solid rgba(20, 184, 166, 0.1);
}

.frc-marquee__track {
    display: flex;
    gap: 32px;
    white-space: nowrap;
    animation: frc-marqueeScroll 30s linear infinite;
}

.frc-marquee__track span {
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(212, 168, 83, 0.35);
}

@keyframes frc-marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ── Stats — Diagonal ── */
.frc-stats {
    position: relative;
    padding: 80px 0;
    background: #064e3b;
    overflow: hidden;
}

.frc-stats__skew {
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    height: 80px;
    background: #064e3b;
    transform: skewY(-2deg);
}

.frc-stats__skew--bottom {
    top: auto;
    bottom: -40px;
    transform: skewY(2deg);
}

.frc-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    position: relative;
    z-index: 2;
}

.frc-stats__item {
    text-align: center;
}

.frc-stats__num {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: #d4a853;
}

.frc-stats__num span {
    color: rgba(212, 168, 83, 0.5);
}

.frc-stats__label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
    font-weight: 600;
}

/* ── Services — Hex Grid ── */
.frc-services__header {
    text-align: center;
    margin-bottom: 48px;
}

.frc-services__title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    color: var(--text-white);
    line-height: 1.1;
}

.frc-services__title span {
    background: linear-gradient(135deg, #14b8a6, #d4a853);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.frc-services__hex-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.frc-services__hex {
    position: relative;
}

.frc-services__hex-inner {
    background: rgba(20, 184, 166, 0.04);
    border: 1px solid rgba(20, 184, 166, 0.08);
    border-radius: 20px;
    padding: 36px 28px;
    text-align: center;
    transition: all 0.35s ease;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.frc-services__hex-inner:hover {
    background: rgba(20, 184, 166, 0.08);
    transform: translateY(-4px);
}

.frc-services__hex-inner i {
    font-size: 1.8rem;
    color: #14b8a6;
    margin-bottom: 14px;
}

.frc-services__hex-inner h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 8px;
}

.frc-services__hex-inner p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ── Split — Neden Biz ── */
.frc-split__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-start;
}

.frc-split__big-text {
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 900;
    color: var(--text-white);
    line-height: 0.95;
    letter-spacing: -2px;
    margin: 0;
    position: sticky;
    top: 120px;
}

.frc-split__big-text span {
    background: linear-gradient(135deg, #14b8a6, #d4a853);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.frc-split__question {
    background: linear-gradient(135deg, #d4a853, #b8922e) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 140%;
}

.frc-split__right {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.frc-split__reason {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.frc-split__reason:hover {
    background: rgba(20, 184, 166, 0.03);
}

.frc-split__reason-line {
    width: 3px;
    min-height: 50px;
    height: 100%;
    background: linear-gradient(180deg, #14b8a6, #d4a853);
    border-radius: 3px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.frc-split__reason:hover .frc-split__reason-line {
    box-shadow: 0 0 14px rgba(20, 184, 166, 0.5);
}

.frc-split__reason h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 6px;
}

.frc-split__reason p {
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ── CTA ── */
.frc-cta {
    position: relative;
    padding: 100px 0;
    background: #0a0f0d;
    overflow: hidden;
}

.frc-cta__beams {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.frc-cta__beam {
    position: absolute;
    top: 0;
    left: 50%;
    width: 400px;
    height: 100%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(20, 184, 166, 0.08) 0%, transparent 70%);
}

.frc-cta__inner {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.frc-cta__title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    color: var(--text-white);
    margin: 0 0 16px;
    line-height: 1.1;
}

.frc-cta__title span {
    background: linear-gradient(135deg, #14b8a6, #d4a853);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.frc-cta__inner p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 32px;
}

.frc-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .frc-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .frc-services__hex-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .frc-split__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .frc-split__big-text {
        position: static;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .frc-hero {
        min-height: auto;
        padding: 140px 0 80px;
    }

    .frc-hero__floats {
        display: none;
    }

    .frc-services__hex-grid {
        grid-template-columns: 1fr;
    }

    .frc-services__hex-inner {
        clip-path: none;
        min-height: auto;
    }

    .frc-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .frc-cta__inner {
        padding: 40px 24px;
    }
}


/* ========================================
   E-TİCARET ÇÖZÜMLERİ
   Prefix: etc-
   Accent: Violet (#7c3aed) + Pink (#ec4899) + Neon Green (#22c55e)
   ======================================== */

/* ── Hero ── */
.etc-hero {
    padding: 160px 0 80px;
    background: linear-gradient(150deg, #0a0015 0%, #150030 35%, #1a0044 60%, #0d0020 100%);
    position: relative;
    overflow: hidden;
}

.etc-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.etc-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
}

.etc-hero__glow--1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.2), transparent 70%);
    top: -200px;
    right: -100px;
    animation: etcPulse 8s ease-in-out infinite;
}

.etc-hero__glow--2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.12), transparent 70%);
    bottom: -150px;
    left: -100px;
    animation: etcPulse 10s ease-in-out infinite 2s;
}

.etc-hero__glow--3 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.1), transparent 70%);
    top: 40%;
    left: 35%;
    animation: etcPulse 12s ease-in-out infinite 4s;
}

.etc-hero__mesh {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(124, 58, 237, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
}

@keyframes etcPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.7;
    }
}

.etc-hero__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.etc-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #a78bfa;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
    position: relative;
}

.etc-hero__badge-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    animation: etcBadgePulse 2s ease-in-out infinite;
}

@keyframes etcBadgePulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }

    50% {
        opacity: 0.7;
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }
}

.etc-hero__title {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin: 0 0 20px;
}

.etc-hero__title-neon {
    background: linear-gradient(135deg, #7c3aed, #ec4899, #7c3aed);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: etcNeonShift 4s linear infinite;
}

@keyframes etcNeonShift {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

.etc-hero__desc {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.8;
    margin: 0 0 32px;
    max-width: 480px;
}

.etc-hero__actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.etc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.etc-btn--primary {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.35);
}

.etc-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.5);
}

.etc-btn--lg {
    padding: 16px 36px;
    font-size: 1rem;
}

.etc-hero__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.etc-hero__phone:hover {
    color: #a78bfa;
}

/* ── Dashboard Cards ── */
.etc-hero__visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.etc-hero__dashboard {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 340px;
}

.etc-hero__mini-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.4s ease;
    animation: etcCardFloat 6s ease-in-out infinite;
}

.etc-hero__mini-card--revenue {
    animation-delay: 0s;
}

.etc-hero__mini-card--orders {
    animation-delay: 1s;
}

.etc-hero__mini-card--conv {
    animation-delay: 2s;
}

@keyframes etcCardFloat {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(8px);
    }
}

.etc-hero__mini-card:hover {
    border-color: rgba(124, 58, 237, 0.3);
    background: rgba(255, 255, 255, 0.06);
}

.etc-hero__mini-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.etc-hero__mini-label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.etc-hero__mini-value {
    font-size: 1.25rem;
    font-weight: 800;
}

.etc-hero__mini-badge {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

/* ── Platforms ── */
.etc-platforms {
    padding: 0;
    margin-top: -20px;
    position: relative;
    z-index: 2;
}

.etc-platforms__inner {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 20px;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    gap: 32px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.etc-platforms__label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    white-space: nowrap;
}

.etc-platforms__list {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    flex: 1;
}

.etc-platforms__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.3s;
}

.etc-platforms__item:hover {
    color: #a78bfa;
}

.etc-platforms__item i {
    font-size: 1rem;
}

/* ── Features ── */
.etc-features__header {
    text-align: center;
    margin-bottom: 48px;
}

.etc-features__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #a78bfa;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.etc-features__title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    color: var(--text-white);
    margin: 0 0 12px;
}

.etc-features__subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
}

.etc-features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.etc-features__card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(124, 58, 237, 0.08);
    border-radius: 20px;
    padding: 32px 26px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.etc-features__card:hover {
    border-color: rgba(124, 58, 237, 0.2);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.08);
}

.etc-features__card--highlight {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(236, 72, 153, 0.05));
    border-color: rgba(124, 58, 237, 0.2);
    grid-row: span 2;
}

.etc-features__card-glow {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.08), transparent 70%);
    pointer-events: none;
}

.etc-features__card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(236, 72, 153, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #a78bfa;
    margin-bottom: 16px;
}

.etc-features__card h3 {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 10px;
}

.etc-features__card p {
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

.etc-features__card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.etc-features__card-tags span {
    padding: 4px 12px;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #a78bfa;
    letter-spacing: 0.5px;
}

/* ── Process ── */
.etc-process__header {
    text-align: center;
    margin-bottom: 48px;
}

.etc-process__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #a78bfa;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.etc-process__title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    color: var(--text-white);
    margin: 0;
}

.etc-process__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.etc-process__step {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.08);
    border-radius: 20px;
    padding: 28px 22px;
    text-align: center;
    position: relative;
    transition: all 0.35s ease;
    overflow: hidden;
}

.etc-process__step:hover {
    border-color: rgba(124, 58, 237, 0.2);
    transform: translateY(-4px);
}

.etc-process__step-num {
    font-size: 2.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(236, 72, 153, 0.1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 12px;
}

.etc-process__step-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #a78bfa;
    margin: 0 auto 16px;
}

.etc-process__step h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 8px;
}

.etc-process__step p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.etc-process__step-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #7c3aed, #ec4899);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.etc-process__step:hover .etc-process__step-bar {
    transform: scaleX(1);
}

/* ── Showcase / Metrics ── */
.etc-showcase__layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}

.etc-showcase__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(236, 72, 153, 0.08);
    border: 1px solid rgba(236, 72, 153, 0.2);
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #ec4899;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.etc-showcase__title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    color: var(--text-white);
    line-height: 1.2;
    margin: 0 0 16px;
}

.etc-showcase__title span {
    background: linear-gradient(135deg, #ec4899, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.etc-showcase__desc {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.etc-showcase__metrics {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.etc-showcase__metric {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(124, 58, 237, 0.08);
    border-radius: 14px;
    padding: 20px 24px;
}

.etc-showcase__metric-bar {
    width: var(--bar-width, 80%);
    height: 6px;
    border-radius: 6px;
    background: var(--bar-color, #7c3aed);
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}

.etc-showcase__metric-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: etcBarShine 2s ease-in-out infinite;
}

@keyframes etcBarShine {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.etc-showcase__metric-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.etc-showcase__metric-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.etc-showcase__metric-value {
    font-size: 1.3rem;
    font-weight: 800;
}

/* ── CTA ── */
.etc-cta {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.etc-cta__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.etc-cta__ray {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}

.etc-cta__ray--1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.08), transparent 70%);
    top: -100px;
    right: -100px;
}

.etc-cta__ray--2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.06), transparent 70%);
    bottom: -80px;
    left: -60px;
}

.etc-cta__inner {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: 60px 40px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(236, 72, 153, 0.04));
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 28px;
    position: relative;
    z-index: 1;
}

.etc-cta__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    margin: 0 auto 24px;
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.3);
}

.etc-cta__inner h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--text-white);
    margin: 0 0 12px;
}

.etc-cta__inner p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0 0 28px;
}

.etc-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.etc-cta__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.etc-cta__phone:hover {
    color: #a78bfa;
}

/* ── Responsive ── */
@media (max-width: 992px) {
    .etc-hero__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .etc-hero__visual {
        display: none;
    }

    .etc-features__grid {
        grid-template-columns: 1fr 1fr;
    }

    .etc-features__card--highlight {
        grid-row: auto;
    }

    .etc-process__steps {
        grid-template-columns: 1fr 1fr;
    }

    .etc-showcase__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .etc-hero {
        padding: 130px 0 60px;
    }

    .etc-platforms__inner {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .etc-platforms__list {
        justify-content: center;
    }

    .etc-features__grid {
        grid-template-columns: 1fr;
    }

    .etc-process__steps {
        grid-template-columns: 1fr;
    }

    .etc-cta__inner {
        padding: 40px 24px;
    }
}

/* ========================================
   MARKA DANIŞMANLIĞI
   Prefix: mdk-
   Accent: Emerald (#059669) + Copper (#c2884d) + Deep Teal (#0d4f4f)
   ======================================== */

/* ── Hero ── */
.mdk-hero {
    padding: 160px 0 60px;
    background: linear-gradient(160deg, #020a0a 0%, #0d2626 30%, #0a3d3d 60%, #071a1a 100%);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.mdk-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mdk-hero__wave {
    position: absolute;
    width: 200%;
    height: 200px;
    border-radius: 50%;
    opacity: 0.04;
}

.mdk-hero__wave--1 {
    border: 1px solid #059669;
    top: 20%;
    left: -50%;
    animation: mdkWave 18s linear infinite;
}

.mdk-hero__wave--2 {
    border: 1px solid #c2884d;
    bottom: 10%;
    left: -50%;
    animation: mdkWave 22s linear infinite reverse;
}

@keyframes mdkWave {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(50%);
    }
}

.mdk-hero__particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #059669;
    animation: mdkParticle 6s ease-in-out infinite;
}

.mdk-hero__particle--1 {
    top: 20%;
    left: 15%;
    animation-delay: 0s;
}

.mdk-hero__particle--2 {
    top: 35%;
    right: 20%;
    animation-delay: 1s;
    background: #c2884d;
}

.mdk-hero__particle--3 {
    bottom: 30%;
    left: 25%;
    animation-delay: 2s;
}

.mdk-hero__particle--4 {
    top: 50%;
    right: 30%;
    animation-delay: 3s;
    background: #c2884d;
}

.mdk-hero__particle--5 {
    bottom: 20%;
    right: 15%;
    animation-delay: 4s;
}

@keyframes mdkParticle {

    0%,
    100% {
        opacity: 0.2;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(2.5);
    }
}

.mdk-hero__center {
    max-width: 700px;
    margin: 0 auto;
}

.mdk-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.1), rgba(194, 136, 77, 0.06));
    border: 1px solid rgba(5, 150, 105, 0.25);
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #34d399;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 24px;
}

.mdk-hero__badge-diamond {
    color: #c2884d;
    font-size: 0.65rem;
}

.mdk-hero__title {
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin: 0 0 20px;
}

.mdk-hero__title-accent {
    background: linear-gradient(135deg, #059669, #34d399, #c2884d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mdk-hero__desc {
    font-size: 1.08rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.8;
    margin: 0 auto 32px;
    max-width: 540px;
}

.mdk-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

.mdk-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.mdk-btn--emerald {
    background: linear-gradient(135deg, #059669, #047857);
    color: #fff;
    box-shadow: 0 4px 20px rgba(5, 150, 105, 0.3);
}

.mdk-btn--emerald:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(5, 150, 105, 0.45);
}

.mdk-btn--lg {
    padding: 16px 36px;
    font-size: 1rem;
}

.mdk-hero__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.mdk-hero__phone:hover {
    color: #34d399;
}

/* ── Brand Essence Ring ── */
.mdk-hero__ring {
    position: relative;
    width: 240px;
    height: 240px;
    margin: 0 auto;
}

.mdk-hero__ring-orbit {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(5, 150, 105, 0.15);
    border-radius: 50%;
    animation: mdkOrbitSpin 30s linear infinite;
}

@keyframes mdkOrbitSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.mdk-hero__ring-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    margin-left: -30px;
    margin-top: -14px;
    transform: rotate(calc(var(--i) * 72deg)) translateY(-120px) rotate(calc(var(--i) * -72deg));
    animation: mdkCounterSpin 30s linear infinite;
}

@keyframes mdkCounterSpin {
    from {
        transform: rotate(calc(var(--i) * 72deg)) translateY(-120px) rotate(calc(var(--i) * -72deg + 0deg));
    }

    to {
        transform: rotate(calc(var(--i) * 72deg)) translateY(-120px) rotate(calc(var(--i) * -72deg - 360deg));
    }
}

.mdk-hero__ring-item span {
    display: block;
    padding: 6px 14px;
    background: rgba(5, 150, 105, 0.1);
    border: 1px solid rgba(5, 150, 105, 0.2);
    border-radius: 100px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #34d399;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    backdrop-filter: blur(8px);
}

.mdk-hero__ring-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.15), rgba(194, 136, 77, 0.1));
    border: 1px solid rgba(5, 150, 105, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #34d399;
}

/* ── Service Areas ── */
.mdk-areas__header {
    text-align: center;
    margin-bottom: 48px;
}

.mdk-areas__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(5, 150, 105, 0.08);
    border: 1px solid rgba(5, 150, 105, 0.2);
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #34d399;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.mdk-areas__title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    color: var(--text-white);
    margin: 0 0 12px;
}

.mdk-areas__subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
}

.mdk-areas__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.mdk-areas__card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(5, 150, 105, 0.08);
    border-radius: 20px;
    padding: 32px 26px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.mdk-areas__card:hover {
    border-color: rgba(5, 150, 105, 0.2);
    transform: translateY(-4px);
}

.mdk-areas__card--featured {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.06), rgba(194, 136, 77, 0.04));
    border-color: rgba(5, 150, 105, 0.15);
}

.mdk-areas__card-num {
    font-size: 2.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.12), rgba(194, 136, 77, 0.08));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 12px;
}

.mdk-areas__card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.12), rgba(194, 136, 77, 0.06));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #34d399;
    margin-bottom: 16px;
}

.mdk-areas__card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 10px;
}

.mdk-areas__card p {
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

.mdk-areas__card-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #059669, #c2884d);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.mdk-areas__card:hover .mdk-areas__card-line {
    transform: scaleX(1);
}

/* ── Journey Track ── */
.mdk-journey__header {
    text-align: center;
    margin-bottom: 60px;
}

.mdk-journey__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(194, 136, 77, 0.08);
    border: 1px solid rgba(194, 136, 77, 0.2);
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #c2884d;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.mdk-journey__title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    color: var(--text-white);
    margin: 0;
}

.mdk-journey__track {
    display: flex;
    align-items: flex-start;
    gap: 0;
    position: relative;
}

.mdk-journey__rail {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #059669, #34d399, #c2884d, #059669);
}

.mdk-journey__stop {
    flex: 1;
    text-align: center;
    padding: 0 12px;
    position: relative;
}

.mdk-journey__stop-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #059669;
    margin: 12px auto 20px;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.2), 0 0 16px rgba(5, 150, 105, 0.3);
    transition: all 0.3s ease;
}

.mdk-journey__stop:hover .mdk-journey__stop-dot {
    transform: scale(1.3);
    box-shadow: 0 0 0 6px rgba(5, 150, 105, 0.3), 0 0 24px rgba(5, 150, 105, 0.4);
}

.mdk-journey__stop-phase {
    display: inline-block;
    padding: 4px 14px;
    background: rgba(5, 150, 105, 0.08);
    border: 1px solid rgba(5, 150, 105, 0.15);
    border-radius: 100px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #34d399;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.mdk-journey__stop-content h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 8px;
}

.mdk-journey__stop-content p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ── Impact Stats ── */
.mdk-impact__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: 48px;
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.05), rgba(194, 136, 77, 0.03));
    border: 1px solid rgba(5, 150, 105, 0.12);
    border-radius: 24px;
}

.mdk-impact__item {
    text-align: center;
}

.mdk-impact__num {
    font-size: 2.5rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: 6px;
}

.mdk-impact__num span {
    color: #34d399;
}

.mdk-impact__label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.mdk-impact__divider {
    width: 1px;
    height: 50px;
    background: rgba(5, 150, 105, 0.2);
}

/* ── CTA ── */
.mdk-cta {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.mdk-cta__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mdk-cta__glow--1 {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(5, 150, 105, 0.06), transparent 70%);
    top: -100px;
    right: -100px;
    filter: blur(60px);
}

.mdk-cta__glow--2 {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(194, 136, 77, 0.05), transparent 70%);
    bottom: -80px;
    left: -60px;
    filter: blur(60px);
}

.mdk-cta__inner {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: 60px 40px;
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.05), rgba(194, 136, 77, 0.03));
    border: 1px solid rgba(5, 150, 105, 0.12);
    border-radius: 28px;
    position: relative;
    z-index: 1;
}

.mdk-cta__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #059669, #047857);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    margin: 0 auto 24px;
    box-shadow: 0 8px 30px rgba(5, 150, 105, 0.3);
}

.mdk-cta__inner h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--text-white);
    margin: 0 0 12px;
}

.mdk-cta__inner p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0 0 28px;
}

.mdk-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.mdk-cta__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.mdk-cta__phone:hover {
    color: #34d399;
}

/* ── Responsive ── */
@media (max-width: 992px) {
    .mdk-areas__grid {
        grid-template-columns: 1fr 1fr;
    }

    .mdk-journey__track {
        flex-direction: column;
        align-items: stretch;
    }

    .mdk-journey__rail {
        width: 2px;
        height: 100%;
        top: 0;
        left: 20px;
        right: auto;
    }

    .mdk-journey__stop {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        text-align: left;
        padding: 0 0 24px;
    }

    .mdk-journey__stop-dot {
        margin: 12px 0 0;
        flex-shrink: 0;
    }
}

@media (max-width: 768px) {
    .mdk-hero {
        padding: 130px 0 50px;
    }

    .mdk-hero__ring {
        width: 200px;
        height: 200px;
    }

    .mdk-hero__ring-item {
        transform: rotate(calc(var(--i) * 72deg)) translateY(-100px) rotate(calc(var(--i) * -72deg));
    }

    @keyframes mdkCounterSpin {
        from {
            transform: rotate(calc(var(--i) * 72deg)) translateY(-100px) rotate(calc(var(--i) * -72deg + 0deg));
        }

        to {
            transform: rotate(calc(var(--i) * 72deg)) translateY(-100px) rotate(calc(var(--i) * -72deg - 360deg));
        }
    }

    .mdk-areas__grid {
        grid-template-columns: 1fr;
    }

    .mdk-impact__inner {
        flex-wrap: wrap;
        gap: 24px;
        padding: 32px 24px;
    }

    .mdk-impact__divider {
        display: none;
    }

    .mdk-impact__item {
        min-width: 100px;
    }

    .mdk-cta__inner {
        padding: 40px 24px;
    }
}

/* ========================================
   YURT DIŞI MAĞAZALAŞMA
   Prefix: ydm-
   Palette: Midnight (#020617) + Cyan (#06b6d4) + Aurora Green (#4ade80) + Aurora Violet (#a855f7)
   ★ BOUNDARY-BREAKING DESIGN ★
   ======================================== */

/* ── Hero — Full Viewport Aurora ── */
.ydm-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #020617;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.ydm-hero__aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ydm-hero__aurora-band {
    position: absolute;
    width: 150%;
    height: 40%;
    filter: blur(80px);
    opacity: 0.35;
}

.ydm-hero__aurora-band--1 {
    top: 5%;
    left: -25%;
    background: linear-gradient(90deg, transparent, #06b6d4, #4ade80, transparent);
    animation: ydmAurora 12s ease-in-out infinite;
}

.ydm-hero__aurora-band--2 {
    top: 20%;
    left: -10%;
    background: linear-gradient(90deg, transparent, #a855f7, #06b6d4, transparent);
    animation: ydmAurora 16s ease-in-out infinite 3s;
    opacity: 0.2;
}

.ydm-hero__aurora-band--3 {
    top: 35%;
    left: -30%;
    background: linear-gradient(90deg, transparent, #4ade80, #a855f7, transparent);
    animation: ydmAurora 20s ease-in-out infinite 6s;
    opacity: 0.15;
}

@keyframes ydmAurora {

    0%,
    100% {
        transform: translateX(-10%) skewY(-2deg);
    }

    33% {
        transform: translateX(5%) skewY(1deg);
    }

    66% {
        transform: translateX(-5%) skewY(-1deg);
    }
}

/* Floating Cities */
.ydm-hero__cities {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ydm-hero__city {
    position: absolute;
    animation: ydmCityFloat 5s ease-in-out infinite;
}

.ydm-hero__city:nth-child(odd) {
    animation-duration: 6s;
}

.ydm-hero__city:nth-child(3n) {
    animation-delay: 1.5s;
}

.ydm-hero__city:nth-child(2n) {
    animation-delay: 0.8s;
}

.ydm-hero__city span {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(6, 182, 212, 0.08);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(6, 182, 212, 0.7);
    text-transform: uppercase;
    letter-spacing: 2px;
    backdrop-filter: blur(8px);
}

@keyframes ydmCityFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

/* Hero Content */
.ydm-hero__content {
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

.ydm-hero__title {
    font-size: clamp(3.5rem, 10vw, 8rem);
    font-weight: 900;
    color: #fff;
    line-height: 0.95;
    margin: 20px 0;
    letter-spacing: -2px;
}

.ydm-hero__title-outline {
    -webkit-text-stroke: 2px rgba(6, 182, 212, 0.5);
    -webkit-text-fill-color: transparent;
    display: block;
}

.ydm-hero__tagline {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
    margin: 0 0 40px;
    letter-spacing: 1px;
}

.ydm-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.ydm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.ydm-btn--glow {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: #020617;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.3), 0 0 60px rgba(6, 182, 212, 0.1);
}

.ydm-btn--glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.5), 0 0 80px rgba(6, 182, 212, 0.2);
}

.ydm-btn--lg {
    padding: 16px 36px;
    font-size: 1rem;
}

.ydm-hero__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.ydm-hero__phone:hover {
    color: #06b6d4;
}

/* Scroll Indicator */
.ydm-hero__scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
}

.ydm-hero__scroll-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, #06b6d4, transparent);
    animation: ydmScrollPulse 2s ease-in-out infinite;
}

@keyframes ydmScrollPulse {

    0%,
    100% {
        opacity: 0.3;
        height: 40px;
    }

    50% {
        opacity: 0.8;
        height: 60px;
    }
}

/* ── Marquee Band ── */
.ydm-marquee {
    background: linear-gradient(90deg, #06b6d4, #4ade80, #a855f7, #06b6d4);
    padding: 14px 0;
    overflow: hidden;
    white-space: nowrap;
}

.ydm-marquee__track {
    display: inline-flex;
    gap: 32px;
    animation: ydmMarquee 20s linear infinite;
}

.ydm-marquee__track span {
    font-size: 0.85rem;
    font-weight: 800;
    color: #020617;
    letter-spacing: 3px;
    text-transform: uppercase;
}

@keyframes ydmMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ── Stats — Diagonal Section ── */
.ydm-stats {
    position: relative;
    padding: 80px 0;
    background: #020617;
}

.ydm-stats__skew {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(90deg, #06b6d4, #4ade80, #a855f7, #06b6d4);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
}

.ydm-stats__skew--bottom {
    top: auto;
    bottom: 0;
    clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
}

.ydm-stats__grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.ydm-stats__item {
    text-align: center;
}

.ydm-stats__num {
    font-size: 3.5rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: 6px;
}

.ydm-stats__num span {
    background: linear-gradient(135deg, #06b6d4, #4ade80);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ydm-stats__label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

/* ── Services — Hex Grid ── */
.ydm-services__header {
    text-align: center;
    margin-bottom: 48px;
}

.ydm-services__title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    color: var(--text-white);
    line-height: 1.1;
    margin: 0;
}

.ydm-services__title span {
    background: linear-gradient(135deg, #06b6d4, #4ade80);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ydm-services__hex-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ydm-services__hex {
    position: relative;
    background: rgba(6, 182, 212, 0.03);
    border: 1px solid rgba(6, 182, 212, 0.1);
    border-radius: 24px;
    padding: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    aspect-ratio: 1 / 1.1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ydm-services__hex:hover {
    border-color: rgba(6, 182, 212, 0.3);
    background: rgba(6, 182, 212, 0.06);
    transform: scale(1.05);
}

.ydm-services__hex-inner {
    text-align: center;
    padding: 28px 20px;
}

.ydm-services__hex-inner i {
    font-size: 1.8rem;
    color: #06b6d4;
    margin-bottom: 14px;
    display: block;
}

.ydm-services__hex-inner h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 8px;
}

.ydm-services__hex-inner p {
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ── Split Section — Neden Biz ── */
.ydm-split__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-start;
}

.ydm-split__big-text {
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 900;
    color: var(--text-white);
    line-height: 0.95;
    letter-spacing: -2px;
    margin: 0;
    position: sticky;
    top: 120px;
}

.ydm-split__big-text span {
    background: linear-gradient(135deg, #06b6d4, #4ade80);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ydm-split__question {
    background: linear-gradient(135deg, #a855f7, #ec4899) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 120%;
}

.ydm-split__right {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.ydm-split__reason {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.ydm-split__reason:hover {
    background: rgba(6, 182, 212, 0.04);
}

.ydm-split__reason-line {
    width: 3px;
    min-height: 50px;
    height: 100%;
    background: linear-gradient(180deg, #06b6d4, #4ade80);
    border-radius: 3px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.ydm-split__reason:hover .ydm-split__reason-line {
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.4);
}

.ydm-split__reason h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 6px;
}

.ydm-split__reason p {
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ── CTA ── */
.ydm-cta {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    text-align: center;
    background: #020617;
}

.ydm-cta__aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ydm-cta__aurora-band {
    position: absolute;
    width: 150%;
    height: 50%;
    top: 10%;
    left: -25%;
    filter: blur(100px);
    opacity: 0.15;
    background: linear-gradient(90deg, transparent, #06b6d4, #4ade80, #a855f7, transparent);
    animation: ydmAurora 15s ease-in-out infinite;
}

.ydm-cta__inner {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
}

.ydm-cta__title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin: 0 0 16px;
}

.ydm-cta__title span {
    background: linear-gradient(135deg, #06b6d4, #4ade80);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ydm-cta__inner p {
    color: rgba(255, 255, 255, 0.45);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 32px;
}

.ydm-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.ydm-cta__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.ydm-cta__phone:hover {
    color: #06b6d4;
}

/* ── Responsive ── */
@media (max-width: 992px) {
    .ydm-hero__title {
        font-size: clamp(2.5rem, 8vw, 5rem);
    }

    .ydm-hero__city:nth-child(n+5) {
        display: none;
    }

    .ydm-services__hex-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ydm-split__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ydm-split__big-text {
        position: static;
        font-size: clamp(2.5rem, 6vw, 4rem);
        text-align: center;
    }
}

@media (max-width: 768px) {
    .ydm-hero {
        min-height: auto;
        padding: 140px 0 80px;
    }

    .ydm-hero__cities {
        display: none;
    }

    .ydm-services__hex-grid {
        grid-template-columns: 1fr;
    }

    .ydm-services__hex {
        clip-path: none;
        aspect-ratio: auto;
        border-radius: 20px;
    }

    .ydm-stats__grid {
        gap: 32px;
    }

    .ydm-stats__num {
        font-size: 2.5rem;
    }

    .ydm-stats__skew {
        height: 30px;
    }
}

/* ========================================
   STRATEJİ DANIŞMANLIĞI
   Prefix: std-
   Palette: Deep Navy (#0c1222) + Royal Gold (#f59e0b) + Amber (#d97706) + Electric Blue (#3b82f6)
   ★ BOUNDARY-BREAKING DESIGN — Chess / Mastermind ★
   ======================================== */

/* ── Hero ── */
.std-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #0c1222;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.std-hero__grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(245, 158, 11, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 158, 11, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

.std-hero__beam {
    position: absolute;
    width: 2px;
    background: linear-gradient(180deg, transparent, rgba(245, 158, 11, 0.3), transparent);
    pointer-events: none;
}

.std-hero__beam--1 {
    height: 100%;
    left: 20%;
    animation: stdBeam 6s ease-in-out infinite;
}

.std-hero__beam--2 {
    height: 80%;
    right: 25%;
    animation: stdBeam 8s ease-in-out infinite 2s;
    background: linear-gradient(180deg, transparent, rgba(59, 130, 246, 0.2), transparent);
}

.std-hero__beam--3 {
    height: 60%;
    left: 60%;
    animation: stdBeam 10s ease-in-out infinite 4s;
}

@keyframes stdBeam {

    0%,
    100% {
        opacity: 0;
        transform: translateY(-100%);
    }

    50% {
        opacity: 1;
        transform: translateY(100%);
    }
}

/* Floating chess icons */
.std-hero__floats {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.std-hero__float {
    position: absolute;
    animation: stdFloat 5s ease-in-out infinite;
}

.std-hero__float:nth-child(odd) {
    animation-duration: 7s;
}

.std-hero__float:nth-child(3n) {
    animation-delay: 1.5s;
}

.std-hero__float:nth-child(2n) {
    animation-delay: 0.8s;
}

.std-hero__float i {
    font-size: 1.4rem;
    color: rgba(245, 158, 11, 0.15);
}

@keyframes stdFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(8deg);
    }
}

/* Hero Content */
.std-hero__content {
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

.std-hero__title {
    font-size: clamp(3.5rem, 10vw, 8rem);
    font-weight: 900;
    color: #fff;
    line-height: 0.95;
    margin: 20px 0;
    letter-spacing: -2px;
}

.std-hero__title-outline {
    -webkit-text-stroke: 2px rgba(245, 158, 11, 0.5);
    -webkit-text-fill-color: transparent;
    display: block;
}

.std-hero__tagline {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
    margin: 0 0 40px;
    letter-spacing: 1px;
}

.std-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.std-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.std-btn--gold {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #0c1222;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3), 0 0 60px rgba(245, 158, 11, 0.1);
}

.std-btn--gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.5), 0 0 80px rgba(245, 158, 11, 0.2);
}

.std-btn--lg {
    padding: 16px 36px;
    font-size: 1rem;
}

.std-hero__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.std-hero__phone:hover {
    color: #f59e0b;
}

/* Scroll Indicator */
.std-hero__scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
}

.std-hero__scroll-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, #f59e0b, transparent);
    animation: stdScrollPulse 2s ease-in-out infinite;
}

@keyframes stdScrollPulse {

    0%,
    100% {
        opacity: 0.3;
        height: 40px;
    }

    50% {
        opacity: 0.8;
        height: 60px;
    }
}

/* ── Marquee ── */
.std-marquee {
    background: linear-gradient(90deg, #f59e0b, #d97706, #f59e0b, #d97706);
    padding: 14px 0;
    overflow: hidden;
    white-space: nowrap;
}

.std-marquee__track {
    display: inline-flex;
    gap: 32px;
    animation: stdMarquee 18s linear infinite;
}

.std-marquee__track span {
    font-size: 0.85rem;
    font-weight: 800;
    color: #0c1222;
    letter-spacing: 3px;
    text-transform: uppercase;
}

@keyframes stdMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ── Stats ── */
.std-stats {
    position: relative;
    padding: 80px 0;
    background: #0c1222;
}

.std-stats__skew {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(90deg, #f59e0b, #d97706, #f59e0b);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
}

.std-stats__skew--bottom {
    top: auto;
    bottom: 0;
    clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
}

.std-stats__grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.std-stats__item {
    text-align: center;
}

.std-stats__num {
    font-size: 3.5rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: 6px;
}

.std-stats__num span {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.std-stats__label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

/* ── Hex Services ── */
.std-services__header {
    text-align: center;
    margin-bottom: 48px;
}

.std-services__title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    color: var(--text-white);
    line-height: 1.1;
    margin: 0;
}

.std-services__title span {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.std-services__hex-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.std-services__hex {
    position: relative;
    background: rgba(245, 158, 11, 0.03);
    border: 1px solid rgba(245, 158, 11, 0.1);
    border-radius: 24px;
    padding: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    aspect-ratio: 1 / 1.1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.std-services__hex:hover {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.06);
    transform: scale(1.05);
}

.std-services__hex-inner {
    text-align: center;
    padding: 28px 20px;
}

.std-services__hex-inner i {
    font-size: 1.8rem;
    color: #f59e0b;
    margin-bottom: 14px;
    display: block;
}

.std-services__hex-inner h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 8px;
}

.std-services__hex-inner p {
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ── Split Section ── */
.std-split__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-start;
}

.std-split__big-text {
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 900;
    color: var(--text-white);
    line-height: 0.95;
    letter-spacing: -2px;
    margin: 0;
    position: sticky;
    top: 120px;
}

.std-split__big-text span {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.std-split__question {
    background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 120%;
}

.std-split__right {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.std-split__reason {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.std-split__reason:hover {
    background: rgba(245, 158, 11, 0.04);
}

.std-split__reason-line {
    width: 3px;
    min-height: 50px;
    height: 100%;
    background: linear-gradient(180deg, #f59e0b, #d97706);
    border-radius: 3px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.std-split__reason:hover .std-split__reason-line {
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}

.std-split__reason h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 6px;
}

.std-split__reason p {
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ── CTA ── */
.std-cta {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    text-align: center;
    background: #0c1222;
}

.std-cta__beams {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.std-cta__beam {
    position: absolute;
    width: 150%;
    height: 50%;
    top: 10%;
    left: -25%;
    filter: blur(100px);
    opacity: 0.12;
    background: linear-gradient(90deg, transparent, #f59e0b, #d97706, #3b82f6, transparent);
    animation: stdCTABeam 15s ease-in-out infinite;
}

@keyframes stdCTABeam {

    0%,
    100% {
        transform: translateX(-10%) skewY(-2deg);
    }

    33% {
        transform: translateX(5%) skewY(1deg);
    }

    66% {
        transform: translateX(-5%) skewY(-1deg);
    }
}

.std-cta__inner {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
}

.std-cta__title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin: 0 0 16px;
}

.std-cta__title span {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.std-cta__inner p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 32px;
}

.std-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.std-cta__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.std-cta__phone:hover {
    color: #f59e0b;
}

/* ── Responsive ── */
@media (max-width: 992px) {
    .std-hero__title {
        font-size: clamp(2.5rem, 8vw, 5rem);
    }

    .std-hero__float:nth-child(n+5) {
        display: none;
    }

    .std-services__hex-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .std-split__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .std-split__big-text {
        position: static;
        font-size: clamp(2.5rem, 6vw, 4rem);
        text-align: center;
    }
}

@media (max-width: 768px) {
    .std-hero {
        min-height: auto;
        padding: 140px 0 80px;
    }

    .std-hero__floats {
        display: none;
    }

    .std-services__hex-grid {
        grid-template-columns: 1fr;
    }

    .std-services__hex {
        clip-path: none;
        aspect-ratio: auto;
        border-radius: 20px;
    }

    .std-stats__grid {
        gap: 32px;
    }

    .std-stats__num {
        font-size: 2.5rem;
    }

    .std-stats__skew {
        height: 30px;
    }
}

/* ========================================
   YAZILIM / PROGRAMLAMA (v2 — BOUNDARY-BREAKING)
   Prefix: yzl-
   Palette: Matrix Green (#00ff41) + Deep Black (#0a0a0a) + Electric Blue (#00d4ff) + Purple (#1a1a2e)
   ★ HACKER / TERMINAL / MATRIX THEME ★
   ======================================== */

/* ── Hero ── */
.yzl-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #0a0a0a;
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Code rain background */
.yzl-hero__rain {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(0, 255, 65, 0.06) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
    animation: yzlRain 3s linear infinite;
}

@keyframes yzlRain {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 30px;
    }
}

/* CRT scanline overlay */
.yzl-hero__scanline {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 255, 65, 0.015) 2px,
            rgba(0, 255, 65, 0.015) 4px);
    pointer-events: none;
    z-index: 1;
}

/* Floating code symbols */
.yzl-hero__symbols {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.yzl-hero__symbol {
    position: absolute;
    animation: yzlSymbolFloat 5s ease-in-out infinite;
}

.yzl-hero__symbol:nth-child(odd) {
    animation-duration: 7s;
}

.yzl-hero__symbol:nth-child(3n) {
    animation-delay: 1.5s;
}

.yzl-hero__symbol:nth-child(2n) {
    animation-delay: 0.8s;
}

.yzl-hero__symbol span {
    display: inline-block;
    padding: 8px 16px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(0, 255, 65, 0.2);
    border: 1px solid rgba(0, 255, 65, 0.08);
    border-radius: 8px;
    backdrop-filter: blur(4px);
}

@keyframes yzlSymbolFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(5deg);
    }
}

/* Hero Content */
.yzl-hero__content {
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

/* Terminal Prompt */
.yzl-hero__terminal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(0, 255, 65, 0.05);
    border: 1px solid rgba(0, 255, 65, 0.15);
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    margin-bottom: 28px;
}

.yzl-hero__prompt {
    color: #00ff41;
    font-weight: 700;
}

.yzl-hero__cmd {
    color: #00d4ff;
    font-weight: 700;
}

.yzl-hero__flag {
    color: #fbbf24;
}

.yzl-hero__arg {
    color: rgba(255, 255, 255, 0.6);
}

.yzl-hero__cursor {
    width: 10px;
    height: 18px;
    background: #00ff41;
    animation: yzlBlink 1s step-end infinite;
}

@keyframes yzlBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.yzl-hero__title {
    font-size: clamp(3.5rem, 10vw, 8rem);
    font-weight: 900;
    color: #fff;
    line-height: 0.95;
    margin: 0 0 16px;
    letter-spacing: -2px;
}

.yzl-hero__title-outline {
    -webkit-text-stroke: 2px rgba(0, 255, 65, 0.5);
    -webkit-text-fill-color: transparent;
    display: block;
}

.yzl-hero__tagline {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
    margin: 0 0 40px;
    letter-spacing: 1px;
}

.yzl-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.yzl-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.yzl-btn--neon {
    background: linear-gradient(135deg, #00ff41, #00cc33);
    color: #0a0a0a;
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.3), 0 0 60px rgba(0, 255, 65, 0.1);
}

.yzl-btn--neon:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 255, 65, 0.5), 0 0 80px rgba(0, 255, 65, 0.2);
}

.yzl-btn--lg {
    padding: 16px 36px;
    font-size: 1rem;
}

.yzl-hero__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.yzl-hero__phone:hover {
    color: #00ff41;
}

/* Scroll Indicator */
.yzl-hero__scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.yzl-hero__scroll-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, #00ff41, transparent);
    animation: yzlScrollPulse 2s ease-in-out infinite;
}

@keyframes yzlScrollPulse {

    0%,
    100% {
        opacity: 0.3;
        height: 40px;
    }

    50% {
        opacity: 0.8;
        height: 60px;
    }
}

/* ── Marquee ── */
.yzl-marquee {
    background: linear-gradient(90deg, #00ff41, #00cc33, #00d4ff, #00ff41);
    padding: 14px 0;
    overflow: hidden;
    white-space: nowrap;
}

.yzl-marquee__track {
    display: inline-flex;
    gap: 32px;
    animation: yzlMarquee 16s linear infinite;
}

.yzl-marquee__track span {
    font-size: 0.85rem;
    font-weight: 800;
    color: #0a0a0a;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: 'Courier New', monospace;
}

@keyframes yzlMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ── Stats ── */
.yzl-stats {
    position: relative;
    padding: 80px 0;
    background: #0a0a0a;
}

.yzl-stats__skew {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(90deg, #00ff41, #00cc33, #00d4ff, #00ff41);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
}

.yzl-stats__skew--bottom {
    top: auto;
    bottom: 0;
    clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
}

.yzl-stats__grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.yzl-stats__item {
    text-align: center;
}

.yzl-stats__num {
    font-size: 3.5rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: 6px;
    font-family: 'Courier New', monospace;
}

.yzl-stats__num span {
    color: #00ff41;
}

.yzl-stats__label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

/* ── Hex Services ── */
.yzl-services__header {
    text-align: center;
    margin-bottom: 48px;
}

.yzl-services__title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    color: var(--text-white);
    line-height: 1.1;
    margin: 0;
}

.yzl-services__title span {
    color: #00ff41;
}

.yzl-services__hex-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.yzl-services__hex {
    position: relative;
    background: rgba(0, 255, 65, 0.02);
    border: 1px solid rgba(0, 255, 65, 0.08);
    border-radius: 24px;
    padding: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    aspect-ratio: 1 / 1.1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yzl-services__hex:hover {
    border-color: rgba(0, 255, 65, 0.25);
    background: rgba(0, 255, 65, 0.05);
    transform: scale(1.05);
}

.yzl-services__hex-inner {
    text-align: center;
    padding: 28px 20px;
}

.yzl-services__hex-inner i {
    font-size: 1.8rem;
    color: #00ff41;
    margin-bottom: 14px;
    display: block;
}

.yzl-services__hex-inner h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 8px;
}

.yzl-services__hex-inner p {
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ── Split Section ── */
.yzl-split__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-start;
}

.yzl-split__big-text {
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 900;
    color: var(--text-white);
    line-height: 0.95;
    letter-spacing: -2px;
    margin: 0;
    position: sticky;
    top: 120px;
}

.yzl-split__big-text span {
    color: #00ff41;
}

.yzl-split__question {
    background: linear-gradient(135deg, #00d4ff, #00a3cc) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 120%;
}

.yzl-split__right {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.yzl-split__reason {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.yzl-split__reason:hover {
    background: rgba(0, 255, 65, 0.03);
}

.yzl-split__reason-line {
    width: 3px;
    min-height: 50px;
    height: 100%;
    background: linear-gradient(180deg, #00ff41, #00cc33);
    border-radius: 3px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.yzl-split__reason:hover .yzl-split__reason-line {
    box-shadow: 0 0 12px rgba(0, 255, 65, 0.4);
}

.yzl-split__reason h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 6px;
}

.yzl-split__reason p {
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ── CTA ── */
.yzl-cta {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    text-align: center;
    background: #0a0a0a;
}

.yzl-cta__matrix {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.yzl-cta__glow {
    position: absolute;
    width: 150%;
    height: 50%;
    top: 10%;
    left: -25%;
    filter: blur(100px);
    opacity: 0.1;
    background: linear-gradient(90deg, transparent, #00ff41, #00d4ff, transparent);
    animation: yzlCTAGlow 15s ease-in-out infinite;
}

@keyframes yzlCTAGlow {

    0%,
    100% {
        transform: translateX(-10%) skewY(-2deg);
    }

    33% {
        transform: translateX(5%) skewY(1deg);
    }

    66% {
        transform: translateX(-5%) skewY(-1deg);
    }
}

.yzl-cta__inner {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
}

.yzl-cta__title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin: 0 0 16px;
}

.yzl-cta__title span {
    color: #00ff41;
}

.yzl-cta__inner p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 32px;
}

.yzl-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.yzl-cta__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.yzl-cta__phone:hover {
    color: #00ff41;
}

/* ── Responsive ── */
@media (max-width: 992px) {
    .yzl-hero__title {
        font-size: clamp(2.5rem, 8vw, 5rem);
    }

    .yzl-hero__symbol:nth-child(n+5) {
        display: none;
    }

    .yzl-services__hex-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .yzl-split__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .yzl-split__big-text {
        position: static;
        font-size: clamp(2.5rem, 6vw, 4rem);
        text-align: center;
    }
}

@media (max-width: 768px) {
    .yzl-hero {
        min-height: auto;
        padding: 140px 0 80px;
    }

    .yzl-hero__symbols {
        display: none;
    }

    .yzl-hero__terminal {
        font-size: 0.72rem;
        padding: 8px 14px;
    }

    .yzl-services__hex-grid {
        grid-template-columns: 1fr;
    }

    .yzl-services__hex {
        clip-path: none;
        aspect-ratio: auto;
        border-radius: 20px;
    }

    .yzl-stats__grid {
        gap: 32px;
    }

    .yzl-stats__num {
        font-size: 2.5rem;
    }

    .yzl-stats__skew {
        height: 30px;
    }
}

/* ========================================
   E-TİCARET DANIŞMANLIĞI (v2 — BOUNDARY-BREAKING)
   Prefix: etc-
   Palette: Electric Violet (#7c3aed) + Hot Pink (#ec4899) + Neon Yellow (#facc15) + Deep (#0f0720)
   ★ DIGITAL SHOPPING UNIVERSE ★
   ======================================== */

/* ── Hero ── */
.etc-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #0f0720;
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Animated mesh gradient */
.etc-hero__mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(124, 58, 237, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(236, 72, 153, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(250, 204, 21, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* Floating neon orbs */
.etc-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.etc-hero__orb--1 {
    width: 300px;
    height: 300px;
    background: rgba(124, 58, 237, 0.2);
    top: 10%;
    left: 5%;
    animation: etcOrb 8s ease-in-out infinite;
}

.etc-hero__orb--2 {
    width: 250px;
    height: 250px;
    background: rgba(236, 72, 153, 0.15);
    top: 30%;
    right: 5%;
    animation: etcOrb 10s ease-in-out infinite 3s;
}

.etc-hero__orb--3 {
    width: 200px;
    height: 200px;
    background: rgba(250, 204, 21, 0.1);
    bottom: 15%;
    left: 30%;
    animation: etcOrb 12s ease-in-out infinite 6s;
}

@keyframes etcOrb {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -20px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 15px) scale(0.9);
    }
}

/* Floating commerce symbols */
.etc-hero__floats {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.etc-hero__float {
    position: absolute;
    animation: etcFloat 5s ease-in-out infinite;
}

.etc-hero__float:nth-child(odd) {
    animation-duration: 7s;
}

.etc-hero__float:nth-child(3n) {
    animation-delay: 1.5s;
}

.etc-hero__float:nth-child(2n) {
    animation-delay: 0.8s;
}

.etc-hero__float span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 14px;
    backdrop-filter: blur(8px);
}

.etc-hero__float span i {
    font-size: 1rem;
    color: rgba(124, 58, 237, 0.5);
}

@keyframes etcFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(5deg);
    }
}

/* Hero Content */
.etc-hero__content {
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

/* Live badge */
.etc-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1px;
    margin-bottom: 28px;
}

.etc-hero__badge-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: etcPulse 2s ease-in-out infinite;
}

@keyframes etcPulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }

    50% {
        opacity: 0.7;
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }
}

.etc-hero__title {
    font-size: clamp(3.5rem, 10vw, 8rem);
    font-weight: 900;
    color: #fff;
    line-height: 0.95;
    margin: 0 0 16px;
    letter-spacing: -2px;
}

.etc-hero__title-outline {
    -webkit-text-stroke: 2px rgba(124, 58, 237, 0.6);
    -webkit-text-fill-color: transparent;
    display: block;
}

.etc-hero__tagline {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
    margin: 0 0 40px;
    letter-spacing: 1px;
}

.etc-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.etc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.etc-btn--glow {
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    color: #fff;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.3), 0 0 60px rgba(236, 72, 153, 0.1);
}

.etc-btn--glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.5), 0 0 80px rgba(236, 72, 153, 0.2);
}

.etc-btn--lg {
    padding: 16px 36px;
    font-size: 1rem;
}

.etc-hero__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.etc-hero__phone:hover {
    color: #7c3aed;
}

/* Scroll Indicator */
.etc-hero__scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.etc-hero__scroll-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, #7c3aed, transparent);
    animation: etcScrollPulse 2s ease-in-out infinite;
}

@keyframes etcScrollPulse {

    0%,
    100% {
        opacity: 0.3;
        height: 40px;
    }

    50% {
        opacity: 0.8;
        height: 60px;
    }
}

/* ── Marquee ── */
.etc-marquee {
    background: linear-gradient(90deg, #7c3aed, #ec4899, #facc15, #7c3aed);
    padding: 14px 0;
    overflow: hidden;
    white-space: nowrap;
}

.etc-marquee__track {
    display: inline-flex;
    gap: 32px;
    animation: etcMarquee 18s linear infinite;
}

.etc-marquee__track span {
    font-size: 0.85rem;
    font-weight: 800;
    color: #0f0720;
    letter-spacing: 3px;
    text-transform: uppercase;
}

@keyframes etcMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ── Stats ── */
.etc-stats {
    position: relative;
    padding: 80px 0;
    background: #0f0720;
}

.etc-stats__skew {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(90deg, #7c3aed, #ec4899, #facc15, #7c3aed);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
}

.etc-stats__skew--bottom {
    top: auto;
    bottom: 0;
    clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
}

.etc-stats__grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.etc-stats__item {
    text-align: center;
}

.etc-stats__num {
    font-size: 3.5rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: 6px;
}

.etc-stats__num span {
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.etc-stats__label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

/* ── Hex Services ── */
.etc-services__header {
    text-align: center;
    margin-bottom: 48px;
}

.etc-services__title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    color: var(--text-white);
    line-height: 1.1;
    margin: 0;
}

.etc-services__title span {
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.etc-services__hex-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.etc-services__hex {
    position: relative;
    background: rgba(124, 58, 237, 0.03);
    border: 1px solid rgba(124, 58, 237, 0.1);
    border-radius: 24px;
    padding: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    aspect-ratio: 1 / 1.1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.etc-services__hex:hover {
    border-color: rgba(124, 58, 237, 0.3);
    background: rgba(124, 58, 237, 0.06);
    transform: scale(1.05);
}

.etc-services__hex-inner {
    text-align: center;
    padding: 28px 20px;
}

.etc-services__hex-inner i {
    font-size: 1.8rem;
    color: #7c3aed;
    margin-bottom: 14px;
    display: block;
}

.etc-services__hex-inner h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 8px;
}

.etc-services__hex-inner p {
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ── Split Section ── */
.etc-split__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-start;
}

.etc-split__big-text {
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 900;
    color: var(--text-white);
    line-height: 0.95;
    letter-spacing: -2px;
    margin: 0;
    position: sticky;
    top: 120px;
}

.etc-split__big-text span {
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.etc-split__question {
    background: linear-gradient(135deg, #facc15, #f59e0b) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 120%;
}

.etc-split__right {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.etc-split__reason {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.etc-split__reason:hover {
    background: rgba(124, 58, 237, 0.04);
}

.etc-split__reason-line {
    width: 3px;
    min-height: 50px;
    height: 100%;
    background: linear-gradient(180deg, #7c3aed, #ec4899);
    border-radius: 3px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.etc-split__reason:hover .etc-split__reason-line {
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.4);
}

.etc-split__reason h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 6px;
}

.etc-split__reason p {
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ── CTA ── */
.etc-cta {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    text-align: center;
    background: #0f0720;
}

.etc-cta__glow-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.etc-cta__glow {
    position: absolute;
    width: 150%;
    height: 50%;
    top: 10%;
    left: -25%;
    filter: blur(100px);
    opacity: 0.12;
    background: linear-gradient(90deg, transparent, #7c3aed, #ec4899, #facc15, transparent);
    animation: etcCTAGlow 15s ease-in-out infinite;
}

@keyframes etcCTAGlow {

    0%,
    100% {
        transform: translateX(-10%) skewY(-2deg);
    }

    33% {
        transform: translateX(5%) skewY(1deg);
    }

    66% {
        transform: translateX(-5%) skewY(-1deg);
    }
}

.etc-cta__inner {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
}

.etc-cta__title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin: 0 0 16px;
}

.etc-cta__title span {
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.etc-cta__inner p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 32px;
}

.etc-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.etc-cta__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.etc-cta__phone:hover {
    color: #7c3aed;
}

/* ── Responsive ── */
@media (max-width: 992px) {
    .etc-hero__title {
        font-size: clamp(2.5rem, 8vw, 5rem);
    }

    .etc-hero__float:nth-child(n+5) {
        display: none;
    }

    .etc-hero__orb {
        width: 150px !important;
        height: 150px !important;
    }

    .etc-services__hex-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .etc-split__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .etc-split__big-text {
        position: static;
        font-size: clamp(2.5rem, 6vw, 4rem);
        text-align: center;
    }
}

@media (max-width: 768px) {
    .etc-hero {
        min-height: auto;
        padding: 140px 0 80px;
    }

    .etc-hero__floats {
        display: none;
    }

    .etc-services__hex-grid {
        grid-template-columns: 1fr;
    }

    .etc-services__hex {
        clip-path: none;
        aspect-ratio: auto;
        border-radius: 20px;
    }

    .etc-stats__grid {
        gap: 32px;
    }

    .etc-stats__num {
        font-size: 2.5rem;
    }

    .etc-stats__skew {
        height: 30px;
    }
}

/* ========================================
   MARKA TESCİLİ
   Prefix: mts-
   Palette: Electric Red (#ef4444) + Pure Gold (#ffd700) + Obsidian (#0a0a0f)
   ★★★ THE WILDEST — MAXIMUM ÇILGINLIK ★★★
   ======================================== */

/* ── Hero ── */
.mts-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #0a0a0f;
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Background grid */
.mts-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(239, 68, 68, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(239, 68, 68, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
}

/* Pulsing radar ring */
.mts-hero__pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 1px solid rgba(239, 68, 68, 0.08);
    animation: mtsPulseRing 4s ease-out infinite;
    pointer-events: none;
}

.mts-hero__pulse::before {
    content: '';
    position: absolute;
    inset: -60px;
    border-radius: 50%;
    border: 1px solid rgba(239, 68, 68, 0.05);
    animation: mtsPulseRing 4s ease-out infinite 1s;
}

.mts-hero__pulse::after {
    content: '';
    position: absolute;
    inset: -120px;
    border-radius: 50%;
    border: 1px solid rgba(239, 68, 68, 0.03);
    animation: mtsPulseRing 4s ease-out infinite 2s;
}

@keyframes mtsPulseRing {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.6;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* Fire orbs */
.mts-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.mts-hero__orb--1 {
    width: 350px;
    height: 350px;
    background: rgba(239, 68, 68, 0.15);
    top: 5%;
    right: 5%;
    animation: mtsOrb 8s ease-in-out infinite;
}

.mts-hero__orb--2 {
    width: 250px;
    height: 250px;
    background: rgba(255, 215, 0, 0.08);
    bottom: 15%;
    left: 10%;
    animation: mtsOrb 10s ease-in-out infinite 3s;
}

@keyframes mtsOrb {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -20px) scale(1.15);
    }

    66% {
        transform: translate(-20px, 15px) scale(0.85);
    }
}

/* Floating trademark symbols */
.mts-hero__floats {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mts-hero__float {
    position: absolute;
    animation: mtsFloat 5s ease-in-out infinite;
}

.mts-hero__float:nth-child(odd) {
    animation-duration: 7s;
}

.mts-hero__float:nth-child(3n) {
    animation-delay: 1.5s;
}

.mts-hero__float:nth-child(2n) {
    animation-delay: 0.8s;
}

.mts-hero__float:nth-child(4n) {
    animation-delay: 2.2s;
}

.mts-hero__float span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
    font-weight: 700;
    color: rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.04);
    border: 1px solid rgba(239, 68, 68, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(4px);
}

@keyframes mtsFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-18px) rotate(8deg);
    }
}

/* Rotating seal */
.mts-hero__seal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 280px;
    pointer-events: none;
    opacity: 0.12;
}

.mts-hero__seal-ring {
    width: 100%;
    height: 100%;
    animation: mtsSealRotate 25s linear infinite;
    position: relative;
}

.mts-hero__seal-ring span {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 0.6rem;
    font-weight: 800;
    color: #ef4444;
    letter-spacing: 4px;
    text-transform: uppercase;
    /* Circular text via individual character transforms done in CSS */
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.mts-hero__seal-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: rgba(239, 68, 68, 0.3);
}

@keyframes mtsSealRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Hero Content */
.mts-hero__content {
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

/* Glitch text effect */
.mts-hero__title {
    font-size: clamp(3.5rem, 10vw, 8rem);
    font-weight: 900;
    color: #fff;
    line-height: 0.95;
    margin: 20px 0 16px;
    letter-spacing: -2px;
}

.mts-hero__title-glitch {
    position: relative;
    display: inline-block;
}

.mts-hero__title-glitch::before,
.mts-hero__title-glitch::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.mts-hero__title-glitch::before {
    color: #ef4444;
    animation: mtsGlitch1 3s infinite;
    clip-path: inset(0 0 60% 0);
}

.mts-hero__title-glitch::after {
    color: #3b82f6;
    animation: mtsGlitch2 3s infinite;
    clip-path: inset(40% 0 0 0);
}

@keyframes mtsGlitch1 {

    0%,
    90%,
    100% {
        transform: translate(0);
    }

    91% {
        transform: translate(-3px, 2px);
    }

    93% {
        transform: translate(3px, -1px);
    }

    95% {
        transform: translate(-2px, 1px);
    }
}

@keyframes mtsGlitch2 {

    0%,
    88%,
    100% {
        transform: translate(0);
    }

    89% {
        transform: translate(3px, -2px);
    }

    92% {
        transform: translate(-3px, 1px);
    }

    94% {
        transform: translate(2px, -1px);
    }
}

.mts-hero__title-outline {
    -webkit-text-stroke: 2px rgba(239, 68, 68, 0.6);
    -webkit-text-fill-color: transparent;
    display: block;
}

.mts-hero__tagline {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
    margin: 0 0 40px;
    letter-spacing: 1px;
}

.mts-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.mts-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.mts-btn--fire {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3), 0 0 60px rgba(239, 68, 68, 0.1);
}

.mts-btn--fire:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.5), 0 0 80px rgba(239, 68, 68, 0.2);
}

.mts-btn--lg {
    padding: 16px 36px;
    font-size: 1rem;
}

.mts-hero__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.mts-hero__phone:hover {
    color: #ef4444;
}

/* Scroll Indicator */
.mts-hero__scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.mts-hero__scroll-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, #ef4444, transparent);
    animation: mtsScrollPulse 2s ease-in-out infinite;
}

@keyframes mtsScrollPulse {

    0%,
    100% {
        opacity: 0.3;
        height: 40px;
    }

    50% {
        opacity: 0.8;
        height: 60px;
    }
}

/* ── Double Marquee ── */
.mts-marquee {
    overflow: hidden;
    white-space: nowrap;
}

.mts-marquee--top {
    background: linear-gradient(90deg, #ef4444, #dc2626, #ffd700, #ef4444);
    padding: 12px 0;
}

.mts-marquee--bottom {
    background: linear-gradient(90deg, #ffd700, #f59e0b, #ef4444, #ffd700);
    padding: 10px 0;
}

.mts-marquee__track {
    display: inline-flex;
    gap: 28px;
    animation: mtsMarquee 18s linear infinite;
}

.mts-marquee__track--reverse {
    animation: mtsMarqueeReverse 22s linear infinite;
}

.mts-marquee__track span {
    font-size: 0.82rem;
    font-weight: 800;
    color: #0a0a0f;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.mts-marquee--bottom .mts-marquee__track span {
    font-size: 0.72rem;
    letter-spacing: 2px;
}

@keyframes mtsMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes mtsMarqueeReverse {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

/* ── Stats ── */
.mts-stats {
    position: relative;
    padding: 80px 0;
    background: #0a0a0f;
}

.mts-stats__skew {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(90deg, #ef4444, #ffd700, #ef4444);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
}

.mts-stats__skew--bottom {
    top: auto;
    bottom: 0;
    clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
}

.mts-stats__grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.mts-stats__item {
    text-align: center;
}

.mts-stats__num {
    font-size: 3.5rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: 6px;
}

.mts-stats__num span {
    background: linear-gradient(135deg, #ef4444, #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mts-stats__label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

/* ── Hex Services ── */
.mts-services__header {
    text-align: center;
    margin-bottom: 48px;
}

.mts-services__title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    color: var(--text-white);
    line-height: 1.1;
    margin: 0;
}

.mts-services__title span {
    background: linear-gradient(135deg, #ef4444, #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mts-services__hex-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.mts-services__hex {
    position: relative;
    background: rgba(239, 68, 68, 0.02);
    border: 1px solid rgba(239, 68, 68, 0.08);
    border-radius: 24px;
    padding: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    aspect-ratio: 1 / 1.1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mts-services__hex:hover {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.05);
    transform: scale(1.05);
}

.mts-services__hex-inner {
    text-align: center;
    padding: 28px 20px;
}

.mts-services__hex-inner i {
    font-size: 1.8rem;
    color: #ef4444;
    margin-bottom: 14px;
    display: block;
}

.mts-services__hex-inner h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 8px;
}

.mts-services__hex-inner p {
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ── Split Section ── */
.mts-split__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-start;
}

.mts-split__big-text {
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 900;
    color: var(--text-white);
    line-height: 0.95;
    letter-spacing: -2px;
    margin: 0;
    position: sticky;
    top: 120px;
}

.mts-split__big-text span {
    background: linear-gradient(135deg, #ef4444, #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mts-split__question {
    background: linear-gradient(135deg, #ffd700, #f59e0b) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 140%;
}

.mts-split__right {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.mts-split__reason {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.mts-split__reason:hover {
    background: rgba(239, 68, 68, 0.04);
}

.mts-split__reason-line {
    width: 3px;
    min-height: 50px;
    height: 100%;
    background: linear-gradient(180deg, #ef4444, #ffd700);
    border-radius: 3px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.mts-split__reason:hover .mts-split__reason-line {
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.5);
}

.mts-split__reason h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 6px;
}

.mts-split__reason p {
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ── CTA ── */
.mts-cta {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    text-align: center;
    background: #0a0a0f;
}

.mts-cta__fire {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mts-cta__glow {
    position: absolute;
    width: 150%;
    height: 50%;
    top: 10%;
    left: -25%;
    filter: blur(100px);
    opacity: 0.12;
    background: linear-gradient(90deg, transparent, #ef4444, #ffd700, transparent);
    animation: mtsCTAGlow 12s ease-in-out infinite;
}

.mts-cta__glow--2 {
    top: 30%;
    animation: mtsCTAGlow 16s ease-in-out infinite 4s;
    opacity: 0.08;
    background: linear-gradient(90deg, transparent, #ffd700, #ef4444, transparent);
}

@keyframes mtsCTAGlow {

    0%,
    100% {
        transform: translateX(-10%) skewY(-2deg);
    }

    33% {
        transform: translateX(5%) skewY(1deg);
    }

    66% {
        transform: translateX(-5%) skewY(-1deg);
    }
}

.mts-cta__inner {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
}

.mts-cta__title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin: 0 0 16px;
}

.mts-cta__title span {
    background: linear-gradient(135deg, #ef4444, #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mts-cta__inner p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 32px;
}

.mts-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.mts-cta__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.mts-cta__phone:hover {
    color: #ef4444;
}

/* ── Responsive ── */
@media (max-width: 992px) {
    .mts-hero__title {
        font-size: clamp(2.5rem, 8vw, 5rem);
    }

    .mts-hero__float:nth-child(n+5) {
        display: none;
    }

    .mts-hero__seal {
        width: 200px;
        height: 200px;
    }

    .mts-hero__pulse {
        width: 250px;
        height: 250px;
    }

    .mts-services__hex-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mts-split__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .mts-split__big-text {
        position: static;
        font-size: clamp(2.5rem, 6vw, 4rem);
        text-align: center;
    }
}

@media (max-width: 768px) {
    .mts-hero {
        min-height: auto;
        padding: 140px 0 80px;
    }

    .mts-hero__floats,
    .mts-hero__seal,
    .mts-hero__pulse {
        display: none;
    }

    .mts-services__hex-grid {
        grid-template-columns: 1fr;
    }

    .mts-services__hex {
        clip-path: none;
        aspect-ratio: auto;
        border-radius: 20px;
    }

    .mts-stats__grid {
        gap: 32px;
    }

    .mts-stats__num {
        font-size: 2.5rem;
    }

    .mts-stats__skew {
        height: 30px;
    }

    .mts-marquee--bottom {
        display: none;
    }
}

/* ========================================
   SOSYAL MEDYA DANIŞMANLIĞI
   🔥🔥 EXTRA-WILD BOUNDARY-BREAKING — Neon/Viral/Feed
   Prefix: smd-
   Palette: Hot Pink (#ec4899) + Neon Blue (#3b82f6) + Violet (#7c3aed) + Lime (#84cc16) + Dark (#08080f)
   ======================================== */

/* ── Hero — Animated Gradient Mesh ── */
.smd-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #08080f;
    overflow: hidden;
    text-align: center;
}

.smd-hero__mesh {
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(circle at 20% 30%, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 20%, rgba(132, 204, 22, 0.08) 0%, transparent 40%);
    animation: smd-meshShift 15s ease-in-out infinite alternate;
}

@keyframes smd-meshShift {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(-3%, 2%) rotate(1deg);
    }

    66% {
        transform: translate(2%, -3%) rotate(-1deg);
    }

    100% {
        transform: translate(-1%, 1%) rotate(0.5deg);
    }
}

/* Floating social icons */
.smd-hero__floats {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.smd-hero__float {
    position: absolute;
    font-size: 2.2rem;
    animation: smd-iconFloat 10s ease-in-out infinite;
    opacity: 0.25;
}

.smd-hero__float--ig {
    color: #e1306c;
    animation-delay: 0s;
}

.smd-hero__float--tt {
    color: #00f2ea;
    animation-delay: -1.5s;
}

.smd-hero__float--yt {
    color: #ff0000;
    animation-delay: -3s;
}

.smd-hero__float--tw {
    color: #1da1f2;
    animation-delay: -4.5s;
}

.smd-hero__float--fb {
    color: #1877f2;
    animation-delay: -6s;
}

.smd-hero__float--ln {
    color: #0077b5;
    animation-delay: -7.5s;
}

.smd-hero__float--pi {
    color: #bd081c;
    animation-delay: -2s;
}

.smd-hero__float--sp {
    color: #1db954;
    animation-delay: -5s;
}

@keyframes smd-iconFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }

    25% {
        transform: translateY(-15px) rotate(5deg) scale(1.1);
    }

    50% {
        transform: translateY(-25px) rotate(-3deg) scale(0.95);
    }

    75% {
        transform: translateY(-10px) rotate(8deg) scale(1.05);
    }
}

/* Floating emoji reactions */
.smd-hero__reactions {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.smd-hero__emoji {
    position: absolute;
    font-size: 1.6rem;
    animation: smd-emojiPop 6s ease-in-out infinite;
}

@keyframes smd-emojiPop {

    0%,
    100% {
        transform: scale(1) translateY(0);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.4) translateY(-18px);
        opacity: 0.7;
    }
}

/* Notification badges */
.smd-hero__notifs {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.smd-hero__notif {
    position: absolute;
    background: #ec4899;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    animation: smd-notifPulse 3s ease-in-out infinite;
    box-shadow: 0 2px 12px rgba(236, 72, 153, 0.4);
}

.smd-hero__notif:nth-child(2) {
    background: #3b82f6;
    animation-delay: -1s;
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.4);
}

.smd-hero__notif:nth-child(3) {
    background: #7c3aed;
    animation-delay: -2s;
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.4);
}

@keyframes smd-notifPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.9;
    }
}

/* Glitch Title */
.smd-hero__content {
    position: relative;
    z-index: 2;
}

.smd-hero__title {
    font-size: clamp(3.5rem, 10vw, 8rem);
    font-weight: 900;
    line-height: 0.9;
    margin: 20px 0 16px;
    letter-spacing: -3px;
}

.smd-hero__glitch {
    position: relative;
    display: inline-block;
    color: #fff;
}

.smd-hero__glitch::before,
.smd-hero__glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.smd-hero__glitch::before {
    color: #ec4899;
    z-index: -1;
    animation: smd-glitch1 3s infinite linear alternate;
}

.smd-hero__glitch::after {
    color: #3b82f6;
    z-index: -1;
    animation: smd-glitch2 3s infinite linear alternate;
}

@keyframes smd-glitch1 {
    0% {
        clip-path: inset(20% 0 60% 0);
        transform: translate(-3px, 2px);
    }

    20% {
        clip-path: inset(50% 0 10% 0);
        transform: translate(3px, -1px);
    }

    40% {
        clip-path: inset(30% 0 30% 0);
        transform: translate(-2px, 1px);
    }

    60% {
        clip-path: inset(70% 0 5% 0);
        transform: translate(2px, -2px);
    }

    80% {
        clip-path: inset(10% 0 70% 0);
        transform: translate(-1px, 3px);
    }

    100% {
        clip-path: inset(40% 0 20% 0);
        transform: translate(3px, -1px);
    }
}

@keyframes smd-glitch2 {
    0% {
        clip-path: inset(60% 0 10% 0);
        transform: translate(3px, -2px);
    }

    20% {
        clip-path: inset(10% 0 50% 0);
        transform: translate(-3px, 1px);
    }

    40% {
        clip-path: inset(40% 0 20% 0);
        transform: translate(2px, -1px);
    }

    60% {
        clip-path: inset(5% 0 70% 0);
        transform: translate(-2px, 2px);
    }

    80% {
        clip-path: inset(70% 0 10% 0);
        transform: translate(1px, -3px);
    }

    100% {
        clip-path: inset(20% 0 40% 0);
        transform: translate(-3px, 1px);
    }
}

.smd-hero__title-outline {
    -webkit-text-stroke: 2px #ec4899;
    color: transparent;
    display: block;
}

/* Live badge */
.smd-hero__live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.smd-hero__live-dot {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    animation: smd-livePulse 1.5s ease-in-out infinite;
}

@keyframes smd-livePulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }
}

.smd-hero__tagline {
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    color: rgba(255, 255, 255, 0.5);
    max-width: 580px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

/* Neon button */
.smd-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 60px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.smd-btn--neon {
    background: linear-gradient(135deg, #ec4899, #7c3aed);
    color: #fff;
    box-shadow: 0 4px 20px rgba(236, 72, 153, 0.3), 0 0 40px rgba(124, 58, 237, 0.15);
}

.smd-btn--neon:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(236, 72, 153, 0.5), 0 0 60px rgba(124, 58, 237, 0.25);
}

.smd-btn--lg {
    padding: 18px 40px;
    font-size: 1.05rem;
}

.smd-hero__phone,
.smd-cta__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 0.9rem;
    margin-left: 16px;
    transition: color 0.3s;
}

.smd-hero__phone:hover,
.smd-cta__phone:hover {
    color: #ec4899;
}

.smd-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Scroll indicator */
.smd-hero__scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.smd-hero__scroll-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, #ec4899, transparent);
    border-radius: 2px;
    animation: smd-scrollPulse 2s ease-in-out infinite;
}

@keyframes smd-scrollPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scaleY(1);
    }

    50% {
        opacity: 1;
        transform: scaleY(1.2);
    }
}

/* ── Double Marquee ── */
.smd-marquee-wrap {
    background: #08080f;
    border-top: 1px solid rgba(236, 72, 153, 0.1);
    border-bottom: 1px solid rgba(236, 72, 153, 0.1);
}

.smd-marquee {
    padding: 12px 0;
    overflow: hidden;
}

.smd-marquee--reverse {
    border-top: 1px solid rgba(124, 58, 237, 0.08);
}

.smd-marquee__track {
    display: flex;
    gap: 28px;
    white-space: nowrap;
    animation: smd-marqueeScroll 25s linear infinite;
}

.smd-marquee__track--reverse {
    animation: smd-marqueeReverse 20s linear infinite;
}

.smd-marquee__track span {
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(236, 72, 153, 0.3);
}

.smd-marquee--reverse .smd-marquee__track span {
    color: rgba(124, 58, 237, 0.25);
}

@keyframes smd-marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes smd-marqueeReverse {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

/* ── Stats — Diagonal ── */
.smd-stats {
    position: relative;
    padding: 80px 0;
    background: linear-gradient(135deg, #ec4899, #7c3aed);
    overflow: hidden;
}

.smd-stats__skew {
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(135deg, #ec4899, #7c3aed);
    transform: skewY(-2deg);
}

.smd-stats__skew--bottom {
    top: auto;
    bottom: -40px;
    transform: skewY(2deg);
}

.smd-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    position: relative;
    z-index: 2;
}

.smd-stats__item {
    text-align: center;
}

.smd-stats__num {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: #fff;
}

.smd-stats__num span {
    opacity: 0.6;
}

.smd-stats__label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 4px;
    font-weight: 600;
}

/* ── Services — Hex Grid ── */
.smd-services__header {
    text-align: center;
    margin-bottom: 48px;
}

.smd-services__title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    color: var(--text-white);
    line-height: 1.1;
}

.smd-services__title span {
    background: linear-gradient(135deg, #ec4899, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.smd-services__hex-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.smd-services__hex {
    position: relative;
}

.smd-services__hex-inner {
    background: rgba(236, 72, 153, 0.04);
    border: 1px solid rgba(236, 72, 153, 0.08);
    border-radius: 20px;
    padding: 36px 28px;
    text-align: center;
    transition: all 0.35s ease;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.smd-services__hex-inner:hover {
    background: rgba(236, 72, 153, 0.08);
    transform: translateY(-4px);
    box-shadow: 0 0 30px rgba(236, 72, 153, 0.1);
}

.smd-services__hex-inner i {
    font-size: 1.8rem;
    color: #ec4899;
    margin-bottom: 14px;
}

.smd-services__hex-inner h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 8px;
}

.smd-services__hex-inner p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ── Split — Neden Biz ── */
.smd-split__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-start;
}

.smd-split__big-text {
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 900;
    color: var(--text-white);
    line-height: 0.95;
    letter-spacing: -2px;
    margin: 0;
    position: sticky;
    top: 120px;
}

.smd-split__big-text span {
    background: linear-gradient(135deg, #ec4899, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.smd-split__question {
    background: linear-gradient(135deg, #7c3aed, #3b82f6) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 140%;
}

.smd-split__right {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.smd-split__reason {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.smd-split__reason:hover {
    background: rgba(236, 72, 153, 0.03);
}

.smd-split__reason-line {
    width: 3px;
    min-height: 50px;
    height: 100%;
    background: linear-gradient(180deg, #ec4899, #7c3aed);
    border-radius: 3px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.smd-split__reason:hover .smd-split__reason-line {
    box-shadow: 0 0 14px rgba(236, 72, 153, 0.5);
}

.smd-split__reason h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 6px;
}

.smd-split__reason p {
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ── CTA — Dual Neon Glow ── */
.smd-cta {
    position: relative;
    padding: 100px 0;
    background: #08080f;
    overflow: hidden;
}

.smd-cta__glow {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
}

.smd-cta__glow--1 {
    top: -100px;
    left: -100px;
    background: rgba(236, 72, 153, 0.12);
    animation: smd-glowFloat 8s ease-in-out infinite;
}

.smd-cta__glow--2 {
    bottom: -100px;
    right: -100px;
    background: rgba(59, 130, 246, 0.1);
    animation: smd-glowFloat 8s ease-in-out infinite reverse;
}

@keyframes smd-glowFloat {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(40px, -30px);
    }
}

.smd-cta__inner {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.smd-cta__title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    color: var(--text-white);
    margin: 0 0 16px;
    line-height: 1.1;
}

.smd-cta__title span {
    background: linear-gradient(135deg, #ec4899, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.smd-cta__inner p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 32px;
}

.smd-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .smd-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .smd-services__hex-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .smd-split__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .smd-split__big-text {
        position: static;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .smd-hero {
        min-height: auto;
        padding: 140px 0 80px;
    }

    .smd-hero__floats,
    .smd-hero__reactions,
    .smd-hero__notifs {
        display: none;
    }

    .smd-services__hex-grid {
        grid-template-columns: 1fr;
    }

    .smd-services__hex-inner {
        clip-path: none;
        min-height: auto;
    }

    .smd-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .smd-cta__inner {
        padding: 40px 24px;
    }
}

/* ========================================
   HAKKIMIZDA — BOUNDARY-BREAKING
   Prefix: hkm-
   Palette: Deep Space (#06060f) + Electric Cyan (#06b6d4) + Warm Amber (#f59e0b) + Cosmic Purple (#8b5cf6)
   ★★★ COSMIC / CONSTELLATION THEME ★★★
   ======================================== */

/* ── Hero ── */
.hkm-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #06060f;
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Starfield */
.hkm-hero__stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(6, 182, 212, 0.15) 1px, transparent 1px),
        radial-gradient(rgba(245, 158, 11, 0.08) 1px, transparent 1px);
    background-size: 40px 40px, 80px 80px;
    background-position: 0 0, 20px 20px;
    pointer-events: none;
    animation: hkmStars 4s linear infinite;
}

@keyframes hkmStars {
    from {
        background-position: 0 0, 20px 20px;
    }

    to {
        background-position: 0 40px, 20px 60px;
    }
}

/* Nebula orbs */
.hkm-hero__nebula {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.hkm-hero__nebula--1 {
    width: 400px;
    height: 400px;
    background: rgba(6, 182, 212, 0.12);
    top: 5%;
    left: 5%;
    animation: hkmNebula 10s ease-in-out infinite;
}

.hkm-hero__nebula--2 {
    width: 300px;
    height: 300px;
    background: rgba(245, 158, 11, 0.08);
    top: 40%;
    right: 5%;
    animation: hkmNebula 12s ease-in-out infinite 3s;
}

.hkm-hero__nebula--3 {
    width: 250px;
    height: 250px;
    background: rgba(139, 92, 246, 0.08);
    bottom: 10%;
    left: 30%;
    animation: hkmNebula 14s ease-in-out infinite 6s;
}

@keyframes hkmNebula {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(40px, -30px) scale(1.2);
    }

    66% {
        transform: translate(-30px, 20px) scale(0.8);
    }
}

/* Orbiting rings */
.hkm-hero__orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    pointer-events: none;
}

.hkm-hero__orbit-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid transparent;
}

.hkm-hero__orbit-ring--1 {
    border-color: rgba(6, 182, 212, 0.08);
    animation: hkmOrbit 20s linear infinite;
    transform: rotateX(70deg);
}

.hkm-hero__orbit-ring--2 {
    inset: 40px;
    border-color: rgba(245, 158, 11, 0.06);
    animation: hkmOrbit 28s linear infinite reverse;
    transform: rotateX(70deg) rotateZ(30deg);
}

.hkm-hero__orbit-ring--3 {
    inset: 80px;
    border-color: rgba(139, 92, 246, 0.05);
    animation: hkmOrbit 35s linear infinite;
    transform: rotateX(70deg) rotateZ(-20deg);
}

@keyframes hkmOrbit {
    from {
        transform: rotateX(70deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(70deg) rotateZ(360deg);
    }
}

/* Floating particles */
.hkm-hero__floats {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hkm-hero__float {
    position: absolute;
    animation: hkmFloat 5s ease-in-out infinite;
}

.hkm-hero__float:nth-child(odd) {
    animation-duration: 7s;
}

.hkm-hero__float:nth-child(3n) {
    animation-delay: 1.5s;
}

.hkm-hero__float:nth-child(2n) {
    animation-delay: 0.8s;
}

.hkm-hero__float span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(6, 182, 212, 0.05);
    border: 1px solid rgba(6, 182, 212, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(4px);
}

.hkm-hero__float span i {
    font-size: 0.9rem;
    color: rgba(6, 182, 212, 0.35);
}

@keyframes hkmFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-18px) rotate(5deg);
    }
}

/* Hero Content */
.hkm-hero__content {
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

/* Badge */
.hkm-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(6, 182, 212, 0.08);
    border: 1px solid rgba(6, 182, 212, 0.15);
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1px;
    margin-bottom: 28px;
}

.hkm-hero__badge-dot {
    width: 8px;
    height: 8px;
    background: #06b6d4;
    border-radius: 50%;
    animation: hkmPulse 2s ease-in-out infinite;
}

@keyframes hkmPulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.4);
    }

    50% {
        opacity: 0.7;
        box-shadow: 0 0 0 6px rgba(6, 182, 212, 0);
    }
}

/* Glitch text */
.hkm-hero__title {
    font-size: clamp(3.5rem, 10vw, 8rem);
    font-weight: 900;
    color: #fff;
    line-height: 0.95;
    margin: 20px 0 16px;
    letter-spacing: -2px;
}

.hkm-hero__title-glitch {
    position: relative;
    display: inline-block;
}

.hkm-hero__title-glitch::before,
.hkm-hero__title-glitch::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hkm-hero__title-glitch::before {
    color: #06b6d4;
    animation: hkmGlitch1 4s infinite;
    clip-path: inset(0 0 60% 0);
}

.hkm-hero__title-glitch::after {
    color: #f59e0b;
    animation: hkmGlitch2 4s infinite;
    clip-path: inset(40% 0 0 0);
}

@keyframes hkmGlitch1 {

    0%,
    92%,
    100% {
        transform: translate(0);
    }

    93% {
        transform: translate(-2px, 1px);
    }

    95% {
        transform: translate(2px, -1px);
    }

    97% {
        transform: translate(-1px, 1px);
    }
}

@keyframes hkmGlitch2 {

    0%,
    90%,
    100% {
        transform: translate(0);
    }

    91% {
        transform: translate(2px, -1px);
    }

    94% {
        transform: translate(-2px, 1px);
    }

    96% {
        transform: translate(1px, -1px);
    }
}

.hkm-hero__title-outline {
    -webkit-text-stroke: 2px rgba(6, 182, 212, 0.5);
    -webkit-text-fill-color: transparent;
    display: block;
}

.hkm-hero__tagline {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
    margin: 0 0 40px;
    letter-spacing: 1px;
}

.hkm-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.hkm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.hkm-btn--glow {
    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
    color: #fff;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.3), 0 0 60px rgba(139, 92, 246, 0.1);
}

.hkm-btn--glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.5), 0 0 80px rgba(139, 92, 246, 0.2);
}

.hkm-btn--lg {
    padding: 16px 36px;
    font-size: 1rem;
}

.hkm-hero__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.hkm-hero__phone:hover {
    color: #06b6d4;
}

/* Scroll Indicator */
.hkm-hero__scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.hkm-hero__scroll-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, #06b6d4, transparent);
    animation: hkmScrollPulse 2s ease-in-out infinite;
}

@keyframes hkmScrollPulse {

    0%,
    100% {
        opacity: 0.3;
        height: 40px;
    }

    50% {
        opacity: 0.8;
        height: 60px;
    }
}

/* ── Marquee ── */
.hkm-marquee {
    background: linear-gradient(90deg, #06b6d4, #8b5cf6, #f59e0b, #06b6d4);
    padding: 14px 0;
    overflow: hidden;
    white-space: nowrap;
}

.hkm-marquee__track {
    display: inline-flex;
    gap: 28px;
    animation: hkmMarquee 18s linear infinite;
}

.hkm-marquee__track span {
    font-size: 0.85rem;
    font-weight: 800;
    color: #06060f;
    letter-spacing: 3px;
    text-transform: uppercase;
}

@keyframes hkmMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ── Stats ── */
.hkm-stats {
    position: relative;
    padding: 80px 0;
    background: #06060f;
}

.hkm-stats__skew {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(90deg, #06b6d4, #8b5cf6, #f59e0b, #06b6d4);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
}

.hkm-stats__skew--bottom {
    top: auto;
    bottom: 0;
    clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
}

.hkm-stats__grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.hkm-stats__item {
    text-align: center;
}

.hkm-stats__num {
    font-size: 3.5rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: 6px;
}

.hkm-stats__num span {
    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hkm-stats__label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

/* ── Biz Kimiz — Premium Cards ── */
.hkm-who__header {
    text-align: center;
    margin-bottom: 60px;
}

.hkm-who__big-text {
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 900;
    color: var(--text-white);
    line-height: 0.95;
    letter-spacing: -2px;
    margin: 0 0 16px;
}

.hkm-who__big-text span {
    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hkm-who__question {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 140%;
}

.hkm-who__subtitle {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
    letter-spacing: 0.5px;
}

.hkm-who__grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.hkm-who__card {
    display: flex;
    gap: 28px;
    padding: 32px;
    background: rgba(6, 182, 212, 0.02);
    border: 1px solid rgba(6, 182, 212, 0.06);
    border-radius: 20px;
    border-left: 3px solid;
    border-image: linear-gradient(180deg, #06b6d4, #8b5cf6) 1;
    transition: all 0.35s ease;
    position: relative;
}

.hkm-who__card:hover {
    background: rgba(6, 182, 212, 0.05);
    border-color: rgba(6, 182, 212, 0.15);
    transform: translateX(6px);
    box-shadow: 0 8px 32px rgba(6, 182, 212, 0.08);
}

.hkm-who__card-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.hkm-who__card-icon i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: rgba(6, 182, 212, 0.08);
    border: 1px solid rgba(6, 182, 212, 0.15);
    border-radius: 14px;
    font-size: 1.2rem;
    color: #06b6d4;
    transition: all 0.3s ease;
}

.hkm-who__card:hover .hkm-who__card-icon i {
    background: rgba(6, 182, 212, 0.15);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.15);
    transform: scale(1.1);
}

.hkm-who__card-num {
    font-size: 0.65rem;
    font-weight: 800;
    color: rgba(6, 182, 212, 0.25);
    letter-spacing: 2px;
}

.hkm-who__card-body h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 12px;
}

.hkm-who__card-body p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 10px;
}

.hkm-who__card-body p:last-child {
    margin-bottom: 0;
}

/* ── Values Hex Grid ── */
.hkm-values__header {
    text-align: center;
    margin-bottom: 48px;
}

.hkm-values__title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    color: var(--text-white);
    line-height: 1.1;
    margin: 0;
}

.hkm-values__title span {
    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hkm-values__hex-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.hkm-values__hex {
    position: relative;
    background: rgba(6, 182, 212, 0.02);
    border: 1px solid rgba(6, 182, 212, 0.08);
    border-radius: 24px;
    padding: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    aspect-ratio: 1 / 1.1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hkm-values__hex:hover {
    border-color: rgba(6, 182, 212, 0.3);
    background: rgba(6, 182, 212, 0.05);
    transform: scale(1.05);
}

.hkm-values__hex-inner {
    text-align: center;
    padding: 28px 20px;
}

.hkm-values__hex-inner i {
    font-size: 1.8rem;
    color: #06b6d4;
    margin-bottom: 14px;
    display: block;
}

.hkm-values__hex-inner h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 8px;
}

.hkm-values__hex-inner p {
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ── CTA ── */
.hkm-cta {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    text-align: center;
    background: #06060f;
}

.hkm-cta__cosmos {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hkm-cta__glow {
    position: absolute;
    width: 150%;
    height: 50%;
    top: 10%;
    left: -25%;
    filter: blur(100px);
    opacity: 0.12;
    background: linear-gradient(90deg, transparent, #06b6d4, #8b5cf6, transparent);
    animation: hkmCTAGlow 12s ease-in-out infinite;
}

.hkm-cta__glow--2 {
    top: 30%;
    animation: hkmCTAGlow 16s ease-in-out infinite 4s;
    opacity: 0.08;
    background: linear-gradient(90deg, transparent, #f59e0b, #06b6d4, transparent);
}

@keyframes hkmCTAGlow {

    0%,
    100% {
        transform: translateX(-10%) skewY(-2deg);
    }

    33% {
        transform: translateX(5%) skewY(1deg);
    }

    66% {
        transform: translateX(-5%) skewY(-1deg);
    }
}

.hkm-cta__inner {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
}

.hkm-cta__title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin: 0 0 16px;
}

.hkm-cta__title span {
    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hkm-cta__inner p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 32px;
}

.hkm-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.hkm-cta__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.hkm-cta__phone:hover {
    color: #06b6d4;
}

/* ── Responsive ── */
@media (max-width: 992px) {
    .hkm-hero__title {
        font-size: clamp(2.5rem, 8vw, 5rem);
    }

    .hkm-hero__float:nth-child(n+5) {
        display: none;
    }

    .hkm-hero__orbit {
        width: 300px;
        height: 300px;
    }

    .hkm-values__hex-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hkm-who__card {
        padding: 24px;
        gap: 20px;
    }

    .hkm-who__big-text {
        font-size: clamp(2.5rem, 6vw, 4rem);
    }
}

@media (max-width: 768px) {
    .hkm-hero {
        min-height: auto;
        padding: 140px 0 80px;
    }

    .hkm-hero__floats,
    .hkm-hero__orbit {
        display: none;
    }

    .hkm-values__hex-grid {
        grid-template-columns: 1fr;
    }

    .hkm-values__hex {
        clip-path: none;
        aspect-ratio: auto;
        border-radius: 20px;
    }

    .hkm-stats__grid {
        gap: 32px;
    }

    .hkm-stats__num {
        font-size: 2.5rem;
    }

    .hkm-stats__skew {
        height: 30px;
    }
}


/* ========================================
   ANA SAYFA — 🔥 BOUNDARY-BREAKING HOME
   Prefix: hm-
   Palette: Ultra-Violet (#8b5cf6) + Cyan (#06b6d4) + Emerald (#10b981)
   ======================================== */

/* ── Hero ── */
.hm-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #030014;
    overflow: hidden;
    text-align: center;
}

.hm-hero__mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(6, 182, 212, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
    animation: hm-meshShift 20s ease-in-out infinite;
}

@keyframes hm-meshShift {

    0%,
    100% {
        opacity: 1;
        filter: hue-rotate(0deg);
    }

    50% {
        opacity: 0.8;
        filter: hue-rotate(15deg);
    }
}

.hm-hero__scanline {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.6), rgba(6, 182, 212, 0.6), transparent);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
    animation: hm-scan 6s ease-in-out infinite;
    z-index: 1;
}

@keyframes hm-scan {
    0% {
        top: 5%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        top: 95%;
    }

    60% {
        opacity: 1;
    }

    100% {
        top: 5%;
        opacity: 0;
    }
}

.hm-hero__floats {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hm-hero__float {
    position: absolute;
    font-size: 1.6rem;
    color: rgba(139, 92, 246, 0.12);
    animation: hm-float 14s ease-in-out infinite;
}

.hm-hero__float:nth-child(2n) {
    color: rgba(6, 182, 212, 0.1);
    animation-delay: -3s;
}

.hm-hero__float:nth-child(3n) {
    color: rgba(16, 185, 129, 0.08);
    animation-delay: -6s;
}

.hm-hero__float:nth-child(4n) {
    animation-delay: -9s;
}

.hm-hero__float:nth-child(5n) {
    animation-delay: -4s;
}

@keyframes hm-float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-18px) rotate(4deg);
    }

    50% {
        transform: translateY(-6px) rotate(-2deg);
    }

    75% {
        transform: translateY(-14px) rotate(3deg);
    }
}

/* ── Hero Slider System ── */
.hm-hero__slider {
    position: relative;
    z-index: 2;
    max-width: 800px;
    min-height: 340px;
}

.hm-hero__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease, visibility .7s ease;
    pointer-events: none;
}

.hm-hero__slide.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Dots Nav */
.hm-hero__dots {
    position: relative;
    z-index: 3;
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 32px;
}

.hm-hero__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .25);
    background: transparent;
    cursor: pointer;
    transition: all .3s ease;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.hm-hero__dot:hover {
    border-color: rgba(139, 92, 246, .6);
}

.hm-hero__dot.active {
    border-color: #8b5cf6;
    background: #8b5cf6;
    width: 32px;
    border-radius: 6px;
}

.hm-hero__content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.hm-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.hm-hero__badge-dot {
    width: 8px;
    height: 8px;
    background: #8b5cf6;
    border-radius: 50%;
    animation: hm-dotPulse 1.5s ease-in-out infinite;
}

@keyframes hm-dotPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.5);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(139, 92, 246, 0);
    }
}

.hm-hero__title {
    font-size: clamp(3rem, 9vw, 6.5rem);
    font-weight: 900;
    line-height: 0.95;
    margin: 0 0 24px;
    letter-spacing: -2px;
}

.hm-hero__glitch {
    position: relative;
    display: inline-block;
    color: #fff;
}

.hm-hero__glitch::before,
.hm-hero__glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hm-hero__glitch::before {
    color: #8b5cf6;
    z-index: -1;
    animation: hm-glitch1 4s infinite linear alternate;
}

.hm-hero__glitch::after {
    color: #06b6d4;
    z-index: -1;
    animation: hm-glitch2 4s infinite linear alternate;
}

@keyframes hm-glitch1 {
    0% {
        clip-path: inset(15% 0 65% 0);
        transform: translate(-2px, 1px);
    }

    25% {
        clip-path: inset(45% 0 15% 0);
        transform: translate(2px, -1px);
    }

    50% {
        clip-path: inset(25% 0 35% 0);
        transform: translate(-1px, 2px);
    }

    75% {
        clip-path: inset(65% 0 5% 0);
        transform: translate(1px, -2px);
    }

    100% {
        clip-path: inset(35% 0 25% 0);
        transform: translate(2px, 1px);
    }
}

@keyframes hm-glitch2 {
    0% {
        clip-path: inset(55% 0 15% 0);
        transform: translate(2px, -1px);
    }

    25% {
        clip-path: inset(10% 0 45% 0);
        transform: translate(-2px, 1px);
    }

    50% {
        clip-path: inset(35% 0 25% 0);
        transform: translate(1px, -2px);
    }

    75% {
        clip-path: inset(5% 0 65% 0);
        transform: translate(-1px, 2px);
    }

    100% {
        clip-path: inset(25% 0 35% 0);
        transform: translate(-2px, -1px);
    }
}

.hm-hero__gradient {
    display: block;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: hm-gradShift 6s ease-in-out infinite;
}

@keyframes hm-gradShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.hm-hero__desc {
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    color: rgba(255, 255, 255, 0.4);
    max-width: 560px;
    margin: 0 auto 36px;
    line-height: 1.7;
}

.hm-hero__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.hm-hero__scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.hm-hero__scroll-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, #8b5cf6, transparent);
    border-radius: 2px;
    animation: hm-scrollPulse 2s ease-in-out infinite;
}

@keyframes hm-scrollPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scaleY(1);
    }

    50% {
        opacity: 1;
        transform: scaleY(1.2);
    }
}

/* ── Buttons ── */
.hm-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 60px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.hm-btn--primary {
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
    color: #fff;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
}

.hm-btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.5);
}

.hm-btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

.hm-btn--ghost:hover {
    border-color: rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.05);
    color: #fff;
}

.hm-btn--outline {
    background: transparent;
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: #8b5cf6;
    padding: 12px 24px;
}

.hm-btn--outline:hover {
    background: rgba(139, 92, 246, 0.08);
    border-color: #8b5cf6;
    transform: translateY(-2px);
}

.hm-btn--lg {
    padding: 16px 36px;
    font-size: 1rem;
}

/* ── Marquee ── */
.hm-marquee {
    background: #030014;
    border-top: 1px solid rgba(139, 92, 246, 0.08);
    border-bottom: 1px solid rgba(139, 92, 246, 0.08);
    padding: 16px 0;
    overflow: hidden;
}

.hm-marquee__track {
    display: flex;
    gap: 24px;
    white-space: nowrap;
    animation: hm-marqueeScroll 25s linear infinite;
}

.hm-marquee__track span {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(139, 92, 246, 0.2);
}

@keyframes hm-marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ── Why Perakon ── */
.hm-why__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hm-why__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #8b5cf6;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.hm-why__heading {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    color: var(--text-white);
    line-height: 1.1;
    margin: 0 0 16px;
}

.hm-why__heading span {
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hm-why__text {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.7;
}

.hm-why__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.hm-why__stat {
    background: rgba(139, 92, 246, 0.04);
    border: 1px solid rgba(139, 92, 246, 0.08);
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.hm-why__stat:hover {
    background: rgba(139, 92, 246, 0.06);
    border-color: rgba(139, 92, 246, 0.15);
    transform: translateY(-3px);
}

.hm-why__stat-num {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 900;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hm-why__stat-num span {
    opacity: 0.7;
}

.hm-why__stat-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
    font-weight: 600;
}

/* ── Section Label ── */
.hm-section-label {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.hm-section-label__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.15), transparent);
}

.hm-section-label__text {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 3px;
    white-space: nowrap;
}

/* ── Service Cards ── */
.hm-services__header {
    text-align: center;
    margin-bottom: 48px;
}

.hm-services__title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    color: var(--text-white);
    line-height: 1.1;
    margin: 16px 0 0;
}

.hm-services__title span {
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hm-services__featured {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.hm-svc-card {
    display: flex;
    flex-direction: column;
    background: rgba(139, 92, 246, 0.03);
    border: 1px solid rgba(139, 92, 246, 0.06);
    border-radius: 20px;
    padding: 32px;
    text-decoration: none;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.hm-svc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, transparent, rgba(139, 92, 246, 0.2), rgba(6, 182, 212, 0.15), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.35s;
}

.hm-svc-card:hover::before {
    opacity: 1;
}

.hm-svc-card:hover {
    transform: translateY(-5px);
    background: rgba(139, 92, 246, 0.05);
    box-shadow: 0 12px 40px rgba(139, 92, 246, 0.08);
}

.hm-svc-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(6, 182, 212, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #8b5cf6;
    margin-bottom: 20px;
}

.hm-svc-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 10px;
}

.hm-svc-card__desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
    flex: 1;
    margin: 0;
}

.hm-svc-card__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.08);
    color: #8b5cf6;
    margin-top: 16px;
    transition: all 0.3s;
}

.hm-svc-card:hover .hm-svc-card__arrow {
    background: rgba(139, 92, 246, 0.2);
    transform: translateX(4px);
}

/* Compact service mini */
.hm-services__compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.hm-svc-mini {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(139, 92, 246, 0.02);
    border: 1px solid rgba(139, 92, 246, 0.05);
    border-radius: 14px;
    padding: 18px 20px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hm-svc-mini:hover {
    background: rgba(139, 92, 246, 0.05);
    border-color: rgba(139, 92, 246, 0.12);
    transform: translateY(-2px);
}

.hm-svc-mini__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(139, 92, 246, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #8b5cf6;
    flex-shrink: 0;
}

.hm-svc-mini__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 2px;
}

.hm-svc-mini__link {
    font-size: 0.75rem;
    color: #8b5cf6;
    font-weight: 600;
}

/* ── Team ── */
.hm-team__header {
    margin-bottom: 32px;
}

.hm-team__row {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 40px;
    align-items: start;
}

.hm-team__heading {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--text-white);
    line-height: 1.1;
    margin: 0 0 12px;
}

.hm-team__heading span {
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hm-team__text {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 20px;
}

.hm-team__scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}

.hm-team__scroll::-webkit-scrollbar {
    height: 4px;
}

.hm-team__scroll::-webkit-scrollbar-track {
    background: transparent;
}

.hm-team__scroll::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
    border-radius: 4px;
}

.hm-team__member {
    flex-shrink: 0;
    width: 150px;
    text-align: center;
    padding: 20px 12px;
    background: rgba(139, 92, 246, 0.03);
    border: 1px solid rgba(139, 92, 246, 0.06);
    border-radius: 16px;
    transition: all 0.3s;
}

.hm-team__member:hover {
    background: rgba(139, 92, 246, 0.06);
    transform: translateY(-3px);
}

.hm-team__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(6, 182, 212, 0.15));
    border: 2px solid rgba(139, 92, 246, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: #8b5cf6;
    margin: 0 auto 10px;
}

.hm-team__avatar-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(139, 92, 246, 0.2);
    margin: 0 auto 10px;
    display: block;
}

.hm-team__name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 2px;
}

.hm-team__role {
    font-size: 0.72rem;
    color: #8b5cf6;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── CTA ── */
.hm-cta {
    position: relative;
    padding: 100px 0;
    background: #030014;
    overflow: hidden;
}

.hm-cta__glow {
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    filter: blur(140px);
    pointer-events: none;
}

.hm-cta__glow--1 {
    top: -120px;
    left: -100px;
    background: rgba(139, 92, 246, 0.1);
    animation: hm-glowFloat 8s ease-in-out infinite;
}

.hm-cta__glow--2 {
    bottom: -120px;
    right: -100px;
    background: rgba(6, 182, 212, 0.08);
    animation: hm-glowFloat 8s ease-in-out infinite reverse;
}

@keyframes hm-glowFloat {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(40px, -30px);
    }
}

.hm-cta__inner {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hm-cta__title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    color: var(--text-white);
    margin: 0 0 16px;
    line-height: 1.1;
}

.hm-cta__title span {
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hm-cta__inner p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 32px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .hm-why__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hm-services__featured {
        grid-template-columns: repeat(2, 1fr);
    }

    .hm-team__row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hm-hero {
        min-height: auto;
        padding: 140px 0 80px;
    }

    .hm-hero__floats {
        display: none;
    }

    .hm-hero__scanline {
        display: none;
    }

    .hm-hero__title {
        font-size: clamp(2.2rem, 8vw, 3.5rem);
    }

    .hm-hero__actions {
        flex-direction: column;
        align-items: center;
    }

    .hm-services__featured {
        grid-template-columns: 1fr;
    }

    .hm-services__compact {
        grid-template-columns: 1fr;
    }

    .hm-why__stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .hm-why__stats {
        grid-template-columns: 1fr;
    }
}


/* ========================================
   İLETİŞİM — 🔥 BOUNDARY-BREAKING CONTACT
   Prefix: ilt-
   Palette: Rose (#e11d48) + Amber (#f59e0b) + Violet (#8b5cf6)
   ======================================== */

/* ── Hero ── */
.ilt-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #030014;
    overflow: hidden;
    text-align: center;
    padding-top: 100px;
}

.ilt-hero__mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(225, 29, 72, 0.07) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(245, 158, 11, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 50%);
    animation: ilt-meshShift 18s ease-in-out infinite;
}

@keyframes ilt-meshShift {

    0%,
    100% {
        opacity: 1;
        filter: hue-rotate(0deg);
    }

    50% {
        opacity: 0.8;
        filter: hue-rotate(10deg);
    }
}

.ilt-hero__scanline {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(225, 29, 72, 0.5), rgba(245, 158, 11, 0.5), transparent);
    box-shadow: 0 0 20px rgba(225, 29, 72, 0.3);
    animation: ilt-scan 5s ease-in-out infinite;
    z-index: 1;
}

@keyframes ilt-scan {
    0% {
        top: 5%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        top: 90%;
    }

    60% {
        opacity: 1;
    }

    100% {
        top: 5%;
        opacity: 0;
    }
}

.ilt-hero__floats {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ilt-hero__float {
    position: absolute;
    font-size: 1.5rem;
    color: rgba(225, 29, 72, 0.1);
    animation: ilt-float 12s ease-in-out infinite;
}

.ilt-hero__float:nth-child(2n) {
    color: rgba(245, 158, 11, 0.08);
    animation-delay: -2s;
}

.ilt-hero__float:nth-child(3n) {
    color: rgba(139, 92, 246, 0.08);
    animation-delay: -5s;
}

.ilt-hero__float:nth-child(4n) {
    animation-delay: -8s;
}

.ilt-hero__float:nth-child(5n) {
    animation-delay: -3s;
}

@keyframes ilt-float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-15px) rotate(3deg);
    }

    50% {
        transform: translateY(-5px) rotate(-2deg);
    }

    75% {
        transform: translateY(-12px) rotate(2deg);
    }
}

.ilt-hero__content {
    position: relative;
    z-index: 2;
}

.ilt-hero__breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.8rem;
    margin-bottom: 20px;
}

.ilt-hero__breadcrumb a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: color 0.3s;
}

.ilt-hero__breadcrumb a:hover {
    color: #e11d48;
}

.ilt-hero__breadcrumb i {
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.6rem;
}

.ilt-hero__breadcrumb span {
    color: #e11d48;
    font-weight: 600;
}

.ilt-hero__title {
    font-size: clamp(3rem, 10vw, 7rem);
    font-weight: 900;
    line-height: 0.95;
    margin: 0 0 8px;
    letter-spacing: -3px;
}

.ilt-hero__glitch {
    position: relative;
    display: inline-block;
    color: #fff;
}

.ilt-hero__glitch::before,
.ilt-hero__glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ilt-hero__glitch::before {
    color: #e11d48;
    z-index: -1;
    animation: ilt-glitch1 4s infinite linear alternate;
}

.ilt-hero__glitch::after {
    color: #f59e0b;
    z-index: -1;
    animation: ilt-glitch2 4s infinite linear alternate;
}

@keyframes ilt-glitch1 {
    0% {
        clip-path: inset(20% 0 60% 0);
        transform: translate(-2px, 1px);
    }

    25% {
        clip-path: inset(50% 0 10% 0);
        transform: translate(2px, -1px);
    }

    50% {
        clip-path: inset(30% 0 30% 0);
        transform: translate(-1px, 2px);
    }

    75% {
        clip-path: inset(60% 0 5% 0);
        transform: translate(1px, -1px);
    }

    100% {
        clip-path: inset(10% 0 50% 0);
        transform: translate(2px, 1px);
    }
}

@keyframes ilt-glitch2 {
    0% {
        clip-path: inset(60% 0 10% 0);
        transform: translate(2px, -1px);
    }

    25% {
        clip-path: inset(15% 0 40% 0);
        transform: translate(-1px, 1px);
    }

    50% {
        clip-path: inset(40% 0 20% 0);
        transform: translate(1px, -2px);
    }

    75% {
        clip-path: inset(5% 0 60% 0);
        transform: translate(-2px, 1px);
    }

    100% {
        clip-path: inset(30% 0 30% 0);
        transform: translate(-1px, -1px);
    }
}

.ilt-hero__outline {
    display: block;
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 900;
    letter-spacing: 10px;
    -webkit-text-stroke: 1px rgba(225, 29, 72, 0.2);
    color: transparent;
    margin-bottom: 20px;
}

.ilt-hero__desc {
    font-size: clamp(0.9rem, 1.4vw, 1.1rem);
    color: rgba(255, 255, 255, 0.4);
    max-width: 520px;
    margin: 0 auto 24px;
    line-height: 1.7;
}

.ilt-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 2px;
    text-transform: uppercase;
    background: rgba(225, 29, 72, 0.06);
    border: 1px solid rgba(225, 29, 72, 0.1);
    padding: 8px 18px;
    border-radius: 40px;
}

.ilt-hero__badge-dot {
    width: 7px;
    height: 7px;
    background: #e11d48;
    border-radius: 50%;
    animation: ilt-dotPulse 1.5s ease-in-out infinite;
}

@keyframes ilt-dotPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.4);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(225, 29, 72, 0);
    }
}

/* ── Marquee ── */
.ilt-marquee {
    background: #030014;
    border-top: 1px solid rgba(225, 29, 72, 0.06);
    border-bottom: 1px solid rgba(225, 29, 72, 0.06);
    padding: 14px 0;
    overflow: hidden;
}

.ilt-marquee__track {
    display: flex;
    gap: 20px;
    white-space: nowrap;
    animation: ilt-marqueeScroll 22s linear infinite;
}

.ilt-marquee__track span {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(225, 29, 72, 0.15);
}

@keyframes ilt-marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ── Contact Grid ── */
.ilt-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 40px;
    align-items: start;
}

/* ── Info Cards ── */
.ilt-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ilt-info__card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(225, 29, 72, 0.03);
    border: 1px solid rgba(225, 29, 72, 0.06);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
}

.ilt-info__card:hover {
    background: rgba(225, 29, 72, 0.05);
    border-color: rgba(225, 29, 72, 0.12);
    transform: translateX(4px);
}

.ilt-info__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(225, 29, 72, 0.1), rgba(245, 158, 11, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #e11d48;
    flex-shrink: 0;
}

.ilt-info__label {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 2px;
}

.ilt-info__value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-white);
}

.ilt-info__value a {
    color: var(--text-white);
    text-decoration: none;
    transition: color 0.3s;
}

.ilt-info__value a:hover {
    color: #e11d48;
}

/* Social */
.ilt-social {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.ilt-social__link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(225, 29, 72, 0.04);
    border: 1px solid rgba(225, 29, 72, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: all 0.3s;
    font-size: 0.9rem;
}

.ilt-social__link:hover {
    background: rgba(225, 29, 72, 0.08);
    border-color: rgba(225, 29, 72, 0.2);
    color: #e11d48;
    transform: translateY(-3px);
}

/* ── Form Card ── */
.ilt-form-card {
    background: rgba(225, 29, 72, 0.02);
    border: 1px solid rgba(225, 29, 72, 0.06);
    border-radius: 20px;
    padding: 36px;
}

.ilt-form-card__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 28px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ilt-form-card__title i {
    color: #e11d48;
}

.ilt-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.ilt-form__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ilt-form__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5px;
}

.ilt-form__input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(225, 29, 72, 0.08);
    border-radius: 12px;
    color: #fff;
    font-size: 0.9rem;
    font-family: inherit;
    transition: all 0.3s ease;
    outline: none;
    box-sizing: border-box;
}

.ilt-form__input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.ilt-form__input:focus {
    border-color: rgba(225, 29, 72, 0.3);
    background: rgba(225, 29, 72, 0.03);
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.08);
}

select.ilt-form__input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

select.ilt-form__input option {
    background: #0f0f23;
    color: #fff;
}

.ilt-form__textarea {
    min-height: 140px;
    resize: vertical;
}

.ilt-form__group:last-child:not(:only-child) {
    margin-bottom: 0;
}

.ilt-form__submit {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #e11d48, #f59e0b);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    margin-top: 20px;
    font-family: inherit;
}

.ilt-form__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(225, 29, 72, 0.3);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .ilt-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .ilt-hero {
        min-height: auto;
        padding: 140px 0 60px;
    }

    .ilt-hero__floats {
        display: none;
    }

    .ilt-hero__scanline {
        display: none;
    }

    .ilt-hero__title {
        font-size: clamp(2.5rem, 9vw, 4rem);
    }

    .ilt-form__row {
        grid-template-columns: 1fr;
    }

    .ilt-form-card {
        padding: 24px;
    }
}

/* ═══════════════════════════════════════════
   AUTH — Giriş / Kayıt (grs- / kyt-)
   ═══════════════════════════════════════════ */

/* Hero (shared grs-/kyt-) */
.grs-hero,
.kyt-hero {
    position: relative;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 100px 0 40px;
    background: #030014;
    overflow: hidden;
}

.grs-hero__mesh,
.kyt-hero__mesh {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(139, 92, 246, .18) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 50%, rgba(6, 182, 212, .12) 0%, transparent 60%);
}

.grs-hero__scanline,
.kyt-hero__scanline {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(139, 92, 246, .03) 3px, rgba(139, 92, 246, .03) 4px);
    animation: ilt-scanline 8s linear infinite;
}

.grs-hero__content,
.kyt-hero__content {
    position: relative;
    z-index: 2;
}

.grs-hero__title,
.kyt-hero__title {
    margin: 0 0 8px;
}

.grs-hero__glitch,
.kyt-hero__glitch {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 20px rgba(139, 92, 246, .4);
    letter-spacing: 6px;
}

.grs-hero__outline,
.kyt-hero__outline {
    display: block;
    font-size: clamp(1.2rem, 3vw, 2rem);
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px rgba(139, 92, 246, .25);
    letter-spacing: 8px;
    margin-top: -6px;
}

.grs-hero__desc,
.kyt-hero__desc {
    color: rgba(255, 255, 255, .5);
    font-size: 1rem;
    margin-top: 12px;
}

/* Content */
.grs-content,
.kyt-content {
    background: #030014;
    padding: 40px 0 80px;
    min-height: 50vh;
}

.grs-wrapper,
.kyt-wrapper {
    max-width: 700px;
    margin: 0 auto;
}

/* Form Card */
.grs-form-card,
.kyt-form-card {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(139, 92, 246, .15);
    border-radius: 16px;
    padding: 40px;
    backdrop-filter: blur(12px);
}

.grs-form-card__icon {
    text-align: center;
    margin-bottom: 28px;
}

.grs-form-card__icon i {
    font-size: 3rem;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Inputs (kyt- shared) */
.kyt-form__group {
    margin-bottom: 16px;
}

.kyt-form__label {
    display: block;
    color: rgba(255, 255, 255, .6);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.kyt-form__input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(139, 92, 246, .2);
    border-radius: 8px;
    color: #fff;
    font-size: 0.95rem;
    transition: all .3s ease;
    outline: none;
    box-sizing: border-box;
}

.kyt-form__input:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .15), 0 0 20px rgba(139, 92, 246, .08);
    background: rgba(255, 255, 255, .06);
}

.kyt-form__input::placeholder {
    color: rgba(255, 255, 255, .25);
}

.kyt-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Submit Button */
.kyt-form__submit {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    text-decoration: none;
}

.kyt-form__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(139, 92, 246, .35);
}

.kyt-form__footer {
    text-align: center;
    margin-top: 20px;
    color: rgba(255, 255, 255, .4);
    font-size: 0.9rem;
}

.kyt-form__footer a {
    color: #8b5cf6;
    text-decoration: none;
    font-weight: 600;
}

.kyt-form__footer a:hover {
    text-decoration: underline;
}

/* Type Toggle */
.kyt-type-toggle {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
}

.kyt-type-option {
    flex: 1;
}

.kyt-type-option input {
    display: none;
}

.kyt-type-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: rgba(255, 255, 255, .03);
    border: 2px solid rgba(139, 92, 246, .15);
    border-radius: 10px;
    color: rgba(255, 255, 255, .5);
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
}

.kyt-type-option input:checked+.kyt-type-btn {
    border-color: #8b5cf6;
    color: #fff;
    background: rgba(139, 92, 246, .1);
    box-shadow: 0 0 20px rgba(139, 92, 246, .1);
}

.kyt-type-btn:hover {
    border-color: rgba(139, 92, 246, .4);
}

/* Corporate Fields */
.kyt-corporate__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 20px;
    color: rgba(255, 255, 255, .4);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
}

.kyt-corporate__divider::before,
.kyt-corporate__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, .2), transparent);
}

.kyt-corporate__divider span {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Success State */
.kyt-success {
    text-align: center;
    padding: 60px 30px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(16, 185, 129, .2);
    border-radius: 16px;
}

.kyt-success__icon {
    font-size: 4rem;
    color: #10b981;
    margin-bottom: 16px;
}

.kyt-success h2 {
    color: #fff;
    font-size: 1.6rem;
    margin: 0 0 12px;
}

.kyt-success p {
    color: rgba(255, 255, 255, .5);
    margin: 6px 0;
}

/* Errors */
.kyt-errors {
    margin-bottom: 20px;
}

.kyt-error {
    padding: 12px 16px;
    background: rgba(225, 29, 72, .08);
    border: 1px solid rgba(225, 29, 72, .25);
    border-radius: 8px;
    color: #f87171;
    font-size: 0.9rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Header Member */
.header-member {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-member__name {
    color: rgba(255, 255, 255, .7);
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: color .3s ease;
}

.header-member__name:hover {
    color: #a78bfa;
}

.btn-header-ghost {
    padding: 8px 16px;
    border: 1px solid rgba(139, 92, 246, .35);
    border-radius: 8px;
    color: #a78bfa;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-header-ghost:hover {
    background: rgba(139, 92, 246, .1);
    border-color: #8b5cf6;
    color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    .kyt-form__row {
        grid-template-columns: 1fr;
    }

    .grs-form-card,
    .kyt-form-card {
        padding: 24px;
    }

    .kyt-type-toggle {
        flex-direction: column;
    }

    .header-member__name {
        display: none;
    }
}