/* Hallmark · shape: custom (Masa: one desk photograph as the whole first screen) · genre: atmospheric · theme: Refract tokens, custom direction (by request: "sıradışı") · job: listen · draw: none
 * hero: Poster (full-bleed desk photo, head on its calm left) · nav: floating pill · footer: mast · imagery: generated stills (GPT, user-approved) for the desk, product video on the phone · signature: the desk lit by Istanbul's real hour, the phone playing the latest video on its tilted screen, and the desk staying under the whole page out of focus while its notes, notebook and envelope become the sections · refract: light only in the photo
 * axes: photo/grotesk-sans/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5 · weakest: E, everything rests on the photographs matching across four hours; coordinates live in icerik.json so a re-shoot is one edit */
/* Hallmark · waive 77 · the contact close is one head and one mailto link set at display size · the address is the action this personal page ends on, as on the live site */
/* Hallmark · dismissed 46a · the logos are the tools Ömür uses and named himself, stuck on his own notebook and flipped through on the phone, not a client or press wall */
/* Hallmark · answered F7 · the nav is a floating pill, the light bar and the object hints are controls and their labels over the desk photo */
/* Hallmark · dismissed F4 · Sabah, Öğle, Akşam, Gece are one segmented control; the filled one is the pressed state, not a second action */
/* Hallmark · dismissed 29 · the night glow is the phone screen lighting the dark desk, the photo's only cold light, not decoration */
/* Hallmark · dismissed 40 · .desk text sits on the desk photograph, not on its paper fallback; checked per hour on the render shots with a wash behind the head */
@import url("./tokens.css?v=d513d98e");
@import url("./base.css?v=d513d98e");

