/* ============================================================
   KATMAN — Kağıt Kolaj Atölyesi
   Editorial-magazine · torn-paper material system
   ============================================================ */

:root {
  /* ---------- LUXURY COUTURE PALETTE ----------
     one deep ground (ink/charcoal) + warm neutral (ivory/bone/champagne)
     + exactly ONE metallic (soft gold-foil). No loud primaries. */
  --bg: #EFE8D8;            /* warm bone board */
  --surface: #E7DECB;       /* champagne card */
  --surface-2: #DED2BB;     /* deeper bone */
  --paper-deep: #D3C6A9;
  --ink: #15120E;           /* deep charcoal-ink ground */
  --ink-2: #201B15;         /* slightly lifted ink */
  --ink-soft: #3C352C;
  --muted: #6C6252;

  /* THE one metallic — soft antique gold-foil */
  --gold: #B08C42;          /* foil fill */
  --gold-deep: #8C6E30;     /* foil in shadow / borders */
  --gold-hi: #E6CE96;       /* foil highlight / on-dark text */
  --gold-soft: #C9AC6A;
  --accent: var(--gold);            /* fills, marks, decor = gold */
  --accent-text: #8A6A2A;   /* gold-brown, legible on light (WCAG AA) */
  --accent2: #4A3A42;       /* restrained deep aubergine (sparing depth) */
  --accent2-text: #4A3A42;
  --line: rgba(21, 18, 14, 0.14);
  --line-strong: rgba(21, 18, 14, 0.26);
  --gold-line: rgba(176, 140, 66, 0.5);

  --serif: Georgia, "Times New Roman", "Palatino Linotype", serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Courier New", Consolas, "SFMono-Regular", monospace;

  --wrap: 1180px;
  --pad: clamp(16px, 4vw, 32px);
  --header-h: 76px;

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

  interpolate-size: allow-keywords;
}

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* subtle paper tooth — pure CSS tint, no external texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  background:
    radial-gradient(120% 80% at 12% -10%, rgba(200, 64, 47, 0.05), transparent 60%),
    radial-gradient(120% 80% at 100% 110%, rgba(46, 93, 75, 0.05), transparent 60%);
  opacity: 0.7;
}

figure, figcaption, blockquote, dl, dd { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.14;
  color: var(--ink);
  margin: 0;
}

a { color: var(--accent-text); text-decoration: none; }
p { overflow-wrap: anywhere; }

::selection { background: var(--accent); color: #fff; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 10000;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 3px;
}
.skip-link:focus { left: 12px; }

/* ---------- layout ---------- */
.container {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
  position: relative;
  z-index: 2;
}

main { padding-top: var(--header-h); }

section { position: relative; }

/* anchor targets clear the fixed header */
main [id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.eyebrow {
  font-family: var(--body);
  font-weight: 700;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
}

.lead { font-size: clamp(1.05rem, 2.2vw, 1.28rem); color: var(--ink-soft); }

.editor-mark {
  color: var(--accent-text);
  font-family: var(--serif);
  font-style: italic;
}

/* torn strip divider */
.torn-div {
  position: relative;
  height: 34px;
  background: var(--surface);
  z-index: 2;
  clip-path: polygon(
    0 40%, 4% 55%, 8% 38%, 12% 58%, 17% 42%, 22% 60%, 27% 44%, 32% 62%,
    38% 46%, 43% 64%, 48% 44%, 54% 60%, 60% 42%, 66% 58%, 72% 40%,
    78% 56%, 84% 40%, 90% 58%, 95% 42%, 100% 56%, 100% 100%, 0 100%
  );
}

/* ---------- header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1080;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(244, 241, 234, 0.92);
  backdrop-filter: saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: height 240ms ease, background 240ms ease, box-shadow 240ms ease;
}
.site-header.is-scrolled {
  height: 62px;
  background: rgba(244, 241, 234, 0.98);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 24px -18px rgba(0, 0, 0, 0.4);
}
.header-inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.wordmark {
  font-family: var(--serif);
  font-weight: 700;
  font-style: italic;
  font-size: 1.32rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.wordmark b { color: var(--accent-text); font-style: normal; font-weight: 700; }
.wordmark span {
  font-family: var(--body);
  font-style: normal;
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav-desktop { display: none; }
@media (min-width: 1024px) {
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: 26px;
  }
  .nav-desktop a {
    position: relative;
    font-family: var(--body);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
    padding: 4px 0;
  }
  .nav-desktop a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 0; height: 2px;
    background: var(--accent);
    transition: width 200ms ease;
  }
  .nav-desktop a:hover { color: var(--ink); }
  .nav-desktop a:hover::after,
  .nav-desktop a.is-active::after { width: 100%; }
  .nav-desktop .nav-cta::after { display: none; }
}

.nav-cta {
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  background: var(--ink);
  color: var(--bg) !important;
  padding: 10px 18px;
  border-radius: 2px;
  border: 1px solid var(--ink);
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.nav-cta:hover, .nav-cta:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff !important;
  transform: translateY(-1px);
}

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

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

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 92vw);
  background: var(--surface);
  border-left: 4px solid var(--accent);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
  z-index: 1050;
  padding: calc(var(--header-h) + 20px) 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer a {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.32rem;
  color: var(--ink);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.drawer a:hover, .drawer a.is-active { color: var(--accent-text); }
.drawer .nav-cta {
  font-family: var(--body);
  font-style: normal;
  text-align: center;
  justify-content: center;
  display: flex;
  margin-top: 18px;
  border-bottom: 1px solid var(--ink);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  padding: 14px 26px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(200, 64, 47, 0.9);
}
.btn-primary .arw { transition: transform 200ms ease; }
.btn-primary:hover .arw { transform: translateX(4px); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* ============================================================
   HERO — type-only massive + thin torn photo strip
   ============================================================ */
.hero {
  padding: clamp(48px, 9vw, 104px) 0 0;
  overflow: hidden;
}
.hero-eyebrow { margin-bottom: 26px; }
.hero h1 {
  font-size: clamp(3.4rem, 12vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
}
.hero h1 .l1 { display: block; }
.hero h1 .l2 { display: block; color: var(--accent-text); }
.hero h1 .drop {
  font-style: normal;
  color: var(--accent);
}
.hero-sub {
  max-width: 40ch;
  margin: 30px 0 0;
  font-size: clamp(1.06rem, 2.4vw, 1.34rem);
  color: var(--ink-soft);
  line-height: 1.55;
}
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
  align-items: center;
}
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--muted);
}
.trust-strip b { color: var(--ink); font-weight: 700; }
.trust-strip span { display: inline-flex; align-items: center; gap: 8px; }
.trust-strip span::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* torn photo strip */
.hero-strip {
  position: relative;
  margin-top: clamp(42px, 7vw, 72px);
  height: clamp(190px, 30vw, 330px);
  isolation: isolate;
}
.hero-strip .strip-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(
    0 14%, 6% 4%, 12% 12%, 19% 2%, 26% 12%, 33% 3%, 40% 12%, 48% 2%,
    55% 12%, 62% 3%, 70% 12%, 77% 2%, 85% 12%, 92% 3%, 100% 12%,
    100% 86%, 94% 97%, 87% 88%, 79% 98%, 71% 88%, 63% 98%, 55% 88%,
    47% 98%, 39% 88%, 31% 98%, 23% 88%, 15% 98%, 8% 88%, 0 97%
  );
  filter: saturate(1.02) contrast(1.03);
}
/* cursor sheen — paper light */
.hero-strip .sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background: radial-gradient(
    240px circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0) 62%
  );
  clip-path: inherit;
}
.hero-strip .strip-tag {
  position: absolute;
  left: clamp(12px, 3vw, 30px);
  bottom: clamp(14px, 3vw, 26px);
  z-index: 4;
  background: var(--accent);
  color: #fff;
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 12px;
}

