/* ═══════════════════════════════════════════════════════════════════════
   Talk-to-Expert — Step 1 support (tier picker).
   talk-to-an-expert-step1.png design + Screen 3 (/get-started/why) tokens.

   Layout (Orhan HARD 2026-09-08):
     • Bordered rounded card per tier (design step1.png bordered white cards)
     • 1-per-row every breakpoint (desktop de tek sütun)
     • Grid: icon 44 | body flex-col | chevron auto
     • Body: title → desc (full width) → price badge (left-aligned own line) → meta
     • Chevron `>` Screen 3 verbatim — right, vertically centered

   Palette (Screen 3 parity):
     ink #0F172A · ink-2 #475569 · line #E2E8F0
     primary #2563EB · primary-2 #1D4ED8
     primary-soft #EFF6FF · primary-tint #DBEAFE
     bg-elev #FFFFFF · bg-soft-blue #F8FBFF
   ═══════════════════════════════════════════════════════════════════════ */

.mz-tte-support-card {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* H1 + lead — Screen 3 verbatim provided by tte-base.css .mz-tte-h1 / .mz-tte-lead. */

.mz-tte-support-form { margin: 0; }

/* ── 4 tier tile grid — 1-per-row, Screen 3 gap ────────────────────────── */
.mz-tte-support-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

/* ── Individual tile — çerçevesiz, dashed alt separator (Screen 3 opt) ─── */
.mz-tte-tier-card {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr auto;  /* icon | body | chevron */
    align-items: start;
    column-gap: 12px;
    row-gap: 0;
    padding: 0 0 8px 0;
    background: #FFFFFF;
    border: none;
    border-bottom: 1px dashed #E2E8F0;
    text-align: start;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: background-color 150ms ease, transform 90ms ease;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
}
.mz-tte-tier-card:hover {
    background: #FAFCFF;
}
.mz-tte-tier-card:active {
    transform: translateY(1px);
}
.mz-tte-tier-card:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.35);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Son satır dashed border yok */
.mz-tte-tier-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Hover icon accent — Screen 3 parity */
.mz-tte-tier-card:hover .mz-tte-tier-icon:not(.mz-tte-tier-icon--wa) {
    background: #DBEAFE;
    color: #1D4ED8;
}
.mz-tte-tier-card:hover .mz-tte-tier-chevron {
    color: #1D4ED8;
    transform: translateX(2px);
}

/* ── Icon square — Screen 3 opt-icon verbatim ─────────────────────────── */
.mz-tte-tier-icon {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #EFF6FF;
    color: #2563EB;
    flex-shrink: 0;
    transition: background-color 150ms ease, color 150ms ease;
}
.mz-tte-tier-icon svg {
    display: block;
    width: 22px;
    height: 22px;
}
/* WhatsApp variant — green tint (FREE badge palette parity) */
.mz-tte-tier-icon--wa {
    background: rgba(37, 211, 102, 0.12);
    color: #128C7E;
}

/* Photo variant (Orhan portrait head) — MTF + MTU tiers (Orhan 2026-09-09).
   Box stays 44×44 (mobile) / 40×40 (small mobile); image fits via object-fit cover
   and inherits container border-radius. Blue tint background hidden by image.
   Note: overflow: visible so US flag overlay (MTU) can extend beyond box. */
.mz-tte-tier-icon--photo {
    background: transparent;
    padding: 0;
    overflow: visible;
    position: relative;
}
.mz-tte-tier-icon--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

/* US flag overlay (MTU tier) — top-right corner (moved from bottom-right —
   Orhan 2026-09-09: bottom overlapped Orhan's collar, hard to distinguish).
   Small, does not cover face. Can extend slightly beyond parent box. */
.mz-tte-tier-icon-flag {
    position: absolute;
    right: -4px;
    top: -4px;
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
/* Mobile — shrink flag ~16% so it doesn't overlap Orhan's hair (Orhan 2026-09-09). */
@media (max-width: 640px) {
    .mz-tte-tier-icon-flag { font-size: 17px; }
}
@media (max-width: 400px) {
    .mz-tte-tier-icon-flag { font-size: 15px; right: -3px; top: -3px; }
}

/* ── Body wrapper (title + desc + price stacked) — Orhan 2026-09-11: gap
   4→2 (title→desc 2px), meta line removed. ──────────────────────────── */
.mz-tte-tier-body {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-top: 2px;
}

.mz-tte-tier-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: #0B1220;
}
@media (min-width: 640px) {
    .mz-tte-tier-title { font-size: 15.5px; }
}

