/* ============================================================
   Aqenta Landing — Brand-specific CSS (Tailwind hybrid)
   Primary: #7C3AED  Cyan: #06B6D4  Amber: #F59E0B
============================================================ */

/* ---- Fonts & Base ---- */
* { box-sizing: border-box; }
body { font-family: 'Inter', system-ui, sans-serif; }
a { text-decoration: none; }

/* ---- Gradient Text ---- */
.text-grad {
    background: linear-gradient(135deg, #A78BFA 0%, #06B6D4 60%, #F59E0B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---- Logo Icon ---- */
.logo-icon {
    background: linear-gradient(135deg, #7C3AED, #06B6D4);
    box-shadow: 0 4px 20px rgba(124,58,237,0.45);
}

/* ---- Badge Pill ---- */
.badge-pill {
    color: #A78BFA;
    background: rgba(124,58,237,0.12);
    border: 1px solid rgba(124,58,237,0.28);
}

/* ---- Pulse Dot ---- */
.pulse-dot {
    display: inline-block;
    width: 7px; height: 7px;
    background: #7C3AED;
    border-radius: 50%;
    animation: pulseAnim 2s ease-in-out infinite;
}

/* ---- Buttons ---- */
.btn-glow {
    background: linear-gradient(135deg, #7C3AED, #6D28D9);
    box-shadow: 0 4px 20px rgba(124,58,237,0.4);
    border: none;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}
.btn-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.14), transparent);
    opacity: 0;
    transition: opacity 0.25s;
}
.btn-glow:hover::before { opacity: 1; }
.btn-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(124,58,237,0.55);
    color: #fff;
}

.btn-ghost {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    transition: all 0.25s ease;
}
.btn-ghost:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.22);
    transform: translateY(-2px);
    color: #fff;
}

/* ---- Stat gradient value ---- */
.stat-val {
    background: linear-gradient(135deg, #A78BFA, #7C3AED);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---- Hero Grid Background ---- */
.hero-grid {
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent);
}

/* ---- Glow Orbs ---- */
.orb { border-radius: 50%; filter: blur(90px); pointer-events: none; }
.orb-violet { width: 500px; height: 500px; background: rgba(124,58,237,0.28); top: -80px; left: -80px; animation: orbFloat 9s ease-in-out infinite; }
.orb-cyan   { width: 380px; height: 380px; background: rgba(6,182,212,0.14);  bottom: -40px; right: -60px; animation: orbFloat 11s ease-in-out infinite reverse; }
.orb-amber  { width: 260px; height: 260px; background: rgba(245,158,11,0.09); top: 45%; left: 42%; animation: orbFloat 13s ease-in-out infinite; }

/* ---- Sticky Header ---- */
#site-header.scrolled {
    background: rgba(9,9,11,0.88) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: 0 2px 24px rgba(0,0,0,0.4);
}

/* ---- Dashboard Frame ---- */
.dashboard-frame {
    background: #18181b;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04),
        0 40px 80px rgba(0,0,0,0.55),
        0 0 60px rgba(124,58,237,0.2);
}

/* ---- Feature Card ---- */
.feature-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(124,58,237,0.08), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}
.feature-card:hover::before { opacity: 1; }
.feature-card:hover {
    border-color: rgba(124,58,237,0.38);
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(124,58,237,0.12);
}
.feature-card:hover .w-11 { transform: scale(1.1); }
.feature-card .w-11 { transition: transform 0.3s; }

/* ---- Sector Card ---- */
.sector-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    position: relative;
    overflow: hidden;
}
.sector-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    opacity: 0;
    transition: opacity 0.3s;
    background: linear-gradient(90deg, #7C3AED, #06B6D4);
}
.sector-card:hover::after { opacity: 1; }
.sector-card:hover {
    border-color: rgba(255,255,255,0.13);
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.28);
}

/* ---- Testimonial Card ---- */
.testimonial-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    transition: all 0.3s ease;
}
.testimonial-card:hover {
    border-color: rgba(124,58,237,0.3);
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(124,58,237,0.1);
}

/* ---- Pricing Card ---- */
.pricing-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    transition: all 0.3s ease;
}
.pricing-card:hover {
    border-color: rgba(124,58,237,0.3);
    box-shadow: 0 16px 48px rgba(0,0,0,0.28);
}
.pricing-card.pricing-featured {
    background: linear-gradient(145deg, rgba(124,58,237,0.22), rgba(109,40,217,0.14));
    border-color: rgba(124,58,237,0.45);
    box-shadow: 0 0 0 1px rgba(124,58,237,0.28), 0 24px 80px rgba(124,58,237,0.22);
}
.pricing-card.pricing-featured:hover { box-shadow: 0 0 0 1px rgba(124,58,237,0.4), 0 32px 100px rgba(124,58,237,0.28); }

/* ---- FAQ ---- */
.faq-item {
    background: rgba(255,255,255,0.03);
    transition: border-color 0.25s;
}
.faq-item:hover { border-color: rgba(124,58,237,0.28) !important; }
.faq-btn {
    background: transparent;
    cursor: pointer;
}
.faq-btn[aria-expanded="true"] .faq-icon { transform: rotate(45deg) !important; }
.faq-icon { transition: transform 0.3s ease !important; }

/* ---- Contact Form Input ---- */
.form-input {
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(255,255,255,0.08);
    color: #fff;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input::placeholder { color: rgba(255,255,255,0.22); }
.form-input:focus {
    border-color: rgba(124,58,237,0.6);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}

/* ---- Social Buttons ---- */
.social-btn { color: #71717A; }
.social-btn:hover {
    background: #7C3AED !important;
    border-color: #7C3AED !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* ---- Violet text utility ---- */
.text-violet { color: #7C3AED; }
.text-violet-light { color: #A78BFA; }

/* ---- Responsive: mobile tweaks ---- */
@media (max-width: 768px) {
    .orb-violet { width: 300px; height: 300px; top: -40px; left: -40px; }
    .orb-cyan   { width: 220px; height: 220px; }
    .float-badge-tl { right: -8px !important; top: -8px !important; }
    .float-badge-br { left: -8px !important; bottom: 10px !important; }
}

/* ---- AOS fallback: 4sn geçerse her şey görünsün ---- */
@keyframes aosReveal { to { opacity: 1; transform: none; } }
[data-aos]:not(.aos-animate) {
    animation: aosReveal 0.01s 4s forwards;
}

/* ---- Keyframes ---- */
@keyframes pulseAnim {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .5; transform: scale(1.5); }
}
@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(28px, -18px) scale(1.04); }
    66%       { transform: translate(-18px, 28px) scale(.96); }
}