/* ---------- stats woven ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 40px);
  margin: clamp(46px, 7vw, 78px) 0 0;
  padding: clamp(28px, 4vw, 40px) 0 clamp(40px, 6vw, 62px);
  border-top: 1px solid var(--line);
}
.stat .num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.1rem);
  color: var(--accent-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 3ch;
}
.stat .lbl {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}
@media (max-width: 640px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
}

/* ============================================================
   MANIFESTO — huge quote
   ============================================================ */
.manifesto {
  background: radial-gradient(130% 130% at 22% -10%, #26201c, #14110e 70%);
  color: var(--bg);
  padding: clamp(64px, 11vw, 128px) 0;
}
.manifesto .eyebrow { color: #E8A99B; }
.manifesto .eyebrow::before { background: var(--accent); }
.manifesto blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.9rem, 5.4vw, 4rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
  max-width: 20ch;
  margin: 26px 0 0;
  color: #F4F1EA;
}
.manifesto blockquote .hl { color: var(--accent); font-style: italic; }
.manifesto .attr {
  margin-top: 34px;
  font-family: var(--body);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: #C9C1B2;
}
.manifesto .attr b { color: #fff; }

/* ============================================================
   IMZALI ESERLER — priced gallery (editorial masonry)
   ============================================================ */
.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: clamp(34px, 5vw, 54px);
}
.section-head h2 {
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  line-height: 1.08;
  max-width: 16ch;
}
.section-head p { max-width: 52ch; color: var(--ink-soft); margin: 0; }

.pad-block { padding: clamp(58px, 9vw, 108px) 0; }
.pad-block.alt { background: var(--surface); }

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 30px);
}
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }

.eser {
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform 240ms cubic-bezier(.2,.7,.2,1), box-shadow 240ms ease;
}
.eser:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -26px rgba(26, 23, 20, 0.55);
}
.eser .frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.eser .frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.2,.7,.2,1);
}
.eser:hover .frame img { transform: scale(1.05); }
.eser .tek {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--bg);
  color: var(--accent-text);
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 9px;
}
.eser .body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.eser .body h3 {
  font-size: 1.28rem;
  font-style: italic;
  line-height: 1.16;
}
.eser .meta { font-size: 0.82rem; color: var(--muted); }
.eser .foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.eser .price {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.eser .price small { color: var(--muted); font-weight: 400; }
.eser .size {
  font-size: 0.74rem;
  color: var(--accent2-text);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* price list note */
.price-note {
  margin-top: clamp(30px, 4vw, 46px);
  padding: 22px 24px;
  background: var(--surface-2);
  border-left: 4px solid var(--accent);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.price-note b { color: var(--ink); }

/* ============================================================
   YARATIM NOTU — long editorial text + drop cap
   ============================================================ */
.yaratim {
  background: linear-gradient(180deg, var(--surface), var(--paper-deep));
}
.editorial {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
}
@media (max-width: 860px) { .editorial { grid-template-columns: 1fr; } }
.editorial .figcol { min-width: 0; }
.editorial figure {
  position: relative;
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 12px;
}
.editorial figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.editorial figcaption {
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
  font-family: var(--serif);
}
.editorial .textcol { min-width: 0; }
.editorial .textcol h2 {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  margin-bottom: 20px;
  max-width: 18ch;
}
.editorial .textcol p { color: var(--ink-soft); margin: 0 0 18px; }
.editorial .textcol p.first::first-letter {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  float: left;
  font-size: 4.2rem;
  line-height: 0.78;
  padding: 8px 12px 0 0;
  color: var(--accent);
}
.pull {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  line-height: 1.3;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding-left: 22px;
  margin: 26px 0;
}

/* ============================================================
   SIPARIS BRIEF — estimator tool
   ============================================================ */
.estimator {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
@media (max-width: 900px) { .estimator { grid-template-columns: 1fr; } }

.est-form {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: clamp(22px, 3vw, 34px);
  min-width: 0;
}
.est-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 500px) { .est-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field label .opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}
.field select,
.field input[type="number"],
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  font-family: var(--body);
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 12px 14px;
  width: 100%;
  min-width: 0;
  transition: border-color 180ms ease, background 180ms ease;
}
.field select:focus,
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
}
.field textarea { resize: vertical; min-height: 100px; }

.est-result {
  background: var(--ink);
  color: var(--bg);
  padding: clamp(24px, 3vw, 36px);
  border-top: 4px solid var(--accent);
  position: sticky;
  top: calc(var(--header-h) + 16px);
}
.est-result .r-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #E8A99B;
  font-weight: 700;
}
.est-result .r-price {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  color: #fff;
  margin: 14px 0 4px;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.est-result .r-price small { font-size: 1rem; color: #C9C1B2; font-style: normal; }
.est-result .r-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(244, 241, 234, 0.14);
  font-size: 0.9rem;
}
.est-result .r-line span:first-child { color: #C9C1B2; }
.est-result .r-line b { color: #fff; font-family: var(--mono); }
.est-result .r-note {
  margin-top: 16px;
  font-size: 0.82rem;
  color: #C9C1B2;
  line-height: 1.5;
}
.est-result .r-warn {
  margin-top: 14px;
  background: rgba(200, 64, 47, 0.22);
  border-left: 3px solid var(--accent);
  padding: 12px 14px;
  font-size: 0.86rem;
  color: #F6D9D2;
  display: none;
}
.est-result.has-warn .r-warn { display: block; }
.est-result .r-delivery { color: var(--accent2); }
.est-result .btn { margin-top: 20px; width: 100%; }

/* ============================================================
   ORDER FORM / CONTACT FORM
   ============================================================ */
.form-card {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: clamp(24px, 4vw, 40px);
}
.kvkk {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 12px !important;
  font-size: 0.86rem;
  color: var(--ink-soft);
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
}
.kvkk a { text-decoration: underline; }
.field input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: auto;
  width: 18px; height: 18px;
  min-width: 18px; min-height: 18px;
  padding: 0; border: 0; margin: 2px 0 0;
  accent-color: var(--accent);
}
.form-card .btn { margin-top: 8px; }
@media (max-width: 640px) { .form-card .btn { width: 100%; } }

/* ============================================================
   ATOLYE ZIYARET — split
   ============================================================ */
.visit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 820px) { .visit { grid-template-columns: 1fr; } }
.visit .vphoto { position: relative; min-width: 0; }
.visit .vphoto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
}
.visit .vphoto .cap {
  position: absolute;
  bottom: -14px; right: -14px;
  background: var(--accent);
  color: #fff;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.94rem;
  padding: 12px 18px;
  max-width: 60%;
}
@media (max-width: 560px) { .visit .vphoto .cap { position: static; margin-top: 12px; max-width: 100%; } }
.visit .vtext h2 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); margin-bottom: 16px; }
.visit .vtext p { color: var(--ink-soft); margin: 0 0 16px; }
.visit .hours {
  margin-top: 20px;
  display: grid;
  gap: 2px;
}
.visit .hours .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.visit .hours .row span:first-child { color: var(--ink-soft); }
.visit .hours .row b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.visit .hours .row.today { color: var(--accent-text); }
.visit .hours .row.today b { color: var(--accent-text); }

/* ============================================================
   FAQ — pure CSS
   ============================================================ */