/* ---------- skip link ---------- */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 48px; padding: 0 var(--space-lg);
  border: 0; border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--color-accent-ink);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-light) 45%, transparent), var(--shadow-card);
  font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.btn:hover { background: var(--color-accent-hi); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--clear {
  background: color-mix(in oklab, var(--color-light) 82%, transparent); color: var(--color-ink);
  box-shadow: var(--edge-light), 0 0 0 1px var(--color-rule), var(--shadow-card);
}
.btn--clear:hover { background: var(--color-light); transform: translateY(-2px); box-shadow: var(--edge-light), 0 0 0 1px var(--color-rule), var(--shadow-cast); }
.btn--clear:active { transform: translateY(0); }
.btn--nav { min-height: 44px; padding: 0 var(--space-md); box-shadow: var(--edge-light), 0 0 0 1px var(--color-rule); }

/* ---------- floating pill nav ---------- */
.nav-wrap { position: fixed; inset: var(--space-md) 0 auto; z-index: var(--z-sticky-nav); display: flex; justify-content: center; padding-inline: var(--space-md); pointer-events: none; }
.nav {
  pointer-events: auto; display: flex; align-items: center; gap: var(--space-lg);
  width: 100%; max-width: 720px; min-height: 64px; padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-lg);
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--color-light) 86%, transparent);
  box-shadow: var(--edge-light), 0 0 0 1px var(--color-rule-2), var(--shadow-card);
}
.wordmark { font: 400 var(--text-lg)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.nav__links { display: flex; gap: var(--space-lg); margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav__links a { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.nav__links a:hover { color: var(--color-accent); }
.wordmark:focus-visible, .nav__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--space-2xs); }

/* ---------- the desk ---------- */
.desk {
  position: relative; isolation: isolate; overflow: hidden;
  height: 100dvh; min-height: 560px; container-type: size;
  background: var(--color-paper-3); color: var(--desk-ink);
}
.desk__stage {
  --r: 1.7778;
  position: absolute; left: 50%; top: 50%; z-index: 0;
  width: max(100cqw, 100cqh * var(--r)); height: max(100cqh, 100cqw / var(--r));
  transform: translate(-50%, -50%);
}
.desk__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.desk__photo--next { opacity: 0; transition: opacity 700ms var(--ease-in-out); }
.desk__photo--next.is-in { opacity: 1; }

/* the phone's screen: a 540 × 960 box projected onto the four corners in the photo */
.desk__screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; border-radius: 46px; background: var(--color-ink); }
/* the notebook page: logo stickers projected onto the photo's left page, multiplied so they take the hour's light */
.desk__page { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; mix-blend-mode: multiply; }
.stickers { list-style: none; margin: 0; padding: var(--space-md) var(--space-xs); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md) var(--space-sm); place-items: center; }
.stickers li { --tilt: -4deg; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 20px; background: var(--sticker); box-shadow: var(--sticker-shadow); transform: rotate(var(--tilt)); }
.stickers li:nth-child(2n) { --tilt: 5deg; }
.stickers li:nth-child(3n) { --tilt: -2deg; }
.stickers li:nth-child(5) { --tilt: 7deg; }
.stickers img { width: 46px; height: 46px; }
.stickers img[src$=".png"] { width: 100%; height: 100%; border-radius: inherit; }
/* the phone: after each pass of the video the screen flips through the same tools */
.screen__logos { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; background: var(--color-paper); opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.desk__screen.is-logos .screen__logos { opacity: 1; }
.screen__logos li { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-xl); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.screen__logos li.is-on { opacity: 1; }
.screen__logos img { width: 200px; height: 200px; }
.screen__logos img[src$=".png"] { border-radius: 44px; }
.screen__logos span { font: 400 58px/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.desk__screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.desk__glare {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(118deg, color-mix(in oklab, var(--color-light) 22%, transparent) 0%, transparent 34%, transparent 62%, color-mix(in oklab, var(--color-light) 10%, transparent) 100%);
}
.desk[data-saat="gece"] .desk__screen { box-shadow: 0 0 120px 40px var(--screen-glow); }

/* objects on the desk are links */
.spot { position: absolute; z-index: 2; display: block; border-radius: var(--radius-inner); text-decoration: none; }
html:not(.js) .spot { display: none; } /* positioned by masa.js; without it the nav carries the same links */
.spot__hint {
  position: absolute; left: 50%; bottom: calc(100% + var(--space-xs));
  padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill);
  background: var(--desk-hint); color: var(--desk-glass-ink); box-shadow: var(--shadow-card);
  font-size: var(--text-sm); font-weight: 500; white-space: nowrap;
  transform: translate(-50%, 0);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
  pointer-events: none;
}
.js .spot__hint { opacity: 0; transform: translate(-50%, 4px); }
.js .spot:hover .spot__hint, .js .spot:focus-visible .spot__hint { opacity: 1; transform: translate(-50%, 0); }
.spot:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.spot--phone .spot__hint { bottom: auto; top: calc(100% + var(--space-xs)); }

/* the head sits on the calm wood above the notebook (top-left of every hour's photo) */
.desk__copy { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: flex; flex-direction: column; justify-content: flex-start; padding-top: clamp(112px, 21dvh, 260px); }
.desk__copy > * { position: relative; pointer-events: auto; }
/* a soft wash of the hour's own light behind the head, so window-shadow stripes never cut the type */
.desk__copy::before {
  content: ""; position: absolute; left: 0; top: 0; width: 62%; height: 78%; pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 30% 52%, var(--desk-wash) 0%, transparent 72%);
}
.desk__lead { max-width: 30ch; margin-top: var(--space-lg); font-size: var(--text-lead); line-height: 1.4; color: var(--desk-ink-2); transition: color 700ms var(--ease-in-out); }
.desk h1 { max-width: 15ch; font-size: min(clamp(2.75rem, 4.6vw + 0.5rem, 6rem), 8.4dvh); line-height: 1.0; color: var(--desk-ink); transition: color 700ms var(--ease-in-out); }

.desk__bar {
  position: relative; z-index: 3; align-self: flex-start; margin-top: var(--space-lg);
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md); border-radius: var(--radius-pill);
  background: var(--desk-glass); color: var(--desk-glass-ink); box-shadow: var(--shadow-card);
}
html:not(.js) .desk__bar { display: none; }
.desk__clock { font-size: var(--text-sm); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seg { display: flex; gap: var(--space-3xs); }
.seg button, .desk__pause {
  min-height: 44px; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-pill);
  background: transparent; color: inherit; font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.seg button:hover, .desk__pause:hover { background: color-mix(in oklab, var(--desk-glass-ink) 10%, transparent); }
.seg button[aria-pressed="true"] { background: var(--desk-glass-ink); color: var(--desk-glass); }
.seg button:active, .desk__pause:active { transform: translateY(1px); }
.seg button:focus-visible, .desk__pause:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- the desk stays: a defocused copy of the hour's photo sits behind the whole page ---------- */
.scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--scene-base); }
.scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene::after { content: ""; position: absolute; inset: 0; background: var(--scene-veil); }
.desk { z-index: 1; }
main > section:not(.desk), .mast { position: relative; z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
  .js .desk { position: sticky; top: 0; z-index: 0; }
  .js .scene { z-index: 1; opacity: var(--focus, 0); will-change: opacity; }
  .js .desk__copy { opacity: calc(1 - var(--focus, 0) * 1.8); }
}
.method, .notebook, .channels, .contact, .mast { --color-ink: var(--scene-ink); --color-ink-2: var(--scene-ink-2); --color-muted: var(--scene-ink-2); --color-rule: var(--scene-rule); color: var(--scene-ink); }
.sheet, .contact__inner { --color-ink: var(--paper-ink); --color-ink-2: var(--paper-ink-2); --color-muted: var(--paper-muted); --color-rule: var(--sheet-rule); color: var(--paper-ink); }
.channels .btn--clear { color: var(--paper-ink); }

