/*
 * Futia Light Theme Override
 * Version: 1.0.0
 * Date: 2026-04-15
 *
 * Activates when body has class "futia-light".
 * Does NOT modify any existing CSS — only adds overrides.
 *
 * Color Palette:
 *   BG Primary:   #fafafa
 *   BG Secondary:  #f0f0f5
 *   BG Tertiary:   #e8e8f0
 *   Surface/Card:  #ffffff
 *   Text Primary:  #1a1a2e
 *   Text Secondary:#4a4a5a
 *   Text Muted:    #7a7a8a
 *   Accent Violet: #8b5cf6 (unchanged)
 *   Accent Indigo: #6366f1 (unchanged)
 *   Accent Cyan:   #06b6d4 (unchanged)
 */

/* ========================================
   1. CSS Custom Property Overrides
   ======================================== */

body.futia-light {
    /* Backgrounds */
    --bg-primary: #fafafa;
    --bg-secondary: #f0f0f5;
    --bg-tertiary: #e8e8f0;
    --bg-card: #ffffff;
    --bg-card-hover: #f8f8fc;

    /* Glassmorphism — white surfaces for light */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-bg-hover: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-border-hover: rgba(0, 0, 0, 0.14);

    /* Text */
    --text-primary: #1a1a2e;
    --text-secondary: #4a4a5a;
    --text-muted: #7a7a8a;

    /* Accents — keep brand colors */
    --accent-primary: #8b5cf6;
    --accent-secondary: #6366f1;
    --accent-tertiary: #06b6d4;

    /* Gradients — same hues, adjusted for light background */
    --gradient-primary: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #06b6d4 100%);
    --gradient-secondary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --gradient-glow: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
    --gradient-accent-soft: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.05) 50%, rgba(6, 182, 212, 0.06) 100%);

    /* Borders */
    --border-color: rgba(0, 0, 0, 0.08);
    --border-color-hover: rgba(0, 0, 0, 0.15);

    /* Shadows — more visible on white */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.10);
    --shadow-glow: 0 0 40px rgba(139, 92, 246, 0.15);
    --shadow-glow-lg: 0 0 80px rgba(139, 92, 246, 0.10), 0 0 160px rgba(99, 102, 241, 0.05);
    --shadow-glow-accent: 0 8px 32px rgba(139, 92, 246, 0.20);
}

/* ========================================
   2. Body & HTML Base
   ======================================== */

body.futia-light {
    background-color: #fafafa;
    color: #1a1a2e;
}

/* Remove dark cosmic background layers */
body.futia-light::before {
    background:
        radial-gradient(ellipse 80% 60% at 50% 20%, rgba(139, 92, 246, 0.04) 0%, transparent 55%),
        radial-gradient(ellipse 45% 40% at 80% 10%, rgba(6, 182, 212, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse 55% 50% at 15% 75%, rgba(99, 102, 241, 0.04) 0%, transparent 55%),
        radial-gradient(ellipse 40% 35% at 85% 85%, rgba(139, 92, 246, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse 25% 20% at 5% 5%, rgba(59, 130, 246, 0.02) 0%, transparent 50%),
        linear-gradient(180deg, #fafafa 0%, #f5f5fa 25%, #f0f0f5 50%, #f5f5fa 75%, #fafafa 100%);
}

/* Noise texture overlay — invert for light */
body.futia-light::after {
    opacity: 0.015;
}

/* ========================================
   3. Cosmic Background — hide stars, dim nebulae
   ======================================== */

body.futia-light .cosmic-stars {
    opacity: 0;
}

body.futia-light .cosmic-stars::before,
body.futia-light .cosmic-stars::after {
    display: none;
}

body.futia-light .cosmic-nebula::before {
    background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.04) 0%, rgba(88, 48, 160, 0.02) 40%, transparent 70%);
}

body.futia-light .cosmic-nebula::after {
    background: radial-gradient(ellipse at center, rgba(6, 182, 212, 0.03) 0%, rgba(59, 130, 246, 0.015) 40%, transparent 70%);
}

/* ========================================
   4. Text Selection
   ======================================== */

body.futia-light ::selection {
    background: rgba(139, 92, 246, 0.2);
    color: #1a1a2e;
}

body.futia-light ::-moz-selection {
    background: rgba(139, 92, 246, 0.2);
    color: #1a1a2e;
}

/* ========================================
   5. Scrollbar
   ======================================== */

body.futia-light ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.futia-light ::-webkit-scrollbar-track {
    background: #f0f0f5;
}

body.futia-light ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    border: 2px solid #f0f0f5;
}

