/* self-hosted fonts (restored after polish strip) */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Inter-400-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Inter-400-italic-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;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Inter-600-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Inter-600-italic-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Inter-400-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Inter-400-normal-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/Inter-500-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/Inter-500-normal-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Inter-600-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Inter-600-normal-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/Inter-700-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/Inter-700-normal-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-400-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-400-italic-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-600-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-600-italic-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-400-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-400-normal-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-500-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-500-normal-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-600-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-600-normal-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-700-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-700-normal-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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/SpaceGrotesk-400-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/SpaceGrotesk-400-normal-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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/SpaceGrotesk-500-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/SpaceGrotesk-500-normal-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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/SpaceGrotesk-600-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/SpaceGrotesk-600-normal-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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/SpaceGrotesk-700-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/SpaceGrotesk-700-normal-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;
}

/* =========================================================================
   FILIGRAN — Efemera Konservasyon Atölyesi
   Technical-spec / instrument arayüzü. Koyu tema, ölçü kotları, kesim işaretleri.
   ========================================================================= */

:root {
  interpolate-size: allow-keywords;

  --bg: #0E1216;
  --surface: #161C22;
  --surface-2: #1C242C;
  --surface-3: #222C35;
  --ink: #E8ECEF;
  --ink-soft: #AEB7BF;
  --ink-faint: #8A949D;
  --accent: #C7A24B;         /* altın — dolgu / çizgi / dekor */
  --accent-text: #D8B968;    /* metin için altın (koyu zeminde okunur) */
  --accent-deep: #9C7C31;
  --accent2: #5AA0A6;        /* teknik teal */
  --accent2-text: #7BC2C8;
  --line: rgba(232, 236, 239, 0.10);
  --line-strong: rgba(232, 236, 239, 0.20);
  --line-gold: rgba(199, 162, 75, 0.42);
  --scrim: linear-gradient(180deg, rgba(8,11,14,0) 0%, rgba(8,11,14,0.72) 78%, rgba(8,11,14,0.92) 100%);

  --serif: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Consolas", ui-monospace, monospace;

  --header-h: 74px;
  --container: 1180px;
  --radius: 4px;

  --mx: 50%;
  --my: 50%;
  --sheen: 0;
}

/* ---------- reset ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; max-width: 100vw; overflow-x: hidden; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.62;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
figure, figcaption, blockquote { margin: 0; }
a { color: var(--accent-text); text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.14; letter-spacing: -0.012em; margin: 0; color: var(--ink); }
p { margin: 0 0 1em; }
:where(h1, h2, h3, h4, p, li, td, th) { overflow-wrap: anywhere; word-break: normal; }

/* ---------- layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
}
main { padding-top: var(--header-h); }
section { position: relative; }
.section { padding-block: clamp(56px, 8vw, 104px); }
.section-tight { padding-block: clamp(40px, 5vw, 64px); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--accent); color: #10140f; padding: 10px 16px;
  font-family: var(--mono); font-size: 13px; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

:where(a, button, input, select, textarea, [tabindex], [role="button"]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- typographic helpers ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--line-gold);
}
.mono { font-family: var(--mono); }
.tabular { font-variant-numeric: tabular-nums; }
.section-title {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  max-width: 20ch;
}
.section-lead {
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  max-width: 62ch;
  margin-top: 14px;
}

/* section index tag (teknik numaralandırma) */
.sec-head { margin-bottom: clamp(28px, 4vw, 48px); }
.sec-index {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* ---------- decorative: cut marks ---------- */
.cutmarks { position: relative; }
.cutmarks::before, .cutmarks::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
  opacity: 0.55;
}
.cutmarks::before {
  top: 10px; left: 10px;
  border-top: 1px solid var(--line-gold);
  border-left: 1px solid var(--line-gold);
}
.cutmarks::after {
  bottom: 10px; right: 10px;
  border-bottom: 1px solid var(--line-gold);
  border-right: 1px solid var(--line-gold);
}

/* ---------- ruler strip (ölçek cetveli) ---------- */
.ruler {
  height: 26px;
  width: 100%;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background-image:
    repeating-linear-gradient(90deg, var(--line-strong) 0, var(--line-strong) 1px, transparent 1px, transparent 10px),
    repeating-linear-gradient(90deg, var(--line-gold) 0, var(--line-gold) 1px, transparent 1px, transparent 50px);
  background-position: 0 100%, 0 100%;
  background-repeat: repeat-x;
  background-size: 10px 8px, 50px 15px;
  position: relative;
}

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1080;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(14, 18, 22, 0.92);
  border-bottom: 1px solid var(--line);
  transition: background 240ms ease, box-shadow 240ms ease, height 240ms ease;
}
.site-header.scrolled {
  background: rgba(12, 15, 19, 0.98);
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.9);
  height: 64px;
}
.header-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.16rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand .brand-mark {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent-text);
  border: 1px solid var(--line-gold);
  padding: 2px 6px;
  border-radius: 2px;
  align-self: center;
}
.brand .brand-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
}
.nav-desktop a {
  position: relative;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding: 6px 2px;
  transition: color 200ms ease;
}
.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 220ms cubic-bezier(.2,.7,.2,1);
}
.nav-desktop a:hover { color: var(--ink); }
.nav-desktop a:hover::after,
.nav-desktop a.is-active::after { width: 100%; }
.nav-desktop a.is-active { color: var(--accent-text); }

.nav-cta {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  background: var(--accent);
  color: #10140f !important;
  padding: 9px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  transition: background 200ms ease, transform 200ms ease, color 200ms ease;
}
.nav-desktop .nav-cta::after { display: none; }
.nav-desktop .nav-cta:hover {
  background: var(--accent-text);
  color: #10140f !important;
  transform: translateY(-1px);
}

@media (min-width: 1024px) {
  .nav-desktop { display: flex; }
}

/* hamburger */
.nav-toggle {
  position: relative;
  z-index: 1100;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--ink);
  transition: transform 260ms cubic-bezier(.2,.7,.2,1), opacity 200ms ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

/* =========================================================================
   DRAWER
   ========================================================================= */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 240ms ease;
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 1050;
  width: min(360px, 92vw);
  background: var(--surface);
  border-left: 1px solid var(--line-strong);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 12px) 26px 30px;
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer .drawer-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 18px;
}
.drawer a {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.24rem;
  color: var(--ink);
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  transition: color 200ms ease, padding-left 200ms ease;
}
.drawer a:hover, .drawer a.is-active { color: var(--accent-text); padding-left: 6px; }
.drawer .drawer-cta {
  margin-top: 22px;
  text-align: center;
  background: var(--accent);
  color: #10140f;
  border: none;
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 15px 0;
}
.drawer .drawer-cta:hover { color: #10140f; padding-left: 0; background: var(--accent-text); }
.drawer .drawer-meta {
  margin-top: auto;
  padding-top: 24px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-faint);
  line-height: 1.9;
}
.drawer .drawer-meta a { display: inline; font-family: var(--mono); font-size: 11.5px; padding: 0; border: 0; color: var(--accent-text); }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  padding: 14px 24px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, transform 220ms ease, border-color 220ms ease;
  text-align: center;
}
.btn-primary { background: var(--accent); color: #10140f; border-color: var(--accent); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--accent-text); color: #10140f; transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--surface-2); color: var(--ink); border-color: var(--line-gold); transform: translateY(-2px); }
.btn .arr { transition: transform 220ms ease; }
.btn:hover .arr { transform: translateX(4px); }

/* =========================================================================
   HERO — split asymmetric
   ========================================================================= */
.hero {
  position: relative;
  padding-top: clamp(28px, 5vw, 56px);
  padding-bottom: clamp(40px, 6vw, 72px);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 60px); }
}

.hero-copy { position: relative; min-width: 0; }
.hero h1 {
  font-size: clamp(2.35rem, 6.4vw, 4.3rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.hero h1 .lo { color: var(--accent-text); }
.hero-sub {
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.7vw, 1.18rem);
  max-width: 48ch;
  margin-top: 22px;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 30px;
}
.trust-strip .chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 7px 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.trust-strip .chip::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent2);
}

/* hero technical schema headline block */
.hero-schema {
  margin-top: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface) 0%, rgba(22,28,34,0.4) 100%);
  padding: 16px 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.hero-schema .cell .k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
}
.hero-schema .cell .v {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
  display: inline-block;
}
.hero-schema .cell .v .suf { color: var(--accent-text); font-size: 0.7em; }