.faq { display: grid; gap: 14px; max-width: 820px; }
.faq-item {
  border: 1px solid var(--line);
  background: var(--bg);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px clamp(18px, 3vw, 26px);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus {
  flex: none;
  font-family: var(--body);
  font-style: normal;
  font-weight: 400;
  color: var(--accent);
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 300ms ease;
}
.faq-item[open] summary .plus { transform: rotate(45deg); }
.faq-item > .answer {
  height: 0;
  padding: 0 clamp(18px, 3vw, 26px);
  overflow: hidden;
  color: var(--ink-soft);
  transition: height 360ms cubic-bezier(.4,0,.2,1),
              padding-block-end 360ms cubic-bezier(.4,0,.2,1);
}
.faq-item[open] > .answer {
  height: auto;
  padding-block-end: 22px;
}
.faq-item > .answer p { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .faq-item > .answer { transition: none; }
}

/* ============================================================
   PROCESS timeline
   ============================================================ */
.timeline { display: grid; gap: 0; max-width: 860px; }
.tl-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 3vw, 30px);
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.tl-step:last-child { border-bottom: none; }
.tl-step .no {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--accent);
  line-height: 1;
  min-width: 2ch;
  font-variant-numeric: tabular-nums;
}
.tl-step .tl-body { min-width: 0; }
.tl-step h3 { font-size: 1.24rem; margin-bottom: 6px; }
.tl-step .when {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--accent2-text);
  background: rgba(46, 93, 75, 0.1);
  padding: 3px 9px;
  margin-bottom: 8px;
}
.tl-step p { margin: 0; color: var(--ink-soft); }

/* ============================================================
   TESTIMONIALS — editorial grid
   ============================================================ */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 28px);
}
@media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; max-width: 620px; } }
.testi {
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.testi blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.06rem;
  line-height: 1.5;
  color: var(--ink);
}
.testi .who {
  margin-top: auto;
  font-size: 0.84rem;
  color: var(--muted);
}
.testi .who b { color: var(--ink); font-style: normal; display: block; font-weight: 700; }

/* ============================================================
   NOTES — son eklenenler
   ============================================================ */