body.futia-light ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* Firefox scrollbar */
body.futia-light {
    scrollbar-color: rgba(0, 0, 0, 0.15) #f0f0f5;
}

/* ========================================
   6. Typography
   ======================================== */

body.futia-light h1,
body.futia-light h2,
body.futia-light h3,
body.futia-light h4,
body.futia-light h5,
body.futia-light h6 {
    color: #1a1a2e;
}

/* Gradient text — stays the same, works on light bg */

/* Glow text — reduce glow intensity on light bg */
body.futia-light .glow-text {
    text-shadow: 0 0 40px rgba(139, 92, 246, 0.15), 0 0 80px rgba(99, 102, 241, 0.08);
}

/* ========================================
   7. Links
   ======================================== */

body.futia-light a {
    color: inherit;
}

body.futia-light a:hover {
    color: #7c3aed;
}

/* ========================================
   8. Header & Navigation
   ======================================== */

body.futia-light .header {
    background: rgba(250, 250, 250, 0.85) !important;
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body.futia-light .header.scrolled {
    background: rgba(250, 250, 250, 0.95) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(139, 92, 246, 0.05);
}

body.futia-light .nav-links a {
    color: #1a1a2e;
}

body.futia-light .nav-links a:hover,
body.futia-light .nav-links a.current-menu-item,
body.futia-light .nav-links a.active {
    color: #7c3aed;
}

body.futia-light .social-icons a {
    color: #4a4a5a;
}

body.futia-light .social-icons a:hover {
    color: #8b5cf6;
}

body.futia-light .mobile-menu-btn span {
    background: #1a1a2e;
}

/* Logo text — dark navy to violet gradient for light bg */
body.futia-light .logo-text {
    background: linear-gradient(135deg, #1a1a2e 0%, #1a1a2e 30%, #8b5cf6 65%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================
   9. Buttons
   ======================================== */

/* Primary button — keep gradient, adjust border */
body.futia-light .btn-primary {
    border: 1px solid rgba(139, 92, 246, 0.3);
    box-shadow:
        0 4px 20px rgba(124, 58, 237, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        inset 0 -2px 6px rgba(0, 0, 0, 0.1);
}

body.futia-light .btn-primary:hover {
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow:
        0 8px 30px rgba(124, 58, 237, 0.25),
        inset 0 1px 1px rgba(255, 255, 255, 0.5),
        inset 0 -2px 6px rgba(0, 0, 0, 0.1);
}

/* Outline button — dark border/text for light bg */
body.futia-light .btn-outline {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #1a1a2e;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 4px rgba(0, 0, 0, 0.03);
}

body.futia-light .btn-outline::before {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);
}

body.futia-light .btn-outline:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.2);
    color: #1a1a2e;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.06),
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 4px rgba(0, 0, 0, 0.03);
}

/* Ghost button */
body.futia-light .btn-ghost {
    color: #4a4a5a;
}

body.futia-light .btn-ghost:hover {
    color: #1a1a2e;
    background: rgba(0, 0, 0, 0.04);
}

/* ========================================
   10. Glass Utility
   ======================================== */

body.futia-light .glass {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

body.futia-light .glass:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.12);
}

/* ========================================
   11. Hero Section
   ======================================== */