/* hero photo with dimension overlay */
.hero-figure {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 4 / 5;
  max-width: 560px;
  justify-self: end;
  width: 100%;
}
.hero-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* glass sheen following cursor */
.hero-figure .sheen {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my),
              rgba(255,255,255,0.16), rgba(255,255,255,0.04) 40%, transparent 66%);
  mix-blend-mode: screen;
  opacity: 0.9;
  transition: opacity 300ms ease;
}
.hero-figure .glare {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.10) 50%, transparent 58%);
}
/* dimension lines (kot) — draw in on load */
.dim {
  position: absolute;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--accent-text);
}
.dim-h {
  left: 14px; right: 14px; bottom: 14px;
  height: 18px;
  border-bottom: 1px solid var(--line-gold);
  transform-origin: left center;
  transform: scaleX(0);
  animation: drawX 900ms cubic-bezier(.2,.7,.2,1) 320ms forwards;
}
.dim-h::before, .dim-h::after {
  content: ""; position: absolute; bottom: -4px; width: 1px; height: 9px; background: var(--line-gold);
}
.dim-h::before { left: 0; }
.dim-h::after { right: 0; }
.dim-h .lbl {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  background: rgba(14,18,22,0.86); padding: 1px 6px; white-space: nowrap;
  opacity: 0; animation: fadeLbl 400ms ease 1000ms forwards;
}
.dim-v {
  top: 14px; bottom: 14px; right: 14px;
  width: 18px;
  border-right: 1px solid var(--line-gold);
  transform-origin: center top;
  transform: scaleY(0);
  animation: drawY 900ms cubic-bezier(.2,.7,.2,1) 520ms forwards;
}
.dim-v::before, .dim-v::after {
  content: ""; position: absolute; right: -4px; height: 1px; width: 9px; background: var(--line-gold);
}
.dim-v::before { top: 0; }
.dim-v::after { bottom: 0; }
.dim-v .lbl {
  position: absolute; top: 50%; right: 3px; transform: translateY(-50%) rotate(90deg); transform-origin: right center;
  background: rgba(14,18,22,0.86); padding: 1px 6px; white-space: nowrap;
  opacity: 0; animation: fadeLbl 400ms ease 1200ms forwards;
}
.dim-tag {
  top: 14px; left: 14px;
  background: rgba(14,18,22,0.82);
  border: 1px solid var(--line-gold);
  border-radius: 2px;
  padding: 5px 9px;
  line-height: 1.4;
  opacity: 0;
  animation: fadeLbl 500ms ease 700ms forwards;
}
.dim-tag b { color: var(--ink); font-weight: 500; }
@keyframes drawX { to { transform: scaleX(1); } }
@keyframes drawY { to { transform: scaleY(1); } }
@keyframes fadeLbl { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .dim-h { transform: scaleX(1); animation: none; }
  .dim-v { transform: scaleY(1); animation: none; }
  .dim-h .lbl, .dim-v .lbl, .dim-tag { opacity: 1; animation: none; }
}

/* =========================================================================
   REVEAL
   ========================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 640ms cubic-bezier(.2,.7,.2,1), transform 640ms cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
html.no-js .reveal { opacity: 1; transform: none; }

/* =========================================================================
   SÜREÇ — vertical technical timeline
   ========================================================================= */
.process {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.proc-step {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: clamp(16px, 3vw, 34px);
  padding: clamp(24px, 3.4vw, 38px) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.proc-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent-text);
  padding-top: 5px;
}
.proc-num .when {
  display: block;
  color: var(--ink-faint);
  margin-top: 8px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
}
.proc-body { min-width: 0; }
.proc-body h3 { font-size: clamp(1.15rem, 2.4vw, 1.42rem); }
.proc-body p { color: var(--ink-soft); margin: 8px 0 12px; max-width: 64ch; }
.proc-incl {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.proc-incl li {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 5px 9px;
}
.proc-incl li::before { content: "› "; color: var(--accent2-text); }

/* =========================================================================
   MALZEME — spec tables
   ========================================================================= */
.material-band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spec-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: end;
  margin-bottom: 30px;
}
@media (min-width: 820px) { .spec-intro { grid-template-columns: 1.4fr 1fr; } }
.spec-figure {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  position: relative;
}
.spec-figure img { width: 100%; height: 100%; object-fit: cover; }
.spec-figure figcaption {
  position: absolute; left: 0; bottom: 0; right: 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em;
  color: var(--ink); padding: 20px 14px 10px;
  background: var(--scrim);
}

.table-scroll {
  display: block; width: 100%; max-width: 100%; min-width: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.table-scroll > table { margin: 0 !important; min-width: 520px; width: 100%; border-collapse: collapse; }
:where(*:has(> .table-scroll), *:has(> * > .table-scroll), *:has(> * > * > .table-scroll)) { min-width: 0; }

table { font-size: 14px; }
thead th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--surface-2);
  white-space: nowrap;
}
tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: none; }
tbody td:first-child { color: var(--ink); font-weight: 500; }
tbody td.num, thead th.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--accent-text); white-space: nowrap; }
tbody tr:hover td { background: rgba(199,162,75,0.045); }
.spec-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 2px;
  border: 1px solid var(--line-gold);
  color: var(--accent-text);
}
.spec-badge.teal { border-color: rgba(90,160,166,0.5); color: var(--accent2-text); }

/* =========================================================================
   ÖLÇÜ — calculator (business tool)
   ========================================================================= */
.calc-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 34px);
}
@media (min-width: 900px) { .calc-wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; } }

.calc-panel {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(20px, 3vw, 30px);
}
.calc-panel h3 { font-size: 1.15rem; margin-bottom: 6px; }
.calc-panel .hint { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.04em; margin-bottom: 20px; }

.field { display: block; margin-bottom: 18px; }
.field > .flabel {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.field input[type="number"],
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  padding: 12px 14px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.field input[type="number"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.field select { font-family: var(--sans); appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent-text) 50%), linear-gradient(135deg, var(--accent-text) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 40px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(199,162,75,0.16);
}
.field textarea { min-height: 130px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 460px) { .field-row { grid-template-columns: 1fr; } }

.calc-note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent2-text);
  letter-spacing: 0.03em;
  min-height: 18px;
  margin-top: -6px;
  margin-bottom: 12px;
}
.calc-note.warn { color: #E7A96A; }

/* result readout */
.calc-out {
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  padding: clamp(20px, 3vw, 28px);
  position: sticky;
  top: calc(var(--header-h) + 16px);
}
.calc-out .out-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 16px;
}
.calc-out .out-area {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ink-faint);
}
.calc-out .out-area b { color: var(--accent2-text); font-weight: 600; }
.calc-line {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0;
  font-size: 13.5px;
  color: var(--ink-soft);
  border-bottom: 1px dashed var(--line);
}
.calc-line .cl-k { display: flex; flex-direction: column; }
.calc-line .cl-k small { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); letter-spacing: 0.04em; }
.calc-line .cl-v { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.calc-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-gold);
}
.calc-total .tt-k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.calc-total .tt-v { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 4vw, 2.05rem); color: var(--accent-text); font-variant-numeric: tabular-nums; }
.calc-out .disclaimer { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); letter-spacing: 0.03em; margin-top: 16px; line-height: 1.7; }
.calc-out .btn { width: 100%; margin-top: 18px; }

/* =========================================================================
   VAKA — before/after
   ========================================================================= */
.case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 30px);
}
@media (min-width: 760px) { .case-grid { grid-template-columns: 1fr 1fr; } }
.case-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  transition: transform 260ms cubic-bezier(.2,.7,.2,1), box-shadow 260ms ease, border-color 260ms ease;
}
.case-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -30px rgba(0,0,0,0.9); border-color: var(--line-gold); }
.ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--line-strong);
}
.ba figure { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.ba figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.case-card:hover .ba figure img { transform: scale(1.04); }
.ba figure figcaption {
  position: absolute; top: 10px; left: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(14,18,22,0.82); color: var(--ink); padding: 4px 8px; border-radius: 2px;
  border: 1px solid var(--line);
}
.ba figure.after figcaption { color: var(--accent-text); border-color: var(--line-gold); }
.case-meta { padding: 18px 20px 22px; }
.case-meta h3 { font-size: 1.16rem; }
.case-meta .tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--accent2-text); display: block; margin-bottom: 8px; }
.case-meta p { color: var(--ink-soft); font-size: 14px; margin: 8px 0 0; }

/* gallery of framed pieces w/ prices */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin-top: 34px;
}
@media (min-width: 780px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gitem {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  transition: transform 240ms ease, border-color 240ms ease;
}
.gitem:hover { transform: translateY(-4px); border-color: var(--line-gold); }
.gitem .gimg { aspect-ratio: 3 / 4; overflow: hidden; }
.gitem img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.gitem:hover img { transform: scale(1.05); }
.gitem .gcap { padding: 12px 13px 15px; }
.gitem .gcap .gt { font-family: var(--serif); font-weight: 600; font-size: 0.98rem; color: var(--ink); }
.gitem .gcap .gs { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); letter-spacing: 0.04em; margin-top: 3px; }
.gitem .gcap .gp { font-family: var(--mono); font-size: 12.5px; color: var(--accent-text); margin-top: 9px; font-variant-numeric: tabular-nums; }

/* =========================================================================
   FIYAT — pricing table
   ========================================================================= */
.price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 22px);
}
@media (min-width: 820px) { .price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.price-card {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(22px, 3vw, 30px);
  display: flex; flex-direction: column;
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}
.price-card:hover { transform: translateY(-5px); border-color: var(--line-gold); box-shadow: 0 26px 50px -34px rgba(0,0,0,0.9); }
.price-card.featured { border-color: var(--line-gold); background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%); }
.price-card .ptier { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent2-text); }
.price-card .featured-tag {
  align-self: flex-start; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  color: #10140f; background: var(--accent); padding: 3px 8px; border-radius: 2px; margin-bottom: 12px;
}
.price-card h3 { font-size: 1.4rem; margin: 8px 0 4px; }
.price-card .prange { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 3.4vw, 1.95rem); color: var(--accent-text); font-variant-numeric: tabular-nums; margin: 10px 0 4px; }
.price-card .punit { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.04em; }
.price-card .pdesc { color: var(--ink-soft); font-size: 13.5px; margin: 14px 0 16px; }
.price-list, .price-excl { list-style: none; padding: 0; margin: 0 0 4px; }
.price-list li, .price-excl li { position: relative; padding-left: 20px; font-size: 13.5px; color: var(--ink-soft); margin-bottom: 9px; line-height: 1.5; }
.price-list li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent2); }
.price-excl { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.price-excl li::before { content: "×"; position: absolute; left: 3px; top: 0; color: var(--ink-faint); font-family: var(--mono); }
.price-card .plabel-excl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; display: block; }
.price-card .p-deliver { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); letter-spacing: 0.03em; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.price-card .btn { margin-top: 18px; }
.price-note { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.03em; margin-top: 22px; text-align: center; }

/* =========================================================================
   FEATURE / MANIFESTO / MISC
   ========================================================================= */
.fullbleed {
  position: relative;
  min-height: clamp(320px, 52vw, 520px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.fullbleed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fullbleed .fb-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,11,14,0.9) 0%, rgba(8,11,14,0.5) 50%, rgba(8,11,14,0.7) 100%); }
.fullbleed .fb-content { position: relative; padding-block: clamp(36px, 6vw, 68px); max-width: 640px; }
.fullbleed .fb-content h2 { font-size: clamp(1.7rem, 4vw, 2.7rem); }
.fullbleed .fb-content p { color: var(--ink-soft); margin-top: 14px; }

.manifesto {
  border-left: 2px solid var(--accent);
  padding-left: clamp(20px, 4vw, 40px);
  max-width: 24ch;
}
.manifesto blockquote {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 4.4vw, 3rem);
  line-height: 1.16;
  color: var(--ink);
  font-style: italic;
}
.manifesto blockquote .hl { color: var(--accent-text); }
.manifesto cite { display: block; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); letter-spacing: 0.06em; margin-top: 20px; font-style: normal; }

/* notes / son eklenenler */
.notes-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .notes-grid { grid-template-columns: repeat(3, 1fr); } }
.note-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 18px 20px; }
.note-card time { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--accent2-text); }
.note-card h4 { font-size: 1.02rem; margin: 8px 0 6px; }
.note-card p { color: var(--ink-soft); font-size: 13.5px; margin: 0; }

/* testimonials */
.testi-grid { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 22px); }
@media (min-width: 760px) { .testi-grid { grid-template-columns: repeat(3, 1fr); } }
.testi { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: clamp(20px, 2.6vw, 26px); display: flex; flex-direction: column; }
.testi .stars { color: var(--accent-text); font-family: var(--mono); font-size: 13px; letter-spacing: 3px; margin-bottom: 12px; }
.testi p { color: var(--ink); font-size: 14.5px; line-height: 1.62; }
.testi .crit { color: var(--ink-faint); font-size: 13px; font-style: italic; margin-top: 4px; }
.testi .who { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.testi .who b { display: block; font-family: var(--serif); font-weight: 600; color: var(--ink); font-size: 0.98rem; }
.testi .who span { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.04em; }

/* faq */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  position: relative;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.02rem, 2vw, 1.18rem);
  color: var(--ink);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 22px; color: var(--accent-text);
  transition: transform 300ms ease;
}
.faq-item[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item > .answer {
  height: 0;
  padding: 0 clamp(0px, 3vw, 28px) 0 0;
  overflow: hidden;
  transition: height 360ms cubic-bezier(.4,0,.2,1), padding-block-end 360ms cubic-bezier(.4,0,.2,1);
}
.faq-item[open] > .answer { height: auto; padding-block-end: 22px; }
.faq-item > .answer p { color: var(--ink-soft); font-size: 14.5px; margin: 0; max-width: 74ch; }
@media (prefers-reduced-motion: reduce) { .faq-item > .answer { transition: none; } }

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact-hero {
  min-height: 240px;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
}
.contact-hero h1 { font-size: clamp(2.1rem, 5.4vw, 3.5rem); }
.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(14px, 2vw, 20px);
}
.channel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px;
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
.channel:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -30px rgba(0,0,0,0.9); border-color: var(--line-gold); }
.channel .ch-ico {
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(199,162,75,0.12); border: 1px solid var(--line-gold);
  font-family: var(--mono); font-size: 15px; color: var(--accent-text);
  margin-bottom: 14px;
}
.channel h3 { font-size: 1.06rem; margin-bottom: 4px; }
.channel a, .channel .val { font-family: var(--mono); font-size: 13.5px; color: var(--ink); word-break: break-word; }
.channel a:hover { color: var(--accent-text); }
.channel .sub { font-size: 12.5px; color: var(--ink-faint); margin-top: 6px; }

.hours-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 560px) { .hours-grid { grid-template-columns: 1fr 1fr; } }
.hours-row {
  display: flex; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 15px; background: var(--surface);
  font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums;
}
.hours-row .day { color: var(--ink-soft); letter-spacing: 0.04em; }
.hours-row .hh { color: var(--ink); }
.hours-row.today { border-color: var(--line-gold); background: rgba(199,162,75,0.06); }
.hours-row.today .day { color: var(--accent-text); }
.hours-row.closed .hh { color: var(--ink-faint); }

/* =========================================================================
   FORM
   ========================================================================= */
.form-card {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(22px, 3vw, 36px);
}
.field input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: auto;
  width: 18px; height: 18px;
  min-width: 18px; min-height: 18px;
  padding: 0; border: 0; margin: 2px 10px 0 0;
  accent-color: var(--accent);
  vertical-align: top;
}
.field.kvkk { display: flex; align-items: flex-start; gap: 4px; font-size: 13.5px; color: var(--ink-soft); }
.field.kvkk a { color: var(--accent-text); }
.form-card .btn { margin-top: 8px; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
  border-top: 1px solid var(--line);
  background: #0B0F13;
  padding-block: clamp(44px, 6vw, 72px) 30px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
}
@media (min-width: 780px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand .brand { font-size: 1.3rem; margin-bottom: 14px; }
.footer-brand p { color: var(--ink-soft); font-size: 14px; max-width: 42ch; }
.footer-brand .estab { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); letter-spacing: 0.05em; margin-top: 16px; line-height: 1.9; }
.footer-col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; font-weight: 500; }
.footer-col a { display: block; color: var(--ink-soft); font-size: 14px; padding: 5px 0; transition: color 200ms ease, padding-left 200ms ease; }
.footer-col a:hover { color: var(--accent-text); padding-left: 4px; }
.footer-bottom {
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px 22px;
  align-items: center; justify-content: space-between;
}
.footer-bottom .legal { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); letter-spacing: 0.03em; }
.footer-bottom .legal-links a { display: inline; color: var(--ink-soft); font-family: var(--mono); font-size: 11.5px; margin-right: 4px; }
.footer-bottom .legal-links a:hover { color: var(--accent-text); }
.footer-bottom .legal-links span { color: var(--line-strong); margin: 0 6px; }

/* =========================================================================
   COOKIE
   ========================================================================= */
