/*
   Aurora Typography v5 — site-wide typographic system for LANDING / PUBLIC
   PAGES ONLY. All rules are gated by `body.has-hero` so they don't bleed
   into dashboard, checkout, account, admin etc. (which set their own
   tighter spacing + smaller H1/H2 scales).

   Loaded AFTER all other CSS so it wins specificity ties when active.
*/

/* ============================================================================
   1. FONT FAMILY HIERARCHY (site-wide — these are safe)
   ============================================================================ */
:root {
    /* Site-wide single-font policy: Inter for display + body. Weight contrast
       (800/900 for headlines, 400-600 for body) provides hierarchy without
       a separate display font. Modern SaaS std (Linear, Resend, Cal.com). */
    --font-display: 'Inter', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;
}

/* ============================================================================
   2-7. LANDING-ONLY TYPOGRAPHY + SPACING SYSTEM
   Gated by body.has-hero — public landing pages only.
   ============================================================================ */

body.has-hero h1,
body.has-hero h2,
body.has-hero h3,
body.has-hero .pb-section-title,
body.has-hero .hx-h2,
body.has-hero .hx-hero-title,
body.has-hero .hm-hero-title,
body.has-hero .s01-t,
body.has-hero .s02-t, body.has-hero .s03-t, body.has-hero .s05-t,
body.has-hero .s07-t, body.has-hero .s08-t,
body.has-hero .scs-hero-t, body.has-hero .abt-hero-t,
body.has-hero .aff-hero-t, body.has-hero .pr-hero-t,
body.has-hero .pb-hero-title, body.has-hero .pb-hero-t {
    font-family: var(--font-display) !important;
    text-wrap: balance;
    word-spacing: 0.01em;
}

/* H1 HERO TITLE — uniform across landings */
body.has-hero h1.hm-hero-title,
body.has-hero h1.hm-hero-t,
body.has-hero .s01 h1, body.has-hero .s01-t,
body.has-hero .pb-hero-title, body.has-hero .pb-hero-t,
body.has-hero .scs-hero-t, body.has-hero .abt-hero-t,
body.has-hero .aff-hero-t, body.has-hero .pr-hero-t,
body.has-hero .hx-hero-title {
    font-size: clamp(40px, 5.2vw, 64px) !important;
    font-weight: 900 !important;
    line-height: 1.06 !important;
    letter-spacing: -0.025em !important;
    margin: 0 0 20px !important;
}

/* H2 SECTION TITLE — only target the canonical primary section headings.
   Generic `section h2` selector REMOVED 2026-05-21 because it was forcing
   every secondary H2 (.pr-include-t, .pr-tier-name, etc.) to the same
   48px primary scale, collapsing the page's natural hierarchy. */
body.has-hero .hx-h2,
body.has-hero .pb-section-title,
body.has-hero .s02-t, body.has-hero .s03-t, body.has-hero .s04-t,
body.has-hero .s05-t, body.has-hero .s06-t, body.has-hero .s07-t,
body.has-hero .s08-t,
/* Subpage section titles folded into the canonical scale 2026-06-02 so
   About / Custom Solutions / Use Cases section headings match the landing
   section H2 (was 900-weight / off-scale clamp(26-42) / -.04em → drift). */
body.has-hero .scs-about-t, body.has-hero .scs-caps-t,
body.has-hero .scs-section-t, body.has-hero .abt-section-t,
body.has-hero .uc-section-t, body.has-hero .uc-head-t,
body.has-hero .aff-section-t, body.has-hero .aff-about-t {
    font-size: var(--fs-section-h2) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 16px !important;
}

/* Card titles — only the canonical card title classes. Generic
   `section h3` REMOVED for the same reason: it homogenized .pb-feature-t,
   .pr-include-t etc to 20px, destroying hierarchy. Per-page card class
   styles in their own CSS files stay. */
body.has-hero .hx-card-t, body.has-hero .s02-card-t,
body.has-hero .s05-card-t, body.has-hero .pb-card-title {
    font-family: var(--font-display) !important;
    font-size: clamp(18px, 1.4vw, 20px) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.005em !important;
    margin: 0 0 8px !important;
}

/* Body / sub */
body.has-hero .hx-sub, body.has-hero .pb-section-sub,
body.has-hero .s02-sub, body.has-hero .s03-sub, body.has-hero .s05-sub,
body.has-hero .s07-sub, body.has-hero .s08-sub,
body.has-hero .scs-hero-sub, body.has-hero .abt-hero-sub,
body.has-hero .aff-hero-sub, body.has-hero .pr-hero-sub {
    font-family: var(--font-body) !important;
    font-size: clamp(16px, 1.3vw, 19px) !important;
    line-height: 1.6 !important;
    color: #475467;
    margin: 0 auto 24px !important; /* auto: hero sub ortalansın (sola yaslıydı) */
    max-width: 64ch;
}

body.has-hero .s01 .s01-sub, body.has-hero .s01 .s01-sub2,
body.has-hero .hm-hero-subtitle, body.has-hero .hm-hero-sub,
body.has-hero .pb-hero-sub, body.has-hero .pb-hero-subtitle,
body.has-hero .hx-s10 .hx-sub, body.has-hero .hx-s10 p,
body.has-hero .scs-hero .scs-hero-sub,
body.has-hero .abt-hero .abt-hero-sub,
body.has-hero .aff-hero .aff-hero-sub,
body.has-hero .pr-hero  .pr-hero-sub {
    color: rgba(255, 255, 255, 0.72) !important;
}

body.has-hero .hx-card-d, body.has-hero .s02-card-d,
body.has-hero .s05-card-d, body.has-hero .pb-card-d {
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: #667085 !important;
    margin: 0 !important;
}

/* SECTION PADDING — explicit class list only. Removed generic
   `body.has-hero section` selector because it also caught hero
   sections (.pb-hero, .scs-hero etc) and stacked 128px on top of
   their own internal padding. */
body.has-hero .pb-section,
body.has-hero .hx-s03, body.has-hero .hx-s04, body.has-hero .hx-s05,
body.has-hero .hx-s06, body.has-hero .hx-s07, body.has-hero .hx-s08,
body.has-hero .s02, body.has-hero .s03, body.has-hero .s04,
body.has-hero .s05, body.has-hero .s06, body.has-hero .s07, body.has-hero .s08,
body.has-hero .scs-section, body.has-hero .scs-about, body.has-hero .scs-caps,
body.has-hero .scs-stats, body.has-hero .scs-quotes,
body.has-hero .abt-story, body.has-hero .abt-values, body.has-hero .abt-stats,
body.has-hero .aff-section,
body.has-hero .pr-includes, body.has-hero .pr-compare, body.has-hero .pr-faq,
body.has-hero .pr-bcta {
    padding-top: clamp(80px, 9vw, 128px) !important;
    padding-bottom: clamp(80px, 9vw, 128px) !important;
}

