/* ══════════════════════════════════════════════════════════════════════════
   MoxaBuilder — DESIGN SYSTEM BRIDGE (platform)
   --------------------------------------------------------------------------
   Bu dosya PANEL ÖNİZLEMESİ ve CANLI YAYIN için ORTAK çekirdek katmandır.
   (views/front/layout/header.php → her iki bağlamda da yüklenir.)

   İçerik:
     1) Tipografi token köprüsü  → --font-heading (F1 / M8)
     2) Semantik bölüm ritmi     → .mx-pad-design (F1 / M6)
     3) Hareket azaltma          → prefers-reduced-motion (S5)
     4) Odak görünürlüğü         → :focus-visible (S5)
     5) StyleResolver sözleşmesi → [data-pb-bg] yardımcıları (F1 / M9)

   KURAL: Burada sayfaya/moda özel kural YOKTUR. Yalnız token tabanlı, genel
   yetenekler bulunur. Renkler hard-coded değil, --color-* / --font-* token'larıdır.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1) TİPOGRAFİ ───────────────────────────────────────────────────────── */
:root {
    /* GlobalDesignService + DesignTokenRegistry üretir; buradaki değer yalnız
       güvenli fallback'tir (token basılmazsa modül yine sans başlık kullanır). */
    --font-heading: var(--font-sans, 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif);
    /* P21 — GÖRSEL ÜSTÜ SABİT MÜREKKEp (contrast-literal): hero görseli üzerine
       binen yazı/işaret renkleri paletten BAĞIMSIZ olmalı; değerler TEK yerde
       tanımlanır ve `TokenCatalogTest` hex taraması bu iki token'ı kapsamaz
       (rgb() biçimi bilinçli: `--surface-*` token'larıyla karışmasın). */
    --mx-on-media-ink: rgb(248 250 252);
    --mx-on-media-mark: rgb(255 255 255);
}


/* ══════════════════════════════════════════════════════════════════════════
   P34 — METİN ÖLÇEĞİ / MÜREKKEP SÖZLEŞMESİ (modül render'ları için)
   ══════════════════════════════════════════════════════════════════════════
   ÖLÇÜLEN KUSUR (ekran görüntüsü):
     1) `services_grid` alt başlığı **dev fontla** basılıyordu: modül sarmalayıcı
        `font-size: var(--text-section-title)` taşıyor, `p` miras alıyordu.
     2) `pb-tx-muted` / `pb-tx-dim` sınıfları **hiçbir CSS'te tanımlı değildi**.
     3) Koyu yüzeyde `text-[var(--color-primary)]` (koyu lacivert) okunmuyordu.
   Bu blok üçünü kapatır. */

.pb-tx-muted {
    font-size: var(--text-body, 1rem);
    line-height: 1.6;
    color: var(--color-text-soft, rgba(15, 23, 42, .72));
}

.pb-tx-dim {
    font-size: var(--text-body, 1rem);
    line-height: 1.5;
    color: var(--color-text-soft, rgba(15, 23, 42, .58));
}

.pb-tx-strong {
    color: var(--color-heading, currentColor);
    font-weight: 600;
}

/* Modül içi gövde metni: başlık ölçeği MİRAS KALMAZ (dev paragraf yasağı) */
.module :where(p, li, dd, dt, figcaption, small, .pb-tx-muted, .pb-tx-dim),
.module :where(ul, ol) {
    font-size: var(--text-body, 1rem);
    line-height: 1.65;
}

/* Ters yüzeyde sabit marka renkli METİN sınıfları okunmaz → başlık rengine çek */
[data-surface="inverse"] [class*="text-[var(--color-primary)]"],
[data-surface="inverse"] [class*="text-[var(--color-secondary)]"],
[data-surface="inverse"] [class*="text-[var(--ex-ink)]"] {
    color: var(--color-heading, rgb(255 255 255)) !important;
}

/* Yüzey sınıfı taşımayan koyu bölümler (surface-0 / glass) için aynı güvence */
.module[data-surface="surface-0"] [class*="text-[var(--color-primary)]"],
.module[data-surface="glass-1"] [class*="text-[var(--color-primary)]"],
.module[data-surface="glass-2"] [class*="text-[var(--color-primary)]"] {
    color: var(--color-heading, rgb(255 255 255)) !important;
}

/* Başlıklarda serif yerine token kullanılır (font-serif sınıfı kaldırıldı). */
.mx-font-heading {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
}

/* ── 2) SEMANTİK BÖLÜM RİTMİ (padding_preset = design) ──────────────────── */
/* Tasarım referansındaki 76px dikey ritmi; kırılımlarda orantılı küçülür. */
.mx-pad-design {
    padding-top: clamp(40px, 4.4vw, 64px);
    padding-bottom: clamp(40px, 4.4vw, 64px);
}

.mx-pad-design-tight {
    padding-top: clamp(24px, 2.8vw, 36px);
    padding-bottom: clamp(24px, 2.8vw, 36px);
}

.mx-pad-design-loose {
    padding-top: clamp(52px, 6vw, 88px);
    padding-bottom: clamp(52px, 6vw, 88px);
}

/* PA64+14 — İLK EKRAN RİTMİ: DENENDİ, GERİ ALINDI.
   Ölçüm: hero'ya ek `padding-top: var(--chrome-h)` verilince vision skoru
   6 → 4'e DÜŞTÜ ("stranded layout / large empty whitespace"). Doğru çözüm
   üretim tarafındadır (SectionComposer hero padding'i) — CSS yaması DEĞİL.
   Burada bilinçli olarak hiçbir padding override'ı bırakılmaz. */
}

@media (max-width: 820px) {
    .mx-pad-design { padding-top: 40px; padding-bottom: 40px; }
    .mx-pad-design-loose { padding-top: 56px; padding-bottom: 56px; }
}

@media (max-width: 480px) {
    .mx-pad-design { padding-top: 32px; padding-bottom: 32px; }
}

/* ── 3) HAREKET AZALTMA (S5) ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    /* Modül animasyonları: giriş/hover/parallax tümü devre dışı */
    [class*="mx-"],
    [class*="mx-"] *,
    [data-pb-el],
    .pb-mod {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    /* Marquee / sonsuz şerit: tamamen durdur */
    .mx-marquee,
    .mx-marquee__track,
    .pb-marquee,
    .pb-marquee-track,
    [data-marquee] {
        animation: none !important;
        transform: none !important;
    }
}

/* ── 4) ODAK GÖRÜNÜRLÜĞÜ (erişilebilirlik) ──────────────────────────────── */
[class*="mx-"] a:focus-visible,
[class*="mx-"] button:focus-visible,
[class*="mx-"] input:focus-visible,
[class*="mx-"] select:focus-visible,
[class*="mx-"] textarea:focus-visible,
[class*="mx-"] [tabindex]:focus-visible,
.pb-mod a:focus-visible,
.pb-mod button:focus-visible {
    outline: 2px solid var(--color-primary, currentColor);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ── 5) STYLE RESOLVER SÖZLEŞMESİ (yardımcı) ────────────────────────────── */
/* data-pb-bg="keep" → element arka planı tamamen temadan gelir.
   (StyleResolver inline arka plan basmaz; bu kural tema class'ının kazanmasını
   belgeler ve !important yamalarına ihtiyaç bırakmaz.) */
[data-pb-bg="keep"] {
    background-color: transparent;
    background-image: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   6) MODÜL YETENEKLERİ (F3) — genel, token tabanlı
   --------------------------------------------------------------------------
   M3 stats card · M5 feature_grid product · M9 mock preset · M11 tabs chips
   Tümü `--color-*` / `--radius-*` / `--gradient-*` token'larıyla çalışır.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── M3: stats — kenarlıklı kart bandı ─────────────────────────────────── */
.mx-stats-wrap--card {
    max-width: 1132px;
    margin-inline: auto;
    background: var(--color-surface, rgba(255, 255, 255, .04));
    border: 1px solid var(--color-line, rgba(148, 163, 184, .22));
    border-radius: var(--radius-lg, 18px);
    padding: clamp(16px, 2vw, 26px);
}

.mx-stats--lined .mx-stat {
    border-inline-end: 1px solid var(--color-line, rgba(148, 163, 184, .22));
}

.mx-stats--lined .mx-stat:last-child {
    border-inline-end: 0;
}

.mx-stat__value--grad,
.mx-stats-wrap--card .is-highlight .mx-stat__value {
    background: var(--gradient-brand, linear-gradient(120deg, rgba(99, 102, 241, 1), rgba(34, 211, 238, 1)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ── M5: feature_grid — ürün kartı ─────────────────────────────────────── */
.mx-card--product {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mx-card__tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-primary, currentColor);
    background: var(--color-primary-soft, rgba(99, 102, 241, .14));
    border: 1px solid var(--color-primary-line, rgba(99, 102, 241, .32));
}

.mx-card__list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mx-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-muted, inherit);
}

.mx-card__list-ic {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    color: var(--color-primary, currentColor);
}

/* ── M11: tabs — çip / pill düzeni ─────────────────────────────────────── */
.mx-tabs--chips .pb-tabs-nav,
.mx-tabs--pills .pb-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.mx-tabs--chips .pb-tab-btn,
.mx-tabs--pills .pb-tab-btn {
    border-radius: 999px;
    border: 1px solid var(--color-line, rgba(148, 163, 184, .25));
    background: var(--color-surface, rgba(255, 255, 255, .04));
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 600;
}

.mx-tabs--pills .pb-tab-btn.is-active,
.mx-tabs--chips .pb-tab-btn.is-active {
    background: var(--gradient-brand, linear-gradient(120deg, rgba(99, 102, 241, 1), rgba(34, 211, 238, 1)));
    border-color: transparent;
    color: var(--color-on-brand, white);
}

/* ── M7: mock preset (sunucu üretimli panel görselleri) ─────────────────── */
.mx-media-html--mock {
    width: 100%;
}

.mx-mock {
    border: 1px solid var(--color-line, rgba(148, 163, 184, .25));
    background: var(--color-surface, rgba(255, 255, 255, .04));
    border-radius: var(--radius-md, 14px);
    box-shadow: var(--shadow-md, 0 18px 50px -30px rgba(2, 6, 23, .8));
    overflow: hidden;
    font-size: 13px;
    line-height: 1.45;
}

