/* NOIRCRU SS26 — TIMELESS — luxury monochrome */

html {
  scroll-behavior: smooth;
  /* Offset for the sticky header so anchor scrolls don't hide section tops */
  scroll-padding-top: 96px;
}

:root {
  /* monochrome ink */
  --ink: #000000;
  --ink-90: #0a0a0a;
  --ink-70: rgba(0, 0, 0, 0.72);
  --ink-60: rgba(0, 0, 0, 0.58);
  --ink-50: rgba(0, 0, 0, 0.48);
  --ink-40: rgba(0, 0, 0, 0.36);
  --ink-20: rgba(0, 0, 0, 0.16);
  --ink-10: rgba(0, 0, 0, 0.08);
  --paper: #f6f4ee;
  /* Studio photo bg = pure white (#fefefe sampled). Card bg matches exactly
     so contain letterbox seams disappear. Page tonal warmth comes from
     section bg (--paper) and accents, not the card media well. */
  --paper-bright: #ffffff;
  --paper-warm: #fbf9f4;
  --line: rgba(0, 0, 0, 0.12);
  --line-soft: rgba(0, 0, 0, 0.06);

  /* type */
  --sans:   "Outfit", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif:  "Cormorant Garamond", "Bodoni Moda", "Didot", Georgia, serif;
  --display: var(--sans); /* legacy alias */

  /* metrics */
  --nav-h: 76px;
  --gutter: clamp(20px, 4vw, 64px);
  --maxw: 1680px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
input { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--paper); }

/* ─────────────────────────── BRAND MARK (inline wordmark) */
/* Replaces literal "NOIRCRU" text occurrences with the actual logo wordmark.
   Sized to sit on the baseline alongside surrounding tracked-caps text. */
.brand-mark {
  display: inline-block;
  height: 0.9em;
  width: auto;
  vertical-align: middle;
  transform: translateY(-0.06em);
  user-select: none;
  pointer-events: none;
}
/* Slight optical bump when the inline mark sits in tracked text (chrome, placards) */
.brand-mark--inline { height: 0.85em; }

/* Invert the wordmark on dark surfaces — wordmark image is black on transparent */
.hero .brand-mark,
.genese .brand-mark,
.solo .brand-mark {
  filter: invert(1) brightness(1.05);
  opacity: 0.85;
}
.hero .brand-mark:hover,
.genese .brand-mark:hover,
.solo .brand-mark:hover {
  opacity: 1;
}
/* Where it sits in light-colored tracked caps (lookbook placard, editorial signature, footer copyright),
   give it a slightly lower opacity so it doesn't shout next to the muted text */
.lookbook__placard .brand-mark,
.editorial__signature .brand-mark,
.footer__bottom .brand-mark {
  opacity: 0.8;
}

/* ─────────────────────────── TYPOGRAPHY SYSTEM
   .h-eyebrow  — micro caps, tracked
   .h-headline — thin uppercase sans (PRIMARY display)
   .h-graceful — italic serif (SECONDARY, poetic)
*/
.h-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.h-headline {
  font-family: var(--sans);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 0.98;
  color: var(--ink);
  margin: 0;
}
.h-headline--xl { font-size: clamp(40px, 7vw, 124px); letter-spacing: 0.04em; }
.h-headline--lg { font-size: clamp(28px, 4vw, 60px);  letter-spacing: 0.06em; }
.h-headline--md { font-size: clamp(20px, 2vw, 32px);  letter-spacing: 0.18em; }

.h-graceful {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.005em;
  line-height: 1.0;
  margin: 0;
  color: var(--ink);
}
.h-graceful--xl { font-size: clamp(40px, 6vw, 96px);  }
.h-graceful--lg { font-size: clamp(28px, 4vw, 60px);  }
.h-graceful--md { font-size: clamp(20px, 2.4vw, 36px); }

/* ─────────────────────────── NAV */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
  background: transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
  color: var(--ink);
}
.nav--invert { color: var(--paper); }
.nav--scrolled {
  background: rgba(246, 244, 238, 0.92);
  backdrop-filter: saturate(1.3) blur(14px);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
/* Mobile: tighten nav so mail + instagram icons don't overlap with brand on scroll */
@media (max-width: 720px) {
  .nav {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding: 0 16px;
  }
  .nav__brand { flex-shrink: 0; }
  .nav__right { gap: 6px; }
}

.nav__links { display: flex; gap: 36px; }
.nav__link {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  padding: 6px 0;
  position: relative;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease);
}
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }

.nav__brand { display: flex; align-items: center; justify-content: center; }
.nav__brand img {
  height: 36px;
  width: auto;
  transition: filter 0.35s var(--ease);
}
.nav--invert .nav__brand img { filter: invert(1); }
.nav--scrolled .nav__brand img { filter: none; }

.nav__right { display: flex; justify-content: flex-end; align-items: center; gap: 22px; }

.nav__lang {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 11px; font-weight: 300;
  letter-spacing: 0.32em; text-transform: uppercase;
}
.nav__lang button {
  font-size: inherit; letter-spacing: inherit;
  opacity: 0.5; transition: opacity 0.25s var(--ease);
}
.nav__lang button.is-active, .nav__lang button:hover { opacity: 1; }
.nav__lang-sep { opacity: 0.25; padding: 0 2px; }

/* Contact icon group (replaces WhatsApp pill) */
.nav__contacts {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 14px;
  margin-left: 6px;
  border-left: 1px solid currentColor;
  /* line is too strong at full color — fade it */
  border-left-color: rgba(0,0,0,0.16);
}
.nav--invert .nav__contacts { border-left-color: rgba(246,244,238,0.22); }
.nav--scrolled .nav__contacts { border-left-color: rgba(0,0,0,0.16); }

.nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.nav__icon:hover {
  background: currentColor;
  color: var(--paper);
}
.nav--invert .nav__icon:hover { color: var(--ink); }
.nav--scrolled .nav__icon:hover { color: var(--paper); }
.nav__icon svg { width: 16px; height: 16px; }
.nav__icon svg rect, .nav__icon svg path, .nav__icon svg circle { stroke: currentColor; }
.nav__icon svg circle[r="1"], .nav__icon svg path[fill] { fill: currentColor; stroke: none; }
.nav__icon:hover svg circle[r="1"], .nav__icon:hover svg path[fill] { fill: currentColor; }

.nav__wa {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase;
  padding: 9px 16px;
  border: 1px solid currentColor;
  border-radius: 999px;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.nav__wa:hover { background: currentColor; color: var(--paper); }
.nav--invert .nav__wa:hover { color: var(--ink); }
.nav__wa svg { width: 13px; height: 13px; fill: currentColor; }

.nav__menu-btn {
  display: none;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  z-index: 65;
}
.nav__menu-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.2; pointer-events: none; }

@media (max-width: 900px) {
  .nav__links, .nav__lang { display: none; }
  .nav__menu-btn { display: inline-flex; }
  /* Shrink wordmark on mobile so the nav row feels balanced */
  .nav__brand img { height: 28px; }
  /* Mobile contact icons — keep mail + instagram clearly separated, not stacked */
  .nav__contacts { gap: 4px; padding-left: 10px; margin-left: 4px; }
  .nav__icon { width: 32px; height: 32px; }
  .nav__icon svg { width: 14px; height: 14px; }
}

/* Mobile drawer — slides from the right with a backdrop scrim. Smoother
   and more drawer-like than the previous top-down snap. */
.mobile-menu {
  position: fixed; inset: 0;
  /* No background here — the drawer panel itself carries the paper colour.
     This wrapper holds the scrim + panel and stays click-through when
     pointer-events: none is set on close. */
  z-index: 80;
  visibility: hidden;
  pointer-events: none;
  background: rgba(0, 0, 0, 0);
  transition: background 0.36s var(--ease), visibility 0s linear 0.36s;
  display: block;
}
.mobile-menu.is-open {
  visibility: visible;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.32);
  transition: background 0.36s var(--ease), visibility 0s linear 0s;
}
/* The actual drawer panel — only this slides, scrim stays put. */
.mobile-menu::after { content: none; }
.mobile-menu > * {
  position: relative;
  z-index: 1;
}
.mobile-menu {
  --drawer-width: min(86vw, 380px);
}
.mobile-menu__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: var(--drawer-width);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.36s var(--ease);
  box-shadow: -24px 0 48px -16px rgba(0, 0, 0, 0.18);
  will-change: transform;
}
.mobile-menu.is-open .mobile-menu__panel {
  transform: translateX(0);
}
.mobile-menu__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px var(--gutter);
}
.mobile-menu__head img { height: 24px; }
.mobile-menu__close {
  font-family: var(--sans);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.32em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.mobile-menu__close svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.4; fill: none; }
.mobile-menu__list {
  flex: 1;
  display: flex; flex-direction: column; justify-content: flex-start;
  /* Single-screen menu — items fit without scroll on iPhone-sized viewports. */
  gap: 10px; padding: 18px var(--gutter);
}
.mobile-menu__list a {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(20px, 4.2vw, 32px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
/* English subtitles hidden — TR/EN/FR switcher in the foot already
   handles language. Cleaner, more decisive menu. */
.mobile-menu__list .it { display: none; }
.mobile-menu__foot {
  /* Pin to the bottom of the drawer (sticky inside the overflow container) */
  position: sticky;
  bottom: 0;
  background: var(--paper);
  padding: 14px var(--gutter) calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--sans);
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  font-weight: 300;
  border-top: 1px solid var(--line);
}

.mm-langs {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}
.mm-langs button {
  font-family: var(--sans);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.32em; text-transform: uppercase;
  opacity: 0.45;
  transition: opacity 0.2s var(--ease);
}
.mm-langs button.is-active, .mm-langs button:hover { opacity: 1; }

/* ─────────────────────────── HERO */
.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  color: var(--paper);
  background: #050505;
  isolation: isolate;
}

/* Masculine-cut tag near hero foot */
.hero__cut-tag {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.48em;
  text-transform: uppercase;
  color: rgba(246, 244, 238, 0.55);
  white-space: nowrap;
  opacity: 0;
  animation: fade 1.1s var(--ease-out) 1.45s forwards;
  z-index: 2;
}
.hero__cut-tag::before,
.hero__cut-tag::after {
  content: "";
  width: 28px;
  height: 1px;
  background: rgba(246, 244, 238, 0.35);
}
@media (max-width: 720px) { .hero__cut-tag { display: none; } }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  /* Natural lighting, high contrast — garments are black & white but imagery is colorful */
  filter: contrast(1.06) saturate(1.04);
  animation: heroKen 28s ease-out infinite alternate;
}
@keyframes heroKen {
  0%   { transform: scale(1.04) translate3d(-0.8%, -0.4%, 0); }
  100% { transform: scale(1.12) translate3d(0.8%, 0.4%, 0); }
}

/* ── Cinematic silk background (default) ── */
.hero__silk {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: radial-gradient(ellipse 100% 80% at 50% 50%, #0a0a0a 0%, #000000 80%);
}
.hero__silk-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.hero__silk-blob--wine {
  width: 95vw; height: 95vw;
  left: -25vw; top: -30vw;
  background: radial-gradient(circle, #2c2c2c 0%, rgba(44, 44, 44, 0.4) 35%, transparent 60%);
  opacity: 0.85;
  animation: silkDrift1 38s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.hero__silk-blob--ink {
  width: 80vw; height: 80vw;
  right: -20vw; bottom: -25vw;
  background: radial-gradient(circle, #181818 0%, rgba(24, 24, 24, 0.4) 35%, transparent 60%);
  opacity: 0.9;
  animation: silkDrift2 46s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.hero__silk-blob--ember {
  width: 60vw; height: 60vw;
  left: 30vw; top: 20vw;
  background: radial-gradient(circle, #232323 0%, rgba(35, 35, 35, 0.45) 30%, transparent 55%);
  opacity: 0.7;
  animation: silkDrift3 54s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.hero__silk-blob--smoke {
  width: 70vw; height: 70vw;
  left: -10vw; bottom: -25vw;
  background: radial-gradient(circle, #1f1f1f 0%, rgba(31, 31, 31, 0.45) 30%, transparent 55%);
  opacity: 0.55;
  animation: silkDrift4 62s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

@keyframes silkDrift1 {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); opacity: 0.85; }
  50%  { transform: translate3d(8%, 10%, 0) scale(1.12) rotate(8deg); opacity: 0.95; }
  100% { transform: translate3d(18%, 14%, 0) scale(1.22) rotate(14deg); opacity: 0.8; }
}
@keyframes silkDrift2 {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); opacity: 0.9; }
  50%  { transform: translate3d(-8%, -8%, 0) scale(1.18) rotate(-6deg); opacity: 1; }
  100% { transform: translate3d(-14%, -12%, 0) scale(1.28) rotate(-12deg); opacity: 0.85; }
}
@keyframes silkDrift3 {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); opacity: 0.7; }
  50%  { transform: translate3d(6%, -8%, 0) scale(1.2) rotate(6deg); opacity: 0.85; }
  100% { transform: translate3d(12%, -18%, 0) scale(1.34) rotate(12deg); opacity: 0.65; }
}
@keyframes silkDrift4 {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); opacity: 0.55; }
  50%  { transform: translate3d(10%, -6%, 0) scale(1.15) rotate(-4deg); opacity: 0.75; }
  100% { transform: translate3d(16%, -10%, 0) scale(1.25) rotate(-10deg); opacity: 0.5; }
}

/* Light sweep — silk catching light (neutral white) */
.hero__silk-sweep {
  position: absolute;
  inset: -60%;
  background: linear-gradient(
    108deg,
    transparent 32%,
    rgba(255, 255, 255, 0.045) 46%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.045) 54%,
    transparent 68%
  );
  mix-blend-mode: screen;
  animation: silkSweep 22s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes silkSweep {
  0%, 100% { transform: translate3d(-22%, 0, 0) rotate(0deg); opacity: 0.6; }
  50%      { transform: translate3d(22%, 0, 0) rotate(1.5deg); opacity: 1; }
}

/* Fabric fold SVG layer — sits on top of blobs, beneath grain */
.hero__silk-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  mix-blend-mode: multiply;
  opacity: 0.55;
  pointer-events: none;
}

/* Vignette specific to silk hero — keeps text readable */
.hero__silk-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 75% at 50% 45%, transparent 0%, transparent 45%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 25%, transparent 65%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

/* Video placeholder mode — surfaces a play indicator over the silk */
.hero__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
  opacity: 0.32;
  transition: opacity 0.4s var(--ease);
}
.hero--placeholder .hero__placeholder { opacity: 0.85; }
.hero__placeholder-play {
  width: 76px; height: 76px;
  border: 1px solid rgba(246, 244, 238, 0.6);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.hero__placeholder-play::before {
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent rgba(246, 244, 238, 0.85);
  margin-left: 4px;
}
.hero__placeholder-label {
  margin-top: 20px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(246, 244, 238, 0.6);
  text-align: center;
  line-height: 1.8;
}
.hero__placeholder-label em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  color: rgba(246, 244, 238, 0.85);
  display: block;
  margin-bottom: 4px;
}

.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 80% at 50% 10%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 28%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
}
.hero::after {
  content: "";
  position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.14;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
  animation: grain 1.4s steps(6) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0,0); }
  10% { transform: translate(-3%, -2%); } 20% { transform: translate(2%, 3%); }
  30% { transform: translate(-2%, 2%); }  40% { transform: translate(3%, -3%); }
  50% { transform: translate(-3%, 1%); }  60% { transform: translate(1%, -2%); }
  70% { transform: translate(-1%, 3%); }  80% { transform: translate(2%, -1%); }
  90% { transform: translate(-2%, 2%); }
}

.hero__chrome {
  position: absolute;
  top: calc(var(--nav-h) + 14px);
  left: var(--gutter); right: var(--gutter);
  display: flex; justify-content: space-between; align-items: center;
  z-index: 2;
  font-family: var(--sans);
  font-size: 10px; font-weight: 300;
  letter-spacing: 0.36em; text-transform: uppercase;
  color: rgba(246, 244, 238, 0.55);
}
.hero__chrome .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #e8443a;
  margin-right: 10px;
  vertical-align: middle;
  animation: rec 1.6s ease-in-out infinite;
}
@keyframes rec { 50% { opacity: 0.3; } }
.hero__chrome .timecode { font-variant-numeric: tabular-nums; }

.hero__inner {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
  padding: 0 var(--gutter);
  z-index: 1;
}

/* Eyebrow */
.hero__eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.48em;
  text-transform: uppercase;
  color: rgba(246, 244, 238, 0.78);
  margin-bottom: clamp(28px, 4vw, 56px);
  display: inline-flex;
  align-items: center;
  gap: 18px;
  opacity: 0;
  animation: fade 1.2s var(--ease-out) 0.3s forwards;
}
.hero__eyebrow::before,
.hero__eyebrow::after {
  content: "";
  display: inline-block;
  width: 40px; height: 1px;
  background: rgba(246, 244, 238, 0.5);
}
@keyframes fade { to { opacity: 1; } }

/* Primary headline — thin sans uppercase */
.hero__title {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(40px, 8.4vw, 140px);
  line-height: 0.92;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  color: var(--paper);
}
.hero__title .row { display: block; overflow: hidden; }
.hero__title .row > span {
  display: inline-block;
  transform: translateY(110%);
  animation: rise 1.2s var(--ease-out) forwards;
}
.hero__title .row:nth-child(1) > span { animation-delay: 0.4s; }
.hero__title .row:nth-child(2) > span { animation-delay: 0.55s; }
@keyframes rise { to { transform: translateY(0); } }

/* Chapter ribbon under title — "Chapter I — Genèse" */
.hero__chapter {
  margin-top: clamp(24px, 3.4vw, 44px);
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.52em;
  text-transform: uppercase;
  color: rgba(246, 244, 238, 0.92);
  opacity: 0;
  animation: fade 1.1s var(--ease-out) 0.92s forwards;
}
.hero__chapter-line {
  width: 56px;
  height: 1px;
  background: rgba(246, 244, 238, 0.6);
}
.hero__chapter-text { padding-left: 0.4em; padding-right: 0.4em; }

.hero__divider {
  width: 1px;
  height: clamp(28px, 4vw, 56px);
  background: rgba(246, 244, 238, 0.4);
  margin: clamp(24px, 3vw, 40px) auto;
  opacity: 0;
  animation: fade 1s var(--ease-out) 0.85s forwards;
}

/* Graceful italic serif subhead */
.hero__sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 4.2vw, 64px);
  line-height: 1;
  letter-spacing: -0.005em;
  color: rgba(246, 244, 238, 0.95);
  margin: 0;
  opacity: 0;
  animation: fade 1.1s var(--ease-out) 1s forwards;
}

.hero__sub2 {
  margin-top: clamp(28px, 3vw, 40px);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(246, 244, 238, 0.7);
  opacity: 0;
  animation: fade 1s var(--ease-out) 1.2s forwards;
}

/* hero corners */
.hero__corner {
  position: absolute;
  bottom: 36px;
  left: var(--gutter);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(246, 244, 238, 0.6);
  z-index: 2;
  line-height: 1.9;
  max-width: 30vw;
}
.hero__corner b {
  font-weight: 400;
  color: rgba(246, 244, 238, 0.95);
  display: block;
}
.hero__corner--right { left: auto; right: var(--gutter); text-align: right; }

@media (max-width: 720px) {
  .hero__corner { display: none; }
}

.hero__cue {
  position: absolute;
  bottom: 36px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.48em;
  text-transform: uppercase;
  color: rgba(246, 244, 238, 0.7);
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; z-index: 2;
}
.hero__cue-line {
  width: 1px; height: 40px;
  position: relative; overflow: hidden;
  background: rgba(246, 244, 238, 0.16);
}
.hero__cue-line::after {
  content: "";
  position: absolute; left: 0; right: 0; top: -18px;
  height: 18px;
  background: var(--paper);
  animation: cueSlide 2.4s ease-in-out infinite;
}
@keyframes cueSlide {
  0% { transform: translateY(0); }
  100% { transform: translateY(58px); }
}

.hero__scrubber {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(246, 244, 238, 0.16);
  z-index: 1;
}
.hero__scrubber::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--paper);
  width: 32%;
  animation: scrub 14s linear infinite;
}
@keyframes scrub { 0% { width: 0; } 100% { width: 100%; } }

/* ─────────────────────────── SECTION COMMON */
.section {
  padding: clamp(80px, 10vw, 160px) var(--gutter);
  position: relative;
}

.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(44px, 5vw, 72px);
}
.section-head__left { display: flex; flex-direction: column; gap: 18px; }
.section-head__num {
  font-family: var(--sans);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--ink-60);
}
.section-head__title {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 0.98;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}
.section-head__sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.05;
  color: var(--ink-70);
  letter-spacing: -0.005em;
}
.section-head__chapter {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.section-head__chapter::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--ink-20);
}
.section-head__action {
  font-family: var(--sans);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.32em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
  transition: gap 0.3s var(--ease);
}
.section-head__action:hover { gap: 18px; }
.section-head__action svg { width: 16px; height: 8px; stroke: currentColor; stroke-width: 1.2; fill: none; }

