/* MERMER OYUN — taban: sıfırlama, gövde, etiket stilleri, odak, yardımcılar. */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: var(--t-body) var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main { flex: 1; outline: none; }

h1, h2, h3, h4, p, ul, ol { margin: 0; }
h1 { font: 700 var(--t-h1) var(--font); letter-spacing: var(--track-tight); }
h2 { font: 650 var(--t-h2) var(--font); letter-spacing: var(--track-snug); }
h3 { font: 600 var(--t-h3) var(--font); }
h4 { font: 600 var(--t-body) var(--font); }
p { max-width: var(--read); }
ul, ol { padding-left: var(--s-5); display: grid; gap: var(--s-2); }
small { font: var(--t-small) var(--font); }
b, strong { font-weight: 650; }

a { color: inherit; text-underline-offset: 4px; }
img, video { display: block; max-width: 100%; }
video { border-radius: var(--r-1); background: var(--field); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Düğme */
button, .button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--control);
  padding: 0 var(--s-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  background: var(--surface-2);
  color: var(--text);
  font: 600 var(--t-small) var(--font);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease);
}
button:hover, .button:hover { background: var(--surface-hot); }
button:active, .button:active { transform: scale(.98); }
button:disabled { opacity: .55; cursor: default; }
button[aria-busy="true"] { cursor: progress; }

/* Form */
form { display: grid; gap: var(--s-4); }
label { display: grid; gap: var(--s-2); font: 600 var(--t-small) var(--font); color: var(--text-2); }
input, select, textarea {
  width: 100%;
  min-height: var(--control);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  background: var(--field);
  color: var(--text);
  font: var(--t-body) var(--font);
  transition: border-color var(--ease), background var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--muted); }
input[readonly] { color: var(--muted); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; padding: 0; accent-color: var(--accent); flex: none; }
input[type="file"] { padding: var(--s-2); }
textarea { min-height: 112px; resize: vertical; }
select { appearance: none; padding-right: var(--s-6); background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }

/* Tablo */
table { width: 100%; border-collapse: collapse; font: var(--t-small) var(--font); font-variant-numeric: tabular-nums; }
th, td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; white-space: nowrap; }
td { max-width: 320px; overflow-wrap: anywhere; }
tr:last-child td { border-bottom: 0; }

/* Açılır ayrıntı */
details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--control-large); cursor: pointer; font-weight: 600; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--muted); font: 400 var(--t-h2) var(--font); transition: transform var(--move-fast) var(--ease-out); }
details[open] > summary::after { transform: rotate(45deg); }
details > p, details > form, details > label, details > .table-wrap { margin-bottom: var(--s-4); }

/* İlerleme */
progress { appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--surface-2); }
progress::-webkit-progress-value { background: var(--accent); border-radius: var(--r-full); transition: width var(--move) var(--ease-out); }
progress::-moz-progress-bar { background: var(--accent); border-radius: var(--r-full); }

dialog { color: var(--text); }

/* Yardımcılar */
.hidden, [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; min-height: 0; }
.skip-link { position: fixed; top: var(--s-2); left: var(--s-2); z-index: 100; padding: var(--s-3) var(--s-4); border-radius: var(--r-1); background: var(--accent); color: var(--on-accent); font-weight: 650; transform: translateY(-200%); transition: transform var(--ease); }
.skip-link:focus { transform: none; }
.pre-wrap { white-space: pre-wrap; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font: var(--t-small) var(--font); }
.success { color: var(--ok); }
.warn { color: var(--warn); }

@media (pointer: coarse) {
  :root { --control-small: 44px; }
}

/* Hareket kapalı (alt bilgideki Hareket düğmesi): hiçbir şey kıpırdamaz. */
.motion-off { scroll-behavior: auto; }
.motion-off *, .motion-off *::before, .motion-off *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }