/* Özellikler page — Module block (Figma 251:6834) and Wiki module link (251:6583)
   Mobile / tablet: tag, title, text, screen, wiki summary stacked (the text column steps aside
   with display: contents so the screen can sit before the summary).
   Desktop (≥ 1024): text column + 600 × 440 screen panel side by side, order alternates. */

/* ---------- Module block ---------- */
.module-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-14);
}
.module-block__text { display: contents; }
.module-block__visual { order: 1; }
.module-block__wiki { order: 2; }

.module-block__title {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}
.module-block__lead { font-size: 15px; line-height: 1.5; color: var(--color-text-secondary); }

/* Screen on a tinted panel */
.module-block__visual {
  display: flex;
  justify-content: center;
  align-self: stretch;
  padding: var(--space-24) var(--space-20);
  border-radius: var(--radius-lg);
  background: var(--color-brand-tint);
}
.module-block__screen {
  --screenshot-radius: 10px;
  width: 100%;
}
.module-block__screen::after { box-shadow: inset 0 0 0 1px var(--color-border-divider); }
.module-block__screen--phone { max-width: 360px; }

/* "Wiki'de anlatılanlar" */
.module-block__wiki {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--space-10);
  padding-top: var(--space-20);
  border-top: 1px solid var(--color-border-divider);
  font-size: 15px;
  line-height: 1.5;
}
.module-block__wiki-label { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); }
.module-block__items { display: flex; flex-direction: column; gap: var(--space-10); }
.module-block__item { display: flex; gap: var(--space-10); color: var(--color-text-primary); }
.module-block__check { flex: 0 0 auto; font-size: 15px; font-weight: 600; color: var(--color-brand-primary); }
.module-block__wiki-link { font-weight: 600; color: var(--color-text-link); }
.module-block__wiki-link span { display: inline-block; transition: transform var(--duration-base) var(--ease-standard); }
.module-block__wiki-link:hover { color: var(--color-text-link-hover); }
.module-block__wiki-link:hover span { transform: translateX(4px); }

@media (min-width: 768px) and (max-width: 1023px) {
  .module-block__visual { padding-inline: var(--space-40); }
}

@media (min-width: 1024px) {
  .module-block {
    display: grid;
    grid-template-columns: minmax(0, 504fr) minmax(0, 600fr);
    align-items: center;
    gap: var(--space-48);
  }
  .module-block--image-first { grid-template-columns: minmax(0, 600fr) minmax(0, 504fr); }
  .module-block--image-first .module-block__visual { order: -1; }

  .module-block__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); }
  .module-block__title { font-size: 40px; line-height: 1.1; letter-spacing: -0.025em; }
  .module-block__lead { font-size: 18px; }
  .module-block__item { font-size: 16px; }

  .module-block__visual {
    align-self: center; /* stretching to the text column's height would widen it (aspect ratio) */
    align-items: center;
    aspect-ratio: 600 / 440;
    padding: var(--space-40);
    border-radius: 28px;
  }
  .module-block__screen {
    --screenshot-radius: 12px;
    max-width: 520px;
    filter: drop-shadow(0 16px 20px rgba(31, 87, 194, 0.1));
  }
  /* The panel's size comes from its column only (600 × 440 ratio), never from the image */
  .module-block__visual { container-type: size; }
  /* Phone screen: 240 × 360 in Figma; as wide as fits the panel's height */
  .module-block__screen--phone { width: min(46%, 66.6cqh); }
}

@media (min-width: 1280px) {
  .module-block { gap: var(--space-96); }
}

/* ---------- Wiki module link ---------- */
.wiki-module-link {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-14) var(--space-16);
  border-bottom: 1px solid var(--color-border-divider);
  line-height: 1.5;
}
.wiki-module-link__text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.wiki-module-link__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  transition: color var(--duration-base) var(--ease-standard);
}
.wiki-module-link__summary { font-size: 13px; color: var(--color-text-secondary); }
.wiki-module-link__arrow {
  flex: 0 0 auto;
  font-size: 16px;
  color: var(--color-text-link);
  transition: transform var(--duration-base) var(--ease-standard);
}
.wiki-module-link:hover .wiki-module-link__title { color: var(--color-text-link); }
.wiki-module-link:hover .wiki-module-link__arrow { transform: translateX(4px); }

@media (min-width: 1024px) {
  .wiki-module-link { padding: var(--space-20) 0; }
  .wiki-module-link__text { gap: var(--space-4); }
  .wiki-module-link__title { font-size: 18px; }
  .wiki-module-link__summary { font-size: 15px; }
  .wiki-module-link__arrow { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .module-block__wiki-link span,
  .wiki-module-link__arrow { transition: none; }
}