/* bilaxten.art — 2026-10-05 redesign.
 *
 * The page itself is neutral (paper grey / graphite, ink text, links in ink); colour comes from
 * the work: the hero is a live GLSL contour map (src/field.js) whose amber contour colour is also
 * the hover/focus accent. Uğur 2026-10-05: no blue; "biraz daha creative … shaderlar".
 * Type: Archivo, one family, its width axis does the hierarchy (condensed name, expanded
 * wordmark, normal text). No cards, no shadows, no gradients, no uppercase labels: the
 * voxel world in the hero is the one loud thing on the page.
 * Theme is chosen before first paint by the inline <head> script; the button is in src/main.js. */
:root {
  --bg: #ecebe7;
  --header-bg: rgba(236, 235, 231, 0.9);
  --ink: #18191b;
  --ink-2: #5a5c5f;
  --accent: #8a520f;
  --line: #aaa69c;
  --focus: #8a520f;
  --field-fallback: #d8d3bd;
  color-scheme: light;
}
:root[data-theme="dark"] {
  /* Taken from the night isohypses (src/field.js THEMES.dark), Uğur 2026-10-05: "izohipslerdeki
   * renkleri kullanabiliriz": olive-black ground, stone text, high-land muted text, amber lines. */
  --bg: #1b1d18;
  --header-bg: rgba(27, 29, 24, 0.9);
  --ink: #ece4cf;
  --ink-2: #a5987c;
  --accent: #f4be6a;
  --line: #5d5539;
  --focus: #f4be6a;
  --field-fallback: #30332a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* Sticky header covers in-page link targets otherwise. */
html { scroll-padding-top: 76px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  body, header#top { transition: background-color 0.6s ease, color 0.6s ease; }
}
body {
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--bg); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--accent); }
a:hover { color: var(--accent); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 20;
  padding: 8px 14px; background: var(--ink); color: var(--bg);
}
.skip-link:focus { top: 8px; }

/* Language: every visible text exists twice, as lang="tr" and lang="en" siblings; only the
 * active one is shown. `body` keeps <html lang> itself out of the match. Text that is the same
 * in both languages carries no lang (or lang="en-US"), so this exact match leaves it visible. */
html[data-lang="tr"] body [lang="en"],
html[data-lang="en"] body [lang="tr"] { display: none !important; }

/* ---------- header ---------- */
header#top {
  position: sticky; top: 0; z-index: 10;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.bar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 60px; }
/* The bar is a window onto the same map at its own position (src/field.js). */
#barField { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.wordmark {
  font-size: 18px; font-weight: 700;
  font-variation-settings: "wdth" 100;
  color: var(--ink); text-decoration: none;
}
nav { position: relative; display: flex; align-items: center; gap: 22px; white-space: nowrap; }
/* Active section: one amber line under the nav link of the section on screen; it slides from link
 * to link (src/main.js). Hidden over the hero. */
.nav-ink {
  position: absolute; bottom: -9px; left: 0; width: 0; height: 2px; background: var(--accent);
  opacity: 0; pointer-events: none;
  transition: left 0.35s cubic-bezier(0.6, 0, 0.3, 1), width 0.35s cubic-bezier(0.6, 0, 0.3, 1), opacity 0.25s ease;
}
.nav-ink.on { opacity: 1; }
nav a.here { color: var(--ink); }
nav a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
nav a:hover { color: var(--ink); }
/* CV download: a square framed button (the .btn frame) in the bar, kept on phones too. */
nav a.bar-cv { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; color: var(--ink); font-size: 13px; font-weight: 700; }
nav a.bar-cv:hover { color: var(--bg); }
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  background: none; border: 0; color: var(--ink-2); cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); }
/* Sun and moon share one cell; switching theme turns one into the other over the same 0.9 s
 * as the map's day/night crossfade. */
.theme-toggle svg { grid-area: 1 / 1; transition: transform 0.9s cubic-bezier(0.6, 0, 0.3, 1), opacity 0.5s ease; }
.theme-toggle .moon { opacity: 0; transform: rotate(-120deg) scale(0.3); }
:root[data-theme="dark"] .theme-toggle .sun { opacity: 0; transform: rotate(120deg) scale(0.3); }
:root[data-theme="dark"] .theme-toggle .moon { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .theme-toggle svg { transition: none; } }
.lang-switch { display: inline-flex; align-items: center; }
.lang-switch button {
  padding: 4px 3px; background: none; border: 0; cursor: pointer;
  font: 600 12px/1 "Archivo", system-ui, sans-serif;
  font-variation-settings: "wdth" 110;
  color: var(--ink-2); opacity: 0.7;
}
.lang-switch button + button::before { content: "/"; margin-right: 6px; font-weight: 400; opacity: 0.6; }
.lang-switch button:hover { opacity: 1; }
.lang-switch button[aria-pressed="true"] { color: var(--ink); opacity: 1; }

