/* Hallmark · shape: Index-First · genre: modern-minimal · theme: Dusk (by request) · redesign: full
 * hero: Stage, head on the fog at left, the glass pane on the ridge at right · nav: wordmark and the search, slate glass off the photograph, letters strip on inner pages · footer: a mast, the wordmark beside two lines and the credit · imagery: photographs, library 1, natural · signature: one dream word read two ways in smoked glass over the fog · dusk: fog/periwinkle-apricot/glass
 * axes: dark/grotesk-sans/cool · posture: committed · contrast: pass · fold: pass · job: look up · v2.0.0 */
/* Hallmark · finish-review: subagent · 7 findings · 6 resolved 1 kept (footer copy is the old page's own words) · gap: none */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · weakest: P, a dictionary has little to argue; the argument is the split, every word read two ways, set as the hero pane */
/* Hallmark · waive 44c · the pane centres on the whole text column, search pill included · the search is the hero's action, so the glass pane balances against the head and the pill together, not the head alone */
/* Hallmark · waive 77 · the file render has no /api, so the rastgele rows and the tally stay empty; on the server the rows run three across, ruled, with short word names · the rastgele tabirler list is nine dream words, short by nature, kept as ruled rows rather than padded cards */
/* Hallmark · dismissed 29 · smoked glass with its lit edge over the dusk photograph, no glow or halo behind it · the Dusk theme names glass as the product surface */
/* Hallmark · dismissed 23 · the accent fill on .pane__bar i is a 2px progress line inside the glass pane · it shows how long until the next dream word, far under 5% of the screen */
/* Hallmark · dismissed 25 · .split__lead p and .readings p are one-sentence ledes, under the 28ch floor for those · each is a single line of description under its head */
/* Hallmark · answered F7 · the pill radius sits on controls (letter links, the search pill, the floating button) and on the 2px progress track, which reads as a line, not a box */
/* yazı tipleri kendi sunucumuzda (latin + latin-ext: Türkçe harfler) */
/* latin-ext */
@font-face {
  font-family: 'Wix Madefor Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/wix-display-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Wix Madefor Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/wix-display-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Wix Madefor Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/wix-display-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Wix Madefor Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/wix-display-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Wix Madefor Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/wix-text-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Wix Madefor Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/wix-text-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Wix Madefor Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/wix-text-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Wix Madefor Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/wix-text-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Wix Madefor Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/wix-text-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Wix Madefor Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/wix-text-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* tokens.css */
:root {
  color-scheme: dark;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(72% 0.15 27); --color-success: oklch(76% 0.13 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --color-paper: oklch(17.5% 0.014 268); --color-paper-2: oklch(21% 0.016 268); --color-paper-3: oklch(25% 0.017 268);
  --color-ink: oklch(96% 0.006 75); --color-ink-2: oklch(85% 0.010 262); --color-muted: oklch(70% 0.016 262);
  --color-rule: oklch(30% 0.016 266); --color-light: oklch(100% 0 0); --color-shade: oklch(10% 0.022 268);
  --color-accent: oklch(77% 0.10 274); --color-accent-ink: oklch(19% 0.035 274); --color-accent-hi: oklch(84% 0.085 274);
  --color-accent-deep: oklch(44% 0.13 274); --color-accent-soft: oklch(91% 0.038 274); --color-focus: oklch(80% 0.10 274);
  --color-accent-2: oklch(83% 0.095 62); --color-dusk: oklch(70% 0.12 330);
  --color-day-ink: oklch(22% 0.022 268); --color-day-muted: oklch(38% 0.022 266); --color-fog: oklch(94% 0.012 70);
  --color-well: oklch(95.5% 0.008 75); --color-well-2: oklch(92% 0.010 75); --color-well-ink: oklch(21% 0.016 268); --color-well-muted: oklch(47% 0.016 265); --color-well-rule: oklch(87.5% 0.009 75); --color-card: oklch(99.5% 0.003 75);
  --glass: oklch(22% 0.018 268 / 0.58); --glass-blur: 22px;
  --glass-hi: inset 0 1px 0 oklch(100% 0 0 / 0.10), inset 0 0 0 1px oklch(100% 0 0 / 0.06);
  --shadow-card: 0 1px 0 oklch(100% 0 0 / 0.06) inset, 0 40px 80px -32px oklch(8% 0.02 268 / 0.7);
  --font-display: "Wix Madefor Display", ui-sans-serif, system-ui, sans-serif; --font-body: "Wix Madefor Text", ui-sans-serif, system-ui, sans-serif;
  --radius-card: 18px; --radius-inner: 10px; --radius-pill: 999px; --rule-hair: 1px;
  --tracking-display: -0.022em; --display-weight: 500;
}

/* base.css */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
/* photographs: natural con=4 vib=6 */
[data-slot] > img { filter: contrast(1.04) saturate(1.03); }

:root { --nav-h: 64px; --strip-h: 52px; }
body { font-size: 1.0625rem; }

/* chrome */
.top { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: color-mix(in oklab, var(--color-paper) 74%, transparent); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35); backdrop-filter: blur(var(--glass-blur)) saturate(1.35); box-shadow: inset 0 -1px 0 var(--color-rule); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.is-home .top:not(.is-off) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; color: var(--color-day-ink); }
.nav { display: flex; align-items: center; gap: var(--space-lg); min-height: var(--nav-h); }
.logo { font: 600 var(--text-lg)/1 var(--font-display); letter-spacing: var(--tracking-display); text-decoration: none; white-space: nowrap; border-radius: var(--radius-inner); }
.logo span { color: var(--color-accent); }
.is-home .top:not(.is-off) .logo span { color: var(--color-accent-deep); }
.nav-search { flex: 1; display: flex; justify-content: flex-end; min-width: 0; }
.nav-search .search { width: 100%; max-width: 560px; }
.letters { display: flex; gap: var(--space-2xs); min-height: var(--strip-h); align-items: center; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.letters::-webkit-scrollbar { display: none; }
.is-home .letters { display: none; }
.letters a { flex-shrink: 0; display: inline-grid; place-items: center; min-width: 36px; min-height: 36px; padding: 0 var(--space-xs); border-radius: var(--radius-pill); color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.letters a:hover { color: var(--color-ink); background: color-mix(in oklab, var(--color-light) 6%, transparent); }
.letters a:active { background: color-mix(in oklab, var(--color-light) 10%, transparent); }
.letters a.on { background: var(--color-accent); color: var(--color-accent-ink); }

/* the search: one pill, field and button */
.search { display: flex; align-items: center; gap: var(--space-2xs); padding: var(--space-2xs); border: 1px solid var(--color-muted); border-radius: var(--radius-pill); background: var(--glass); color: var(--color-ink); }
.search input { flex: 1; min-width: 0; text-overflow: ellipsis; min-height: 44px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: transparent; color: inherit; font-size: var(--text-md); }
.search input::placeholder { color: var(--color-muted); opacity: 1; }
.search input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; }
.search input::-webkit-search-cancel-button { cursor: pointer; }
.search .btn { min-height: 44px; }
.search--day { border-color: var(--color-day-muted); background: color-mix(in oklab, var(--color-fog) 86%, transparent); color: var(--color-day-ink); box-shadow: 0 0 0 1px var(--color-fog), 0 24px 48px -28px var(--color-shade); }
.search--day input { min-height: 52px; font-size: var(--text-lg); }
.search--day input::placeholder { color: var(--color-day-muted); }
.search--day input:focus-visible { outline-color: var(--color-accent-deep); }
.search--day .btn { min-height: 52px; }

.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); font: 600 0.9375rem/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-light) 35%, transparent); transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) 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: 2px; }
.search--day .btn:focus-visible { outline-color: var(--color-accent-deep); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.link { color: var(--color-accent-hi); font-weight: 500; white-space: nowrap; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--color-accent) 45%, transparent); border-radius: 4px; transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out); }
.link:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }

/* hero */
.hero { position: relative; isolation: isolate; display: grid; align-items: center; min-height: max(640px, 90svh); margin-top: calc(var(--nav-h) * -1); padding-block: calc(var(--nav-h) + var(--space-xl)) var(--space-3xl); color: var(--color-day-ink); }
.hero__photo { position: absolute; inset: 0; z-index: 0; margin: 0; overflow: hidden; background: var(--color-paper-2); }
.hero__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; filter: contrast(1.04) saturate(1.03); }
.hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, color-mix(in oklab, var(--color-fog) 80%, transparent) 0, transparent calc(var(--nav-h) * 1.8)), radial-gradient(ellipse 58% 66% at 22% 54%, color-mix(in oklab, var(--color-fog) 82%, transparent), transparent 80%), linear-gradient(to bottom, transparent 50%, color-mix(in oklab, var(--color-paper) 60%, transparent) 78%, var(--color-paper) 96%); }
.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; }
.hero__text { grid-column: 1 / span 6; display: grid; gap: var(--space-lg); }
.hero h1 { font-size: clamp(2.75rem, 4.4vw + 0.5rem, 4.75rem); line-height: 1.02; max-width: 14ch; }
.hero__lede { max-width: 28ch; color: var(--color-day-muted); font-size: var(--text-lead); line-height: 1.45; }
.hero__text .search { max-width: 34rem; margin-top: var(--space-xs); }

