/* ============================================================
   EFEMERA — İstanbul Efemera Dergisi
   Editorial-magazine · ink & printing paper
   ============================================================ */

/* ---------- Fonts (local, font-display: optional) ---------- */
@font-face {
  font-family: 'Cormorant';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('../fonts/cormorant-600-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+0304, U+0308, U+0329, U+1E00-1E9F, U+2020, U+2C60-2C7F, U+A720-A7FF, U+0131, U+015E-015F, U+011E-011F, U+00C7, U+00E7, U+00D6, U+00F6, U+00DC, U+00FC;
}
@font-face {
  font-family: 'Cormorant';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('../fonts/cormorant-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+FEFF;
}
@font-face {
  font-family: 'Cormorant';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url('../fonts/cormorant-italic-600-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+0304, U+0308, U+0329, U+1E00-1E9F, U+2020, U+2C60-2C7F, U+A720-A7FF, U+0131, U+015E-015F, U+011E-011F, U+00C7, U+00E7, U+00D6, U+00F6, U+00DC, U+00FC;
}
@font-face {
  font-family: 'Cormorant';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url('../fonts/cormorant-italic-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+FEFF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  src: url('../fonts/newsreader-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+0304, U+0308, U+0329, U+1E00-1E9F, U+2020, U+2C60-2C7F, U+A720-A7FF, U+0131, U+015E-015F, U+011E-011F, U+00C7, U+00E7, U+00D6, U+00F6, U+00DC, U+00FC;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  src: url('../fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+FEFF;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #FAF9F7;
  --surface: #FFFFFF;
  --surface-2: #F1EEE8;
  --surface-3: #E9E4DA;
  --ink: #141414;
  --ink-soft: #423E3A;
  --muted: #6B655D;
  --accent: #D23A2E;        /* fills / rules / decor */
  --accent-text: #A81E12;   /* text on light */
  --accent2: #0B0B0B;
  --line: rgba(20, 20, 20, 0.14);
  --line-strong: rgba(20, 20, 20, 0.30);
  --paper-shadow: 0 30px 60px -40px rgba(20, 16, 12, 0.5);

  --serif: 'Cormorant', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono: 'Courier New', ui-monospace, 'SFMono-Regular', monospace;

  --container: 1080px;
  --header-h: 74px;
  interpolate-size: allow-keywords;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.16rem);
  line-height: 1.72;
  letter-spacing: -0.015em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
figure, figcaption, blockquote, dl, dd { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0;
}
p { margin: 0 0 1.1em; }
:where(p, li) { overflow-wrap: anywhere; word-break: break-word; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
}
.container--wide { max-width: 1280px; }

/* skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 18px;
  z-index: 2000;
  border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Typographic details ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-text);
  font-weight: 700;
  margin: 0 0 1em;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--accent);
}
.lead-rule {
  width: 44px;
  height: 2px;
  background: var(--accent);
  border: 0;
  margin: 0 0 26px;
}
.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

.dropcap::first-letter {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 4.6em;
  line-height: 0.72;
  float: left;
  padding: 0.06em 0.12em 0 0;
  color: var(--accent-text);
}

.section {
  padding-block: clamp(56px, 8vw, 108px);
  position: relative;
}
.section-head { max-width: 640px; margin-bottom: clamp(30px, 4vw, 52px); }
.section-head h2 {
  font-size: clamp(2.4rem, 1.7rem + 3.4vw, 4.4rem);
  font-style: italic;
}
.section-head p { color: var(--ink-soft); font-size: 1.14rem; max-width: 54ch; }

.mono-tag {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 1080;
  display: flex;
  align-items: center;
  background: rgba(250, 249, 247, 0.92);
  backdrop-filter: saturate(1.4) blur(8px);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid transparent;
  transition: height 240ms ease, background 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
.site-header.is-scrolled {
  height: 60px;
  background: rgba(250, 249, 247, 0.98);
  box-shadow: 0 8px 24px -16px rgba(20, 16, 12, 0.28);
  border-bottom-color: var(--line);
}
.header-inner {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--serif);
  line-height: 1;
}
.brand__mark {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink);
}
.brand__issue {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  border: 1px solid var(--accent);
  padding: 2px 6px;
  border-radius: 3px;
  align-self: center;
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
}
.nav-desktop a {
  position: relative;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 4px 0;
  transition: color 200ms ease;
}
.nav-desktop a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1.5px;
  background: var(--accent);
  transition: width 240ms cubic-bezier(.2,.7,.2,1);
}
.nav-desktop a:not(.nav-cta):hover,
.nav-desktop a:not(.nav-cta):focus-visible { color: var(--ink); }
.nav-desktop a:not(.nav-cta):hover::after,
.nav-desktop a:not(.nav-cta).is-active::after { width: 100%; }
.nav-desktop a.is-active { color: var(--ink); }

.nav-cta {
  background: var(--ink);
  color: var(--surface) !important;
  padding: 9px 16px !important;
  border-radius: 4px;
}
.nav-desktop .nav-cta::after { display: none; }
.nav-cta:hover, .nav-cta:focus-visible {
  background: var(--accent);
  color: var(--surface) !important;
}

/* hamburger */
.nav-toggle {
  display: none;
  position: relative;
  z-index: 1100;
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
  transition: transform 240ms cubic-bezier(.2,.7,.2,1), opacity 200ms ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* drawer */
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 92vw);
  z-index: 1050;
  background: var(--surface);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
  padding: calc(var(--header-h) + 20px) 30px 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer a {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.8rem;
  color: var(--ink);
  padding: 10px 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: 8px; }
.drawer .drawer-cta {
  margin-top: 18px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  background: var(--ink);
  color: var(--surface);
  border-radius: 4px;
  border-bottom: 0;
  padding: 14px;
}
.drawer .drawer-cta:hover { background: var(--accent); color: var(--surface); padding-left: 14px; }
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(11, 11, 11, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 240ms ease;
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

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

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: transform 200ms cubic-bezier(.2,.7,.2,1), background 220ms ease, color 220ms ease, box-shadow 220ms ease;
  text-align: center;
}
.btn .arw { transition: transform 220ms ease; }
.btn:hover .arw { transform: translateX(4px); }
.btn-primary { background: var(--ink); color: var(--surface); }
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--accent);
  color: var(--surface);
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -16px rgba(210, 58, 46, 0.7);
}
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* ============================================================
   MAIN
   ============================================================ */
main { padding-top: var(--header-h); }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: min(90vh, 820px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: slowZoom 22s ease-out both;
}
@keyframes slowZoom {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(11,10,9,0.42) 0%, rgba(11,10,9,0.12) 34%, rgba(11,10,9,0.28) 62%, rgba(11,10,9,0.82) 100%);
}
/* pointer-follow ink gloss */
.hero__gloss {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background: radial-gradient(340px 340px at var(--mx, 50%) var(--my, 30%),
    rgba(255, 240, 220, 0.5), rgba(255, 240, 220, 0) 65%);
  opacity: 0.9;
}
.hero__inner {
  position: relative;
  width: 100%;
  padding-bottom: clamp(48px, 8vw, 96px);
  padding-top: 120px;
}
.hero .eyebrow { color: #F3C9C3; }
.hero .eyebrow::before { background: #F3C9C3; }
.hero__title {
  color: #FBF7F1;
  font-style: italic;
  font-size: clamp(3rem, 1.4rem + 8vw, 4.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.hero__title .word { display: inline-block; }
.hero__sub {
  color: rgba(251, 247, 241, 0.92);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  max-width: 46ch;
  margin: 22px 0 30px;
  line-height: 1.6;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__actions .btn-ghost { color: #FBF7F1; border-color: rgba(251,247,241,0.5); }
.hero__actions .btn-ghost:hover { background: #FBF7F1; color: var(--ink); border-color: #FBF7F1; }

.hero__meta {
  position: absolute;
  top: clamp(96px, 14vw, 150px);
  right: clamp(16px, 4vw, 40px);
  z-index: 1;
  text-align: right;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 247, 241, 0.8);
  line-height: 2;
  display: none;
}
@media (min-width: 900px) { .hero__meta { display: block; } }
.hero__meta b { color: #F3C9C3; }

/* trust strip under hero */
.trust-strip {
  background: var(--ink);
  color: var(--bg);
}
.trust-strip .container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  padding-block: 16px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.trust-strip span { display: inline-flex; align-items: center; gap: 8px; color: rgba(250,249,247,0.86); }
.trust-strip span::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}

/* ============================================================
   MANŞET (editorial intro)
   ============================================================ */
.manset {
  background: var(--bg);
}
.manset__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 60px);
}
@media (min-width: 900px) {
  .manset__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); align-items: start; }
}
.manset__body { max-width: 62ch; }
.manset__body p { font-size: 1.16rem; color: var(--ink-soft); }
.manset__body p:first-of-type { font-size: 1.24rem; color: var(--ink); }
.manset__pull {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem);
  line-height: 1.2;
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding-left: 24px;
  margin: 34px 0;
}
.manset__aside {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 26px;
  border-radius: 6px;
  box-shadow: var(--paper-shadow);
}
.manset__aside h3 {
  font-style: italic;
  font-size: 1.7rem;
  margin-bottom: 6px;
}
.curator-note {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  display: block;
  margin-bottom: 14px;
}
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 30px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.stat { min-width: 88px; }
.stat b {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
}
.stat span {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   DOSYA (one poster story) — overlap editorial
   ============================================================ */
.dosya { background: var(--surface-2); position: relative; overflow: hidden; }
.dosya .ink-stain { top: -80px; right: -60px; }
.dosya__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 40px);
  align-items: center;
}
@media (min-width: 860px) {
  .dosya__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .dosya__grid.reverse .dosya__figure { order: 2; }
}
.dosya__figure {
  position: relative;
  box-shadow: var(--paper-shadow);
  border-radius: 4px;
  overflow: hidden;
}
.dosya__figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 800ms cubic-bezier(.2,.7,.2,1);
}
.dosya__figure:hover img { transform: scale(1.04); }
.dosya__figure figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 18px 14px;
  background: linear-gradient(180deg, rgba(11,10,9,0) 0%, rgba(11,10,9,0.82) 100%);
  color: rgba(251,247,241,0.94);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dosya__body h3 {
  font-style: italic;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem);
  margin-bottom: 18px;
}
.dosya__body .badge-row { margin: 20px 0 4px; }
.dosya__detail {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 18px;
  align-items: center;
}
.dosya__detail img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.dosya__detail p { font-size: 0.98rem; color: var(--ink-soft); margin: 0; }

.badge-row { display: flex; flex-wrap: wrap; gap: 8px; }
.badge {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  color: var(--ink-soft);
  background: var(--surface);
}
.badge--accent { border-color: var(--accent); color: var(--accent-text); }

/* ink-spread stain (pure CSS signature) */
.ink-stain {
  position: absolute;
  width: 360px; height: 360px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 42% 40%,
    rgba(210, 58, 46, 0.22) 0%, rgba(210, 58, 46, 0.12) 32%, rgba(210, 58, 46, 0) 62%);
  filter: blur(4px);
  animation: inkSpread 12s ease-in-out infinite alternate;
}
@keyframes inkSpread {
  0% { transform: scale(0.82) rotate(0deg); opacity: 0.7; }
  100% { transform: scale(1.12) rotate(18deg); opacity: 1; }
}

/* ============================================================
   SEÇKİ + CONFIGURATOR
   ============================================================ */
.secki { background: var(--bg); }

.config {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 34px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--paper-shadow);
  overflow: hidden;
}
@media (min-width: 940px) {
  .config { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 0; }
}
.config__controls { padding: clamp(24px, 3vw, 38px); }
.config__preview {
  position: relative;
  background: var(--ink);
  color: var(--bg);
  padding: clamp(24px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.config__preview-media {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid rgba(255,255,255,0.12);
}
.config__preview-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: aspect-ratio 400ms ease;
}
.config__preview-media .frame-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 0 solid rgba(0,0,0,0);
  transition: border-width 300ms ease, border-color 300ms ease;
}
.config__field { margin-bottom: 22px; }
.config__field > .label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.config__field .label b { color: var(--accent-text); font-weight: 700; }
.config select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--body);
  font-size: 1.05rem;
  padding: 13px 40px 13px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.config select:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(210,58,46,0.14); outline: none; }

.chip-group { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  position: relative;
  flex: 1 1 auto;
  min-width: 84px;
}
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 11px 13px;
  font-size: 0.98rem;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.chip span small {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.chip input:checked + span {
  border-color: var(--accent);
  background: rgba(210, 58, 46, 0.07);
  color: var(--ink);
}
.chip input:checked + span small { color: var(--accent-text); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip input:disabled + span { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }

/* preview readout */
.config__readout { margin-top: auto; }
.config__price-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250,249,247,0.66);
}
.config__price {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.8rem, 2rem + 3vw, 4rem);
  line-height: 1.05;
  color: #FBF7F1;
  font-variant-numeric: tabular-nums;
  margin: 2px 0 4px;
}
.config__price .cur { font-family: var(--mono); font-size: 0.4em; color: var(--accent); margin-left: 6px; letter-spacing: 0; }
.config__edition {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(250,249,247,0.82);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 16px;
}
.edition-bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.16);
  border-radius: 3px;
  overflow: hidden;
}
.edition-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 400ms cubic-bezier(.2,.7,.2,1);
}
.config__warn {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  padding: 11px 14px;
  border-radius: 5px;
  margin-bottom: 16px;
  display: none;
}
.config__warn.is-shown { display: block; }
.config__warn.warn-soldout { background: rgba(210,58,46,0.18); color: #FBD7D2; border: 1px solid rgba(210,58,46,0.5); }
.config__warn.warn-ratio { background: rgba(240, 200, 90, 0.16); color: #F4E2B4; border: 1px solid rgba(240,200,90,0.4); }
.config .btn-primary[disabled] { opacity: 0.45; pointer-events: none; }
.config__note {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: rgba(250,249,247,0.55);
  margin-top: 14px;
  letter-spacing: 0.03em;
}

/* seçki gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2.4vw, 26px);
  margin-top: clamp(34px, 5vw, 56px);
}
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.piece {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 260ms cubic-bezier(.2,.7,.2,1), box-shadow 260ms ease;
}
.piece:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -28px rgba(20,16,12,0.5); }
.piece__media { position: relative; overflow: hidden; }
.piece__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}
.piece:hover .piece__media img { transform: scale(1.05); }
.piece__tag {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--surface);
  color: var(--ink);
  padding: 4px 8px;
  border-radius: 3px;
}
.piece__tag.orig { background: var(--accent); color: #fff; }
.piece__tag.sold { background: var(--ink); color: rgba(255,255,255,0.85); }
.piece__body { padding: 16px 16px 18px; }
.piece__body h4 { font-style: italic; font-size: 1.5rem; line-height: 1.16; margin-bottom: 4px; }
.piece__body .meta { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.piece__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.piece__price { font-family: var(--serif); font-weight: 600; font-size: 1.55rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.piece__price .cur { font-family: var(--mono); font-size: 0.62rem; color: var(--accent-text); margin-left: 4px; }
.piece__foot .edn { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--accent-text); text-transform: uppercase; }
.piece__foot .edn.sold { color: var(--muted); }

/* ============================================================
   RÖPORTAJ (collector quotes)
   ============================================================ */
.roportaj { background: var(--accent2); color: var(--bg); position: relative; overflow: hidden; }
.roportaj .eyebrow { color: #F3C9C3; }
.roportaj .eyebrow::before { background: var(--accent); }
.roportaj .section-head h2 { color: #FBF7F1; }
.roportaj .section-head p { color: rgba(250,249,247,0.7); }
.quote-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 3vw, 30px);
}
@media (min-width: 760px) { .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.quote-grid .quote:first-child { grid-column: 1 / -1; }
.quote {
  border-top: 1px solid rgba(255,255,255,0.16);
  padding-top: 22px;
}
.quote blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem);
  line-height: 1.28;
  color: #FBF7F1;
}
.quote-grid .quote:first-child blockquote { font-size: clamp(1.8rem, 1.3rem + 2.4vw, 3rem); max-width: 22ch; }
.quote cite {
  display: block;
  margin-top: 16px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F3C9C3;
}
.quote cite span { display: block; color: rgba(250,249,247,0.6); margin-top: 3px; letter-spacing: 0.06em; }
.roportaj__portrait {
  margin-top: clamp(34px, 5vw, 54px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
@media (min-width: 760px) { .roportaj__portrait { grid-template-columns: 260px minmax(0, 1fr); } }
.roportaj__portrait img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 6px; }
.roportaj__portrait p { color: rgba(250,249,247,0.86); font-size: 1.12rem; }
.roportaj__portrait .dropcap::first-letter { color: #F3C9C3; }

/* ============================================================
   NOTLAR (son eklenenler)
   ============================================================ */
.notlar { background: var(--surface-2); }
.notes-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.note-item {
  display: grid;
  grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr);
  gap: 16px 30px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
@media (max-width: 560px) { .note-item { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.note-item time { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.note-item h4 { font-style: italic; font-size: 1.5rem; margin-bottom: 4px; }
.note-item p { color: var(--ink-soft); margin: 0; font-size: 1rem; }

/* ============================================================
   İLETİŞİM
   ============================================================ */
.iletisim { background: var(--bg); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
}
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; } }

.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.channel {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  background: var(--surface);
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms ease, border-color 220ms ease;
}
.channel:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -24px rgba(20,16,12,0.5); border-color: var(--line-strong); }
.channel .ico {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(210,58,46,0.1);
  color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-size: 1.2rem; font-weight: 600;
  margin-bottom: 14px;
}
.channel h4 { font-family: var(--mono); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.channel a, .channel p { font-family: var(--body); font-size: 1.06rem; color: var(--ink); margin: 0; word-break: break-word; }
.channel a:hover { color: var(--accent-text); }
.channel small { display: block; margin-top: 6px; font-family: var(--mono); font-size: 0.64rem; color: var(--muted); letter-spacing: 0.04em; }

.hours-card {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}
.hours-card h4 { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 16px 18px 10px; }
.hours-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 18px;
  border-top: 1px solid var(--line);
  font-size: 0.98rem;
  font-variant-numeric: tabular-nums;
}
.hours-row.is-today { background: rgba(210,58,46,0.06); }
.hours-row.is-today b { color: var(--accent-text); }
.hours-row span:first-child { color: var(--ink-soft); }

/* form */
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--paper-shadow);
}
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 620px) { .form-grid .two { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span, .field > label > span { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font-family: var(--body);
  font-size: 1.04rem;
  padding: 12px 14px;
  border: 0;
  border-bottom: 2px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 5px 5px 0 0;
  transition: border-color 200ms ease, background 200ms ease;
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); background: #fff; }
.field.kvkk { flex-direction: row; align-items: flex-start; gap: 11px; }
.field.kvkk span { font-family: var(--body); text-transform: none; letter-spacing: 0; font-size: 0.94rem; color: var(--ink-soft); }
.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 0 0;
  accent-color: var(--accent);
}
.form-card .btn-primary { width: 100%; margin-top: 4px; }
@media (min-width: 620px) { .form-card .btn-primary { width: auto; } }

/* CTA card — replaces on-page forms outside /iletisim */
.cta-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(26px, 3vw, 40px);
  box-shadow: var(--paper-shadow);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: start;
}
.cta-card h3 { font-style: italic; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); margin: 4px 0 8px; }
.cta-card p { color: var(--ink-soft); margin: 0 0 6px; max-width: 46ch; }
.cta-card .btn { margin-top: 12px; }
.cta-card__alt { font-size: 0.92rem; color: var(--muted); margin-top: 16px; }
.cta-card__alt a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   TABLE
   ============================================================ */
