/* ===== Xomage Intro — centered editorial block with CTA ===== */

.cc_mfkw8zzp_aprA3nz8rn .xomage-intro {
  padding-block: 4rem 3rem;
}

.cc_mfkw8zzp_aprA3nz8rn .xomage-intro__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science .xomage-intro__container { display: grid; gap: 2.5rem; align-items: start; text-align: left; }
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science .xomage-intro__science-head h2 { margin: 0 0 2rem; }
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro__science-eyebrow { margin: 0 0 1.5rem; color: var(--xomage-science-muted); }
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro__science-nav { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro__science-nav a { padding: 0.625rem 0.875rem; border: 1px solid var(--xomage-science-line); border-radius: 3rem; color: var(--xomage-science-ink); text-decoration: none; }
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science .xomage-intro__text p { scroll-margin-top: 8rem; }
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science .xomage-intro__cta { min-width: 0; min-height: 0; padding: 0 0 0.75rem; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--xomage-science-ink); }
@media (min-width: 1024px) { .cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science .xomage-intro__container { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 6.25rem; } }

/*
 * Sola dayalı varyant — "Web hakkımızda" gibi makale sayfaları için.
 * Ana sayfa ortalı kalır (textAlign varsayılanı Center).
 */
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--left .xomage-intro__container {
  align-items: flex-start;
  text-align: left;
}

.cc_mfkw8zzp_aprA3nz8rn .xomage-intro__eyebrow {
  margin: 0 0 0.75rem;
  color: var(--xomage-gold);
}

/* 64px display size is outside the Kombos type scale — set here per design */
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro__title {
  margin: 0 0 1.75rem;
  color: var(--xomage-teal);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1.25;
}

.cc_mfkw8zzp_aprA3nz8rn .xomage-intro__text {
  max-width: 103rem;
  color: var(--xomage-ink);
  font-size: 1.125rem;
  line-height: 1.5;
}

.cc_mfkw8zzp_aprA3nz8rn .xomage-intro__text p {
  margin: 0 0 1.5rem;
}

.cc_mfkw8zzp_aprA3nz8rn .xomage-intro__text p:last-child {
  margin-bottom: 0;
}

/* 28px subtitle is outside the Kombos type scale — set here per design */
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro__subtitle {
  margin: 2.5rem 0 1.25rem;
  color: var(--xomage-ink);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.5;
}

/*
 * Tasarım 05.09.2026'da değişti: dolgulu turkuaz buton yerine ÇERÇEVELİ buton.
 * Ölçüm (Component 2, Web ana sayfa 1:101): 330x88, y 1976-2063, 1px #63c1c2
 * kenarlık, beyaz zemin, turkuaz metin, radius YOK — üst kenarlık x 795'ten
 * 1124'e kesintisiz uzuyor, yani köşe yuvarlaması 0.
 * Renkler prop'tan geldiği için JSX'te inline style ile veriliyor; buradaki
 * değerler yalnızca prop boşsa devreye giren yedeklerdir.
 */
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 20.625rem; /* 330px */
  min-height: 5.5rem; /* 88px */
  margin-top: 2.5rem;
  padding: 0.875rem 2rem;
  border: 1px solid var(--xomage-teal);
  background: var(--kombos-white);
  color: var(--xomage-teal);
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.cc_mfkw8zzp_aprA3nz8rn .xomage-intro__cta:hover {
  background: var(--xomage-teal);
  color: var(--kombos-white);
}

