/* Copied from src/components.css by scripts/build.js. Do not edit. */
/* Okan Ozcan — component styles. Reads tokens.css custom properties only. */

:root {
  --oz-margin: var(--space-12);
  --oz-gutter: var(--space-6);
  --oz-ease: cubic-bezier(0.25, 0.1, 0.25, 1);      /* link feedback */
  --oz-ease-out: cubic-bezier(0.33, 1, 0.68, 1);    /* entering content: quick start, soft landing */
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--canvas); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--font-sans); font-size: 18px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
:where(a, button):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-focus); }
::selection { background: var(--ink); color: var(--canvas); }
h1, h2, h3, h4, p, figure { margin: 0; }
.oz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- layout ---------- */
.oz-wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--oz-margin); }
.oz-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--oz-gutter); }
.oz-section { padding-top: var(--space-40); }
#about, #contact { padding-top: var(--space-24); }
#about .oz-shead, #contact .oz-shead { margin-bottom: var(--space-8); }

/* ---------- link ---------- */
.oz-link { display: inline-flex; align-items: baseline; gap: 0.25em; color: var(--ink); }
.oz-link__t { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; transition: background-size var(--duration-fast) var(--oz-ease); }
.oz-link:hover .oz-link__t { background-size: 0 1px; background-position: 100% 100%; }
.oz-link__a { display: inline-block; transition: transform var(--duration-fast) var(--oz-ease); }
.oz-link--out:hover .oz-link__a { transform: translate(2px, -2px); }
.oz-link--down:hover .oz-link__a { transform: translateY(2px); }
.oz-link--up:hover .oz-link__a { transform: translateY(-2px); }

/* ---------- header ---------- */
.oz-header { border-bottom: 1px solid var(--divider); }
.oz-header__in { height: 72px; display: flex; align-items: center; justify-content: space-between; }
.oz-header__name { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.oz-header__nav { display: flex; gap: var(--space-8); margin: 0; padding: 0; list-style: none; font-size: 17px; }
.oz-header__nav a { color: var(--ink-2); transition: color var(--duration-fast) var(--oz-ease); }
.oz-header__nav a:hover { color: var(--ink); }

/* ---------- hero ---------- */
.oz-hero { padding-top: var(--space-24); }
.oz-hero__title { font-size: clamp(56px, 8.6vw, 124px); line-height: 0.92; font-weight: 500; letter-spacing: -0.04em; margin-left: -0.04em; }
.oz-hero__foot { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--divider); row-gap: var(--space-6); align-items: start; }
.oz-hero__lead { grid-column: 1 / span 7; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.38; letter-spacing: -0.015em; max-width: 24em; }
.oz-hero__side { grid-column: 9 / -1; display: flex; flex-direction: column; gap: var(--space-3); color: var(--ink-2); padding-top: 3px; }
.oz-hero__links { display: flex; gap: var(--space-6); color: var(--ink); }

/* ---------- section heading ---------- */
.oz-shead { border-top: 1px solid var(--rule); padding-top: var(--space-6); margin-bottom: var(--space-16); }
.oz-shead__t { grid-column: 1 / -1; font-size: 28px; line-height: 1.15; font-weight: 500; letter-spacing: -0.015em; }

