.cc_zRr7AL87AP_rich_text .rich-text {
  width: 100%;
  background: var(--rich-text-bg, var(--color-bg));
  padding: var(--space-2xl) 0;
}

.cc_zRr7AL87AP_rich_text .rich-text-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 80px);
}

.cc_zRr7AL87AP_rich_text .rich-text[data-alignment="left"] .rich-text-container {
  text-align: left;
}
.cc_zRr7AL87AP_rich_text .rich-text[data-alignment="center"] .rich-text-container {
  text-align: center;
}
.cc_zRr7AL87AP_rich_text .rich-text[data-alignment="right"] .rich-text-container {
  text-align: right;
}

.cc_zRr7AL87AP_rich_text .rich-text-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-text-primary);
}

.cc_zRr7AL87AP_rich_text .rich-text-heading--has-following {
  margin-bottom: var(--space-md);
}

.cc_zRr7AL87AP_rich_text .rich-text-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.7;
  color: var(--color-text-secondary);
  max-width: 600px;
}

.cc_zRr7AL87AP_rich_text .rich-text[data-alignment="center"] .rich-text-body {
  margin-left: auto;
  margin-right: auto;
}
.cc_zRr7AL87AP_rich_text .rich-text[data-alignment="right"] .rich-text-body {
  margin-left: auto;
}

.cc_zRr7AL87AP_rich_text .rich-text-body--has-following {
  margin-bottom: var(--space-lg);
}

/* .rich-text-body's content is rendered via dangerouslySetInnerHTML (the
   RICH_TEXT editor's own HTML, e.g. <p>/<strong>/<em>/<a>) rather than
   as a plain text child — so its inner <p> tags carry the browser's own
   default margin unless reset here. Font/color/size are inherited from
   .rich-text-body itself, so bold/italic/link formatting needs no extra
   rules beyond link color, which matches this project's existing rich-
   text link treatment (see BlogDetail's .blog-content a). */
.cc_zRr7AL87AP_rich_text .rich-text-body p {
  margin: 0;
}
.cc_zRr7AL87AP_rich_text .rich-text-body p + p {
  margin-top: var(--space-sm);
}
.cc_zRr7AL87AP_rich_text .rich-text-body a {
  color: var(--color-accent);
  text-decoration: underline;
  transition: color 200ms ease;
}
.cc_zRr7AL87AP_rich_text .rich-text-body a:hover {
  color: var(--color-accent-dark);
}

/* Natural paragraph gap between the primary text and the optional
   secondaryText block — only matches when BOTH render (two adjacent
   .rich-text-body elements), so an unset secondaryText never affects
   the existing single-text layout. */
.cc_zRr7AL87AP_rich_text .rich-text-body + .rich-text-body {
  margin-top: var(--space-md);
}

.cc_zRr7AL87AP_rich_text .rich-text-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.cc_zRr7AL87AP_rich_text .rich-text[data-alignment="left"] .rich-text-actions {
  justify-content: flex-start;
}
.cc_zRr7AL87AP_rich_text .rich-text[data-alignment="center"] .rich-text-actions {
  justify-content: center;
}
.cc_zRr7AL87AP_rich_text .rich-text[data-alignment="right"] .rich-text-actions {
  justify-content: flex-end;
}

.cc_zRr7AL87AP_rich_text .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 500;
  text-decoration: none;
  border-radius: 2px;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  cursor: pointer;
  white-space: nowrap;
}

.cc_zRr7AL87AP_rich_text .btn--primary {
  background: var(--color-accent);
  color: #fff;
  border: none;
  padding: 14px 32px;
}
.cc_zRr7AL87AP_rich_text .btn--primary:hover {
  background: var(--color-accent-dark);
}

.cc_zRr7AL87AP_rich_text .btn--secondary {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  padding: 12px 28px;
}
.cc_zRr7AL87AP_rich_text .btn--secondary:hover {
  border-color: var(--color-accent);
}

.cc_zRr7AL87AP_rich_text .btn--ghost {
  background: transparent;
  color: var(--color-accent);
  border: none;
  padding: 12px 28px;
}
.cc_zRr7AL87AP_rich_text .btn--ghost:hover {
  text-decoration: underline;
}

.cc_zRr7AL87AP_rich_text .reveal-item {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: var(--reveal-delay, 0ms);
}

.cc_zRr7AL87AP_rich_text .rich-text.is-visible .reveal-item {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .cc_zRr7AL87AP_rich_text .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .cc_zRr7AL87AP_rich_text .rich-text-body a {
    transition: none;
  }
}

@media (max-width: 767px) {
  .cc_zRr7AL87AP_rich_text .rich-text {
    padding: var(--space-xl) 0;
  }

  .cc_zRr7AL87AP_rich_text .rich-text-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cc_zRr7AL87AP_rich_text .rich-text-actions .btn {
    width: 100%;
    white-space: normal;
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .cc_zRr7AL87AP_rich_text .rich-text {
    padding: var(--space-2xl) 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   "Kompakt Editoryal" (variant="compact-editorial") — opt-in only,
   scoped entirely under .rich-text--compact-editorial (a class only
   ever added to the root <section> when the Studio prop is explicitly
   set to this value — see index.tsx). None of the rules below touch
   an unscoped selector, a shared design token, or any rule any other
   RichText placement reads, so every section still on the "Varsayılan"
   (default) value is byte-for-byte unaffected, in both markup and
   style. Font-family and brand colors are intentionally not
   overridden anywhere in this block — only font-size/line-height/
   margin/padding/max-width, exactly as scoped in the approved plan.
   Tablet (768-1023px) intentionally shares the same values as desktop
   here, matching how this component already treats tablet==desktop
   for .rich-text's own base padding above. ═══════════════════════ */

.cc_zRr7AL87AP_rich_text .rich-text--compact-editorial.rich-text {
  padding: 80px 0;
}

/* .rich-text-eyebrow is its own dedicated element (a plain <p>, not a
   .rich-text-body variant) — index.tsx only ever renders it when
   variant="compact-editorial" AND the new "Üst Başlık" field is
   filled in, so this is inert for every other placement/variant.
   Matched 1:1 to ImageWithTextPanel's .iwt-panel__eyebrow (the
   "HİKÂYEMİZ" reference on the same page): same font-family/-size
   tokens (--font-label/--text-label — already 12px at every width, no
   separate mobile step needed), same weight/line-height, no letter-
   spacing or forced uppercase (the reference has neither; content is
   already typed in caps). Color: #C9A882 is ImageWithText's own
   eyebrowColor prop default, not a shared global token — set as an
   inline CSS var scoped to ITS OWN <section>, so it doesn't cascade to
   this separate section; hardcoded here as the same literal value
   since no shared token exists for it (see chat — deliberate, not an
   oversight). */
.cc_zRr7AL87AP_rich_text .rich-text--compact-editorial .rich-text-eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.4;
  color: #C9A882;
}

.cc_zRr7AL87AP_rich_text .rich-text--compact-editorial .rich-text-eyebrow--has-following {
  margin-bottom: 12px;
}

/* Matched 1:1 to ImageWithTextPanel's .iwt-panel__title ("Bir
   İhtiyaçtan Doğan Hikâye"): same font-size/-weight tokens
   (--text-section-heading is already a fluid clamp(28px,4vw,38px), no
   separate mobile step needed — --font-weight-section-display is a
   light 300, overriding the base rule's 400). line-height:1.15 already
   matches the reference and was already correct in the base rule above
   (untouched). Color:#1C1917 is ImageWithText's own textColor prop
   default — same caveat as the eyebrow color above (no shared token,
   hardcoded as the same literal value). */
.cc_zRr7AL87AP_rich_text .rich-text--compact-editorial .rich-text-heading {
  font-size: var(--text-section-heading);
  font-weight: var(--font-weight-section-display);
  color: #1C1917;
}

/* .rich-text-heading--has-following / .rich-text-body--has-following are
   the SAME classes the default variant already uses (unchanged JS
   logic in index.tsx — heading/text/secondaryText keep the exact same
   adjacency in both variants, only the optional eyebrow is prepended
   ahead of them). Overriding the margin here, at higher specificity
   than the unscoped base rule (24px, var(--space-md)), only changes it
   for this variant; the default variant's own 24px is untouched. */
.cc_zRr7AL87AP_rich_text .rich-text--compact-editorial .rich-text-heading--has-following {
  margin-bottom: 20px;
}

.cc_zRr7AL87AP_rich_text .rich-text--compact-editorial .rich-text-body {
  font-size: 16px;
  line-height: 1.65;
}

@media (max-width: 767px) {
  .cc_zRr7AL87AP_rich_text .rich-text--compact-editorial.rich-text {
    padding: 52px 0;
  }

  /* Fixed 24px side padding, replacing the base clamp(16px,5vw,80px)
     (19px at a 380px test width) with the exact value requested —
     higher specificity (two classes) than the unscoped base rule, so
     this wins at this breakpoint without touching that rule itself. */
  .cc_zRr7AL87AP_rich_text .rich-text--compact-editorial .rich-text-container {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* No mobile font-size override for eyebrow/heading anymore: both now
     use fluid tokens (--text-label is flat 12px at every width,
     --text-section-heading is clamp(28px,4vw,38px)) that already match
     ImageWithTextPanel's own un-stepped mobile behavior — see the base
     (unconditional) rules above. Margins below are unchanged from the
     previously approved plan. */
  .cc_zRr7AL87AP_rich_text .rich-text--compact-editorial .rich-text-eyebrow--has-following {
    margin-bottom: 10px;
  }

  .cc_zRr7AL87AP_rich_text .rich-text--compact-editorial .rich-text-heading--has-following {
    margin-bottom: 16px;
  }

  /* FounderStory-aligned mobile body copy: 14px/400/1.7, matching that
     section's own paragraph density on the same page. Desktop/tablet
     keep the unconditional 16px/1.65 rule above untouched. */
  .cc_zRr7AL87AP_rich_text .rich-text--compact-editorial .rich-text-body {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
  }

  /* <strong> has no font-size/font-weight rule of its own anywhere in
     this project — it already inherits font-size from .rich-text-body
     (now 14px) and keeps the browser's own default bold weight,
     unaffected by font-weight:400 above (that's a UA rule on the
     element itself, not inherited from the parent). This rule only
     makes the 14px explicit; it changes no existing boldness. */
  .cc_zRr7AL87AP_rich_text .rich-text--compact-editorial .rich-text-body strong {
    font-size: 14px;
  }

  /* Overrides the unscoped, shared .rich-text-body p + p rule (16px,
     var(--space-sm)) for this variant's mobile view only — every other
     variant/placement keeps that shared 16px untouched. */
  .cc_zRr7AL87AP_rich_text .rich-text--compact-editorial .rich-text-body p + p {
    margin-top: 20px;
  }
}

/* Desktop-only (>=1024px): only the description text (.rich-text-body,
   i.e. "Metin"/"İkincil Metin") widens to 960px — heading/eyebrow are
   explicitly capped back to the container's ORIGINAL 720px so their
   own width and line-wrapping stay exactly as before, per "başlıkların
   mevcut genişlik ... düzenini koru". Since heading/eyebrow now carry
   their own max-width (previously none — they simply filled the
   container), they need their own centering margin to stay visually
   centered inside the now-wider 960px container; this mirrors the
   existing data-alignment pattern already used for .rich-text-body
   below (copied, not reinvented). Tablet (768-1023px) and mobile keep
   the base/mobile rules above (720px container, 600px body) completely
   untouched — this block only ever matches >=1024px. */
@media (min-width: 1024px) {
  .cc_zRr7AL87AP_rich_text .rich-text--compact-editorial .rich-text-container {
    max-width: 960px;
  }

  .cc_zRr7AL87AP_rich_text .rich-text--compact-editorial .rich-text-heading, .cc_zRr7AL87AP_rich_text .rich-text--compact-editorial .rich-text-eyebrow {
    max-width: 720px;
  }

  .cc_zRr7AL87AP_rich_text .rich-text--compact-editorial .rich-text-body {
    max-width: 960px;
  }

  .cc_zRr7AL87AP_rich_text .rich-text--compact-editorial[data-alignment="center"] .rich-text-heading, .cc_zRr7AL87AP_rich_text .rich-text--compact-editorial[data-alignment="center"] .rich-text-eyebrow {
    margin-left: auto;
    margin-right: auto;
  }

  .cc_zRr7AL87AP_rich_text .rich-text--compact-editorial[data-alignment="right"] .rich-text-heading, .cc_zRr7AL87AP_rich_text .rich-text--compact-editorial[data-alignment="right"] .rich-text-eyebrow {
    margin-left: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Opt-in spacing trims (default OFF) — for a RichText placement that
   sits directly next to another full section and reads as having too
   much space between them. Each is its own class, added only when its
   Studio toggle is explicitly turned on, so every existing/other
   placement of RichText (any page, any variant) is completely
   unaffected by default. Two classes (.rich-text--tight-*.rich-text)
   give these the same (0,2,0) specificity as the compact-editorial
   rules above; placed after them in the file so they win regardless of
   which variant is active when a toggle is on.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .cc_zRr7AL87AP_rich_text .rich-text--tight-bottom-mobile.rich-text {
    padding-bottom: 32px;
  }
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_rich_text .rich-text--tight-top-desktop.rich-text {
    padding-top: 32px;
  }
}