/* =========================================================================
   BrainFit — Tipografi
   =========================================================================
   Tek bir ölçek, tek bir rol → etiket eşlemesi.

   Çözülen sorun: şablonda 38 farklı font-size, 37 farklı line-height ve
   mobilde h2..h5'e basılan 12 adet `!important` vardı. Bu `!important`'lar
   sonradan yazılan sayfa CSS'lerini eziyordu; örneğin program kartı başlığı
   masaüstünde 17px iken 1024px altında 45px'e çıkıyordu. O kurallar
   styles.css'ten kaldırıldı, yerine buradaki akışkan (fluid) ölçek geldi.

   Rol → etiket:
     Hero başlığı      → h1.bf-display   (36 → 60px)
     Sayfa başlığı     → h1              (30 → 44px)
     Bölüm başlığı     → h2              (24 → 34px)
     Alt başlık        → h3              (19 → 22px)
     Kart başlığı      → h4              (18px)
     Etiket / eyebrow  → .bf-eyebrow     (13px, harf aralıklı)
   ========================================================================= */

/* -------------------------------------------------------------------------
   Taban
   ---------------------------------------------------------------------- */
body,
button,
input,
select,
textarea {
    font-family: var(--bf-font-body);
    font-size: var(--bf-fs-base);
    font-weight: var(--bf-fw-regular);
    line-height: var(--bf-lh-body);
    letter-spacing: var(--bf-ls-body);
    color: var(--bf-ink-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

p {
    font-size: var(--bf-fs-base);
    line-height: var(--bf-lh-body);
    color: var(--bf-ink-2);
}

/* -------------------------------------------------------------------------
   Başlıklar — tek ölçek
   ---------------------------------------------------------------------- */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: var(--bf-font-heading);
    color: var(--bf-ink);
    font-weight: var(--bf-fw-bold);
    line-height: var(--bf-lh-heading);
    letter-spacing: var(--bf-ls-heading);
    text-wrap: balance;
}

h1, .h1 {
    font-size: var(--bf-fs-h1);
    line-height: var(--bf-lh-tight);
    letter-spacing: var(--bf-ls-display);
}

h2, .h2 {
    font-size: var(--bf-fs-h2);
}

h3, .h3 {
    font-size: var(--bf-fs-h3);
    font-weight: var(--bf-fw-semibold);
}

h4, .h4 {
    font-size: var(--bf-fs-h4);
    font-weight: var(--bf-fw-semibold);
}

h5, .h5 {
    font-size: var(--bf-fs-base);
    font-weight: var(--bf-fw-semibold);
    line-height: var(--bf-lh-snug);
}

h6, .h6 {
    font-size: var(--bf-fs-sm);
    font-weight: var(--bf-fw-semibold);
    line-height: var(--bf-lh-snug);
}

/* Hero / kapak başlığı — sayfada en fazla bir kez */
.bf-display {
    font-size: var(--bf-fs-display);
    line-height: var(--bf-lh-tight);
    letter-spacing: var(--bf-ls-display);
    font-weight: var(--bf-fw-bold);
}

/* -------------------------------------------------------------------------
   Rol sınıfları — şablonda global tanımı olmayan sınıflar
   (Daha önce view'larda `class="description text-1 lh-30"` gibi yığınlar
   yazmak gerekiyordu; artık tek sınıf yeterli.)
   ---------------------------------------------------------------------- */
.description,
.bf-lead {
    font-size: var(--bf-fs-lg);
    line-height: var(--bf-lh-body);
    color: var(--bf-ink-2);
}

.bf-lead {
    max-width: 62ch;
}

.bf-text-sm,
.bf-meta {
    font-size: var(--bf-fs-sm);
    line-height: var(--bf-lh-snug);
    color: var(--bf-ink-3);
}

/* Başlık üstü etiket — dört farklı eski sınıfın tek karşılığı */
.bf-eyebrow,
.heading-section .sub,
.text-2.sub,
.hero-badge,
.bf-about-hero .hero-badge,
.badge,
.bf-listing-hero .badge,
.bf-article-hero .tag {
    display: inline-block;
    font-family: var(--bf-font-heading);
    font-size: var(--bf-fs-xs);
    font-weight: var(--bf-fw-semibold);
    line-height: 1.4;
    letter-spacing: var(--bf-ls-eyebrow);
    text-transform: uppercase;
    color: var(--bf-accent);
    margin-bottom: var(--bf-space-3);
}

/* Zeminli etiket varyantı */
.hero-badge,
.bf-about-hero .hero-badge,
.badge,
.bf-listing-hero .badge,
.bf-article-hero .tag {
    padding: 0.375rem 0.75rem;
    border-radius: var(--bf-radius-pill);
    background: var(--bf-accent-soft);
    border: 1px solid var(--bf-accent-line);
    text-transform: none;
    letter-spacing: 0.01em;
    /* Yumuşak zemin üzerinde 4.5:1 için koyu ton */
    color: var(--bf-accent-strong);
}

/* -------------------------------------------------------------------------
   Şablon yardımcı sınıflarını ölçeğe bağla (geriye dönük uyumluluk)
   ---------------------------------------------------------------------- */
.text-1 { font-size: var(--bf-fs-lg); line-height: var(--bf-lh-body); }
.text-2 { font-size: var(--bf-fs-sm); line-height: var(--bf-lh-snug); }
.text-3 { font-size: var(--bf-fs-base); line-height: var(--bf-lh-body); }
.text-4 { font-size: var(--bf-fs-h3); line-height: var(--bf-lh-heading); }
.text-5 { font-size: var(--bf-fs-base); line-height: var(--bf-lh-body); }

/* Sabit satır yüksekliği sınıfları artık ölçekten besleniyor */
.lh-30 { line-height: var(--bf-lh-body); }

.fw-4 { font-weight: var(--bf-fw-regular); }
.fw-5 { font-weight: var(--bf-fw-medium); }
.fw-6 { font-weight: var(--bf-fw-semibold); }
.fw-7 { font-weight: var(--bf-fw-bold); }

/* -------------------------------------------------------------------------
   Bölüm başlığı blokları — aynı rol her sayfada aynı görünür
   ---------------------------------------------------------------------- */
.heading-section h2,
.heading-section h3,
.section-head h2,
.section-head h3,
.programs-head h2,
.cmap-top h2 {
    font-size: var(--bf-fs-h2);
    line-height: var(--bf-lh-heading);
    letter-spacing: var(--bf-ls-heading);
    font-weight: var(--bf-fw-bold);
    color: var(--bf-ink);
    margin-bottom: var(--bf-space-3);
}

.heading-section .description,
.section-head .description,
.section-head p,
.programs-head p,
.cmap-top p {
    font-size: var(--bf-fs-lg);
    line-height: var(--bf-lh-body);
    color: var(--bf-ink-2);
    max-width: 62ch;
}

.heading-section.text-center .description,
.section-head.text-center p {
    margin-inline: auto;
}

/* Kart başlıkları — sayfa CSS'lerinde boyutu eksik kalan kurallar için */
.bf-card__title,
.step-card h3,
.pillar-card h3,
.approach-card h4,
.program-card h3,
.scientist-card h3,
.neuro-card h4,
.award-tile h4,
.mv-card h3,
.team-item .name,
.icons-box .title,
.process-item .title {
    font-size: var(--bf-fs-h4);
    line-height: var(--bf-lh-snug);
    letter-spacing: var(--bf-ls-heading);
    font-weight: var(--bf-fw-semibold);
    color: var(--bf-ink);
}

/* Kart gövde metni */
.bf-card__excerpt,
.step-card p,
.pillar-card p,
.approach-card p,
.program-card p,
.neuro-card p,
.mv-card p,
.icons-box p,
.process-item p {
    font-size: var(--bf-fs-sm);
    line-height: var(--bf-lh-body);
    color: var(--bf-ink-2);
}

/* -------------------------------------------------------------------------
   Bağlantılar
   ---------------------------------------------------------------------- */
a {
    color: var(--bf-accent);
    text-decoration: none;
    transition: color var(--bf-transition);
}

a:hover {
    color: var(--bf-accent-strong);
}

/* Metin içi bağlantılar altı çizili — erişilebilirlik */
.bf-article-prose a,
.content-list a,
p a:not(.tf-btn):not(.tf-btn-link) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
}

/* -------------------------------------------------------------------------
   Makale içeriği (CMS'ten gelen HTML)
   ---------------------------------------------------------------------- */
.bf-article-prose {
    font-size: var(--bf-fs-lg);
    line-height: var(--bf-lh-body);
    color: var(--bf-ink-2);
}

.bf-article-prose h2 {
    font-size: var(--bf-fs-h2);
    margin-top: var(--bf-space-10);
    margin-bottom: var(--bf-space-4);
}

.bf-article-prose h3 {
    font-size: var(--bf-fs-h3);
    margin-top: var(--bf-space-8);
    margin-bottom: var(--bf-space-3);
}

.bf-article-prose p {
    font-size: inherit;
    margin-bottom: var(--bf-space-5);
}

.bf-article-prose ul,
.bf-article-prose ol {
    margin: 0 0 var(--bf-space-5) var(--bf-space-5);
}

.bf-article-prose li {
    margin-bottom: var(--bf-space-2);
}

.bf-article-prose strong {
    color: var(--bf-ink);
    font-weight: var(--bf-fw-semibold);
}

/* -------------------------------------------------------------------------
   Bölüm dikey ritmi — iki rakip sistem (şablon 100px / sayfa CSS 56px)
   tek değere indiriliyor
   ---------------------------------------------------------------------- */
.tf-spacing-1,
.tf-spacing-2,
.tf-spacing-3,
.tf-spacing-4,
.tf-spacing-5 {
    padding-top: var(--bf-section-y);
    padding-bottom: var(--bf-section-y);
}

.main-content,
.main-content-2 {
    padding-top: var(--bf-section-y);
    padding-bottom: var(--bf-section-y);
}

/* İç içe kapsayıcılar dikey boşluğu ÇOĞALTMASIN.
   /surec sayfasında .main-content-2 üç kat iç içeydi: 3 × (80 + 80) = 480px
   ölü alan oluşuyordu. Yalnızca en dıştaki kapsayıcı ritmi belirler. */
.main-content .main-content,
.main-content .main-content-2,
.main-content-2 .main-content,
.main-content-2 .main-content-2,
.section-service-details .main-content-2,
.content-inner .main-content-2,
.content-inner .main-content,
.main-content .tf-spacing-1:first-child,
.main-content-2 .tf-spacing-1:first-child {
    padding-top: 0;
    padding-bottom: 0;
}

/* Bölüm içi kapsayıcı sarmalayıcıları (şablon kalıntısı) */
.wrap-box-about {
    padding-block: 0;
}

/* Sayfa CSS'lerindeki bölümler .main-content içinde olduğu için kendi dikey
   padding'lerini kapsayıcıdan devralır; çift boşluk oluşmaz. */
.bf-about-page .main-content,
.bf-how-page .main-content,
.bf-science-page .main-content,
.bf-listing-page .main-content,
.bf-article-page .main-content {
    padding-top: 0;
    padding-bottom: 0;
}

.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }