@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/outfit-latin.woff2) format('woff2');
}

/* Marka renkleri: mürekkep, kâğıt, aile sarısı (marka kimliği v1.0). */
:root {
  --ink: #121417;
  --paper: #F6F5F1;
  --sun: #FFC857;
  --mute: #7A7D82;
  --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

.page {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 24px 16px max(20px, env(safe-area-inset-bottom));
}

main {
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(22px, 4vh, 40px);
  text-align: center;
}

.scene {
  display: block;
  width: min(620px, 88vw);
  height: auto;
  overflow: visible;
}
.scene .an { transform-box: view-box; transform-origin: 0 0; }
.scene .hole { fill: var(--paper); }

.status {
  margin: 0;
  font: 400 clamp(12px, 1.4vw, 15px) var(--mono);
  letter-spacing: .18em;
  color: var(--mute);
}

.mail {
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 10px 24px;
  transition: background-color .2s, color .2s;
}
.mail:hover, .mail:focus-visible { background: var(--ink); color: var(--paper); }
.mail:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }

footer {
  text-align: center;
  font: 400 12px var(--mono);
  letter-spacing: .04em;
  color: var(--mute);
}

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