body.has-hero .s01, body.has-hero .hm-hero-live {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* .pb-hero/.scs-hero/.abt-hero/.aff-hero/.pr-hero override REMOVED.
   Each subpage hero CSS already has its own internal padding architecture
   (e.g. .pb-hero-w inner wrapper, .scs-hero-content). Forcing 144px on
   the OUTER stacked on top of internal padding pushed H1 to 270-290px
   from page top. Let each subpage hero keep its tuned padding. */

body.has-hero .hx-s10, body.has-hero .s10,
body.has-hero .hm-s10-light, body.has-hero .pb-closing-cta {
    /* Closing CTA = --section-pad-lg (128), pricing .pr-bcta ile birebir eş. */
    padding-top: var(--section-pad-lg, clamp(80px, 9vw, 128px)) !important;
    padding-bottom: var(--section-pad-lg, clamp(80px, 9vw, 128px)) !important;
}

/* Mobile + tablet: tighter section rhythm across ALL landings (desktop 80-128
   was too tall on small screens). Mirrors the explicit class list above. */
@media (max-width: 991px) {
    body.has-hero .pb-section,
    body.has-hero .hx-s03, body.has-hero .hx-s04, body.has-hero .hx-s05, body.has-hero .hx-s06, body.has-hero .hx-s07, body.has-hero .hx-s08,
    body.has-hero .s02, body.has-hero .s03, body.has-hero .s04, body.has-hero .s05, body.has-hero .s06, body.has-hero .s07, body.has-hero .s08,
    body.has-hero .shp-cat-section, body.has-hero .scs-section, body.has-hero .scs-about, body.has-hero .scs-caps,
    body.has-hero .scs-stats, body.has-hero .scs-quotes, body.has-hero .abt-story, body.has-hero .abt-values,
    body.has-hero .abt-stats, body.has-hero .abt-timeline, body.has-hero .aff-section,
    body.has-hero .pr-includes, body.has-hero .pr-compare, body.has-hero .pr-faq, body.has-hero .pr-bcta,
    body.has-hero .hx-s10, body.has-hero .s10, body.has-hero .hm-s10-light, body.has-hero .pb-closing-cta {
        padding-top: clamp(56px, 8vw, 80px) !important;
        padding-bottom: clamp(56px, 8vw, 80px) !important;
    }
}
@media (max-width: 640px) {
    body.has-hero .pb-section,
    body.has-hero .hx-s03, body.has-hero .hx-s04, body.has-hero .hx-s05, body.has-hero .hx-s06, body.has-hero .hx-s07, body.has-hero .hx-s08,
    body.has-hero .s02, body.has-hero .s03, body.has-hero .s04, body.has-hero .s05, body.has-hero .s06, body.has-hero .s07, body.has-hero .s08,
    body.has-hero .shp-cat-section, body.has-hero .scs-section, body.has-hero .scs-about, body.has-hero .scs-caps,
    body.has-hero .scs-stats, body.has-hero .scs-quotes, body.has-hero .abt-story, body.has-hero .abt-values,
    body.has-hero .abt-stats, body.has-hero .abt-timeline, body.has-hero .aff-section,
    body.has-hero .pr-includes, body.has-hero .pr-compare, body.has-hero .pr-faq, body.has-hero .pr-bcta,
    body.has-hero .hx-s10, body.has-hero .s10, body.has-hero .hm-s10-light, body.has-hero .pb-closing-cta {
        padding-top: 52px !important;
        padding-bottom: 52px !important;
    }
}

/* Centered section heads */
body.has-hero .hx-head, body.has-hero .pb-section-head,
body.has-hero .s02-hd, body.has-hero .s05-hd,
body.has-hero .s07-hd, body.has-hero .s08-hd {
    max-width: min(760px, 90%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}
/* Mobile: section heads go full-width + left so their left edge lines up with
   the logo (modern mobile standard; applies across all landings). */
@media (max-width: 768px) {
    body.has-hero .hx-head, body.has-hero .pb-section-head,
    body.has-hero .s02-hd, body.has-hero .s05-hd,
    body.has-hero .s07-hd, body.has-hero .s08-hd {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left !important;
    }
}

/* Selection — safe site-wide */
::selection {
    background: color-mix(in srgb, var(--hue-accent, #7F56D9) 30%, transparent);
}

/* ============================================================================
   HERO CTA STANDARDIZATION — landing pages only
   ============================================================================ */
body.has-hero .hm-hero-btn-primary,
body.has-hero .s01-btn-primary,
body.has-hero .hx-btn-primary,
body.has-hero .pb-btn-primary,
body.has-hero .scs-btn-primary, body.has-hero .abt-btn-primary,
body.has-hero .aff-btn-primary, body.has-hero .pr-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 56px !important;
    padding: 16px 32px !important;
    font-family: var(--font-display) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.005em !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--c-cta-from, #FF7A5C) 0%, var(--c-cta-to, #F43F5E) 100%) !important;
    border: 0 !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px -4px rgba(244, 63, 94, 0.40),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: transform .14s cubic-bezier(.16, 1, .3, 1),
                box-shadow .18s cubic-bezier(.16, 1, .3, 1),
                background-image .18s ease !important;
}
body.has-hero .hm-hero-btn-primary:hover,
body.has-hero .s01-btn-primary:hover,
body.has-hero .hx-btn-primary:hover,
body.has-hero .pb-btn-primary:hover,
body.has-hero .scs-btn-primary:hover, body.has-hero .abt-btn-primary:hover,
body.has-hero .aff-btn-primary:hover, body.has-hero .pr-btn-primary:hover {
    background: linear-gradient(135deg, var(--c-cta-hover-from, #F76A4D) 0%, var(--c-cta-hover-to, #E0334C) 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 30px -10px rgba(244, 63, 94, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
body.has-hero .hm-hero-btn-primary:active,
body.has-hero .s01-btn-primary:active,
body.has-hero .hx-btn-primary:active,
body.has-hero .pb-btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px -2px rgba(244, 63, 94, 0.45);
    transition-duration: .08s !important;
}

body.has-hero .hm-hero-btn-secondary,
body.has-hero .s01-btn-outline,
body.has-hero .hx-btn-secondary,
body.has-hero .pb-btn-secondary,
body.has-hero .scs-btn-secondary, body.has-hero .abt-btn-secondary,
body.has-hero .aff-btn-secondary, body.has-hero .pr-btn-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 56px !important;
    padding: 16px 26px !important;
    font-family: var(--font-display) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    backdrop-filter: blur(8px);
    transition: background-color .18s ease, border-color .18s ease, transform .14s ease;
}
body.has-hero .hm-hero-btn-secondary:hover,
body.has-hero .s01-btn-outline:hover,
body.has-hero .hx-btn-secondary:hover,
body.has-hero .pb-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.36) !important;
    transform: translateY(-1px);
}

/* Logo marquee — landing only */
body.has-hero .hm-hero-marquee-track,
body.has-hero .s01-marquee-track,
body.has-hero .hx-marquee-track {
    animation-duration: 60s !important;
}

/* Force-identical hero logo strip across AIPB / AIDS / PMW (and every .s01
   hero) — strip height, scroll tempo, logo size + gap pinned here so no
   page-specific stylesheet can drift them. Longhand animation props (NOT the
   shorthand) so the :hover pause rule still works. */
body.has-hero .s01-logos { height: 90px !important; margin-top: -60px !important; }
body.has-hero .s01-marquee-track {
    animation-name: s01scroll !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    gap: 0 !important; /* spacing lives on the item (margin-right) for a seamless loop seam */
}
body.has-hero .s01-marquee-track img { height: 40px !important; width: auto !important; margin-right: 80px !important; }
@media (max-width: 960px) {
    body.has-hero .s01-logos { height: 70px !important; margin-top: 0 !important; }
}
@media (max-width: 560px) {
    body.has-hero .s01-logos { height: 64px !important; }
    body.has-hero .s01-marquee-track img { height: 28px !important; margin-right: 56px !important; }
}

/* ============================================================================
   HERO S01 STRUCTURE — single source across every landing hero (2026-06-03)
   Folds the AIPB "masterpiece" hero into the global unifier so AIPB / AIDS /
   PMW (and every .s01 hero) render IDENTICALLY: same vertical rhythm, sub
   hierarchy, trust-meta row, rating pill, marquee. Page colour still comes
   from the per-page aurora hue tokens — only the skeleton is shared here.
   Loaded last → wins over sections.css + any page-scoped (.page-aipb) rules.
   ============================================================================ */
/* Eyebrow badge + platform pills removed from heroes — lead with the H1
   (Stripe / Linear / Vercel). Trust now lives in the meta row below the CTAs. */
body.has-hero .s01-badge,
body.has-hero .s01-platforms { display: none !important; }

/* Symmetric hero padding (Stripe rhythm) — identical top/bottom on all heroes. */
body.has-hero .s01-w {
    padding-top: clamp(112px, 9vw, 144px) !important;
    padding-bottom: clamp(96px, 7vw, 120px) !important;
}

/* Sub hierarchy — bold lead line + quieter secondary (Linear pattern). */
body.has-hero .s01 .s01-sub {
    font-size: clamp(17px, 1.5vw, 21px) !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.94) !important;
    line-height: 1.45 !important;
    margin-bottom: 10px !important;
}
body.has-hero .s01 .s01-sub2 {
    font-size: clamp(15px, 1.2vw, 17px) !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.62) !important;
    line-height: 1.55 !important;
    margin-bottom: 24px !important;
}

/* Trust meta row — replaces the per-page .s01-checks / .s01-platforms rows. */
body.has-hero .s01-meta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 12px 18px; margin-top: 18px;
}
body.has-hero .s01-meta-trust {
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 16px;
}
body.has-hero .s01-meta-item {
    display: inline-flex; align-items: center; gap: 6px;
    color: rgba(255, 255, 255, 0.74);
    font-family: var(--font-body) !important;
    font-size: 13px; font-weight: 500;
}
body.has-hero .s01-meta-item svg {
    width: 13px; height: 13px; color: #12b76a; flex-shrink: 0;
}

/* Rating pill — pinned inside the media corner, no float (calm, premium). */
body.has-hero .s01-rating {
    bottom: 12px !important; right: 12px !important;
    gap: 7px; padding: 7px 13px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    font-size: 12.5px !important; letter-spacing: 0.01em;
    animation: none !important;
}
body.has-hero .s01-rating svg { width: 14px !important; height: 14px !important; }

/* Marquee logos — subtle grayscale, brighten on hover (tempo set 60s above). */
body.has-hero .s01-marquee-track img {
    filter: brightness(0) invert(1) opacity(0.45);
    transition: opacity .2s, filter .2s;
}
body.has-hero .s01-marquee-track img:hover {
    filter: brightness(0) invert(1) opacity(0.9);
}

@media (max-width: 960px) {
    body.has-hero .s01-meta { gap: 14px; }
}
@media (max-width: 560px) {
    body.has-hero .s01-meta-trust { gap: 12px; }
    body.has-hero .s01-meta-item { font-size: 12px; }
    body.has-hero .s01-rating {
        bottom: 10px !important; right: 10px !important;
        font-size: 11.5px !important; padding: 6px 11px !important;
    }
    body.has-hero .s01-rating svg { width: 12px !important; height: 12px !important; }
}

/* ============================================================================
   GLOBAL :focus-visible (TEMPLATE STANDARD, 2026-06-01)
   Site-wide klavye-odak halkası (WCAG 2.4.7). aurora-typography global yüklenir;
   bu kural artık has-hero ile SINIRLI DEĞİL → landing + checkout (MinimalChrome)
   + dashboard + shop + admin hepsi aynı coral halkayı miras alır (tek-el).
   Coral ring + offset; mouse tıklamada görünmez (sadece klavye).
   ============================================================================ */
a:focus-visible,
button:focus-visible,
[role="tab"]:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #F43F5E !important;
    outline-offset: 2px !important;
    border-radius: 6px;
}

/* ============================================================================
   Closing CTA — ONE consistent color across all landings. The per-page hue
   rotation (tokens-aurora) made home vs AIPB/AIDS/PMW closing bands look
   slightly different; the closing conversion band should read identical site-wide.
   ============================================================================ */
body.has-hero .hx-s10 { background: #0B0420; }
body.has-hero .hx-s10::before {
    background:
        radial-gradient(ellipse at 50% 30%, color-mix(in srgb, #8E68D5 35%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 70%, color-mix(in srgb, #C36AB8 22%, transparent) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, color-mix(in srgb, #7945D5 16%, transparent) 0%, transparent 45%);
}