.glass { background: var(--glass); border-radius: var(--radius-card); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35); backdrop-filter: blur(var(--glass-blur)) saturate(1.35); box-shadow: var(--glass-hi), var(--shadow-card); }
.pane { grid-column: 7 / span 5; display: grid; gap: var(--space-md); padding: var(--space-lg); color: var(--color-ink); animation: rise 0.7s var(--ease-out) both; }
.pane__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); }
.pane h2 { font-size: var(--text-2xl); max-width: none; }
.pane dl { display: grid; margin: 0; border-top: 1px solid color-mix(in oklab, var(--color-light) 7%, transparent); }
.pane dl > div { display: grid; gap: var(--space-2xs); padding-block: var(--space-md); }
.pane dl > div + div { border-top: 1px solid color-mix(in oklab, var(--color-light) 7%, transparent); }
.pane dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.pane dd { margin: 0; color: var(--color-ink-2); line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.pane dl.is-swap { animation: sisten 0.9s var(--ease-out) both; }
.blur { display: inline-block; }
.blur span { display: inline-block; animation: sisten 0.8s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms); }
.pane__foot { display: flex; align-items: center; gap: var(--space-md); }
.pane__bar { position: relative; flex: 1; height: 2px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-light) 10%, transparent); overflow: hidden; }
.pane__bar i { position: absolute; inset: 0; background: var(--color-accent); transform-origin: left center; animation: ilerle 9s linear both; }
.pane__bar.is-paused i { animation-play-state: paused; }
.pane__toggle { min-height: 36px; padding: 0 var(--space-md); border: 1px solid color-mix(in oklab, var(--color-light) 14%, transparent); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-light) 4%, transparent); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.pane__toggle:hover { background: color-mix(in oklab, var(--color-light) 9%, transparent); color: var(--color-ink); }
.pane__toggle:active { background: color-mix(in oklab, var(--color-light) 13%, transparent); }
.pane__toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.pane__toggle:disabled { opacity: 0.55; cursor: not-allowed; }
.pane__toggle[aria-pressed="true"] { color: var(--color-accent-hi); }

/* the photograph drifts like slow fog; the pause in the pane stops it too */
.hero__photo > img { animation: suzul 48s var(--ease-in-out) infinite alternate; transform-origin: 40% 60%; }
.hero:has(.pane__bar.is-paused) .hero__photo > img { animation-play-state: paused; }