@media (max-width: 720px) {
  .section-head { grid-template-columns: 1fr; align-items: start; }
  .section-head__action { justify-self: start; }
}

/* ─────────────────────────── CATEGORY RAIL */
.cats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(48px, 6vw, 80px);
}
.cat {
  padding: 32px 16px;
  text-align: center;
  border-right: 1px solid var(--line);
  position: relative;
  transition: background 0.3s var(--ease);
  cursor: pointer;
}
.cat:last-child { border-right: 0; }
.cat__num {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 14px;
}
.cat__name {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(15px, 1.4vw, 22px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}
.cat__tr {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(14px, 1.2vw, 18px);
  color: var(--ink-60);
  letter-spacing: -0.005em;
}
.cat::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 56%; height: 2px;
  background: var(--ink);
  transition: transform 0.4s var(--ease);
}
.cat.is-active::after,
.cat:hover::after { transform: translateX(-50%) scaleX(1); }
.cat.is-active .cat__num,
.cat:hover .cat__num { color: var(--ink); }

@media (max-width: 900px) {
  .cats { grid-template-columns: repeat(3, 1fr); }
  .cat { padding: 22px 10px; }
  .cat:nth-child(3) { border-right: 0; }
  .cat:nth-child(1),
  .cat:nth-child(2),
  .cat:nth-child(3) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .cats {
    grid-template-columns: repeat(2, 1fr);
    /* A single continuous vertical line through the centre of the grid —
       drawn as a positioned pseudo-element so individual cell heights
     can't cause it to break or wobble. */
    position: relative;
  }
  .cats::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--line);
    transform: translateX(-0.5px);
    pointer-events: none;
  }
  .cat { padding: 20px 8px; }
  /* Disable per-cell right borders on mobile — the single divider above
     replaces them, eliminating the millimetric drift that came from
     uneven cell heights. */
  .cat:nth-child(odd),
  .cat:nth-child(even) { border-right: 0; }
  /* Horizontal dividers between rows — cells 1-4 carry a bottom border
     so the 2-col grid reads as a 3-row table (row 1 BLUZ/PANTOLON,
     row 2 ABIYE/AKSESUAR ... separated by hairlines). The .cats
     wrapper itself carries the bottom-of-grid border (row 3). */
  .cat:nth-child(1),
  .cat:nth-child(2),
  .cat:nth-child(3),
  .cat:nth-child(4) { border-bottom: 1px solid var(--line); }
  .cat__name { font-size: 13px; letter-spacing: 0.18em; }
}

/* ─────────────────────────── COLLECTION GRID
   Jil Sander breathing room — each piece stands like a sculpture in a
   museum vitrine. Toteme rhythm — middle column offsets down to create
   editorial waterfall, breaking the boring e-commerce grid. */
.collection {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Editorial baseline grid: equal vertical AND horizontal gaps, every
     card aligns on the same row baseline. (Toteme waterfall removed —
     the user asked for a fashion-magazine grid, not staggered offsets.) */
  gap: clamp(80px, 9vw, 140px) clamp(40px, 6vw, 120px);
  padding: clamp(40px, 5vw, 80px) 0;
  /* Force every row to size to the tallest card in that row, then push
     all .product children to stretch the full row height so the
     "Detayları gör" pin lines up across the row. */
  grid-auto-rows: 1fr;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .collection {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(60px, 8vw, 100px) clamp(32px, 4vw, 64px);
  }
}
/* Close button (X) visible only when product is expanded — replaces the
   "Detayları gizle" text-only close, giving the customer a clear escape
   on both mobile and desktop. */
.product__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 50;
  transition: background 0.2s ease;
}
.product__close:hover { background: rgba(0, 0, 0, 1); }
/* Expanded card = fullscreen modal on EVERY viewport. Photo grows big,
   details stack below in a single scrollable column. X close pins to
   viewport top-right. */
.product.is-expanded {
  position: fixed !important;
  inset: 0;
  z-index: 9999;
  background: #ffffff;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 64px clamp(20px, 4vw, 64px) 80px;
  margin: 0;
  height: 100dvh;
  max-width: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  -webkit-overflow-scrolling: touch;
}
.product.is-expanded .product__close {
  /* Absolute relative to .product.is-expanded (which is position:fixed).
     This avoids iOS safe-area / transform containing block bugs that
     can clip a position:fixed child. */
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 0px) + 8px);
  right: max(16px, env(safe-area-inset-right, 0px) + 8px);
  width: 44px;
  height: 44px;
  z-index: 10001;
}
.product.is-expanded > *:not(.product__close) {
  width: 100%;
  max-width: 680px;
}
.product.is-expanded .product__media {
  width: 100%;
  max-width: 560px;
  /* Tighter gap between the hero photo and the piece name + price below —
     gives the image more visual dominance on the detail page. */
  margin: 0 auto 18px;
  flex-shrink: 0;
  height: auto;
}

/* Compact card behavior on ALL viewports — desktop too should be calm,
   not overload the customer with text. Photo + name + price + toggle by default;
   detail expands only on click. */
.product .product__details { display: none; }
.product.is-expanded .product__details { display: block; }
.product .product__thumbs { display: none; }
.product.is-expanded .product__thumbs {
  display: flex;
  margin-top: 14px;
  gap: 6px;
  flex-wrap: wrap;
}
/* Whisper button — no box, no shouting. Soft serif italic with a hairline
   underline. The Row aesthetic — invitation, not command. */
.product__details-toggle {
  /* Full-width hairline so the underline runs edge-to-edge of the card
     and matches its sibling in the 2-col mobile grid — no millimetric
     asymmetry between left and right columns. */
  display: block;
  width: 100%;
  margin: 18px 0 0;
  padding: 8px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  text-align: left;
  color: var(--ink);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.product__details-toggle:hover {
  background: transparent;
  border-bottom-color: var(--ink);
}
/* When expanded, the X close button takes over — hide the text toggle to
   avoid redundant "Detayları gizle" + X. */
.product.is-expanded .product__details-toggle { display: none; }
/* Single-color products have no thumbs slot; remove the desktop reserve gap. */
.product:not(:has(.product__thumbs)) .product__head { margin-top: 0 !important; }
/* Keep 2 columns on mobile too — couture-grid feel below the hero,
   denser product discovery without forcing one-by-one vertical scroll. */
@media (max-width: 640px)  {
  .collection {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 14px;
    /* Mobile browser bars (Safari URL chrome, Chrome bottom toolbar) overlap
       the last row of cards. Reserve breathing room plus safe-area inset. */
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
  .product__thumb {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
  }
  /* Compact card: every card stretches to row height. */
  .product {
    align-self: stretch;
    height: 100%;
  }
  /* Reserve space for a two-line product name so single-line names don't
     pull the price chip up. Keeps every card's name+price row aligned. */
  .product__head {
    min-height: calc(22px * 1.05 * 2 + 4px);
    align-items: flex-start;
  }
  /* Modal styles are in base scope now (apply on all viewports). */
  .product.is-expanded .product__details-toggle { display: none !important; }
  .product__sub {
    min-height: 2.4em;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Mobile 2-up grid — CARD ALIGNMENT (bottom-aligned buttons).
     Card is a flex column anchored at top and bottom: photo + head sit
     at the top, "Detayları gör" pinned at the bottom via margin-top:auto.
     Combined with CSS Grid's default align-items: stretch, every card in
     a row has IDENTICAL height → buttons land on the same horizontal
     line, no matter how the product name wraps. */
  .product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
  .product__details-toggle {
    margin-top: auto;     /* pushes button to bottom of every card */
    margin-bottom: 8px;
    padding-top: 14px;
    padding-bottom: 6px;
    font-size: 13px;
  }
  /* Desktop reserves 104px for the thumbs strip slot on single-color pieces
     so they align with multi-color neighbours. On mobile thumbs are hidden
     for every card, so that 104px gap becomes a hole between photo and name.
     Reset it. */
  .product:not(:has(.product__thumbs)) .product__head { margin-top: 0 !important; }
  /* Tighter typography for compact card */
  .product__name { font-size: 22px; }
  .product__price { font-size: 13px; letter-spacing: 0.18em; }
  .product__sub { font-size: 9px; letter-spacing: 0.22em; }
  /* Photo nav arrows smaller on mobile */
  .product__nav { width: 30px; height: 30px; }
  .product__nav--prev { left: 8px; }
  .product__nav--next { right: 8px; }
  /* counter permanently hidden — no override needed */
  /* PRE-ORDER tag: hidden on mobile — it was covering the neckline/collar
     of every model. Pre-order context is already communicated by the
     section, and detail expand reveals "PRE-ORDER · 21 gün" inline. */
  .product__tag { display: none; }
  /* N° badge: small couture corner mark — nowrap + tabular nums so every
     card aligns to the same width regardless of the digits.
     !important because the desktop rule appears later in the source and
     would otherwise override these compact mobile values. */
  .product__num {
    /* Hard-pinned to the top-left corner (0,0) — no inset, flush against
       the card border. Couture price-tag feel, doesn't overlap the model. */
    top: 0 !important;
    left: 0 !important;
    font-size: 8.5px !important;
    min-width: 36px;
    text-align: center;
    padding: 3px 7px !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.92);
  }
  /* Category chip: hidden too — it lives on the dress and competes with
     the silhouette. Category is already shown via subtitle below the card. */
  .product__cat { display: none; }
}

/* Editorial-grade card: fixed flex column so meta rows align across the
   grid baseline. Stretch to row height; toggle pinned to bottom. */
.product {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* photo block top, CTA bottom — uniform */
  align-self: stretch;
  height: 100%;
}
/* Reserve consistent space for the name (2 lines worst case) and the
   subtitle (2 lines worst case) so that every card's price chip and
   "Detayları gör" hairline land on the same baseline across the row. */
.product__head {
  min-height: calc(clamp(22px, 2vw, 32px) * 1.05 * 2 + 4px);
  align-items: flex-start;
}
.product__sub {
  min-height: 2.6em;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product__details-toggle {
  margin-top: auto;
}
.product__media {
  position: relative;
  /* 2/3 matches the majority of photos (1023x1537). Contain shows the
     whole piece end-to-end with no cropping and a consistent garment
     scale across cards. Older 3/4 photos (Camélia brooch, c-files) get
     small side letterbox — invisible against pure white background. */
  aspect-ratio: 2 / 3;
  background: #ffffff;
  overflow: hidden;
  margin-bottom: 22px;
  border: 1px solid var(--line-soft);
}
.product__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* Cover + center — photo fills frame edge-to-edge, no top/bottom
     letterbox gaps. Centered position keeps the piece symmetric;
     wider photos crop only at the sides (mostly whitespace anyway). */
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.06) saturate(1.05);
  transition: transform 1.4s var(--ease);
}
.product__img--alt { display: none; }
.product:hover .product__img--main { transform: scale(1.02); }

/* Voie Lune (cropped jacket, p14/p67/p22) — the photo is shot wider
   than the standard 2/3 frame so sleeves get clipped at the sides
   under object-fit: cover. Show this piece in contain mode so the
   sleeves read in full. White card bg matches the studio paper, so
   the side letterbox is invisible. */
.product__img[src*="p14.jpg"],
.product__img[src*="p67.jpg"],
.product__img[src*="p22.jpg"] {
  object-fit: contain;
  object-position: center;
  transform: scale(0.96);
}

/* Inline prev/next arrows on the product photo — couture white dots on
   dark glass chip. Click overrides bubbling so the photo click (lightbox)
   isn't triggered. Touch swipe is handled separately on .product__media. */
.product__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  color: #fff;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  /* Always visible — mobile-first UX. Hover transition only intensifies bg. */
  opacity: 0.9;
  transition: opacity 0.25s var(--ease, ease), background 0.2s ease;
}
.product:hover .product__nav,
.product__nav:focus-visible { opacity: 1; }
.product__nav--prev { left: 12px; }
.product__nav--next { right: 12px; }
.product__nav:hover { background: rgba(0, 0, 0, 0.7); }
/* Counter PERMANENTLY hidden — no numbers on or near the photo, ever. */
.product__counter { display: none !important; }