.mz-tte-tier-desc {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: #475569;  /* ink-2 — soluk YASAK */
}
@media (min-width: 640px) {
    .mz-tte-tier-desc { font-size: 13.5px; }
}

/* Price badge — sola dayalı ayrı satır (design step1.png). Orhan 2026-09-11:
   dikey padding 0 (badge yüksekliği metnin doğal yüksekliği kadar), margin-top
   2px ile body gap 2 birleşince desc→price 4px effective (2 satır arası). */
.mz-tte-tier-price {
    display: inline-block;
    align-self: flex-start;
    margin-top: 2px;
    padding: 0 6px;
    border-radius: 6px;
    background: rgba(37, 99, 235, 0.10);
    color: #2563EB;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: background-color 150ms ease, color 150ms ease;
}
.mz-tte-tier-price--free {
    background: rgba(5, 150, 105, 0.12);
    color: #047857;
}

/* Optional meta line (mtf: PRIVATE 1:1 · 60 MINUTES) */
.mz-tte-tier-meta {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #475569;
}

/* ── Chevron — Screen 3 opt-chevron verbatim (right, vertically center) ── */
.mz-tte-tier-chevron {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #2563EB;
    flex-shrink: 0;
    transition: color 150ms ease, transform 150ms ease;
}
.mz-tte-tier-chevron svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* Mobile — reduce card padding + enlarge tier icons +16px (Orhan 2026-09-09). */
@media (max-width: 640px) {
    .mz-tte-support-card {
        padding: 16px;
    }
    .mz-tte-tier-card {
        grid-template-columns: 60px 1fr auto;
    }
    .mz-tte-tier-icon { width: 60px; height: 60px; }
    .mz-tte-tier-icon svg { width: 32px; height: 32px; }
}

