/*
   Pricing page — shared across all SaaS products.
   Layout: dark hero with tier cards, light "every plan" + comparison +
   FAQ, dark closing CTA. Mirrors AI Photo Booth Pro reference aesthetic.
   Token-driven (tokens.css must load first).
*/

.pr-page { background: var(--c-bg); color: var(--c-text); }

/* ===== Hero =========================================================== */
.pr-hero {
    position: relative;
    overflow: hidden;
    background: var(--c-bg-dark);
    color: var(--c-text-inverse);
    padding: clamp(96px, 12vw, 160px) 0 var(--s-13);
}
.pr-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--grad-hero-bg);
    pointer-events: none;
}
.pr-hero canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.pr-hero-w {
    position: relative;
    z-index: 2;
    max-width: var(--hdr-container-max, 1280px); /* header ile eş genişlik */
    margin: 0 auto;
    padding: 0 var(--hdr-px, 24px);
    text-align: center;
}
/* Hero sub ortalama aurora-typography'de margin:0 auto ile çözüldü (tek kaynak). */
.pr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--font-heading);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    margin-bottom: var(--s-6);
}
.pr-hero-t {
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-tight);
    margin: 0 0 var(--s-5);
    color: var(--c-text-inverse);
}
.pr-hero-t em {
    font-style: normal;
    background: var(--grad-emphasis);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pr-hero-sub {
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-relaxed);
    color: rgba(255, 255, 255, 0.7);
    margin: 0 auto var(--s-9);
    max-width: 640px;
}

/* Trust strip in hero */
.pr-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--s-7);
    color: rgba(255, 255, 255, 0.65);
    font-size: var(--fs-meta);
    font-weight: var(--fw-semibold);
}
.pr-trust-item {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}
.pr-trust-item svg {
    color: var(--c-success);
    flex-shrink: 0;
}

/* Billing period toggle */
.pr-toggle-wrap {
    display: flex;
    justify-content: center;
    margin: var(--s-10) 0 var(--s-9);
    position: relative;
    z-index: 2;
}
.pr-toggle {
    display: inline-flex;
    align-items: center;
    padding: 6px; /* landing s07-tog ile aynı yükseklik (64px) */
    min-height: 64px;
    box-sizing: border-box;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    gap: 2px;
}
.pr-toggle button {
    appearance: none;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-heading);
    font-size: var(--fs-meta);
    font-weight: var(--fw-bold);
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    min-height: var(--tap-min);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    transition: color var(--duration-fast), background var(--duration-fast);
}
/* Aktif buton landing s07 ile aynı: coral gradient pill + beyaz metin
   (önce beyaz bg + koyu metindi — landing'le tutarsızdı). */