.mx-mock__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-line, rgba(148, 163, 184, .18));
    background: var(--color-surface-2, rgba(255, 255, 255, .02));
}

.mx-mock__dots {
    display: inline-flex;
    gap: 4px;
}

.mx-mock__dots i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--color-line-strong, rgba(148, 163, 184, .45));
}

.mx-mock__title {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .02em;
    opacity: .85;
}

.mx-mock__doc {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mx-mock__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mx-mock__row--between {
    justify-content: space-between;
}

.mx-mock__grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mx-mock__field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--color-surface-2, rgba(255, 255, 255, .03));
    border: 1px solid var(--color-line, rgba(148, 163, 184, .16));
}

.mx-mock__field span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .6;
}

.mx-mock__lines,
.mx-mock__table {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mx-mock__line,
.mx-mock__trow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    opacity: .85;
}

.mx-mock__line--total {
    padding-top: 8px;
    border-top: 1px dashed var(--color-line, rgba(148, 163, 184, .25));
    font-weight: 800;
    opacity: 1;
}

.mx-mock__trow {
    display: grid;
    grid-template-columns: 1fr 1.2fr auto;
}

.mx-mock__bar {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: var(--color-line, rgba(148, 163, 184, .2));
    overflow: hidden;
}

.mx-mock__bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--gradient-brand, linear-gradient(120deg, rgba(99, 102, 241, 1), rgba(34, 211, 238, 1)));
}

.mx-mock__bar--ok i {
    background: var(--color-success, rgba(16, 185, 129, .9));
}

.mx-mock__tagbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 4px;
}

.mx-mock__tag,
.mx-mock__head .mx-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    background: var(--color-surface-2, rgba(255, 255, 255, .05));
    border: 1px solid var(--color-line, rgba(148, 163, 184, .2));
    opacity: .9;
}

.mx-mock__tag.is-ok {
    color: var(--color-success, rgba(16, 185, 129, 1));
    border-color: var(--color-success-line, rgba(16, 185, 129, .35));
}

.mx-mock__flow {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mx-mock__node {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--color-line, rgba(148, 163, 184, .22));
    background: var(--color-surface-2, rgba(255, 255, 255, .04));
    font-size: 12px;
    font-weight: 600;
}

.mx-mock__node--accent {
    background: var(--gradient-brand, linear-gradient(120deg, rgba(99, 102, 241, 1), rgba(34, 211, 238, 1)));
    border-color: transparent;
    color: var(--color-on-brand, white);
}

.mx-mock__arrow {
    opacity: .45;
}

.mx-mock__doc--chat {
    gap: 8px;
}

.mx-mock__bubble {
    max-width: 82%;
    padding: 8px 11px;
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.45;
}

.mx-mock__bubble--in {
    align-self: flex-start;
    background: var(--color-surface-2, rgba(255, 255, 255, .06));
    border: 1px solid var(--color-line, rgba(148, 163, 184, .18));
}

.mx-mock__bubble--out {
    align-self: flex-end;
    background: var(--color-primary-soft, rgba(99, 102, 241, .18));
    border: 1px solid var(--color-primary-line, rgba(99, 102, 241, .32));
}

.mx-mock__bubble.is-done {
    font-weight: 600;
}

.mx-mock__input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    padding: 8px 11px;
    border-radius: 999px;
    border: 1px solid var(--color-line, rgba(148, 163, 184, .22));
    font-size: 12px;
    opacity: .7;
}

.mx-mock__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.mx-mock__mini {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid var(--color-line, rgba(148, 163, 184, .18));
    background: var(--color-surface-2, rgba(255, 255, 255, .03));
    font-size: 11.5px;
}

.mx-mock__mini b {
    font-size: 12px;
}

.mx-mock__mini span {
    opacity: .75;
}

.mx-mock__thumb {
    height: 44px;
    border-radius: 8px;
    background: var(--gradient-brand-soft, linear-gradient(120deg, rgba(99, 102, 241, .22), rgba(34, 211, 238, .16)));
}

.mx-mock__devices {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.mx-mock__device {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid var(--color-line-strong, rgba(148, 163, 184, .3));
    background: var(--color-surface-2, rgba(255, 255, 255, .03));
}

.mx-mock__device i {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--color-line, rgba(148, 163, 184, .3));
}

.mx-mock__device--desktop { width: 52%; }
.mx-mock__device--tablet { width: 30%; }
.mx-mock__device--mobile { width: 18%; }

.mx-mock__foot {
    padding: 10px 14px;
    border-top: 1px solid var(--color-line, rgba(148, 163, 184, .18));
    font-size: 11px;
    opacity: .7;
}

@media (max-width: 640px) {
    .mx-mock__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mx-mock__devices { flex-wrap: wrap; }
    .mx-mock__device--desktop { width: 100%; }
    .mx-mock__device--tablet { width: calc(58% - 5px); }
    .mx-mock__device--mobile { width: calc(42% - 5px); }
}

/* ── 7) CHROME NODE KİTİ (F4 · C1/C2/C3/C5) — token tabanlı ─────────────── */
/* promo_card · contact_strip · copyright_line · drawer kartları.
   Renk/ölçü YALNIZ --color-* · --gradient-* · --radius-* token'larından gelir. */
.fle-promo-card {
    --fle-accent: var(--gradient-brand, var(--color-primary, currentColor));
    display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 16px;
    border: 1px solid var(--color-line, rgba(148, 163, 184, .22));
    border-radius: var(--radius-lg, 16px);
    background: var(--color-surface, rgba(255, 255, 255, .04));
    color: inherit; text-decoration: none;
    transition: border-color .2s ease, transform .2s ease;
}
a.fle-promo-card:hover, a.fle-promo-card:focus-visible {
    border-color: var(--color-line-strong, rgba(148, 163, 184, .38));
    transform: translateY(-2px);
}
.fle-promo-card--tax { --fle-accent: var(--gradient-tax, var(--color-tax-1, currentColor)); }
.fle-promo-card--build { --fle-accent: var(--gradient-build, var(--color-build-1, currentColor)); }
.fle-promo-card--lab { --fle-accent: var(--gradient-lab, var(--color-lab-1, currentColor)); }
.fle-promo-card--brand { --fle-accent: var(--gradient-brand, var(--color-primary, currentColor)); }
.fle-promo-card__top { display: flex; align-items: flex-start; gap: 10px; }
.fle-promo-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: var(--radius-md, 10px); background: var(--fle-accent); color: var(--color-btn-primary-text, currentColor);
}
.fle-promo-card__head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fle-promo-card__title {
    font-family: var(--font-heading); font-size: 14px; font-weight: 800;
    letter-spacing: -.01em; line-height: 1.2; color: var(--color-ink);
}
.fle-promo-card__eyebrow {
    font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--color-muted);
}
.fle-promo-card__badge {
    margin-left: auto; flex: 0 0 auto; padding: 2px 7px; border-radius: 999px;
    font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    background: var(--color-primary-light, rgba(99, 102, 241, .16));
    color: var(--color-accent); white-space: nowrap;
}
.fle-promo-card__desc { font-size: 12.5px; line-height: 1.5; color: var(--color-muted); }
.fle-promo-card__cta {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: auto; padding-top: 4px; font-size: 12px; font-weight: 700;
    color: var(--color-accent);
}
.fle-promo-card__arrow { transition: transform .2s ease; }
a.fle-promo-card:hover .fle-promo-card__arrow { transform: translateX(3px); }

/* ── C2: contact_strip ─────────────────────────────────────────────────── */
.fle-contact-strip {
    display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
    font-size: 12.5px; line-height: 1.5;
}
.fle-contact-strip--stack { flex-direction: column; align-items: flex-start; gap: 6px; }
.fle-contact-strip__item {
    display: inline-flex; align-items: center; gap: 7px; min-width: 0;
    color: var(--color-muted); text-decoration: none;
}
.fle-contact-strip__item--address { align-items: flex-start; }
a.fle-contact-strip__item:hover { color: var(--color-ink); }
.fle-contact-strip__icon {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    color: var(--color-accent);
}
.fle-contact-strip__label {
    font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--color-muted-2);
}
.fle-contact-strip__value { color: var(--color-ink); word-break: break-word; }

/* ── C3: copyright_line ────────────────────────────────────────────────── */
.fle-copyright {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
    width: 100%; font-size: 12px; line-height: 1.6; color: var(--color-muted);
}
.fle-copyright--center { justify-content: center; text-align: center; }
.fle-copyright--right { justify-content: flex-end; text-align: right; }
.fle-copyright--between { justify-content: space-between; }
.fle-copyright__link { color: inherit; text-decoration: none; }
.fle-copyright__link:hover { color: var(--color-ink); }
.fle-copyright__note { color: var(--color-muted-2); font-size: 11.5px; }

/* ── C5: drawer ürün kartları (menu kompoziti · drawer_variant=product_cards) ── */
.fle-menu__dcards { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; }
.fle-menu__dcards .fle-promo-card { padding: 11px 12px; gap: 5px; }
.fle-menu__dcards .fle-promo-card__icon { width: 26px; height: 26px; flex-basis: 26px; border-radius: 8px; }
.fle-menu__dcards .fle-promo-card__title { font-size: 13px; }
.fle-menu__dcards .fle-promo-card__desc { font-size: 11.5px; }
.fle-menu__dcards .fle-promo-card__cta { display: none; }

/* ── Erişilebilirlik + hareket azaltma (S5) ────────────────────────────── */
.fle-promo-card:focus-visible,
.fle-contact-strip__item:focus-visible,
.fle-copyright__link:focus-visible {
    outline: 2px solid var(--color-primary, currentColor);
    outline-offset: 2px; border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
    .fle-promo-card, .fle-promo-card__arrow { transition: none !important; }
    a.fle-promo-card:hover { transform: none !important; }
}

/* ── F4 · C4 — dil değiştirici görünürlük garantisi ────────────────────────
   Sayfa (tenant/referans) CSS'i pasif dili gizleyebiliyor; ör.
   `html[lang="tr"] [data-lang="en"]{display:none!important}`.
   FLR `language` node'u bir PLATFORM chrome öğesidir: kullanıcı HER ZAMAN
   diğer dile geçebilmelidir (C4: `/` ↔ `/en`). Aşağıdaki kurallar yalnız FLR
   dil node'u kapsamındadır ve daha yüksek özgüllük taşır — sayfaya özel yama
   değil, genel yetenek korumasıdır. */
.fle-lang-switcher .fle-lang-item[data-lang] { display: inline-flex !important; }
.fle-lang-menu .fle-lang-menu__item[data-lang] { display: flex !important; }





/* ══════════════════════════════════════════════════════════════════════════
   G1 — MOCK PRESET BLOK SİSTEMİ (E5/E6/E7)
   --------------------------------------------------------------------------
   Preset = registry kaydı (app/Data/MockPresetRegistry.php) + bu dosyadaki
   blok sınıfları. İçerik settings'ten (panelden) gelir; gömülü HTML yok.

   Bloklar: hub | nodes | rows | cells | boxes | tags | bubbles | devs | bar |
            minis | flow
   KURAL: renkler yalnız --color-* / --gradient-* token'larından; hard-coded yok.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── E5: bağımsız çip (preset gövdesinde de geçerli) ─────────────────────── */
.mx-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    background: var(--color-surface-2, rgba(255, 255, 255, .05));
    border: 1px solid var(--color-line, rgba(148, 163, 184, .2));
    opacity: .9;
}

/* ── E5: chat/WhatsApp onay balonu ──────────────────────────────────────── */
.mx-mock__bubble.is-ok {
    font-weight: 600;
    border-color: var(--color-success-line, rgba(16, 185, 129, .35));
    background: var(--color-success-soft, rgba(16, 185, 129, .14));
}

/* ── E5: balon grubu (sohbet presets) ───────────────────────────────────── */
.mx-mock__bubbles {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── E6: beyan kutuları (vat_return) ────────────────────────────────────── */
.mx-mock__boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 6px;
}

.mx-mock__box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 8px;
    border-radius: 10px;
    border: 1px solid var(--color-line, rgba(148, 163, 184, .18));
    background: var(--color-surface-2, rgba(255, 255, 255, .03));
}

.mx-mock__box span {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .6;
}

.mx-mock__box b {
    font-size: 12.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.mx-mock__box.is-total {
    border-color: var(--color-primary-line, rgba(99, 102, 241, .32));
    background: var(--color-primary-soft, rgba(99, 102, 241, .14));
}

/* ── E6: katman ağacı (builder_canvas) ──────────────────────────────────── */
.mx-mock__tree {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mx-mock__branch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 0 5px 8px;
    font-size: 12px;
    border-left: 2px solid var(--color-line, rgba(148, 163, 184, .22));
}

.mx-mock__branch span { opacity: .85; }
.mx-mock__branch b { font-weight: 700; opacity: .95; }
.mx-mock__branch--l1 { margin-left: 12px; }
.mx-mock__branch--l2 { margin-left: 24px; }

/* ── E6: kırılım kolonları (responsive / device) ────────────────────────── */
.mx-mock__devs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.mx-mock__dev {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 7px;
    border-radius: 9px;
    border: 1px solid var(--color-line, rgba(148, 163, 184, .18));
    background: var(--color-surface-2, rgba(255, 255, 255, .03));
    text-align: center;
    font-size: 10.5px;
}

.mx-mock__dev b { font-size: 11px; font-weight: 700; }
.mx-mock__dev span { opacity: .7; }

.mx-mock__dev-bar {
    display: block;
    height: 4px;
    border-radius: 999px;
    background: var(--color-line, rgba(148, 163, 184, .2));
    overflow: hidden;
}

.mx-mock__dev-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--gradient-brand, linear-gradient(120deg, rgba(99, 102, 241, 1), rgba(34, 211, 238, 1)));
}

/* ── Satır içi bar (ledger / gateway): etiket + bar + değer ─────────────── */
.mx-mock__line .mx-mock__bar {
    flex: 1 1 auto;
    min-width: 40px;
}

.mx-mock__tag.is-warn {
    color: var(--color-warning, rgba(251, 191, 36, 1));
    border-color: var(--color-warning-line, rgba(251, 191, 36, .35));
}

/* ── E7: EKOSİSTEM (eco_panel) — `MODULE_THEME_CSS`'ten birebir taşındı ────
   Kaynak: scripts/website/build-emyrax-modules-sql.py MODULE_THEME_CSS
   (site CSS blob'u silindiğinde preset CSS'i burada kalır) */
main#main-content .mx-eco { border:1px solid var(--color-line);border-radius:22px;padding:20px; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); box-shadow:var(--mx-shadow);backdrop-filter:blur(14px); }
main#main-content .mx-eco__hub { display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:14px; border:1px solid var(--color-line);background:var(--color-surface); }
main#main-content .mx-eco__hub b { display:block;font-size:13.5px;color:var(--color-ink) }
main#main-content .mx-eco__hub small { display:block;font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--color-muted-2) }
main#main-content .mx-eco__hub-ic { width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--color-on-brand, var(--color-white, white)); background:var(--gradient-brand);flex:0 0 auto; }
main#main-content .mx-eco__hub-ic svg { width:18px;height:18px }
main#main-content .mx-eco__line { height:16px;width:1px;background:var(--color-line-strong);margin:0 auto }
main#main-content .mx-eco__nodes { display:grid;gap:10px }
main#main-content .mx-eco__node { display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:14px; border:1px solid var(--color-line);background:var(--color-surface); transition:transform .25s var(--mx-ease),border-color .25s var(--mx-ease); }
main#main-content .mx-eco__node:hover { transform:translateY(-2px);border-color:var(--color-line-strong) }
main#main-content .mx-eco__node b { display:block;font-size:12.5px;color:var(--color-ink) }
main#main-content .mx-eco__node p { margin:2px 0 0;font-size:11px;line-height:1.4;color:var(--color-muted) }
main#main-content .mx-eco__node-ic { width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--color-on-brand, var(--color-white, white));flex:0 0 auto }
main#main-content .mx-eco__node-ic svg { width:16px;height:16px }
main#main-content .mx-eco__node[data-accent="tax"] .mx-eco__node-ic { background:var(--gradient-tax) }
main#main-content .mx-eco__node[data-accent="build"] .mx-eco__node-ic { background:var(--gradient-build) }
main#main-content .mx-eco__node[data-accent="lab"] .mx-eco__node-ic { background:var(--gradient-lab) }
main#main-content .mx-eco__foot { display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--color-line); }
main#main-content .mx-eco__foot span { font-size:9.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase; color:var(--color-muted-2);border:1px solid var(--color-line);border-radius:999px;padding:4px 8px; }
main#main-content .module .mx-eco { background-image:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))!important;border:1px solid var(--color-line)!important }
main#main-content .module .mx-eco__hub, main#main-content .module .mx-eco__node { background-color:var(--color-surface)!important;border:1px solid var(--color-line)!important }
main#main-content .module .mx-eco__hub-ic { background-image:var(--gradient-brand)!important;background-color:transparent!important }
main#main-content .module .mx-eco__node[data-accent="tax"] .mx-eco__node-ic { background-image:var(--gradient-tax)!important }
main#main-content .module .mx-eco__node[data-accent="build"] .mx-eco__node-ic { background-image:var(--gradient-build)!important }
main#main-content .module .mx-eco__node[data-accent="lab"] .mx-eco__node-ic { background-image:var(--gradient-lab)!important }
main#main-content .mx-card, main#main-content .mx-btn, main#main-content .mx-eco__node, main#main-content .mx-plan, main#main-content .mx-bar__fill { transition:none!important;animation:none!important }


/* ── E5b: theme blob'undan taşınan eksik mock sınıfları ──────────────────── */
.mx-mock__k {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mx-mock__pill {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--color-success-line, rgba(52, 211, 153, .35));
    color: var(--color-success, rgba(52, 211, 153, 1));
    background: var(--color-success-soft, rgba(52, 211, 153, .1));
}

/* ── E5c: eco ikon boyutları (div sınıfı ile) ───────────────────────────── */
.mx-eco__hub-svg,
.mx-eco__node-svg {
    width: 18px;
    height: 18px;
    display: block;
}

.mx-eco__node-svg {
    width: 16px;
    height: 16px;
}

/* ══════════════════════════════════════════════════════════════════════════
   G2 / M1 — FOOTER BLOB'UNDAN TAŞINAN KATMANLAR  (2026-10-20)
   --------------------------------------------------------------------------
   Kaynak: `settings.custom_footer_code` → <style id="emyrax-site-css"> +
           <style id="emyrax-module-theme"> (91.787 kr, 787 kural, 14 @media).

   NEDEN: site CSS'i settings blob'unda inline yaşıyordu →
     · her sayfada 157 KB inline CSS (sayfa ağırlığının %52–67'si),
     · 256 KB `builder-compiled-css` kesme eşiği,
     · `col-span-*` grid yardımcıları yalnız blob'da (blob silinirse düzen çöker),
     · `ex-*` 372 kuralı canlı DOM'da 0 kez kullanılıyordu (34,6 KB ölü CSS).

   KATMAN: 1 — Çekirdek (cache'lenir, `<link>` ile bir kez yüklenir).
   KURAL:  Hex renk YOKtur (TokenCatalogTest) → `var(--color-*)` / `rgb()`.
           Token yoksa fallback devreye girer; token'lar `settings.global_design`'dan gelir.
           Kırılımlar: 767 / 1023 / 1024 (ResponsiveDesign::BREAKPOINTS).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── M1-0) mx-* ÖLÇÜ TOKEN'LARI (renk DEĞİL — renkler global_design'da) ───
   `:where(:root)` özgüllüğü 0 → tenant/kullanıcı override'ı her zaman kazanır.
   Kaynak: eski `:where(:root)` bloğunun yalnız ölçü/hareket satırları;
   25 renk/gradient token'ı KOPYALANMADI (hex yasağı + `global_design` tek kaynak). */
:where(:root) {
    --mx-radius: 20px;
    --mx-radius-sm: 14px;
    --mx-max: 1180px;
    --mx-ease: cubic-bezier(.22, .61, .36, 1);
    --mx-shadow: 0 30px 80px -30px rgba(0, 0, 0, .85);
}

/* ── M1-a) SAYFA ZEMİNİ + CHROME YIĞIN + GÖVDE ──────────────────────────── */
/* Sayfa zemini — yalnız --color-bg/--color-ink token'ı olan kurulumlarda etkili;
   token yoksa `transparent`/`inherit` → diğer tenant'ların görünümü DEĞİŞMEZ. */
body {
    background-color: var(--color-bg, transparent);
    color: var(--color-ink, inherit);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    /* Gövde tipografisi — `--font-body` token'ı (`global_design.typography`) varsa
       o aile; yoksa kalıtım → diğer kurulumlarda tipografi DEĞİŞMEZ. */
    font-family: var(--font-body, inherit);
    /* Yatay taşma emniyeti (mobil 390px): mega panel/drawer genişliği gövdeyi
       kaydırmasın. `clip` kaydırma alanı YARATMAZ (sticky/fixed bozulmaz). */
    overflow-x: clip;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

/* Sayfa dekor zemini — TOKEN TABANLI ve OPT-IN.
   `--gradient-page-backdrop` / `--gradient-page-grid` token'ları
   `settings.global_design.gradients` içinde tanımlıysa çalışır; tanımlı
   DEĞİLSE `none` → hiçbir görsel etki yok (geriye uyumlu varsayılan).
   (Önceden bu dekor `<style id="emyrax-site-css">` blob'unda sabit kodluydu.) */
body::before {
    content: "";
    position: fixed;
    inset: -20% -10% auto -10%;
    height: 120vh;
    z-index: -2;
    pointer-events: none;
    background-image: var(--gradient-page-backdrop, none);
    filter: blur(6px);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image: var(--gradient-page-grid, none);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgb(0, 0, 0) 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgb(0, 0, 0) 30%, transparent 75%);
}

/* Chrome yığın (stacking) garantisi — mega panel + drawer her zaman üstte. */
.site-chrome,
.site-chrome--header {
    overflow: visible !important;
}

.site-chrome--header {
    position: sticky;
    top: 0;
    z-index: 900;
}

/* Chrome sarmalayıcılarını nötrle (görünümü FLR node'ları getirir). */
.site-chrome {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    min-height: 0 !important;
}

.site-chrome .module,
.site-chrome section.module {
    padding: 0 !important;
    background: transparent !important;
}

.site-chrome .ref-import-content {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Sayfa gövdesi: ana kolon tam genişlik (layout-row taşmasın). */
main#main-content {
    position: relative;
    z-index: 0;
    width: 100%;
}

main#main-content > .page-design-wrap {
    width: 100%;
}

.layout-row {
    overflow: visible !important;
}

.layout-row > .relative {
    z-index: auto;
}

/* ── M1-b) i18n: TR/EN içerik anahtarı ──────────────────────────────────── */
/* 1) TR/EN içerik anahtarı — aktif dil dışındaki blok DOM'da kalır, görünmez */
html[lang="tr"] [data-lang="en"],
html[lang="en"] [data-lang="tr"] {
    display: none !important;
}

/* ── M1-c) GRID YARDIMCILARI (col-span-1..12 · md: · lg: · grid-cols-12) ───
   N2: `page-layout.php` kolonları bu sınıflarla basar. Tek kaynak BURASIDIR;
   daha önce yalnız settings blob'unda tanımlıydı (blob silinirse düzen çökerdi). */
.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}
.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}
.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}
.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}
.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}
.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}
@media (min-width: 768px) {
.md\:col-span-1{grid-column:span 1/span 1}.md\:col-span-2{grid-column:span 2/span 2}
.md\:col-span-3{grid-column:span 3/span 3}.md\:col-span-4{grid-column:span 4/span 4}
.md\:col-span-5{grid-column:span 5/span 5}.md\:col-span-6{grid-column:span 6/span 6}
.md\:col-span-7{grid-column:span 7/span 7}.md\:col-span-8{grid-column:span 8/span 8}
.md\:col-span-9{grid-column:span 9/span 9}.md\:col-span-10{grid-column:span 10/span 10}
.md\:col-span-11{grid-column:span 11/span 11}.md\:col-span-12{grid-column:span 12/span 12}
}
@media (min-width: 1024px) {
.lg\:col-span-1{grid-column:span 1/span 1}.lg\:col-span-2{grid-column:span 2/span 2}
.lg\:col-span-3{grid-column:span 3/span 3}.lg\:col-span-4{grid-column:span 4/span 4}
.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-6{grid-column:span 6/span 6}
.lg\:col-span-7{grid-column:span 7/span 7}.lg\:col-span-8{grid-column:span 8/span 8}
.lg\:col-span-9{grid-column:span 9/span 9}.lg\:col-span-10{grid-column:span 10/span 10}
.lg\:col-span-11{grid-column:span 11/span 11}.lg\:col-span-12{grid-column:span 12/span 12}
}

/* ── M1-d) MODÜL TEMA KATMANI (mx-* bileşenleri) ─────────────────────────
   Kaynak: <style id="emyrax-module-theme"> — 244 kural, birebir taşındı.
   Kapsam seçicileri (`main#main-content …`) KORUNDU: özgüllük değişirse
   panel önizlemesi ile canlı yayın ayrışır (parity kırılır). */
/* ══════════════════════════════════════════════════════════════
   EMYRAX — MODÜL TEMA KATMANI (v4)
   Tüm görünüm settings.global_design token'larından gelir:
   renk → var(--color-*), gradient → var(--gradient-*).
   Token yoksa güvenli fallback devreye girer.
   ══════════════════════════════════════════════════════════════ */

/* ── Sayfa zemini & tipografi ───────────────────────────────── */
main#main-content{background:transparent}
main#main-content .page-design-wrap{background:transparent!important}
main#main-content .module{color:var(--color-ink)}
main#main-content .module .mx-inner,
main#main-content .module > div{position:relative}
main#main-content .mx-h2,
main#main-content .mx-cta__title{
  font-size:clamp(26px,3.2vw,40px); line-height:1.12; letter-spacing:-.8px;
  font-weight:800; color:var(--color-ink); margin:14px 0 12px;
}
main#main-content .mx-lead{font-size:15.5px; line-height:1.65; color:var(--color-muted); max-width:62ch}
main#main-content .mx-shead{max-width:1180px;margin:0 auto 34px;padding:0 24px}
main#main-content .mx-shead--center{text-align:center}
main#main-content .mx-shead--center .mx-lead{margin-inline:auto}
main#main-content .mx-shead--left{text-align:left;max-width:640px;margin-left:calc((100% - min(100%,var(--mx-max)))/2);padding-left:24px}
/* ── Eyebrow (noktalı üst etiket) ───────────────────────────── */
main#main-content .mx-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--color-muted-2);margin:0 0 6px;
}
main#main-content .mx-eyebrow--center{justify-content:center;width:100%;text-align:center}
main#main-content .mx-eyebrow__dot{
  width:7px;height:7px;border-radius:50%;background:var(--gradient-brand);
  box-shadow:0 0 0 3px rgba(99,102,241,.16);flex:0 0 auto;
}
main#main-content .mx-grad-text{
  background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* ── Hero ───────────────────────────────────────────────────── */
main#main-content .mx-hero-eyebrow{margin-bottom:14px}
main#main-content .mx-hero-side{position:relative;width:100%}
/* P6.1 — art direction motif: dekoratif katman, içerik z-10 üstünde kalır. */
main#main-content .mx-art-motif{position:absolute;right:0;bottom:0;width:min(38vw,480px);max-height:72%;z-index:1;pointer-events:none;color:var(--mx-on-media-mark);opacity:.34;mix-blend-mode:soft-light}
main#main-content .mx-cta .mx-art-motif{width:min(30%,320px);opacity:.18;color:var(--color-ink)}
@media (max-width:768px){main#main-content .mx-art-motif{width:54vw;opacity:.22}}
/* P6.3 — art direction tipografi karakteri (hero/CTA başlıkları). */
main#main-content .mx-art-type--editorial h1,
main#main-content .mx-art-type--editorial .lp-hero__title,
main#main-content .mx-art-type--editorial .mx-cta__title{font-weight:800;letter-spacing:-.03em;text-wrap:balance}
main#main-content .mx-art-type--industrial h1,
main#main-content .mx-art-type--industrial .lp-hero__title,
main#main-content .mx-art-type--industrial .mx-cta__title{font-weight:900;letter-spacing:-.012em;text-transform:uppercase}
main#main-content .mx-art-type--organic h1,
main#main-content .mx-art-type--organic .lp-hero__title,
main#main-content .mx-art-type--organic .mx-cta__title{font-family:var(--font-serif,Georgia,"Times New Roman",serif);font-weight:600;letter-spacing:-.01em}
main#main-content .mx-trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px}
main#main-content .mx-trust--center{justify-content:center}
main#main-content .mx-trust__item{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;color:var(--color-muted);
}
main#main-content .mx-trust__ic{width:15px;height:15px;color:var(--color-lab-1);flex:0 0 auto}
/* ── Stats ──────────────────────────────────────────────────── */
main#main-content .mx-stats-wrap{padding:0 24px}
main#main-content .mx-stats-wrap--strip{
  border-block:1px solid var(--color-line);background:color-mix(in srgb,var(--color-bg-2) 82%,transparent);
  padding:26px 24px;
}
main#main-content .mx-stats{display:grid;gap:16px}
main#main-content .mx-stats[data-cols="1"]{grid-template-columns:1fr}
main#main-content .mx-stats[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
main#main-content .mx-stats[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
main#main-content .mx-stats[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
main#main-content .mx-stats[data-cols="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}
main#main-content .mx-stats[data-cols="6"]{grid-template-columns:repeat(6,minmax(0,1fr))}
main#main-content .mx-stat{text-align:center;padding:6px 4px}
main#main-content .mx-stats-wrap--bordered .mx-stat{
  border:1px solid var(--color-line);border-radius:16px;padding:16px 10px;background:var(--color-surface);
}
main#main-content .mx-stat__icon{display:inline-flex;color:var(--color-tax-2);margin-bottom:8px}
main#main-content .mx-stat__icon-svg{width:22px;height:22px}
main#main-content .mx-stat__value{
  font-size:clamp(24px,2.6vw,34px);font-weight:900;letter-spacing:-1px;color:var(--color-ink);
}
main#main-content .mx-stat.is-highlight .mx-stat__value{
  background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
main#main-content .mx-stat__label{
  margin-top:5px;font-size:10px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--color-muted-2);
}
/* ── Grid + kartlar ─────────────────────────────────────────── */
main#main-content .mx-fg-wrap{padding:0 24px;max-width:var(--mx-max);margin-inline:auto}
main#main-content .mx-grid{display:grid;gap:18px}
main#main-content .mx-grid[data-cols="1"]{grid-template-columns:1fr}
main#main-content .mx-grid[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
main#main-content .mx-grid[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
main#main-content .mx-grid[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
main#main-content .mx-card{
  position:relative;display:flex;flex-direction:column;gap:10px;
  padding:22px;border-radius:var(--mx-radius);color:var(--color-ink);
  background:var(--color-surface);border:1px solid var(--color-line);
  text-decoration:none;overflow:hidden;
  transition:transform .28s var(--mx-ease),border-color .28s var(--mx-ease),background .28s var(--mx-ease);
}
main#main-content .mx-card--plain{background:transparent;border-color:transparent;padding-inline:0}
main#main-content .mx-card--lift:hover{transform:translateY(-4px);border-color:var(--color-line-strong);background:var(--color-surface-2)}
main#main-content .mx-card.is-highlight{border-color:var(--color-line-strong);box-shadow:0 24px 60px -30px rgba(99,102,241,.6)}
main#main-content .mx-card::before{
  content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(120% 90% at 0% 0%,rgba(99,102,241,.18),transparent 60%);
  transition:opacity .3s var(--mx-ease);
}
main#main-content .mx-card:hover::before{opacity:1}
main#main-content .mx-card[data-accent="tax"]::before{background:radial-gradient(120% 90% at 0% 0%,rgba(99,102,241,.22),transparent 62%)}
main#main-content .mx-card[data-accent="build"]::before{background:radial-gradient(120% 90% at 0% 0%,rgba(168,85,247,.22),transparent 62%)}
main#main-content .mx-card[data-accent="lab"]::before{background:radial-gradient(120% 90% at 0% 0%,rgba(16,185,129,.22),transparent 62%)}
main#main-content .mx-card__icon{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:var(--color-on-brand, var(--color-white, white));flex:0 0 auto;
}
main#main-content .mx-card__icon-svg{width:22px;height:22px}
main#main-content .mx-card__icon--solid{background:var(--gradient-brand)}
main#main-content .mx-card[data-accent="tax"] .mx-card__icon--solid{background:var(--gradient-tax)}
main#main-content .mx-card[data-accent="build"] .mx-card__icon--solid{background:var(--gradient-build)}
main#main-content .mx-card[data-accent="lab"] .mx-card__icon--solid{background:var(--gradient-lab)}
main#main-content .mx-card__icon--soft{
  background:rgba(99,102,241,.14);color:var(--color-tax-2);border:1px solid rgba(99,102,241,.24);
}
main#main-content .mx-card[data-accent="build"] .mx-card__icon--soft{background:rgba(168,85,247,.14);color:rgb(232,121,249);border-color:rgba(168,85,247,.26)}
main#main-content .mx-card[data-accent="lab"] .mx-card__icon--soft{background:rgba(16,185,129,.14);color:var(--color-lab-1);border-color:rgba(16,185,129,.26)}
main#main-content .mx-card__icon--outline{background:transparent;border:1px solid var(--color-line-strong);color:var(--color-ink)}
main#main-content .mx-card__icon--plain{background:transparent;color:var(--color-tax-2);width:auto;height:auto}
main#main-content .mx-card__num{
  font-size:26px;font-weight:900;font-style:italic;letter-spacing:-1px;
  background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
main#main-content .mx-card__title{font-size:15.5px;font-weight:800;color:var(--color-ink);margin:0}
main#main-content .mx-card__desc{font-size:13px;line-height:1.6;color:var(--color-muted);margin:0}
main#main-content .mx-card__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
main#main-content .mx-chip{
  font-size:10px;font-weight:700;letter-spacing:.4px;color:var(--color-muted);
  border:1px solid var(--color-line);border-radius:999px;padding:4px 9px;background:rgba(255,255,255,.03);
}
main#main-content .mx-card__link{
  display:inline-flex;align-items:center;gap:6px;margin-top:6px;
  font-size:12px;font-weight:800;color:var(--color-tax-2);text-decoration:none;
}
main#main-content .mx-card__link-ic{width:13px;height:13px}
main#main-content .mx-card__link:hover{color:var(--color-on-brand, var(--color-white, white))}
main#main-content .mx-emoji{font-size:20px;line-height:1}
main#main-content .mx-pill{
  display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;
  letter-spacing:.8px;text-transform:uppercase;color:var(--color-tax-2);
  border:1px solid rgba(34,211,238,.3);border-radius:999px;padding:5px 10px;background:rgba(34,211,238,.08);
}
/* ── Split content ──────────────────────────────────────────── */
main#main-content .mx-split{padding:0 24px;max-width:var(--mx-max);margin-inline:auto}
main#main-content .mx-split__grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
main#main-content .mx-split__grid--solo{grid-template-columns:1fr}
main#main-content .mx-split__text--first{order:1}
main#main-content .mx-split__media--last{order:2}
main#main-content .mx-split__kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
main#main-content .mx-split__media{position:relative;border-radius:var(--mx-radius);overflow:hidden;border:1px solid var(--color-line);min-height:240px;background:var(--color-surface)}
main#main-content .mx-split__media img{width:100%;height:100%;object-fit:cover;display:block}
main#main-content .mx-split__media-veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(6,9,18,.75))}
main#main-content .mx-split__media-label{
  position:absolute;bottom:16px;left:16px;font-size:10.5px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--color-tax-2);
}
main#main-content .mx-media-html{border-radius:var(--mx-radius);overflow:hidden}
main#main-content .mx-media-empty{
  display:grid;place-items:center;min-height:220px;color:var(--color-muted-2);font-size:12px;
}
main#main-content .mx-checks{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
main#main-content .mx-checks li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--color-muted)}
main#main-content .mx-checks__ic{
  width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(16,185,129,.14);color:var(--color-lab-1);font-size:11px;font-weight:800;
}
main#main-content .mx-checks--dot .mx-checks__ic{background:transparent}
main#main-content .mx-checks--number .mx-checks__ic{background:rgba(99,102,241,.16);color:var(--color-tax-2)}
main#main-content .mx-checks__svg{width:13px;height:13px}
main#main-content .mx-checks__dot{width:6px;height:6px;border-radius:50%;background:var(--gradient-brand)}
main#main-content .mx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;
  font-size:13.5px;font-weight:800;padding:12px 18px;border-radius:12px;text-decoration:none;
  transition:transform .2s var(--mx-ease),box-shadow .2s var(--mx-ease);
}
main#main-content .mx-btn--primary{background:var(--gradient-brand);color:var(--color-on-brand, var(--color-white, white));box-shadow:0 16px 36px -16px rgba(99,102,241,.9)}
main#main-content .mx-btn--primary:hover{transform:translateY(-1px)}
/* ── Media + features ───────────────────────────────────────── */
main#main-content .mx-mf{padding:0 24px;max-width:var(--mx-max);margin-inline:auto}
main#main-content .mx-mf__list{display:grid;gap:18px}
main#main-content .mx-mf__row{display:flex;gap:14px;align-items:flex-start}
main#main-content .mx-mf__title{font-size:14.5px;font-weight:800;color:var(--color-ink);margin:0 0 3px}
main#main-content .mx-mf__desc{font-size:12.5px;line-height:1.6;color:var(--color-muted);margin:0}
/* ── Pricing ────────────────────────────────────────────────── */
main#main-content .mx-plans{display:grid;gap:18px;padding:0 24px;max-width:var(--mx-max);margin-inline:auto;align-items:stretch}
main#main-content .mx-plans[data-cols="1"]{grid-template-columns:1fr}
main#main-content .mx-plans[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
main#main-content .mx-plans[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
main#main-content .mx-plans[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
main#main-content .mx-plan{
  position:relative;display:flex;flex-direction:column;gap:12px;padding:24px;
  border:1px solid var(--color-line);border-radius:var(--mx-radius);
  background:var(--color-surface);transition:border-color .25s var(--mx-ease),transform .25s var(--mx-ease);
}
main#main-content .mx-plan:hover{border-color:var(--color-line-strong)}
main#main-content .mx-plan.is-popular{
  border-color:rgba(99,102,241,.45);
  background:linear-gradient(180deg,rgba(99,102,241,.12),rgba(255,255,255,.02));
  box-shadow:0 30px 70px -34px rgba(99,102,241,.85);
}
main#main-content .mx-plan__badge{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  font-size:9.5px;font-weight:900;letter-spacing:1px;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;background:var(--gradient-brand);color:var(--color-on-brand, var(--color-white, white));white-space:nowrap;
}
main#main-content .mx-plan__name{font-size:15px;font-weight:800;color:var(--color-ink);margin:0}
main#main-content .mx-plan__desc{font-size:12px;line-height:1.55;color:var(--color-muted);margin:0}
main#main-content .mx-plan__chips{display:flex;flex-wrap:wrap;gap:5px}
main#main-content .mx-plan__price{display:flex;align-items:baseline;gap:6px;margin-top:4px}
main#main-content .mx-plan__amount{
  font-size:32px;font-weight:900;letter-spacing:-1.2px;color:var(--color-ink);
}
main#main-content .mx-plan__period{font-size:12px;color:var(--color-muted-2)}
main#main-content .mx-plan__rows{display:grid;gap:6px;border-top:1px solid var(--color-line);padding-top:10px}
main#main-content .mx-plan__row{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--color-muted)}
main#main-content .mx-plan__row b{color:var(--color-ink);font-weight:700}
main#main-content .mx-plan__features{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:7px}
main#main-content .mx-plan__features li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--color-muted)}
main#main-content .mx-plan__check{width:14px;height:14px;color:var(--color-lab-1);flex:0 0 auto;margin-top:2px}
main#main-content .mx-plan__btn{
  margin-top:auto;display:block;text-align:center;text-decoration:none;
  font-size:12.5px;font-weight:800;padding:11px 14px;border-radius:11px;
  border:1px solid var(--color-line-strong);color:var(--color-ink);background:rgba(255,255,255,.04);
  transition:background .2s var(--mx-ease);
}
main#main-content .mx-plan__btn:hover{background:rgba(255,255,255,.09)}
main#main-content .mx-plan__btn--accent{background:var(--gradient-brand);border-color:transparent;color:var(--color-on-brand, var(--color-white, white))}
main#main-content .mx-billing{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 auto 26px}
main#main-content .mx-billing__group{display:inline-flex;gap:4px;padding:4px;border-radius:999px;border:1px solid var(--color-line);background:var(--color-surface)}
main#main-content .mx-billing__opt{position:relative;cursor:pointer}
main#main-content .mx-billing__opt span{
  display:inline-block;padding:7px 16px;border-radius:999px;font-size:12px;font-weight:700;color:var(--color-muted);
}
main#main-content .mx-billing__opt input:checked + span{background:var(--gradient-brand);color:var(--color-on-brand, var(--color-white, white))}
main#main-content .mx-billing__note{font-size:11px;color:var(--color-muted-2)}
main#main-content .mx-note{margin:18px 0 0;font-size:11.5px;color:var(--color-muted-2);padding:0 24px}
main#main-content .mx-note--center{text-align:center}
/* ── CTA ────────────────────────────────────────────────────── */
main#main-content .mx-cta{
  max-width:var(--mx-max);margin-inline:auto;padding:44px 32px;border-radius:26px;text-align:center;
  border:1px solid var(--color-line-strong);position:relative;overflow:hidden;
}
main#main-content .mx-cta--gradient{background:linear-gradient(120deg,rgba(99,102,241,.22),rgba(139,92,246,.16),rgba(34,211,238,.14))}
main#main-content .mx-cta--glass{background:var(--color-surface);backdrop-filter:blur(16px)}
main#main-content .mx-cta--dark{background:var(--color-bg-2)}
main#main-content .mx-cta--plain{background:transparent;border-color:var(--color-line)}
main#main-content .mx-cta__title{font-size:clamp(24px,3vw,34px);font-weight:900;letter-spacing:-1px;color:var(--color-ink);margin:8px 0 10px}
main#main-content .mx-cta__lead{font-size:14.5px;color:var(--color-muted);margin:0 0 20px}
/* ── FAQ / Tabs / Progress ──────────────────────────────────── */
main#main-content .mx-faq{padding:0 24px;max-width:900px;margin-inline:auto}
main#main-content .mx-tabs-wrap{padding:0 24px;max-width:var(--mx-max);margin-inline:auto}
main#main-content .mx-progress{padding:0 24px;max-width:var(--mx-max);margin-inline:auto}
main#main-content .mx-progress__list{display:grid;gap:18px;max-width:820px;margin-inline:auto}
main#main-content .mx-bar__head{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px;font-size:12.5px;font-weight:700;color:var(--color-muted)}
main#main-content .mx-bar__value{color:var(--color-ink);font-variant-numeric:tabular-nums}
main#main-content .mx-bar__track{height:9px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
main#main-content .mx-bar__fill{
  height:100%;border-radius:999px;background:linear-gradient(90deg,var(--color-primary, rgb(99,102,241)),var(--color-accent, rgb(34,211,238)));
  transition:width 1.4s var(--mx-ease);
}
main#main-content .mx-bar.is-highlight .mx-bar__fill{background:var(--gradient-brand)}
main#main-content .mx-bar.is-highlight .mx-bar__value{color:var(--color-tax-2)}
/* ── Marquee (çip görünümü) ─────────────────────────────────── */
main#main-content .mx-marquee{padding:8px 0}
main#main-content .mx-marquee--chip .pb-marquee-item{
  border:1px solid var(--color-line);background:var(--color-surface);border-radius:999px;padding:8px 16px;
}
main#main-content .mx-marquee--chip .pb-marquee-item--upper{letter-spacing:.12em}
main#main-content .mx-marquee .pb-marquee-text{color:var(--color-muted);font-weight:700}
main#main-content .mx-marquee .pb-marquee-item b{color:var(--color-ink)}
main#main-content .mx-marquee--align-left{text-align:left}
main#main-content .mx-marquee--align-center{text-align:center}
main#main-content .mx-marquee--align-right{text-align:right}
/* ── Form kartı ─────────────────────────────────────────────── */
main#main-content .mx-form-card{
  border:1px solid var(--color-line);border-radius:var(--mx-radius);padding:22px;
  background:var(--color-surface);max-width:640px;margin-inline:auto;
}
main#main-content .mx-form-card--glass{backdrop-filter:blur(16px);background:var(--color-surface-2)}
main#main-content .mx-form-card--plain{border:0;background:transparent;padding:0}
main#main-content .mx-form-card__title{font-size:19px;font-weight:800;color:var(--color-ink);margin:0 0 6px}
main#main-content .mx-form-card__lead{font-size:12.5px;color:var(--color-muted);margin:0 0 16px}
/* Tasarım sistemi buton sınıfları (hero/cta/split butonları) */
main#main-content .module .btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--gradient-brand);color:var(--color-on-brand, var(--color-white, white));font-size:13.5px;font-weight:800;
  padding:12px 18px;border-radius:12px;text-decoration:none;border:0;
  box-shadow:0 16px 36px -16px rgba(99,102,241,.9);
}
main#main-content .module .btn-outline-white,
main#main-content .module .btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(255,255,255,.04);border:1px solid var(--color-line-strong);
  color:var(--color-ink);font-size:13.5px;font-weight:700;padding:12px 18px;
  border-radius:12px;text-decoration:none;backdrop-filter:blur(8px);
}
main#main-content .module .btn-outline-white:hover,
main#main-content .module .btn-ghost:hover{background:rgba(255,255,255,.08)}
/* ── KRİTİK: data-pb-el inline `background:transparent` baskısı ────
   pbElementAttr() her elemente inline `style="background:transparent"`
   basar (builder binding varsayılanı). Kart/panel görünümü bu yüzden
   class ile verilemez → !important + (0,2,1) özgüllük gerekir.
   (Görev notu: "kart görünümü için CSS !important + özgüllük gerekir") */