/* ---------- method: three sticky notes ---------- */
.method { padding-block: var(--section-gap) var(--section-gap-s); }
.head-block { display: grid; gap: var(--space-md); margin-bottom: var(--space-3xl); }
.head-block h2, .head-block .lead { margin: 0; }
.head-block .lead { color: var(--color-ink-2); }
.rules { list-style: none; margin: 0; padding: 0; counter-reset: rule; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.rule { --tilt: -1.6deg; --drop: 0px; counter-increment: rule; display: flex; flex-direction: column; gap: var(--space-md); min-height: clamp(300px, 27vw, 400px); padding: var(--space-xl) var(--space-lg) var(--space-lg); border-radius: var(--radius-paper); background: var(--note); color: var(--note-ink); box-shadow: var(--shadow-object); transform: translateY(var(--drop)) rotate(var(--tilt)); }
.rule:nth-child(2) { --tilt: 1.2deg; --drop: var(--space-2xl); }
.rule:nth-child(3) { --tilt: -0.7deg; --drop: var(--space-lg); }
.rule h3 { margin: 0; max-width: none; font: 400 clamp(1.75rem, 2.3vw + 0.5rem, 2.75rem)/1.05 var(--font-display); letter-spacing: var(--tracking-display); color: var(--note-ink); overflow-wrap: break-word; min-width: 0; }
.rule h3::before { content: counter(rule) ". "; }
.rule p { margin: 0; max-width: 30ch; font-size: var(--text-lg); line-height: 1.4; color: var(--note-ink-2); }
.logos { list-style: none; margin: auto 0 0; padding: var(--space-md) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-md); border-top: var(--rule-hair) solid var(--note-rule); }
.logos li { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; font-weight: 500; }
.logos img { flex: none; width: 22px; height: 22px; mix-blend-mode: multiply; }
.logos img[src$=".png"] { border-radius: 5px; mix-blend-mode: normal; }
.limit { margin: auto 0 0; padding-left: var(--space-md); border-left: 2px solid var(--color-pencil); }
.limit p { max-width: none; font: 300 var(--text-xl)/1.3 var(--font-display); color: var(--note-ink); }

/* ---------- notebook: one ruled sheet ---------- */
.notebook { padding-block: var(--section-gap-s); }
.sheet { --margin-x: clamp(28px, 6vw, 104px); padding: var(--space-3xl) var(--space-2xl) var(--space-3xl) calc(var(--margin-x) + var(--space-xl)); border-radius: var(--radius-paper); box-shadow: var(--shadow-object); transform: rotate(-0.5deg); background: linear-gradient(to right, transparent var(--margin-x), var(--sheet-margin) var(--margin-x), var(--sheet-margin) calc(var(--margin-x) + 1px), transparent calc(var(--margin-x) + 1px)), var(--sheet); }
.notebook__title { display: inline-block; margin: 0 0 var(--space-2xl); font-size: var(--text-title); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.24em; }
.exp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: end; }
.exp__no { display: flex; flex-direction: column; gap: var(--space-xs); margin: 0; max-width: none; }
.exp__word { font: 400 var(--text-title)/1 var(--font-display); }
.exp__num { font: 300 clamp(4.5rem, 11.5vw, 11.5rem)/0.85 var(--font-display); letter-spacing: -0.05em; }
.exp__log { margin: 0; }
.exp__log > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-md); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.exp__log > div:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.exp__log dt { color: var(--color-muted); }
.exp__log dd { margin: 0; font-size: var(--text-lg); line-height: 1.4; }
.exp__log a { color: var(--color-accent-hi); white-space: nowrap; }
.pencil { text-decoration: underline; text-decoration-color: var(--color-pencil); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.archive { width: 100%; margin-top: var(--space-3xl); border-collapse: collapse; text-align: left; }
.archive caption { padding-bottom: var(--space-md); text-align: left; font: 400 var(--text-title)/1.2 var(--font-display); }
.archive th, .archive td { padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-top: var(--rule-hair) solid var(--color-rule); font-weight: 400; vertical-align: top; }
.archive thead th { color: var(--color-muted); font-size: var(--text-sm); }
.archive tbody th { font-weight: 500; }

/* ---------- channels: big bare lanes on the blurred desk ---------- */
.channels { padding-block: var(--section-gap-s); }
.head-block--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; }
.lanes { list-style: none; margin: 0; padding: 0; }
.lane { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr) auto; align-items: center; gap: var(--space-2xs) var(--gap-columns); padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.lane:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.lane__name { grid-row: 1 / span 2; font: 300 clamp(2.75rem, 6.2vw, 6rem)/1 var(--font-display); letter-spacing: var(--tracking-display); overflow-wrap: break-word; min-width: 0; }
.lane__handle { grid-column: 2; align-self: end; font-size: var(--text-lg); font-weight: 500; }
.lane__what { grid-column: 2; align-self: start; color: var(--color-ink-2); }
.lane .btn { grid-column: 3; grid-row: 1 / span 2; }

/* ---------- contact: an envelope with Istanbul's time stamped on it ---------- */
.contact { padding-block: var(--section-gap-s) var(--section-gap); }
.contact__inner { container-type: inline-size; display: grid; gap: var(--space-xl); max-width: 1080px; margin-inline: auto; padding: var(--space-3xl) var(--space-2xl) var(--space-xl); border-radius: var(--radius-paper); background: var(--sheet); box-shadow: var(--shadow-object); transform: rotate(0.8deg); }
.contact h2 { margin: 0; max-width: 18ch; }
.contact__mail { justify-self: start; font: 300 clamp(1.25rem, 6.6cqw, 5rem)/1.05 var(--font-display); letter-spacing: var(--tracking-display); white-space: nowrap; color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.14em; transition: color var(--dur-short) var(--ease-out); }
.contact__dm { justify-self: start; color: var(--paper-ink); }
.contact__mail:hover { color: var(--color-accent-hi); }
.contact__mail:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.contact__stamp { justify-self: end; margin: var(--space-xl) 0 0; color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
html:not(.js) .contact__stamp { display: none; }

/* ---------- mast ---------- */
.mast { padding-block: var(--section-gap-s) var(--space-2xl); }
.mast__word { margin: 0; max-width: none; font: 300 clamp(3.5rem, 12vw, 11rem)/0.9 var(--font-display); letter-spacing: -0.04em; }
.mast__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-md) var(--space-xl); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.mast__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: 0; padding: 0; list-style: none; }
.mast__links a { color: inherit; text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.mast__links a:hover { text-decoration-color: currentColor; }
.mast__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.mast__legal { margin: 0; color: var(--color-ink-2); font-size: var(--text-sm); }

/* ---------- responsive ---------- */
@media (max-aspect-ratio: 3/4) {
  .desk__copy { justify-content: flex-start; padding-top: calc(var(--space-4xl) - var(--space-md)); }
  .desk h1 { font-size: clamp(2.5rem, 11vw, 4rem); }
  .desk__lead { font-size: var(--text-md); margin-top: var(--space-md); }
  .desk__bar { position: absolute; left: 50%; right: auto; bottom: var(--space-md); margin: 0; transform: translateX(-50%); padding-left: var(--space-sm); }
  .desk__clock { display: none; }
}
@media (max-width: 60rem) {
  .rules { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .rule { --drop: 0px; width: min(100%, 26rem); min-height: 0; }
  .rule:nth-child(2) { --drop: 0px; justify-self: end; }
  .rule:nth-child(3) { --drop: 0px; }
  .exp { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .head-block--split { grid-template-columns: minmax(0, 1fr); }
  .lane { grid-template-columns: minmax(0, 1fr) auto; }
  .lane__name, .lane__handle, .lane__what { grid-column: 1; grid-row: auto; }
  .lane .btn { grid-column: 2; grid-row: 1 / span 3; }
}
@media (max-width: 40rem) {
  .nav__links { display: none; }
  .nav { justify-content: space-between; }
  .sheet { padding: var(--space-2xl) var(--space-md) var(--space-2xl) calc(var(--margin-x) + var(--space-md)); transform: none; }
  .contact__inner { padding: var(--space-2xl) var(--space-lg) var(--space-lg); }
  .exp__log > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .archive thead { display: none; }
  .archive tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
  .archive th, .archive td { border: 0; padding: 0; }
  .archive tbody th { grid-column: 1 / -1; }
  .lane .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--space-xs); }
  .seg button, .desk__pause { padding: 0 var(--space-xs); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn--clear, .nav__links a, .mast__links a, .contact__mail, .seg button, .desk__pause, .spot__hint, .desk__photo--next, .desk__lead, .desk h1, .screen__logos, .screen__logos li { transition: none; }
  .btn--clear:hover, .btn:active, .seg button:active, .desk__pause:active { transform: none; }
  .spot__hint { transform: translate(-50%, 0); }
}