@media (min-width: 640px) {
  .cc_mfkw8zzp_aprA3nz8rn .xomage-intro__title {
    font-size: 3rem;
  }

  .cc_mfkw8zzp_aprA3nz8rn .xomage-intro__text {
    font-size: 1.375rem;
  }

  .cc_mfkw8zzp_aprA3nz8rn .xomage-intro__subtitle {
    font-size: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .cc_mfkw8zzp_aprA3nz8rn .xomage-intro {
    padding-block: 9rem 4rem;
  }

  .cc_mfkw8zzp_aprA3nz8rn .xomage-intro__title {
    margin-bottom: 2.5rem;
    font-size: 4rem;
  }

  .cc_mfkw8zzp_aprA3nz8rn .xomage-intro__text {
    font-size: 1.75rem;
  }

  .cc_mfkw8zzp_aprA3nz8rn .xomage-intro__text p {
    margin-bottom: 2.5rem;
  }

  /*
   * Makale varyantı "Web hakkımızda" tasarımından ölçüldü: paragraflar arası
   * baseline farkı 66px, satır yüksekliği 42px → 24px boşluk (ana sayfada 40px).
   * Bandın altından eyebrow'a mesafe de 144px değil ~96px.
   */
  .cc_mfkw8zzp_aprA3nz8rn .xomage-intro--left {
    padding-block: 6rem 4rem;
  }

  .cc_mfkw8zzp_aprA3nz8rn .xomage-intro--left .xomage-intro__text p {
    margin-bottom: 1.5rem;
  }

  .cc_mfkw8zzp_aprA3nz8rn .xomage-intro__subtitle {
    margin: 4rem 0 1.5rem;
    font-size: 1.75rem;
  }

  .cc_mfkw8zzp_aprA3nz8rn .xomage-intro__cta {
    margin-top: 3.5rem;
  }
}

/* Reference exosome article. This option is enabled only on that placement. */
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science-dark, .cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science-dark * { box-sizing: border-box; }
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science.xomage-intro--science-dark {
  padding: 5.375rem 6.5%;
  background: var(--xomage-exosome-reading-bg);
  color: var(--xomage-exosome-reading-text);
}
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science-dark .xomage-intro__container {
  width: 100%; max-width: none; padding: 0; margin: 0; gap: 8%;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.625fr); align-items: start;
}
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science-dark .xomage-intro__science-head { position: sticky; top: 8.75rem; }
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science-dark .xomage-intro__science-head h2 { margin: 0; color: var(--xomage-exosome-reading-heading); }
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science-dark .xomage-intro__science-head em { color: var(--xomage-exosome-reading-accent); font-style: normal; }
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science-dark .xomage-intro__science-eyebrow { margin-bottom: 1.375rem; color: var(--xomage-exosome-scene-muted); }
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science-dark .xomage-intro__science-nav { display: grid; gap: 0; margin-top: 2.1875rem; border-top: 1px solid rgba(185,222,202,.17); }
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science-dark .xomage-intro__science-nav a {
  display: flex; align-items: center; gap: 1.25rem; padding: .9375rem 0;
  border: 0; border-bottom: 1px solid rgba(185,222,202,.17); border-radius: 0;
  color: var(--xomage-exosome-scene-muted); transition: color .5s, padding .5s;
}
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science-dark .xomage-intro__science-nav a span { display: none; }
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science-dark .xomage-intro__science-nav a.is-current { color: var(--xomage-exosome-reading-heading); padding-left: .625rem; }
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science-dark .xomage-intro__text { max-width: none; color: var(--xomage-exosome-reading-text); }
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science.xomage-intro--science-dark .xomage-intro__text p { margin: 0 0 1.75rem; scroll-margin-top: 9.6875rem; transition: color .6s; }
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science-dark .xomage-intro__text p.is-reading, .cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science-dark .xomage-intro__text p.is-reading strong { color: var(--xomage-exosome-reading-heading); }
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science.xomage-intro--science-dark .xomage-intro__text p:last-child { margin-bottom: 0; }
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science.xomage-intro--science-dark .xomage-intro__cta {
  min-height: 2.75rem; margin-top: 1.75rem; padding: .5rem 0; border: 0;
  border-bottom: 1px solid rgba(185,222,202,.3); border-radius: 0; color: var(--xomage-exosome-reading-heading);
}
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science.xomage-intro--science-dark .xomage-intro__cta:hover { background: transparent; color: var(--xomage-exosome-reading-accent); }
@media (max-width: 760px) {
  .cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science.xomage-intro--science-dark { padding-block: 3.375rem; }
  .cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science-dark .xomage-intro__container { grid-template-columns: minmax(0,1fr); gap: 2.25rem; }
  .cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science-dark .xomage-intro__science-head { position: static; }
  .cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science-dark .xomage-intro__science-nav { margin-top: 1.5625rem; }
  .cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science-dark .xomage-intro__science-nav a { padding-block: .8125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science-dark .xomage-intro__science-nav a, .cc_mfkw8zzp_aprA3nz8rn .xomage-intro--science-dark .xomage-intro__text p { transition: none; }
}

/* ===== "Spacious" varyantı — düz metin sayfası ritmi ===== */

/*
 * Kaynak: "Web eksozom nedir" (`11:127`, 1920x2305) ve mobil eşi `73:128`
 * (1080x2802), 08.09.2026'da REST `nodes` ucundan ölçüldü — 0 MCP çağrısı.
 *
 * Bu sayfa Hakkımızda ile aynı bileşeni kullanır ama üç ölçüsü farklıdır:
 *   paragraf arası   web 48px  (Hakkımızda 24px) — kutu üstleri 461/635/851/1067,
 *                    yükseklikler 126/168/168 → fark sabit 48
 *   bant altı        142px (Hakkımızda ~96px) → 9rem'e yuvarlandı, ana sayfayla aynı
 *   footer öncesi    160px (buton alt kenarı 1281, footer zemini 1441)
 *   CTA üstü         84px (metin sonu 1109, buton üstü 1193)
 *   CTA kutusu       330x88, dolgu #63c1c2, **16px radius** — ana sayfanın
 *                    05.09'da geçtiği çerçeveli/radius'suz buton DEĞİL.
 *                    Dolgu ve metin rengi prop'tan gelir, radius buradan.
 *
 * Mobil frame 1080 mantıksal piksel; oradaki 56px paragraf arası ve 61px üst
 * boşluk telefon CSS pikseli değil (bkz. docs/hakkimizda-sayfasi.md ölçek
 * tuzağı). Bu yüzden aşağıdaki basamaklar tasarım değerine 1024px'te ulaşır.
 *
 * Seçiciler dosyanın sonunda: `--left` ile aynı özgüllükte oldukları için
 * kaynak sırası kazanır ve hizalama `--left`'te kalırken ritim buradan gelir.
 */

.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--spacious {
  padding-block: 3rem 4rem;
}

.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--spacious .xomage-intro__text p {
  margin-bottom: 1.5rem;
}

/*
 * `.xomage-intro__text p:last-child` (0,2,1) ile bu varyantın paragraf kuralı
 * (0,2,1) EŞİT özgüllükte; kaynak sırası burayı kazandırdığı için son
 * paragrafın alt boşluğu ayrıca sıfırlanmalı. Sıfırlanmazsa CTA'nın üst
 * boşluğuna paragraf arası ekleniyordu (1600px'te 84px yerine 132px ölçüldü).
 */
.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--spacious .xomage-intro__text p:last-child {
  margin-bottom: 0;
}

.cc_mfkw8zzp_aprA3nz8rn .xomage-intro--spacious .xomage-intro__cta {
  margin-top: 2rem;
  border-radius: 16px;
}

@media (min-width: 640px) {
  .cc_mfkw8zzp_aprA3nz8rn .xomage-intro--spacious {
    padding-block: 4.5rem 6rem;
  }

  .cc_mfkw8zzp_aprA3nz8rn .xomage-intro--spacious .xomage-intro__text p {
    margin-bottom: 2rem;
  }

  .cc_mfkw8zzp_aprA3nz8rn .xomage-intro--spacious .xomage-intro__cta {
    margin-top: 3rem;
  }
}

@media (min-width: 1024px) {
  .cc_mfkw8zzp_aprA3nz8rn .xomage-intro--spacious {
    padding-block: 9rem 10rem;
  }

  .cc_mfkw8zzp_aprA3nz8rn .xomage-intro--spacious .xomage-intro__text p {
    margin-bottom: 3rem;
  }

  .cc_mfkw8zzp_aprA3nz8rn .xomage-intro--spacious .xomage-intro__cta {
    margin-top: 5.25rem;
  }
}