/* ---------- project ---------- */
.oz-project + .oz-project { margin-top: var(--space-40); }
.oz-proj__head { border-top: 1px solid var(--rule); padding-top: var(--space-6); align-items: start; row-gap: var(--space-4); }
.oz-proj__no { grid-column: 1 / span 2; font-size: clamp(40px, 4.45vw, 64px); line-height: 1; font-weight: 400; letter-spacing: -0.03em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.oz-proj__titles { grid-column: 3 / span 7; display: flex; flex-direction: column; gap: var(--space-3); }
.oz-proj__title { font-size: clamp(40px, 4.45vw, 64px); line-height: 1; font-weight: 500; letter-spacing: -0.03em; }
.oz-proj__stack { font-family: var(--font-mono); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.oz-proj__links { grid-column: 10 / -1; justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2) var(--space-6); padding-top: 10px; }
.oz-proj__overview { margin-top: var(--space-12); }
.oz-proj__overview-text { grid-column: 3 / span 7; display: flex; flex-direction: column; gap: var(--space-3); font-size: clamp(19px, 1.55vw, 22px); line-height: 1.45; letter-spacing: -0.01em; max-width: 34em; }
.oz-proj__facts { font-size: 15px; letter-spacing: 0; color: var(--ink-2); }
.oz-proj__body { margin-top: var(--space-12); align-items: start; row-gap: var(--space-8); }
.oz-proj__media { grid-column: 3 / span 6; }
.oz-proj__details { grid-column: 9 / -1; display: flex; flex-direction: column; gap: var(--space-8); padding-top: 2px; }
.oz-proj__details--wide { grid-column: 3 / span 8; flex-direction: row; }
.oz-detail { display: flex; flex-direction: column; gap: var(--space-2); }
.oz-detail__h { font-size: 18px; line-height: 1.4; font-weight: 600; letter-spacing: -0.005em; }
.oz-detail p { color: var(--ink-2); }

/* ---------- media ---------- */
.oz-media__box { position: relative; aspect-ratio: var(--oz-ratio, 16 / 9); overflow: hidden; background: var(--media-fill); }
.oz-media__box > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.oz-media__slot { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--space-2); align-items: center; justify-content: center; padding: var(--space-6); text-align: center; font-size: 16px; color: var(--ink-2); }
a > .oz-media__box--slot { transition: background-color var(--duration-fast) linear; }
a:hover > .oz-media__box--slot { background-color: var(--divider); }
.oz-media__slot-action { color: var(--ink); }
.oz-media__cap { margin-top: var(--space-3); font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.oz-media__kind { color: var(--ink); }
.oz-media__kind + span::before { content: " \2014  "; color: var(--ink-2); }

/* ---------- about ---------- */
.oz-about { align-items: start; row-gap: var(--space-8); }
.oz-about__text { grid-column: 3 / span 6; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.38; letter-spacing: -0.015em; max-width: 24em; }
.oz-edu { grid-column: 10 / -1; display: flex; flex-direction: column; gap: 2px; padding-top: 4px; color: var(--ink-2); }
.oz-edu__k { font-size: 15px; margin-bottom: var(--space-2); }
.oz-edu__main { color: var(--ink); font-weight: 600; }

/* ---------- contact ---------- */
.oz-contact__row { align-items: baseline; padding: var(--space-4) 0 var(--space-6); border-bottom: 1px solid var(--divider); }
.oz-contact__row:first-child { padding-top: 0; }
.oz-contact__k { grid-column: 1 / span 2; font-size: 17px; color: var(--ink-2); }
.oz-contact__v { grid-column: 3 / -1; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; }

/* ---------- footer ---------- */
.oz-footer { margin-top: var(--space-40); }
.oz-footer__in { display: flex; justify-content: space-between; gap: var(--space-6); padding-top: var(--space-6); padding-bottom: var(--space-12); border-top: 1px solid var(--divider); font-size: 15px; color: var(--ink-3); }
.oz-footer__in a { transition: color var(--duration-fast) var(--oz-ease); }
.oz-footer__in a:hover { color: var(--ink); }

/* ---------- motion ---------- */
/* Everything is visible without JS. initMotion() adds html.oz-motion, then reveals on entry. */
.oz-motion [data-enter] { opacity: 0; transform: translateY(6px); transition: opacity var(--duration-enter) var(--oz-ease-out), transform var(--duration-enter) var(--oz-ease-out); transition-delay: calc(var(--oz-i, 0) * var(--stagger)); }
.oz-motion [data-enter].is-in { opacity: 1; transform: none; }
.oz-motion [data-enter]:focus-within { opacity: 1; transform: none; }  /* keyboard focus never lands on hidden text */

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  :root { --oz-margin: var(--space-8); --oz-gutter: var(--space-4); }
  .oz-section { padding-top: var(--space-24); }
  .oz-grid > * { grid-column: 1 / -1 !important; justify-self: start !important; }
  .oz-proj__links { justify-content: flex-start; padding-top: 0; }
  .oz-proj__no { font-size: 20px; letter-spacing: 0; }
  .oz-proj__details { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .oz-project + .oz-project { margin-top: var(--space-24); }
  .oz-hero__foot { margin-top: var(--space-12); }
  .oz-contact__k { margin-bottom: var(--space-1); }
  .oz-footer { margin-top: var(--space-24); }
}
@media (max-width: 640px) {
  :root { --oz-margin: 20px; }
  .oz-hero { padding-top: var(--space-16); }
  .oz-header__nav { gap: var(--space-6); }
  .oz-proj__details { grid-template-columns: 1fr; }
  .oz-contact__v { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .oz-motion [data-enter] { opacity: 1; transform: none; }
}