main#main-content .module .mx-card{
  background-color:var(--color-surface)!important;
  border:1px solid var(--color-line)!important;
}
main#main-content .module .mx-card--plain{background-color:transparent!important;border-color:transparent!important}
main#main-content .module .mx-card.is-highlight{
  border-color:var(--color-line-strong)!important;
  box-shadow:0 24px 60px -30px rgba(99,102,241,.6)!important;
}
main#main-content .module .mx-card__icon--solid{background-image:var(--gradient-brand)!important;background-color:transparent!important}
main#main-content .module .mx-card[data-accent="tax"] .mx-card__icon--solid{background-image:var(--gradient-tax)!important}
main#main-content .module .mx-card[data-accent="build"] .mx-card__icon--solid{background-image:var(--gradient-build)!important}
main#main-content .module .mx-card[data-accent="lab"] .mx-card__icon--solid{background-image:var(--gradient-lab)!important}
main#main-content .module .mx-card__icon--soft{background-color:rgba(99,102,241,.14)!important;border:1px solid rgba(99,102,241,.24)!important}
main#main-content .module .mx-card__icon--outline{background-color:transparent!important;border:1px solid var(--color-line-strong)!important}
main#main-content .module .mx-card__icon--plain{background-color:transparent!important;border:0!important}
main#main-content .module .mx-stat{
  background-color:transparent!important;border-color:transparent!important;
}
main#main-content .module .mx-stats-wrap--bordered .mx-stat{
  background-color:var(--color-surface)!important;border:1px solid var(--color-line)!important;
}
main#main-content .module .mx-plan{
  background-color:var(--color-surface)!important;
  border:1px solid var(--color-line)!important;
}
main#main-content .module .mx-plan.is-popular{
  border-color:rgba(99,102,241,.45)!important;
  background-image:linear-gradient(180deg,rgba(99,102,241,.12),rgba(255,255,255,.02))!important;
  background-color:transparent!important;
}
main#main-content .module .mx-plan__btn{background-color:rgba(255,255,255,.04)!important;border:1px solid var(--color-line-strong)!important}
main#main-content .module .mx-plan__btn--accent{background-image:var(--gradient-brand)!important;background-color:transparent!important;border-color:transparent!important}
main#main-content .module .mx-mock{background-image:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))!important;border:1px solid var(--color-line)!important}
main#main-content .module .mx-mock__cell{background-color:rgba(255,255,255,.03)!important;border:1px solid var(--color-line)!important}
main#main-content .module .mx-chip{background-color:rgba(255,255,255,.03)!important;border:1px solid var(--color-line)!important}
/* B — form kartı: yarı saydam yüzey metin kontrastını düşürüyordu (AA altı).
   Kart zeminini tema token'ı --color-bg-2 ile OPAK yapıyoruz (hex YOK). */