/* sections surface once, as if out of the fog */
.js .reveal { opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), filter 0.7s var(--ease-out); transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; filter: none; }
/* opacity only: a transform or filter here would pin the fixed .fab to the page instead of the screen */
.page { animation: beli 0.5s var(--ease-out) both; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes sisten { from { opacity: 0; filter: blur(8px); transform: translateY(6px); } }
@keyframes beli { from { opacity: 0; } }
@keyframes ilerle { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes suzul { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(-2%, -1%, 0); } }
@media (prefers-reduced-motion: reduce) { .pane, .pane dl.is-swap, .blur span, .page, .hero__photo > img, .pane__bar i { animation: none; } .js .reveal { opacity: 1; transform: none; filter: none; transition: none; } .pane__toggle, .btn, .top, .letters a, .link, .row { transition: none; } }

/* home sections */
.sec { padding-block: var(--section-gap-s); }
.sec__head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.sec__head p { color: var(--color-muted); }
.abc { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.abc a { display: grid; gap: var(--space-2xs); padding: var(--space-md) var(--space-sm) var(--space-lg); border-bottom: 1px solid var(--color-rule); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.abc a:hover { background: var(--color-paper-2); }
.abc a:active { background: var(--color-paper-3); }
.abc b { font: 500 var(--text-3xl)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.abc small { font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }

.rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg) var(--space-2xs); border-top: 1px solid var(--color-rule); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.row span { font: 500 var(--text-title)/1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.row:hover { color: var(--color-accent-hi); }

.sec--split { background: var(--color-paper-2); padding-block: var(--section-gap); }
.split__lead { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.split__lead p { color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.45; max-width: 40ch; }
.readings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.readings > li { display: grid; align-content: start; gap: var(--space-xs); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.readings h3 { font-size: var(--text-section); max-width: none; }
.readings p { color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.45; max-width: 32ch; }
.tally { display: grid; grid-template-columns: repeat(2, max-content); margin: var(--space-2xl) 0 0; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.tally > div { display: flex; flex-direction: column-reverse; padding-inline: var(--space-lg); border-left: 1px solid var(--color-rule); }
.tally > div:first-child { padding-left: 0; border-left: 0; }
.tally dd { margin: 0; font: 500 var(--text-display-s)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.tally dt { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }

/* inner pages */
.page { padding-block: var(--space-xl) var(--section-gap-s); }
.crumb ol { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0 0 var(--space-lg); padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-muted); }
.crumb li + li::before { content: "/"; margin-inline-end: var(--space-xs); color: var(--color-muted); }
.crumb a { text-decoration: none; border-radius: 4px; }
.crumb a:hover { color: var(--color-ink); text-decoration: underline; }
.page h1 { font-size: var(--text-display-s); max-width: 24ch; }
.count { margin-top: var(--space-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.page__head { margin-bottom: var(--space-xl); }

.words { columns: 15rem; column-gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.words li { break-inside: avoid; }
.words a { display: block; padding: var(--space-xs) var(--space-2xs); border-top: 1px solid var(--color-rule); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.words a:hover { color: var(--color-accent-hi); }

.hits { display: grid; margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.hits a { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); text-decoration: none; }
.hits a:hover h3 { color: var(--color-accent-hi); }
.hits h3 { font-size: var(--text-lg); }
.hits p { color: var(--color-ink-2); max-width: 70ch; }
.sub { margin-top: var(--space-3xl); font-size: var(--text-2xl); }
mark { background: color-mix(in oklab, var(--color-accent-2) 28%, transparent); color: var(--color-ink); border-radius: 3px; padding-inline: var(--space-3xs); }

.layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.layout > article { grid-column: 1 / span 8; min-width: 0; }
.layout > aside { grid-column: 10 / span 3; position: sticky; top: calc(var(--nav-h) + var(--strip-h) + var(--space-lg)); }
.meta { margin-top: var(--space-sm); color: var(--color-muted); }
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: var(--space-xl) 0 0; padding-block: var(--space-sm); border-block: 1px solid var(--color-rule); }
.tabs a { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 40px; color: var(--color-muted); font-weight: 500; text-decoration: none; border-radius: 4px; transition: color var(--dur-short) var(--ease-out); }
.tabs a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px var(--color-muted); }
.tabs a:hover { color: var(--color-ink); }
.tabs a[aria-current="true"] { color: var(--color-ink); }
.tabs a[aria-current="true"]::before { background: var(--color-accent); box-shadow: none; }
.bolum { scroll-margin-top: calc(var(--nav-h) + var(--strip-h) + var(--space-lg)); padding-top: var(--space-2xl); }
.bolum + .bolum { margin-top: var(--space-2xl); border-top: 1px solid var(--color-rule); }
.sb { font-size: var(--text-2xl); }
.bolum-not { margin: var(--space-xs) 0 var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.body { max-width: 68ch; }
.body p { margin: 0 0 var(--space-md); line-height: 1.7; }
.body b { font-weight: 600; color: var(--color-ink); }
.body h2 { max-width: none; margin: var(--space-xl) 0 var(--space-sm); font-size: var(--text-xl); line-height: 1.25; }
.body h3 { margin: var(--space-lg) 0 var(--space-xs); font: 600 var(--text-md)/1.4 var(--font-body); letter-spacing: 0; color: var(--color-ink-2); }
.body ul { margin: 0 0 var(--space-md); padding-left: var(--space-lg); }
.body li { margin-bottom: var(--space-2xs); line-height: 1.65; }
.body li::marker { color: var(--color-muted); }
aside h2 { font: 500 var(--text-sm)/1.4 var(--font-body); letter-spacing: 0; color: var(--color-muted); margin-bottom: var(--space-sm); }
aside a { display: block; padding: var(--space-xs) 0; border-top: 1px solid var(--color-rule); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
aside a:hover { color: var(--color-accent-hi); }
.yorumlar { max-width: 68ch; }
.ruya-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); }

/* floating action: stays on screen and drifts gently, like something half-remembered */
.fab { position: fixed; right: var(--gutter); bottom: var(--space-xl); z-index: var(--z-sticky); display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; cursor: pointer; box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-light) 35%, transparent), 0 18px 40px -16px var(--color-shade); animation: suzul-fab 3.6s var(--ease-in-out) infinite alternate; transition: background-color var(--dur-short) var(--ease-out); }
.fab::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-ink); animation: nefes 3.6s var(--ease-in-out) infinite alternate; }
.fab:hover { background: var(--color-accent-hi); animation-play-state: paused; }
.fab:hover::before, .fab:focus-visible::before { animation-play-state: paused; }
.fab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; animation-play-state: paused; }
.fab:active { transform: translateY(1px); }
.fab:disabled { opacity: 0.55; cursor: not-allowed; }
@keyframes suzul-fab { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes nefes { from { opacity: 0.45; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
.page:has(.fab) { padding-bottom: var(--space-4xl); }

.ruya-dialog { width: min(680px, calc(100% - 2 * var(--space-md))); max-height: calc(100dvh - 2 * var(--space-lg)); padding: var(--space-xl); border: 0; border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); box-shadow: var(--glass-hi), var(--shadow-card); overflow: auto; }
.ruya-dialog[open] { animation: sisten 0.45s var(--ease-out) both; }
.ruya-dialog::backdrop { background: color-mix(in oklab, var(--color-shade) 72%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ruya-dialog__bas { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.ruya-dialog h2 { font-size: var(--text-2xl); }
.kapat { min-height: 40px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.kapat:hover { background: var(--color-paper-3); color: var(--color-ink); }
.kapat:active { background: var(--color-paper); }
.kapat:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.kapat:disabled { opacity: 0.55; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .fab, .fab::before, .ruya-dialog[open] { animation: none; } }
.alan { display: grid; gap: var(--space-xs); align-content: start; min-width: 0; }
.alan--genis, .gonder { grid-column: 1 / -1; }
.alan label { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }
.alan label span { margin-inline-start: var(--space-2xs); color: var(--color-muted); font-weight: 400; }
.ipucu { color: var(--color-muted); font-size: var(--text-sm); }
.alan input, .alan textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-inner); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); line-height: 1.5; transition: border-color var(--dur-short) var(--ease-out); }
.alan textarea { min-height: 200px; resize: vertical; }
.alan input:hover, .alan textarea:hover { border-color: var(--color-ink-2); }
.alan input:focus-visible, .alan textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; }
.alan [aria-invalid="true"] { border-color: var(--color-error); }
.alan input:disabled, .alan textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.alt { display: flex; justify-content: space-between; gap: var(--space-md); }
.yardim { min-height: 1lh; color: var(--color-error); font-size: var(--text-sm); }
.sayac { flex-shrink: 0; color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.sayac.tamam { color: var(--color-accent-hi); }
.tuzak { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.gonder { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.btn[aria-busy="true"] { cursor: progress; }
.durum { color: var(--color-ink-2); }
.durum.ok { color: var(--color-success); }
.durum.hata { color: var(--color-error); }
.yorum-bas { margin: var(--space-2xl) 0 var(--space-md); font-size: var(--text-xl); }
.yorum-bas span { color: var(--color-muted); }
.yorum-liste { display: grid; margin: 0; padding: 0; list-style: none; }
.yorum-liste > li { display: grid; gap: var(--space-sm); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.yorum-ust { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.yorum-ust b { color: var(--color-ink); font-weight: 600; font-size: var(--text-md); }
.yorum-metin { white-space: pre-line; line-height: 1.7; }
.yanit { display: grid; gap: var(--space-2xs); padding: var(--space-md); border-radius: var(--radius-inner); background: var(--color-paper-2); }
.yanit-bas { font-size: var(--text-sm); font-weight: 500; color: var(--color-accent-hi); }
.loading { padding-block: var(--space-4xl); text-align: center; color: var(--color-muted); }
.empty { margin-top: var(--space-lg); color: var(--color-muted); }

/* footer */
.foot { background: var(--color-shade); color: var(--color-muted); font-size: var(--text-sm); }
.foot .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); padding-block: var(--space-2xl); align-items: end; }
.foot__mark { grid-column: 1 / span 6; font: 500 var(--text-3xl)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.foot__lines { grid-column: 8 / span 5; display: grid; gap: var(--space-2xs); }
.foot a { color: var(--color-ink-2); border-radius: 4px; }
.foot a:hover { color: var(--color-ink); }

@media (max-width: 60rem) {
  .hero { min-height: auto; padding-bottom: var(--space-2xl); }
  .hero__text, .pane { grid-column: 1 / -1; }
  .hero__scrim { background: linear-gradient(to bottom, color-mix(in oklab, var(--color-fog) 72%, transparent) 0%, color-mix(in oklab, var(--color-fog) 55%, transparent) 46%, var(--color-paper) 100%); }
  .rows { grid-template-columns: minmax(0, 1fr); }
  .abc { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .readings { grid-template-columns: minmax(0, 1fr); }
  .layout > article, .layout > aside { grid-column: 1 / -1; position: static; }
  .hits a { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .ruya-form { grid-template-columns: minmax(0, 1fr); }
  .ruya-dialog { padding: var(--space-lg) var(--space-md); }
  .fab { right: var(--space-md); bottom: var(--space-md); }
  .foot__mark, .foot__lines { grid-column: 1 / -1; }
  .sec__head { flex-direction: column; align-items: start; }
}
@media (max-width: 40rem) {
  .nav { gap: var(--space-sm); }
  .logo { font-size: var(--text-md); }
  .nav-search .btn { display: none; }
  .search--day .btn { padding-inline: var(--space-md); }
  .abc b { font-size: var(--text-2xl); }
}

/* sunucuda üretilen sayfalar: özgün yazılmış kelimeler, derleme düğmesi, bilgi sayfaları */
.ozet { margin: var(--space-md) 0 var(--space-lg); font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink); max-width: 62ch; }
.uyari { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.derleme { margin-top: var(--space-xl); }
.btn--ikincil { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-muted); }
.btn--ikincil:hover { background: color-mix(in oklab, var(--color-light) 6%, transparent); }
.words a.ozgun { color: var(--color-ink); font-weight: 600; }
.bilgi { max-width: 68ch; }
.bilgi .body h2 { margin-top: var(--space-xl); }
.foot__lines a { color: inherit; }
.ilgili { margin-top: var(--space-xl); }
.ilgili .words { columns: 12rem; }
.ana-konu { margin: var(--space-md) 0; padding: var(--space-sm) var(--space-md); border-left: 2px solid var(--color-muted); color: var(--color-muted); max-width: 62ch; }
.ana-konu a { color: var(--color-ink); }
.bolum h3[id] { scroll-margin-top: 6rem; }