/* ==========================================================================
   _typography.css — Type Scale + Text Utilities
   Requires: _variables.css

   SCALE (px): 60 → 50 → 44 → 32 → 28 → 22 → 18 → 16 → 14 → 12
   Prefix: --df- ile isimlendirme oluşturulur.
   ========================================================================== */

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--neutral-1A1818);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-bottom: 0;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: var(--red-141414);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--neutral-141414);
}

.bg-none{
    background:none !important;
}

/* --------------------------------------------------------------------------
   TYPE SCALE — Sabit px değerleri
   Fluid: küçük ekranda bir adım aşağı iner, büyük ekranda tam değer
   -------------------------------------------------------------------------- */

h1,
.fs-60 {
  font-size: var(--df-text-fs-60); /* 60px → mobilde 38px */
}

h2,
.fs-50 {
  font-size: var(--df-text-fs-50); /* 50px → mobilde 32px */
}

h3,
.fs-44 {
  font-size: var(--df-text-fs-44); /* 44px → mobilde 28px */
}

h4,
.fs-32 {
  font-size: var(--df-text-fs-32); /* 32px → mobilde 22px */
}

h5,
.fs-28 {
  font-size: var(--df-text-fs-28); /* 28px → mobilde 20px */
}

h6,
.fs-22 {
  font-size: var(--df-text-fs-22); /* 22px → mobilde 18px */
}

.fs-18 {
  font-size: var(--df-text-fs-18); /* 18px — sabit */
}

.fs-16 {
  font-size: var(--df-text-fs-16); /* 16px — sabit */
}

.fs-14 {
  font-size: var(--df-text-fs-14); /* 14px — sabit */
}

.fs-12 {
  font-size: var(--df-text-fs-12); /* 12px — sabit */
}

/* --------------------------------------------------------------------------
   FONT FAMILY
   -------------------------------------------------------------------------- */

.df-font-display {
  font-family: var(--font-display) !important;
}

.df-font-body {
  font-family: var(--font-body) !important;
}

/* --------------------------------------------------------------------------
   FONT WEIGHT
   -------------------------------------------------------------------------- */

.df-fw-light {
  font-weight: var(--fw-light) !important;
}

.df-fw-regular {
  font-weight: var(--fw-regular) !important;
}

.df-fw-medium {
  font-weight: var(--fw-medium) !important;
}

.df-fw-semibold {
  font-weight: var(--fw-semibold) !important;
}

.df-fw-bold {
  font-weight: var(--fw-bold) !important;
}

.df-fw-black {
  font-weight: var(--fw-black) !important;
}

/* --------------------------------------------------------------------------
   LINE HEIGHT
   -------------------------------------------------------------------------- */

.df-lh-tight {
  line-height: var(--lh-tight) !important;
}

.df-lh-snug {
  line-height: var(--lh-snug) !important;
}

.df-lh-normal {
  line-height: var(--lh-normal) !important;
}

.df-lh-relaxed {
  line-height: var(--lh-relaxed) !important;
}

/* --------------------------------------------------------------------------
   LETTER SPACING
   -------------------------------------------------------------------------- */

.df-ls-tight {
  letter-spacing: var(--ls-tight) !important;
}

.df-ls-normal {
  letter-spacing: 0 !important;
}

.df-ls-wide {
  letter-spacing: var(--ls-wide) !important;
}

.df-ls-wider {
  letter-spacing: var(--ls-wider) !important;
}

.df-ls-widest {
  letter-spacing: var(--ls-widest) !important;
}

/* --------------------------------------------------------------------------
   TEXT COLOR — Red Scale
   -------------------------------------------------------------------------- */

.df-text-red-5F070B {
  color: var(--red-5F070B) !important;
}

.df-text-red-980B12 {
  color: var(--red-980B12) !important;
}

.df-text-red-BF0D16 {
  color: var(--red-BF0D16) !important;
}

.df-text-red-D11019 {
  color: var(--red-D11019) !important;
}

.df-text-red-F53D46 {
  color: var(--red-F53D46) !important;
}

.df-text-red-F8777E {
  color: var(--red-F8777E) !important;
}

.df-text-red-FA9EA3 {
  color: var(--red-FA9EA3) !important;
}

.df-text-red-FCC5C8 {
  color: var(--red-FCC5C8) !important;
}

.df-text-red-FEECED {
  color: var(--red-FEECED) !important;
}

/* --------------------------------------------------------------------------
   TEXT COLOR — Neutral Scale
   -------------------------------------------------------------------------- */

.df-text-neutral-1A1818 {
  color: var(--neutral-1A1818) !important;
}

.df-text-neutral-292929 {
  color: var(--neutral-292929) !important;
}

.df-text-neutral-3D3D3D {
  color: var(--neutral-3D3D3D) !important;
}

.df-text-neutral-4E4E4E {
  color: var(--neutral-4E4E4E) !important;
}

.df-text-neutral-141414 {
  color: var(--neutral-141414) !important;
}

.df-text-neutral-666666 {
  color: var(--neutral-666666) !important;
}

.df-text-neutral-858585 {
  color: var(--neutral-858585) !important;
}

.df-text-neutral-A3A3A3 {
  color: var(--neutral-A3A3A3) !important;
}

.df-text-neutral-E0E0E0 {
  color: var(--neutral-E0E0E0) !important;
}

.df-text-neutral-F5F5F5 {
  color: var(--neutral-F5F5F5) !important;
}

.df-text-neutral-FFFFFF {
  color: var(--neutral-FFFFFF) !important;
}

/* --------------------------------------------------------------------------
   SPECIAL PATTERNS
   -------------------------------------------------------------------------- */

.df-overline {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--red-D11019);
}

.df-lead {
  font-size: clamp(1.05rem, 1.25vw + 0.5rem, 1.125rem);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--neutral-4E4E4E);
}

.df-caption {
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  color: var(--neutral-858585);
  letter-spacing: var(--ls-wide);
}

.p-120 {
    padding: clamp(60px, 6vw, 120px);
}
.py-120 {
    padding: clamp(60px, 6vw, 120px) 0;
}
.px-120 {
    padding: 0 clamp(60px, 6vw, 120px);
}
.pt-120 {
    padding-top: clamp(60px, 6vw, 120px);
}
.pb-120 {
    padding-bottom: clamp(60px, 6vw, 120px);
}
.pe-120 {
    padding-right: clamp(60px, 6vw, 120px);
}
.ps-120 {
    padding-left: clamp(60px, 6vw, 120px);
}

.m-120 {
    margin: clamp(60px, 6vw, 120px);
}

.my-120 {
    margin: clamp(60px, 6vw, 120px) 0;
}

.mx-120 {
    margin: 0 clamp(60px, 6vw, 120px);
}

.mt-120 {
    margin-top: clamp(60px, 6vw, 120px);
}

.mb-120 {
    margin-bottom: clamp(60px, 6vw, 120px);
}

.me-120 {
    margin-right: clamp(60px, 6vw, 120px);
}

.ms-120 {
    margin-left: clamp(60px, 6vw, 120px);
}