/* ============================================================================
 * corxor-qs-light-fix.css
 * ----------------------------------------------------------------------------
 * Site-wide light-mode readability fix for QuickSecure pages (Platform,
 * Architecture, MlGovernance, TenantIsolation, Index, etc.) and any other
 * page that uses .qs-* classes designed originally for dark backgrounds.
 *
 * THE PROBLEM
 *   QuickSecure pages declare their styles in inline <style> blocks using
 *   hardcoded dark-mode colors:
 *     • Text:         #cbd5e1, #94a3b8, #64748b, #e2e8f0, #ffffff
 *     • Card bg:      rgba(15,23,42,0.6-0.7)  (dark navy)
 *     • Borders:      rgba(255,255,255,0.06)
 *     • Gradients:    "background: linear-gradient(135deg, #ffffff, ...)" +
 *                      "-webkit-text-fill-color: transparent" → produces
 *                      WHITE-ish gradient text, invisible on white bg
 *   The legacy <body class="qs-dark-page"> class is REMOVED by the layout
 *   bootstrap script when the user is in light mode — but because almost
 *   none of the .qs-* selectors are scoped to .qs-dark-page, the dark
 *   colors bleed through into the light page and produce the
 *   "yazılar okunmuyor" symptom (Hamit screenshots 2026-05-26).
 *
 * THE FIX (this file)
 *   Override the unreadable colors ONLY when html[data-cx-theme="light"]
 *   is set. Dark mode remains entirely untouched.
 *
 *   Specificity is bumped via `html[data-cx-theme="light"]` (40) so we
 *   beat the inline single-class rules (10) without resorting to
 *   !important wherever possible. !important is used only where the
 *   inline rule itself uses !important or where a -webkit-text-fill-color
 *   gradient text trick has to be neutralized.
 *
 *   Loaded from _CleanLayout.cshtml so every page picks it up.
 * ========================================================================= */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. TYPOGRAPHY — body text, headings, prose, leads
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html[data-cx-theme="light"] .qs-h1 { color: #0a0a0b; }

/* The gradient title trick uses "background: linear-gradient(..., #ffffff, ...)"
   + "-webkit-text-fill-color: transparent". In light mode the gradient is
   nearly invisible. Strip the gradient and use solid dark ink. */
html[data-cx-theme="light"] .qs-section-title,
html[data-cx-theme="light"] .qs-h1 .grad {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    background-clip: initial !important;
    color: #0a0a0b !important;
}

/* Prose / leads / paragraphs */
html[data-cx-theme="light"] .qs-hero-lead,
html[data-cx-theme="light"] .qs-prose,
html[data-cx-theme="light"] .qs-prose-lead { color: #3a3a3d; }
html[data-cx-theme="light"] .qs-prose strong,
html[data-cx-theme="light"] .qs-subhead     { color: #0a0a0b; }

/* Section overline (small label above each section title) */
html[data-cx-theme="light"] .qs-overline { color: #0e7490; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. CARDS — feature, compact, mode, price, AI demo
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html[data-cx-theme="light"] .qs-fcard,
html[data-cx-theme="light"] .qs-compact-card,
html[data-cx-theme="light"] .qs-mode-card,
html[data-cx-theme="light"] .qs-price-card,
html[data-cx-theme="light"] .qs-ai-card {
    background: #ffffff;
    border-color: rgba(10,10,11,0.08);
    box-shadow: 0 1px 0 rgba(10,10,11,0.04), 0 8px 24px rgba(10,10,11,0.04);
}

html[data-cx-theme="light"] .qs-fcard h3,
html[data-cx-theme="light"] .qs-compact-card h4,
html[data-cx-theme="light"] .qs-mode-card h4 { color: #0a0a0b; }

html[data-cx-theme="light"] .qs-fcard p,
html[data-cx-theme="light"] .qs-compact-card p,
html[data-cx-theme="light"] .qs-mode-card p { color: #3a3a3d; }

/* Icon backgrounds inside feature cards — slightly cooler tint */
html[data-cx-theme="light"] .qs-ficon { background: rgba(8,145,178,0.10); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. CALLOUT / NOTICE boxes
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html[data-cx-theme="light"] .qs-callout {
    background: rgba(8,145,178,0.06);
    border-left-color: #0891b2;
}
html[data-cx-theme="light"] .qs-callout p { color: #0a0a0b; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. STEPS — numbered list (1, 2, 3, …)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html[data-cx-theme="light"] .qs-steps li {
    color: #3a3a3d;
    border-bottom-color: rgba(10,10,11,0.06);
}
html[data-cx-theme="light"] .qs-steps li strong { color: #0a0a0b; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. PIPELINE DIAGRAM
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html[data-cx-theme="light"] .qs-pipe-node {
    background: rgba(8,145,178,0.06);
    border-color: rgba(8,145,178,0.25);
}
html[data-cx-theme="light"] .qs-pipe-node .label    { color: #0a0a0b; }
html[data-cx-theme="light"] .qs-pipe-node .sublabel { color: #5a5a5d; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. PRICING — name / amount / desc / list / notice
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html[data-cx-theme="light"] .qs-price-name           { color: #0a0a0b; }
html[data-cx-theme="light"] .qs-price-amount         { color: #0a0a0b; }
html[data-cx-theme="light"] .qs-price-amount span    { color: #5a5a5d; }
html[data-cx-theme="light"] .qs-price-desc           { color: #5a5a5d; }
html[data-cx-theme="light"] .qs-price-list li       { color: #3a3a3d; }
html[data-cx-theme="light"] .qs-price-notice {
    background: rgba(8,145,178,0.06);
    border-color: rgba(8,145,178,0.20);
}
html[data-cx-theme="light"] .qs-price-notice p      { color: #3a3a3d; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. FAQ accordion — these were the most-invisible in Hamit's screenshots
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html[data-cx-theme="light"] .qs-faq-item   { border-bottom-color: rgba(10,10,11,0.08); }
html[data-cx-theme="light"] .qs-faq-q      { color: #0a0a0b; }
html[data-cx-theme="light"] .qs-faq-q i    { color: #5a5a5d; }
html[data-cx-theme="light"] .qs-faq-a      { color: #3a3a3d; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. BUTTONS — ghost/outline (transparent bg variants only)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html[data-cx-theme="light"] .qs-btn-ghost {
    color: #3a3a3d;
    border-color: rgba(10,10,11,0.15);
}
html[data-cx-theme="light"] .qs-btn-ghost:hover {
    border-color: #0891b2;
    color: #0e7490;
}
html[data-cx-theme="light"] .qs-btn-outline {
    color: #5a5a5d;
    border-color: rgba(10,10,11,0.10);
}
html[data-cx-theme="light"] .qs-btn-outline:hover {
    border-color: rgba(10,10,11,0.25);
    color: #3a3a3d;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. CTA section gradient — the soft cyan glow was invisible on white;
      replace with a subtle warm fade
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html[data-cx-theme="light"] .qs-cta-section {
    background: linear-gradient(180deg, transparent 0%, rgba(8,145,178,0.04) 50%, transparent 100%);
}
html[data-cx-theme="light"] .qs-eval-note {
    background: rgba(10,10,11,0.04);
    border-color: rgba(10,10,11,0.10);
    color: #3a3a3d;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. SECTION ALT-BG — the white-on-white "rgba(255,255,255,0.02)" trick
       evaporates in light mode; give it a subtle neutral tint
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html[data-cx-theme="light"] .qs-section.alt-bg {
    background: #fafaf9;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. AI DEMO — input + response box + info banner
       The AI demo block is a separate dark-spotlight surface on Platform.
       In light mode, force a white card with dark ink so the textarea is
       readable.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html[data-cx-theme="light"] .qs-ai-input {
    background: #ffffff;
    border-color: rgba(10,10,11,0.15);
    color: #0a0a0b;
}
html[data-cx-theme="light"] .qs-ai-input::placeholder { color: #7a7c80; }
html[data-cx-theme="light"] .qs-ai-input:focus {
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8,145,178,0.12);
}
html[data-cx-theme="light"] .qs-ai-response-box {
    background: #fafaf9;
    border-color: rgba(10,10,11,0.08);
    color: #0a0a0b;
}
html[data-cx-theme="light"] .qs-ai-info-banner {
    background: rgba(8,145,178,0.05);
    border-color: rgba(8,145,178,0.18);
    color: #3a3a3d;
}
html[data-cx-theme="light"] .qs-ai-info-banner strong { color: #0a0a0b; }
html[data-cx-theme="light"] #qs-ai-response .ai-grounding {
    border-top-color: rgba(10,10,11,0.08);
    color: #5a5a5d;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   12. CHECKMARK PILL ROW (the "Grounded in real telemetry / Every response
       audit-logged / …" strip on the Platform page — the dark gray box
       with green check icons that Hamit circled)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Detect by direct attribute style hint — the inline style uses
   "background: rgba(30,41,59,0.65)" or similar dark surface on these.
   Cover the most common QS spotlight surfaces by class. The AI guarantees
   row is rendered inside a styled div using inline color: #cbd5e1 — handle
   by upgrading the contrast inside any .qs-section that hosts a dark
   spotlight panel. Specifically lift the inline-styled list items. */
html[data-cx-theme="light"] .qs-section [style*="background: rgba(30,41,59"],
html[data-cx-theme="light"] .qs-section [style*="background:rgba(30,41,59"],
html[data-cx-theme="light"] .qs-section [style*="background: rgba(15,23,42"],
html[data-cx-theme="light"] .qs-section [style*="background:rgba(15,23,42"] {
    background: #f4f5f7 !important;
    border-color: rgba(10,10,11,0.08) !important;
    color: #0a0a0b !important;
}
html[data-cx-theme="light"] .qs-section [style*="background: rgba(30,41,59"] *,
html[data-cx-theme="light"] .qs-section [style*="background:rgba(30,41,59"] *,
html[data-cx-theme="light"] .qs-section [style*="background: rgba(15,23,42"] *,
html[data-cx-theme="light"] .qs-section [style*="background:rgba(15,23,42"] * {
    color: #0a0a0b;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   13. INLINE STYLE RESCUES — last-resort sweep for paragraphs / spans
       whose `style="color:#cbd5e1"` is set DIRECTLY on the element.
       Inline style beats class CSS, so we have to match the inline attribute
       itself. Cover the four most common dark text colors used on the site.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html[data-cx-theme="light"] [style*="color: #cbd5e1"],
html[data-cx-theme="light"] [style*="color:#cbd5e1"],
html[data-cx-theme="light"] [style*="color: #e2e8f0"],
html[data-cx-theme="light"] [style*="color:#e2e8f0"] {
    color: #3a3a3d !important;
}
html[data-cx-theme="light"] [style*="color: #94a3b8"],
html[data-cx-theme="light"] [style*="color:#94a3b8"],
html[data-cx-theme="light"] [style*="color: #64748b"],
html[data-cx-theme="light"] [style*="color:#64748b"] {
    color: #5a5a5d !important;
}
/* Hero/title white text — these are bright cyan accents in dark mode but
   pure-white text used on light-mode bodies is unreadable. Only flip them
   to dark ink when the element is NOT inside a known dark spotlight
   wrapper (qs-v2-agent / qs-v2-aidemo / cx-cdef are intentionally dark
   in light mode per _CleanLayout.cshtml line 174). */
html[data-cx-theme="light"] [style*="color: #ffffff"]:not(.qs-v2-agent *):not(.qs-v2-aidemo *):not(.cx-cdef *):not(.qs-btn-primary):not(.qs-btn-buy),
html[data-cx-theme="light"] [style*="color:#ffffff"]:not(.qs-v2-agent *):not(.qs-v2-aidemo *):not(.cx-cdef *):not(.qs-btn-primary):not(.qs-btn-buy),
html[data-cx-theme="light"] [style*="color: #fff"]:not(.qs-v2-agent *):not(.qs-v2-aidemo *):not(.cx-cdef *):not(.qs-btn-primary):not(.qs-btn-buy):not([style*="background"]),
html[data-cx-theme="light"] [style*="color:#fff"]:not(.qs-v2-agent *):not(.qs-v2-aidemo *):not(.cx-cdef *):not(.qs-btn-primary):not(.qs-btn-buy):not([style*="background"]) {
    color: #0a0a0b !important;
}
