/* ============================================================
   tx-typography.css — Transay Typography System
   Single source of truth for all type-related tokens.
   
   Bu dosya tx-theme.css'ten SONRA, main.css'ten ÖNCE yüklenir.
   ============================================================ */

:root {
    /* === Type scale (modular, tutarlı boyut adımları) === */
    --tx-text-xs:    0.75rem;     /* 12px */
    --tx-text-sm:    0.875rem;    /* 14px */
    --tx-text-base:  1rem;        /* 16px */
    --tx-text-lg:    1.125rem;    /* 18px */
    --tx-text-xl:    1.25rem;     /* 20px */
    --tx-text-2xl:   1.5rem;      /* 24px */
    --tx-text-3xl:   1.875rem;    /* 30px */
    --tx-text-4xl:   2.25rem;     /* 36px */
    --tx-text-5xl:   3rem;        /* 48px */
    --tx-text-6xl:   3.75rem;     /* 60px */

    /* === Font weights === */
    --tx-font-regular:   400;
    --tx-font-medium:    500;
    --tx-font-semibold:  600;
    --tx-font-bold:      700;

    /* === Line heights === */
    --tx-leading-tight:    1.1;
    --tx-leading-snug:     1.3;
    --tx-leading-normal:   1.5;
    --tx-leading-relaxed:  1.7;

    /* === Letter spacings === */
    --tx-tracking-tight:   -0.02em;
    --tx-tracking-normal:  0;
    --tx-tracking-wide:    0.08em;

    /* === Font families ===
       Sans: UI ve body default
       Display: Büyük heading'ler için karakter
       Mono: Kod blokları için */
    --tx-font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
                       'Helvetica Neue', Arial, sans-serif;
    --tx-font-display: 'Raleway', 'Inter', system-ui, sans-serif;
    --tx-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
                       Monaco, Consolas, 'Liberation Mono', monospace;

    /* === Responsive heading sizes (clamp ile akıcı geçiş) ===
       Bu değerler DEFAULT — sayfa-spesifik selektörler özelleşmiş
       boyutları override eder. Mevcut layout korunur. */
    --tx-h1-size: 3rem;  /* 36 → 60px */
    --tx-h2-size: 2.25rem;   /* 30 → 40px */
    --tx-h3-size: 1.75rem; /* 24 → 30px */
    --tx-h4-size: 1.375rem;   /* 20 → 24px */
    --tx-h5-size: 1.1875rem;   /* 18 → 20px */
    --tx-h6-size: 1.0625rem;  /* 16 → 18px */

    /* === Bridge: eski main.css ve sayfa CSS'lerindeki
       --default-font, --heading-font, --nav-font değişkenleri yeni
       paletten besleniyor. Eski koda dokunmadan tema değişiyor. */
    --default-font:   var(--tx-font-sans);
    --heading-font:   var(--tx-font-display);
    --nav-font:       var(--tx-font-sans);
}

/* === Heading defaults ===
   ÖNEMLİ: Bu kurallar SADECE tek başına h1-h6 elementlere uygular.
   Sayfa-spesifik selektörler (.ab-heading, .vt-section-title vs.) 
   daha yüksek specificity'e sahip olduğu için kendi boyutlarını korur.
   Bu sayede mevcut kart boyutları değişmez. */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--tx-font-display);
    font-weight: var(--tx-font-bold);
    line-height: var(--tx-leading-snug);
    letter-spacing: var(--tx-tracking-tight);
    color: var(--heading-color);
}

h1 {
    font-size: var(--tx-h1-size);
    line-height: var(--tx-leading-tight);
}

h2 {
    font-size: var(--tx-h2-size);
    line-height: var(--tx-leading-tight);
}

h3 { font-size: var(--tx-h3-size); }
h4 { font-size: var(--tx-h4-size); font-family: var(--tx-font-sans); font-weight: var(--tx-font-semibold); }
h5 { font-size: var(--tx-h5-size); font-family: var(--tx-font-sans); font-weight: var(--tx-font-semibold); }
h6 { font-size: var(--tx-h6-size); font-family: var(--tx-font-sans); font-weight: var(--tx-font-semibold); }

/* === Body defaults === */
body {
    font-family: var(--tx-font-sans);
    font-size: var(--tx-text-base);
    font-weight: var(--tx-font-regular);
    line-height: var(--tx-leading-normal);
}

/* === Utility classes === */
.tx-eyebrow {
    font-size: var(--tx-text-xs);
    font-weight: var(--tx-font-semibold);
    letter-spacing: var(--tx-tracking-wide);
    text-transform: uppercase;
}

/* ============================================================
   TYPOGRAPHY STANDARDIZATION
   
   Tüm sayfalarda hero/section başlıklarının aynı boyut, weight,
   font-family kullanmasını zorlar. Sayfa-spesifik renkler ve 
   modifier'lar (--thin, --light, --dark, --accent) korunur,
   sadece BOYUT/WEIGHT/FAMILY standardize edilir.
   
   Kapsam dışı (container class'ları - bunların içindeki h1/h2 hedeflenir):
   .fm-section-title-left, .fo-section-heading, .mp-section-heading,
   .msg-page-title-container, .mv-page-title-container,
   .osh-section-heading, .pl-page-title-container,
   .pt-section-heading, .quality-docs-section-heading,
   .st-section-heading, .thp-section-heading, .vr-section-heading,
   .vt-section-title-light, .mod-hero-title-accent
   ============================================================ */