/* Hero brand text — still gradient, but adapt start color */
body.futia-light .hero-brand-text {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 25%, #06b6d4 50%, #a78bfa 75%, #8b5cf6 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 30px rgba(139, 92, 246, 0.15));
}

body.futia-light .hero-title {
    color: #1a1a2e;
}

body.futia-light .hero-subtitle {
    color: #4a4a5a;
}

/* Hero stats glass card */
body.futia-light .hero-stats {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

body.futia-light .stat:hover {
    background: rgba(0, 0, 0, 0.02);
}

body.futia-light .stat-divider {
    background: rgba(0, 0, 0, 0.08);
}

body.futia-light .stat-label {
    color: #7a7a8a;
}

/* Badge */
body.futia-light .badge {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #4a4a5a;
}

/* Section badge */
body.futia-light .section-badge {
    background: rgba(139, 92, 246, 0.06);
    border: 1px solid rgba(139, 92, 246, 0.15);
}

/* ========================================
   12. Services Section
   ======================================== */

/* Service cards — white surface */
body.futia-light .service-card {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

body.futia-light .service-card::after {
    background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(139, 92, 246, 0.04) 0%, transparent 60%);
}

body.futia-light .service-card:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(139, 92, 246, 0.2);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08), 0 0 40px rgba(139, 92, 246, 0.06);
}

body.futia-light .service-card.featured {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.04) 0%, rgba(99, 102, 241, 0.03) 100%) !important;
    border-color: rgba(139, 92, 246, 0.15);
}

body.futia-light .service-card h3 {
    color: #1a1a2e;
}

body.futia-light .service-card p {
    color: #4a4a5a;
}

body.futia-light .service-features li {
    color: #4a4a5a;
}

/* Popular cards */
body.futia-light .popular-card {
    background: transparent !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.futia-light .popular-card:hover {
    background: rgba(139, 92, 246, 0.03) !important;
    border-color: rgba(139, 92, 246, 0.25) !important;
    box-shadow:
        0 0 30px rgba(139, 92, 246, 0.08),
        0 0 60px rgba(139, 92, 246, 0.04),
        0 25px 60px rgba(0, 0, 0, 0.08);
}

body.futia-light .popular-card p {
    color: #4a4a5a;
}

/* Services page */
body.futia-light .services-page {
    background: #fafafa;
}

body.futia-light .services-hero {
    background: #f0f0f5;
}

body.futia-light .services-hero .page-subtitle {
    color: #4a4a5a;
}

body.futia-light .services-grid-section .service-card {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

body.futia-light .services-grid-section .service-card:hover {
    border-color: rgba(139, 92, 246, 0.2);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06), 0 0 40px rgba(139, 92, 246, 0.06);
}

body.futia-light .services-grid-section .service-desc {
    color: #4a4a5a;
}

body.futia-light .services-cta-box {
    background: rgba(139, 92, 246, 0.04);
    border: 1px solid rgba(139, 92, 246, 0.1);
}

body.futia-light .services-cta-box p {
    color: #4a4a5a;
}

/* ========================================
   13. About Section
   ======================================== */

body.futia-light .about-description {
    color: #4a4a5a;
}

body.futia-light .about-feature .feature-icon {
    background: rgba(139, 92, 246, 0.06);
    border: 1px solid rgba(139, 92, 246, 0.12);
}

body.futia-light .about-feature:hover .feature-icon {
    background: rgba(139, 92, 246, 0.10);
    border-color: rgba(139, 92, 246, 0.2);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.08);
}

body.futia-light .feature-content p {
    color: #4a4a5a;
}

body.futia-light .about-card {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

body.futia-light .about-stat .label {
    color: #7a7a8a;
}

/* ========================================
   14. CTA Section
   ======================================== */

body.futia-light .cta-content p {
    color: #4a4a5a;
}

body.futia-light .cta-step {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.futia-light .cta-step span {
    color: #1a1a2e;
}

body.futia-light .cta-step-arrow {
    color: #7a7a8a;
}

body.futia-light .cta-trust-row span {
    color: #4a4a5a;
}

/* ========================================
   15. Contact Section
   ======================================== */

body.futia-light .contact-card {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

body.futia-light .contact-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body.futia-light .contact-icon {
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.15);
}

body.futia-light .contact-details a,
body.futia-light .contact-details p {
    color: #4a4a5a;
}

body.futia-light .contact-social {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

body.futia-light .contact-form-wrapper {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* ========================================
   16. Forms & Inputs
   ======================================== */

body.futia-light .form-group input,
body.futia-light .form-group select,
body.futia-light .form-group textarea {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.10);
    color: #1a1a2e;
}

body.futia-light .form-group input::placeholder,
body.futia-light .form-group textarea::placeholder {
    color: #9a9aaa;
}

body.futia-light .form-group input:focus,
body.futia-light .form-group select:focus,
body.futia-light .form-group textarea:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.08);
}

body.futia-light .form-group select option {
    background: #ffffff;
    color: #1a1a2e;
}

body.futia-light .form-group select optgroup {
    background: #f0f0f5;
    color: #7a7a8a;
}

/* Global input override for transparent sections */
body.futia-light input,
body.futia-light textarea,
body.futia-light select {
    background: #ffffff !important;
    color: #1a1a2e;
    border-color: rgba(0, 0, 0, 0.10);
}

/* WordPress Contact Form 7 */
body.futia-light .wpcf7-form-control {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.10);
    color: #1a1a2e;
}

/* ========================================
   17. Social Icons
   ======================================== */

/* Social floating icons — keep brand colors, adjust shadow */
body.futia-light .sf-icon {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

body.futia-light .sf-icon-wrap:hover .sf-icon {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* TikTok & X — slightly lighter bg for light theme */
body.futia-light .sf-icon.sf-tiktok { background: #222222; }
body.futia-light .sf-icon.sf-x { background: #333333; }

/* Legacy social links */
body.futia-light .social-link {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #4a4a5a;
}

body.futia-light .social-link:hover {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.08);
}

/* Post share social links */
body.futia-light .single-post .post-footer .post-share .social-link,
body.futia-light .post-share .social-link {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #4a4a5a;
}

body.futia-light .single-post .post-footer .post-share .social-link:hover,
body.futia-light .post-share .social-link:hover {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

/* ========================================
   18. Footer
   ======================================== */

body.futia-light .footer {
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.03) 100%) !important;
}

body.futia-light .footer-brand p {
    color: #4a4a5a;
}

body.futia-light .footer-social a {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #4a4a5a;
}

body.futia-light .footer-social a:hover {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

body.futia-light .footer-column a,
body.futia-light .footer-column li {
    color: #4a4a5a;
}

body.futia-light .footer-column a:hover {
    color: #8b5cf6;
}

body.futia-light .footer-column li i {
    color: #7a7a8a;
}

body.futia-light .footer-bottom {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

body.futia-light .footer-bottom p {
    color: #7a7a8a;
}

/* Footer logo — dark variant */
body.futia-light .footer .logo-text {
    background: linear-gradient(135deg, #1a1a2e 0%, #1a1a2e 30%, #8b5cf6 65%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================
   19. Mobile Menu
   ======================================== */

body.futia-light .mobile-menu {
    background: rgba(250, 250, 250, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body.futia-light .mobile-nav-links li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body.futia-light .mobile-nav-links a {
    color: #1a1a2e;
}

body.futia-light .mobile-social a {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #4a4a5a;
}

body.futia-light .mobile-menu-buttons {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* ========================================
   20. Blog & Post Styles
   ======================================== */

body.futia-light .blog-card {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

body.futia-light .blog-card:hover {
    border-color: rgba(139, 92, 246, 0.15);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08), 0 0 30px rgba(139, 92, 246, 0.04);
}

body.futia-light .blog-card-meta {
    color: #7a7a8a;
}

body.futia-light .blog-card p {
    color: #4a4a5a;
}

/* Single post */
body.futia-light .post-meta {
    color: #7a7a8a;
}

body.futia-light .post-content {
    color: #4a4a5a;
}

body.futia-light .post-content h2,
body.futia-light .post-content h3 {
    color: #1a1a2e;
}

body.futia-light .post-tags {
    color: #4a4a5a;
}

body.futia-light .post-tags strong {
    color: #1a1a2e;
}

body.futia-light .post-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

body.futia-light .post-share strong {
    color: #1a1a2e;
}

/* ========================================
   21. Page Styles
   ======================================== */

body.futia-light .page-header h1 {
    color: #1a1a2e;
}

body.futia-light .page-header p {
    color: #4a4a5a;
}

/* ========================================
   22. Kanal Modal
   ======================================== */

body.futia-light .kanal-modal-overlay {
    background: rgba(0, 0, 0, 0.4);
}

body.futia-light .kanal-modal-container {
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

body.futia-light .kanal-modal-close {
    background: #f0f0f5;
    color: #1a1a2e;
}

body.futia-light .kanal-modal-close:hover {
    background: #e8e8f0;
}

body.futia-light .kanal-gallery-slider {
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #f0f0f5;
}

body.futia-light .modal-loading {
    color: #4a4a5a;
}

body.futia-light .modal-error {
    color: #dc3545;
}

/* ========================================
   23. Hediye (Gift) Cards
   ======================================== */

body.futia-light .hediye-page-title {
    background: linear-gradient(135deg, #1a1a2e 0%, #8b5cf6 50%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.futia-light .hediye-page-subtitle {
    color: #4a4a5a;
}

body.futia-light .hediye-kart {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* ========================================
   24. Password Protected Page
   ======================================== */

body.futia-light .password-content {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
}

/* ========================================
   25. Error (404) Page
   ======================================== */

body.futia-light .error-icon {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

body.futia-light .error-content p {
    color: #4a4a5a;
}

/* ========================================
   26. Floating WhatsApp Button
   ======================================== */

body.futia-light .floating-whatsapp {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.20);
}

/* ========================================
   27. Cards Generic Override (transparent !important sections)
   ======================================== */

/* Override the global transparent !important cards with white surfaces */
body.futia-light .service-card,
body.futia-light .product-card,
body.futia-light .kanal-card,
body.futia-light .feature-card,
body.futia-light .step-card,
body.futia-light .testimonial-card,
body.futia-light .faq-item,
body.futia-light .stat-card,
body.futia-light .team-card,
body.futia-light .bundle-card,
body.futia-light .product-item,
body.futia-light .hediye-card,
body.futia-light .upsell-card,
body.futia-light .blog-card,
body.futia-light .howto-step,
body.futia-light .tech-card,
body.futia-light .value-card {
    background: rgba(255, 255, 255, 0.8) !important;
}

/* ========================================
   28. Section Backgrounds
   ======================================== */

/* All sections stay transparent but the body bg is now light */
/* No changes needed — inherits from body.futia-light bg */

/* ========================================
   29. Comment Section
   ======================================== */

body.futia-light .comment-form-cookies-consent {
    color: #4a4a5a;
}

body.futia-light .comment-author-name {
    color: #1a1a2e;
}

body.futia-light .comment-content {
    color: #4a4a5a;
}

/* ========================================
   30. WordPress Gutenberg Block Overrides
   ======================================== */

body.futia-light .wp-block-group,
body.futia-light .wp-block-column,
body.futia-light .wp-block-columns,
body.futia-light .entry-content,
body.futia-light .post-content {
    color: #4a4a5a;
}

/* ========================================
   31. Images & Media — subtle border on light bg
   ======================================== */

body.futia-light .post-thumbnail img,
body.futia-light .post-content img,
body.futia-light .blog-card-image img {
    border: 1px solid rgba(0, 0, 0, 0.04);
}

body.futia-light video {
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 8px;
}

/* ========================================
   32. Tables (if present in post content)
   ======================================== */

body.futia-light table {
    border-collapse: collapse;
}

body.futia-light table th {
    background: #f0f0f5;
    color: #1a1a2e;
    border-bottom: 2px solid rgba(0, 0, 0, 0.10);
}

body.futia-light table td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    color: #4a4a5a;
}

body.futia-light table tr:hover td {
    background: rgba(0, 0, 0, 0.02);
}

/* ========================================
   33. Code Blocks
   ======================================== */

body.futia-light code {
    background: #f0f0f5;
    color: #7c3aed;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.9em;
}

body.futia-light pre {
    background: #f0f0f5;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
}

body.futia-light pre code {
    background: transparent;
    padding: 0;
    color: #1a1a2e;
}

/* ========================================
   34. Blockquotes
   ======================================== */

body.futia-light blockquote {
    border-left: 4px solid #8b5cf6;
    background: rgba(139, 92, 246, 0.04);
    padding: 16px 24px;
    margin: 20px 0;
    color: #4a4a5a;
    border-radius: 0 8px 8px 0;
}

/* ========================================
   35. Tooltips (generic)
   ======================================== */

body.futia-light [data-tooltip]::after {
    background: #1a1a2e;
    color: #ffffff;
}

/* ========================================
   36. Progress Bars (generic)
   ======================================== */

body.futia-light .progress-bar,
body.futia-light .progress {
    background: #e8e8f0;
}

body.futia-light .progress-fill,
body.futia-light .progress-bar-fill {
    background: var(--gradient-primary);
}

/* ========================================
   37. Alerts / Notices (generic)
   ======================================== */

body.futia-light .alert,
body.futia-light .notice {
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.9);
    color: #1a1a2e;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.futia-light .alert-success,
body.futia-light .notice-success {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.15);
    color: #065f46;
}

body.futia-light .alert-error,
body.futia-light .notice-error,
body.futia-light .alert-danger {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.15);
    color: #991b1b;
}

body.futia-light .alert-warning,
body.futia-light .notice-warning {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.15);
    color: #92400e;
}

body.futia-light .alert-info,
body.futia-light .notice-info {
    background: rgba(6, 182, 212, 0.06);
    border-color: rgba(6, 182, 212, 0.15);
    color: #155e75;
}

/* ========================================
   38. Badges (colored variants stay same)
   ======================================== */

/* .badge-popular, .badge-new, .badge-discount keep gradient bg and white text */
/* .featured-badge keeps gradient bg and white text */
/* No changes needed — these are colored badges on any bg */

/* ========================================
   39. Service CTA Buttons
   ======================================== */

body.futia-light .service-cta.btn-detail {
    border: 1px solid #8b5cf6;
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.04);
}

body.futia-light .service-cta.btn-detail:hover {
    background: rgba(139, 92, 246, 0.08);
}

/* ========================================
   40. Affiliate Nav Button
   ======================================== */

/* Keep as-is — gradient bg with white text works on both themes */

/* ========================================
   41. Hardcoded rgba(255,255,255,*) Overrides
   These appear in components not using variables
   ======================================== */

/* Hero tagline pill — keep as-is, gradient bg with white text */

/* btn-primary ::before shine effect */
body.futia-light .btn-primary::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

/* btn-outline ::before shine */
/* Already overridden above */

/* btn-ghost hover */
/* Already overridden above */

/* ========================================
   42. Kanal, Hakkimizda, Otomasyon, YT Pages
   ======================================== */

body.futia-light .section-title {
    color: #1a1a2e;
}

body.futia-light .section-subtitle {
    color: #4a4a5a;
}

/* ========================================
   43. Specific Hardcoded Dark Backgrounds
   ======================================== */

/* Header with rgba(12,11,20,*) */
/* Already overridden in Section 8 */

/* Header scrolled with rgba(12,11,20,0.9) */
/* Already overridden in Section 8 */

/* Mobile menu with rgba(17,15,29,0.95) */
/* Already overridden in Section 19 */

/* Header override at line ~9512 in style.css */
body.futia-light .header {
    background: rgba(250, 250, 250, 0.85) !important;
}

/* ========================================
   44. Weglot Language Switcher
   ======================================== */

body.futia-light .weglot-container a {
    color: #1a1a2e;
}

body.futia-light .weglot-container .wgcurrent {
    color: #1a1a2e;
}

/* Nav-right switcher container — light surface */
body.futia-light .nav-right .country-selector {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.futia-light .country-selector:hover {
    border-color: rgba(139, 92, 246, 0.3) !important;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.06) !important;
}

/* Current language text — dark */
body.futia-light .country-selector .wgcurrent {
    color: #1a1a2e !important;
}

/* Chevron arrow — dark */
body.futia-light .country-selector .wgcurrent::after {
    border-top-color: rgba(0, 0, 0, 0.35) !important;
}

/* Dropdown panel — white surface */
body.futia-light .country-selector .wg-drop {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Dropdown items */
body.futia-light .country-selector .wg-li a {
    color: #4a4a5a !important;
}

body.futia-light .country-selector .wg-li a:hover {
    background: rgba(139, 92, 246, 0.06) !important;
    color: #1a1a2e !important;
}

/* Mobile menu language switcher */
body.futia-light .mobile-menu-lang .country-selector {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

body.futia-light .mobile-menu-lang .country-selector .wgcurrent {
    color: #1a1a2e !important;
}

/* ========================================
   45. No-Services Placeholder
   ======================================== */

body.futia-light .no-services {
    color: #7a7a8a;
}

/* ========================================
   46. Print Styles — ensure light theme prints clean
   ======================================== */

@media print {
    body.futia-light {
        background: #fff !important;
    }

    body.futia-light::before,
    body.futia-light::after,
    body.futia-light .cosmic-stars,
    body.futia-light .cosmic-nebula {
        display: none !important;
    }

    body.futia-light .header {
        background: #fff !important;
        border-bottom: 1px solid #ddd !important;
        box-shadow: none !important;
    }
}

/* ========================================
   47. Reduced Motion — same approach as dark theme
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    body.futia-light .cosmic-nebula::before,
    body.futia-light .cosmic-nebula::after {
        animation: none;
    }
}

/* ========================================
   48. Focus States — visible on light bg
   ======================================== */

body.futia-light :focus-visible {
    outline: 2px solid #8b5cf6;
    outline-offset: 2px;
}

body.futia-light button:focus-visible,
body.futia-light a:focus-visible,
body.futia-light input:focus-visible,
body.futia-light select:focus-visible,
body.futia-light textarea:focus-visible {
    outline: 2px solid #8b5cf6;
    outline-offset: 2px;
}

/* ========================================
   49. Horizontal Rules & Dividers
   ======================================== */

body.futia-light hr {
    border-color: rgba(0, 0, 0, 0.08);
}

/* ========================================
   50. Misc Utility Overrides
   ======================================== */

/* Accent colored text that might be hard to read on light */
body.futia-light .text-muted {
    color: #7a7a8a;
}

body.futia-light .text-secondary {
    color: #4a4a5a;
}

/* ========================================
   51. KK (Kanal Kurulum) Section Overrides
   ======================================== */

body.futia-light .kk-form-group input,
body.futia-light .kk-form-group textarea,
body.futia-light .kk-form-group select {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.10);
    color: #1a1a2e;
}

body.futia-light .kk-form-group input::placeholder,
body.futia-light .kk-form-group textarea::placeholder {
    color: #9a9aaa;
}

/* ========================================
   52. Transition Overrides — keep smooth
   ======================================== */

/* All transitions from CSS variables remain unchanged */
/* --transition: all 0.3s ease; — works for both themes */

/* ========================================
   END OF LIGHT THEME OVERRIDES
   ======================================== */