main#main-content .module .mx-form-card{background-color:var(--color-bg-2)!important;border:1px solid var(--color-line)!important}
main#main-content .module .mx-form-card--glass{background-color:var(--color-surface-2)!important;backdrop-filter:blur(16px)!important}
main#main-content .module .mx-form-card--plain{background-color:transparent!important;border:0!important}
main#main-content .module .mx-pill{background-color:rgba(34,211,238,.08)!important;border:1px solid rgba(34,211,238,.3)!important}
main#main-content .module .mx-checks__ic{background-color:rgba(16,185,129,.14)!important}
main#main-content .module .mx-checks--number .mx-checks__ic{background-color:rgba(99,102,241,.16)!important}
main#main-content .module .mx-checks--dot .mx-checks__ic{background-color:transparent!important}
main#main-content .module .mx-billing__group{background-color:var(--color-surface)!important;border:1px solid var(--color-line)!important}
main#main-content .module .mx-btn--primary{background-image:var(--gradient-brand)!important;background-color:transparent!important}
/* ── pb-* bileşenlerinin koyu tema karşılığı ─────────────────── */
main#main-content .module .pb-faq-item{
  background-color:var(--color-surface)!important;border:1px solid var(--color-line)!important;
  border-radius:16px!important;
}
main#main-content .module .pb-faq-question,
main#main-content .module .pb-faq-qtext{color:var(--color-ink)!important}
main#main-content .module .pb-faq-answer,
main#main-content .module .pb-faq-answer p{color:var(--color-muted)!important}
main#main-content .module .pb-faq-trigger{color:var(--color-ink)!important}
main#main-content .module .pb-faq-index{color:var(--color-muted-2)!important}
main#main-content .module .pb-tabs-btn{
  border:1px solid var(--color-line)!important;background-color:var(--color-surface)!important;
  color:var(--color-muted)!important;border-radius:999px!important;
}
main#main-content .module .pb-tabs-btn.is-active{
  background-image:var(--gradient-brand)!important;background-color:transparent!important;
  color:var(--color-on-brand, var(--color-white, white))!important;border-color:transparent!important;
}
main#main-content .module .pb-tabs-content,
main#main-content .module .pb-tabs-panel{color:var(--color-muted)!important}
main#main-content .module .pb-marquee-item--upper{letter-spacing:.12em}
/* ── Mock panelleri (medya slotu içerikleri) ────────────────── */
main#main-content .mx-mock{
  border:1px solid var(--color-line);border-radius:var(--mx-radius);padding:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  box-shadow:var(--mx-shadow);
}
main#main-content .mx-mock__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
main#main-content .mx-mock__title{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--color-muted-2)}
main#main-content .mx-mock__row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;border-top:1px solid var(--color-line);font-size:12px;color:var(--color-muted);
}
main#main-content .mx-mock__row:first-of-type{border-top:0}
main#main-content .mx-mock__row b{color:var(--color-ink);font-weight:800;font-variant-numeric:tabular-nums}
main#main-content .mx-mock__dot{width:7px;height:7px;border-radius:50%;background:var(--gradient-brand)}
main#main-content .mx-mock__bar{height:5px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:6px}
main#main-content .mx-mock__bar i{display:block;height:100%;border-radius:999px;background:var(--gradient-brand)}
main#main-content .mx-mock__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
main#main-content .mx-mock__cell{border:1px solid var(--color-line);border-radius:12px;padding:10px;background:rgba(255,255,255,.03)}
main#main-content .mx-mock__cell small{display:block;font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--color-muted-2)}
main#main-content .mx-mock__cell b{font-size:15px;font-weight:900;color:var(--color-ink)}
/* ── Duyarlı ızgara çöküşü ──────────────────────────────────── */
@media (max-width:1023px){
  main#main-content .mx-grid[data-cols="3"],
  main#main-content .mx-grid[data-cols="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  main#main-content .mx-plans[data-cols="3"],
  main#main-content .mx-plans[data-cols="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  main#main-content .mx-stats[data-cols="5"],
  main#main-content .mx-stats[data-cols="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  main#main-content .mx-split__grid{grid-template-columns:1fr}
  main#main-content .mx-shead--left{margin-left:0}
}
@media (max-width:767px){
  main#main-content .mx-grid[data-cols="2"],
  main#main-content .mx-grid[data-cols="3"],
  main#main-content .mx-grid[data-cols="4"]{grid-template-columns:1fr}
  main#main-content .mx-plans[data-cols="2"],
  main#main-content .mx-plans[data-cols="3"],
  main#main-content .mx-plans[data-cols="4"]{grid-template-columns:1fr}
  main#main-content .mx-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  main#main-content .mx-stats[data-cols="1"]{grid-template-columns:1fr!important}
  main#main-content .mx-shead,
  main#main-content .mx-fg-wrap,
  main#main-content .mx-split,
  main#main-content .mx-plans,
  main#main-content .mx-mf,
  main#main-content .mx-faq,
  main#main-content .mx-progress,
  main#main-content .mx-tabs-wrap{padding-inline:18px}
  main#main-content .mx-cta{padding:30px 20px;border-radius:20px}
}
/* ── Erişilebilirlik: hareket azaltma (VXP motion kontratı) ── */
@media (prefers-reduced-motion:reduce){
  main#main-content .mx-card,
  main#main-content .mx-btn,
  main#main-content .mx-eco__node,
  main#main-content .mx-plan,
  main#main-content .mx-bar__fill{transition:none!important;animation:none!important}
  main#main-content .mx-card--lift:hover{transform:none}
  .pb-marquee-inf__track,.pb-marquee-tilted__track{animation:none!important}
  .pb-row-motion,.pb-module-motion{animation:none!important;opacity:1!important;transform:none!important}
}
/* ══════════════════════════════════════════════════════════════
   PARITY KATMANI — referans tasarım (docs/website/index.html) ile
   birebir eşleşme. Ölçümle doğrulandı (Playwright computed styles).
   Bu blok en sonda olduğu için önceki kuralları geçersiz kılar.
   ══════════════════════════════════════════════════════════════ */
/* 1) Tipografi: başlıklar SANS (renderer'lardaki `font-serif` ezilir) */
main#main-content .module h1,
main#main-content .module h2,
main#main-content .module h3,
main#main-content .module h4{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important;
}
main#main-content .module h1{
  font-size:clamp(34px,4.1vw,58px)!important;
  font-weight:850!important;line-height:1.04!important;letter-spacing:-1.8px!important;
}
main#main-content .module h2{
  font-size:clamp(26px,3.1vw,42px)!important;
  font-weight:850!important;line-height:1.08!important;letter-spacing:-1.2px!important;
}
/* 2) Hero: lead 16.5px + muted (tasarımdaki .lead) */
main#main-content .module-hero p{
  font-size:16.5px!important;line-height:1.55!important;color:var(--color-muted)!important;
  max-width:56ch;
}
main#main-content .module-hero .mx-trust__item{font-size:12.5px!important}
/* 3) Eyebrow: indigo-200, .4px letter-spacing (tasarım .eyebrow) */
main#main-content .module .mx-eyebrow{
  font-size:11.5px!important;font-weight:700!important;letter-spacing:.4px!important;
  color:rgb(199,210,254)!important;text-transform:uppercase;
}
/* 4) Stat bandı: tam genişlik bant DEĞİL — 1180px kenarlıklı kart (tasarım .statband) */
main#main-content .module .mx-stats-wrap,
main#main-content .module .mx-stats-wrap--strip{
  max-width:calc(var(--mx-max) - 48px)!important;margin:34px auto 0!important;
  border:1px solid var(--color-line)!important;border-radius:18px!important;
  background-color:var(--color-surface)!important;padding:18px 8px!important;
  border-block:1px solid var(--color-line)!important;
}
main#main-content .module .mx-stats-wrap--strip{padding:18px 8px!important}
main#main-content .module .mx-stats[data-cols="5"]{grid-template-columns:repeat(5,minmax(0,1fr))!important}
main#main-content .module .mx-stat{padding:4px 10px!important;border-left:1px solid var(--color-line)}
main#main-content .module .mx-stat:first-child{border-left:0}
main#main-content .module .mx-stats-wrap--bordered .mx-stat{
  border:0!important;border-left:1px solid var(--color-line)!important;background-color:transparent!important;border-radius:0!important;
}
/* Tasarımda TÜM stat değerleri gradyan metindir (.stat b) */
main#main-content .module .mx-stat__value{
  font-size:24px!important;font-weight:850!important;letter-spacing:-.6px!important;
  background:var(--gradient-brand)!important;-webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
}
main#main-content .module .mx-stat__label{font-size:9.5px!important;letter-spacing:1.1px!important;color:var(--color-muted-2)!important}
/* 5) Butonlar: pbElementAttr inline `background:transparent` baskısını ez */
main#main-content .module .btn-primary{
  background-image:var(--gradient-brand)!important;background-color:transparent!important;
  color:var(--color-on-brand, var(--color-white, white))!important;border:0!important;border-radius:12px!important;
  padding:12px 18px!important;font-size:14px!important;font-weight:700!important;
  box-shadow:0 14px 34px -14px rgba(99,102,241,.9)!important;
}
main#main-content .module .btn-ghost,
main#main-content .module .btn-outline-white{
  background-image:none!important;background-color:rgba(255,255,255,.04)!important;
  border:1px solid var(--color-line-strong)!important;color:var(--color-ink)!important;
  border-radius:12px!important;padding:12px 18px!important;font-size:14px!important;font-weight:700!important;
}
main#main-content .module .btn-ghost:hover,
main#main-content .module .btn-outline-white:hover{background-color:rgba(255,255,255,.08)!important}
/* 6) Kart ölçüleri: radius 22px (tasarım .prod / .card) */
main#main-content .module .mx-card{border-radius:22px!important}
main#main-content .module .mx-card__title{font-size:15px!important;letter-spacing:-.2px}
main#main-content .module .mx-card__desc{font-size:13px!important;line-height:1.55!important}
/* 7) Logolar/entegrasyon şeridi: STATİK satır (tasarım .logos) */
main#main-content .mx-marquee--static .pb-marquee-inf__row{overflow:visible!important;mask-image:none!important}
main#main-content .mx-marquee--static .pb-marquee-inf__track{
  animation:none!important;flex-wrap:wrap!important;justify-content:center!important;
  transform:none!important;gap:10px!important;
}
main#main-content .mx-marquee--static .pb-marquee__fade{display:none!important}
main#main-content .mx-marquee--static .pb-marquee-sep{display:none!important}
main#main-content .mx-marquee--static .pb-marquee-item{
  font-size:11.5px!important;font-weight:700!important;letter-spacing:.2px!important;
  text-transform:none!important;padding:7px 13px!important;border-radius:999px!important;
  border:1px solid var(--color-line)!important;background-color:var(--color-surface)!important;
  color:var(--color-muted)!important;
}
/* 8) Bölüm ritmi: tasarım .section{padding:76px 0} */
main#main-content .module-feature_grid,
main#main-content .module-pricing,
main#main-content .module-faq,
main#main-content .module-progress_bars,
main#main-content .module-tabs,
main#main-content .module-media_features,
main#main-content .module-split_content,
main#main-content .module-icon_features,
main#main-content .module-contact_form{padding-block:76px!important}
main#main-content .module-marquee{padding-block:6px!important}
main#main-content .module-cta{padding-block:10px 76px!important}
/* 9) Parity katmanının duyarlı çöküşü (5 kolon mobilde taşmasın) */
@media (max-width:1023px){
  main#main-content .module .mx-stats[data-cols="5"],
  main#main-content .module .mx-stats[data-cols="6"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  main#main-content .module .mx-stat:nth-child(4){border-left:0}
}
@media (max-width:767px){
  main#main-content .module .mx-stats,
  main#main-content .module .mx-stats[data-cols="5"],
  main#main-content .module .mx-stats[data-cols="6"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  main#main-content .module .mx-stat{border-left:0!important}
  main#main-content .module .mx-stats-wrap,
  main#main-content .module .mx-stats-wrap--strip{max-width:100%!important;border-radius:14px!important}
  main#main-content .module h1{font-size:clamp(30px,8vw,40px)!important;letter-spacing:-1px!important}
  main#main-content .module h2{font-size:clamp(23px,6.4vw,30px)!important;letter-spacing:-.7px!important}
}
/* ── Odak görünürlüğü (AA kontrast) ─────────────────────────── */
main#main-content .module a:focus-visible,
main#main-content .module button:focus-visible,
main#main-content .module input:focus-visible,
main#main-content .module textarea:focus-visible,
main#main-content .module select:focus-visible{outline:2px solid var(--color-accent, rgb(34,211,238));outline-offset:3px;border-radius:8px}