/* --- HERO BAŞLIKLARI (tüm sayfalarda aynı) ---
   36-60px, weight 700, Raleway display
   :not() ile thin/accent/container varyantlarını dışla */
[class*="hero-title"]:not([class*="-thin"]):not([class*="--thin"]):not([class*="-accent"]):not([class*="-container"]),
[class*="hero-heading"]:not([class*="-container"]),
[class*="page-title"]:not([class*="-container"]),
[class*="page-heading"]:not([class*="-container"]) {
    font-size: 3rem !important;  /* 36 → 60px */
    font-weight: var(--tx-font-bold) !important;
    font-family: var(--tx-font-display) !important;
    line-height: var(--tx-leading-tight) !important;
    letter-spacing: var(--tx-tracking-tight) !important;
}

/* --- SECTION BAŞLIKLARI (tüm sayfalarda aynı) ---
   24-40px, weight 700, Raleway display
   Container class'ları :not() ile dışlanıyor */
[class*="section-title"]:not([class*="-container"]),
[class*="section-heading"]:not([class*="-container"]):not(.fo-section-heading):not(.mp-section-heading):not(.osh-section-heading):not(.pt-section-heading):not(.quality-docs-section-heading):not(.st-section-heading):not(.thp-section-heading):not(.vr-section-heading),
[class*="section-h2"]:not([class*="-container"]),
.tech-section-h2 {
    font-size: 2rem !important;  /* 24 → 40px */
    font-weight: var(--tx-font-bold) !important;
    font-family: var(--tx-font-display) !important;
    line-height: var(--tx-leading-tight) !important;
    letter-spacing: var(--tx-tracking-tight) !important;
}

/* Container'lardaki child h1/h2 başlıklarını da yakala */
.thp-section-heading h2,
.thp-akd-headline,
.fo-section-heading h2,
.mp-section-heading h2,
.osh-section-heading h2,
.pt-section-heading h2,
.quality-docs-section-heading h2,
.st-section-heading h2,
.vr-section-heading h2,
/* Standart dışı section başlıkları */
.thp-customer-care-copy h2,
.thp-cta-copy h2 {
    font-size: 2rem !important;  /* 24 → 40px */
    font-weight: var(--tx-font-bold) !important;
    font-family: var(--tx-font-display) !important;
    line-height: var(--tx-leading-tight) !important;
    letter-spacing: var(--tx-tracking-tight) !important;
}

.msg-page-title-container h1,
.mv-page-title-container h1,
.pl-page-title-container h1,
/* Standart dışı hero başlıkları (hero-copy, hero__content) */
.pta-exp-hero-copy h1,
.tech-home-page .hero-copy h1,
.quality-docs-hero__content h1 {
    font-size: 3rem !important;
    font-weight: var(--tx-font-bold) !important;
    font-family: var(--tx-font-display) !important;
    line-height: var(--tx-leading-tight) !important;
    letter-spacing: var(--tx-tracking-tight) !important;
}

/* --- HERO SUBTITLE / DESCRIPTION ---
   16-18px, weight 400, Inter sans, line-height relaxed
   Renkleri korumak için color belirlenmedi. */
[class*="hero-text"]:not([class*="-container"]),
[class*="hero-desc"]:not([class*="-container"]),
[class*="hero-lead"],
[class*="hero-subtitle"],
[class*="page-subtitle"] {
    font-size: 1.0625rem !important;  /* 16 → 18px */
    font-weight: var(--tx-font-regular) !important;
    font-family: var(--tx-font-sans) !important;
    line-height: var(--tx-leading-relaxed) !important;
    letter-spacing: var(--tx-tracking-normal) !important;
}

/* --- SECTION SUBTITLE / DESCRIPTION ---
   16px, weight 400, Inter sans */
[class*="section-text"]:not([class*="-container"]),
[class*="section-desc"]:not([class*="-container"]),
[class*="section-lead"],
[class*="section-subtitle"] {
    font-size: var(--tx-text-base) !important;
    font-weight: var(--tx-font-regular) !important;
    font-family: var(--tx-font-sans) !important;
    line-height: var(--tx-leading-relaxed) !important;
}

/* === Modifier varyantlar (thin, light, dark, accent) === */

/* Thin variant: hero başlığın yanındaki ince alt yazı (örn. mod-hero-title-thin)
   Boyut yarısı, weight 300 (regular), opacity korunur */
[class*="hero-title-thin"],
[class*="hero-title--thin"] {
    font-size: 1.625rem !important;  /* 20 → 32px */
    font-weight: var(--tx-font-regular) !important;
    line-height: var(--tx-leading-snug) !important;
    letter-spacing: var(--tx-tracking-normal) !important;
}

/* Accent variant: hero başlığın renkli vurgu kısmı (örn. mod-hero-title-accent)
   Boyut ana başlıkla aynı, sadece renk değişir - sayfa CSS'leri color kuralını korur */
/* (boyut/weight/family kuralları ana hero-title'dan miras alınıyor zaten) */