.cookie-banner {
  position: fixed;
  bottom: 16px; left: 16px; right: 16px;
  max-width: 520px; margin: 0 auto;
  z-index: 9999;
  background: var(--surface-2);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  padding: 20px 22px;
  transform: translateY(140%);
  opacity: 0;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), opacity 240ms;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.9);
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
@media (min-width: 720px) { .cookie-banner { left: 24px; right: auto; max-width: 420px; } }
.cookie-banner h2 { font-size: 1.05rem; margin-bottom: 8px; }
.cookie-banner p { font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; }
.cookie-banner p a { color: var(--accent-text); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions button {
  flex: 1 1 auto;
  min-height: 44px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.03em;
  border-radius: var(--radius); cursor: pointer;
  padding: 11px 14px;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.cookie-actions [data-consent="accept"] { background: var(--accent); color: #10140f; border: 1px solid var(--accent); }
.cookie-actions [data-consent="accept"]:hover { background: var(--accent-text); }
.cookie-actions [data-consent="reject"] { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.cookie-actions [data-consent="reject"]:hover { border-color: var(--line-gold); color: var(--accent-text); }
.cookie-actions [data-consent="settings"] { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); flex-basis: 100%; }
.cookie-actions [data-consent="settings"]:hover { color: var(--ink); border-color: var(--line-strong); }

/* =========================================================================
   PAGE HERO (generic sub-pages)
   ========================================================================= */
.page-hero { padding-block: clamp(40px, 6vw, 76px) clamp(30px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); max-width: 20ch; }
.page-hero p { color: var(--ink-soft); margin-top: 16px; max-width: 62ch; }
.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 40px 0 14px; }
.prose h3 { font-size: 1.2rem; margin: 26px 0 10px; }
.prose p { color: var(--ink-soft); margin-bottom: 1em; }
.prose ul { color: var(--ink-soft); padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--accent-text); }

/* about specifics */
.about-figure { border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4; }
.about-figure img { width: 100%; height: 100%; object-fit: cover; }
.team-grid { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 3vw, 28px); margin-top: 30px; }
@media (min-width: 720px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.team-card .tphoto { aspect-ratio: 4/5; overflow: hidden; }
.team-card .tphoto img { width: 100%; height: 100%; object-fit: cover; }
.team-card .tbody { padding: 18px 20px 22px; }
.team-card h3 { font-size: 1.14rem; }
.team-card .role { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--accent2-text); margin: 6px 0 12px; }
.team-card p { color: var(--ink-soft); font-size: 13.5px; margin: 0; }

.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 34px 0; }
@media (min-width: 640px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 20px; }
.stat .sv { font-family: var(--serif); font-weight: 600; font-size: clamp(1.7rem, 4vw, 2.4rem); color: var(--accent-text); font-variant-numeric: tabular-nums; min-width: 4ch; display: inline-block; }
.stat .sk { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-soft); text-transform: uppercase; margin-top: 4px; }