/* ── M1-e) İLETİŞİM FORMU (contact_form kartı + alanlar) ──────────────────
   Site-css'ten taşındı; `--ex-*` yerine `--color-*` / `--mx-radius`. */
/* İletişim formu → tasarım kartı (özgüllük: 0,2,1 — .py-0 ve inline stilleri ezer) */
section.module.module-contact_form{background:var(--color-surface, rgba(255,255,255,.035))!important;border:1px solid var(--color-line, rgba(255,255,255,.09))!important;border-radius:var(--mx-radius, 20px)!important;padding:22px!important}
section.module-contact_form .moxa-form-label{color:var(--color-ink, rgb(238,242,251))!important}
section.module-contact_form .moxa-form-container{max-width:none!important;margin:0!important;padding:0!important}
section.module-contact_form .moxa-form-label{color:var(--color-ink, rgb(238,242,251))!important;font-size:12.5px!important;font-weight:700!important;letter-spacing:.2px}
section.module-contact_form .moxa-form-input,section.module-contact_form .moxa-form-builder input:not([type=radio]):not([type=checkbox]),
section.module-contact_form .moxa-form-builder textarea,section.module-contact_form .moxa-form-builder select{
  background:rgba(255,255,255,.04)!important;border:1px solid var(--color-line-strong, rgba(255,255,255,.16))!important;color:var(--color-ink, rgb(238,242,251))!important;border-radius:12px!important;padding:11px 13px!important;font-size:13px!important;width:100%!important}
section.module-contact_form .moxa-form-builder input::placeholder,section.module-contact_form .moxa-form-builder textarea::placeholder{color:var(--color-muted-2, rgb(123,136,166))!important}
section.module-contact_form .moxa-form-builder select option{background:var(--color-bg-2, rgb(10,15,30));color:var(--color-ink, rgb(238,242,251))}
section.module-contact_form .moxa-form-submit,section.module-contact_form .moxa-form-builder button[type=submit]{
  background-image:linear-gradient(120deg,var(--color-primary, rgb(99,102,241)),var(--color-secondary, rgb(139,92,246)) 45%,var(--color-accent, rgb(34,211,238)))!important;color:var(--color-on-brand, var(--color-white, white))!important;border:0!important;background-color:transparent!important;
  border-radius:12px!important;font-weight:800!important;padding:12px 18px!important;width:100%!important;cursor:pointer}
section.module-contact_form .moxa-form-required{color:var(--color-error, rgb(251,113,133))}
section.module-contact_form .moxa-form-field{margin-bottom:12px}
section.module-contact_form .moxa-form-message,section.module-contact_form .moxa-form-success,section.module-contact_form .moxa-form-error{font-size:12.5px!important}

/* ── P7.11 — Görsel arka planlı hero: okunabilir metin + tek görsel ─────── */
main#main-content .module-hero .mx-hero--media .mx-eyebrow,
main#main-content .module-hero .mx-hero--media h1,
main#main-content .module-hero .mx-hero--media h2,
main#main-content .module-hero .mx-hero--media p,
main#main-content .module-hero .mx-hero--media .mx-trust__item {
  color: var(--mx-on-media-ink) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .78), 0 1px 2px rgba(0, 0, 0, .65);
}
main#main-content .module-hero .mx-hero--media .mx-eyebrow__dot {
  background: var(--mx-on-media-mark) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .22) !important;
}
main#main-content .module-hero .mx-hero--media .mx-hero-side {
  isolation: isolate;
}


/* PA64+13 - OKUNABILIRLIK SON SOZU (vision: baslik koyu zeminde kayboluyor).
   Marka gradyani + `text-fill-color:transparent` kombinasyonu, koyu yuzeyde
   basligi gorunmez yapiyordu. Baslik artik YUZEYIN kontrast rengini alir
   (textOnSurface -> section `color`), gradyan yalniz vurgu olarak kalir. */
main#main-content .mx-grad-text{
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
  color:inherit !important;
}

/* ═══ PA64+14 — İKİNCİL/GHOST BUTON KONTRASTI (vision bulgusu · TÜM SİTELER).
   Ghost buton metni/çerçevesi düşük opaklıkta kalıyordu. KURAL: renk ve çerçeve
   `currentColor`dan türetilir → koyu zeminde beyaz, açık zeminde koyu; opaklık
   yerine GERÇEK renk kullanılır (AA kontrast). */
.btn-ghost,
.btn-outline-white,
.lp-btn-ghost,
a.lp-btn-ghost {
    color: inherit !important;
    border-color: currentColor !important;
    border-width: 1.5px;
    background-color: transparent !important;
    opacity: 1 !important;
}
.btn-ghost:hover,
.btn-outline-white:hover,
.lp-btn-ghost:hover,
a.lp-btn-ghost:hover {
    color: inherit !important;
    border-color: currentColor !important;
    background-color: color-mix(in srgb, currentColor 12%, transparent) !important;
}

/* ═══ PA64+14 — DEKOR MOTİF GÜRÜLTÜSÜ (vision: "daireler hiyerarşiyi boğuyor").
   Tüm sitelerde motif/daire katmanı geri plana çekilir. */
main#main-content .mx-art-motif {
    opacity: .2;
    mix-blend-mode: soft-light;
}
/* ═══ PA64+14b — KOYU GÖRSEL ZEMİNLİ HERO'DA BUTON KONTRASTI (vision, TÜM
   SİTELER): "secondary CTA dark text on dark hero — effectively invisible".
   Ghost/outline buton, hero içinde `--color-on-dark` (yoksa `white`) kullanır;
   böylece zemin açık/koyu ne olursa olsun buton okunur. */
.module-hero .btn-ghost,
.module-hero .btn-outline-white,
.module-hero .lp-btn-ghost,
.module-hero a.lp-btn-ghost,
.module-hero .module-hero .btn-ghost:hover,
.module-hero .btn-outline-white:hover,
.module-hero .lp-btn-ghost:hover {
    color: var(--color-on-dark, white) !important;
    border-color: currentColor !important;
    background-color: transparent !important;
}
.module-hero .btn-ghost:hover,
.module-hero .btn-outline-white:hover,
.module-hero .lp-btn-ghost:hover,
.module-hero a.lp-btn-ghost:hover {
    background-color: color-mix(in srgb, currentColor 14%, transparent) !important;
}

/* ═══ PA64+15 — BOŞ MEDYA PANELİ YOK (vision: "large olive panel reads as
   empty placeholder"). Görsel/mock YOKSA medya kolonu hiç basılmaz; bölüm
   tek kolon olur. `split_content` zaten `--solo` kullanıyor; media_features
   aynı davranışa getirildi. */
main#main-content .mx-split__grid--single {
    grid-template-columns: 1fr !important;
}
main#main-content .mx-split__grid--single .mx-mf__list {
    max-width: 820px;
}

   ghost buton metni kayboluyor). Sınıf bağımsız: hero koyu zeminli olduğu için
   içindeki BAĞLANTI/BUTON metni `--color-on-dark` (yoksa white) kullanır. */
.module-hero a:not(.mx-cta-primary),
.module-hero button:not(.mx-cta-primary) {
    color: var(--color-on-dark, white) !important;
}
.module-hero a.btn-primary,
.module-hero a.mx-btn-primary {
    color: var(--color-on-primary, var(--color-primary)) !important;
}

/* ═══ PA64+14c — MOBİL SABİT GENİŞLİK KIRPMA (vision: "headline/body clipped").
   Üretimde `w-[520px]`, `min-w-[420px]` gibi SABİT genişlikler mobilde taşıyor.
   Kural: mobilde sabit genişlik sınıfları viewport'la sınırlanır. */
@media (max-width: 767px) {
    main#main-content .module-hero [class*="w-["],
    main#main-content .module-hero [style*="width:"],
    main#main-content .module-split_content [class*="w-["],
    main#main-content .module-media_features [class*="w-["] {
        max-width: 100% !important;
    }
    main#main-content {
        overflow-x: clip;
    }
    main#main-content .module-hero .mx-hero-side,
    main#main-content .module-hero .mx-hero-media {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ═══ PA64+14c — HEADER ZEMİN + MENÜ KONTRAST: DENENDİ, GERİ ALINDI.
   `background: var(--chrome-bg) !important` + `:not(.is-scrolled)` kuralları
   scroll davranışıyla çakıştı (vision "light bar" derken gerçek neden JS scroll
   durumu). Doğru çözüm üretim tarafında: `ChromeDesign` menü rengini header
   zemininin kontrastından türetmeli. CSS yaması bırakılmaz. */

   headline"). `overflow-x:hidden` taşmayı GİZLEMEZ, KESER; kaynak flex/grid
   çocuklarının `min-width:auto` varsayılanı + uzun kelimeler. Burada kaynak
   düzeyinde çözülür: çocuklar daralabilir, başlık kelime kırar. */
@media (max-width: 767px) {
    main#main-content .module-hero *,
    main#main-content .module-split_content *,
    main#main-content .module-media_features * {
        min-width: 0;
    }
    main#main-content .module-hero h1,
    main#main-content .module-hero h2,
    main#main-content .module-split_content h2 {
        overflow-wrap: anywhere;
        word-break: break-word;
        hyphens: auto;
        max-width: 100%;
    }
    main#main-content .module-hero img,
    main#main-content .module-media_features img {
        max-width: 100%;
        height: auto;
    }
}