/* N° collection tag AND PRE-ORDER badge hidden EVERYWHERE — neither
   was requested as visible. Only the category chip (CEKET · BLAZERS)
   is restored in the expanded detail view, since it's the actual
   product category label. */
.product__num { display: none !important; }
.product__tag { display: none !important; }
.product .product__cat { display: none !important; }
.product.is-expanded .product__cat { display: block !important; }

/* Bilingual subtitle (KAMELYALI CEKET · CAMELLIA BLAZER) hidden ON THE
   LISTING (compact card). Restored in detail view where the customer
   appreciates seeing both names while reading specs. */
.product .product__sub { display: none; }
.product.is-expanded .product__sub { display: block; }

.product__num {
  position: absolute;
  top: 18px; left: 18px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: var(--ink-60);
  z-index: 2;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.82);
  padding: 4px 9px;
  backdrop-filter: blur(4px);
}
.product__tag {
  position: absolute;
  top: 18px; right: 18px;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper-bright);
  border: 1px solid var(--ink);
  padding: 7px 10px 6px;
  z-index: 2;
  line-height: 1;
}
.product__cat {
  position: absolute;
  bottom: 18px; left: 18px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(0,0,0,0.6);
  padding: 6px 10px;
  backdrop-filter: blur(6px);
  z-index: 2;
  line-height: 1;
}

.product__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 4px;
  /* Reserve room for 1-line OR 2-line names so the "Detayları gör"
     button below always lands at the same vertical position across the
     grid row — no buttons appearing higher/lower depending on how the
     name wraps. */
  min-height: calc(1.05em * 2);
}
.product__name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2vw, 32px);
  letter-spacing: -0.005em;
  text-transform: none;
  margin: 0;
  line-height: 1.05;
  color: var(--ink);
}
.product__price {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  font-feature-settings: "tnum";
  white-space: nowrap;
  color: var(--ink);
}
.product__sub {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  /* Reserve 2 lines so cards with long bilingual subtitles (e.g. "KRUVAZE
     ALTIN DÜĞMELİ CEKET · DOUBLE-BREASTED BLAZER") don't push the cut/fabric
     rows out of alignment with neighbouring cards. 48px absorbs the natural
     height of the longest 2-line bilingual subtitle plus a small buffer. */
  min-height: 48px;
  align-content: flex-start;
}
.product__sub .sep { color: var(--ink-20); font-style: normal; font-size: 9px; }

/* Masculine-edge tagline */
.product__tagline {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 16px;
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}
.product__tagline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px; bottom: 6px;
  width: 2px;
  background: var(--ink);
}

/* Cut spec — architectural data row */
.product__cut {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  /* Reserve room for a 2-line value so cards with long cuts (e.g. "CROP ·
     YUVARLAK YAKA · AÇIK ÖN · PUANTİYE VEYA DÜZ") don't push KUMAŞ/RENK/BEDEN
     rows below them out of alignment with neighbouring cards. */
  min-height: 56px;
}
.product__cut-label {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.product__cut-value {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: right;
}

.product__fabric {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
}
.product__fabric span:first-child {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.product__fabric span:last-child {
  text-align: right;
}

/* Colors row — masculine grid metadata */
.product__colors {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.product__colors-label {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.product__swatches {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--ink-20);
  flex-shrink: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.swatch:hover { transform: scale(1.08); }
.swatch.is-active {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink);
}
.swatch--white, .swatch--ivory { border-color: var(--ink-40); }

/* Polka-dot swatch — black dots on white, for two-tone polka pieces */
.swatch--polka {
  background-image: radial-gradient(circle, var(--ink) 22%, transparent 24%);
  background-size: 5px 5px;
  background-position: 0 0;
  background-color: #ffffff !important;
  border-color: var(--ink-40);
}

/* Thumbnails — alternate views of the current color */
.product__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 18px;
  padding: 0;
  list-style: none;
  align-items: center;
}
/* Single-color pieces skip the thumbs row entirely (no <div class="product__thumbs"> in DOM).
   Reserve the equivalent space (14 + 72 + 18 = 104px) so those cards stay aligned
   with multi-color neighbours sharing the same grid row. */
.product:not(:has(.product__thumbs)) .product__head {
  margin-top: 104px;
}
.product__thumb {
  position: relative;
  width: 56px;
  height: 72px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--paper-bright);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.product__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product__thumb:hover { border-color: var(--ink-40); }
.product__thumb.is-active {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}

/* Visual separator between color groups in the thumbnail strip */
.product__thumb-sep {
  display: inline-block;
  width: 1px;
  height: 56px;
  background: var(--line);
  margin: 0 6px;
  flex-shrink: 0;
  align-self: center;
}
.product__colors-names {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-left: 6px;
}

/* Whisper note above CTA — Maison messaging, no shouting */
.product__preorder {
  font-family: var(--serif);
  font-style: italic;
  /* Bumped from 12.5 → 13.5 for mobile legibility. Slightly darker
     (ink-72 → ~28% gray) keeps the whisper feel while improving contrast. */
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-70);
  margin: 24px 0 16px;
  text-align: center;
}
.product__preorder::before { content: none; }

/* Pre-Order CTA — hairline border, transparent bg. The Row aesthetic:
   not a "buy now" button shouting at you, an invitation to a private
   collection. Ink-on-paper, full-width but quiet. */
.product__cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 14px;
  width: 100%;
  height: 54px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), gap 0.3s var(--ease);
  text-align: center;
  /* Compensate trailing letter-spacing on the last character so the visual
     centre of "PRE-ORDER →" sits at the button's true centre. */
  padding-left: 0.5em;
}
.product__cta span { padding-left: 0; }
.product__cta:hover { background: var(--ink); color: var(--paper); gap: 20px; }
.product__cta svg { width: 18px; height: 10px; }
.product__cta svg path { stroke: currentColor; }

.product__crafted {
  margin-top: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  /* Bumped from 12.5 → 13.5 for mobile legibility, slightly darker for
     better contrast on the cream paper background. */
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: var(--ink-70);
  text-align: center;
  max-width: 38ch;
  margin-left: auto;
  margin-right: auto;
}

.product__cta-secondary {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), gap 0.3s var(--ease);
  width: 100%;
}
.product__cta-secondary:hover { background: var(--ink); color: var(--paper); gap: 14px; }
.product__cta-secondary svg { width: 14px; height: 14px; }
.product__cta-secondary svg rect, .product__cta-secondary svg path, .product__cta-secondary svg circle { stroke: currentColor; }

/* ─────────────────────────── ATELIER NOTE — minimal */
.product__note {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.product__note-head {
  margin-bottom: 12px;
}
.product__note-label {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.product__note-label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--ink);
}
.product__note-input {
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  /* 16px minimum — iOS Safari auto-zooms when a focused input is below
     16px and never reliably restores zoom after blur. Holding at 16
     prevents the "stuck zoomed" view after closing the product detail. */
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  resize: none;
  outline: 0;
  transition: border-color 0.3s var(--ease);
}
.product__note-input::placeholder {
  color: var(--ink-40);
  font-style: italic;
  font-family: var(--serif);
}
.product__note-input:focus,
.product__note.has-value .product__note-input {
  border-bottom-color: var(--ink);
}
.product__note-help {
  display: none;
}

/* ─────────────────────────── SIZE SELECTOR */
.product__size {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.product__size-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.product__size-label {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink);
}
.product__size-sub {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.product__size-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.product__size-standard {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink);
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.size-btn {
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.size-btn:hover {
  border-color: var(--ink);
}
.size-btn.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ─────────────────────────── ATELIER NOTES (custom measurements / note) */
.product__atelier {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  transition: border-color 0.3s var(--ease);
}
.product__atelier.is-focused { border-top-color: var(--ink); }

.product__atelier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.product__atelier-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink);
}
.product__atelier-sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-50);
  letter-spacing: -0.005em;
}

.product__atelier-input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 6px 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink);
  resize: vertical;
  min-height: 48px;
  max-height: 180px;
  border-bottom: 1px solid var(--line-soft);
  transition: border-color 0.3s var(--ease);
}
.product__atelier-input::placeholder {
  color: var(--ink-40);
  font-style: italic;
}
.product__atelier-input:focus { border-bottom-color: var(--ink); }
.product__atelier.has-value .product__atelier-input { border-bottom-color: var(--ink); }

.products-empty {
  padding: 100px 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 28px;
  color: var(--ink-60);
}

/* ─────────────────────────── LOOKBOOK — campaign + studio frames */
.lookbook {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: clamp(96px, 12vw, 180px) var(--gutter);
  /* No overflow:hidden — tiles must render fully even when transformed */
}

.lookbook__placard {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: clamp(48px, 6vw, 80px);
}
.lookbook__placard > span[aria-hidden] { opacity: 0.35; }

.lookbook__head {
  text-align: center;
  margin-bottom: clamp(56px, 7vw, 96px);
}
.lookbook__title {
  font-family: var(--sans);
  font-weight: 100;
  font-size: clamp(64px, 12vw, 200px);
  line-height: 0.9;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
}
.lookbook__title-sub {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.8vw, 26px);
  letter-spacing: -0.005em;
  color: var(--ink-60);
}

/* Hero campaign frame — legacy single hero; replaced by .lookbook__campaign diptych
   Keeping styles in case we toggle back later. */
.lookbook__hero {
  display: none;
}
.lookbook__hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 1.6s var(--ease);
  filter: contrast(1.04) saturate(1.04);
}
.lookbook__hero:hover img { transform: scale(1.02); }
.lookbook__hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.45));
}
.lookbook__hero-caption {
  position: absolute;
  bottom: clamp(20px, 3vw, 40px);
  left: clamp(20px, 3vw, 40px);
  right: clamp(20px, 3vw, 40px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--paper);
  z-index: 1;
}
.lookbook__hero-caption .it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: 18px;
}

/* Campaign diptych — two large editorial frames side by side */
.lookbook__campaign {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 28px);
  max-width: 1320px;
  margin: 0 auto clamp(48px, 6vw, 96px);
}
.lookbook__campaign-tile {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  aspect-ratio: 2 / 3;
  display: block;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  width: 100%;
  cursor: zoom-in;
}
.lookbook__campaign-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform 1.8s var(--ease);
  filter: contrast(1.04) saturate(1.04);
}
/* The Plissée Noire editorial frame (c06) is composed with subject right of centre
   and crops best when we anchor a touch higher and slightly right. */
.lookbook__campaign-tile img[src*="c06.jpg"] {
  object-position: 62% 18%;
}
/* Lune Noire campaign (c03) — zoom in more, crop face slightly so the
   gown takes the foreground, matching the close-up framing of c06. */
.lookbook__campaign-tile img[src*="c03.jpg"] {
  object-position: center 55%;
  transform: scale(1.4);
  transform-origin: center 55%;
}
.lookbook__campaign-tile:hover img[src*="c03.jpg"] {
  transform: scale(1.45);
}
.lookbook__campaign-tile:hover img { transform: scale(1.02); }
/* Gradient overlay removed — caption chip has own backdrop. */
.lookbook__campaign-caption,
.lookbook__tile-caption {
  /* Unified overlay chip — identical opacity, padding, gradient ramp,
     and typography baseline so every tile reads at the same visual
     weight regardless of underlying photo content. */
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  font-family: var(--sans);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--paper);
  z-index: 1;
  /* Solid 70%-ink chip — same value across all tile sizes. */
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
/* Type scale differs only between the two contexts (campaign hero vs
   studio strip), the chip geometry stays identical. */
.lookbook__campaign-caption {
  font-size: 10.5px;
  letter-spacing: 0.4em;
}
.lookbook__campaign-caption .it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: 16px;
}
@media (max-width: 720px) {
  .lookbook__campaign { grid-template-columns: 1fr; }
}

/* Editorial section — .look__caption renders two spans (context + italic piece)
   that previously merged visually (e.g. "Kampanya" + "Elanza" → "KampanyaElanza").
   Lay them out as a tracked-caps line with a hairline separator between, and
   give the piece its couture italic serif treatment. */
.look__caption {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.look__caption > span:first-child:not(:empty) + span.it::before {
  content: "·";
  display: inline-block;
  margin: 0 0.55em;
  opacity: 0.5;
  font-style: normal;
  font-family: var(--sans);
  letter-spacing: 0;
}
.look__caption .it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

/* Editorial spread — 3 equal portrait tiles side-by-side.
   Earlier asymmetric layout (big hero + 2 small) used 1.35fr/1fr columns with
   fixed 82vh container height, which forced portrait campaign photos (~3:4)
   into a near-square hero tile, cropping ~25% of the image vertically and
   making it read as a tight zoom on PC. 3 equal 3:4 tiles match the photo
   aspect natively so everything stays in frame. */
.editorial__lookbook {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 32px);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.look {
  position: relative;
  display: block;
  overflow: hidden;
  background: #ffffff;
  text-decoration: none;
  color: inherit;
  /* 3/5 (0.6) is narrower than the 3/4 (0.75) photo. With cover, the photo's
     height fills the frame fully (hem + shoulders preserved — no top/bottom
     crop), and the empty side whitespace of studio shots gets trimmed. The
     gown reads taller and slimmer in the frame. */
  aspect-ratio: 3 / 5;
  cursor: zoom-in;
  border: none;
  padding: 0;
  font: inherit;
  text-align: inherit;
  width: 100%;
}
.look img {
  width: 100%;
  height: 100%;
  display: block;
  /* Cover + top — every gown reads from collar/neckline downward,
     consistent visual baseline. Brings Lune Noire (whose dress sits
     low in its photo) up to match Élan/Séraphine. */
  object-fit: cover;
  object-position: center top;
  filter: contrast(1.04) saturate(1.04);
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.look:hover img { transform: scale(1.03); }
.look .look__caption {
  /* Caption sits at the bottom of the tile. Cover crops sides so the photo
     fills the frame end-to-end — caption needs a backdrop chip to stay
     legible over the gown itself. Natural flow (no space-between) keeps
     the auto-dot separator proportional. */
  position: absolute;
  left: clamp(14px, 2vw, 28px);
  right: clamp(14px, 2vw, 28px);
  bottom: clamp(14px, 2vw, 28px);
  margin-top: 0;
  color: var(--paper);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  padding: 10px 14px;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  text-shadow: none;
  width: auto;
}
.look .look__caption .it { color: var(--paper); }
@media (max-width: 720px) {
  .editorial__lookbook {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "first" "second" "third";
    height: auto;
  }
  .look { aspect-ratio: 3 / 5; }
}

/* Studio strip — magazine spread, 4 columns × 2 rows of detail frames */
.lookbook__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 22px);
  max-width: 1320px;
  margin: 0 auto;
}
.lookbook__tile {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  /* 3/4 — museum portrait. Less tall than 2/3 so photos don't get
     awkwardly cropped on mobile. */
  aspect-ratio: 3 / 4;
  display: block;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  width: 100%;
  cursor: zoom-in;
}
.lookbook__tile img {
  width: 100%; height: 100%;
  /* Cover + center — fills frame edge-to-edge, no letterbox gaps. */
  object-fit: cover;
  object-position: center center;
  transition: transform 1.4s var(--ease);
  filter: contrast(1.05) saturate(1.04);
}
.lookbook__tile:hover img { transform: scale(1.04); }
/* Studio strip uses the same chip rules above; only the type scale
   differs slightly to match the smaller tile size. */
.lookbook__tile-caption {
  font-size: 10px;
  letter-spacing: 0.32em;
}
.lookbook__tile-caption .it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: 13px;
}
/* Removed gradient overlay — caption has its own dark backdrop chip,
   and the gradient was creating an ugly fade between the white photo
   letterbox (contain mode) and the dark caption. Clean now. */

@media (max-width: 900px) {
  .lookbook__grid { grid-template-columns: 1fr 1fr; }
}

/* ─────────────────────────── SOLO CAMPAIGN — full-bleed editorial moment */
.solo {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  min-height: 90vh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  isolation: isolate;
}
.solo__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Button reset — keeps the visual look of the original div while making
     the campaign image clickable to open the lightbox. */
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
  width: 100%;
  height: 100%;
  display: block;
}
.solo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: contrast(1.04) saturate(1.04);
  transition: transform 4s var(--ease);
}
@media (max-width: 720px) {
  .solo__media img {
    object-position: center 12%;
    object-fit: cover;
  }
  .solo { min-height: 80vh; }
}
.solo:hover .solo__media img { transform: scale(1.03); }
.solo__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Stronger bottom-vertical gradient so the italic line ("Akıcı saten,
     halter yaka.") and credit text below it stay legible without
     covering the photo. */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.42) 0%, transparent 25%, transparent 50%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.82) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.5) 0%, transparent 35%, transparent 65%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}

.solo__overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(64px, 9vw, 120px) clamp(28px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 26px;
}

.solo__eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: rgba(246, 244, 238, 0.75);
}

.solo__line {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(36px, 5.4vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 22ch;
  color: var(--paper);
}

.solo__credit {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(246, 244, 238, 0.7);
}
.solo__credit .it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: 15px;
  color: rgba(246, 244, 238, 0.95);
}
.solo__credit > span[aria-hidden] { opacity: 0.4; }

/* ─────────────────────────── EDITORIAL
   Magazine inner-page composition: the byline whispers above, the
   manifesto line breathes in the centre, the column body sits below
   on a wide breathing margin. */
.editorial {
  position: relative;
  /* More vertical room top + bottom so the section reads like a
     dedicated editorial page rather than another homepage block. */
  padding: clamp(120px, 16vw, 220px) var(--gutter);
  background: var(--paper);
}
.editorial__byline {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  /* Thinner weight + smaller cap + wider tracking → quiet
     overline like a magazine eyebrow. */
  font-size: 9.5px;
  font-weight: 300;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: clamp(56px, 7vw, 96px);
  padding-left: 0.5em;
}
.editorial__byline::before,
.editorial__byline::after {
  content: "";
  display: block;
  flex: 0 0 28px;
  height: 1px;
  background: currentColor;
  margin: 0 16px;
}
/* Mobile — text wraps to 2 lines and the hairlines look orphaned next
   to the short line ends. Hide them and centre the plain caption so it
   reads as a calm, framed byline. */
@media (max-width: 560px) {
  .editorial__byline {
    display: block;
    text-align: center;
    padding-left: 0;
  }
  .editorial__byline::before,
  .editorial__byline::after { display: none; }
}
.editorial__quote {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 200;
  font-size: clamp(20px, 5.2vw, 64px);
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 auto;
  max-width: none;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
  padding: clamp(8px, 1.5vw, 24px) clamp(12px, 4vw, 64px);
}
.editorial__quote-inner {
  position: relative;
  display: inline-block;
}
/* Period positioned absolutely just past the last letter so it doesn't
   pull the visible letter-block off centre. The letters now sit at the
   true visual midpoint of the viewport. */
.editorial__quote .stop {
  position: absolute;
  left: 100%;
  bottom: 0;
}
.editorial__quote-sub {
  text-align: center;
  /* Wider air around the sub-caption — closes the editorial spread
     before the column body begins. */
  margin: clamp(32px, 4.5vw, 56px) auto clamp(80px, 9vw, 128px);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.56em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.editorial__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 80px;
  gap: clamp(16px, 2vw, 32px);
  max-width: var(--maxw);
  margin: 0 auto;
}
.ed-tile {
  position: relative;
  overflow: hidden;
  background: var(--paper-warm);
}
.ed-tile img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.05) saturate(1.04);
  transition: transform 1.4s var(--ease), filter 0.5s var(--ease);
}
.ed-tile:hover img { transform: scale(1.04); }
.ed-tile__caption {
  position: absolute;
  bottom: 16px; left: 16px; right: 16px;
  font-family: var(--sans);
  font-size: 10px; font-weight: 300;
  letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--paper);
  display: flex; justify-content: space-between;
  z-index: 1;
}
.ed-tile__caption .it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}
.ed-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55));
  z-index: 0;
}