.table-scroll {
  display: block; width: 100%; max-width: 100%; min-width: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 20px 0;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.table-scroll > table { margin: 0 !important; min-width: 480px; width: 100%; border-collapse: collapse; }
:where(*:has(> .table-scroll), *:has(> * > .table-scroll), *:has(> * > * > .table-scroll)) { min-width: 0; }
table th, table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 0.98rem; }
table th { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
table td { color: var(--ink-soft); }

/* ============================================================
   PRICING (packages)
   ============================================================ */
.plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
@media (min-width: 820px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}
.plan.is-featured { border-color: var(--accent); box-shadow: 0 24px 44px -30px rgba(210,58,46,0.5); }
.plan h3 { font-style: italic; font-size: 1.9rem; margin-bottom: 4px; }
.plan .plan-tag { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
.plan .price { font-family: var(--serif); font-weight: 600; font-size: 2.6rem; margin: 16px 0 4px; font-variant-numeric: tabular-nums; }
.plan .price .cur { font-family: var(--mono); font-size: 0.5rem; color: var(--muted); letter-spacing: 0.06em; }
.plan ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.plan li { position: relative; padding-left: 22px; font-size: 0.98rem; color: var(--ink-soft); }
.plan li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.plan li.excl { color: var(--muted); }
.plan li.excl::before { background: var(--line-strong); }
.plan .btn { margin-top: 22px; }
.plan .plan-note { font-family: var(--mono); font-size: 0.6rem; color: var(--muted); margin-top: 12px; letter-spacing: 0.04em; }

/* ============================================================
   FAQ (pure CSS)
   ============================================================ */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 800px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  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(--body);
  font-size: 1.6rem;
  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(18px, 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: 24px; }
.faq-item > .answer p { color: var(--ink-soft); margin: 0 0 0.8em; }
.faq-item > .answer p:last-child { margin-bottom: 0; }

/* ============================================================
   TEAM (about)
   ============================================================ */
.team { display: grid; grid-template-columns: minmax(0,1fr); gap: 22px; }
@media (min-width: 760px) { .team { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.member { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.member img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.member__body { padding: 18px; }
.member__body h3 { font-style: italic; font-size: 1.6rem; margin-bottom: 2px; }
.member__body .role { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 12px; }
.member__body p { font-size: 0.98rem; color: var(--ink-soft); margin: 0; }

/* process timeline */
.timeline { display: grid; gap: 0; border-left: 2px solid var(--line); margin-left: 6px; }
.tl-step { position: relative; padding: 0 0 34px 32px; }
.tl-step:last-child { padding-bottom: 0; }
.tl-step::before {
  content: "";
  position: absolute; left: -8px; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg);
}
.tl-step .tl-when { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.tl-step h3 { font-style: italic; font-size: 1.7rem; margin: 4px 0 6px; }
.tl-step p { color: var(--ink-soft); margin: 0; font-size: 1rem; max-width: 60ch; }

/* ============================================================
   PAGE HERO (interior pages)
   ============================================================ */
.page-hero {
  padding-block: clamp(48px, 8vw, 96px);
  min-height: 240px;
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.page-hero h1 { font-style: italic; font-size: clamp(2.6rem, 1.8rem + 4vw, 4.5rem); max-width: 18ch; }
.page-hero p { color: var(--ink-soft); font-size: 1.16rem; max-width: 54ch; margin-top: 14px; }
.page-hero .ink-stain { bottom: -140px; right: -80px; }

/* prose (legal/about) */
.prose { max-width: 760px; }
.prose h2 { font-style: italic; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); margin: 40px 0 14px; }
.prose h3 { font-size: 1.4rem; margin: 26px 0 10px; }
.prose p { color: var(--ink-soft); }
.prose ul { padding-left: 0; list-style: none; display: grid; gap: 8px; margin: 14px 0; }
.prose ul li { position: relative; padding-left: 22px; color: var(--ink-soft); }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--accent2);
  color: rgba(250,249,247,0.78);
  padding-block: clamp(48px, 6vw, 80px) 30px;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 34px;
}
@media (max-width: 720px) { .footer-top { grid-template-columns: minmax(0,1fr); gap: 26px; } }
.footer-brand .brand__mark { color: #FBF7F1; font-size: 2rem; }
.footer-brand p { margin-top: 14px; max-width: 40ch; color: rgba(250,249,247,0.66); }
.footer-brand .est { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: #F3C9C3; margin-top: 12px; display: inline-block; }
.footer-col h4 { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(250,249,247,0.5); margin-bottom: 14px; }
.footer-col a { display: block; padding: 6px 0; color: rgba(250,249,247,0.82); transition: color 180ms ease, padding-left 180ms ease; }
.footer-col a:hover { color: #F3C9C3; padding-left: 5px; }
.footer-bottom {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 20px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: rgba(250,249,247,0.5);
}
.footer-bottom .legal a { display: inline; color: rgba(250,249,247,0.66); margin-right: 14px; }
.footer-bottom .legal a:hover { color: #F3C9C3; }

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-banner {
  position: fixed;
  bottom: 16px; left: 16px; right: 16px;
  max-width: 520px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 24px 60px -24px rgba(20,16,12,0.6);
  padding: 20px 22px;
  transform: translateY(140%);
  opacity: 0;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), opacity 240ms;
  z-index: 9999;
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
@media (min-width: 720px) { .cookie-banner { left: 24px; right: auto; max-width: 420px; } }
.cookie-banner h4 { font-style: italic; font-size: 1.5rem; margin-bottom: 6px; }
.cookie-banner p { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 14px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.cookie-actions button {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 11px 14px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.cookie-actions button[data-consent="accept"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.cookie-actions button[data-consent="accept"]:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.cookie-actions button[data-consent="reject"]:hover,
.cookie-actions button[data-consent="settings"]:hover { border-color: var(--ink); background: var(--surface-2); }

/* ============================================================
   REVEAL / MOTION
   ============================================================ */
.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) * 90ms);
}
.reveal.is-in { opacity: 1; transform: none; }
html.no-js .reveal { opacity: 1; transform: none; }

.line-reveal { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.08em; }
.line-reveal > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 760ms cubic-bezier(.2,.75,.2,1);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.hero.is-ready .line-reveal > span { transform: translateY(0); }
html.no-js .line-reveal > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .line-reveal > span { transform: none !important; transition: none !important; }
  .hero__media img, .ink-stain, .hero__gloss { animation: none !important; }
  .faq-item > .answer { transition: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .channels { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero__title { max-width: 100%; }
  .stat b { font-size: 2.2rem; }
}
@media (max-width: 400px) {
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .config__preview, .config__controls { padding: 20px; }
}

.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}

/* ============================================================
   LUXURY EPHEMERA COLLAGE OVERLAY — wall-to-wall cut-paper
   Continuous fine-laid ivory substrate, gilt-foil ephemera toolkit
   (stamps, postmarks, tickets, wax seals, ribbon, labels, contents
   slips, folios, gilt plates), letterpress cards, and the signature
   pinned scene "PROJEKSIYON" — a brass slide-projector carousel that
   clicks and advances 35mm plates through a lit gate.
   ============================================================ */

/* --- sticky-fix: CLIP not hidden (body overflow-x:hidden breaks position:sticky) --- */
html{ overflow-x:clip; overflow-y:visible; }
body{ overflow-x:clip; overflow-y:visible; max-width:100vw; }

:root{
  /* ONE metallic gold */
  --gilt-hi:#ead39a; --gilt:#c3a25c; --gilt-lo:#7c5f28;
  --gilt-grad:linear-gradient(135deg,#eed49a 0%,#caa960 24%,#7c5f28 50%,#caa960 76%,#f0dca2 100%);
  --gold-line:rgba(150,116,52,.42);
  --paper:#f6efe0; --paper-2:#ece2ce; --paper-ink:#2a2418;
  --mat:#faf5ea; --matline:rgba(120,92,40,.30);
  --wax:#6f2b26; --velvet:#241c1a; --deep:#1b1712;
  /* deepen the loud red to a restrained oxblood printer's ink */
  --accent:#7c2b25; --accent-text:#6f2620;
  --accent2:#201a17;
}

section, .hero, .site-header, .site-footer, .manset, .dosya, .secki,
.roportaj, .notlar, .iletisim, .trust-strip, .page-hero { position:relative; }

/* --- CONTINUOUS FINE-LAID IVORY SUBSTRATE (fixed, wall-to-wall) --- */
body{
  background-color:#efe7d5;
  background-image:
    radial-gradient(120% 90% at 14% -6%, rgba(255,250,235,.72), transparent 46%),
    radial-gradient(120% 90% at 90% 20%, rgba(150,116,52,.06), transparent 44%),
    radial-gradient(100% 80% at 50% 114%, rgba(40,34,20,.08), transparent 60%),
    radial-gradient(rgba(60,48,26,.045) 1px, transparent 1.6px),
    repeating-linear-gradient(90deg, rgba(60,48,26,.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(60,48,26,.028) 0 1px, transparent 1px 26px),
    linear-gradient(180deg,#f4ecdd,#ede3cf 58%,#e6dbc4);
  background-size:auto,auto,auto,6px 6px,auto,auto,auto;
  background-attachment:fixed,fixed,fixed,fixed,fixed,fixed,fixed;
  background-position:0 0,0 0,0 0,2px 3px,0 0,0 0,0 0;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  box-shadow:inset 0 0 220px rgba(60,46,18,.18), inset 0 0 0 9px rgba(120,95,45,.08);
  background:radial-gradient(130% 90% at 50% -8%, rgba(255,250,232,.5), transparent 55%);
}
main{ position:relative; z-index:2; }
section > .container, .trust-strip > .container{ position:relative; z-index:4; }

/* --- neutralise flat fills so the ivory collage wall shows through --- */
.manset, .dosya, .secki, .notlar, .iletisim{ background:transparent !important; }
.dosya, .iletisim{ overflow:visible !important; }
/* hairline gold rule where sections meet */
.section + .section::after,
.trust-strip + .section::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:3; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold-line) 16%,var(--gold-line) 84%,transparent);
}

/* header = translucent ivory masthead with a gilt picture-rail edge */
.site-header{ background:rgba(246,239,224,.82) !important; backdrop-filter:blur(9px) saturate(1.15);
  -webkit-backdrop-filter:blur(9px) saturate(1.15);
  border-bottom:1px solid var(--gold-line) !important; }
.site-header.is-scrolled{ background:rgba(246,239,224,.96) !important; box-shadow:0 10px 30px -22px rgba(60,46,18,.5); }
.brand__mark{ position:relative; }
.brand__mark::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--gilt-grad); border-radius:2px; opacity:.92; }
.brand__issue{ border-color:var(--gilt) !important; color:var(--accent-text) !important;
  background:linear-gradient(180deg,rgba(195,162,92,.18),rgba(195,162,92,.08)); }

/* dark zones become velvet-espresso collage bands (roportaj, trust, footer) */
.trust-strip{ background-color:#1b1712 !important;
  background-image:
    radial-gradient(120% 120% at 50% -20%, rgba(195,162,92,.14), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 140px),
    linear-gradient(180deg,#221b18,#171310) !important;
  border-block:1px solid var(--gilt) !important; }
.roportaj{ background-color:#241c1a !important;
  background-image:
    radial-gradient(120% 90% at 20% -10%, rgba(195,162,92,.12), transparent 55%),
    radial-gradient(rgba(255,255,255,.028) 1px, transparent 1.5px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 150px),
    linear-gradient(180deg,#271e1b,#1a1512) !important;
  background-size:auto,7px 7px,auto,auto !important;
  border-block:2px solid var(--gilt) !important; }
.site-footer{ background-color:#1b1712 !important;
  background-image:
    radial-gradient(120% 90% at 50% -10%, rgba(195,162,92,.11), transparent 55%),
    radial-gradient(rgba(255,255,255,.024) 1px, transparent 1.5px),
    linear-gradient(180deg,#221b18,#151110) !important;
  background-size:auto,8px 8px,auto !important;
  border-top:2px solid var(--gilt) !important; }
.footer-brand .brand__mark::after{ background:var(--gilt-grad); }

/* --- EYEBROW -> letterpress brass chip --- */
.eyebrow{
  align-items:center; gap:.7em;
  background:linear-gradient(180deg,rgba(176,141,79,.16),rgba(176,141,79,.08));
  border:1px solid rgba(150,116,52,.30);
  padding:5px 12px; border-radius:2px; transform:rotate(-.5deg);
  box-shadow:2px 3px 0 rgba(90,70,30,.12);
}
.eyebrow::before{ background:var(--gilt) !important; }
.roportaj .eyebrow{ color:#ead39a !important;
  background:linear-gradient(180deg,rgba(234,211,154,.16),rgba(234,211,154,.07)); border-color:rgba(234,211,154,.32); }
.roportaj .eyebrow::before{ background:#ead39a !important; }
.hero .eyebrow{ color:#f0d6a2 !important;
  background:linear-gradient(180deg,rgba(240,214,162,.20),rgba(240,214,162,.08)); border-color:rgba(240,214,162,.4); }
.hero .eyebrow::before{ background:#f0d6a2 !important; }

/* --- CARDS -> gilt-framed clippings & letterpress cut-paper --- */
.manset__aside, .cta-card, .form-card, .plan, .member, .channel, .hours-card{
  background:linear-gradient(180deg,var(--mat),var(--paper-2)) !important;
  border:1px solid var(--matline) !important; border-radius:3px !important;
  box-shadow:0 22px 40px -30px rgba(60,46,18,.44), inset 0 0 0 1px rgba(255,255,255,.42) !important;
}
.manset__aside{ border-top:3px solid var(--gilt) !important; }
.piece{
  border:5px solid var(--gilt) !important; border-image:var(--gilt-grad) 1 !important;
  border-radius:0 !important; background:var(--mat) !important;
  box-shadow:inset 0 0 0 1px var(--matline), 0 26px 42px -26px rgba(60,46,18,.5) !important;
}
.dosya__figure{ border:7px solid var(--gilt) !important; border-image:var(--gilt-grad) 1 !important;
  border-radius:0 !important; box-shadow:inset 0 0 0 2px rgba(120,92,40,.3),
  0 34px 52px -28px rgba(60,46,18,.55) !important; }
.config{ border:1px solid var(--matline) !important; border-radius:4px !important;
  background:linear-gradient(180deg,var(--mat),var(--paper-2)) !important;
  box-shadow:0 34px 60px -40px rgba(60,46,18,.55), inset 0 0 0 1px rgba(255,255,255,.4) !important; }
.config__preview{ background-color:#1b1712 !important;
  background-image:radial-gradient(120% 120% at 80% -10%, rgba(195,162,92,.14), transparent 55%),
    linear-gradient(180deg,#221b18,#161210) !important; }
.config__preview-media{ border:5px solid var(--gilt) !important; border-image:var(--gilt-grad) 1 !important; border-radius:0 !important; }
.faq{ border-top:2px solid var(--gilt) !important; }
.notes-list{ border-top:2px solid var(--gilt) !important; }
.manset__pull{ border-left-color:var(--gilt) !important; }
.dropcap::first-letter{ color:var(--accent-text); }

/* pull-quote flourish */
.manset__pull::before{ content:"\201C"; font-family:var(--serif); color:var(--gilt);
  opacity:.5; font-size:1.4em; line-height:0; vertical-align:-.35em; margin-right:.06em; }

/* ============================================================
   EPHEMERA DECOR SYSTEM  (.pm absolute, pointer-events:none)
   ============================================================ */
.pm{ position:absolute; pointer-events:none; z-index:1; }
.pm-decor{ left:0; right:0; width:100%; }

/* full-width hairline gilt picture-rail */
.pm-rail{ height:7px; left:0; right:0; width:100%;
  background:linear-gradient(180deg, rgba(234,211,154,.5), rgba(124,95,40,.32) 48%, rgba(80,58,22,.32));
  box-shadow:0 3px 7px -3px rgba(60,46,18,.5), inset 0 1px 0 rgba(255,246,214,.6); }
.pm-rail::after{ content:""; position:absolute; left:0; right:0; top:7px; height:4px;
  background:linear-gradient(180deg, rgba(60,46,18,.2), transparent); }

/* gilt-framed plate */
.pm-frame{ width:68px; height:88px; background:var(--mat);
  border:5px solid var(--gilt); border-image:var(--gilt-grad) 1;
  box-shadow:0 20px 30px -16px rgba(60,46,18,.5), inset 0 0 0 2px rgba(120,92,40,.24);
  transform:rotate(-3deg); }
.pm-frame::before{ content:""; position:absolute; inset:5px; border:1px solid var(--matline);
  background-image:repeating-linear-gradient(0deg, rgba(40,38,30,.1) 0 1px, transparent 1px 6px); opacity:.5; }
.pm-frame.wide{ width:98px; height:72px; }
.pm-frame.tall{ width:58px; height:102px; }

/* postage stamp (perforated, denomination) */
.pm-stamp{ width:52px; height:64px; background:var(--paper);
  color:var(--accent-text); transform:rotate(-5deg);
  padding:5px; box-shadow:0 12px 22px -13px rgba(60,46,18,.5);
  -webkit-mask:radial-gradient(circle 3px at 3px 3px, transparent 2.4px, #000 2.6px) -3px -3px/10px 10px;
  mask:radial-gradient(circle 3px at 3px 3px, transparent 2.4px, #000 2.6px) -3px -3px/10px 10px; }
.pm-stamp::before{ content:""; position:absolute; inset:5px; border:1px solid rgba(111,38,32,.5);
  background:
    radial-gradient(circle at 50% 42%, rgba(111,38,32,.14), transparent 62%),
    repeating-linear-gradient(0deg, rgba(40,38,30,.08) 0 1px, transparent 1px 5px); }
.pm-stamp::after{ content:"07"; position:absolute; left:0; right:0; bottom:7px; text-align:center;
  font-family:var(--serif); font-weight:600; font-style:italic; font-size:14px;
  color:var(--accent-text); }

/* postmark ring (circular date cancel) */
.pm-post{ width:64px; height:64px; border-radius:50%;
  border:1.5px solid rgba(111,38,32,.5); opacity:.62; transform:rotate(-8deg);
  display:grid; place-items:center; }
.pm-post::before{ content:""; position:absolute; inset:7px; border-radius:50%;
  border:1px dashed rgba(111,38,32,.45); }
.pm-post::after{ content:"ISTANBUL"; font-family:var(--mono); font-size:6.5px; letter-spacing:.14em;
  color:rgba(111,38,32,.7); }

/* vapur / admission ticket stub */
.pm-ticket{ width:104px; height:40px; background:var(--paper); transform:rotate(3deg);
  box-shadow:0 12px 22px -14px rgba(60,46,18,.5); display:flex; align-items:stretch;
  font-family:var(--mono); font-size:8px; letter-spacing:.1em; color:var(--paper-ink);
  border:1px solid rgba(40,38,30,.16); }
.pm-ticket::before{ content:"VAPUR"; writing-mode:vertical-rl; text-orientation:mixed;
  width:26px; display:grid; place-items:center; color:#fff;
  background:var(--accent-text); font-weight:700; letter-spacing:.16em; }
.pm-ticket::after{ content:"BOGAZICI HATTI 07"; flex:1; display:grid; place-items:center;
  border-left:1px dashed rgba(40,38,30,.4);
  text-align:center; padding:0 4px; }

/* silk ribbon */
.pm-ribbon{ width:120px; height:16px; transform:rotate(-4deg);
  background:linear-gradient(180deg,#8a3a33,#6f2b26 50%,#4e1c19);
  box-shadow:0 8px 16px -9px rgba(70,20,16,.6), inset 0 1px 0 rgba(255,255,255,.14); }
.pm-ribbon::before,.pm-ribbon::after{ content:""; position:absolute; top:0; bottom:0; width:16px;
  background:linear-gradient(180deg,#7a322c,#5e211d); }
.pm-ribbon::before{ left:-9px; clip-path:polygon(0 0,100% 0,100% 100%,0 100%,45% 50%); }
.pm-ribbon::after{ right:-9px; clip-path:polygon(0 0,100% 0,55% 50%,100% 100%,0 100%); }

/* gummed luggage / archive label */
.pm-label{ background:var(--paper); color:var(--paper-ink); transform:rotate(-1.6deg);
  font-family:var(--mono); font-size:9px; line-height:1.4; letter-spacing:.04em;
  padding:7px 12px 8px; max-width:168px;
  border:1px solid rgba(120,92,40,.24); border-left:4px solid var(--gilt);
  box-shadow:0 14px 24px -14px rgba(60,46,18,.5); }
.pm-label b{ display:block; font-family:var(--serif); font-weight:600; font-style:italic; font-size:12px;
  color:var(--accent-text); margin-bottom:1px; letter-spacing:0; }
.pm-label i{ font-style:italic; color:var(--muted); }

/* contents / masthead slip (cut editorial strip) */
.pm-slip{ background:var(--paper); color:var(--paper-ink);
  font-family:var(--serif); font-weight:600; font-size:15px; font-style:italic; letter-spacing:.005em;
  padding:5px 13px; white-space:nowrap; box-shadow:0 10px 20px -12px rgba(60,46,18,.5);
  border-top:1px solid rgba(40,38,30,.16); border-bottom:1px solid rgba(40,38,30,.16);
  transform:rotate(-2deg); }
.pm-slip.ink{ background:var(--deep); color:var(--gilt-hi); border-color:rgba(0,0,0,.4); font-style:normal; font-weight:600; }

/* gold-foil initial (cut-letter) */
.pm-letter{ width:30px; height:34px; display:grid; place-items:center;
  font-family:var(--serif); font-weight:600; font-size:20px; color:var(--paper-ink);
  background:var(--paper); box-shadow:0 8px 16px -10px rgba(60,46,18,.5); transform:rotate(-5deg); }
.pm-letter.foil{ background:var(--deep); color:var(--gilt-hi); text-shadow:0 1px 0 rgba(0,0,0,.4); }

/* halftone patch */
.pm-dot{ width:52px; height:52px; opacity:.4; transform:rotate(6deg);
  background-image:radial-gradient(rgba(40,38,30,.5) 22%, transparent 24%); background-size:8px 8px; }

/* torn deckle scrap (faint column lines) */
.pm-scrap{ width:86px; height:56px; background:var(--paper);
  box-shadow:0 12px 22px -13px rgba(60,46,18,.5);
  background-image:repeating-linear-gradient(0deg, rgba(40,38,30,.11) 0 1px, transparent 1px 6px);
  clip-path:polygon(2% 8%,18% 2%,40% 7%,62% 1%,86% 6%,99% 14%,97% 40%,100% 66%,95% 92%,74% 99%,50% 94%,28% 100%,8% 95%,1% 70%,4% 40%);
  transform:rotate(-4deg); }

/* register + crop ticks */
.pm-cross{ width:22px; height:22px; opacity:.7; }
.pm-cross::before,.pm-cross::after{ content:""; position:absolute; background:rgba(150,116,52,.6); }
.pm-cross::before{ left:50%; top:0; width:1.5px; height:100%; transform:translateX(-50%); }
.pm-cross::after{ top:50%; left:0; height:1.5px; width:100%; transform:translateY(-50%); }
.pm-crop{ width:20px; height:20px; border-top:2px solid rgba(150,116,52,.55); border-left:2px solid rgba(150,116,52,.55); }
.pm-crop.br{ border-top:0; border-left:0; border-bottom:2px solid rgba(150,116,52,.55); border-right:2px solid rgba(150,116,52,.55); }

/* dateline stamp (oxblood) */
.pm-dateline{ font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-text); border:1.5px solid var(--accent-text); border-radius:3px;
  padding:5px 8px; opacity:.62; transform:rotate(-4deg); background:rgba(124,43,37,.05); }

/* folio number */
.pm-folio{ font-family:var(--mono); font-size:12px; letter-spacing:.22em; color:var(--accent-text); opacity:.62; }

/* spotlight glow */
.pm-glow{ width:220px; height:150px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,247,224,.5), transparent 72%); filter:blur(4px); }

/* wax seal (E monogram) */
.pm-seal{ width:62px; height:62px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #8a3a33, var(--wax) 58%, #4e1c19 100%);
  box-shadow:0 12px 22px -10px rgba(70,20,16,.6), inset 0 2px 4px rgba(255,255,255,.18), inset 0 -6px 10px rgba(0,0,0,.35);
  display:grid; place-items:center; transform:rotate(-6deg); }
.pm-seal::before{ content:""; position:absolute; inset:6px; border-radius:50%; border:1px dashed rgba(255,230,210,.4); }
.pm-seal::after{ content:"E"; font-family:var(--serif); font-weight:600; font-style:italic; font-size:26px;
  color:rgba(255,236,214,.92); text-shadow:0 1px 1px rgba(0,0,0,.4); }
.pm-seal.lg{ width:84px; height:84px; }
.pm-seal.lg::after{ font-size:34px; }

/* glassine tape */
.pm-glassine{ width:80px; height:22px; background:rgba(176,141,79,.16);
  border:1px solid rgba(255,255,255,.42); box-shadow:0 4px 9px -6px rgba(60,46,18,.5);
  transform:rotate(-6deg); }
.pm-glassine::before,.pm-glassine::after{ content:""; position:absolute; top:0; bottom:0; width:6px;
  background:repeating-linear-gradient(180deg, rgba(60,46,18,.06) 0 2px, transparent 2px 4px); }
.pm-glassine::before{ left:0 } .pm-glassine::after{ right:0 }
.pm-glassine.gold{ background:rgba(195,162,92,.26); }

/* mobile decor curation — keep ~45%, hide the rest, scale heavy pieces */
@media (max-width:900px){ .pm-bleed:nth-of-type(2n){ display:none !important; } }
@media (max-width:600px){
  .pm-bleed:nth-of-type(3n+1){ display:none !important; }
  .pm-frame,.pm-label,.pm-scrap,.pm-seal,.pm-slip,.pm-ticket,.pm-stamp,.pm-post,.pm-ribbon{
    transform:scale(.8) rotate(-2deg); transform-origin:top left; }
  .pm-glow{ display:none; }
}
@media (max-width:760px){
  .hero .pm-seal{ top:13% !important; right:8px !important; }
  .hero .pm-slip{ font-size:12px; }
}

/* ============================================================
   SIGNATURE SCENE — PROJEKSIYON (brass slide-projector carousel)
   A vintage projector throws a warm light cone onto a screen; as you
   scroll the carousel CLICKS and ADVANCES 35mm plates through the gate
   — focus racks blur->sharp, the beam flickers, dust drifts in the cone.
   ============================================================ */
.cine-track{ position:relative; }
.cine-pin{ position:sticky; top:0; height:100vh; overflow:hidden; display:grid; place-items:center; }
.proj-track{ height:420vh; }
.proj-pin{
  background-color:#1a1512;
  background-image:
    radial-gradient(120% 80% at 50% -6%, rgba(120,86,40,.28), transparent 55%),
    radial-gradient(rgba(255,255,255,.02) 1px, transparent 1.5px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 150px),
    linear-gradient(180deg,#241b17,#120e0c);
  background-size:auto,7px 7px,auto,auto;
  box-shadow:inset 0 0 220px rgba(0,0,0,.6), inset 0 0 0 9px rgba(120,95,45,.12);
}
.proj-wrap{ position:relative; z-index:4; width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:clamp(16px,4vw,32px);
  display:grid; grid-template-columns:1fr; gap:clamp(22px,4vw,44px); align-items:center; }
@media (min-width:1000px){ .proj-wrap{ grid-template-columns:1.05fr .82fr; } }

/* --- stage: screen (top-right) + projector (bottom-left) + beam --- */
.proj-stage{ position:relative; width:100%; max-width:540px; aspect-ratio:5/4;
  margin-inline:auto; }

/* projection screen with gilt easel frame */
.proj-screen{ position:absolute; top:2%; right:0; width:64%; aspect-ratio:4/3;
  border:11px solid var(--gilt); border-image:var(--gilt-grad) 1;
  background:#0b0a09; overflow:hidden;
  box-shadow:inset 0 0 0 2px rgba(120,92,40,.4), 0 40px 60px -30px rgba(0,0,0,.7),
    0 0 60px -10px rgba(255,224,150,.16); }
.proj-screen::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:radial-gradient(120% 120% at 30% 20%, rgba(255,244,214,.14), transparent 60%),
    radial-gradient(120% 120% at 50% 120%, rgba(0,0,0,.5), transparent 60%);
  mix-blend-mode:screen; }
.proj-img{ width:100%; height:100%; object-fit:cover;
  filter:blur(6px) saturate(.92) contrast(1.02); transform:scale(1.04);
  transition:filter .08s linear; will-change:filter; }
.proj-vignette{ position:absolute; inset:0; z-index:2; pointer-events:none;
  box-shadow:inset 0 0 40px rgba(0,0,0,.55); }
.proj-slug{ position:absolute; left:8px; bottom:8px; z-index:4;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gilt-hi); background:rgba(12,10,9,.72); padding:3px 7px;
  border:1px solid rgba(195,162,92,.4); border-radius:2px; }

/* warm light cone from lens -> screen (diagonal trapezoid) */
.proj-beam{ position:absolute; left:20%; bottom:20%; width:56%; height:52%;
  transform-origin:left center; z-index:1; pointer-events:none; mix-blend-mode:screen;
  clip-path:polygon(0 42%, 100% 0, 100% 100%, 0 58%);
  background:linear-gradient(90deg, rgba(255,240,200,.06), rgba(255,238,196,.42) 88%);
  filter:blur(3px); opacity:.9; }
.proj-beam::before{ content:""; position:absolute; inset:0;
  clip-path:inherit; background:linear-gradient(90deg, rgba(255,246,220,0), rgba(255,250,232,.5) 92%);
  opacity:.5; }

/* dust motes drifting in the cone */
.proj-dust{ position:absolute; left:22%; bottom:16%; width:56%; height:56%; z-index:2;
  pointer-events:none; mix-blend-mode:screen; opacity:.7;
  background-image:
    radial-gradient(circle 1.4px at 20% 30%, rgba(255,245,215,.9), transparent 60%),
    radial-gradient(circle 1.1px at 46% 62%, rgba(255,245,215,.8), transparent 60%),
    radial-gradient(circle 1.6px at 68% 40%, rgba(255,245,215,.85), transparent 60%),
    radial-gradient(circle 1.1px at 82% 72%, rgba(255,245,215,.7), transparent 60%),
    radial-gradient(circle 1.3px at 34% 84%, rgba(255,245,215,.75), transparent 60%);
  animation:projDust 7s linear infinite; }
@keyframes projDust{ 0%{ transform:translate(0,0);} 50%{ transform:translate(-8px,-12px);} 100%{ transform:translate(0,0);} }

/* brass projector body */
.proj-body{ position:absolute; left:0; bottom:6%; width:40%; height:34%; z-index:3;
  border-radius:6px 8px 8px 6px;
  background:
    linear-gradient(180deg, rgba(255,236,178,.28), transparent 30%),
    linear-gradient(180deg,#b9924a,#7c5f28 52%,#5a4319);
  box-shadow:0 26px 40px -22px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,240,196,.4),
    inset 0 -8px 14px rgba(0,0,0,.4); border:1px solid rgba(60,44,18,.6); }
.proj-body::before{ content:""; position:absolute; left:8%; top:16%; width:30%; height:20%;
  border-radius:3px; background:linear-gradient(180deg,#4a3a18,#2b2110);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6); }
.proj-body::after{ content:""; position:absolute; right:-6%; top:34%; width:22%; height:32%;
  border-radius:50%; background:radial-gradient(circle, rgba(255,240,200,.9), rgba(255,214,140,.3) 60%, transparent 72%);
  filter:blur(2px); }
/* lens barrel throwing the beam */
.proj-lens{ position:absolute; right:-14%; top:36%; width:26%; height:26%; z-index:4;
  border-radius:50%;
  background:radial-gradient(circle at 40% 40%, #f4e2ad, #7c5f28 62%, #3a2c12);
  box-shadow:0 0 0 3px rgba(60,44,18,.7), 0 0 22px 4px rgba(255,224,150,.5),
    inset 0 2px 4px rgba(255,255,255,.4); }
.proj-lens::after{ content:""; position:absolute; inset:26%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,250,232,.95), rgba(255,232,170,.4) 70%, transparent); }

/* rotary carousel tray of mounted 35mm slides on top */
.proj-tray-window{ position:absolute; left:2%; top:-20%; width:78%; height:26%; z-index:5;
  overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 10% 90%,transparent);
  mask:linear-gradient(90deg,transparent,#000 10% 90%,transparent); }
.proj-tray{ display:flex; gap:6px; height:100%; align-items:center; will-change:transform; }
.slide-mount{ flex:0 0 auto; width:34px; height:34px; border-radius:2px;
  background:#211a11; border:2px solid #2c2210; padding:3px;
  box-shadow:0 4px 8px -4px rgba(0,0,0,.6), inset 0 0 0 1px rgba(195,162,92,.3); position:relative; }
.slide-mount img{ width:100%; height:100%; object-fit:cover; opacity:.9; }
.slide-mount.is-gate{ box-shadow:0 0 0 2px var(--gilt-hi), 0 0 14px 2px rgba(255,224,150,.6); }
.slide-mount.is-gate img{ opacity:1; }

/* the mount currently dropping into the gate */
.proj-gate{ position:absolute; left:30%; top:-2%; width:16%; height:20%; z-index:6;
  border-radius:2px; background:#211a11; border:2px solid var(--gilt);
  padding:2px; box-shadow:0 6px 12px -4px rgba(0,0,0,.7);
  will-change:transform, opacity; }
.proj-gate img{ width:100%; height:100%; object-fit:cover; }

/* --- caption / readout --- */
.proj-cap .proj-c{ opacity:0; transform:translateY(20px); }
.proj-cap .eyebrow{ color:#ead39a !important;
  background:linear-gradient(180deg,rgba(234,211,154,.16),rgba(234,211,154,.07)); border-color:rgba(234,211,154,.34); }
.proj-cap .eyebrow::before{ background:#ead39a !important; }
.proj-cap h2{ font-family:var(--serif); font-style:italic; font-size:clamp(2rem,4.4vw,3.2rem);
  font-weight:600; line-height:1.1; color:#f6efe0; }
.proj-cap h2 .accent-word{ color:var(--gilt-hi); }
.proj-cap .lead{ color:rgba(246,239,224,.82); max-width:46ch; margin-top:14px; font-size:1.08rem; }
.proj-readout{ margin-top:22px; display:inline-flex; align-items:center; flex-wrap:wrap; gap:10px 16px;
  font-family:var(--mono); font-weight:700; font-size:13px; color:#f6efe0;
  border:1px solid rgba(195,162,92,.4); border-radius:3px; padding:12px 16px;
  background:linear-gradient(180deg,rgba(40,31,26,.7),rgba(26,20,17,.7)); box-shadow:0 14px 24px -18px rgba(0,0,0,.6); }
.proj-readout b{ color:var(--gilt-hi); font-variant-numeric:tabular-nums; }
#projNum{ font-size:20px; min-width:1.6ch; text-align:right; display:inline-block; }
.proj-readout .proj-pct{ padding-left:16px; border-left:1px solid rgba(195,162,92,.32); color:rgba(246,239,224,.72); font-weight:600; }
.proj-legend{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:8px; counter-reset:proj-i; }
.proj-legend li{ position:relative; padding-left:30px; counter-increment:proj-i;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.02em; color:rgba(246,239,224,.5);
  transition:color .3s ease; }
.proj-legend li::before{ content:"0" counter(proj-i);
  position:absolute; left:0; top:0; font-size:.68rem; color:var(--gilt-hi);
  border:1px solid rgba(195,162,92,.4); border-radius:2px; padding:0 4px; }
.proj-legend li.on{ color:#f6efe0; }
.proj-legend li.on::before{ background:var(--gilt-grad); color:#241a06; border-color:transparent; }

@media (max-width:1000px){ .proj-track{ height:380vh; } .proj-stage{ max-width:440px; } }
@media (max-width:600px){ .proj-track{ height:320vh; } .proj-stage{ max-width:300px; }
  .proj-slug{ font-size:7.5px; } .proj-readout{ font-size:12px; } }

/* ============================================================
   PRELOADER + gold-dust motes
   ============================================================ */
#pre{ position:fixed; inset:0; z-index:99999; display:grid; place-items:center;
  background-color:#efe7d5;
  background-image:radial-gradient(120% 90% at 50% -8%, rgba(255,247,224,.55), transparent 55%),
    radial-gradient(rgba(60,48,26,.05) 1px, transparent 1.6px), linear-gradient(180deg,#f4ecdd,#e6dbc4);
  background-size:auto,10px 10px,auto;
  transition:opacity .7s ease, visibility .7s; }
#pre.done{ opacity:0; visibility:hidden; pointer-events:none; }
#pre .pl-in{ position:relative; text-align:center;
  background:linear-gradient(180deg,var(--paper),var(--paper-2)); color:var(--ink);
  padding:30px 46px; border:8px solid var(--gilt); border-image:var(--gilt-grad) 1;
  box-shadow:0 30px 56px -24px rgba(60,46,18,.5); transform:rotate(-1deg); }
#pre .pl-in::before{ content:""; position:absolute; top:-14px; left:50%; width:13px; height:13px;
  transform:translateX(-50%) rotate(45deg); background:linear-gradient(135deg,#f0dca2,#8a6a2a);
  box-shadow:0 4px 8px -2px rgba(60,46,18,.5); }
#pre .pl-mark{ font-family:var(--serif); font-weight:600; font-style:italic; font-size:clamp(26px,7vw,44px); letter-spacing:.02em; color:var(--ink); }
#pre .pl-mark b{ color:var(--accent-text); font-weight:600; font-style:normal; letter-spacing:.14em; display:block; font-size:.42em; margin-top:4px; }
#pre .pl-sub{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-top:10px; }
#pre .pl-bar{ margin:20px auto 0; width:min(220px,58vw); height:8px; border:1px solid var(--gold-line); background:rgba(120,95,45,.14); overflow:hidden; position:relative; }
#pre .pl-bar i{ position:absolute; inset:0; width:0;
  background:linear-gradient(90deg,var(--gilt-lo),var(--gilt-hi)); animation:plFill 1.15s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes plFill{ to{ width:100%; } }
#motes{ position:fixed; inset:0; z-index:3; pointer-events:none; mix-blend-mode:screen; opacity:.5; }
html.no-js #pre{ display:none; }

/* ============================================================
   REDUCED MOTION — resolve the projector scene to a final lit slide
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .proj-cap .proj-c{ opacity:1; transform:none; }
  .proj-img{ filter:saturate(.95) contrast(1.02) !important; }
  .proj-dust{ animation:none !important; }
  .proj-legend li{ color:#f6efe0; }
}

/* ============================================================
   ✦ ELEVATE PASS — top-tier editorial magazine
   Real-photo gilt plates & contact sheets pinned into airy
   gutters, gilt shimmer on hover, deeper espresso shadows,
   sharper display type. Additive; nothing above is removed.
   ============================================================ */
:root{
  --shadow-plate:0 2px 3px rgba(60,46,18,.12), 0 12px 20px -12px rgba(60,46,18,.42), 0 34px 54px -30px rgba(38,28,12,.6);
  --shadow-card:0 3px 6px rgba(60,46,18,.08), 0 26px 46px -30px rgba(60,46,18,.5), inset 0 0 0 1px rgba(255,255,255,.5);
  --gilt-sheen:linear-gradient(115deg,transparent 34%,rgba(255,246,220,0) 42%,rgba(255,251,236,.82) 50%,rgba(255,246,220,0) 58%,transparent 66%);
}
@keyframes giltSweep{ from{ background-position:-40% 0; } to{ background-position:150% 0; } }

/* ---------- REAL-PHOTO GILT PLATE (cut-out editorial clipping) ---------- */
.pm-plate{ width:clamp(94px,9vw,132px); background:linear-gradient(180deg,#fbf6ec,#ece1cb);
  padding:7px 7px 22px; border:1px solid var(--matline); border-radius:2px;
  box-shadow:var(--shadow-plate), inset 0 0 0 1px rgba(255,255,255,.55);
  transform:rotate(-4deg); z-index:1; }
.pm-plate::before{ content:""; position:absolute; inset:7px 7px 22px; z-index:2; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(120,92,40,.5); }
.pm-plate img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  border:3px solid var(--gilt); border-image:var(--gilt-grad) 1; filter:saturate(.96) contrast(1.03); }
.pm-plate b{ position:absolute; left:0; right:0; bottom:6px; text-align:center;
  font-family:var(--mono); font-weight:700; font-size:7.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-text); }
.pm-plate.tall{ width:clamp(84px,8vw,112px); }
.pm-plate.wide img{ aspect-ratio:4/3; }
.pm-plate.lg{ width:clamp(120px,12vw,172px); }
/* plates on espresso bands become lit velvet clippings */
.roportaj .pm-plate, .proj-pin .pm-plate, .site-footer .pm-plate, .trust-strip .pm-plate{
  background:linear-gradient(180deg,#221a12,#140f0b); border-color:rgba(195,162,92,.42);
  box-shadow:var(--shadow-plate), 0 0 34px -14px rgba(255,224,150,.4); }
.roportaj .pm-plate b, .proj-pin .pm-plate b, .site-footer .pm-plate b, .trust-strip .pm-plate b{ color:var(--gilt-hi); }
.roportaj .pm-plate img, .proj-pin .pm-plate img, .site-footer .pm-plate img{ filter:saturate(.9) contrast(1.05) brightness(1.02); }

/* ---------- CONTACT-SHEET FILM STRIP (real 35mm frames) ---------- */
.pm-contact{ display:flex; gap:3px; padding:13px 5px; background:#17120d; border-radius:2px;
  border:1px solid rgba(195,162,92,.34); transform:rotate(-2deg); z-index:1;
  box-shadow:var(--shadow-plate); }
.pm-contact::before, .pm-contact::after{ content:""; position:absolute; left:5px; right:5px; height:4px;
  background:repeating-linear-gradient(90deg, rgba(232,216,172,.72) 0 3px, transparent 3px 8px); }
.pm-contact::before{ top:4px; } .pm-contact::after{ bottom:4px; }
.pm-contact img{ width:clamp(30px,3vw,40px); aspect-ratio:3/4; object-fit:cover;
  border:1px solid rgba(195,162,92,.34); filter:sepia(.18) saturate(.94) contrast(1.03); }

/* keep the photo collage a wide-gutter luxury; curate away below desktop */
@media (max-width:1100px){ .pm-plate, .pm-contact{ display:none !important; } }

/* ---------- GILT SHIMMER SWEEP on hover ---------- */
.piece__media, .dosya__figure{ position:relative; }
.piece__media::after, .dosya__figure::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:var(--gilt-sheen); background-size:250% 100%; background-position:-40% 0;
  opacity:0; mix-blend-mode:screen; }
.piece:hover .piece__media::after,
.dosya__figure:hover::after{ opacity:1; animation:giltSweep .85s cubic-bezier(.2,.7,.2,1); }
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,251,236,.6) 50%,transparent 60%);
  background-size:250% 100%; background-position:-40% 0; opacity:0; mix-blend-mode:screen; }
.btn-primary:hover::after, .btn-primary:focus-visible::after{ opacity:1; animation:giltSweep .8s ease; }
@media (prefers-reduced-motion:reduce){
  .piece__media::after, .dosya__figure::after, .btn-primary::after{ animation:none !important; opacity:0 !important; }
}

/* ---------- deeper espresso shadows on the paper cards ---------- */
.piece{ box-shadow:inset 0 0 0 1px var(--matline), var(--shadow-plate) !important; }
.piece:hover{ box-shadow:inset 0 0 0 1px var(--gilt), 0 6px 10px rgba(60,46,18,.12), 0 40px 62px -30px rgba(38,28,12,.62) !important; }
.channel:hover, .manset__aside:hover, .cta-card:hover{
  box-shadow:var(--shadow-card), 0 40px 60px -34px rgba(38,28,12,.5) !important; }

/* ---------- sharper display typography + gilt editorial rule ---------- */
.section-head h2{ font-size:clamp(2.6rem, 1.75rem + 4vw, 4.9rem); letter-spacing:-0.02em; }
.section-head{ position:relative; }
.section-head h2::after{ content:""; display:block; width:66px; height:2px; margin-top:.42em;
  background:var(--gilt-grad); border-radius:2px; box-shadow:0 1px 0 rgba(255,255,255,.3); }
.hero__title{ font-size:clamp(3.1rem, 1.3rem + 8.6vw, 5rem); }
.manset__pull{ font-size:clamp(2rem, 1.35rem + 2.2vw, 3.1rem); }
.dropcap::first-letter{ font-size:4.9em; padding:.04em .14em 0 0;
  text-shadow:0 1px 0 rgba(255,255,255,.45), 2px 3px 0 rgba(120,92,40,.16); }
.roportaj__portrait .dropcap::first-letter, .manset__body .dropcap::first-letter,
.dosya__body .dropcap::first-letter{ text-shadow:0 1px 0 rgba(255,255,255,.35), 2px 3px 0 rgba(120,92,40,.14); }
/* espresso portrait plate gets the gilt frame + shimmer too */
.roportaj__portrait img{ border:5px solid var(--gilt); border-image:var(--gilt-grad) 1; border-radius:0;
  box-shadow:0 30px 50px -28px rgba(0,0,0,.6); }

/* fix: header must stay pinned on scroll ("фиксированный"); redesign had set it
   position:relative. Use sticky (in-flow) + drop the header-height padding-top on
   main so the first section sits flush at the very top (no double gap). */
.site-header{ position: sticky !important; top: 0; z-index: 1080; }
main{ padding-top: 0 !important; }