/*
 * Content pages — page-local styles (Direction A): /hakkimizda (Hakkimizda.dc.html) and
 * /referanslar (Referanslar.dc.html); also loaded on the legal pages (legal.css adds theirs).
 * Classes: p-content-* (shared by these pages), p-about-*, p-ref-*. Shared s-* classes are
 * composed in the markup, never redefined here.
 */

/* ------------------------------------------------------------ page hero */
.p-content-hero { padding-block: clamp(12px, 1.6vw, 24px) clamp(56px, 6vw, 96px); }
.p-content-hero--ref { padding-bottom: clamp(48px, 5vw, 72px); }
.p-content-hero__crumbs { margin-bottom: clamp(20px, 3vw, 48px); }
.p-content-hero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px clamp(40px, 5vw, 80px);
}
.p-content-hero__main { flex: 3 1 640px; min-width: 0; }
.p-content-hero__aside { flex: 1 1 320px; min-width: 0; max-width: 460px; }
.p-content-hero__lede { margin: 0; max-width: none; }

/* =============================================================== Hakkımızda */
.p-about-hero__title { max-width: 14em; }

/* "Ne yapıyoruz" statement */
.p-about-aim {
  border-top: 1px solid var(--line);
  padding-block: clamp(64px, 7vw, 112px);
}
.p-about-aim__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px clamp(48px, 6vw, 96px);
}
.p-about-aim__label {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
  padding-top: clamp(4px, 0.8vw, 12px);
}
.p-about-aim__text {
  flex: 4 1 640px;
  min-width: 0;
  margin: 0;
  max-width: 36em;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* "Bugün neler var" */
.p-about-today {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px clamp(48px, 6vw, 96px);
}
.p-about-today__head { flex: 1 1 300px; min-width: 0; }
.p-about-today__link { margin-top: 20px; }
.p-about-today__facts { flex: 2 1 560px; min-width: 0; }

/* "Sorularınız için buradayız." band */
.p-about-questions {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: clamp(48px, 5vw, 72px);
}
.p-about-questions__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
}
.p-about-questions__main { flex: 1 1 420px; min-width: 0; }
.p-about-questions__text { margin-top: 12px; max-width: 36em; }
.p-about-questions__hours { margin-top: 8px; }
.p-about-questions__actions {
  flex: none;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ============================================================== Referanslar */
.p-ref-hero__row { gap: 24px 64px; }
/* "Tasarımlarımızla" is one long word: below ~390px shrink the H1 with the viewport so it never overflows */
.p-ref-hero__title { max-width: 13em; font-size: min(var(--fs-h1), 9.8vw); }
.p-ref-hero__lede { max-width: 38em; }
.p-ref-hero__note {
  flex: 1 1 300px;
  min-width: 0;
  max-width: 400px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.p-ref-hero__note-text { margin-top: 12px; }

/* "Demo / örnek" tag */
.p-ref-tag {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.p-ref-tag::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
}

/* showcase list: one wide row per demo, screenshot side alternating */
.p-ref-list {
  border-top: 1px solid var(--line);
  padding-block: clamp(40px, 4vw, 56px) clamp(56px, 5vw, 80px);
}
.p-ref-list__items { margin-top: clamp(20px, 2.4vw, 32px); }
.p-ref-item {
  padding-block: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--line);
}
.p-ref-item__inner {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  gap: 32px clamp(32px, 5vw, 80px);
}
.p-ref-item__inner--flip { flex-direction: row-reverse; }
.p-ref-item__figure { flex: 7 1 560px; min-width: 0; }
.p-ref-item__ph {
  display: flex;
  align-items: flex-end;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: clamp(16px, 2vw, 28px);
  background: var(--raised);
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 118%;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--muted);
}
.p-ref-item__body { flex: 5 1 340px; min-width: 0; }
.p-ref-item__name { margin-top: 20px; line-height: 1; }
.p-ref-item__use { margin: 14px 0 0; font-weight: 600; font-size: 17px; line-height: 1.4; }
.p-ref-item__inside {
  margin: 6px 0 0;
  max-width: 30em;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.p-ref-item__meta {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.p-ref-item__meta-row { display: flex; gap: 10px; }
.p-ref-item__meta dt { flex: none; width: 3.5em; }
.p-ref-item__meta dd { min-width: 0; margin: 0; color: var(--text); overflow-wrap: anywhere; }
.p-ref-item__actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}