.ed-tile--01 { grid-column: 1 / span 6; grid-row: 1 / span 7; }
.ed-tile--02 { grid-column: 8 / span 4; grid-row: 1 / span 4; }
.ed-tile--03 { grid-column: 8 / span 4; grid-row: 5 / span 5; }
.ed-tile--text {
  grid-column: 1 / span 5; grid-row: 8 / span 3;
  background: transparent;
  padding: 24px 8px 0;
  display: flex; flex-direction: column; gap: 14px;
}
.ed-tile--text::after { display: none; }
.ed-tile__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.05;
  margin: 0;
}
.ed-tile__body {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-70);
  max-width: 42ch;
  margin: 0;
}

@media (max-width: 900px) {
  .editorial__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .ed-tile--01, .ed-tile--02, .ed-tile--03 {
    grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4/5;
  }
  .ed-tile--text { grid-column: 1 / -1; grid-row: auto; padding: 0; }
}

.editorial__signature {
  text-align: center;
  margin-top: clamp(48px, 6vw, 88px);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  color: var(--ink-60);
}
.editorial__signature::before {
  content: "";
  display: block;
  width: 56px; height: 1px;
  background: var(--ink-20);
  margin: 0 auto 18px;
}

/* ─────────────────────────── GENÈSE — Chapter I editorial spread */
.genese {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(96px, 11vw, 160px) clamp(20px, 5vw, 80px) clamp(72px, 8vw, 120px);
  overflow: hidden;
  isolation: isolate;
  min-height: 110vh;
}

/* Faint grain on ink — echo hero */
.genese::before {
  content: "";
  position: absolute;
  inset: -40%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
  animation: grain 1.4s steps(6) infinite;
}
.genese > * { position: relative; z-index: 2; }

/* Geometric vertical rules — sharp accents */
.genese__rule-v {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(246, 244, 238, 0.18);
  z-index: 1;
}
.genese__rule-v--left  { left: clamp(20px, 5vw, 80px); }
.genese__rule-v--right { right: clamp(20px, 5vw, 80px); }

/* Roman numeral I — colossal watermark behind the column */
.genese__ghost {
  position: absolute;
  right: clamp(28px, 6vw, 110px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(360px, 56vw, 900px);
  line-height: 0.85;
  color: rgba(246, 244, 238, 0.045);
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* Abstract circles artwork — atmospheric watermark, bleeds into the dark
   background so it reads as part of the section, not a pasted-in stamp. */
.genese__art {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(440px, 58vw, 820px);
  height: auto;
  z-index: 1;
  opacity: 0.16;
  mix-blend-mode: screen;
  filter: invert(1) brightness(1.18) contrast(1.05);
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 40% 55%, #000 25%, transparent 88%);
          mask-image: radial-gradient(ellipse 70% 75% at 40% 55%, #000 25%, transparent 88%);
  pointer-events: none;
  user-select: none;
}
@media (max-width: 1080px) {
  .genese__art { display: none; }
}

/* Subtle silk shadow — diagonal sheen */
.genese__silk {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(50% 70% at 20% 30%, rgba(246, 244, 238, 0.06), transparent 70%),
    radial-gradient(40% 60% at 85% 75%, rgba(246, 244, 238, 0.04), transparent 70%);
  pointer-events: none;
  z-index: 1;
  filter: blur(20px);
  mix-blend-mode: screen;
}

/* Exhibition placard — top */
.genese__topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: rgba(246, 244, 238, 0.55);
  margin-bottom: clamp(64px, 8vw, 120px);
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(246, 244, 238, 0.18);
}
.genese__topbar > span[aria-hidden] { opacity: 0.4; }

/* Asymmetric two-column grid */
.genese__layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
  min-height: 60vh;
}

/* LEFT: oversized title anchor */
.genese__anchor {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 44px);
  position: relative;
}
.genese__chapter-tag {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.52em;
  text-transform: uppercase;
  color: rgba(246, 244, 238, 0.7);
}
.genese__chapter-tag .line {
  display: inline-block;
  width: 48px;
  height: 1px;
  background: rgba(246, 244, 238, 0.5);
}

/* Oversized title — visual anchor */
.genese__title {
  font-family: var(--sans);
  font-weight: 100;
  font-size: clamp(96px, 17vw, 280px);
  line-height: 0.86;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--paper);
  text-transform: uppercase;
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  white-space: nowrap;
  /* allow the word to bleed slightly past the column edge */
  margin-left: -0.04em;
}
.genese__letter {
  display: inline-block;
  transform: translateY(38%);
  opacity: 0;
  animation: geneseRise 1.4s var(--ease-out) forwards;
}
@keyframes geneseRise {
  to { transform: translateY(0); opacity: 1; }
}

.genese__kicker {
  margin-top: clamp(16px, 2.4vw, 32px);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: rgba(246, 244, 238, 0.95);
  max-width: 18ch;
}

/* RIGHT: editorial body column */
.genese__column {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.4vw, 48px);
  max-width: 46ch;
  justify-self: end;
  align-self: center;
  padding-top: clamp(56px, 7vw, 100px);
  animation: geneseFadeIn 0.7s var(--ease-out) both;
}
@keyframes geneseFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.genese__column-head {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: rgba(246, 244, 238, 0.7);
}
.genese__column-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: rgba(246, 244, 238, 0.9);
  text-transform: none;
}
.genese__column-sep {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: rgba(246, 244, 238, 0.4);
}

.genese__body {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 38px);
  /* Breathing room beneath the last paragraph so it doesn't kiss the
     section's bottom rule — maintains the manifesto's luxury openness. */
  padding-bottom: clamp(48px, 6vw, 88px);
}
.genese__para {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: rgba(246, 244, 238, 0.92);
  margin: 0;
  text-wrap: pretty;
}
/* First paragraph drops a tiny lead-in flourish */
.genese__para:first-child::first-letter {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.4em;
  margin-right: 2px;
}

.genese__closer {
  margin-top: clamp(12px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 26px);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--paper);
  padding-top: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid rgba(246, 244, 238, 0.25);
}
.genese__closer-mark {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 300;
  color: rgba(246, 244, 238, 0.45);
  font-size: 16px;
  letter-spacing: 0;
}

/* Exhibition placard — bottom */
.genese__bottombar {
  margin-top: clamp(80px, 10vw, 140px);
  padding-top: 20px;
  border-top: 1px solid rgba(246, 244, 238, 0.18);
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: rgba(246, 244, 238, 0.55);
}
.genese__bottombar .dot {
  display: inline-block;
  width: 4px; height: 4px;
  background: rgba(246, 244, 238, 0.4);
  border-radius: 999px;
}
.genese__bottombar .it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 14px;
  color: rgba(246, 244, 238, 0.92);
}

/* ── Responsive ── */
@media (max-width: 1080px) {
  .genese__layout {
    grid-template-columns: 1fr;
    gap: clamp(40px, 8vw, 80px);
    text-align: center;
  }
  .genese__anchor {
    align-items: center;
    text-align: center;
  }
  .genese__chapter-tag {
    justify-content: center;
  }
  .genese__title {
    /* Switch from flex row to block so the title wraps cleanly when it
       exceeds the container width on narrow screens — no more right-edge
       overflow that made the word read off-centre. Letters stay animated
       (inline-block spans). */
    display: block;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    margin-left: 0;
    width: 100%;
  }
  .genese__kicker {
    text-align: center;
    max-width: 28ch;
    margin-left: auto;
    margin-right: auto;
  }
  .genese__column {
    justify-self: center;
    align-self: start;
    padding-top: 0;
    max-width: 56ch;
    text-align: center;
  }
  .genese__column-head {
    justify-content: center;
  }
  .genese__body {
    align-items: center;
  }
  .genese__para {
    margin-left: auto;
    margin-right: auto;
  }
  .genese__closer {
    align-items: center;
    text-align: center;
  }
  .genese__bottombar {
    justify-content: center;
    flex-wrap: wrap;
  }
  .genese__topbar {
    justify-content: center;
    flex-wrap: wrap;
  }
  .genese__ghost {
    right: 0; left: auto;
    font-size: clamp(280px, 50vw, 540px);
    opacity: 1;
    color: rgba(246, 244, 238, 0.035);
  }
  .genese__title { font-size: clamp(80px, 22vw, 220px); white-space: normal; }
}
@media (max-width: 720px) {
  .genese__topbar { flex-wrap: wrap; gap: 8px 14px; }
  .genese__topbar > span[aria-hidden] { display: none; }
  .genese__bottombar { flex-wrap: wrap; gap: 8px 14px; }
  .genese__bottombar > span[aria-hidden] { display: none; }
  /* Slightly smaller on very narrow screens to give breathing room
     without ever exceeding the container width. */
  .genese__title { font-size: clamp(64px, 20vw, 140px); }
  .genese__rule-v--left, .genese__rule-v--right { display: none; }
  .genese__art { display: none; }
}

/* ─────────────────────────── MISSION & VISION (manifesto) */
.mission {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(96px, 14vw, 200px) var(--gutter);
  text-align: center;
  position: relative;
}
.mission__eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: clamp(56px, 7vw, 96px);
}
.mission__statement {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 6.4vw, 124px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  margin: 0 auto;
  max-width: 18ch;
  text-align: center;
  color: var(--ink);
  position: relative;
}
.mission__open, .mission__close {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--ink-40);
  display: inline-block;
  position: absolute;
}
.mission__open  { left: -0.5em; top: -0.15em; }
.mission__close { right: -0.5em; bottom: -0.45em; }
@media (max-width: 720px) {
  .mission__open  { left: -0.2em; }
  .mission__close { right: -0.2em; }
}
.mission__statement-sub {
  margin: clamp(28px, 3vw, 44px) auto 0;
  max-width: 48ch;
  font-family: var(--sans);
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--ink-60);
}

.mission__rule {
  width: 1px;
  height: clamp(56px, 7vw, 100px);
  background: var(--ink);
  margin: clamp(64px, 8vw, 120px) auto;
  opacity: 0.35;
}

.mission__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(48px, 6vw, 96px) clamp(32px, 4vw, 64px);
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}
.pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 clamp(8px, 2vw, 24px);
}
.pillar__num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--ink-40);
  margin-bottom: 8px;
}
.pillar__title {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(18px, 1.8vw, 26px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.2;
}
.pillar__title-sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 22px);
  color: var(--ink-60);
  letter-spacing: -0.005em;
  margin-bottom: 6px;
}
.pillar__body {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-70);
  max-width: 32ch;
  margin: 0;
}

