/* Reset + tipografi + form temelleri */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-700);
  background: var(--surface-50);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--ink-900); line-height: 1.25; font-weight: 700; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

a { color: var(--brand-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--brand-primary-dark); }

img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em;
       background: var(--surface-100); padding: 1px 5px; border-radius: 4px; }

/* Erişilebilirlik: klavye odağı her zaman görünür */
:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Form --- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-sm); }
.field__label { font-size: var(--fs-small); font-weight: 600; color: var(--ink-700); }
.field__hint { font-size: var(--fs-tiny); color: var(--ink-500); }
.field__error { font-size: var(--fs-tiny); color: var(--danger); font-weight: 500; }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="search"], select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--ink-900);
  background: var(--white);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

textarea { resize: vertical; min-height: 90px; line-height: 1.55; }
select { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.7rem center; padding-right: 2rem; }

.checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--fs-small); }
.checkbox input { width: 16px; height: 16px; accent-color: var(--brand-primary); cursor: pointer; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid .span-2 { grid-column: 1 / -1; }

/* --- Buton --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600;
  padding: 0.55rem 1.15rem; border-radius: var(--radius-full);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: var(--transition);
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn--primary { background: var(--brand-gradient); color: var(--white); box-shadow: var(--shadow-md); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); color: var(--white); }

.btn--ghost { background: var(--white); color: var(--ink-700); border-color: var(--ink-300); }
.btn--ghost:hover { background: var(--surface-50); border-color: var(--ink-400); color: var(--ink-900); }

.btn--danger { background: var(--danger); color: var(--white); }
.btn--danger:hover { background: #b91c1c; color: var(--white); }

.btn--sm { padding: 0.35rem 0.8rem; font-size: var(--fs-tiny); }
.btn--icon { padding: 0.45rem; border-radius: var(--radius-full); width: 34px; height: 34px; }
.btn--block { width: 100%; }

/* --- Yardımcı --- */
.muted { color: var(--ink-500); }
.small { font-size: var(--fs-small); }
.tiny { font-size: var(--fs-tiny); }
.strong { font-weight: 600; color: var(--ink-900); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row { display: flex; align-items: center; gap: var(--space-xs); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mb-sm { margin-bottom: var(--space-sm); }
.grow { flex: 1 1 auto; min-width: 0; }
.overdue { color: var(--danger); font-weight: 600; }