@layer sections {
  .s-brief {
    background: var(--paper);
    color: var(--ink);
    border-top: 1px solid var(--line);
    padding-block: var(--space-11) var(--space-10);
  }

  .s-brief__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .s-brief__label-kicker {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
    margin: 0 0 var(--space-4);
  }

  .s-brief__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--step-4);
    line-height: 1.02;
    letter-spacing: -0.04em;
    margin: 0 0 var(--space-5);
    max-width: 18ch;
  }

  .s-brief__intro {
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--ink-muted);
    max-width: 46ch;
    margin: 0;
  }

  .s-brief__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--line);
  }

  .s-brief__field {
    border-bottom: 1px solid var(--line);
    padding-block: var(--space-5);
    display: grid;
    gap: var(--space-3);
  }

  .s-brief__label {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
  }

  .s-brief__req {
    color: var(--ink);
  }

  .s-brief__input,
  .s-brief__select,
  .s-brief__textarea {
    width: 100%;
    background: var(--paper-2);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.5;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-4);
    box-shadow: none;
    appearance: none;
  }

  .s-brief__textarea {
    min-height: 9rem;
    resize: vertical;
  }

  .s-brief__input:focus-visible,
  .s-brief__select:focus-visible,
  .s-brief__textarea:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }

  .s-brief__input[aria-invalid='true'],
  .s-brief__select[aria-invalid='true'],
  .s-brief__textarea[aria-invalid='true'] {
    border-color: var(--ink);
    border-left-width: 3px;
  }

  .s-brief__error {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--ink);
    margin: 0;
  }

  /* Hata mesajina bastan yer ayrilir. Aksi halde mesaj gorununce alanlar
     asagi kayar ve kullanicinin gonder tiklamasi iskalayabilir. */
  .s-brief__error[hidden] {
    display: block;
    visibility: hidden;
  }

  .s-brief__error::after {
    content: "\200b";
  }

  .s-brief__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
    padding-top: var(--space-6);
  }

  .s-brief__submit {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: var(--lime);
    color: var(--on-lime);
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-6);
    cursor: pointer;
    box-shadow: none;
  }

  .s-brief__submit:hover,
  .s-brief__submit:focus-visible {
    background: var(--ink);
    color: var(--paper);
  }

  .s-brief__submit[disabled] {
    cursor: progress;
    opacity: 0.6;
  }

  .s-brief__status {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    margin: 0;
    min-height: 1.5em;
  }

  .s-brief__status[data-state='error'],
  .s-brief__status[data-state='success'] {
    color: var(--ink);
  }

  @media (min-width: 900px) {
    .s-brief__grid {
      grid-template-columns: 1fr 1.2fr;
      gap: var(--space-10);
      align-items: start;
    }

    .s-brief__form {
      grid-template-columns: repeat(2, 1fr);
      column-gap: var(--space-6);
    }

    .s-brief__field--full,
    .s-brief__actions {
      grid-column: 1 / -1;
    }
  }

  /* Brief form embedded in service page head area */
  .s-service__brief {
    padding-block: var(--space-9);
    border-top: 1px solid var(--line);
  }

  .s-service__brief-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-2);
    letter-spacing: -0.03em;
    margin: 0 0 var(--space-7);
  }
}