@media (max-width: 820px) {
  .mission__pillars { grid-template-columns: 1fr; gap: 56px; }
  .pillar { padding-bottom: 56px; border-bottom: 1px solid var(--line); }
  .pillar:last-child { border-bottom: 0; padding-bottom: 0; }
}

.mission__signature {
  margin-top: clamp(72px, 9vw, 120px);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 24px);
  color: var(--ink-60);
}
.mission__signature::before {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--ink-20);
  margin: 0 auto 22px;
}

/* ─────────────────────────── HISTOIRE — quiet closing breath on paper */
.histoire {
  padding: clamp(96px, 12vw, 160px) var(--gutter);
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  border-top: 1px solid var(--line);
}
.histoire__eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 36px;
}
.histoire__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0 auto 28px;
  max-width: 28ch;
  color: var(--ink);
}
.histoire__lede {
  max-width: 52ch;
  margin: 0 auto;
  font-family: var(--sans);
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 300;
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: var(--ink-60);
}

/* ─────────────────────────── FOOTER */
.footer {
  background: var(--paper);
  padding: clamp(80px, 10vw, 140px) var(--gutter) 36px;
  text-align: center;
}
.footer__mark img {
  height: 56px;
  width: auto;
  margin: 0 auto 32px;
  opacity: 0.92;
}
.footer__tag {
  font-family: var(--sans);
  font-size: 11px; font-weight: 300;
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 56px;
}

.news { max-width: 520px; margin: 0 auto; text-align: center; }
.news__label {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 3vw, 38px);
  margin-bottom: 28px;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
}
.news__form {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--ink);
  transition: border-color 0.3s var(--ease);
}
.news__form:focus-within { border-bottom-width: 2px; }
.news__input {
  flex: 1;
  background: transparent;
  border: 0; outline: 0;
  /* Minimal left padding so the placeholder text doesn't hug the underline
     baseline; keeps the input optically aligned with surrounding copy. */
  padding: 14px 4px 14px 6px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.news__input::placeholder { color: var(--ink-40); }
.news__submit {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.32em; text-transform: uppercase;
  padding: 0 4px;
}
.news__submit svg { width: 14px; height: 10px; stroke: currentColor; stroke-width: 1.2; fill: none; }
.news__hint {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.footer__links {
  margin-top: 64px;
  display: flex; justify-content: center;
  gap: 32px; flex-wrap: wrap;
}
.footer__link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.34em; text-transform: uppercase;
  padding: 8px 0;
  position: relative;
}
.footer__link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 4px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.4s var(--ease);
}
.footer__link:hover::after { transform: scaleX(1); }
.footer__link svg { width: 14px; height: 14px; fill: currentColor; }

.footer__email {
  margin-top: 56px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.005em;
}

.footer__legal {
  margin-top: 56px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 300;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.footer__legal a {
  position: relative;
  /* Larger vertical tap target on stacked mobile column — minimum 8px
     above and below the link text so adjacent links can't be mis-tapped. */
  padding: 8px 0;
}
.footer__legal a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease);
}
.footer__legal a:hover { color: var(--ink); }
.footer__legal a:hover::after { transform: scaleX(1); }
.footer__legal > span { opacity: 0.3; }
@media (max-width: 560px) {
  .footer__legal > span { display: none; }
  /* Stacked column on mobile: a touch more breathing room so adjacent
     links can't be mis-tapped with a thumb. */
  .footer__legal { gap: 18px; flex-direction: column; }
}

.footer__bottom {
  margin-top: 80px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink-60);
  flex-wrap: wrap; gap: 16px;
}

/* ─────────────────────────── TOAST */
.toast {
  position: fixed;
  bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--paper);
  padding: 14px 22px;
  z-index: 200;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s var(--ease);
}
.toast.is-open { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.4; }

/* ─────────────────────────── COOKIE BANNER (GDPR) */
.cookie {
  position: fixed;
  left: clamp(16px, 2.4vw, 32px);
  right: clamp(16px, 2.4vw, 32px);
  bottom: clamp(16px, 2.4vw, 32px);
  z-index: 220;
  pointer-events: none;
  display: flex;
  justify-content: center;
}
/* Dim the page behind the banner with a solid translucent black — no
   backdrop-filter / blur, which were causing constant GPU repaints and
   measurable phone heat on mid-tier iPhones. The dim alone provides
   enough visual separation for the banner to read. */
.cookie.is-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.32);
  pointer-events: none;
  animation: cookieFog 0.4s var(--ease) both;
}
@keyframes cookieFog { from { opacity: 0; } to { opacity: 1; } }
.cookie__inner {
  pointer-events: auto;
  width: 100%;
  max-width: 920px;
  /* Solid background — no blur. Was backdrop-filter: blur(18px), which
     is GPU-heavy on mobile (~30% repaint cost). Solid 0.96 alpha
     achieves the same visual weight without the filter pipeline. */
  background: rgba(8, 8, 8, 0.96);
  color: var(--paper);
  border: 1px solid rgba(246, 244, 238, 0.12);
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.6vw, 32px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(16px, 2.5vw, 36px);
  transform: translateY(140%);
  opacity: 0;
  transition: transform 0.6s var(--ease), opacity 0.5s var(--ease);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.6);
}
.cookie.is-open .cookie__inner { transform: translateY(0); opacity: 1; }

.cookie__copy { display: flex; flex-direction: column; gap: 4px; }

.cookie__eyebrow {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: rgba(246, 244, 238, 0.5);
  margin-bottom: 2px;
}

.cookie__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: -0.005em;
  line-height: 1.1;
  color: var(--paper);
  margin-bottom: 4px;
}

.cookie__body {
  margin: 0;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(246, 244, 238, 0.72);
  max-width: 64ch;
  letter-spacing: 0.01em;
}
.cookie__policy {
  color: var(--paper);
  border-bottom: 1px solid rgba(246, 244, 238, 0.5);
  padding-bottom: 1px;
  white-space: nowrap;
  transition: border-color 0.25s var(--ease);
  margin-left: 6px;
}
.cookie__policy:hover { border-bottom-color: var(--paper); }

.cookie__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.cookie__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  border: 1px solid rgba(246, 244, 238, 0.35);
  color: var(--paper);
  background: transparent;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.cookie__btn:hover {
  background: rgba(246, 244, 238, 0.08);
  border-color: rgba(246, 244, 238, 0.6);
}

.cookie__btn--solid {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.cookie__btn--solid:hover {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
}

@media (max-width: 760px) {
  .cookie__inner {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }
  /* Stack action buttons vertically — long Turkish labels with white-space:nowrap
     were overflowing 26px past the inner padding when laid out side-by-side. */
  .cookie__actions { width: 100%; flex-direction: column; align-items: stretch; gap: 8px; }
  .cookie__btn { flex: 0 0 auto; width: 100%; padding: 0 12px; }
}

/* ─────────────────────────── LIGHTBOX
   Tıklanan ürün görselini tam ekran modal'da büyük göster.
   Backdrop click veya × veya ESC ile kapatılır. */
.lightbox {
  position: fixed; inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.92);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(32px, 5vw, 80px);
  cursor: zoom-out;
  animation: lightbox-in 0.35s var(--ease) both;
}
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: default;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
  background: var(--paper-warm);
  user-select: none;
}
.lightbox__close {
  position: absolute;
  top: clamp(16px, 2vw, 28px);
  right: clamp(16px, 2vw, 28px);
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(246, 244, 238, 0.10);
  border: 1px solid rgba(246, 244, 238, 0.30);
  border-radius: 50%;
  color: var(--paper);
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.lightbox__close:hover {
  background: rgba(246, 244, 238, 0.18);
  border-color: rgba(246, 244, 238, 0.65);
}
.lightbox__close svg {
  width: 18px; height: 18px;
}
@keyframes lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─────────────────────────── LEGAL MODAL
   Footer'daki "Gizlilik / Çerez / İade / Teslimat / Şartlar" linklerine
   tıklayınca açılan okunabilir yasal metin paneli. */
.legal-modal {
  position: fixed; inset: 0;
  /* Must sit above the expanded product modal (z-index 9999) so the size
     guide / KVKK / cookies / contract panels are visible when opened
     from inside the detail view. Previously legal modal had z-index 210
     and was hidden behind the product fullscreen overlay. */
  z-index: 10100;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 60px);
  animation: lightbox-in 0.35s var(--ease) both;
  cursor: pointer;
}
.legal-modal__panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  /* Safe-area inset on the bottom so the last paragraph (e.g. size guide
     measurement tips) stays clear of Safari / Chrome's mobile chrome bars. */
  padding:
    clamp(28px, 5vw, 56px)
    clamp(24px, 4.5vw, 48px)
    calc(clamp(28px, 5vw, 56px) + env(safe-area-inset-bottom, 0px) + 24px)
    clamp(24px, 4.5vw, 48px);
  cursor: default;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
  border: 1px solid var(--line);
}
.legal-modal__close {
  position: absolute;
  top: 18px; right: 18px;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.legal-modal__close:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--ink-40);
}
.legal-modal__close svg { width: 16px; height: 16px; }

.legal-modal__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 3.5vw, 42px);
  letter-spacing: -0.005em;
  line-height: 1.05;
  margin: 0 0 28px;
  color: var(--ink);
}

.legal-modal__body {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-70);
}
.legal-modal__body p {
  margin: 0 0 16px;
}
.legal-modal__body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .legal-modal__panel {
    /* Mobile + safe-area for browser chrome. */
    padding: 32px 22px calc(32px + env(safe-area-inset-bottom, 0px) + 24px);
  }
  .legal-modal__title { font-size: 24px; margin-bottom: 20px; }
  .legal-modal__body { font-size: 13.5px; }
}

/* Size guide link in the product card size header — opens the sizes legal modal */
.product__size-guide {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-60);
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0 0 2px;
  cursor: pointer;
  transition: color 0.25s var(--ease);
  margin-left: auto;
}
.product__size-guide:hover {
  color: var(--ink);
}

/* First-order promotional strip in footer — italic serif with a soft hairline
   above and below so it sits as an editorial line within the footer voice. */
.footer__promo {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(14px, 1.3vw, 17px);
  letter-spacing: -0.005em;
  color: var(--ink);
  text-align: center;
  margin: 14px auto 0;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  max-width: 880px;
}
@media (max-width: 640px) {
  .footer__promo { font-size: 13px; padding: 10px 14px; }
}

/* Lightbox gallery navigation — prev/next + counter for multi-view images */
.lightbox__prev,
.lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px; height: 56px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(246, 244, 238, 0.22);
  border-radius: 50%;
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.lightbox__prev { left: clamp(16px, 3vw, 40px); }
.lightbox__next { right: clamp(16px, 3vw, 40px); }
.lightbox__prev:hover,
.lightbox__next:hover {
  background: rgba(0, 0, 0, 0.75);
  border-color: rgba(246, 244, 238, 0.5);
}
.lightbox__prev:active { transform: translateY(-50%) translateX(-2px); }
.lightbox__next:active { transform: translateY(-50%) translateX(2px); }
.lightbox__prev svg,
.lightbox__next svg { width: 22px; height: 22px; }

.lightbox__counter {
  position: absolute;
  bottom: clamp(20px, 3vw, 36px);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(246, 244, 238, 0.82);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  z-index: 2;
  font-variant-numeric: tabular-nums;
  padding: 6px 14px;
  border: 1px solid rgba(246, 244, 238, 0.22);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

@media (max-width: 640px) {
  .lightbox__prev,
  .lightbox__next { width: 44px; height: 44px; }
  .lightbox__prev { left: 12px; }
  .lightbox__next { right: 12px; }
  .lightbox__prev svg,
  .lightbox__next svg { width: 18px; height: 18px; }
}

/* ─────────────────────────── PRE-ORDER MODAL
   Site içi form modal — Pre-Order Now butonuna tıklayınca açılır, mailto
   yerine müşterinin doğrudan site üzerinden iletişim formunu doldurmasını
   sağlar. Formspree veya benzeri endpoint'e POST eder. */
.preorder-modal {
  position: fixed; inset: 0;
  z-index: 12000;
  background: rgba(0, 0, 0, 0.74);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Zero outer padding on mobile so the panel fills the viewport edge-to-edge
     — no wasted gutter, no clipped header. Desktop keeps comfy 60px breathing
     room for the modal to feel like an inset card. */
  padding: 0;
  animation: lightbox-in 0.35s var(--ease) both;
  cursor: pointer;
}
@media (min-width: 700px) {
  .preorder-modal { padding: 60px; }
}
.preorder-modal__panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  /* Full viewport height on mobile so the title is visible from the first
     frame and the form has room to breathe; rounded panel on desktop. */
  height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  /* Generous top padding leaves room for the absolutely-positioned X
     button without overlapping the title. Bottom padding clears Safari
     URL chrome via dvh + safe-area. */
  padding:
    calc(64px + env(safe-area-inset-top, 0px))
    clamp(20px, 5vw, 48px)
    calc(40px + env(safe-area-inset-bottom, 0px))
    clamp(20px, 5vw, 48px);
  cursor: default;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
  border: 1px solid var(--line);
}
@media (min-width: 700px) {
  .preorder-modal__panel {
    height: auto;
    max-height: 92vh;
    padding:
      clamp(40px, 5vw, 56px)
      clamp(24px, 4.5vw, 48px)
      clamp(40px, 5vw, 56px)
      clamp(24px, 4.5vw, 48px);
  }
}
.preorder-modal__close {
  /* Pinned to the panel's top-right corner. Absolute (not sticky) so the
     button stays in place while the form scrolls underneath — and never
     overlaps the title or form fields. */
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: 14px;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  z-index: 5;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.preorder-modal__close:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--ink-40);
}
.preorder-modal__close svg { width: 16px; height: 16px; }

.preorder-modal__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.005em;
  line-height: 1.05;
  margin: 0 0 10px;
  color: var(--ink);
}
.preorder-modal__subtitle {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-60);
  margin: 0 0 20px;
}

.preorder-modal__summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--paper-warm);
  margin-bottom: 24px;
}
.preorder-modal__summary-label {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.preorder-modal__summary-value {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.5;
}

.preorder-modal__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.preorder-modal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 540px) {
  .preorder-modal__row { grid-template-columns: 1fr; }
}
.preorder-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.preorder-modal__field > span {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.preorder-modal__field input,
.preorder-modal__field textarea {
  font-family: var(--sans);
  /* 16px minimum — iOS Safari auto-zooms when a focused input is below 16px
     and never reliably restores zoom after blur. Holding at 16 prevents the
     "stuck zoomed" view that customers reported after submitting. */
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.005em;
  color: var(--ink);
  background: var(--paper-bright);
  border: 1px solid var(--line);
  /* More generous left padding so placeholder text sits well clear of the
     border line — feels less cramped on mobile. */
  padding: 14px 16px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
  resize: vertical;
}
.preorder-modal__field textarea { min-height: 88px; padding-top: 14px; }
.preorder-modal__field input:focus,
.preorder-modal__field textarea:focus {
  border-color: var(--ink);
  background: var(--paper);
}
.preorder-modal__field input::placeholder,
.preorder-modal__field textarea::placeholder {
  color: var(--ink-40);
  font-style: italic;
}
.preorder-modal__field input:disabled,
.preorder-modal__field textarea:disabled { opacity: 0.55; }

/* Quiet inline error state — instead of the browser's red bubble.
   A discreet ink hairline + small italic whisper under the field. */
.preorder-modal__field.has-error input,
.preorder-modal__field.has-error textarea {
  border-color: var(--ink);
  background: rgba(0, 0, 0, 0.02);
}
.preorder-modal__field.has-error::after {
  content: attr(data-error, "Bu alan zorunludur.");
  display: block;
  margin-top: 6px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--ink-60);
}
.preorder-modal__field.has-error::after { content: "Bu alan zorunludur."; }
.preorder-modal__kvkk.has-error span {
  color: var(--ink);
}

.preorder-modal__kvkk {
  display: flex;
  /* Align checkbox to the first line of the text baseline-style. */
  align-items: flex-start;
  gap: 12px;
  margin: 6px 0 4px;
  cursor: pointer;
}
.preorder-modal__kvkk input[type="checkbox"] {
  flex-shrink: 0;
  /* Sit on the first line of the adjacent text (~1.55 line-height of 11.5px
     ≈ 17.8px). Top offset (1px) lifts the box visually to optical centre. */
  margin-top: 1px;
  width: 18px; height: 18px;
  accent-color: var(--ink);
  cursor: pointer;
}
.preorder-modal__kvkk span {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-70);
}

.preorder-modal__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 16px 28px;
  margin-top: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.preorder-modal__submit:hover:not(:disabled) {
  background: var(--paper);
  color: var(--ink);
}
.preorder-modal__submit:disabled {
  opacity: 0.55;
  cursor: wait;
}
.preorder-modal__submit svg { width: 22px; height: 11px; }

.preorder-modal__hint {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-top: 8px;
}
.preorder-modal__hint-fallback {
  text-align: right;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.005em;
  font-size: 11px;
}

/* Success / error states (post-submit) */
.preorder-modal__state {
  text-align: center;
  /* Generous breathing room for the success / error screens — they
     replace the form, so the whisper rhythm should feel calm. */
  padding: clamp(32px, 6vw, 64px) 0 clamp(16px, 3vw, 32px);
  animation: fadeInUp 0.4s var(--ease) both;
}
.preorder-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  /* Hairline outline on paper instead of an ink fill — couture quiet. */
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  margin: 0 auto 28px;
}
.preorder-modal__icon svg { width: 20px; height: 20px; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.preorder-modal__body {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-70);
  max-width: 460px;
  margin: 0 auto 28px;
}
.preorder-modal__state .preorder-modal__submit {
  margin: 0 auto;
}
/* Farewell line — sits between the body copy and the close button on
   the success screen. Italic serif whisper, slightly muted ink. */
.preorder-modal__farewell {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--ink-70);
  margin: 0 auto 28px;
  max-width: 460px;
  text-align: center;
}

@media (max-width: 640px) {
  .preorder-modal__panel {
    /* Mobile padding + safe-area inset for browser chrome bars. */
    padding: 36px 22px calc(36px + env(safe-area-inset-bottom, 0px) + 24px);
  }
  .preorder-modal__title { font-size: 24px; }
  .preorder-modal__hint {
    flex-direction: column;
    gap: 4px;
  }
  .preorder-modal__hint-fallback { text-align: left; }
}

/* ─────────────────── SCROLL-TO-TOP FAB */
.scroll-top-btn {
  position: fixed;
  bottom: clamp(20px, 3vw, 36px);
  right: clamp(20px, 3vw, 36px);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  /* Translucent ink + light hairline so the FAB sits quietly on both
     light footer paper and dark manifesto backgrounds. */
  background: rgba(10, 10, 10, 0.62);
  color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 60;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease), opacity 0.25s var(--ease);
  opacity: 0.88;
  animation: scrollTopIn 0.32s var(--ease);
}
.scroll-top-btn:hover {
  background: rgba(10, 10, 10, 0.88);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-2px);
  opacity: 1;
}
.scroll-top-btn svg { width: 18px; height: 18px; }
@keyframes scrollTopIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 0.92; transform: translateY(0); }
}
@media (max-width: 720px) {
  .scroll-top-btn { width: 44px; height: 44px; }
}

/* ─────────────────────────── NUCLEAR HIDE ───────────────────────────
   Final, override-everything rule. Triple-locks any photo-overlay text
   that an earlier rule (or a future regression) might re-enable.
   Counters / N° / category chips / PRE-ORDER badges NEVER appear on
   the listing card photo. Period. */
.product:not(.is-expanded) .product__counter,
.product:not(.is-expanded) .product__num,
.product:not(.is-expanded) .product__tag,
.product:not(.is-expanded) .product__cat {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FINAL NUCLEAR RESET — belt-and-suspenders override at the very end
   of the file so nothing below can re-enable any of these.
   Applies to BOTH the actual class names used in this codebase
   (.product, .collection, .product__*) AND the alias names the brand
   spec uses (.product-card, .product-grid, .product__label,
   .product__overlay), so the rule fires whichever way components
   are renamed in the future.
   ═══════════════════════════════════════════════════════════════════ */

/* 1) Hide every photo-overlay text element on the listing card. */
.product__counter,
.product__label,
.product__overlay,
.product:not(.is-expanded) .product__num,
.product:not(.is-expanded) .product__tag,
.product:not(.is-expanded) .product__cat,
.product-card .product__counter,
.product-card .product__label,
.product-card .product__overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 2) Lock the grid container to a 2-column layout on mobile / tablet
      so the cards always sit side by side, edges aligned. */
.product-grid,
.collection {
  display: grid !important;
}
@media (max-width: 1100px) {
  .product-grid,
  .collection {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* 3) Lock every card into a flex column with space-between so the
      "Detayları gör" button pins to the bottom of every card — buttons
      land on the same horizontal line across the whole row regardless
      of name wrapping or price length. */
.product-card,
.product {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
}

/* Category rail — hide the EN secondary line (Blazers / Blouses / etc).
   Language is chosen via TR/EN/FR switcher; bilingual labels under each
   category just create noise. The primary label already adapts to lang. */
.cat__tr { display: none !important; }