/* ═══════════════════════════════════════════════════════════════
   Image With Text — media on one side, text panel on the other.
   Panel typography lives in sub-components/ImageWithTextPanel.
   ═══════════════════════════════════════════════════════════════ */

.cc_JsHSjQyQmG_image_with_text .image-with-text {
  width: 100%;
  overflow-x: clip;
  background: var(--color-bg);
  font-family: var(--font-body);
  color: var(--iwt-text-color, var(--color-text-primary));
}

.cc_JsHSjQyQmG_image_with_text .image-with-text__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--sec-pad-top-mobile, var(--section-pad-mobile)) var(--container-pad) var(--sec-pad-bottom-mobile, var(--section-pad-mobile));
}

.cc_JsHSjQyQmG_image_with_text .image-with-text__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.cc_JsHSjQyQmG_image_with_text .image-with-text__media {
  position: relative;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: var(--iwt-image-aspect-ratio, 4 / 5);
  background: var(--color-surface-alt);
}

.cc_JsHSjQyQmG_image_with_text .image-with-text__image, .cc_JsHSjQyQmG_image_with_text .image-with-text__image-placeholder {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--iwt-focus, 50% 50%);
}

.cc_JsHSjQyQmG_image_with_text .image-with-text__panel {
  display: flex;
  align-items: var(--iwt-valign, center);
  min-width: 0;
  padding: var(--iwt-panel-pad-m, var(--space-lg)) 0 0;
}

.cc_JsHSjQyQmG_image_with_text .image-with-text--full-width .image-with-text__panel {
  padding: var(--iwt-panel-pad-m, var(--space-lg)) var(--container-pad) var(--section-pad-mobile);
}

@media (min-width: 1024px) {
  .cc_JsHSjQyQmG_image_with_text .image-with-text__container { padding: var(--sec-pad-top-desktop, var(--section-pad)) var(--container-pad) var(--sec-pad-bottom-desktop, var(--section-pad)); }

  .cc_JsHSjQyQmG_image_with_text .image-with-text__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cc_JsHSjQyQmG_image_with_text .image-with-text--image-right .image-with-text__media { order: 2; }

  .cc_JsHSjQyQmG_image_with_text .image-with-text__panel, .cc_JsHSjQyQmG_image_with_text .image-with-text--full-width .image-with-text__panel {
    justify-content: center;
    padding: var(--iwt-panel-pad-d, var(--space-xl));
  }
}

/* Image corners follow the site-wide "Kart / Görsel Köşe Yuvarlaklığı" setting */
.cc_JsHSjQyQmG_image_with_text .image-with-text__media {
  border-radius: var(--radius);
}

/* Full-width layout has no outer spacing of its own; the section's spacing settings add it */
.cc_JsHSjQyQmG_image_with_text .image-with-text--full-width {
  padding-top: var(--sec-pad-top-mobile, 0px);
  padding-bottom: var(--sec-pad-bottom-mobile, 0px);
}

@media (min-width: 1024px) {
  .cc_JsHSjQyQmG_image_with_text .image-with-text--full-width {
    padding-top: var(--sec-pad-top-desktop, 0px);
    padding-bottom: var(--sec-pad-bottom-desktop, 0px);
  }
}

/* ─── Newer settings (each applies only when it was set) ─── */

@media not all and (min-width: 1024px) {
  /* image below the text */
  .cc_JsHSjQyQmG_image_with_text .image-with-text--m-bottom .image-with-text__media { order: 2; }

  .cc_JsHSjQyQmG_image_with_text .image-with-text--m-bottom .image-with-text__panel {
    padding: 0 0 var(--iwt-panel-pad-m, var(--space-lg));
  }

  .cc_JsHSjQyQmG_image_with_text .image-with-text--m-bottom.image-with-text--full-width .image-with-text__panel {
    padding: var(--section-pad-mobile) var(--container-pad) var(--iwt-panel-pad-m, var(--space-lg));
  }

  /* image to the screen's edges */
  .cc_JsHSjQyQmG_image_with_text .image-with-text--bleed-mobile .image-with-text__media {
    margin-right: calc(var(--container-pad) * -1);
    margin-left: calc(var(--container-pad) * -1);
    border-radius: 0;
  }

  .cc_JsHSjQyQmG_image_with_text .image-with-text--bleed-mobile.image-with-text--full-width .image-with-text__media {
    margin-right: 0;
    margin-left: 0;
  }
}

@media (min-width: 1024px) {
  /* image above or below the text */
  .cc_JsHSjQyQmG_image_with_text .image-with-text--stack .image-with-text__grid { grid-template-columns: minmax(0, 1fr); }
  .cc_JsHSjQyQmG_image_with_text .image-with-text--d-bottom .image-with-text__media { order: 2; }

  /* column ratio */
  .cc_JsHSjQyQmG_image_with_text .image-with-text--cols .image-with-text__grid { grid-template-columns: var(--iwt-cols); }

  /* the image fills the height of the row */
  .cc_JsHSjQyQmG_image_with_text .image-with-text--ratio-full .image-with-text__media {
    aspect-ratio: auto;
    min-height: 70vh;
  }
}

/* Image With Text — text panel */

.cc_JsHSjQyQmG_image_with_text .iwt-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  width: 100%;
  max-width: var(--content-narrow);
}

.cc_JsHSjQyQmG_image_with_text .iwt-panel__eyebrow {
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--iwt-eyebrow-color, var(--color-text-secondary));
}

.cc_JsHSjQyQmG_image_with_text .iwt-panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--sec-heading-size, var(--text-h2));
  font-weight: var(--sec-heading-weight, var(--heading-weight));
  line-height: 1.15;
  letter-spacing: var(--sec-heading-tracking, var(--tracking-tight));
  text-wrap: balance;
  color: var(--iwt-text-color, var(--color-text-primary));
  text-transform: var(--sec-heading-transform, inherit);
}

.cc_JsHSjQyQmG_image_with_text .iwt-panel__description {
  margin: 0;
  font-size: var(--sec-body-size-mobile, var(--text-body-lg));
  line-height: var(--sec-body-leading, 1.7);
  text-wrap: pretty;
  color: var(--iwt-description-color, var(--color-text-secondary));
}

.cc_JsHSjQyQmG_image_with_text .iwt-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-xs);
}

.cc_JsHSjQyQmG_image_with_text .iwt-panel__btn--primary {
  --btn-bg: var(--iwt-accent-color, var(--color-text-primary));
  --btn-border: var(--iwt-accent-color, var(--color-text-primary));
  --btn-hover-fg: var(--iwt-accent-color, var(--color-text-primary));
}

.cc_JsHSjQyQmG_image_with_text .iwt-panel__btn--secondary { color: var(--iwt-text-color, var(--color-text-primary)); }

@media (min-width: 1024px) {
  .cc_JsHSjQyQmG_image_with_text .iwt-panel__description { font-size: var(--sec-body-size-desktop, var(--text-body-lg)); }
}

/* Touch target: the text link is 23px tall. An invisible area grows it by 8px above and below
   (half of the gap to a wrapped second row), so 39px in all; nothing moves. */
.cc_JsHSjQyQmG_image_with_text .iwt-panel__btn--secondary::before {
  content: "";
  position: absolute;
  inset: -8px 0;
}