.pr-toggle button.is-active {
    background: linear-gradient(135deg, #FF7A5C 0%, #F43F5E 100%);
    color: #fff;
    box-shadow: 0 4px 20px rgba(244, 63, 94, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.pr-save-pill {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

/* ===== Tier grid ===================================================== */
.pr-tiers {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--s-7));  /* overlap onto hero */
    padding: 0 var(--container-pad) var(--s-13);
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
}
.pr-tiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s-6);
}
/* Single-tier layout: center the lone card, give it more weight */
.pr-tiers-grid:has(> .pr-tier:only-child) {
    max-width: 520px;
    margin: 0 auto;
}
.pr-tier {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-2xl);
    padding: var(--s-9) var(--s-7);
    text-align: left;
    position: relative;
    transition: transform var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out),
                border-color var(--duration-normal) var(--ease-out);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
}
.pr-tier:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}
.pr-tier--featured {
    border-color: transparent;
    background: linear-gradient(180deg, #fff 0%, #fff 100%) padding-box,
                var(--grad-brand) border-box;
    border: 2px solid transparent;
    box-shadow: var(--shadow-glow-primary);
}
.pr-tier--featured:hover { box-shadow: var(--shadow-glow-primary), var(--shadow-xl); }
.pr-tier-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--grad-brand);
    color: #fff;
    font-family: var(--font-heading);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
}
.pr-tier-name {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-snug);
    color: var(--c-text);
    margin: 0 0 var(--s-2);
}
.pr-tier-tagline {
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    color: var(--c-text-muted);
    line-height: var(--lh-normal);
    margin: 0 0 var(--s-7);
    min-height: 42px;
}
.pr-tier-price {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
}
.pr-tier-price-amount {
    font-family: var(--font-heading);
    font-size: clamp(36px, 4vw, 48px);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-tight);
    line-height: 1;
    color: var(--c-text);
}
.pr-tier-price-period {
    font-family: var(--font-heading);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-text-muted);
}
.pr-tier-price-was {
    font-family: var(--font-body);
    font-size: var(--fs-meta);
    color: var(--c-text-subtle);
    text-decoration: line-through;
    margin-left: var(--s-2);
}
.pr-tier-save {
    display: inline-flex;
    align-items: center;
    background: var(--c-success-bg);
    color: var(--c-success);
    font-family: var(--font-heading);
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    margin-bottom: var(--s-2);
}
.pr-tier-billed {
    font-family: var(--font-body);
    font-size: var(--fs-meta);
    color: var(--c-text-muted);
    margin: 0 0 var(--s-6);
    line-height: 1.4;
}
.pr-tier-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: var(--s-3) var(--s-6);
    background: linear-gradient(135deg, var(--c-cta-from, #FF7A5C) 0%, var(--c-cta-to, #F43F5E) 100%);
    color: #fff;
    font-family: var(--font-heading);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
    border-radius: var(--radius-md);
    border: 0;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
    margin-bottom: var(--s-7);
}
.pr-tier-cta:hover {
    background: linear-gradient(135deg, var(--c-cta-hover-from, #F76A4D) 0%, var(--c-cta-hover-to, #E0334C) 100%);
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow-accent);
}
.pr-tier--featured .pr-tier-cta {
    background: var(--grad-cta);
}
.pr-tier--featured .pr-tier-cta:hover {
    background: var(--grad-cta-hover);
    box-shadow: var(--shadow-glow-accent);
}
.pr-tier-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.pr-tier-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-normal);
    color: var(--c-text);
}
.pr-tier-feature svg {
    color: var(--c-success);
    flex-shrink: 0;
    margin-top: 2px;
}
.pr-tier-feature--off {
    color: var(--c-text-subtle);
    text-decoration: line-through;
}
.pr-tier-feature--off svg { color: var(--c-text-subtle); }

/* ===== "Every plan includes" ======================================== */
.pr-includes {
    background: var(--c-bg-soft);
    padding: var(--section-pad-lg) 0;
}
.pr-includes-w {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}
.pr-includes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--s-6);
    margin-top: var(--s-10);
}
.pr-include-card {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--s-7);
}
.pr-include-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--s-4);
}
.pr-include-icon--coral { background: var(--c-accent-bg); color: var(--c-accent); }
.pr-include-icon--purple { background: var(--c-primary-bg); color: var(--c-primary); }
.pr-include-icon--gold { background: rgba(252, 211, 77, 0.12); color: #B45309; }
.pr-include-t {
    font-family: var(--font-heading);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    color: var(--c-text);
    margin: 0 0 var(--s-2);
}
.pr-include-d {
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-normal);
    color: var(--c-text-muted);
    margin: 0;
}

/* ===== Compare features (collapsible table) ========================== */
.pr-compare {
    padding: var(--section-pad-lg) 0;
}
.pr-compare-w {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--container-pad);
}
.pr-compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: var(--s-10);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--c-bg);
}
.pr-compare-table th,
.pr-compare-table td {
    padding: var(--s-4) var(--s-5);
    text-align: left;
    border-bottom: 1px solid var(--c-border-soft);
    vertical-align: middle;
}
.pr-compare-table th {
    font-family: var(--font-heading);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
    color: var(--c-text);
    background: var(--c-bg-soft);
    border-bottom: 1px solid var(--c-border);
}
.pr-compare-table th.pr-compare-th-featured {
    background: var(--c-primary-bg);
    color: var(--c-primary);
}
.pr-compare-table td {
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    color: var(--c-text);
}
.pr-compare-table tr:last-child th,
.pr-compare-table tr:last-child td { border-bottom: 0; }
.pr-compare-table .pr-yes { color: var(--c-success); font-weight: var(--fw-bold); }
.pr-compare-table .pr-no { color: var(--c-text-subtle); }
.pr-compare-row-group {
    background: var(--c-bg-muted);
    font-weight: var(--fw-bold);
    font-size: var(--fs-meta);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-muted);
}