/* thank-you / 404 */
.center-page { min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; justify-content: center; text-align: center; padding: 60px 20px; }
.center-page .inner { max-width: 560px; }
.center-page .big { font-family: var(--serif); font-weight: 700; font-size: clamp(3rem, 12vw, 7rem); color: var(--accent-text); line-height: 1; letter-spacing: -0.02em; }
.center-page h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); margin: 18px 0 12px; }
.center-page p { color: var(--ink-soft); margin-bottom: 26px; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 640px) {
  .hero-schema { grid-template-columns: 1fr; gap: 12px; }
  .proc-step { grid-template-columns: 1fr; gap: 10px; }
  .proc-num { padding-top: 0; }
  .channel { padding: 18px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 400px) {
  .gallery { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   SPECIMEN VISUALS — matted-paper / frame motif (görsel yerine dekor)
   ========================================================================= */
.viz {
  position: relative;
  width: 100%; height: 100%;
  min-height: inherit;
  overflow: hidden;
  background:
    radial-gradient(130% 120% at 50% -10%, rgba(199,162,75,0.10), transparent 55%),
    linear-gradient(180deg, var(--surface-3) 0%, var(--surface) 100%);
}
/* matted paper specimen under glass */
.viz::before {
  content: "";
  position: absolute; inset: 13%;
  border-radius: 2px;
  background:
    repeating-linear-gradient(0deg, rgba(140,120,80,0.055) 0 2px, transparent 2px 16px),
    linear-gradient(155deg, #ECE6D6 0%, #DED4BE 60%, #CFC3A6 100%);
  box-shadow:
    inset 0 0 0 7px rgba(255,255,255,0.55),
    inset 0 0 0 8px rgba(160,140,100,0.28),
    0 24px 46px -26px rgba(0,0,0,0.95);
}
/* glass reflection */
.viz::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(118deg, transparent 38%, rgba(255,255,255,0.07) 50%, transparent 62%);
  pointer-events: none;
}
.viz .viz-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--ink); padding: 22px 14px 11px;
  background: var(--scrim);
}
/* aged / "önce" */
.viz--aged::before {
  background:
    radial-gradient(58% 48% at 78% 22%, rgba(120,80,30,0.38), transparent 62%),
    radial-gradient(42% 42% at 20% 84%, rgba(90,60,20,0.32), transparent 62%),
    linear-gradient(150deg, #D8C9A4 0%, #C4AE80 55%, #A98E5C 100%);
}
/* restored / "sonra" */
.viz--restored::before {
  background:
    linear-gradient(155deg, #F2ECDD 0%, #E6DCC6 60%, #D9CDB0 100%);
}
/* portrait tone for team / about */
.viz--portrait::before {
  inset: 0;
  border-radius: 0;
  box-shadow: none;
  background:
    radial-gradient(70% 60% at 50% 32%, rgba(199,162,75,0.16), transparent 62%),
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 60%, #0C1013 100%);
}
.viz--portrait::after {
  background:
    radial-gradient(38% 30% at 50% 30%, rgba(232,236,239,0.10), transparent 60%),
    linear-gradient(118deg, transparent 42%, rgba(255,255,255,0.05) 50%, transparent 58%);
}
.viz .viz-monogram {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.6rem, 6vw, 2.6rem);
  letter-spacing: 0.06em;
  color: rgba(199,162,75,0.55);
}

/* CTA panel (form yerine) */
.cta-panel { display: flex; flex-direction: column; justify-content: center; }
.cta-panel h3 { font-size: clamp(1.2rem, 2.6vw, 1.55rem); margin-bottom: 12px; }
.cta-panel p { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 22px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* fullbleed banner without photo */
.fullbleed {
  background:
    radial-gradient(80% 130% at 12% 18%, rgba(199,162,75,0.12), transparent 55%),
    repeating-linear-gradient(90deg, rgba(232,236,239,0.03) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(232,236,239,0.03) 0 1px, transparent 1px 46px),
    linear-gradient(120deg, #10151A 0%, #161C22 55%, #0C1013 100%);
}

.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:9998;transition:width 80ms linear;pointer-events:none}

/* =========================================================================
   ██ FILIGRAN — WALL-TO-WALL EPHEMERA COLLAGE + LUXURY + STITCH-BIND ENGINE
   Deep ground · warm bone/ivory linen · ONE metallic gold. Appended layer.
   ========================================================================= */

/* ---- sticky-fix: clip (NOT hidden) so position:sticky pinning survives ---- */
html { overflow-x: clip; overflow-y: visible; }
body { overflow-x: clip; overflow-y: visible; max-width: 100vw; }

:root{
  --display: Georgia, "Times New Roman", "Times", serif;   /* elegant system serif for headings */
  --wrap: var(--container);
  --panel: #12181D;            /* framed collage-leaf ground (just off body) */
  --panel-2: #151C22;
  --bone: #ECE4CF;             /* warm bone/ivory linen */
  --bone-2: #E1D6BA;
  --bone-3: #F4EEDC;
  --ink-warm: #2C241A;         /* ink on bone */
  --ink-warm-soft: #574A38;
  --gold: #C7A24B;             /* the ONE metallic */
  --gold-soft: #D8B968;
  --gold-foil: #E6CF9A;
  --gold-line: rgba(199,162,75,0.42);
  --shadow-soft: 0 18px 42px -30px rgba(0,0,0,0.9);
  --shadow-lift: 0 34px 70px -34px rgba(0,0,0,0.92);
}

/* neutralize the old teal into muted warm stone — keep gold the only chroma */
:root{
  --accent2: #8C8067;
  --accent2-text: #B4A788;
}

/* ---- elegant serif display for headings (labels stay grotesk/mono) ---- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; }
.eyebrow { letter-spacing: 0.30em; }

/* ---- deep-ground ephemera substrate: fine linen weave + gentle foxing ---- */
body{
  background-color: var(--bg);
  background-image:
    radial-gradient(closest-side, rgba(199,162,75,.06), transparent 70%),
    radial-gradient(closest-side, rgba(120,90,40,.06), transparent 72%),
    radial-gradient(closest-side, rgba(90,110,120,.04), transparent 72%),
    repeating-linear-gradient(90deg, rgba(232,236,239,.018) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg,  rgba(232,236,239,.018) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #0D1115, #0E1216);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
  background-size: 420px 380px, 360px 320px, 480px 420px, auto, auto, 100% 100%;
  background-position: 6% 10%, 90% 30%, 44% 82%, 0 0, 0 0, 0 0;
  background-attachment: fixed, fixed, fixed, fixed, fixed, fixed;
}

/* keep foreground above collage substrate + grain */
main section > .container { position: relative; z-index: 3; }
.gold-foil, .mk { position: relative; }

/* ---- gold-foil keyword wash under headings ---- */
.mk{ color: var(--accent-text); white-space: nowrap; }
.mk::after{ content:""; position:absolute; left:-2px; right:-3px; bottom:-.06em; height:.28em; z-index:-1;
  background:linear-gradient(90deg, transparent, rgba(199,162,75,.32) 18%, rgba(216,185,104,.42) 50%, rgba(199,162,75,.32) 82%, transparent);
  border-radius:2px; transform:rotate(-.5deg); }

/* ---- subtle film grain + gold-dust motes ---- */
#grain{
  position:fixed; inset:0; z-index:9996; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:repeating-radial-gradient(circle at 0 0, rgba(232,236,239,.5) 0, rgba(232,236,239,0) 1px, transparent 2px);
  background-size:3px 3px; animation:grainDrift 6s steps(6) infinite;
}
@keyframes grainDrift{0%{transform:translate(0,0)}20%{transform:translate(-5px,3px)}40%{transform:translate(4px,-5px)}60%{transform:translate(-3px,5px)}80%{transform:translate(5px,-3px)}100%{transform:translate(0,0)}}
#motes{ position:fixed; inset:0; z-index:6; pointer-events:none; mix-blend-mode:screen; opacity:.6; }
@media (prefers-reduced-motion:reduce){ #grain{ animation:none; } }

/* =========================================================================
   PRELOADER
   ========================================================================= */
#pre{ position:fixed; inset:0; z-index:9999; background:#0C1013;
  display:grid; place-items:center; transition:opacity .7s ease, visibility .7s; }
#pre.done{ opacity:0; visibility:hidden; pointer-events:none; }
#pre .pl-in{ text-align:center; padding:20px; }
#pre .pl-seal{ width:64px; height:64px; margin:0 auto 16px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #d8b968, #b98f3a 60%, #7c5f26);
  box-shadow:inset 0 2px 6px rgba(255,240,200,.35), inset 0 -6px 12px rgba(40,25,6,.5), 0 14px 26px -12px rgba(0,0,0,.8);
  display:grid; place-items:center; font-family:var(--display); font-style:italic; font-weight:600;
  font-size:30px; color:#2b2110; }
#pre .pl-mark{ font-family:var(--display); font-weight:500; font-size:clamp(24px,6vw,42px); letter-spacing:.01em; color:var(--ink); }
#pre .pl-mark b{ color:var(--accent-text); font-weight:600; }
#pre .pl-sub{ font-family:var(--display); font-style:italic; font-size:clamp(14px,3.4vw,19px); color:var(--accent-text); margin-top:8px; }
#pre .pl-bar{ margin:22px auto 0; width:min(240px,60vw); height:6px; border:1px solid var(--line-strong);
  background:rgba(199,162,75,.10); overflow:hidden; position:relative; border-radius:2px; }
#pre .pl-bar i{ position:absolute; inset:0; width:0;
  background:linear-gradient(90deg, var(--accent-deep) 0 50%, var(--gold-soft) 50% 100%);
  animation:plFill 1.15s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes plFill{ to{ width:100%; } }

/* =========================================================================
   MEMENTO / EPHEMERA DECOR SYSTEM (.mem = absolute, pointer-events:none)
   ========================================================================= */
.mem{ position:absolute; pointer-events:none; z-index:1; }
.mem-front{ z-index:5; }

/* gold thread / hairline ribbon */
.mem-thread{ width:96px; height:6px; border-radius:3px;
  background:linear-gradient(90deg, transparent, var(--gold) 14%, var(--gold-foil) 50%, var(--gold) 86%, transparent);
  box-shadow:0 3px 8px -5px rgba(0,0,0,.7); opacity:.82; }
.mem-thread::after{ content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, rgba(14,18,22,.32) 0 5px, transparent 5px 11px); opacity:.6; }
.mem-thread.lg{ width:150px; height:7px; }

/* perforated stamp (bone paper, punched edges) */
.mem-stamp, .ep-stamp{
  --hole: radial-gradient(circle 2.6px at 6px 6px, var(--bg) 60%, transparent 62%);
}
.mem-stamp{ width:60px; height:74px; border-radius:2px; color:var(--ink-warm);
  background:
    var(--hole) 0 0/12px 12px repeat-y, var(--hole) 100% 0/12px 12px repeat-y,
    var(--hole) 0 0/12px 12px repeat-x, var(--hole) 0 100%/12px 12px repeat-x,
    linear-gradient(158deg, #efe7d2, #ddcfae);
  box-shadow:0 12px 22px -14px rgba(0,0,0,.8);
  display:grid; place-items:center; }
.mem-stamp b{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--accent-deep);
  border:1px solid rgba(120,92,44,.5); border-radius:2px; padding:5px 7px; background:rgba(255,255,255,.25); }

/* postmark ring */
.mem-postmark{ width:64px; height:64px; border-radius:50%;
  background:radial-gradient(circle, transparent 34%, rgba(199,162,75,.16) 35% 40%, transparent 41%);
  border:1.5px solid var(--gold-line); box-shadow:inset 0 0 0 4px rgba(199,162,75,.12); opacity:.8; }
.mem-postmark::before{ content:""; position:absolute; inset:8px; border-radius:50%; border:1px dashed var(--gold-line); }

/* wax seal */
.mem-wax{ width:52px; height:52px; border-radius:50%; z-index:2;
  background:radial-gradient(circle at 38% 32%, #b04b3f, #7c2f2a 62%, #521f1c);
  box-shadow:0 12px 22px -10px rgba(30,10,8,.7), inset 0 2px 6px rgba(255,210,190,.28), inset 0 -6px 12px rgba(20,6,6,.5);
  display:grid; place-items:center; }
.mem-wax::before{ content:""; position:absolute; inset:6px; border-radius:50%; border:1px dashed rgba(230,207,154,.5); }
.mem-wax b{ font-family:var(--display); font-style:italic; font-weight:600; font-size:20px; line-height:1; color:#eccf9c; text-shadow:0 1px 1px rgba(20,6,6,.6); }

/* archival label (bone card, gold hairline) */
.mem-label{ background:linear-gradient(180deg,#f4eed9,#e7dabb); color:var(--ink-warm-soft);
  font-family:var(--mono); font-weight:600; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:7px 12px; border-radius:2px; white-space:nowrap; z-index:2;
  border:1px solid rgba(120,92,44,.5); box-shadow:0 12px 22px -16px rgba(0,0,0,.7), inset 0 0 0 2px rgba(255,255,255,.35);
  display:inline-flex; align-items:center; gap:8px; }
.mem-label .lb-no{ font-family:var(--display); font-style:italic; font-size:13px; letter-spacing:.02em;
  color:var(--accent-deep); text-transform:none; padding-right:8px; border-right:1px solid rgba(120,92,44,.5); }

/* conservation tissue / glassine strip */
.mem-tissue{ width:118px; height:30px; border-radius:2px;
  background:linear-gradient(120deg, rgba(240,235,220,.16), rgba(240,235,220,.06));
  border:1px solid rgba(232,236,239,.16); box-shadow:inset 0 0 18px rgba(255,255,255,.06);
  backdrop-filter:blur(1px); }

/* folio number */
.mem-folio{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--accent-text); opacity:.72; }

/* linen swatch */
.mem-swatch{ width:44px; height:44px; border-radius:2px;
  background:
    repeating-linear-gradient(90deg, rgba(60,48,30,.16) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg,  rgba(60,48,30,.16) 0 1px, transparent 1px 4px),
    linear-gradient(160deg,#e3d7ba,#cdbd96);
  border:1px solid rgba(120,92,44,.4); box-shadow:0 10px 18px -12px rgba(0,0,0,.7); }

/* crop / registration tick */
.mem-tick{ width:16px; height:16px; }
.mem-tick::before, .mem-tick::after{ content:""; position:absolute; background:var(--gold-line); }
.mem-tick::before{ left:7px; top:0; width:1px; height:16px; }
.mem-tick::after{ top:7px; left:0; height:1px; width:16px; }

/* pressed botanical (SVG) */
.mem-botanical{ color:#9aa06a; opacity:.7; }
.mem-botanical svg{ display:block; width:100%; height:100%; }

/* gilt corner (reskin the .corner squares to gold fillet) */
.corner{ position:absolute; width:16px; height:16px; z-index:5;
  background:linear-gradient(135deg, rgba(230,207,154,.9), rgba(150,116,54,.55)) !important;
  box-shadow:inset 0 0 0 1px rgba(230,207,154,.5) !important; border-radius:1px; }
.corner.tl{ top:8px; left:8px; } .corner.tr{ top:8px; right:8px; }
.corner.bl{ bottom:8px; left:8px; } .corner.br{ bottom:8px; right:8px; }

/* decor mobile curation: keep ~45% of the collage, scale, drop the big bleed pieces.
   thin/tiny ephemera (thread, tick, folio) stay — they enrich without cluttering. */
@media (max-width:900px){
  .mem-bleed{ display:none !important; }
  .mem-bleed.mem-thread, .mem-bleed.mem-tick, .mem-bleed.mem-folio{ display:block !important; }
}
@media (max-width:600px){
  .mem:not(.mem-keep):not(.mem-front):not(.mem-tick):not(.mem-folio){ display:none !important; }
  .mem-keep, .mem-tick, .mem-folio{ transform:scale(.82) !important; transform-origin:center; }
}

/* =========================================================================
   COLLAGE SECTION LEAVES — every section framed on linen (no flat sections)
   ========================================================================= */
main > section.collage:not(.fullbleed){ background:transparent !important; border-top:0 !important; border-bottom:0 !important; }
.collage:not(.fullbleed)::before{
  content:""; position:absolute; inset:clamp(10px,1.6vw,20px) clamp(6px,1.8vw,24px); z-index:0; pointer-events:none;
  background-color:var(--panel);
  background-image:
    repeating-linear-gradient(90deg, rgba(232,236,239,.02) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg,  rgba(232,236,239,.02) 0 1px, transparent 1px 6px),
    radial-gradient(closest-side, rgba(199,162,75,.06), transparent 72%),
    radial-gradient(closest-side, rgba(120,90,40,.06), transparent 74%),
    linear-gradient(180deg, #131A20, #10161B 96%);
  background-repeat:repeat,repeat,no-repeat,no-repeat,no-repeat;
  background-size:auto,auto,240px 220px,300px 260px,100% 100%;
  background-position:0 0,0 0,14% 18%,86% 82%,0 0;
  border:1px solid var(--line); border-radius:6px;
  box-shadow:var(--shadow-soft), inset 0 0 0 1px rgba(199,162,75,.08), inset 0 0 90px rgba(199,162,75,.03);
}
/* hairline gold inner fillet (gilt deckle) */
.collage:not(.fullbleed)::after{
  content:""; position:absolute; inset:clamp(16px,2.2vw,28px) clamp(12px,2.4vw,32px); z-index:0; pointer-events:none;
  border:1px solid var(--gold-line); border-radius:4px; opacity:.5;
}
.collage.material-band::before{ background-image:
    repeating-linear-gradient(90deg, rgba(232,236,239,.022) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg,  rgba(232,236,239,.022) 0 1px, transparent 1px 6px),
    radial-gradient(closest-side, rgba(199,162,75,.08), transparent 72%),
    radial-gradient(closest-side, rgba(120,90,40,.08), transparent 74%),
    linear-gradient(180deg, #171F26, #121A20 96%); }
.hero.collage::before, .section-tight.collage::before{ inset:clamp(8px,1.4vw,16px) clamp(6px,1.8vw,22px); }

/* fullbleed keeps its dramatic ground but gains a gilt fillet + keeps decor above */
.fullbleed.collage::after{
  content:""; position:absolute; inset:clamp(12px,2vw,26px); z-index:1; pointer-events:none;
  border:1px solid var(--gold-line); border-radius:4px; opacity:.55;
}
.fullbleed .container{ position:relative; z-index:2; }

/* =========================================================================
   MAT CARDS — bone-tinted, gilt-filleted, softly lifted (letterpress feel)
   ========================================================================= */
.matcard{ position:relative;
  box-shadow:var(--shadow-soft), inset 0 0 0 1px rgba(199,162,75,.14) !important;
}
.matcard::after{
  content:""; position:absolute; inset:6px; z-index:0; pointer-events:none;
  border:1px solid rgba(199,162,75,.16); border-radius:3px;
}
.matcard > *{ position:relative; z-index:1; }
.price-card.featured.matcard{ box-shadow:var(--shadow-lift), inset 0 0 0 1px rgba(199,162,75,.3) !important; }

/* spec sub-heads (were inline styles) */
.spec-h{ font-family:var(--display); font-size:1.2rem; color:var(--ink); margin:30px 0 4px; }
.notes-title{ font-size:clamp(1.5rem,3.4vw,2rem); }

/* hero mat: bone specimen under glass gains gilt corners */
.hero-figure.matcard{ background:linear-gradient(180deg,#1a222a,#141a20); }

/* =========================================================================
   COLLAGE HEADER + FOOTER edges (deckle gold)
   ========================================================================= */
.site-header{ overflow:visible; }
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:9px; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--gold-line) 8%, var(--gold-line) 92%, transparent);
  clip-path:polygon(0 30%,3% 80%,7% 20%,11% 75%,16% 25%,21% 80%,27% 20%,33% 75%,39% 25%,45% 80%,51% 20%,57% 75%,63% 25%,69% 80%,75% 20%,81% 75%,87% 25%,92% 80%,96% 25%,100% 70%,100% 0,0 0);
  opacity:.6;
}
.site-footer{ position:relative; overflow:hidden; }
.site-footer::after{
  content:""; position:absolute; left:0; right:0; top:-8px; height:9px; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--gold-line) 8%, var(--gold-line) 92%, transparent);
  clip-path:polygon(0 70%,4% 20%,9% 75%,14% 25%,20% 80%,26% 20%,33% 75%,40% 25%,47% 80%,54% 20%,61% 75%,68% 25%,75% 80%,82% 20%,89% 75%,95% 25%,100% 70%,100% 100%,0 100%);
  opacity:.55;
}
.site-footer .container{ position:relative; z-index:2; }

/* subpage / legal headers become framed leaves too */
.page-hero{ position:relative; background:transparent !important; border-bottom:0 !important; overflow:hidden; }
.page-hero::before{
  content:""; position:absolute; inset:12px clamp(6px,2vw,26px); z-index:0; pointer-events:none;
  background-color:var(--panel);
  background-image:
    repeating-linear-gradient(90deg, rgba(232,236,239,.02) 0 1px, transparent 1px 6px),
    radial-gradient(closest-side, rgba(199,162,75,.07), transparent 72%),
    linear-gradient(180deg,#141B21,#10161B 96%);
  background-repeat:repeat,no-repeat,no-repeat; background-size:auto,300px 240px,100% 100%; background-position:0 0,84% 40%,0 0;
  border:1px solid var(--line); border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(199,162,75,.08), var(--shadow-soft);
}
.page-hero::after{ content:""; position:absolute; inset:18px clamp(12px,2.4vw,32px); z-index:0; pointer-events:none;
  border:1px solid var(--gold-line); border-radius:4px; opacity:.5; }
.page-hero > .container{ position:relative; z-index:2; }

/* =========================================================================
   ██ SIGNATURE SCENE — TESPİH / DİKİŞ (embroidery stitch-bind, pinned)
   Ephemera pieces are TACKED DOWN onto woven linen by a gold running-stitch.
   ========================================================================= */
.cine-track{ position:relative; }
.cine-pin{ position:sticky; top:0; height:100vh; overflow:hidden; display:grid; place-items:center; }
.stitch-track{ height:360vh; }
.cine-pin.stitch-pin{
  background:
    radial-gradient(120% 90% at 28% 22%, rgba(199,162,75,.08), transparent 58%),
    radial-gradient(120% 90% at 80% 74%, rgba(120,90,40,.10), transparent 60%);
}
.stitch-wrap{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(16px,5vw,48px);
  display:grid; grid-template-columns:1fr; gap:clamp(20px,3vw,40px); align-items:center;
  position:relative; z-index:3;
}
@media (min-width:960px){ .stitch-wrap{ grid-template-columns:1.06fr .94fr; } }

/* woven LINEN ground the pieces are stitched onto */
.linen-ground{
  position:relative; width:100%; max-width:540px; aspect-ratio:4/5; margin-inline:auto;
  background-color:#e5d9bd;
  background-image:
    repeating-linear-gradient(90deg, rgba(90,72,42,.16) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg,  rgba(90,72,42,.14) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,250,238,.5) 0 1px, transparent 1px 8px),
    radial-gradient(120% 80% at 50% 26%, #efe6cd, #ddceac 92%);
  border:1px solid rgba(120,92,44,.5);
  box-shadow:0 46px 88px -40px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,250,235,.4), inset 0 0 70px rgba(150,112,56,.14);
  border-radius:3px; overflow:hidden;
}
.linen-ground .lg-title{ position:absolute; top:14px; left:20px; z-index:8;
  font-family:var(--display); font-style:italic; color:#6b5a34; font-size:clamp(20px,3.4vw,30px); transform:rotate(-3deg); }
.stitch-svg{ position:absolute; inset:0; width:100%; height:100%; z-index:6; pointer-events:none;
  filter:drop-shadow(0 1px 1px rgba(60,40,20,.4)); }
#stitchPath{ transition:none; }

/* the finished gilt frame that seals the composition */
.lg-frame{ position:absolute; inset:12px; z-index:7; pointer-events:none; opacity:0;
  border:3px solid transparent; border-radius:2px;
  box-shadow:
    inset 0 0 0 1px rgba(199,162,75,.7),
    inset 0 0 0 6px rgba(20,14,8,.14),
    inset 0 0 0 7px rgba(230,207,154,.6),
    0 0 0 1px rgba(199,162,75,.4);
  background:
    linear-gradient(135deg, rgba(230,207,154,.14), transparent 40%) border-box; }

/* ephemera pieces on the linen (JS drives opacity/transform from 0) */
.ep-item{ position:absolute; left:var(--x); top:var(--y); width:var(--w); z-index:4;
  transform:rotate(0deg); opacity:0; will-change:transform,opacity; margin:0;
  filter:drop-shadow(0 calc(14px*var(--lift,1)) calc(20px*var(--lift,1)) rgba(0,0,0,calc(.5*var(--lift,1)))); }
.ep-item .ep-face{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  text-align:center; width:100%; min-height:100%; }
/* tacking cross-stitches — the couture binding across a piece's edge */
.tack{ position:absolute; z-index:6; opacity:0; transform:scale(.4); transform-origin:center;
  font-family:var(--mono); font-size:11px; letter-spacing:2px; line-height:1;
  color:var(--gold); text-shadow:0 1px 0 rgba(20,14,8,.5); white-space:nowrap; pointer-events:none; }
.tack-b{ left:0; right:0; bottom:-6px; text-align:center; }
.tack-t{ left:0; right:0; top:-6px; text-align:center; }
.tack-l{ left:-4px; top:50%; transform-origin:left center; writing-mode:vertical-rl; }

/* piece skins */
.ep-stamp{ height:auto; aspect-ratio:5/6; border-radius:2px; color:var(--ink-warm);
  background:
    var(--hole) 0 0/12px 12px repeat-y, var(--hole) 100% 0/12px 12px repeat-y,
    var(--hole) 0 0/12px 12px repeat-x, var(--hole) 0 100%/12px 12px repeat-x,
    linear-gradient(158deg,#f0e8d3,#ddcfad);
  box-shadow:inset 0 0 0 1px rgba(120,92,44,.3); }
.ep-stamp b{ font-family:var(--mono); font-weight:700; font-size:clamp(15px,3.2vw,22px); color:var(--accent-deep); }
.ep-stamp i{ font-family:var(--display); font-style:italic; font-size:clamp(20px,4.4vw,30px); color:var(--ink-warm); line-height:.9; }
.ep-stamp small{ font-family:var(--mono); font-size:9px; letter-spacing:.08em; color:var(--ink-warm-soft); }

.ep-ticket{ background:linear-gradient(180deg,#f4ecd6,#e6d7b6); border:1px solid rgba(120,92,44,.42); border-radius:3px;
  padding:12px 14px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }
.ep-ticket .ep-face{ align-items:flex-start; }
.ep-ticket em{ font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-warm-soft); font-style:normal; }
.ep-ticket{ font-family:var(--display); font-size:clamp(16px,3.4vw,22px); color:var(--ink-warm); }
.tk-perf{ position:absolute; top:0; bottom:0; right:26%; width:1px;
  background:repeating-linear-gradient(0deg, rgba(120,92,44,.6) 0 3px, transparent 3px 6px); }

.ep-tissue{ background:linear-gradient(120deg, rgba(244,240,226,.5), rgba(230,224,204,.34));
  border:1px solid rgba(255,255,255,.4); border-radius:2px; padding:14px 12px;
  box-shadow:inset 0 0 22px rgba(255,255,255,.3); backdrop-filter:blur(1px);
  font-family:var(--display); font-style:italic; font-size:clamp(14px,2.8vw,19px); color:#5f5032; }

.ep-postmark{ aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, #ece2c6 62%, #ddcfad 63%);
  border:2px solid rgba(120,92,44,.55); box-shadow:inset 0 0 0 3px rgba(199,162,75,.28);
  color:var(--accent-deep); font-family:var(--mono); font-weight:700; font-size:clamp(11px,2.4vw,15px); letter-spacing:.08em; }
.ep-postmark i{ font-family:var(--display); font-style:italic; font-weight:600; }

.ep-label{ background:linear-gradient(180deg,#f5efdb,#e7dabb); border:1px solid rgba(120,92,44,.5); border-radius:2px;
  padding:12px 14px; box-shadow:0 0 0 2px rgba(255,255,255,.3) inset;
  font-family:var(--mono); font-weight:600; font-size:clamp(11px,2.3vw,13px); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-warm-soft); }
.ep-label .lb-no{ font-family:var(--display); font-style:italic; font-size:clamp(14px,2.8vw,17px); letter-spacing:.02em; color:var(--accent-deep); text-transform:none; margin-right:8px; }

.ep-swatch{ aspect-ratio:3/2; border-radius:2px;
  background:
    repeating-linear-gradient(90deg, rgba(60,48,30,.18) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg,  rgba(60,48,30,.16) 0 1px, transparent 1px 5px),
    linear-gradient(160deg,#e3d7ba,#cdbd96);
  border:1px solid rgba(120,92,44,.42); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
  font-family:var(--mono); font-size:clamp(10px,2.2vw,12px); letter-spacing:.08em; color:var(--ink-warm-soft); }

.ep-note{ font-family:var(--display); font-style:italic; color:#5f5032; line-height:1.2;
  font-size:clamp(15px,3vw,21px); }

.ep-wax{ aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #b04b3f, #7c2f2a 62%, #521f1c);
  box-shadow:0 14px 24px -10px rgba(30,10,8,.7), inset 0 2px 6px rgba(255,210,190,.28), inset 0 -8px 14px rgba(20,6,6,.5); }
.ep-wax .ep-face{ min-height:0; }
.ep-wax b{ font-family:var(--display); font-style:italic; font-weight:600; font-size:clamp(18px,4vw,26px); color:#eccf9c; text-shadow:0 1px 1px rgba(20,6,6,.6); }

/* needle + thimble that leads the running-stitch */
.thimble{ position:absolute; left:0; top:0; width:30px; height:30px; margin:-15px 0 0 -15px; z-index:9; opacity:0;
  pointer-events:none; will-change:left,top; transition:opacity .2s ease; }
.thimble::before{ /* needle */
  content:""; position:absolute; left:50%; top:50%; width:2px; height:26px; margin:-13px 0 0 -1px;
  background:linear-gradient(180deg,#f4ecd0,#b98f3a); border-radius:1px; transform:rotate(38deg);
  box-shadow:0 2px 5px -2px rgba(0,0,0,.6); }
.thimble::after{ /* needle eye + gold thread nub */
  content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #e6cf9a, #b98f3a 70%, #7c5f26);
  box-shadow:0 0 8px 2px rgba(199,162,75,.5); }

/* caption */
.stitch-cap .eyebrow{ margin-bottom:14px; letter-spacing:.28em; }
.stitch-cap h2{ font-size:clamp(1.8rem,4vw,2.8rem); }
.stitch-cap .lead{ color:var(--ink-soft); font-size:clamp(1rem,1.7vw,1.15rem); max-width:46ch; margin-top:8px; }
.stitch-cap .lead em{ color:var(--accent-text); font-style:italic; }
.st-readout{ margin-top:20px; display:inline-flex; align-items:center; gap:12px;
  font-family:var(--display); font-style:italic; font-weight:600; font-size:1.05rem; color:var(--ink);
  border:1px solid var(--gold-line); border-radius:8px; padding:10px 16px;
  background:linear-gradient(180deg, rgba(199,162,75,.10), rgba(199,162,75,.03));
  box-shadow:inset 0 0 0 1px rgba(199,162,75,.12); }
.st-readout b{ color:var(--accent-text); font-style:normal; font-variant-numeric:tabular-nums; min-width:4ch; font-family:var(--mono); }
.st-c{ opacity:0; transform:translateY(20px); }

@media (prefers-reduced-motion:reduce){
  .ep-item{ opacity:1 !important; transform:rotate(var(--r,0)) !important; --lift:0; }
  .tack{ opacity:1 !important; transform:none !important; }
  .lg-frame{ opacity:1 !important; }
  .st-c{ opacity:1; transform:none; }
  .thimble{ opacity:0 !important; }
}

/* =========================================================================
   MOBILE — keep whole-page collage, converge stitch scene on-screen
   ========================================================================= */
@media (max-width:900px){
  .collage:not(.fullbleed)::before{ inset:8px 5px; }
  .collage:not(.fullbleed)::after{ inset:13px 10px; }
}
@media (max-width:600px){
  .stitch-track{ height:300vh; }
  .linen-ground{ max-width:min(92vw,430px); }
  .stitch-cap .lead{ max-width:none; }
}

/* =========================================================================
   ██ ELEVATE — REAL CONSERVATION PHOTOS as gilt-framed collage specimens
   Warmer tonal depth · gold shimmer on hover · refined shadows · drop-caps.
   ========================================================================= */

/* ---- warm tonal wash: nudge the clinical dark toward candle-lit luxe ---- */
main::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 62% at 50% -6%, rgba(199,162,75,.055), transparent 60%),
    radial-gradient(120% 66% at 50% 106%, rgba(150,96,44,.06), transparent 60%);
  mix-blend-mode:screen; opacity:.85;
}

/* ---- HERO figure now carries a real photo under glass ---- */
.viz--photo{ background:#12181d; }
.viz--photo::before{ display:none; }                 /* kill the fake mat — real photo leads */
.viz--photo > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 42%; z-index:0;
  filter:saturate(1.03) contrast(1.02);
}
.viz--photo::after{ z-index:1; }                     /* keep the glass reflection above photo */
.viz--photo .viz-label{ z-index:2; }

/* ---- reusable framed real-photo specimen (bone paspartu + gilt fillet) ---- */
.rphoto{ position:relative; margin:0; min-width:0; }
.rphoto-mat{
  position:relative; overflow:hidden; border-radius:3px;
  padding:clamp(9px,1.5vw,15px);
  background:
    repeating-linear-gradient(90deg, rgba(120,92,44,.05) 0 1px, transparent 1px 5px),
    linear-gradient(158deg,#f1e9d4,#e4d6b8 66%,#d7c8a5);
  border:1px solid rgba(120,92,44,.5);
  box-shadow:var(--shadow-lift), inset 0 0 0 1px rgba(255,250,235,.5);
  transition:box-shadow 300ms ease, transform 300ms ease;
}
.rphoto-mat > img{
  display:block; width:100%; height:auto; aspect-ratio:var(--ar,3/2);
  object-fit:cover; border-radius:2px;
  box-shadow:0 2px 12px rgba(20,14,8,.42), inset 0 0 0 1px rgba(20,14,8,.28);
  filter:saturate(1.02) contrast(1.02);
}
.rphoto--portrait .rphoto-mat > img{ aspect-ratio:var(--ar,4/5); }
/* under-glass diagonal + hover gold shimmer sweep */
.rp-glass{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(118deg, transparent 40%, rgba(255,255,255,.10) 50%, transparent 60%); }
.rphoto-mat::after{ content:""; position:absolute; top:-10%; bottom:-10%; left:-60%; width:42%; z-index:3;
  pointer-events:none; transform:skewX(-14deg); opacity:0;
  background:linear-gradient(100deg, transparent, rgba(230,207,154,.5), transparent); }
.rphoto:hover .rphoto-mat{ box-shadow:var(--shadow-lift), inset 0 0 0 1px rgba(230,207,154,.75); transform:translateY(-2px); }
.rphoto:hover .rphoto-mat::after{ animation:rpShine 900ms cubic-bezier(.3,.7,.3,1); }
@keyframes rpShine{ 0%{ left:-60%; opacity:0; } 18%{ opacity:.95; } 100%{ left:120%; opacity:0; } }
/* gilt fillet (reused on spec figure too) */
.rp-fillet{ position:absolute; inset:6px; z-index:2; pointer-events:none;
  border:1px solid var(--gold-line); border-radius:2px; }
/* specimen caption / folio */
.rp-cap{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--ink-soft);
  margin-top:11px; display:flex; gap:9px; align-items:baseline; line-height:1.4; }
.rp-cap .rp-fig{ font-family:var(--display); font-style:italic; font-size:13px; color:var(--accent-text);
  white-space:nowrap; padding-right:9px; border-right:1px solid var(--gold-line); }
@media (prefers-reduced-motion:reduce){
  .rphoto:hover .rphoto-mat::after{ animation:none; }
  .rphoto:hover .rphoto-mat{ transform:none; }
}

/* ---- SÜREÇ lead photo pair (fills the sparse timeline zone) ---- */
.surec-figs{ display:grid; grid-template-columns:1fr; gap:clamp(16px,2.6vw,26px);
  margin-bottom:clamp(30px,4.2vw,48px); }
@media (min-width:720px){ .surec-figs{ grid-template-columns:1fr 1fr; } }

/* ---- MALZEME spec figure: real photo gains a gilt fillet + soft lift ---- */
.spec-figure{ box-shadow:var(--shadow-soft); }
.spec-figure > img{ transition:transform 600ms cubic-bezier(.2,.7,.2,1); }
.spec-figure:hover > img{ transform:scale(1.03); }
.spec-figure .rp-fillet{ inset:6px; z-index:2; }

/* ---- FULLBLEED atölye: real workshop photo behind the scrim ---- */
.fullbleed .fb-photo{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 46%; z-index:0; }
.fullbleed.has-photo .fb-scrim{ z-index:1;
  background:linear-gradient(90deg, rgba(8,11,14,.94) 0%, rgba(8,11,14,.62) 46%, rgba(8,11,14,.82) 100%); }
.fullbleed.has-photo .fb-content{ z-index:2; }

/* editorial drop-cap */
.dropcap::first-letter{
  float:left; font-family:var(--display); font-weight:600; font-size:3.5em;
  line-height:.78; padding:.05em .1em 0 0; color:var(--accent-text);
}

/* ---- MANIFESTO with founder portrait ---- */
.manifesto-wrap{ display:grid; grid-template-columns:1fr; gap:clamp(24px,4vw,46px); align-items:center; }
@media (min-width:820px){ .manifesto-wrap{ grid-template-columns:minmax(0,270px) 1fr; } }
.manifesto-wrap .manifesto{ max-width:34ch; }

/* premium micro-detail: gold shimmer sweep on gallery / case cards (contained) */
.gitem, .case-card{ overflow:hidden; transition:transform 300ms ease, box-shadow 300ms ease; }
.gitem > .gimg::before, .case-card > .ba::before{
  content:""; position:absolute; top:-20%; bottom:-20%; left:-60%; width:40%; z-index:4;
  pointer-events:none; transform:skewX(-14deg); opacity:0;
  background:linear-gradient(100deg, transparent, rgba(230,207,154,.32), transparent); }
.gitem > .gimg, .case-card > .ba{ position:relative; overflow:hidden; }
.gitem:hover, .case-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift), inset 0 0 0 1px rgba(230,207,154,.6) !important; }
.gitem:hover > .gimg::before, .case-card:hover > .ba::before{ animation:rpShine 950ms cubic-bezier(.3,.7,.3,1); }
@media (prefers-reduced-motion:reduce){
  .spec-figure:hover > img{ transform:none; }
  .gitem:hover, .case-card:hover{ transform:none; }
  .gitem:hover > .gimg::before, .case-card:hover > .ba::before{ animation:none; }
}