/* Mobile compact — iPhone SE 375px effective (Screen 3 mirror) */
@media (max-width: 400px) {
    .mz-tte-tier-card {
        grid-template-columns: 56px 1fr auto;
        column-gap: 10px;
        padding: 0 0 8px 0;
    }
    .mz-tte-tier-icon { width: 56px; height: 56px; border-radius: 9px; }
    .mz-tte-tier-icon svg { width: 30px; height: 30px; }
    .mz-tte-tier-title { font-size: 14.5px; }
    .mz-tte-tier-desc { font-size: 12.5px; }
    .mz-tte-tier-price { font-size: 12px; padding: 0 6px; }
    .mz-tte-tier-meta { font-size: 11px; }
    .mz-tte-tier-chevron { width: 28px; height: 28px; }
    .mz-tte-tier-chevron svg { width: 18px; height: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Strategy card — Doc 515 §7.1 addition (Orhan 2026-09-11).
   Design ref: __designs/talk-to-expert/You-Need-Strategy.png (mobile canonical).
   Renders below .mz-tte-support-card, above FAQ. Uses .mz-tte-card base for
   padding/border-radius/typography inherit; only overrides bg + own children.
   ═══════════════════════════════════════════════════════════════════════════ */
.mz-tte-strategy-card {
    background: #EEFBF5;  /* Photoshop mint base — Orhan brief */
    padding: 16px;         /* Orhan 2026-09-11: strategy card interior 16px (base .mz-tte-card fazlaydı). */
    margin-block-start: 16px;
}

.mz-tte-strategy-kicker {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #549292;   /* Orhan 2026-09-11 (teal, mint bg ile harmonik). */
    margin-block-end: 8px;
}

.mz-tte-strategy-title {
    margin: 0 0 12px;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #0B1220;
}
@media (min-width: 640px) {
    .mz-tte-strategy-title { font-size: 28px; }
}

.mz-tte-strategy-lead {
    margin: 0 0 20px;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.5;
    color: #475569;
}
@media (min-width: 640px) {
    .mz-tte-strategy-lead { font-size: 15.5px; }
}

/* ── Numbered step ladder ─────────────────────────────────────────────── */
.mz-tte-strategy-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Step layout — Design canonical (Orhan 2026-09-11):
   Num + Icon SOL-UST köşede FIX (absolute), body sağda natural flow.
   Padding sol tarafta icon genişliği + margin bırakır. */
.mz-tte-strategy-step {
    position: relative;
    padding: 16px;
    padding-inline-start: 88px;  /* 16 (pad) + 56 (icon) + 16 (gap) */
    border-radius: 14px;
    display: block;
}
/* Num badge — Orhan DevTools pattern (2026-09-11): padding-offset cancel via
   negative margin (physical properties for cross-cascade determinism). */
.mz-tte-strategy-step-num {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-start: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: -16px;
    margin-top: -16px;
}
/* Icon-box — sadece margin-top: -16 (vertical center offset), horizontal
   16px inset korunur. Orhan DevTools pattern (2026-09-11). */
.mz-tte-strategy-step-icon {
    position: absolute;
    inset-block-start: 54px;
    inset-inline-start: 16px;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    margin-top: -16px;
}
.mz-tte-strategy-step-icon svg {
    display: block;
    width: 30px;
    height: 30px;
}
.mz-tte-strategy-step-title {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #0B1220;
}
.mz-tte-strategy-step-lead {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: #0B1220;
}
.mz-tte-strategy-step-detail {
    margin: 0;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    color: #475569;
}

/* Desktop ≥640px: icon step yüksekliğinin dikey ortasına — Orhan 2026-09-11.
   Mobile'da body 3+ satır → icon top: 38 doğal ortalı. Desktop body kısa
   sığar → icon alta düşer. Dikey ortalı: top: 50% + margin negative half. */
@media (min-width: 640px) {
    .mz-tte-strategy-step-icon {
        inset-block-start: 50%;
        margin-top: -28px;   /* icon 56 / 2 */
    }
}

/* Variants — bg + accent per Orhan brief (Photoshop hex verbatim). */
/* Num badge + icon-circle bg + icon stroke + step title — Orhan verdi
   (Photoshop sample 2026-09-11). */
.mz-tte-strategy-step--start                       { background: #E9F2FE; }
.mz-tte-strategy-step--start .mz-tte-strategy-step-num   { background: #4990FE; }
.mz-tte-strategy-step--start .mz-tte-strategy-step-icon  { background: #DDEAFD; color: #4990FE; }
.mz-tte-strategy-step--start .mz-tte-strategy-step-title { color: #1259FE; }

.mz-tte-strategy-step--grow                        { background: #E5F8EF; }
.mz-tte-strategy-step--grow .mz-tte-strategy-step-num    { background: #07A970; }
.mz-tte-strategy-step--grow .mz-tte-strategy-step-icon   { background: #D6F4E4; color: #07A970; }
.mz-tte-strategy-step--grow .mz-tte-strategy-step-title  { color: #0A9C6F; }

.mz-tte-strategy-step--move                        { background: #FCF7E4; }
.mz-tte-strategy-step--move .mz-tte-strategy-step-num    { background: #F9C63A; }
.mz-tte-strategy-step--move .mz-tte-strategy-step-icon   { background: #FDF0CE; color: #F9C63A; }
.mz-tte-strategy-step--move .mz-tte-strategy-step-title  { color: #AA7C04; }

/* ── Trust strip — Design canonical: MOBILE 3-COL (icon stacked above text
   per column). Small icons + short labels sit horizontally on any width. ─── */
.mz-tte-strategy-trust {
    list-style: none;
    margin: 20px 0 0;
    padding: 16px 0 0;
    border-block-start: 1px dashed #A7E7CE;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (min-width: 640px) {
    .mz-tte-strategy-trust { gap: 20px; }
}
/* Trust item — icon SOL (span 2 rows), title row 1 sağ, desc row 2 sağ. */
.mz-tte-strategy-trust-item {
    display: grid;
    grid-template-columns: 22px 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 2px;
    align-items: start;
}
.mz-tte-strategy-trust-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    margin-block-start: 1px;
}
.mz-tte-strategy-trust-icon svg {
    display: block;
    width: 22px;
    height: 22px;
}
.mz-tte-strategy-trust-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 12px;
    font-weight: 700;
    color: #0B1220;
    line-height: 1.25;
}
.mz-tte-strategy-trust-desc {
    grid-column: 2;
    grid-row: 2;
    font-size: 10.5px;
    font-weight: 500;
    color: #334155;   /* slate-700 — koyu, okunabilir. Orhan 2026-09-11. */
    opacity: 1;
    line-height: 1.4;
}
.mz-tte-strategy-trust-item--blue  .mz-tte-strategy-trust-icon { color: #2563EB; }
.mz-tte-strategy-trust-item--green .mz-tte-strategy-trust-icon { color: #059669; }

/* ── Small mobile — iPhone SE ≤400px: tighter step padding + smaller icon. */
@media (max-width: 400px) {
    .mz-tte-strategy-step {
        padding: 14px;
        padding-inline-start: 76px;  /* 14 (pad) + 48 (icon) + 14 (gap) */
    }
    .mz-tte-strategy-step-num {
        inset-block-start: 14px;
        inset-inline-start: 14px;
        width: 28px;
        height: 28px;
        font-size: 13px;
        margin-left: -14px;
        margin-top: -14px;
    }
    .mz-tte-strategy-step-icon {
        inset-block-start: 48px;   /* 14 + 28 + 6 */
        inset-inline-start: 14px;
        width: 48px;
        height: 48px;
        margin-top: -14px;
    }
    .mz-tte-strategy-step-icon svg { width: 26px; height: 26px; }
    .mz-tte-strategy-title { font-size: 21px; }
    .mz-tte-strategy-lead  { font-size: 13.5px; }
    .mz-tte-strategy-trust-desc { font-size: 10.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sound-like card — Doc 515 §7.1 addition (Orhan 2026-09-11).
   12 real-question quotes, subject-appropriate icons + tint colors.
   Kicker/title/lead uses .mz-tte-strategy-* base (DRY). Only card bg + list.
   ═══════════════════════════════════════════════════════════════════════════ */
.mz-tte-soundlike-card {
    background: #FFFFFF;
    padding: 16px;
    margin-block-start: 16px;
}

.mz-tte-soundlike-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mz-tte-soundlike-item {
    position: relative;
    padding: 14px 14px;
    padding-inline-start: 74px;  /* 14 (pad) + 48 (icon) + 12 (gap) */
    min-height: 76px;             /* icon 48 + padding 2×14 — kısa quote'ta bile icon sığar */
    box-sizing: border-box;
    border-radius: 12px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    display: flex;
    align-items: center;           /* dikey ortala quote (flex child) */
}

.mz-tte-soundlike-icon {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-start: 14px;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}
.mz-tte-soundlike-icon svg {
    display: block;
    width: 26px;
    height: 26px;
}

.mz-tte-soundlike-quote {
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    color: #0B1220;
    font-style: italic;
}

/* Variants — subject-appropriate color + tint bg */
.mz-tte-soundlike-item--formation           .mz-tte-soundlike-icon { background: #DDEAFD; color: #1259FE; }
.mz-tte-soundlike-item--ecommerce           .mz-tte-soundlike-icon { background: #D6F4E4; color: #0A9C6F; }
.mz-tte-soundlike-item--fba-urgent          .mz-tte-soundlike-icon { background: #FEE2E2; color: #DC2626; }
.mz-tte-soundlike-item--fba-urgent          .mz-tte-soundlike-icon svg { width: 22px; height: 22px; }

/* Desktop ≥640px: sound-like icon dikey ortalı (aynı fix strategy-step ile).
   Desktop'ta quote text kısa sığar → icon item yüksekliğinde alta yapışır. */
@media (min-width: 640px) {
    .mz-tte-soundlike-icon {
        inset-block-start: 50%;
        margin-top: -24px;   /* icon 48 / 2 */
    }
}

.mz-tte-soundlike-item--tax-fix             .mz-tte-soundlike-icon { background: #FEF3C7; color: #B45309; }
.mz-tte-soundlike-item--growth              .mz-tte-soundlike-icon { background: #EDE9FE; color: #7C3AED; }
.mz-tte-soundlike-item--saas-ai             .mz-tte-soundlike-icon { background: #E0E7FF; color: #4F46E5; }
.mz-tte-soundlike-item--intl-expand         .mz-tte-soundlike-icon { background: #CCFBF1; color: #0D9488; }
.mz-tte-soundlike-item--founder-cto         .mz-tte-soundlike-icon { background: #FCE7F3; color: #DB2777; }
.mz-tte-soundlike-item--family-move-start   .mz-tte-soundlike-icon { background: #E0F2FE; color: #0284C7; }
.mz-tte-soundlike-item--business-family     .mz-tte-soundlike-icon { background: #FEF3C7; color: #D97706; }
.mz-tte-soundlike-item--visa-pathway        .mz-tte-soundlike-icon { background: #F3E8FF; color: #8B5CF6; }
.mz-tte-soundlike-item--daily-life          .mz-tte-soundlike-icon { background: #DCFCE7; color: #059669; }

/* Small mobile — iPhone SE ≤400px */
@media (max-width: 400px) {
    .mz-tte-soundlike-item {
        padding: 12px 12px;
        padding-inline-start: 64px;  /* 12 + 42 + 10 */
        min-height: 66px;             /* 42 + 2×12 */
    }
    .mz-tte-soundlike-icon {
        inset-block-start: 12px;
        inset-inline-start: 12px;
        width: 42px;
        height: 42px;
    }
    .mz-tte-soundlike-icon svg { width: 22px; height: 22px; }
    .mz-tte-soundlike-quote { font-size: 12.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Support sticky bar — 4 tier shortcut (Orhan 2026-09-11 v2).
   Trigger: MOVE step "Take the next step." görünce (JS scroll listener).
   Layout: 2×2 grid, sade text link (pill/border yok). Sol col metinleri
   sol-hizalı, sağ col metinleri sağ-hizalı. Format: "Product - Price ›".
   ═══════════════════════════════════════════════════════════════════════════ */
.mz-tte-support-sticky {
    position: fixed;
    inset-block-end: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    background: #FFFFFF;
    border-block-start: 1px solid #E2E8F0;
    /* padding-inline dinamik: geniş ekranda content 720px'e (TTE canonical) hizalı kalır,
       arta kalan viewport padding'e eklenir; küçük ekranda min 12px'e düşer. */
    padding: 10px max(12px, calc((100vw - 720px) / 2));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    transform: translateY(100%);
    transition: transform 250ms ease;
    z-index: 90;
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.06);
}
.mz-tte-support-sticky--visible {
    transform: translateY(0);
}

.mz-tte-support-sticky-item {
    display: block;
    padding: 6px 4px;
    text-decoration: none;
    color: #0B1220;
    line-height: 1.25;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Sol column (item 1, 3) → sola hizalı; sağ column (item 2, 4) → sağa hizalı. */
.mz-tte-support-sticky-item:nth-child(odd)  { text-align: start; }
.mz-tte-support-sticky-item:nth-child(even) { text-align: end;   }

.mz-tte-support-sticky-item:hover .mz-tte-support-sticky-name { text-decoration: underline; }
.mz-tte-support-sticky-item:active { opacity: 0.85; }

.mz-tte-support-sticky-name {
    font-size: 12.5px;
    font-weight: 700;
    color: #0B1220;
}
.mz-tte-support-sticky-sep {
    font-size: 12.5px;
    font-weight: 500;
    color: #475569;
}
.mz-tte-support-sticky-price {
    font-size: 12.5px;
    font-weight: 500;
    color: #475569;
}
.mz-tte-support-sticky-price--free {
    color: #0a9c6f;                     /* soundlike title green — success/free tint */
}
.mz-tte-support-sticky-chev {
    color: #2563EB;
    font-size: 13.5px;
    font-weight: 700;
    margin-inline-start: 4px;
}
.mz-tte-support-sticky-chev::before {
    content: "\203A";                   /* › forward chevron (LTR) */
}
[dir="rtl"] .mz-tte-support-sticky-chev::before {
    content: "\2039";                   /* ‹ RTL-mirrored forward chevron */
}

/* Desktop ≥640px — daha rahat padding + font */
@media (min-width: 640px) {
    .mz-tte-support-sticky {
        padding: 12px max(16px, calc((100vw - 720px) / 2));
        gap: 8px 16px;
    }
    .mz-tte-support-sticky-name,
    .mz-tte-support-sticky-sep,
    .mz-tte-support-sticky-price {
        font-size: 13.5px;
    }
    .mz-tte-support-sticky-chev {
        font-size: 14.5px;
    }
}

/* Small mobile ≤400px — sıkıştır */
@media (max-width: 400px) {
    .mz-tte-support-sticky {
        padding: 8px max(10px, calc((100vw - 720px) / 2));
        gap: 4px 8px;
    }
    .mz-tte-support-sticky-item {
        padding: 5px 2px;
    }
    .mz-tte-support-sticky-name,
    .mz-tte-support-sticky-sep,
    .mz-tte-support-sticky-price {
        font-size: 11.5px;
    }
    .mz-tte-support-sticky-chev {
        font-size: 12.5px;
    }
}