/* ===== FAQ ============================================================ */
.pr-faq {
    background: var(--c-bg-soft);
    padding: var(--section-pad-lg) 0;
}
.pr-faq-w {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--container-pad);
}
.pr-faq-list {
    margin-top: var(--s-10);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.pr-faq-item {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--duration-fast);
}
.pr-faq-item[open] { border-color: var(--c-primary-soft); }
.pr-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: var(--s-5) var(--s-6);
    font-family: var(--font-heading);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    color: var(--c-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    min-height: var(--tap-min);
}
.pr-faq-item summary::-webkit-details-marker { display: none; }
.pr-faq-item summary::after {
    content: '';
    width: 20px;
    height: 20px;
    background: var(--c-bg-muted);
    border-radius: 50%;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform var(--duration-fast) var(--ease-out);
}
.pr-faq-item[open] summary::after { transform: rotate(180deg); }
.pr-faq-body {
    padding: 0 var(--s-6) var(--s-6);
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-relaxed);
    color: var(--c-text-muted);
}
.pr-faq-body p:first-child { margin-top: 0; }

/* ===== Closing CTA (dark band) ====================================== */
.pr-bcta {
    background: var(--c-bg-dark);
    color: var(--c-text-inverse);
    padding: var(--section-pad-lg) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.pr-bcta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--grad-hero-bg);
    pointer-events: none;
}
.pr-bcta-w {
    position: relative;
    z-index: 2;
    max-width: var(--hdr-container-max, 1280px); /* header ile eş (landing s10-w gibi) */
    margin: 0 auto;
    padding: 0 var(--hdr-px, 24px);
    text-align: center;
}
/* İçerik wrapper text-align:center ile ortalanır. Desc okunabilirlik için
   dar; margin:auto !important ile ortala (aurora override'ını geç). */
.pr-bcta-d { max-width: 640px; margin-left: auto !important; margin-right: auto !important; }
.pr-bcta-t {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-snug);
    margin: 0 0 var(--s-4);
    color: var(--c-text-inverse);
}
.pr-bcta-t em {
    font-style: normal;
    background: var(--grad-emphasis);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pr-bcta-d {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 var(--s-8);
}
.pr-bcta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 56px;
    padding: var(--s-4) var(--s-9);
    background: var(--grad-cta);
    color: var(--c-text-inverse);
    font-family: var(--font-heading);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}
.pr-bcta-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-accent);
}
.pr-bcta-micro {
    display: block;
    margin-top: var(--s-4);
    font-size: var(--fs-meta);
    color: rgba(255, 255, 255, 0.5);
}

/* ===== Mobile ========================================================= */
@media (max-width: 640px) {
    .pr-hero { padding: clamp(72px, 18vw, 100px) 0 var(--s-9); }
    .pr-tiers { margin-top: var(--s-4); padding-top: 0; padding-bottom: var(--s-10); }
    .pr-tier { padding: var(--s-7) var(--s-6); }
    .pr-trust { gap: var(--s-3) var(--s-4); }
    .pr-trust-item { font-size: 12px; }
    .pr-compare-table th,
    .pr-compare-table td { padding: var(--s-3); font-size: 13px; }
    .pr-compare-table { font-size: 13px; }
    .pr-toggle-wrap { margin: var(--s-7) 0 var(--s-7); }
    .pr-toggle button { padding: 10px 16px; font-size: 13px; }
}

/* Hero in-fold primary CTA (P0 conversion fix) ======================= */
.pr-hero-cta {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin: var(--s-9) 0 var(--s-3);
    position: relative;
    z-index: 2;
}
.pr-hero-cta-primary,
.pr-hero-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 16px 32px;
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: 15px;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: transform var(--duration-fast), box-shadow var(--duration-fast), filter var(--duration-fast);
}
.pr-hero-cta-primary {
    background: var(--grad-cta);
    color: #fff;
    box-shadow: var(--shadow-glow-accent);
}
.pr-hero-cta-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}
.pr-hero-cta-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
}
.pr-hero-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.36);
}
@media (max-width: 540px) {
    .pr-hero-cta { flex-direction: column; padding: 0 24px; }
    .pr-hero-cta-primary, .pr-hero-cta-secondary { width: 100%; }
}

/* ===== Faz 1: Landing <-> Pricing görsel parite (Aurora) ============= */
/* Pricing hero + closing artık landing (.s01) ile BİREBİR aynı 3-noktalı
   Aurora radial reçetesini kullanır (violet 18/12, magenta 82/18, indigo
   50/88 + hue-base). Renkler --hue-radial-a/b/c + --hue-base token'larından
   gelir; PageClass (page-aipb/aids/pmw) PricingController'da set edildiği
   için her ürün pricing'i kendi landing hue'sunu otomatik alır. Tek merkezi
   glow (::before --grad-hero-bg) nötrlenir ki çift parlama olmasın. */
body.has-hero .pr-hero,
body.has-hero .pr-bcta {
    background:
        radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--hue-radial-a, #8E68D5) 20%, transparent), transparent 42%),
        radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--hue-radial-b, #C36AB8) 16%, transparent), transparent 45%),
        radial-gradient(circle at 50% 88%, color-mix(in srgb, var(--hue-radial-c, #7945D5) 18%, transparent), transparent 55%),
        linear-gradient(160deg, var(--hue-base, #0B0420) 0%, color-mix(in srgb, var(--hue-base, #0B0420) 97%, #ffffff) 48%, var(--hue-base, #0B0420) 100%);
}
body.has-hero .pr-hero::before,
body.has-hero .pr-bcta::before { background: none; }
/* Hero dikey ritmi = landing hero (aurora .s01 ile birebir) */
body.has-hero .pr-hero {
    padding-top: clamp(112px, 9vw, 144px);
    padding-bottom: clamp(72px, 6.5vw, 96px);
}
/* Hero CTA boyut paritesi: landing primary computed 56px / 16px, min-width 188 */
body.has-hero .pr-hero-cta-primary {
    min-width: 188px;
    min-height: 56px;
    font-size: 16px;
}
body.has-hero .pr-hero-cta-secondary {
    min-height: 56px;
    font-size: 16px;
}
/* CTA renk paritesi: TÜM pricing CTA'ları landing ile birebir aynı marka
   coral'ı kullanır (--c-cta-from/to). Base --grad-cta accent-soft->accent
   idi (landing coral'ından farklı); burada tüm yüzeyler tek coral'a sabit.
   Featured tier'ın --grad-cta override'ı da burada coral'a çekilir. */
body.has-hero .pr-hero-cta-primary,
body.has-hero .pr-bcta-btn,
body.has-hero .pr-tier--featured .pr-tier-cta {
    background: linear-gradient(135deg, var(--c-cta-from, #FF7A5C) 0%, var(--c-cta-to, #F43F5E) 100%);
    color: #fff;
}
body.has-hero .pr-hero-cta-primary:hover,
body.has-hero .pr-bcta-btn:hover,
body.has-hero .pr-tier--featured .pr-tier-cta:hover {
    background: linear-gradient(135deg, var(--c-cta-hover-from, #F76A4D) 0%, var(--c-cta-hover-to, #E0334C) 100%);
}

/* ===== Faz 3: Pricing stratejisi =================================== */
/* Tier CTA altı trial güvence mikrokopisi (kart yok, otomatik çekim yok).
   CTA'nın alt margin'ine (s-7) negatif-top ile sokulur, sonra feature
   listesinden önce nefes bırakır. */
.pr-tier-trialnote {
    font-family: var(--font-body);
    font-size: 10.5px;
    color: var(--c-text-subtle);
    text-align: center;
    margin: -24px 0 20px;
    letter-spacing: .01em;
}
/* Featured tier görsel olarak öne çıksın (decoy / most-popular sinyali).
   Scale statik (animasyon değil), reduced-motion'a güvenli. Mobilde kapalı
   (dar viewport'ta taşma/çakışma yapmasın). */
@media (min-width: 641px) {
    .pr-tier--featured { transform: scale(1.04); z-index: 2; }
    .pr-tier--featured:hover { transform: translateY(-4px) scale(1.04); }
}

/* ===== Faz 4: Pricing UX ============================================ */
/* Sosyal kanıt bandı (tier'lardan sonra, includes'tan önce) */
.pr-social {
    background: var(--c-bg);
    border-top: 1px solid var(--c-border-soft);
    padding: clamp(64px, 7vw, 96px) 0;
    text-align: center;
}
.pr-social-w { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.pr-social-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-6);
    margin-top: var(--s-9);
}
.pr-social-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pr-social-num {
    font-family: var(--font-heading);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.02em;
    line-height: 1;
    background: var(--grad-emphasis);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pr-social-lbl { font-family: var(--font-body); font-size: var(--fs-body-sm); color: var(--c-text-muted); }
@media (max-width: 640px) {
    .pr-social-stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-8) var(--s-4); }
}

/* FAQ escalation bloku */
.pr-faq-more {
    margin-top: var(--s-7);
    text-align: center;
    padding: var(--s-7);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
}
.pr-faq-more-t { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-body); color: var(--c-text); margin: 0 0 var(--s-4); }
.pr-faq-more-actions { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-4); }
.pr-faq-more-btn {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-6);
    background: linear-gradient(135deg, var(--c-cta-from, #FF7A5C) 0%, var(--c-cta-to, #F43F5E) 100%);
    color: #fff; font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-body-sm);
    border-radius: var(--radius-md); text-decoration: none;
    transition: background var(--duration-fast);
}
.pr-faq-more-btn:hover { background: linear-gradient(135deg, var(--c-cta-hover-from, #F76A4D) 0%, var(--c-cta-hover-to, #E0334C) 100%); }
.pr-faq-more-link { color: var(--c-primary); font-weight: var(--fw-semibold); text-decoration: none; font-size: var(--fs-body-sm); }
.pr-faq-more-link:hover { text-decoration: underline; }
.pr-faq-more-note { font-size: var(--fs-meta); color: var(--c-text-muted); margin: var(--s-4) 0 0; }

/* Compare tablo: featured kolon vurgusu + zebra + mobil swipe ipucu */
.pr-compare-table tbody td:nth-child(3) { background: var(--c-primary-bg); }
.pr-compare-table tbody tr:nth-child(even) td:not(:nth-child(3)) { background: color-mix(in srgb, var(--c-bg-soft) 55%, transparent); }
.pr-compare-hint { display: none; }
@media (max-width: 720px) {
    .pr-compare-hint {
        display: block;
        text-align: center;
        font-size: var(--fs-meta);
        color: var(--c-text-muted);
        margin: 0 0 var(--s-3);
    }
}

/* ===== Faz 9: Erişilebilirlik (WCAG 2.2) =========================== */
/* Görünür focus ring — tüm pricing interaktif öğeleri (klavye nav). */
.pr-hero-cta-primary:focus-visible,
.pr-hero-cta-secondary:focus-visible,
.pr-tier-cta:focus-visible,
.pr-bcta-btn:focus-visible,
.pr-faq-more-btn:focus-visible,
.pr-faq-item summary:focus-visible,
.pr-toggle button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(127, 86, 217, 0.6);
}
/* Featured tier scale animasyonu reduced-motion'da kapansın. */
@media (prefers-reduced-motion: reduce) {
    .pr-tier, .pr-tier--featured, .pr-tier-cta, .pr-hero-cta-primary,
    .pr-faq-item summary::after { transition: none !important; }
    .pr-tier--featured { transform: none !important; }
}

/* ============================================================================
   LANDING PARITY (2026-06-01) — pricing sayfası landing'in birebir devamı.
   Social stats = landing s05; includes kartları = landing s04 "Every Pro Tool";
   FAQ 2-col = landing s09; footer CTA = landing s10. Section başlıkları landing
   ile aynı ölçek (aurora-typography zaten .section-title'ı yakalamıyor, burada
   tanımlıyoruz). .page-aipb scope → diğer ürün pricing'leri de miras alır.
   ============================================================================ */

/* --- Section head/title/sub (landing section-hd ölçeği) --- */
.pr-page .section-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.pr-page .section-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(32px, 3.8vw, 48px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: #101828;
    margin: 0 0 14px;
}
.pr-page .section-title em {
    font-style: normal;
    background: linear-gradient(90deg, #F43F5E 0%, #FBD065 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pr-page .section-sub {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(16px, 1.3vw, 18px);
    color: #667085;
    line-height: 1.6;
    margin: 0;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Social proof = landing s05 stats (gradyan renkli sayı + bordered kart) --- */
.pr-social { background: #fff; padding: clamp(80px, 9vw, 128px) 0; }
.pr-social-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 48px;
}
.pr-social-stat {
    background: #FAFAFB;
    border: 1px solid #EAECF0;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.pr-social-num {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(32px, 3.6vw, 48px);
    letter-spacing: -0.03em;
    line-height: 1;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.pr-social-stat:nth-child(1) .pr-social-num { background-image: linear-gradient(135deg, #7F56D9 0%, #6941C6 100%); }
.pr-social-stat:nth-child(2) .pr-social-num { background-image: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%); }
.pr-social-stat:nth-child(3) .pr-social-num { background-image: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%); }
.pr-social-stat:nth-child(4) .pr-social-num { background-image: linear-gradient(135deg, #FBD065 0%, #F59E0B 100%); }
.pr-social-lbl { font-family: 'Inter', sans-serif; font-size: 14px; color: #475467; line-height: 1.4; }
@media (max-width: 640px) {
    .pr-social-stats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* --- Includes = landing s04 "Every Pro Tool" kart + grid --- */
.pr-includes { background: #FAFAFB; }
.pr-includes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 0;
}
.pr-include-card {
    padding: 28px 24px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #EAECF0;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
    transition: transform .35s cubic-bezier(.23,1,.32,1), box-shadow .35s cubic-bezier(.23,1,.32,1), border-color .35s;
}
.pr-include-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.07);
    border-color: rgba(244, 63, 94, 0.30);
}
.pr-include-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
}
.pr-include-icon svg { width: 24px; height: 24px; }
.pr-include-icon--coral  { background: rgba(244,63,94,.08);  border: 1px solid rgba(244,63,94,.18);  color: #F43F5E; }
.pr-include-icon--purple { background: rgba(127,86,217,.08); border: 1px solid rgba(127,86,217,.18); color: #7F56D9; }
.pr-include-icon--gold   { background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.20); color: #B45309; }
.pr-include-t { font-family: 'Inter', system-ui, sans-serif; font-size: clamp(18px,1.4vw,20px); font-weight: 700; line-height: 1.3; color: #101828; margin: 0 0 8px; }
.pr-include-d { font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.55; color: #667085; margin: 0; }
@media (max-width: 900px) { .pr-includes-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 600px) { .pr-includes-grid { grid-template-columns: 1fr; } }

/* --- FAQ = landing s09 2-kolon --- */
.pr-faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 0; }
.pr-faq-col { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 760px) { .pr-faq-cols { grid-template-columns: 1fr; } }
/* FAQ wrapper landing genişliği (2-col için daha geniş) */
.pr-faq .pr-faq-w { max-width: var(--hdr-container-max, 1280px); }

/* --- Footer closing CTA = landing s10 (trust-items row) --- */
.pr-bcta-trust {
    display: flex; align-items: center; justify-content: center;
    gap: 24px; flex-wrap: wrap; margin-top: 20px;
}
.pr-bcta-trust-item {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
}
.pr-bcta-trust-item svg { width: 16px; height: 16px; stroke: #FF8A5C; flex-shrink: 0; }
@media (max-width: 600px) { .pr-bcta-trust { gap: 16px; } .pr-bcta-trust-item { font-size: 13px; } }

/* ============================================================================
   PARITY v2 (2026-06-01) — section width + spacing + compare netlik.
   ============================================================================ */

/* Wrapper genişlikleri header (1280) ile eş + landing padding (24px). */
.pr-compare-w { max-width: var(--hdr-container-max, 1280px) !important; padding: 0 var(--hdr-px, 24px) !important; }
.pr-includes-w, .pr-social-w, .pr-tiers { padding-left: var(--hdr-px, 24px) !important; padding-right: var(--hdr-px, 24px) !important; }

/* section-head → içerik boşluğu: section-head zaten margin-bottom:48px taşıyor;
   table/grid'in ekstra margin-top'unu sıfırla (çift boşluk olmasın). */
.pr-page .section-head { margin-bottom: 40px; }
.pr-compare-table { margin-top: 0 !important; }
.pr-includes-grid, .pr-faq-cols, .pr-social-stats { margin-top: 0 !important; }

/* --- Compare table: çok net, okunaklı tasarım --- */
.pr-compare-table {
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(16,24,40,.04), 0 12px 32px -16px rgba(16,24,40,.08);
}
/* Kolon başlıkları daha güçlü + ortalı değer kolonları */
.pr-compare-table th { font-size: 15px; padding: 18px 20px; text-align: center; }
.pr-compare-table th:first-child { text-align: left; }
.pr-compare-table td { padding: 15px 20px; text-align: center; font-size: 14.5px; }
/* İlk kolon (özellik adı) sola yaslı + hafif vurgulu */
.pr-compare-table td:first-child {
    text-align: left;
    font-weight: 600;
    color: #344054;
}
/* Featured (Pro AI) kolonu dikey vurgu — tüm satırlarda hafif mor zemin */
.pr-compare-table th:nth-child(3),
.pr-compare-table td:nth-child(3) {
    background: rgba(127, 86, 217, 0.045);
}
.pr-compare-table th.pr-compare-th-featured {
    background: rgba(127, 86, 217, 0.10);
    color: #6941C6;
}
/* Zebra okunabilirlik (featured kolon hariç) */
.pr-compare-table tbody tr:not(.pr-compare-row-group):nth-child(even) td:not(:nth-child(3)) {
    background: #FCFCFD;
}
/* Yes/No ikonları daha net: yeşil dolu daire / soluk × */
.pr-compare-table .pr-yes svg { stroke: #12B76A; }
.pr-compare-table .pr-no svg { stroke: #D0D5DD; }
/* Grup başlık satırı daha belirgin ayraç */
.pr-compare-row-group td {
    background: #F9FAFB !important;
    text-align: left !important;
    padding: 12px 20px !important;
    border-top: 1px solid #EAECF0;
}

/* --- Compare table: per-tier CTA row (tfoot) + sticky kolon başlığı --- */
.pr-compare-cta-row td { padding: 20px !important; background: #fff !important; border-top: 1px solid #EAECF0; }
.pr-compare-cta-row td:nth-child(3) { background: rgba(127, 86, 217, 0.045) !important; }
.pr-compare-cta {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; min-height: 44px; padding: 12px 20px;
    font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 700;
    border-radius: 12px; text-decoration: none !important;
    color: #344054 !important; background: #F9FAFB;
    border: 1.5px solid #EAECF0;
    transition: transform .18s, box-shadow .18s, background .18s, border-color .18s;
}
.pr-compare-cta:hover { transform: translateY(-1px); background: #F2F4F7; border-color: #D0D5DD; }
.pr-compare-cta--featured {
    color: #fff !important;
    background: linear-gradient(135deg, #FF7A5C 0%, #F43F5E 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px -4px rgba(244, 63, 94, 0.45);
}
.pr-compare-cta--featured:hover {
    background: linear-gradient(135deg, #F76A4D 0%, #E0334C 100%);
    box-shadow: 0 8px 22px -6px rgba(244, 63, 94, 0.55);
}
/* Ultimate kolonu (son) = tek coral CTA anchoru (altın kaldırıldı, tek-el). */
.pr-compare-cta-row td:last-child .pr-compare-cta {
    color: #fff !important;
    background: linear-gradient(135deg, #FF7A5C 0%, #F43F5E 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px -4px rgba(244, 63, 94, 0.45);
}
.pr-compare-cta-row td:last-child .pr-compare-cta:hover {
    background: linear-gradient(135deg, #F76A4D 0%, #E0334C 100%);
    box-shadow: 0 8px 22px -6px rgba(244, 63, 94, 0.55);
}

/* ============================================================================
   PARITY v3 (2026-06-01) — tier kartları + toggle landing s07 ile GÖRSEL BİREBİR.
   pr-tier markup'ı (DB-driven) farklı class kullanır; s07-plan görsel dilini
   buraya taşıyoruz: kart radius/padding, ribbon badge, featured coral border+glow,
   CTA boyut, fiyat ölçeği. .page-aipb scope → diğer ürün pricing'leri de miras.
   ============================================================================ */

/* Kart = landing s07-plan PIXEL: radius 20, padding 36/30, beyaz,
   1px #EAECF0 border, aynı boxShadow. */
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tier {
    border-radius: 20px;
    padding: 36px 30px;
    background: #fff;
    border: 1px solid #EAECF0;
    box-shadow: 0 1px 0 0 #fff inset, 0 1px 2px 0 rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.08);
}
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tier:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(16, 24, 40, 0.14); }

/* Featured (Pro AI) = landing s07-plan.pop: 1px coral (#F43F5E) border + glow.
   Landing'de pop kartı diğerleriyle AYNI padding (büyütülmüş değil). */
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tier--featured {
    border: 1px solid #F43F5E;
    background: #fff;
    padding: 36px 30px;
    box-shadow: 0 1px 0 0 #fff inset, 0 12px 32px -8px rgba(244,63,94,.18), 0 24px 48px -16px rgba(244,63,94,.12);
}
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tier--featured:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 80px rgba(244, 63, 94, 0.15), 0 24px 60px rgba(16, 24, 40, 0.18);
}

/* Badge = landing s07 (canlı): kartın üstünde HAVADA PILL (ribbon değil).
   top -14px, radius 999px, padding 6px 14px, uppercase. Renk tier pozisyonuna
   göre: 1. gri, 2. coral, 3. altın. */
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tier-badge {
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}
/* 3-tier grid: pozisyona göre renk */
/* Badge renkleri TOKEN (HEX değil) — şablon hue-rotation (aids/pmw) için. */
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tiers-grid > .pr-tier:first-child:not(.pr-tier--featured) .pr-tier-badge {
    background: linear-gradient(135deg, var(--gray-400), var(--gray-500));
    box-shadow: 0 6px 20px rgba(102, 112, 133, 0.25);
}
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tier--featured .pr-tier-badge {
    background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
    box-shadow: 0 6px 20px rgba(244, 63, 94, 0.35);
}
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tiers-grid > .pr-tier:last-child:not(.pr-tier--featured) .pr-tier-badge {
    background: linear-gradient(135deg, var(--color-warning-lighter), var(--color-warning-light));
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
}
/* ★ landing s07 ile birebir: Best seller + White label badge'lerinde yıldız */
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tier--featured .pr-tier-badge::before,
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tiers-grid > .pr-tier:last-child .pr-tier-badge::before {
    content: '\2605';
    margin-right: 5px;
    font-size: 10px;
    line-height: 1;
}
/* Ultimate (son) tier = landing s07-plan.ult PIXEL: 1px altın border
   rgba(245,158,11,.4), beyaz bg, altın CTA (180deg #FBBF24→#F59E0B). */
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tiers-grid > .pr-tier:last-child:not(.pr-tier--featured) {
    border: 1px solid rgba(245, 158, 11, 0.4);
    background: #fff;
}
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tiers-grid > .pr-tier:last-child:not(.pr-tier--featured):hover {
    border-color: rgba(245, 158, 11, 0.55);
}
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tiers-grid > .pr-tier:last-child:not(.pr-tier--featured) .pr-tier-cta {
    background: linear-gradient(135deg, #FF7A5C 0%, #F43F5E 100%); /* single coral CTA anchor; tier differentiated by the gold border above */
    color: #fff !important;
}
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tiers-grid > .pr-tier:last-child:not(.pr-tier--featured) .pr-tier-cta:hover {
    background: linear-gradient(135deg, #F76A4D 0%, #E0334C 100%);
    color: #fff !important;
}

/* Starter (ilk) tier CTA = landing s07 ghost: gri bg #F9FAFB, koyu metin,
   1px border (coral DEĞİL). Sadece featured + ultimate dolgulu renk alır. */
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tiers-grid > .pr-tier:first-child:not(.pr-tier--featured) .pr-tier-cta {
    background: #F9FAFB;
    color: #101828;
    border: 1px solid #EAECF0;
}
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tiers-grid > .pr-tier:first-child:not(.pr-tier--featured) .pr-tier-cta:hover {
    background: #F2F4F7;
    color: #101828;
    border-color: #D0D5DD;
}

/* Font ölçekleri landing s07 ile BİREBİR (ölçüldü):
   name 22/700, tagline 14, price 56/800, per 16/500, billed 15/500,
   cta 15/700, feature 13.5. */
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tier-name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tier-tagline { font-size: 14px; line-height: 1.5; margin-bottom: 28px; min-height: 0; }
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tier-price-amount { font-size: 56px; font-weight: 800; letter-spacing: -0.05em; }
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tier-price-period { font-size: 16px; font-weight: 500; }
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tier-billed { font-size: 15px; font-weight: 500; margin-bottom: 24px; }

/* CTA = s07-cta: radius 14, padding 17, font 15 + ALTINDA divider (s07-div). */
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tier-cta {
    min-height: 0;
    padding: 17px;
    border-radius: 14px;
    font-size: 15px;
    margin-bottom: 28px;
}
/* CTA sonrası ayraç = landing s07-div PIXEL: üstte 24px boşluk + 1px tam-genişlik
   çizgi + altta 20px. Tüm kartlar 30px h-padding olduğu için negatif margin -30px.
   (Landing'de -32px idi çünkü o kartlar 32px padding'liydi; bizimkiler 30px.) */
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tier-div {
    height: 1px;
    background: #EAECF0;
    margin: 24px -30px 20px;
}
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tier--featured .pr-tier-div { margin: 24px -30px 20px; }

/* Feature satırları = s07-feat (14px a11y min, gap 10) */
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tier-feature { font-size: 14px; gap: 10px; line-height: 1.5; }
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-tier-features { gap: 10px; }

/* Toggle = s07-tog: buton padding/font/line-height landing s07 ile birebir
   (toggle yüksekliği 64px olsun). min-height kaldırılır, line-height 1.4. */
:is(.page-aipb, .page-aids, .page-pmw, .page-glm) .pr-toggle button {
    padding: 13px 32px;
    font-size: 15px;
    line-height: 1.4;
    min-height: 0;
}