/*
 * Bu turda eklenen bölümlerin stilleri.
 *
 * Onaylı CSS dosyaları referanstan değiştirilmeden alındığı için yeni
 * bölümler burada tanımlanır. Renk, punto, radius ve boşluk değerleri
 * design-system.css'teki belirteçlerden gelir; yeni ölçü uydurulmaz.
 */

/* ── Asimetrik vurgu bölümü (Ofisimiz) ───────────────────────────────── */
.office-accent {
  display: grid;
  grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
  gap: var(--space-6);
  align-items: center;
}
.office-accent.gorsel-sagda { grid-template-columns: minmax(0, 66fr) minmax(0, 34fr); }
.office-accent.gorsel-sagda .office-accent-visual { order: 2; }

.office-accent-visual { margin: 0; }
.office-accent-visual picture { display: block; overflow: hidden; border-radius: var(--radius-image); }
.office-accent-visual img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Sütun genişliği başlık ve metinde ortak tutulur; aksi hâlde başlık
   neredeyse tam genişliğe yayılırken paragraflar 58ch'te kesiliyor ve
   sağ kenar dengesiz görünüyordu. */
.office-accent-copy { min-width: 0; max-width: 64ch; padding-left: var(--space-5); border-left: 2px solid var(--gold); }
.office-accent.gorsel-sagda .office-accent-copy { padding: 0 var(--space-5) 0 0; border-left: 0; border-right: 2px solid var(--gold); }
.office-accent-copy .eyebrow { margin: 0 0 var(--space-2); color: var(--blue); }
.office-accent-copy h2 { margin: 0; font-size: var(--text-section); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.office-accent-copy h2 + .lead { margin-top: var(--space-3); }
.office-accent-copy .lead { margin: 0; color: var(--muted); font-size: var(--text-lead); line-height: 1.7; }
.office-accent-copy .lead + .lead { margin-top: var(--space-2); }
.office-accent-copy .text-link { margin-top: var(--space-4); }

@media (max-width: 899px) {
  .office-accent,
  .office-accent.gorsel-sagda { grid-template-columns: 1fr; gap: var(--space-4); }
  .office-accent.gorsel-sagda .office-accent-visual { order: 0; }
  .office-accent-visual img { aspect-ratio: 16 / 10; }
  .office-accent-copy,
  .office-accent.gorsel-sagda .office-accent-copy {
    padding: 0 0 0 var(--space-3);
    border-left: 2px solid var(--gold);
    border-right: 0;
  }
}

/* ── Çalışma alanı · SSS girişi ──────────────────────────────────────── */
.area-faq-intro .area-faq-lead {
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.7;
  max-width: 34ch;
}
.area-faq-intro .editorial-note { margin-top: var(--space-4); }

/* Dokunma alanı ve odak görünürlüğü */
.area-faq details summary { min-height: 56px; }
.area-faq details summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }

/* ── Çalışma alanı · başvuru (kaynaklar) alanı ───────────────────────── */
.area-reference { background: var(--ice); }
.area-reference-head {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: var(--space-6);
  align-items: start;
  margin-bottom: var(--space-5);
}
.area-reference-head .eyebrow { margin: 0 0 var(--space-2); color: var(--blue); }
.area-reference-head h2 { margin: 0; font-size: var(--text-section); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.area-reference-note { margin: 0; color: var(--muted); font-size: var(--text-small); line-height: 1.75; max-width: 70ch; }

.reference-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.reference-rows > li { border-bottom: 1px solid var(--line); }
.reference-rows > li > a {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 28px;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4) 0;
  text-decoration: none;
  color: inherit;
  transition: background-color .25s, padding-inline .25s;
}
.reference-rows > li > a:hover,
.reference-rows > li > a:focus-visible { background: rgb(255 255 255 / .6); padding-inline: var(--space-3); }
.reference-rows > li > a:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.reference-no { font-size: var(--text-small); font-weight: 700; color: var(--blue); letter-spacing: .04em; padding-top: 3px; }
.reference-body { display: block; min-width: 0; }
.reference-body strong { display: block; font-size: var(--text-card); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.reference-desc { display: block; margin-top: var(--space-1); color: var(--muted); font-size: var(--text-small); line-height: 1.65; }
.reference-body small { display: block; margin-top: var(--space-2); color: var(--blue); font-size: var(--text-caption); letter-spacing: .04em; }
.reference-arrow { color: var(--blue); padding-top: 4px; transition: transform .25s; }
.reference-rows > li > a:hover .reference-arrow { transform: translate(3px, -3px); }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 899px) {
  .area-reference-head { grid-template-columns: 1fr; gap: var(--space-3); }
  .area-faq-intro .area-faq-lead { max-width: none; }
}
@media (max-width: 599px) {
  .reference-rows > li > a { grid-template-columns: 40px minmax(0, 1fr) 24px; gap: var(--space-2); padding: var(--space-3) 0; }
}

/* Hareketi azaltılmış tercihinde geçişler kapanır. */
@media (prefers-reduced-motion: reduce) {
  .reference-rows > li > a,
  .reference-rows > li > a .reference-arrow { transition: none; }
  .reference-rows > li > a:hover .reference-arrow { transform: none; }
}

/* ── Çalışma alanı · karar özeti ─────────────────────────────────────────
 * "Bana uygun mu, ofis ne yapar, benden ne gerekir?" sorularını sayfanın
 * üstünde yanıtlar. Ayrıntılar aşağıda durur; buradaki bağlantılar oraya
 * iner. Yeni renk veya ölçü tanımlanmaz.
 */
.area-decision { padding-block: var(--space-5) var(--space-4); }

.decision-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}
.decision-card {
  border-top: 2px solid var(--blue);
  padding-top: var(--space-3);
  min-width: 0;
}
.decision-card.decision-limit { border-top-color: var(--gold); }
.decision-card .eyebrow { margin: 0 0 var(--space-3); color: var(--blue); }
.decision-card.decision-limit .eyebrow { color: #8a7338; }
.decision-card ul { margin: 0; padding: 0; list-style: none; }
.decision-card li {
  position: relative;
  padding-left: 18px;
  margin-bottom: var(--space-2);
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--ink);
}
.decision-card li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue);
}
.decision-card.decision-limit p {
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.65;
  color: var(--muted);
}
.decision-card .text-link { margin-top: var(--space-2); font-size: var(--text-caption); }

.decision-next { margin: var(--space-4) 0 0; }

@media (max-width: 899px) {
  .decision-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .area-decision { padding-block: var(--space-4) var(--space-3); }
}