/* Page background: the isohypses continue below the hero as faint lines (src/field.js). Fixed
 * behind everything. */
#pageField {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  z-index: -1; pointer-events: none;
}

/* ---------- hero: a live contour map with the name in a map cartouche ---------- */
#hero { position: relative; height: clamp(440px, 66vh, 700px); border-bottom: 1px solid var(--line); }
#field {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  background: var(--field-fallback); cursor: crosshair;
}
.hero-inner { position: relative; height: 100%; pointer-events: none; }
.cartouche {
  position: absolute; left: 32px; bottom: 40px; max-width: 460px;
  padding: 23px 27px 25px; pointer-events: auto;
  background-color: var(--bg);
}
/* Frames (cartouche and buttons) are two pseudo-elements with real 1px borders: ::before holds
 * top + right, ::after bottom + left. Real borders snap to device pixels; the earlier 1px
 * gradients landed on fractional positions and came out 1-2 device px thick per side (measured
 * at 125% scaling, 2026-10-05). Drawing = growing ::before (top, then right) and then ::after
 * (bottom, then left). --frame is the line colour (amber while a button is pressed). */
.cartouche::before, .cartouche::after, .btn::before, .btn::after {
  content: ""; position: absolute; box-sizing: border-box; pointer-events: none;
  width: 100%; height: 100%; border: 1px solid transparent;
}
.cartouche::before, .btn::before { top: 0; left: 0; border-top-color: var(--frame, var(--ink)); border-right-color: var(--frame, var(--ink)); }
.cartouche::after, .btn::after { bottom: 0; right: 0; border-bottom-color: var(--frame, var(--ink)); border-left-color: var(--frame, var(--ink)); }
@media (prefers-reduced-motion: no-preference) {
  /* Page load: the frame draws while src/main.js types the text in (html.typed); text does not
   * wait for the box any more (Uğur 2026-10-06). Until typed is set the text stays hidden, so
   * a paint before main.js runs shows no flash; if the script never runs it fades in at 1s. */
  html.intro .cartouche::before { animation: draw-a 1.1s cubic-bezier(0.6, 0, 0.3, 1) both; }
  html.intro .cartouche::after { animation: draw-b 1.1s cubic-bezier(0.6, 0, 0.3, 1) both; }
  html.intro:not(.typed) .cartouche > *, html.intro:not(.typed) .bar a,
  html.intro:not(.typed) .lang-switch { animation: fade-in 0.5s 1s ease both; }
  /* Language switch: the frames redraw while the text re-types (Uğur 2026-10-05: "kutuları da
   * baştan oluşturalım"). html.redraw is set for a moment by src/main.js. */
  html.redraw .cartouche::before, html.redraw .btn::before { animation: draw-a 1.1s cubic-bezier(0.6, 0, 0.3, 1) both; }
  html.redraw .cartouche::after, html.redraw .btn::after { animation: draw-b 1.1s cubic-bezier(0.6, 0, 0.3, 1) both; }
}
@keyframes draw-a {
  0%       { width: 0; height: 0; opacity: 0; }
  1%       { opacity: 1; }
  25%      { width: 100%; height: 0; }
  50%, 100% { width: 100%; height: 100%; opacity: 1; }
}
@keyframes draw-b {
  0%, 50%  { width: 0; height: 0; opacity: 0; }
  51%      { opacity: 1; }
  75%      { width: 100%; height: 0; }
  100%     { width: 100%; height: 100%; opacity: 1; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
#hero h1 {
  margin: 0 0 10px;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.05;
  font-weight: 700;
  font-variation-settings: "wdth" 80;
}
/* 404: the map fills the screen under the bar. */
.hero-404 { height: calc(100vh - 61px) !important; border-bottom: 0; }
.cartouche .links { margin-top: 16px !important; }
.code-404 { margin: 0 0 6px; font-size: 44px; line-height: 1; font-weight: 700; font-variation-settings: "wdth" 75; color: var(--accent); font-variant-numeric: tabular-nums; }
.lede { margin: 0; font-size: 20px; line-height: 1.45; color: var(--ink); }
.cartouche { max-width: 420px; }

/* Language switch: characters of the new language appear left to right (src/main.js). */
.typing > span { opacity: 0; animation: type-in 0.22s ease-out forwards; }
@keyframes type-in { from { opacity: 0; } to { opacity: 1; } }

/* Live values under the cursor: map-label style (ink with a halo of the page colour), no box. */
.live {
  position: absolute; left: 32px; top: 26px; margin: 0;
  display: grid; grid-template-columns: max-content max-content; gap: 1px 14px;
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
  font-variation-settings: "wdth" 90;
  color: var(--ink);
  text-shadow: 0 0 2px var(--bg), 0 0 4px var(--bg), 0 0 8px var(--bg), 0 0 12px var(--bg);
  opacity: 0; transition: opacity 0.35s ease;
}
.live.on { opacity: 1; }
.live dt { font-weight: 500; }
.live dd { margin: 0; text-align: right; }

/* ---------- sections ---------- */
section h2 {
  margin: 0 0 28px;
  font-size: 26px; line-height: 1.15; font-weight: 700;
  font-variation-settings: "wdth" 85;
}
#work, #experience, #about { padding-top: 72px; padding-bottom: 24px; }

/* Work: entries are rows, name on the left, text on the right. The first one (the piece the
 * hero shows) is set larger; the others step down. */
.entry {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 32px;
  padding: 28px 0 32px;
  border-top: 1px solid var(--line);
}
.entry h3 {
  margin: 0; font-size: 26px; line-height: 1.15; font-weight: 700;
  font-variation-settings: "wdth" 85;
}
/* The last work row closes with the same rule, so About starts below a line too. */
.entry:last-of-type { border-bottom: 1px solid var(--line); }
.entry-lead h3 { font-size: 32px; font-variation-settings: "wdth" 80; }
.kind { margin: 6px 0 0; font-size: 15px; color: var(--ink-2); }
/* Screenshot of the piece under its name: a real view of the tool, not an illustration. */
.thumb { display: block; margin-top: 20px; max-width: 260px; }
.thumb img { display: block; width: 100%; height: auto; border-radius: 3px; }
/* The editor's own PNG export: the map on a transparent background, no frame. */
.thumb-cut { max-width: 240px; }
.thumb-cut img { border-radius: 0; }
/* The level editor's loop: a 16:9 clip in the row's thumbnail slot, its dark field kept in both themes. */
.thumb-video { max-width: 260px; }
.thumb video { display: block; width: 100%; height: auto; border-radius: 3px; background-color: var(--field-fallback); }
/* "Watch video": the long cut with music in a modal; Esc, Close or a click on the backdrop closes it. */
.reel {
  width: min(1100px, calc(100vw - 32px)); max-width: none; padding: 12px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.reel::backdrop { background: rgba(0, 0, 0, 0.75); }
.reel video { display: block; width: 100%; height: auto; background: #000; }
.reel .reel-close { display: flex; margin: 12px 0 0 auto; }
/* A society's emblem, not a screenshot: small, no frame. */
.thumb-logo { max-width: 72px; }
.thumb-logo img { border-radius: 0; }
.entry-body p { margin: 0 0 16px; max-width: 62ch; }
/* Experience bullets: a plain dot, no indent beyond it. */
.points { list-style: none; margin: 0 0 18px; padding: 0; max-width: 62ch; }
.points li { position: relative; padding-left: 18px; margin: 0 0 6px; }
.points li::before { content: "\2022"; position: absolute; left: 2px; color: var(--ink-2); }
.links { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 0 !important; }
/* Open buttons: the cartouche's square ink frame (pseudo-elements above), filled on hover,
 * amber and nudged down while pressed. */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border: 0; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none;
  background-color: transparent;
  transition: background-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.btn:hover { background-color: var(--ink); color: var(--bg); }
.btn:active {
  --frame: var(--accent);
  background-color: var(--accent); color: var(--bg);
  transform: translateY(1px) scale(0.97);
  transition-duration: 0.05s;
}

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 18px; font-size: 15px; }
.facts dt { color: var(--ink-2); }
.facts dd { margin: 0; }

.about-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px; }
.about-grid p { margin: 0; max-width: 62ch; }
.facts-side { align-content: start; margin: 4px 0 0; }

/* The page ends in one closing block: contact on the same grid as the work rows, the
 * colophon well below it. */
#contact { margin-top: 96px; padding-bottom: 48px; }
.contact-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 32px; }
.contact-row { align-items: baseline; padding-top: 32px; border-top: 1px solid var(--line); }
.contact-row h2 { margin: 0; }
/* One line per channel (e-mail, LinkedIn): address on the left, its buttons lined up on the right. */
.contact-list { display: grid; grid-template-columns: max-content auto; justify-content: start; align-items: center; gap: 16px 24px; }
.mail-text, .contact-text { display: inline-grid; font-size: 19px; font-weight: 600; overflow-wrap: anywhere; }
.mail-addr, .mail-done { grid-area: 1 / 1; transition: opacity 0.35s ease; }
.mail-addr { user-select: all; }
.mail-done { opacity: 0; pointer-events: none; }
.mail-text.copied .mail-addr { opacity: 0; }
.mail-text.copied .mail-done { opacity: 1; }
.mail-actions { display: inline-flex; gap: 10px; }
/* Contact buttons share one width so the rows line up. */
.contact-list .btn { min-width: 118px; justify-content: center; }
/* Small mark of where a button leads (Steam, LinkedIn, mail, copy, PDF): ink colour, so it follows
 * the theme and turns with the text on hover. */