.notes { display: grid; gap: 2px; max-width: 760px; }
.note-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.note-row time {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent-text);
  white-space: nowrap;
}
.note-row p { margin: 0; color: var(--ink-soft); }
.note-row p b { color: var(--ink); font-weight: 700; }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band {
  background: var(--accent);
  color: #fff;
  padding: clamp(52px, 8vw, 96px) 0;
  text-align: center;
}
.cta-band h2 {
  color: #fff;
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  max-width: 20ch;
  margin: 0 auto 18px;
}
.cta-band p { color: #F6E2DC; max-width: 46ch; margin: 0 auto 28px; }
.cta-band .btn-primary { background: var(--ink); border-color: var(--ink); }
.cta-band .btn-primary:hover { background: var(--bg); color: var(--ink); border-color: var(--bg); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: #C9C1B2;
  padding: clamp(48px, 7vw, 82px) 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(24px, 4vw, 48px);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand .wordmark { color: #fff; }
.footer-brand .wordmark b { color: #E8A99B; }
.footer-brand .wordmark span { color: #8C8578; }
.footer-brand p { margin: 16px 0 0; font-size: 0.9rem; max-width: 34ch; }
.footer-col h4 {
  font-family: var(--body);
  font-style: normal;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8C8578;
  margin-bottom: 16px;
}
.footer-col a, .footer-col p {
  display: block;
  color: #C9C1B2;
  font-size: 0.9rem;
  margin: 0 0 10px;
  transition: color 180ms ease;
}
.footer-col a:hover { color: #fff; }
.footer-col .val { word-break: break-word; }
.footer-bottom {
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 24px;
  border-top: 1px solid rgba(244, 241, 234, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: #8C8578;
}
.footer-legal a { color: #8C8578; display: inline; margin-right: 16px; }
.footer-legal a:hover { color: #fff; }
.footer-reg { font-family: var(--mono); font-size: 0.74rem; }

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-banner {
  position: fixed;
  bottom: 16px; left: 16px; right: 16px;
  max-width: 520px;
  margin: 0 auto;
  background: var(--ink);
  color: var(--bg);
  border-top: 3px solid var(--accent);
  padding: 22px 22px 20px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
  transform: translateY(140%);
  opacity: 0;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), opacity 240ms;
  z-index: 9999;
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
@media (min-width: 720px) { .cookie-banner { left: 24px; right: auto; max-width: 420px; } }
.cookie-banner h3 { font-size: 1.1rem; color: #fff; margin-bottom: 8px; }
.cookie-banner p { font-size: 0.86rem; color: #C9C1B2; margin: 0 0 16px; line-height: 1.5; }
.cookie-banner p a { color: #E8A99B; text-decoration: underline; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions button {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 11px 16px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.84rem;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 180ms ease, color 180ms ease;
}
.cookie-actions [data-consent="accept"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.cookie-actions [data-consent="accept"]:hover { background: #fff; color: var(--ink); }
.cookie-actions [data-consent="reject"] { background: transparent; color: var(--bg); border-color: rgba(244,241,234,0.4); }
.cookie-actions [data-consent="reject"]:hover { background: rgba(244,241,234,0.12); }
.cookie-actions [data-consent="settings"] { background: transparent; color: #C9C1B2; border-color: rgba(244,241,234,0.4); }
.cookie-actions [data-consent="settings"]:hover { background: rgba(244,241,234,0.12); color: #fff; }

/* ============================================================
   TABLES
   ============================================================ */
.table-scroll {
  display: block; width: 100%; max-width: 100%; min-width: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.table-scroll > table { margin: 0 !important; min-width: 480px; width: 100%; border-collapse: collapse; }
:where(*:has(> .table-scroll), *:has(> * > .table-scroll), *:has(> * > * > .table-scroll)) { min-width: 0; }
table th, table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
table th { background: var(--surface-2); font-weight: 700; color: var(--ink); }
table td { color: var(--ink-soft); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.page-hero {
  padding: clamp(40px, 8vw, 88px) 0 clamp(30px, 5vw, 54px);
  min-height: 240px;
}
.page-hero h1 { font-size: clamp(2.6rem, 7vw, 4.5rem); line-height: 1.04; margin: 20px 0 0; }
.page-hero p { max-width: 52ch; margin: 22px 0 0; color: var(--ink-soft); font-size: clamp(1.02rem, 2.2vw, 1.2rem); }

.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2.4vw, 24px);
}
.channel {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 10px;
  padding: 24px;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  min-width: 0;
}
.channel:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -26px rgba(26,23,20,0.5);
  border-color: var(--line-strong);
}
.channel .badge {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: #fff;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.3rem;
  border-radius: 50%;
  margin-bottom: 16px;
}
.channel h3 { font-size: 0.86rem; font-family: var(--body); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.channel .value {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.24rem;
  color: var(--ink);
  margin: 8px 0 6px;
  word-break: break-word;
}
a.channel .value:hover, .channel a.value:hover { color: var(--accent-text); }
.channel .sub { font-size: 0.82rem; color: var(--muted); margin: 0; }

/* team cards */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 34px);
}
@media (max-width: 820px) { .team-grid { grid-template-columns: 1fr; max-width: 560px; } }
.member { min-width: 0; }
.member img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--line);
}
.member h3 { font-size: 1.34rem; margin: 16px 0 4px; }
.member .role {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent2-text);
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.member p { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }

/* ============================================================
   DOC / LEGAL PAGES
   ============================================================ */
.doc { max-width: 760px; line-height: 1.75; }
.doc h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin: 40px 0 14px; }
.doc h3 { font-size: 1.2rem; margin: 26px 0 10px; }
.doc p, .doc li { color: var(--ink-soft); line-height: 1.75; }
.doc p { margin: 0 0 18px; }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc li::marker { color: var(--accent); }
.doc .updated { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }

.sitemap-list { list-style: none; padding: 0; display: grid; gap: 10px; max-width: 620px; }
.sitemap-list a { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--ink); }
.sitemap-list a:hover { color: var(--accent-text); }

/* thank you / 404 */
.center-page {
  min-height: 64vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 0;
}
.center-page h1 { font-size: clamp(2.4rem, 7vw, 4.5rem); margin: 20px 0 16px; }
.center-page p { max-width: 44ch; color: var(--ink-soft); margin: 0 0 30px; }
.center-page .big404 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(5rem, 20vw, 12rem);
  color: var(--accent);
  line-height: 1;
}

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

/* paper sheen ambient on surfaces */
@keyframes paper-breathe {
  0%, 100% { opacity: 0.0; }
  50% { opacity: 0.06; }
}

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

/* ============================================================
   ██  LUXURY HAUTE-COUTURE COLLAGE ENGINE  ██
   Wall-to-wall couture board · fine laid paper · gold-foil ·
   tissue veils · wax seals · deboss · hairline gold rules
   Palette: ink ground + bone/ivory + ONE metallic (gold-foil)
   ============================================================ */

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

:root{
  --paper-a:#EDE4CF; --paper-b:#E4D9BF; --paper-c:#F3ECDC; --paper-d:#D8C9A8;
  --tissue:rgba(255,252,244,.5);
  --foil: linear-gradient(135deg,#8C6E30 0%,#C9AC6A 26%,#E6CE96 46%,#B08C42 62%,#8C6E30 100%);
  --foil-soft: linear-gradient(135deg,#B08C42,#E6CE96 50%,#9C7C38);
  --silk-ink:#2A2229; --silk-bone:#E3D9C4; --silk-aub:#4A3A42;
  --hand:#7A6230;
}

/* ============================================================
   GLOBAL COUTURE SUBSTRATE — one continuous refined board
   ============================================================ */
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(rgba(21,18,14,.020) 20%, transparent 22%),
    radial-gradient(120% 80% at 8% 2%, rgba(176,140,66,.055), transparent 46%),
    radial-gradient(120% 90% at 92% 96%, rgba(21,18,14,.05), transparent 50%),
    linear-gradient(rgba(176,140,66,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176,140,66,.045) 1px, transparent 1px);
  background-size:6px 6px, 100% 100%, 100% 100%, 60px 60px, 60px 60px;
  background-position:0 0, 0 0, 0 0, 0 0, 0 0;
  background-attachment:fixed, scroll, scroll, fixed, fixed;
}
body::before{
  background:
    radial-gradient(120% 80% at 12% -8%, rgba(176,140,66,.05), transparent 58%),
    radial-gradient(120% 80% at 100% 108%, rgba(74,58,66,.05), transparent 60%) !important;
  opacity:.8 !important;
}

section > .container{ position:relative; z-index:3; }

.pad-block, .hero, .visit, .yaratim, .manifesto{ position:relative; overflow:visible; }
.pad-block::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, rgba(21,18,14,.02) 0 1px, transparent 1px 60px),
    radial-gradient(rgba(21,18,14,.022) 18%, transparent 20%);
  background-size:auto, 6px 6px;
  -webkit-mask-image:linear-gradient(180deg, #000 0 82%, transparent);
  mask-image:linear-gradient(180deg, #000 0 82%, transparent);
  opacity:.6;
}
.pad-block.alt{ background-color:transparent; }
.pad-block.alt > .container{
  background:linear-gradient(180deg, rgba(247,240,220,.88), rgba(231,222,203,.82));
  box-shadow:0 50px 100px -64px rgba(21,18,14,.5), 0 1px 0 rgba(255,255,255,.5) inset;
  border-radius:2px;
  padding-top:clamp(34px,4.5vw,60px);
  padding-bottom:clamp(34px,4.5vw,60px);
  padding-left:clamp(20px,4vw,54px);
  padding-right:clamp(20px,4vw,54px);
  clip-path:polygon(
    0% 1.1%, 8% 0.2%, 17% 1.3%, 26% 0.3%, 35% 1.4%, 44% 0.4%, 53% 1.3%, 62% 0.3%,
    71% 1.4%, 80% 0.4%, 89% 1.2%, 100% 0.4%,
    100% 98.9%, 92% 99.8%, 83% 98.6%, 74% 99.7%, 65% 98.7%, 56% 99.7%, 47% 98.6%,
    38% 99.7%, 29% 98.7%, 20% 99.7%, 11% 98.7%, 0% 99.7%);
}
.pad-block.alt > .container::after{
  content:""; position:absolute; inset:14px; z-index:0; pointer-events:none;
  border:1px solid var(--gold-line); opacity:.5;
}

/* ============================================================
   MIXED-MEDIA COUTURE DECOR SYSTEM  (.km = pointer-events:none)
   ============================================================ */
.km{ position:absolute; pointer-events:none; z-index:1; }
.tc-ink{ color:var(--ink); } .tc-gold{ color:var(--gold); } .tc-aub{ color:var(--accent2); }
.tc-cream{ color:#FBF4E4; }
.ko3{opacity:.3}.ko35{opacity:.35}.ko5{opacity:.5}.ko6{opacity:.6}.ko7{opacity:.7}

.km-scrap{ width:120px; height:92px; background:var(--paper-a);
  box-shadow:0 16px 34px -20px rgba(21,18,14,.5), 0 1px 0 rgba(255,255,255,.4) inset;
  clip-path:polygon(3% 6%,26% 2%,54% 5%,82% 1%,98% 8%,95% 36%,100% 66%,96% 96%,70% 99%,42% 95%,18% 100%,2% 92%,0 60%,5% 30%); }
.km-scrap.pb{ background:var(--paper-b); } .km-scrap.pc{ background:var(--paper-c); } .km-scrap.pd{ background:var(--paper-d); }
.km-scrap.ink{ background:var(--ink); } .km-scrap.aub{ background:var(--accent2); }
.km-scrap.ruled{ background-image:repeating-linear-gradient(0deg, transparent 0 13px, rgba(176,140,66,.22) 13px 14px); }
.km-scrap.laid{ background-image:repeating-linear-gradient(0deg, rgba(21,18,14,.04) 0 2px, transparent 2px 5px); }

.km-silk{ width:74px; height:92px; background:var(--silk-aub);
  box-shadow:0 14px 30px -18px rgba(21,18,14,.55), 0 1px 0 rgba(255,255,255,.14) inset;
  clip-path:polygon(4% 2%,96% 5%,99% 40%,97% 96%,60% 99%,8% 97%,1% 60%,3% 20%); }
.km-silk::after{ content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(24deg, rgba(255,255,255,.05) 0 2px, transparent 2px 5px),
    radial-gradient(70% 50% at 34% 24%, rgba(255,255,255,.14), transparent 62%); }
.km-silk.bone{ background:var(--silk-bone); }
.km-silk.ink{ background:var(--silk-ink); }
.km-silk.gold{ background:#9C7C38; }

.km-tape{ width:96px; height:28px; background:var(--foil);
  box-shadow:0 4px 12px -5px rgba(21,18,14,.5), 0 1px 0 rgba(255,255,255,.25) inset;
  clip-path:polygon(4% 0,96% 0,100% 18%,97% 50%,100% 84%,96% 100%,4% 100%,0 82%,3% 50%,0 16%); }
.km-tape.tissue{ background:var(--tissue); box-shadow:0 3px 10px -6px rgba(21,18,14,.3); }
.km-tape.ink{ background:linear-gradient(135deg,#201B15,#3C352C); }
.km-tape.lbl{ display:flex; align-items:center; justify-content:center; height:26px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#2A2115; background:var(--foil-soft); }

.km-tissue{ width:180px; height:130px; background:rgba(255,252,244,.42);
  border:1px solid rgba(255,255,255,.28); backdrop-filter:saturate(1.04);
  box-shadow:0 8px 24px -16px rgba(21,18,14,.4);
  clip-path:polygon(2% 8%,30% 2%,64% 6%,98% 1%,96% 40%,100% 74%,95% 98%,66% 94%,32% 99%,3% 95%,0 60%,4% 30%); }
.km-tissue.gold{ background:linear-gradient(135deg, rgba(230,206,150,.28), rgba(176,140,66,.12)); }

.km-rule{ width:180px; height:1px; background:linear-gradient(90deg, transparent, var(--gold) 12%, var(--gold) 88%, transparent); opacity:.75; }
.km-rule.v{ width:1px; height:180px; background:linear-gradient(180deg, transparent, var(--gold) 12%, var(--gold) 88%, transparent); }

.km-reg{ width:34px; height:34px;
  background:radial-gradient(circle, transparent 4px, currentColor 4px, currentColor 5.2px, transparent 6px); }
.km-reg::before{ content:""; position:absolute; left:50%; top:-5px; bottom:-5px; width:1px; background:currentColor; transform:translateX(-50%); }
.km-reg::after{ content:""; position:absolute; top:50%; left:-5px; right:-5px; height:1px; background:currentColor; transform:translateY(-50%); }

.km-crop{ width:26px; height:26px; }
.km-crop::before{ content:""; position:absolute; left:0; top:0; width:26px; height:1px; background:currentColor; }
.km-crop::after{ content:""; position:absolute; left:0; top:0; width:1px; height:26px; background:currentColor; }

.km-seal{ width:62px; height:62px; border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #C9AC6A, #8C6E30 62%, #6E5424);
  box-shadow:0 12px 26px -12px rgba(21,18,14,.6), 0 1px 0 rgba(255,255,255,.3) inset;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-style:italic; font-weight:700; font-size:1.5rem;
  color:#5A4620; text-shadow:0 1px 0 rgba(255,255,255,.28); }
.km-seal::before{ content:""; position:absolute; inset:5px; border-radius:50%;
  border:1px solid rgba(90,70,32,.5); }
.km-seal.ink{ background:radial-gradient(circle at 36% 30%, #3C352C, #201B15 66%, #15120E); color:var(--gold-hi); text-shadow:0 1px 0 rgba(0,0,0,.4); }
.km-seal.ink::before{ border-color:rgba(230,206,150,.35); }

.km-stamp{ font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:currentColor; border:1px solid currentColor; border-radius:2px;
  padding:5px 10px; opacity:.7; white-space:nowrap; transform:rotate(-4deg);
  background:rgba(239,232,216,.2); }
.km-stamp.ring{ box-shadow:0 0 0 1px rgba(255,255,255,.4) inset; }
.km-stamp.foil{ color:#3A2E12; border-color:transparent; background:var(--foil-soft); opacity:.92;
  box-shadow:0 3px 8px -4px rgba(21,18,14,.4); }

.km-hand{ font-family:var(--serif); font-style:italic; font-weight:700; color:var(--hand);
  font-size:1.1rem; line-height:1; transform:rotate(-6deg); white-space:nowrap; opacity:.82;
  text-shadow:0 1px 0 rgba(255,255,255,.4); }

.km-num{ font-family:var(--serif); font-style:italic; font-weight:700;
  font-size:clamp(120px,20vw,270px); line-height:.7; color:var(--gold);
  opacity:.10; letter-spacing:-.04em; text-shadow:1px 1px 0 rgba(255,255,255,.3); }

.km-ticket{ width:120px; height:42px; background:var(--paper-c); border:1px solid var(--gold-line);
  box-shadow:0 10px 22px -14px rgba(21,18,14,.5);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-text);
  -webkit-mask:radial-gradient(7px 7px at 0 50%, transparent 6px, #000 7px), radial-gradient(7px 7px at 100% 50%, transparent 6px, #000 7px);
  -webkit-mask-composite:source-in; mask:radial-gradient(7px 7px at 0 50%, transparent 6px, #000 7px), radial-gradient(7px 7px at 100% 50%, transparent 6px, #000 7px); mask-composite:intersect; }

.km-photo{ background:#FBF4E4; padding:6px; box-shadow:0 26px 50px -26px rgba(21,18,14,.55), 0 0 0 1px var(--gold-line);
  clip-path:polygon(2% 5%,24% 1%,52% 4%,80% 0,99% 6%,96% 34%,100% 66%,97% 96%,72% 99%,44% 96%,20% 100%,2% 94%,0 60%,4% 30%); }
.km-photo img{ width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.03) saturate(.98); }
.km-photo .tp{ position:absolute; top:-9px; left:24%; width:60px; height:20px; background:var(--foil); transform:rotate(-6deg);
  clip-path:polygon(4% 0,96% 0,100% 18%,97% 50%,100% 84%,96% 100%,4% 100%,0 82%,3% 50%,0 16%); }
.km-photo .tp.b{ left:auto; right:20%; transform:rotate(7deg); }

/* ============================================================
   GOLD-FOIL highlighted words inside headings  (.rk)
   ============================================================ */
.rk{ position:relative; display:inline-block; padding:0 .1em; color:#2E2410; }
.rk::before{ content:""; position:absolute; inset:-.05em -.02em; z-index:-1;
  background:var(--foil); transform:rotate(-1.2deg);
  clip-path:polygon(2% 14%,98% 5%,100% 82%,96% 98%,3% 93%,0 22%); opacity:.94;
  box-shadow:0 3px 10px -5px rgba(21,18,14,.4); }
.rk.ink{ color:var(--gold-hi); }
.rk.ink::before{ background:linear-gradient(135deg,#201B15,#3C352C); box-shadow:0 3px 10px -5px rgba(21,18,14,.5); }
.rk.deboss{ color:inherit; padding:0; }
.rk.deboss::before{ top:auto; bottom:-.1em; height:.14em; inset-inline:0; transform:none;
  background:var(--foil); clip-path:polygon(0 30%,100% 0,100% 74%,0 100%); opacity:.9; box-shadow:none; }

.section-head{ position:relative; z-index:3; }
.section-head::before{
  content:""; position:absolute; z-index:-1; left:-18px; top:-16px;
  width:min(300px,68%); height:calc(100% + 26px);
  background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(231,222,203,.5));
  box-shadow:0 24px 48px -34px rgba(21,18,14,.42);
  transform:rotate(-.5deg);
  clip-path:polygon(1% 4%,97% 1%,100% 8%,99% 92%,96% 99%,2% 97%,0 88%,1% 12%);
}

/* ============================================================
   HEADER / NAV — collaged with gold-foil hairline
   ============================================================ */
.site-header{ background:rgba(239,232,216,.9); }
.site-header.is-scrolled{ background:rgba(239,232,216,.98); box-shadow:0 8px 24px -18px rgba(21,18,14,.4); }
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:3px; z-index:-1;
  background:var(--foil); opacity:.85;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.wordmark{ position:relative; }
.wordmark b{ color:var(--accent-text); }
.wordmark::before{
  content:""; position:absolute; left:-9px; top:-5px; width:30px; height:16px;
  background:var(--foil); transform:rotate(-8deg); z-index:-1; opacity:.9;
  clip-path:polygon(4% 0,96% 0,100% 18%,97% 50%,100% 84%,96% 100%,4% 100%,0 82%,3% 50%,0 16%); }

/* ============================================================
   BUTTONS — couture: ink ground, gold-foil edge, gold shimmer
   ============================================================ */
.btn-primary{ background:var(--ink); color:var(--gold-hi); border:1px solid var(--gold-deep);
  position:relative; overflow:hidden; }
.btn-primary::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(230,206,150,.28) 48%, transparent 66%);
  transform:translateX(-120%); transition:transform 720ms ease; }
.btn-primary:hover, .btn-primary:focus-visible{ background:var(--ink-2); color:#FBF4E4; border-color:var(--gold);
  transform:translateY(-2px); box-shadow:0 16px 34px -20px rgba(21,18,14,.8); }
.btn-primary:hover::after{ transform:translateX(120%); }
.btn-ghost{ border-color:var(--gold-line); color:var(--ink); }
.btn-ghost:hover, .btn-ghost:focus-visible{ background:var(--ink); color:var(--gold-hi); border-color:var(--ink); transform:translateY(-2px); }

/* ============================================================
   CARD COLLAGE — gold tape corner + gentle tilt + luxe shadow
   ============================================================ */
.eser, .testi, .note-row{ position:relative; }
.eser{ box-shadow:0 26px 54px -34px rgba(21,18,14,.5); transform:rotate(-.4deg); }
.eser:nth-child(2n){ transform:rotate(.5deg); }
.eser:nth-child(3n){ transform:rotate(-.25deg); }
.eser::before, .testi::before{
  content:""; position:absolute; top:-10px; left:50%; margin-left:-38px;
  width:76px; height:22px; background:var(--foil); transform:rotate(-3deg);
  box-shadow:0 4px 10px -5px rgba(21,18,14,.45); z-index:5; pointer-events:none; opacity:.94;
  clip-path:polygon(4% 0,96% 0,100% 20%,97% 50%,100% 82%,96% 100%,4% 100%,0 82%,3% 50%,0 18%); }
.eser:nth-child(2n)::before{ transform:rotate(4deg); }
.testi{ transform:rotate(-.3deg); box-shadow:0 24px 48px -32px rgba(21,18,14,.45); border-top-color:var(--gold); }
.testi:nth-child(2n){ transform:rotate(.4deg); }
.testi:nth-child(2n)::before{ background:var(--foil-soft); transform:rotate(4deg); }
.eser .tek{ background:var(--ink); color:var(--gold-hi); }
.eser:hover{ box-shadow:0 34px 64px -30px rgba(21,18,14,.6); }

.gallery{ gap:clamp(22px,3vw,38px); }

.estimator{ position:relative; }
.est-form{ background:var(--surface); box-shadow:0 30px 60px -46px rgba(21,18,14,.5); position:relative; }
.est-form::before{
  content:""; position:absolute; inset:-12px -10px; z-index:-1;
  background:linear-gradient(180deg, rgba(231,222,203,.85), rgba(211,198,169,.7));
  box-shadow:0 30px 60px -46px rgba(21,18,14,.55); transform:rotate(-.4deg);
  clip-path:polygon(0.5% 3%,99% 1%,100% 7%,99% 94%,97% 99%,1% 97%,0 90%,0.6% 9%); }
.est-result{ border-top:1px solid var(--gold); box-shadow:0 40px 80px -50px rgba(21,18,14,.7);
  background:linear-gradient(180deg,var(--ink-2),var(--ink)); }
.est-result::after{ content:""; position:absolute; inset:12px; border:1px solid rgba(230,206,150,.24); pointer-events:none; }
.est-result .r-eyebrow{ color:var(--gold-hi); }
.est-result .r-price{ color:#FBF4E4; }
.est-result .r-price small{ color:var(--gold-soft); }
.est-result .r-line b{ color:var(--gold-hi); }
.est-result .r-delivery{ color:var(--gold-soft) !important; }
.est-result .r-warn{ background:rgba(176,140,66,.2); border-left-color:var(--gold); color:#F0E2C4; }
.est-result .r-note{ color:#B8AE97; }

.price-note{ background:var(--surface-2); border-left:3px solid var(--gold); }

.tl-step .no{ color:var(--accent-text); }
.tl-step .when{ color:var(--accent2-text); background:rgba(74,58,66,.09); }
.note-row time{ color:var(--accent-text); }
.eser .size{ color:var(--accent2-text); }

/* ============================================================
   HERO — dense couture cluster
   ============================================================ */
.hero{ overflow:hidden; }
.hero .container{ position:relative; z-index:3; }
.hero-strip{ box-shadow:0 50px 90px -54px rgba(21,18,14,.7); }
.hero-strip::after{
  content:""; position:absolute; top:-10px; left:16%; width:110px; height:26px; z-index:5;
  background:var(--foil); transform:rotate(-4deg); opacity:.92; pointer-events:none;
  box-shadow:0 4px 10px -5px rgba(21,18,14,.4);
  clip-path:polygon(4% 0,96% 0,100% 18%,97% 50%,100% 84%,96% 100%,4% 100%,0 82%,3% 50%,0 16%); }
.hero-strip .strip-tag{ background:var(--foil); color:#2E2410; }
.hero .drop{ color:var(--gold); }
.hero h1 .l2{ color:var(--ink); }
.trust-strip span::before{ background:var(--gold); }

/* ============================================================
   MANIFESTO — deep ink couture panel, no flat solid
   ============================================================ */
.manifesto{ background:radial-gradient(140% 130% at 20% -12%, #241D18, #15120E 72%); overflow:hidden; }
.manifesto::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.4;
  background-image:
    radial-gradient(rgba(230,206,150,.08) 18%, transparent 20%),
    repeating-linear-gradient(90deg, rgba(230,206,150,.05) 0 1px, transparent 1px 56px);
  background-size:6px 6px, auto; }
.manifesto .eyebrow{ color:var(--gold-hi); }
.manifesto .eyebrow::before{ background:var(--gold); }
.manifesto blockquote .hl{ color:var(--gold-hi); font-style:italic; }
.manifesto .attr b{ color:var(--gold-hi); }

.yaratim{ background:linear-gradient(180deg, var(--surface), var(--paper-deep)); overflow:hidden; }
.editorial figure{ box-shadow:0 30px 60px -40px rgba(21,18,14,.5); border-color:var(--gold-line); }
.editorial figure::after{
  content:""; position:absolute; top:-11px; left:22%; width:96px; height:24px; z-index:4;
  background:var(--foil); transform:rotate(-4deg); opacity:.92;
  clip-path:polygon(4% 0,96% 0,100% 18%,97% 50%,100% 84%,96% 100%,4% 100%,0 82%,3% 50%,0 16%); }
.editorial .textcol p.first::first-letter{ color:var(--accent-text); }
.pull{ border-left-color:var(--gold); }

.visit .vphoto img{ border-color:var(--gold-line); box-shadow:0 30px 60px -44px rgba(21,18,14,.5); }
.visit .vphoto .cap{ background:var(--ink); color:var(--gold-hi); }
.visit .hours .row.today, .visit .hours .row.today b{ color:var(--accent-text); }

/* ============================================================
   CTA band — deep ink couture, foil headline accent
   ============================================================ */
.cta-band{ background:radial-gradient(140% 130% at 50% -10%, #241D18, #15120E 74%); color:#F3ECDC; overflow:hidden; }
.cta-band::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.45;
  background-image:
    radial-gradient(rgba(230,206,150,.1) 18%, transparent 20%),
    repeating-linear-gradient(90deg, rgba(230,206,150,.06) 0 1px, transparent 1px 56px);
  background-size:6px 6px, auto; }
.cta-band .container{ position:relative; z-index:3; }
.cta-band h2{ color:#FBF4E4; }
.cta-band p{ color:#C9BFA6; }
.cta-band .btn-primary{ background:var(--foil); color:#2A2110; border-color:var(--gold-deep); }
.cta-band .btn-primary:hover{ background:#FBF4E4; color:var(--ink); }

/* ============================================================
   FOOTER — collaged substrate + gold hairline
   ============================================================ */
.site-footer{ position:relative; overflow:hidden; background:var(--ink); }
.site-footer::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.35;
  background-image:
    radial-gradient(rgba(230,206,150,.08) 18%, transparent 20%),
    repeating-linear-gradient(0deg, rgba(230,206,150,.05) 0 1px, transparent 1px 52px);
  background-size:6px 6px, auto; }
.site-footer::after{
  content:""; position:absolute; top:-3px; left:0; right:0; height:3px; z-index:4;
  background:var(--foil); opacity:.85;
  -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.site-footer .container{ position:relative; z-index:3; }
.footer-brand .wordmark b{ color:var(--gold-hi); }
.footer-col h4{ color:var(--gold-soft); }

.cookie-banner{ border-top-color:var(--gold); }
.cookie-banner p a{ color:var(--gold-hi); }
.cookie-actions [data-consent="accept"]{ background:var(--gold); color:#2A2110; border-color:var(--gold-deep); }
.cookie-actions [data-consent="accept"]:hover{ background:#FBF4E4; color:var(--ink); }
.drawer{ border-left-color:var(--gold); }
.drawer a:hover, .drawer a.is-active{ color:var(--accent-text); }

.torn-div{ background:var(--surface); }
.torn-div::after{
  content:""; position:absolute; left:8%; right:8%; top:3px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold) 12%,var(--gold) 88%,transparent);
  opacity:.55; pointer-events:none; }

.page-hero{ position:relative; overflow:visible; }
.page-hero::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:6%; top:20px; width:min(150px,32vw); height:90px;
  background:var(--surface);
  background-image:linear-gradient(rgba(176,140,66,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(176,140,66,.16) 1px,transparent 1px);
  background-size:12px 12px; border:1px solid var(--gold-line);
  box-shadow:0 16px 32px -22px rgba(21,18,14,.5); transform:rotate(3deg); }
.page-hero::after{
  content:"KATMAN"; position:absolute; z-index:0; pointer-events:none;
  right:9%; top:36px; font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--accent-text); transform:rotate(3deg); opacity:.9; }
.page-hero .container{ position:relative; z-index:2; }

/* ============================================================
   SIGNATURE SCROLL SCENE — "PORTRE / katmanlar oluşur"
   a paper-collage portrait composes layer by layer on scroll
   ============================================================ */
.katman-track{ position:relative; height:340vh; }
.katman-pin{ position:sticky; top:0; height:100vh; overflow:hidden; display:grid; place-items:center;
  background:
    radial-gradient(rgba(21,18,14,.03) 1px, transparent 1.6px) 0 0/7px 7px,
    radial-gradient(140% 100% at 50% 34%, #F5EFE0, var(--bg) 76%); }
.katman-pin::after{ content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:0 0 200px 40px rgba(21,18,14,.05) inset; }
.katman-wrap{ position:relative; z-index:3; width:100%; max-width:var(--wrap);
  margin-inline:auto; padding-inline:clamp(18px,5vw,44px);
  display:grid; grid-template-columns:1fr; gap:clamp(24px,5vw,56px); align-items:center; }
@media (min-width:960px){ .katman-wrap{ grid-template-columns:1fr .8fr; } }

.katman-stage{ position:relative; width:100%; max-width:430px; aspect-ratio:4/5; margin-inline:auto; isolation:isolate; }
.kl{ position:absolute; will-change:transform,opacity; opacity:0; }
html.no-js .kl{ opacity:1; }
.kl-base{ inset:5% 4%; background:var(--paper-b);
  box-shadow:0 36px 70px -40px rgba(21,18,14,.5), 0 0 0 1px rgba(255,255,255,.35) inset;
  clip-path:polygon(2% 4%,26% 1%,54% 3%,82% 0,99% 5%,97% 34%,100% 66%,97% 97%,72% 99%,44% 96%,20% 100%,2% 95%,0 62%,3% 30%);
  background-image:repeating-linear-gradient(0deg, rgba(21,18,14,.03) 0 2px, transparent 2px 6px); }
.kl-field1{ inset:14% 12% 24% 10%; background:linear-gradient(160deg,#E7DECB,#D3C6A9); opacity:.96;
  border-radius:46% 54% 50% 50% / 56% 46% 54% 44%; box-shadow:inset 0 0 40px rgba(21,18,14,.08); }
.kl-field2{ inset:42% 22% 14% 32%; background:linear-gradient(160deg,#4A3A42,#2A2229); opacity:.9;
  border-radius:52% 48% 44% 56% / 48% 56% 44% 52%; }
.kl-photo{ inset:19% 15% 24% 17%; background:#FBF4E4; padding:6px;
  box-shadow:0 30px 56px -28px rgba(21,18,14,.55), 0 0 0 1px var(--gold-line);
  clip-path:polygon(3% 5%,24% 1%,52% 4%,80% 0,99% 6%,96% 34%,100% 66%,97% 96%,72% 99%,44% 96%,20% 100%,2% 94%,0 60%,4% 30%); }
.kl-photo img{ width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.04) saturate(.97); }
.kl-tissue{ inset:12% 8% 30% 12%; background:rgba(255,252,244,.34); border:1px solid rgba(255,255,255,.3);
  clip-path:polygon(2% 8%,30% 2%,64% 6%,98% 1%,96% 40%,100% 74%,95% 98%,66% 94%,32% 99%,3% 95%,0 60%,4% 30%); }
.kl-foil{ top:16%; right:8%; width:150px; height:30px; background:var(--foil); transform:rotate(12deg);
  box-shadow:0 6px 16px -8px rgba(21,18,14,.4);
  clip-path:polygon(4% 0,96% 0,100% 18%,97% 50%,100% 84%,96% 100%,4% 100%,0 82%,3% 50%,0 16%); }
.kl-hand{ bottom:12%; left:12%; font-family:var(--serif); font-style:italic; font-weight:700;
  color:var(--hand); font-size:clamp(1.1rem,3.4vw,1.7rem); transform:rotate(-7deg);
  text-shadow:0 1px 0 rgba(255,255,255,.4); }
.kl-hand::after{ content:""; display:block; width:80%; height:2px; margin-top:3px;
  background:linear-gradient(90deg,var(--gold),transparent); opacity:.7; }
.kl-seal{ bottom:24%; right:12%; }
.kl-title{ top:5%; left:0; right:0; text-align:center; font-family:var(--serif); font-style:italic;
  font-weight:700; font-size:clamp(2.4rem,8vw,4.4rem); color:#C9BFA3; letter-spacing:-.02em;
  text-shadow:0 1px 0 rgba(255,255,255,.7), 0 -1px 0 rgba(21,18,14,.25); }

.katman-cap{ position:relative; z-index:4; }
.katman-cap .eyebrow{ margin-bottom:14px; }
.katman-cap h2{ font-family:var(--serif); font-style:italic; font-weight:700;
  font-size:clamp(1.9rem,5vw,3.2rem); color:var(--ink); letter-spacing:-.015em; line-height:1.04; }
.katman-cap p{ margin-top:16px; color:var(--ink-soft); max-width:44ch; }
.katman-readout{ margin-top:22px; display:inline-flex; align-items:center; gap:14px;
  font-family:var(--mono); font-weight:700; font-size:13px; color:var(--ink);
  border:1px solid var(--gold-line); background:rgba(255,255,255,.4); padding:12px 16px; border-radius:2px;
  box-shadow:0 14px 30px -20px rgba(21,18,14,.4); }
.katman-readout b{ color:var(--accent-text); font-size:1.4rem; font-variant-numeric:tabular-nums; min-width:2.2ch; text-align:right; }
.katman-readout .kbar{ width:120px; height:6px; background:var(--surface-2); border-radius:3px; overflow:hidden; }
.katman-readout .kbar > i{ display:block; height:100%; width:0; background:var(--foil); border-radius:3px; }
.katman-readout.done b{ color:var(--accent2-text); }
.kc{ opacity:0; transform:translateY(20px); }

.katman-scroll{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:6;
  font-family:var(--mono); font-weight:700; font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:#2E2410; background:var(--foil-soft); padding:6px 12px; animation:kmBob 2.4s ease-in-out infinite; }
@keyframes kmBob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,7px); } }

/* ============================================================
   PRELOADER + GOLD-DUST MOTES
   ============================================================ */
#pre{ position:fixed; inset:0; z-index:10000; background:var(--bg);
  display:grid; place-items:center; transition:opacity .7s ease, visibility .7s; }
#pre.done{ opacity:0; visibility:hidden; pointer-events:none; }
#pre .pl-in{ text-align:center; }
#pre .pl-mark{ font-family:var(--serif); font-style:italic; font-weight:700; font-size:clamp(34px,7vw,64px);
  letter-spacing:-.02em; color:var(--ink); }
#pre .pl-mark b{ color:var(--accent-text); font-style:normal; }
#pre .pl-sub{ font-family:var(--mono); font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted); margin-top:10px; }
#pre .pl-bar{ margin:24px auto 0; width:min(220px,58vw); height:2px;
  background:var(--line-strong); overflow:hidden; position:relative; }
#pre .pl-bar i{ position:absolute; inset:0; width:0; background:var(--foil);
  animation:plFill 1.15s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes plFill{ to{ width:100%; } }
#motes{ position:fixed; inset:0; z-index:2; pointer-events:none; mix-blend-mode:multiply; opacity:.5; }

/* ============================================================
   MOBILE CURATION — keep whole-page couture collage, curate ~45%
   ============================================================ */
@media (max-width:900px){ .km-bleed{ display:none !important; } }
@media (max-width:768px){
  .km:not(.km-keep){ display:none !important; }
  .km-keep.km-scrap{ transform:scale(.72); }
  .km-keep.km-silk{ transform:scale(.74); }
  .km-keep.km-tape{ width:74px; }
  .km-keep.km-rule{ width:120px; }
  .km-keep.km-num{ font-size:104px; }
  .km-keep.km-tissue{ width:120px; height:88px; }
  .km-keep.km-ticket{ transform:scale(.82); }
  .km-keep.km-seal{ transform:scale(.82); }
  .km-keep.km-hand{ font-size:.92rem; max-width:44vw; white-space:normal; }
  .section-head::before{ width:min(230px,84%); left:-10px; }
  .katman-track{ height:280vh; }
  .katman-stage{ max-width:310px; }
}
@media (max-width:480px){
  .km-num{ font-size:86px; }
  .katman-track{ height:250vh; }
  .katman-stage{ max-width:262px; }
}

@media (prefers-reduced-motion:reduce){
  .katman-scroll{ animation:none; }
  .kc{ opacity:1; transform:none; }
  .kl{ opacity:1 !important; }
  #motes{ display:none; }
  .btn-primary::after{ display:none; }
}

/* ============================================================
   ██  ELEVATION PASS  ██  (additive · 25-08-2026)
   Denser gallery-grade board · elevated type · deeper foil
   micro-detail. Restrained bone/ink + ONE gold-foil preserved.
   ============================================================ */

/* ---- deeper tonal richness: global vignette + fine grain veil ---- */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  mix-blend-mode:multiply; opacity:.9;
  background:
    radial-gradient(120% 85% at 50% 6%, transparent 50%, rgba(21,18,14,.055) 100%),
    radial-gradient(110% 70% at 50% 112%, transparent 56%, rgba(21,18,14,.07) 100%),
    radial-gradient(rgba(21,18,14,.015) 22%, transparent 24%);
  background-size:100% 100%, 100% 100%, 3px 3px;
  background-attachment:fixed, fixed, fixed;
}

/* ---- TYPOGRAPHY — taller, higher-contrast Georgia display ---- */
.hero h1{ font-size:clamp(3.4rem,11.5vw,5.3rem); letter-spacing:-.026em; }
.section-head h2{ font-size:clamp(2.2rem,5.6vw,4rem); letter-spacing:-.018em; }
.katman-cap h2{ font-size:clamp(2rem,5.2vw,3.5rem); }

/* refined letter-spaced eyebrow with a trailing fading gold hairline */
.eyebrow{ letter-spacing:.265em; }
.eyebrow::after{
  content:""; width:20px; height:1px; opacity:.8;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.manifesto .eyebrow::after{ background:linear-gradient(90deg,var(--gold-hi),transparent); }

/* hairline-gold divider closing every section head */
.section-head::after{
  content:""; display:block; height:1px; width:min(170px,40%); margin-top:2px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-soft) 55%,transparent);
  opacity:.65;
}

/* reusable couture drop-cap for long editorial paragraphs */
.dropcap::first-letter{
  font-family:var(--serif); font-style:italic; font-weight:700; float:left;
  font-size:3.9rem; line-height:.72; padding:9px 12px 0 0; color:var(--accent-text);
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}

/* ---- PREMIUM MICRO-DETAIL — gold-foil shimmer on hover ---- */
/* ghost button gains the same foil sweep as the primary */
.btn-ghost{ position:relative; overflow:hidden; }
.btn-ghost::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(230,206,150,.30) 48%,transparent 66%);
  transform:translateX(-120%); transition:transform 760ms ease;
}
.btn-ghost:hover::after, .btn-ghost:focus-visible::after{ transform:translateX(120%); }

/* header CTA foil shimmer */
.nav-cta{ position:relative; overflow:hidden; }
.nav-cta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(230,206,150,.38) 48%,transparent 66%);
  transform:translateX(-130%); transition:transform 760ms ease;
}
.nav-cta:hover::before, .nav-cta:focus-visible::before{ transform:translateX(130%); }

/* desktop nav underline becomes a gold-foil hairline */
@media (min-width:1024px){ .nav-desktop a::after{ background:var(--foil); } }

/* footer links grow a gold underline on hover */
.footer-col a{
  background-image:linear-gradient(90deg,var(--gold-soft),var(--gold));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size 260ms cubic-bezier(.2,.7,.2,1), color 180ms ease;
}
.footer-col a:hover{ background-size:100% 1px; }

/* ---- refined multi-layer soft shadows (crisp near + soft far) ---- */
.eser{ box-shadow:0 2px 5px -2px rgba(21,18,14,.24), 0 26px 54px -34px rgba(21,18,14,.55); }
.eser:hover{ box-shadow:0 4px 9px -3px rgba(21,18,14,.30), 0 40px 72px -30px rgba(21,18,14,.62); }
.testi{ box-shadow:0 2px 5px -2px rgba(21,18,14,.20), 0 24px 48px -32px rgba(21,18,14,.45); }
.channel:hover{ box-shadow:0 3px 8px -3px rgba(21,18,14,.26), 0 24px 46px -28px rgba(21,18,14,.5); }

/* ---- hero deeper tone at the foot of the fold ---- */
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 70% at 50% 128%, rgba(21,18,14,.07), transparent 62%);
}

/* ============================================================
   ELEVATION — richer photo clippings (gilt-framed cut-outs)
   ============================================================ */
.km-photo.gilt{
  padding:7px;
  background:linear-gradient(135deg,#F3ECDC,#E4D9BF);
  box-shadow:0 30px 58px -26px rgba(21,18,14,.62), 0 0 0 2px var(--gold), 0 0 0 4px rgba(21,18,14,.14),
             0 1px 0 rgba(255,255,255,.5) inset;
}
.km-photo .cap{
  position:absolute; left:7px; bottom:7px; z-index:2;
  font-family:var(--mono); font-size:8px; letter-spacing:.14em; text-transform:uppercase;
  color:#2E2410; background:var(--foil-soft); padding:2px 6px;
  box-shadow:0 2px 6px -3px rgba(21,18,14,.5);
}
.km-photo .tp.c{ left:44%; top:auto; bottom:-8px; transform:rotate(3deg); background:var(--foil-soft); }

/* mid-hero + section fillers may sit a touch dimmer so focal clusters breathe */
.km-photo.veil::before{
  content:""; position:absolute; inset:6px; z-index:1; pointer-events:none;
  background:linear-gradient(160deg, rgba(255,252,244,.10), rgba(211,198,169,.22));
}

/* fix: header İletişim button (.nav-cta) lost its padding (overridden by .nav-desktop a padding:4px 0) → cramped */
.nav-desktop a.nav-cta{ padding:10px 20px; display:inline-flex; align-items:center; }

/* fix: price/package galleries force 3 cols via inline style (not adaptive) → make responsive on small screens */
@media (max-width: 600px){ .gallery[style*="repeat(3"]{ grid-template-columns:1fr !important; } }
@media (min-width:601px) and (max-width:900px){ .gallery[style*="repeat(3"]{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }