/* =============================================================================
   KVKK application form. Loaded only on /kvkk-request.

   It deliberately follows the /legal page rather than the contact form: this is
   a legal instrument, the paper equivalent of CS-KVKK-03, and it should look
   like the documents it sits beside rather than like a "get in touch" box.
   ========================================================================== */

.kv { color: var(--ink); overflow-x: hidden; }
.kv-inner { max-width: 820px; margin: 0 auto; }

/* ------------------------------------------------------------------ intro -- */
.kv-hero { padding: 76px 32px 8px; }
.kv-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px;
              font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
              color: #05a558; font-weight: 600; }
.kv-eyebrow__rule { width: 26px; height: 2px; background: #05a558; }

.kv-title { margin: 0; font-size: 46px; line-height: 1.06; letter-spacing: -.03em; font-weight: 700; }
.kv-lede { margin: 18px 0 0; font-size: 17px; line-height: 1.55; color: #565a4f; text-wrap: pretty; }
.kv-routes { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: #565a4f;
             border-left: 3px solid #05a558; background: #f4faf6; padding: 11px 15px; }
.kv-routes a { color: #05733e; }

/* ------------------------------------------------------------------- form -- */
.kv-form-wrap { padding: 26px 32px 96px; }

.kv-sec { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #14160f;
          margin: 34px 0 14px; padding-bottom: 7px; border-bottom: 1.5px solid rgba(20,22,15,.16); }
.kv-sec:first-of-type { margin-top: 8px; }

.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.kv-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kv-field--wide { grid-column: 1 / -1; }

.kv-label { font-size: 13.5px; font-weight: 600; }
.kv-hint { font-size: 12.5px; color: #8b8f82; line-height: 1.45; text-wrap: pretty; }

.kv-input, .kv-textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14.5px; color: var(--ink);
  background: #fff; border: 1px solid rgba(20,22,15,.24); border-radius: 8px; padding: 10px 12px;
}
.kv-textarea { resize: vertical; line-height: 1.5; }
.kv-input:focus, .kv-textarea:focus { outline: 2px solid #05a558; outline-offset: 1px; border-color: #05a558; }
.kv-input--error { border-color: #c0392b; background: #fdf6f5; }
.kv-input--other { margin-top: 10px; }

.kv-err { font-size: 12.5px; color: #c0392b; }
.kv-err--block { margin: 0 0 12px; }

/* Radios and checkboxes. The label is the hit target, so it carries the frame. */
.kv-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.kv-choices { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.kv-choice { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
             font-size: 14px; border: 1px solid rgba(20,22,15,.2); border-radius: 999px;
             padding: 7px 14px 7px 11px; background: #fff; }
.kv-choice:hover { background: #f6f8f4; }
.kv-choice input { accent-color: #05a558; margin: 0; flex: none; }
.kv-choice:has(input:checked) { border-color: #05a558; background: #eef8f2; }

/* The nine rights are read line by line, so they are a list, not pills. */
.kv-rights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.kv-choice--right { border-radius: 9px; padding: 10px 14px; align-items: flex-start; line-height: 1.45; }
.kv-choice--right input { margin-top: 2px; }

.kv-consent { margin: 26px 0 0; font-size: 12.8px; line-height: 1.6; color: #8b8f82;
              border-top: 1px solid rgba(20,22,15,.12); padding-top: 14px; text-wrap: pretty; }

.kv-submit { margin-top: 20px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
             color: #fff; background: #14160f; border: 0; border-radius: 999px; padding: 13px 28px; }
.kv-submit:hover { background: #05a558; }

/* --------------------------------------------------------------- accepted -- */
.kv-sent { border: 1px solid #05a558; background: #f4faf6; border-radius: 12px; padding: 26px 28px; }
.kv-sent h2 { margin: 0 0 8px; font-size: 22px; }
.kv-sent p { margin: 0; color: #565a4f; line-height: 1.6; }

@media (max-width: 640px) {
  .kv-hero { padding: 48px 20px 8px; }
  .kv-form-wrap { padding: 20px 20px 64px; }
  .kv-title { font-size: 34px; }
  .kv-grid { grid-template-columns: 1fr; }
}