.btn .ico { width: 15px; height: 15px; flex: none; }
button.btn { cursor: pointer; font-family: inherit; line-height: inherit; }
.colophon { margin: 72px 0 0; font-size: 14px; color: var(--ink-2); }

/* ---------- narrow screens ---------- */
@media (max-width: 860px) {
  #hero { height: auto; }
  #field { position: relative; height: 56vh; min-height: 320px; }
  .hero-inner { height: auto; }
  .cartouche { position: relative; left: auto; bottom: auto; margin: -64px 0 0; max-width: none; }
  .live { left: 20px; top: 16px; }
  .entry, .about-grid, .contact-row { grid-template-columns: 1fr; gap: 12px; }
  .contact-row h2 { grid-row: auto; margin-bottom: 4px; }
  .contact-list { grid-template-columns: 1fr; gap: 10px; }
  .contact-list .mail-actions { margin-bottom: 12px; }
  .entry-lead h3 { font-size: 28px; }
  .thumb { max-width: 100%; }
  .thumb-logo { max-width: 72px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  body { font-size: 16px; }
  .lede { font-size: 19px; }
}
@media (max-width: 700px) {
  nav { gap: 14px; }
}
/* With four sections, the CV button and the TR/EN switch the nav needs ~595 px: at 640 px and
 * below the header keeps the wordmark, CV, theme and language; the sections are one scroll away. */
@media (max-width: 640px) {
  nav a:not(.bar-cv) { display: none; }
}

/* ---------- case study (work/cartula) ----------
 * Same parts as the home page: the work-row grid (heading left, text right), .facts, .points,
 * .btn. Media are real captures from the tool: a hero still, pixel-exact stage maps, and short
 * muted loops (work/cartula/case.js plays them on screen, never under reduced motion). */
.case { padding-top: 64px; }
.case-head { max-width: 760px; padding-bottom: 40px; }
.case-head .kind { margin: 0 0 8px; }
.case-head h1 {
  margin: 0 0 18px;
  font-size: clamp(44px, 6vw, 64px); line-height: 1; font-weight: 700;
  font-variation-settings: "wdth" 80;
}
.case-lede { margin: 0 0 14px; max-width: 62ch; font-size: 20px; line-height: 1.45; }
.case-head > p:not(.case-lede):not(.kind):not(.links) { margin: 0 0 24px; max-width: 62ch; color: var(--ink-2); }
.case-head .facts { margin: 0 0 24px; }
.case figure { margin: 8px 0 24px; }
.case figure img, .case figure video {
  display: block; width: 100%; height: auto; border-radius: 3px;
  background-color: var(--field-fallback);
}
.case figcaption { margin-top: 8px; max-width: 62ch; font-size: 14px; color: var(--ink-2); }
.case-hero { margin: 0 0 56px !important; }
.case-row {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px;
  padding: 28px 0 16px; border-top: 1px solid var(--line);
}
.case-row h2 {
  margin: 0; font-size: 26px; line-height: 1.15; font-weight: 700;
  font-variation-settings: "wdth" 85;
}
.case-body p { margin: 0 0 16px; max-width: 62ch; }
.case-body .points { margin-bottom: 20px; }
.case-body .points li { margin-bottom: 10px; }
.case-steps { margin: 0 0 24px; padding-left: 26px; max-width: 62ch; }
.case-steps li { margin: 0 0 8px; padding-left: 4px; }
.case-steps li::marker { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.case code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86em; }
.case-note { padding-left: 14px; border-left: 2px solid var(--line); font-size: 15px; color: var(--ink-2); }
/* Pipeline stages: the tool's own 3 px-per-tile renders, kept pixel-sharp. */
.stage-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; }
.stage-strip figure { margin: 0; }
.stage-strip img { image-rendering: pixelated; border-radius: 2px; }
.stage-strip figcaption { margin-top: 6px; font-size: 13px; }
.case-numbers { margin: 8px 0 18px; }
.case-body .links { margin: 24px 0 0 !important; }
@media (max-width: 860px) {
  .case { padding-top: 40px; }
  .case-row { grid-template-columns: 1fr; gap: 12px; }
  .case-hero { margin-bottom: 40px !important; }
  .stage-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .case-lede { font-size: 19px; }
  .stage-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-numbers { grid-template-columns: 1fr; gap: 0; }
  .case-numbers dd { margin-bottom: 8px; }
}

/* ---- iletişim + linkler ---- */

/* Visually hidden, still read by screen readers and search (the page h1). */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }