/* self-hosted fonts (restored after polish strip) */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: optional;
  src: url(../fonts/BricolageGrotesque-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: optional;
  src: url(../fonts/BricolageGrotesque-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: optional;
  src: url(../fonts/BricolageGrotesque-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: optional;
  src: url(../fonts/BricolageGrotesque-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: optional;
  src: url(../fonts/BricolageGrotesque-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: optional;
  src: url(../fonts/BricolageGrotesque-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: optional;
  src: url(../fonts/BricolageGrotesque-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: optional;
  src: url(../fonts/BricolageGrotesque-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/DMSans-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/DMSans-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/DMSans-600-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/DMSans-600-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/DMSans-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/DMSans-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/DMSans-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/DMSans-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/DMSans-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/DMSans-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/DMSans-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/DMSans-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   Oluk Künye Atölyesi — kişiye özel gravür
   Design DNA: leather + brass, engraved grooves, tag rings
   ========================================================= */

:root {
  --bg: #FFF7EE;
  --surface: #FFFFFF;
  --surface-2: #FBF1E4;
  --ink: #2B2320;
  --ink-soft: #5A4E46;
  --ink-faint: #7A6D63;
  --accent: #E8642C;        /* brass-fire, thin decor only (bars/borders/dots) */
  --accent-text: #C24A16;   /* darkened for text on light + white-bearing fills */
  --accent-deep: #9C380F;   /* hover for accent-text fills */
  --accent2: #2E9E8F;       /* teal */
  --accent2-text: #217267;  /* darkened teal for text */
  --line: #E7D8C5;
  --line-strong: #D8C3AB;
  --brass: #C9A24B;
  --brass-hi: #F4E1A6;
  --brass-lo: #8B6B23;
  --leather: #6B3F26;

  --serif: "Bricolage Grotesque", "Trebuchet MS", Verdana, sans-serif;
  --sans: "DM Sans", "Segoe UI", Tahoma, sans-serif;

  --container: 1080px;
  --header-h: 74px;
  --radius: 14px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease2: cubic-bezier(.4,0,.2,1);

  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body {
  margin: 0;
  max-width: 100vw;
  overflow-x: hidden;
}

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

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

p { margin: 0 0 1em; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent2-text); }

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

ul { margin: 0; padding: 0; list-style: none; }

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

.wide { max-width: 1240px; }

section { padding: clamp(48px, 8vw, 92px) 0; }

.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.lead { font-size: clamp(1.02rem, 2.4vw, 1.18rem); color: var(--ink-soft); max-width: 60ch; }

.word-break { word-break: break-word; overflow-wrap: anywhere; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 10px 16px;
  border-radius: 0 0 8px 0; z-index: 2000;
}
.skip-link:focus { left: 0; color: #fff; }

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

/* ---------- Stitch divider (leather seam) ---------- */
.stitch {
  height: 0;
  border: none;
  border-top: 2px dashed var(--line-strong);
  opacity: .8;
  margin: 0;
}
.stitch-band {
  height: 14px;
  background:
    repeating-linear-gradient(90deg, var(--leather) 0 12px, transparent 12px 22px) center/100% 2px no-repeat;
  position: relative;
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1080;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 247, 238, 0.92);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid transparent;
  transition: background .24s var(--ease2), box-shadow .24s var(--ease2), height .24s var(--ease2);
}
.site-header.scrolled {
  background: rgba(255, 247, 238, 0.98);
  box-shadow: 0 8px 24px -16px rgba(43, 35, 32, .28);
  border-bottom-color: var(--line);
  height: 64px;
}
.header-inner {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.16rem;
  color: var(--ink);
  letter-spacing: -.01em;
}
.brand:hover { color: var(--ink); }
.brand-ring {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  position: relative;
  flex: 0 0 auto;
}
.brand-ring::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--brass-hi), var(--brass) 55%, var(--brass-lo));
}
.brand small { display: block; font-family: var(--sans); font-weight: 500; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }

.nav-desktop { display: none; }
@media (min-width: 1024px) {
  .nav-desktop { display: flex; align-items: center; gap: 26px; }
  .nav-desktop a {
    position: relative;
    font-size: .92rem;
    font-weight: 500;
    color: var(--ink-soft);
    padding: 6px 0;
  }
  .nav-desktop a::after {
    content: "";
    position: absolute; left: 0; bottom: -2px;
    width: 0; height: 2px; background: var(--accent);
    transition: width .24s var(--ease);
  }
  .nav-desktop a:hover { color: var(--ink); }
  .nav-desktop a:hover::after,
  .nav-desktop a.is-active::after { width: 100%; }
  .nav-desktop a.is-active { color: var(--ink); }
  .nav-desktop .nav-cta::after { display: none; }
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ink);
  color: var(--surface);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9rem;
  transition: background .22s var(--ease), transform .22s var(--ease), color .22s;
}
.nav-cta:hover, .nav-cta:focus-visible { background: var(--accent-text); color: var(--surface); transform: translateY(-2px); }

/* 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: 10px;
  cursor: pointer;
  z-index: 1100;
  position: relative;
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }
.nav-toggle span {
  height: 2px; width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .28s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer */
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 92vw);
  background: var(--surface);
  z-index: 1050;
  transform: translateX(100%);
  transition: transform .32s var(--ease);
  padding: calc(var(--header-h) + 20px) 26px 30px;
  box-shadow: -12px 0 40px -20px rgba(43,35,32,.4);
  overflow-y: auto;
  border-left: 3px solid var(--accent);
}
.drawer.is-open { transform: translateX(0); }
.drawer a {
  display: block;
  padding: 14px 4px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink);
  border-bottom: 2px dashed var(--line);
}
.drawer a:hover, .drawer a.is-active { color: var(--accent-text); }
.drawer .nav-cta {
  display: flex;
  margin-top: 22px;
  padding: 14px;
  border-bottom: none;
  color: var(--surface);
  font-family: var(--sans);
}
.drawer .nav-cta:hover { color: var(--surface); }
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(43, 35, 32, .55);
  z-index: 1040;
  opacity: 0; visibility: hidden;
  transition: opacity .24s var(--ease), visibility .24s;
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

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

/* anchor landing offset under fixed header */
:where(main) [id], section[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* optional-field label hint */
.opt-tag { font-weight: 500; font-size: .78rem; color: var(--ink-faint); }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s, box-shadow .2s var(--ease);
  text-align: center;
}
.btn-primary { background: var(--accent-text); color: #fff; box-shadow: 0 12px 26px -14px rgba(156,56,15,.8); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--accent-deep); color: #fff; transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--surface); color: var(--ink); border-color: var(--accent); transform: translateY(-2px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover, .btn-dark:focus-visible { background: var(--accent-text); color: #fff; transform: translateY(-2px); }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* =========================================================
   Hero (vertical stack: title top → giant configurator)
   ========================================================= */
.hero {
  position: relative;
  padding: clamp(30px, 6vw, 56px) 0 clamp(40px, 6vw, 70px);
  background:
    linear-gradient(180deg, rgba(255,247,238,.2), rgba(255,247,238,.75) 60%, var(--bg)),
    url("../images/hero-masa.jpg") center/cover no-repeat fixed;
  background-color: #241a14;
}
@media (max-width: 900px) { .hero { background-attachment: scroll; } }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(43,35,32,.32), rgba(43,35,32,.06) 40%, transparent 70%);
  pointer-events: none;
}
.hero-head {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(28px, 4vw, 40px);
}
.hero-head .eyebrow { color: #ffe9d8; justify-content: center; }
.hero-head .eyebrow::before { background: #ffd9c0; }
.hero h1 {
  color: #fff;
  font-size: clamp(2.3rem, 6.4vw, 4.1rem);
  text-shadow: 0 2px 18px rgba(43,35,32,.5), 0 1px 2px rgba(43,35,32,.6);
  margin-bottom: .3em;
}
.hero h1 .kaz {
  color: var(--brass-hi);
  position: relative;
  display: inline-block;
  text-shadow: 0 1px 0 var(--brass-lo), 0 2px 12px rgba(0,0,0,.4);
}
.hero-sub {
  color: #fdeee0;
  font-size: clamp(1.02rem, 2.6vw, 1.24rem);
  text-shadow: 0 1px 8px rgba(43,35,32,.6);
  max-width: 56ch;
  margin: 0 auto 22px;
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  margin-top: 20px;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  padding: 8px 15px;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 600;
  box-shadow: 0 6px 16px -10px rgba(43,35,32,.5);
}
.trust-badge::before {
  content: "";
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent2);
}

/* =========================================================
   Configurator (the heart)
   ========================================================= */
.config-shell {
  position: relative;
  z-index: 3;
}
.configurator {
  --mx: 50%; --my: 40%;
  background: var(--surface);
  border-radius: 22px;
  border: 1px solid var(--line);
  box-shadow: 0 40px 90px -50px rgba(43,35,32,.6), 0 2px 0 rgba(255,255,255,.6) inset;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .configurator { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

/* preview side */
.config-preview {
  position: relative;
  padding: clamp(26px, 4vw, 44px);
  background:
    linear-gradient(180deg, rgba(43,35,32,.86), rgba(43,35,32,.78)),
    url("../images/doku-deri.jpg") center/cover no-repeat;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 380px;
  overflow: hidden;
}
.config-preview::before {
  /* cursor sheen over leather */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(200px 200px at var(--mx) var(--my), rgba(244,225,166,.16), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity .3s;
}
.preview-label {
  align-self: flex-start;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #ffd9c0;
  font-weight: 600;
}
.tag-stage {
  perspective: 1200px;
  width: min(300px, 78%);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
/* the tag itself */
.preview-tag {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background:
    linear-gradient(135deg, var(--brass-hi), var(--brass) 42%, var(--brass-lo));
  box-shadow:
    0 20px 40px -18px rgba(0,0,0,.7),
    inset 0 2px 4px rgba(255,255,255,.5),
    inset 0 -6px 12px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14% 12%;
  transform-style: preserve-3d;
  transition: transform .1s;
  overflow: hidden;
}
.preview-tag.flip { animation: tagFlip .62s var(--ease); }
@keyframes tagFlip {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(90deg) scale(.94); }
  100% { transform: rotateY(0deg); }
}
/* metal glint sweep */
.preview-tag::after {
  content: "";
  position: absolute;
  top: -60%; left: -30%;
  width: 50%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: rotate(18deg);
  animation: glint 4.6s var(--ease) infinite;
  pointer-events: none;
}
@keyframes glint {
  0%, 62% { left: -40%; opacity: 0; }
  70% { opacity: .9; }
  85%, 100% { left: 130%; opacity: 0; }
}
/* material variants */
.preview-tag[data-mat="alu"] {
  background: linear-gradient(135deg, #f2f2f2, #cfd3d6 45%, #9aa1a6);
}
.preview-tag[data-mat="pirinc"],
.preview-tag[data-mat="set"] {
  background: linear-gradient(135deg, var(--brass-hi), var(--brass) 42%, var(--brass-lo));
}
.preview-tag[data-mat="anahtarlik"] {
  background: linear-gradient(135deg, #e8e2d6, #c9a24b 48%, #8b6b23);
}
.preview-tag[data-mat="set"] {
  border: 5px solid #4a2c1a;
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.7), inset 0 0 0 2px rgba(74,44,26,.5);
}
/* shapes */
.preview-tag[data-shape="yuvarlak"] { border-radius: 50%; }
.preview-tag[data-shape="etiket"] { border-radius: 16px; }
.preview-tag[data-shape="kemik"] { border-radius: 999px; aspect-ratio: 1.35 / 1; }
.preview-tag[data-shape="kalp"] {
  border-radius: 0;
  clip-path: polygon(50% 100%, 12% 62%, 0% 35%, 7% 16%, 28% 9%, 50% 26%, 72% 9%, 93% 16%, 100% 35%, 88% 62%);
  aspect-ratio: 1 / 1;
}
/* ring hole (künye halka motifi) */
.tag-stage { position: relative; }
.tag-ring {
  position: absolute;
  top: -8px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,.75);
  box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.6);
  z-index: 4;
}
/* engraved text */
.engrave {
  font-family: var(--serif);
  font-weight: 700;
  text-align: center;
  color: rgba(60,44,20,.92);
  text-shadow:
    0 1px 0 rgba(255,255,255,.55),
    0 -1px 1px rgba(0,0,0,.55);
  line-height: 1.12;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
  z-index: 2;
  position: relative;
}
.preview-tag[data-mat="alu"] .engrave,
.preview-tag[data-mat="anahtarlik"] .engrave { color: rgba(40,44,48,.9); }
.engrave-name { font-size: clamp(1.1rem, 6cqi, 1.7rem); letter-spacing: .01em; }
.engrave-line2 { font-size: clamp(.7rem, 4cqi, 1rem); font-family: var(--sans); font-weight: 600; opacity: .92; }
.engrave-symbol { font-size: clamp(1.2rem, 7cqi, 2rem); filter: grayscale(1) contrast(.85); opacity: .8; line-height: 1; }
.preview-tag { container-type: inline-size; }

.preview-note {
  font-size: .82rem;
  color: #ffe9d8;
  text-align: center;
  min-height: 1.2em;
}
.preview-price {
  align-self: stretch;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}
.preview-price .amount {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: var(--brass-hi);
}
.preview-price .cur { color: #ffd9c0; font-size: 1.1rem; }

/* controls side */
.config-controls {
  padding: clamp(24px, 3.4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.control-group > .control-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: 10px;
  color: var(--ink);
}
.control-label .hint { font-weight: 500; font-size: .76rem; color: var(--ink-faint); }

.option-row { display: flex; flex-wrap: wrap; gap: 9px; }
.opt {
  flex: 1 1 auto;
  min-width: 0;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 12px;
  padding: 11px 12px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s, transform .12s var(--ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.opt small { font-weight: 500; font-size: .72rem; color: var(--ink-faint); }
.opt:hover { border-color: var(--accent); transform: translateY(-2px); }
.opt[aria-pressed="true"] {
  border-color: var(--accent);
  background: #fff2e9;
  color: var(--accent-text);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.opt[aria-pressed="true"] small { color: var(--accent-text); }

.field-text {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field-text:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,100,44,.16); }
.field-text + .field-text { margin-top: 9px; }
.char-count { font-variant-numeric: tabular-nums; }
.char-count.over { color: var(--accent-text); font-weight: 700; }

.config-warning {
  display: none;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  border-radius: 10px;
  background: #fff0e8;
  border: 1px solid #f2c3a8;
  color: var(--accent-text);
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.4;
}
.config-warning.show { display: flex; }
.config-warning::before { content: "!"; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-text); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 700; }

.config-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
  border-top: 2px dashed var(--line);
  flex-wrap: wrap;
}
.config-summary .sum-price {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ink);
}
.config-summary .sum-price small { font-size: .8rem; color: var(--ink-faint); font-family: var(--sans); font-weight: 500; }

/* checkbox option (double-sided) */
.check-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.check-line:has(input:checked) { border-color: var(--accent); background: #fff2e9; color: var(--accent-text); }
.check-line input[type="checkbox"] {
  appearance: auto; -webkit-appearance: auto;
  width: 18px; height: 18px; min-width: 18px; min-height: 18px;
  padding: 0; border: 0; margin: 1px 0 0;
  accent-color: var(--accent);
}
.check-line .price-plus { margin-left: auto; font-weight: 700; color: var(--accent-text); }

/* =========================================================
   Generic reveal
   ========================================================= */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[style*="--i"] { transition-delay: calc(var(--i) * 80ms); }
html.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .preview-tag::after, .preview-tag.flip { animation: none; }
}

/* =========================================================
   Section heads
   ========================================================= */
.sec-head { max-width: 640px; margin-bottom: clamp(28px, 4vw, 44px); }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .eyebrow { justify-content: center; }
.sec-head h2 { font-size: clamp(1.8rem, 4.6vw, 2.9rem); }
.sec-head p { color: var(--ink-soft); font-size: 1.05rem; }

/* =========================================================
   Shape & material (b)
   ========================================================= */
.matbg { background: var(--surface-2); }
.split {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split.rev .split-media { order: 2; }
.split-media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(43,35,32,.6);
  aspect-ratio: 4 / 3;
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }

.mat-list { display: grid; gap: 14px; margin-top: 20px; }
.mat-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.mat-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -22px rgba(43,35,32,.5); }
.mat-swatch { width: 44px; height: 44px; border-radius: 10px; box-shadow: inset 0 -4px 8px rgba(0,0,0,.25), inset 0 2px 4px rgba(255,255,255,.5); }
.mat-swatch.alu { background: linear-gradient(135deg,#f2f2f2,#aeb4b8); }
.mat-swatch.pirinc { background: linear-gradient(135deg,var(--brass-hi),var(--brass) 55%,var(--brass-lo)); }
.mat-swatch.deri { background: linear-gradient(135deg,#8a5636,#4a2c1a); }
.mat-swatch.keychain { background: linear-gradient(135deg,#e8e2d6,#8b6b23); }
.mat-card h4 { margin: 0 0 2px; font-size: 1.05rem; }
.mat-card p { margin: 0; font-size: .86rem; color: var(--ink-faint); }
.mat-price { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; color: var(--accent-text); white-space: nowrap; }

/* =========================================================
   Symbol / font gallery (c)
   ========================================================= */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.gal-tile {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--ink);
}
.gal-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gal-tile:hover img { transform: scale(1.06); }
.gal-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 12px 10px;
  background: linear-gradient(transparent, rgba(43,35,32,.85));
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
}
.gal-cap span { display: block; font-size: .72rem; font-weight: 500; color: #ffd9c0; }

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-weight: 600;
  font-size: .88rem;
  color: var(--ink-soft);
}
.chip .glyph { font-size: 1.1rem; color: var(--accent-text); }

/* =========================================================
   Durability (d) — dark band
   ========================================================= */
.band {
  background:
    linear-gradient(180deg, rgba(43,35,32,.92), rgba(43,35,32,.92)),
    url("../images/doku-pirinc.jpg") center/cover no-repeat;
  color: #fdeee0;
}
.band h2 { color: #fff; }
.band .eyebrow { color: #ffd9c0; }
.band .eyebrow::before { background: #ffd9c0; }
.dur-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 8px;
}
@media (min-width: 720px) { .dur-grid { grid-template-columns: repeat(2, 1fr); } }
.dur-card {
  padding: 22px 20px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
}
.dur-card h4 { color: #fff; margin: 0 0 8px; font-size: 1.12rem; }
.dur-card p { margin: 0; color: #f0ddce; font-size: .92rem; }
.dur-card .num { font-family: var(--serif); font-weight: 700; font-size: 2rem; color: var(--brass-hi); display: block; margin-bottom: 4px; font-variant-numeric: tabular-nums; }

/* stats inline */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 30px;
}
.stat { text-align: center; }
.stat .val { font-family: var(--serif); font-weight: 700; font-size: clamp(1.6rem,5vw,2.4rem); color: var(--brass-hi); font-variant-numeric: tabular-nums; min-width: 4ch; display: inline-block; }
.stat .lbl { font-size: .8rem; color: #f0ddce; }

/* =========================================================
   Pricing (e)
   ========================================================= */
.price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 640px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .price-grid { grid-template-columns: repeat(4, 1fr); } }
.price-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 22px;
  position: relative;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.price-card:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -34px rgba(43,35,32,.6); }
.price-card.featured { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.price-card .tag-pill {
  position: absolute; top: -12px; right: 18px;
  background: var(--accent-text); color: #fff;
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.price-card h3 { font-size: 1.18rem; margin: 0 0 4px; }
.price-card .sub { font-size: .82rem; color: var(--ink-faint); margin: 0 0 14px; }
.price-card .amt { font-family: var(--serif); font-weight: 700; font-size: 2rem; color: var(--ink); }
.price-card .amt span { font-size: 1rem; color: var(--ink-faint); }
.price-card .incl { margin: 16px 0; display: grid; gap: 8px; }
.price-card .incl li { position: relative; padding-left: 22px; font-size: .88rem; color: var(--ink-soft); }
.price-card .incl li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); }
.price-card .excl li::before { background: var(--line-strong); }
.price-card .btn { margin-top: auto; width: 100%; }
.price-note { font-size: .8rem; color: var(--ink-faint); text-align: center; margin-top: 18px; }

/* =========================================================
   Process (vertical timeline)
   ========================================================= */
.timeline { position: relative; margin-top: 20px; }
.timeline::before {
  content: ""; position: absolute; left: 18px; top: 6px; bottom: 6px;
  border-left: 2px dashed var(--line-strong);
}
.tl-step { position: relative; padding: 0 0 26px 56px; }
.tl-step:last-child { padding-bottom: 0; }
.tl-step .dot {
  position: absolute; left: 6px; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-text); color: #fff;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: .9rem;
  box-shadow: 0 0 0 5px var(--bg);
}
.tl-step h4 { margin: 0 0 4px; font-size: 1.1rem; }
.tl-step .when { font-size: .76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent2-text); }
.tl-step p { margin: 4px 0 0; color: var(--ink-soft); font-size: .92rem; }

/* =========================================================
   Testimonials
   ========================================================= */
.testi-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 760px) { .testi-grid { grid-template-columns: repeat(3, 1fr); } }
.testi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
}
.testi p { font-size: .94rem; color: var(--ink-soft); }
.testi .who { margin-top: auto; padding-top: 12px; border-top: 2px dashed var(--line); font-size: .82rem; }
.testi .who strong { display: block; color: var(--ink); font-size: .92rem; }
.testi .who span { color: var(--ink-faint); }
.testi .quote-mark { font-family: var(--serif); font-size: 2.4rem; color: var(--accent); line-height: .6; margin-bottom: 8px; }

/* =========================================================
   FAQ (pure CSS)
   ========================================================= */
.faq { max-width: 780px; margin: 0 auto; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px clamp(16px, 3vw, 24px);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.04rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--accent-text);
  transition: transform .3s var(--ease);
  flex: 0 0 auto;
}
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-item > .answer {
  height: 0;
  padding: 0 clamp(16px, 3vw, 24px);
  overflow: hidden;
  transition: height .36s var(--ease2), padding-block-end .36s var(--ease2);
}
.faq-item[open] > .answer { height: auto; padding-block-end: 20px; }
.faq-item > .answer p { margin: 0; color: var(--ink-soft); font-size: .94rem; }
@media (prefers-reduced-motion: reduce) { .faq-item > .answer { transition: none; } }

/* =========================================================
   Workshop notes (son eklenenler)
   ========================================================= */
.notes { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
@media (min-width: 720px) { .notes { grid-template-columns: repeat(3,1fr); } }
.note {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
}
.note time { font-size: .74rem; font-weight: 600; letter-spacing: .06em; color: var(--accent2-text); text-transform: uppercase; }
.note h4 { margin: 6px 0 4px; font-size: 1rem; }
.note p { margin: 0; font-size: .86rem; color: var(--ink-soft); }

/* =========================================================
   CTA band
   ========================================================= */
.cta-band {
  background: var(--ink);
  color: #fff;
  border-radius: 22px;
  padding: clamp(30px, 5vw, 54px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: url("../images/doku-deri-2.jpg") center/cover no-repeat;
  opacity: .16;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: clamp(1.7rem, 4.4vw, 2.6rem); }
.cta-band p { color: #f0ddce; max-width: 52ch; margin: 0 auto 22px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* =========================================================
   Forms
   ========================================================= */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,100,44,.16);
}
.field-2 { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 640px) { .field-2 { grid-template-columns: 1fr 1fr; } }
.kvkk { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; font-size: .88rem; color: var(--ink-soft); }
.kvkk label { display: inline; margin: 0; font-weight: 500; }
.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);
}

/* =========================================================
   Contact
   ========================================================= */
.contact-hero { padding: clamp(40px,7vw,80px) 0 clamp(24px,4vw,40px); background: var(--surface-2); }
.contact-hero .container { max-width: 780px; }
.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.channel {
  display: block;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.channel:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -24px rgba(43,35,32,.5); border-color: var(--accent); color: var(--ink); }
.channel .ic {
  width: 46px; height: 46px; border-radius: 12px;
  background: #fff2e9; color: var(--accent-text);
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 1.15rem;
  margin-bottom: 12px;
}
.channel h4 { margin: 0 0 3px; font-size: 1rem; }
.channel .val { font-weight: 600; color: var(--accent-text); word-break: break-word; }
.channel .desc { font-size: .82rem; color: var(--ink-faint); margin: 4px 0 0; }

.hours-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 10px; margin-top: 8px; }
.hours-grid .day {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  font-variant-numeric: tabular-nums;
}
.hours-grid .day strong { display: block; font-size: .82rem; color: var(--ink); }
.hours-grid .day span { font-size: .84rem; color: var(--ink-soft); }
.hours-grid .day.today { border-color: var(--accent); background: #fff2e9; }

/* =========================================================
   Team / about
   ========================================================= */
.team-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 720px) { .team-grid { grid-template-columns: repeat(3,1fr); } }
.member { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.member img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.member .body { padding: 18px 18px 22px; }
.member h4 { margin: 0 0 2px; }
.member .role { font-size: .82rem; font-weight: 600; color: var(--accent-text); letter-spacing: .04em; text-transform: uppercase; }
.member p { margin: 10px 0 0; font-size: .9rem; color: var(--ink-soft); }

/* =========================================================
   Doc pages
   ========================================================= */
.doc-hero { padding: clamp(40px,7vw,80px) 0 clamp(20px,3vw,32px); background: var(--surface-2); }
.doc { max-width: 760px; }
.doc h2 { font-size: clamp(1.4rem,3.4vw,1.9rem); margin-top: 1.7em; }
.doc h3 { font-size: 1.15rem; margin-top: 1.4em; }
.doc p, .doc li { color: var(--ink-soft); line-height: 1.75; }
.doc p { margin-bottom: 1.1em; }
.doc ul { list-style: disc; padding-left: 22px; margin: 0 0 1em; }
.doc ul li { margin-bottom: 6px; }

.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: 8px;
}
.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-scroll th, .table-scroll td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: .9rem; }
.table-scroll th { background: var(--surface-2); font-family: var(--serif); }

/* =========================================================
   Thank you / 404
   ========================================================= */
.centerbox { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: clamp(40px,8vw,90px) 0; }
.centerbox .inner { max-width: 560px; }
.centerbox h1 { font-size: clamp(2rem, 6vw, 3.4rem); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--ink);
  color: #e8dccf;
  padding: clamp(44px,6vw,72px) 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-grid h4 { color: #fff; font-size: 1rem; margin: 0 0 14px; }
.footer-grid a { color: #d8c9ba; display: block; padding: 5px 0; font-size: .92rem; }
.footer-grid a:hover { color: var(--brass-hi); }
.footer-brand .brand { color: #fff; }
.footer-brand .brand small { color: #b9a794; }
.footer-brand p { color: #c3b3a2; font-size: .9rem; margin: 14px 0 0; max-width: 34ch; }
.footer-brand .ig { margin-top: 12px; font-weight: 600; color: var(--brass-hi); }
.footer-bottom {
  margin-top: 34px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between;
  font-size: .82rem; color: #b9a794;
}
.footer-legal a { display: inline; color: #c3b3a2; margin-right: 16px; }
.footer-legal a:hover { color: var(--brass-hi); }
.footer-meta { font-variant-numeric: tabular-nums; }

/* =========================================================
   Cookie banner
   ========================================================= */
.cookie-banner {
  position: fixed;
  bottom: 16px; left: 16px; right: 16px;
  max-width: 520px; margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: 0 20px 50px -20px rgba(43,35,32,.6);
  padding: 20px;
  z-index: 9999;
  transform: translateY(140%);
  opacity: 0;
  transition: transform .28s var(--ease), opacity .24s;
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
@media (min-width: 720px) { .cookie-banner { left: 24px; right: auto; max-width: 420px; } }
.cookie-banner h4 { margin: 0 0 6px; font-size: 1.05rem; }
.cookie-banner p { margin: 0 0 14px; font-size: .86rem; color: var(--ink-soft); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-actions button {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  transition: background .2s, color .2s, border-color .2s;
}
.cookie-actions button[data-consent="accept"] { background: var(--accent-text); border-color: var(--accent-text); color: #fff; }
.cookie-actions button[data-consent="accept"]:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.cookie-actions button[data-consent="reject"]:hover,
.cookie-actions button[data-consent="settings"]:hover { border-color: var(--accent); color: var(--accent-text); }

/* =========================================================
   Responsive helpers
   ========================================================= */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .mat-card { grid-template-columns: auto 1fr; }
  .mat-price { grid-column: 2; justify-self: start; }
  .config-preview { min-height: 340px; }
  .opt { flex: 1 1 40%; }
}
@media (max-width: 400px) {
  .stat-row { grid-template-columns: 1fr; }
  .stat { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
}

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

/* ============================================================
   OLUK KÜNYE — LUXURY ENGRAVING COLLAGE ENGINE  (appended)
   The whole page becomes one continuous wall-to-wall collage of
   engraving & metal-tag ephemera on a deep walnut-ink ground:
   engraved brass/steel pet tags, split-rings, bells, buckles,
   hallmarks, name plates, bone tags, metal type slugs, guilloche,
   foil monograms, engraved rulers, wax seals — restrained bone/
   ivory + ONE brass metallic. Plus the signature DENGE kinetic
   mobile: engraved tags hanging from balanced brass rods that
   sway on pendulum easing and settle to equilibrium.
   ============================================================ */

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

:root{
  --ground:#17130d;
  --ground-2:#211a12;
  --bone:#efe7d3;
  --bone-soft:#cdc2a8;
  --bone-faint:#9a9078;
  --mat:#f4ecd6;
  --mat-2:#e9ddc2;
  --matline:rgba(120,92,40,.30);
  --paper-ink:#241d14;
  --gold-hi:#f1dc9f;
  --gold-mid:#c9a24b;
  --gold-lo:#7a5c26;
  --gold-grad:linear-gradient(135deg,#f2dfa0 0%,#caa254 24%,#7a5c26 52%,#caa254 78%,#f4e2a6 100%);
  --gold-line:rgba(201,162,75,.44);
  --gold-line-2:rgba(201,162,75,.20);
  --steel:#cfd4d8;
  --wax:#7a2a24;
  --thread:linear-gradient(180deg,rgba(241,220,159,.85),rgba(122,92,38,.55));
  /* remap brand accents onto the single brass metallic */
  --accent:#c9a24b;
  --accent-text:#8a6a2a;
  --accent-deep:#6f531f;
  --accent2:#c9a24b;
  --accent2-text:#8a6a2a;
  --brass:#c9a24b;
  --brass-hi:#f4e1a6;
  --brass-lo:#8b6b23;
}

/* --- deep walnut-ink WALL substrate (fixed, aged laid paper grain, engraved hatch) --- */
body{
  color:var(--bone) !important;
  background-color:#17130d !important;
  background-image:
    radial-gradient(120% 82% at 16% -6%, rgba(201,162,75,.11), transparent 46%),
    radial-gradient(110% 80% at 88% 6%, rgba(201,162,75,.06), transparent 46%),
    radial-gradient(100% 72% at 50% 116%, rgba(0,0,0,.55), transparent 60%),
    radial-gradient(rgba(255,244,214,.028) 1px, transparent 1.7px),
    radial-gradient(rgba(0,0,0,.30) 1px, transparent 1.7px),
    repeating-linear-gradient(90deg, rgba(201,162,75,.045) 0 1px, transparent 1px 138px),
    linear-gradient(180deg,#1d160e,#160f09 60%,#100b06) !important;
  background-size:auto,auto,auto,7px 7px,7px 7px,auto,auto !important;
  background-attachment:fixed !important;
  background-position:0 0,0 0,0 0,0 0,3px 4px,0 0,0 0 !important;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(130% 92% at 50% -12%, rgba(255,238,196,.055), transparent 55%) !important; }
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  box-shadow:inset 0 0 240px rgba(0,0,0,.55), inset 0 0 0 6px rgba(201,162,75,.07) !important; }
main{ position:relative; z-index:2; overflow:visible; }
.site-footer{ position:relative; z-index:2; }
main section{ position:relative; }
main > section > .container{ position:relative; z-index:4; }

/* neutralise flat fills so the wall shows through everywhere */
.matbg, .contact-hero, .doc-hero, section[class]{ background-color:transparent !important; }
.matbg, .contact-hero, .doc-hero{ background-image:none !important; }
.hero{ background:transparent; }
.band{ background:transparent !important; color:var(--bone) !important; }

/* gold hairline seam between stacked sections */
main > section + section::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:3; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold-line) 16%,var(--gold-line) 84%,transparent); }

/* on-wall type */
.sec-head h2, .split h2, .band h2, h2, h3.section-h{ color:var(--bone) !important; }
.sec-head p, .split p, .split .lead, .lead, .band p{ color:var(--bone-soft) !important; }
.accent-word{ color:var(--gold-hi) !important; font-style:italic; }
.hero h1 .kaz{ color:var(--gold-hi) !important; text-shadow:0 1px 0 var(--gold-lo), 0 2px 14px rgba(0,0,0,.5) !important; }

/* eyebrow -> letter-spaced brass caps on a taped slip */
.eyebrow{
  color:var(--gold-hi) !important;
  background:linear-gradient(180deg,rgba(201,162,75,.16),rgba(201,162,75,.08));
  border:1px solid var(--gold-line);
  padding:5px 12px; border-radius:2px; letter-spacing:.2em;
  box-shadow:2px 3px 0 rgba(0,0,0,.35); }
.eyebrow::before{ background:var(--gold) !important; }
.hero-head .eyebrow{ color:var(--gold-hi) !important; }
.hero-head .eyebrow::before{ background:var(--gold) !important; }
.band .eyebrow, .band .eyebrow::before{ color:var(--gold-hi) !important; }

/* ---------- HEADER / NAV / DRAWER ---------- */
.site-header{ background:rgba(23,19,13,.82) !important; backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px); border-bottom:1px solid var(--gold-line) !important; }
.site-header.scrolled{ background:rgba(19,14,9,.95) !important;
  box-shadow:0 12px 30px -22px rgba(0,0,0,.85) !important; border-bottom-color:var(--gold-line) !important; }
.brand{ color:var(--bone) !important; }
.brand small{ color:var(--bone-faint) !important; }
.brand-ring{ border-color:var(--gold) !important; }
.brand-ring::after{ background:var(--gold-grad) !important; }
.nav-desktop a{ color:var(--bone-soft) !important; }
.nav-desktop a:hover, .nav-desktop a.is-active{ color:var(--bone) !important; }
.nav-desktop a::after{ background:var(--gold) !important; }
.nav-cta{ background:var(--gold-grad) !important; color:#231803 !important; }
.nav-cta:hover, .nav-cta:focus-visible{ filter:brightness(1.06); color:#231803 !important; }
.nav-toggle{ background:rgba(255,255,255,.05); border:1px solid var(--gold-line); border-radius:8px; }
.nav-toggle span{ background:var(--bone) !important; }
.drawer{ background:var(--ground-2) !important; border-left:3px solid var(--gold) !important; }
.drawer a{ color:var(--bone) !important; border-bottom:2px dashed var(--gold-line-2) !important; }
.drawer a:hover, .drawer a.is-active{ color:var(--gold-hi) !important; }
.drawer .nav-cta{ background:var(--gold-grad) !important; color:#231803 !important; }

/* ---------- BUTTONS ---------- */
.btn-primary{ background:var(--gold-grad) !important; color:#231803 !important; border:0;
  box-shadow:0 14px 28px -16px rgba(201,162,75,.7) !important; }
.btn-primary:hover, .btn-primary:focus-visible{ filter:brightness(1.06); color:#231803 !important; }
.btn-ghost{ background:transparent !important; color:var(--bone) !important; border-color:var(--gold-line) !important; }
.btn-ghost:hover, .btn-ghost:focus-visible{ background:rgba(201,162,75,.12) !important;
  color:var(--gold-hi) !important; border-color:var(--gold) !important; }
.btn-dark{ background:var(--ground-2) !important; color:var(--bone) !important; border:1px solid var(--gold-line) !important; }

/* ============================================================
   FRAMED CLIPPINGS — panels become gilt-framed engraving plates
   ============================================================ */
.mat-card, .gal-tile, .dur-card, .price-card, .testi, .faq-item, .note,
.member, .channel, .hours-grid .day, .table-scroll, .stat-row, .configurator{
  border:5px solid var(--gold) !important;
  border-image:var(--gold-grad) 1 !important;
  border-radius:0 !important;
  background:var(--mat) !important;
  box-shadow:
    inset 0 0 0 1px var(--matline),
    inset 0 0 0 3px rgba(255,255,255,.42),
    0 30px 46px -26px rgba(0,0,0,.72),
    0 12px 22px -18px rgba(0,0,0,.6) !important;
}
.gal-tile{ padding:0 !important; background:var(--ground) !important; overflow:hidden !important; }

/* brass hanging hook + cord on framed clippings */
.mat-card, .price-card, .testi, .note, .member, .channel{ overflow:visible !important; }
.mat-card::before, .price-card::before, .testi::before, .note::before, .member::before, .channel::before{
  content:""; position:absolute; z-index:7; left:50%; top:-15px; width:11px; height:11px;
  transform:translateX(-50%) rotate(45deg);
  background:linear-gradient(135deg,#f1dc9f,#8a6a2a);
  box-shadow:0 3px 6px -2px rgba(0,0,0,.6); }
.mat-card::after, .price-card::after, .testi::after, .note::after{
  content:""; position:absolute; z-index:6; left:26%; right:26%; top:-13px; height:13px; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 22' preserveAspectRatio='none'%3E%3Cpath d='M50 2 L4 20 M50 2 L96 20' stroke='%23c9a24b' stroke-width='1.2' fill='none' opacity='0.7'/%3E%3C/svg%3E") no-repeat center/100% 100%; }

/* framed-panel interiors on paper */
.mat-card h4, .price-card h3, .testi .who strong, .note h4, .member h4,
.channel h4, .faq-item > summary{ color:var(--paper-ink) !important; }
.mat-card p, .price-card .incl li, .price-card .sub, .testi p, .note p,
.member p, .channel .desc, .faq-item > .answer p, .hours-grid .day span{ color:#3a3324 !important; }
.mat-card p, .note p{ color:#5c5238 !important; }
.mat-price, .price-card .amt, .price-card .amt span{ color:var(--paper-ink) !important; }
.price-card .amt span{ color:#6d685c !important; }
.testi .who span, .member .role, .note time, .channel .val{ color:var(--accent-text) !important; }
.testi .who span{ color:#6d685c !important; }
.testi .who, .testi .quote-mark{ color:var(--accent-text) !important; }
.testi .quote-mark{ color:var(--gold-lo) !important; }
.faq-item > summary::after{ color:var(--accent-text) !important; }
.price-card .incl li::before{ background:var(--gold-mid) !important; }
.price-card .excl li::before{ background:var(--matline) !important; }
.price-card.featured{ box-shadow:
    inset 0 0 0 1px var(--matline), inset 0 0 0 3px rgba(255,255,255,.45),
    0 40px 62px -28px rgba(201,162,75,.5), 0 12px 22px -18px rgba(0,0,0,.6) !important; }
.price-card .tag-pill{ background:var(--gold-grad) !important; color:#231803 !important; }
.gal-cap{ background:linear-gradient(transparent, rgba(23,19,13,.9)) !important; color:#fff !important; }
.gal-cap span{ color:var(--gold-hi) !important; }
.mat-swatch{ box-shadow:inset 0 -4px 8px rgba(0,0,0,.25), inset 0 2px 4px rgba(255,255,255,.5), 0 0 0 1px var(--matline); }
.channel .ic{ background:rgba(201,162,75,.16) !important; color:var(--accent-text) !important; border:1px solid var(--gold-line); }
.channel a, .channel .val{ color:var(--paper-ink) !important; }
.channel a:hover{ color:var(--accent-text) !important; }
.hours-grid .day strong{ color:var(--paper-ink) !important; }
.hours-grid .day.today{ border-color:var(--gold) !important; box-shadow:0 0 0 1px var(--gold) !important; }

/* durability dark cards -> brushed-metal engraved plaques on wall */
.dur-card{ background:linear-gradient(180deg,var(--mat),var(--mat-2)) !important; }
.dur-card h4{ color:var(--paper-ink) !important; }
.dur-card p{ color:#3a3324 !important; }
.dur-card .num{ color:var(--accent-text) !important; }
.stat .val{ color:var(--gold-hi) !important; }
.stat .lbl{ color:var(--bone-soft) !important; }
.stat-row{ padding:clamp(20px,3vw,30px) !important; }
.stat b, .stat .val{ color:var(--paper-ink) !important; }
.stat-row .lbl{ color:#6d685c !important; }

/* timeline (on wall) */
.timeline::before{ border-left:2px dashed var(--gold-line) !important; }
.tl-step .dot{ background:var(--gold-grad) !important; color:#231803 !important; box-shadow:0 0 0 5px var(--ground) !important; }
.tl-step h4{ color:var(--bone) !important; }
.tl-step .when{ color:var(--gold-hi) !important; }
.tl-step p{ color:var(--bone-soft) !important; }

/* chips */
.chip{ background:rgba(201,162,75,.10) !important; color:var(--bone) !important; border-color:var(--gold-line) !important; }
.chip .glyph{ color:var(--gold-hi) !important; }

/* CTA band -> deep gilt-bordered plaque */
.cta-band{ background:linear-gradient(180deg,var(--ground-2),#120c06) !important;
  border:3px solid var(--gold) !important; border-image:var(--gold-grad) 1 !important; border-radius:0 !important; }
.cta-band::before{ background:url("../images/doku-pirinc.jpg") center/cover no-repeat !important; opacity:.12 !important; }
.cta-band h2{ color:var(--bone) !important; }
.cta-band p{ color:var(--bone-soft) !important; }

/* forms + docs on wall */
.field label, .field > span{ color:var(--bone-soft) !important; }
.field input, .field select, .field textarea{ background:#fffdf6 !important;
  color:var(--paper-ink) !important; border-color:var(--matline) !important; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold) !important; box-shadow:0 0 0 3px rgba(201,162,75,.18) !important; }
.kvkk, .kvkk label{ color:var(--bone-soft) !important; }
.doc h1, .doc h2, .doc h3{ color:var(--bone) !important; }
.doc p, .doc li{ color:var(--bone-soft) !important; }
.doc a{ color:var(--gold-hi) !important; }
.doc-hero h1, .contact-hero h1{ color:var(--bone) !important; }
.doc-hero p, .contact-hero p{ color:var(--bone-soft) !important; }
.centerbox h1{ color:var(--bone) !important; }
.centerbox p{ color:var(--bone-soft) !important; }
.table-scroll{ padding:2px 4px !important; }
.table-scroll th{ background:var(--mat-2) !important; color:var(--paper-ink) !important; }
.table-scroll th, .table-scroll td{ border-bottom-color:var(--matline) !important; color:#3a3324 !important; }
.member .body{ background:var(--mat) !important; }
.member img{ border-bottom:3px solid var(--gold-line); }

/* footer -> lower masthead in shadow */
.site-footer{ background:#120c07 !important; color:var(--bone-soft) !important;
  border-top:2px solid var(--gold) !important;
  background-image:
    radial-gradient(120% 90% at 50% -10%, rgba(201,162,75,.10), transparent 55%),
    radial-gradient(rgba(255,244,214,.022) 1px, transparent 1.6px),
    linear-gradient(180deg,#160f08,#0c0804) !important;
  background-size:auto,8px 8px,auto !important; }
.footer-brand .brand{ color:var(--bone) !important; }
.footer-brand .brand small{ color:var(--bone-faint) !important; }
.footer-brand p{ color:var(--bone-faint) !important; }
.footer-brand .ig{ color:var(--gold-hi) !important; }
.footer-grid h4{ color:var(--bone-faint) !important; }
.footer-grid a{ color:var(--bone-soft) !important; }
.footer-grid a:hover{ color:var(--gold-hi) !important; }
.footer-bottom{ border-top-color:var(--gold-line-2) !important; color:var(--bone-faint) !important; }
.footer-legal a{ color:var(--bone-soft) !important; }
.footer-legal a:hover{ color:var(--gold-hi) !important; }

/* cookie banner -> paper slip */
.cookie-banner{ background:var(--mat) !important; border:2px solid var(--gold) !important;
  border-image:var(--gold-grad) 1 !important; border-radius:0 !important; }
.cookie-banner h4{ color:var(--paper-ink) !important; }
.cookie-banner p{ color:#3a3324 !important; }
.cookie-actions button{ background:var(--mat-2) !important; color:var(--paper-ink) !important; border-color:var(--matline) !important; }
.cookie-actions button[data-consent="accept"]{ background:var(--gold-grad) !important; color:#231803 !important; border:0 !important; }

/* stitch band -> gilt rail seam */
.stitch-band{ height:8px !important; background:
   linear-gradient(180deg, rgba(241,220,159,.5), rgba(122,92,38,.42) 48%, rgba(60,44,16,.4)) !important;
   box-shadow:0 3px 7px -3px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,246,214,.45); }

/* ============================================================
   HERO — collaged engraving vitrine masthead
   ============================================================ */
.hero{ border-bottom:1px solid var(--gold-line);
  box-shadow:inset 0 0 0 6px rgba(201,162,75,.08);
  background:
    linear-gradient(180deg, rgba(20,15,10,.72), rgba(20,15,10,.86) 60%, rgba(18,13,9,.95)),
    url("../images/hero-masa.jpg") center/cover no-repeat !important;
  background-color:#17130d !important;
  padding-top:clamp(58px,7vw,104px) !important; }
@media (max-width:900px){ .hero{ background-attachment:scroll; } }
.hero::after{ background:linear-gradient(180deg, rgba(23,19,13,.4), rgba(23,19,13,.1) 40%, transparent 70%) !important; }
.hero h1{ color:var(--bone) !important; }
.hero-sub{ color:var(--bone-soft) !important; }
.trust-badge{ background:rgba(244,236,214,.94) !important; color:var(--paper-ink) !important; }
.trust-badge::before{ background:var(--gold-mid) !important; }
.hero-mast{ position:absolute; left:0; right:0; top:0; z-index:5; height:32px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 clamp(16px,4vw,48px);
  background:linear-gradient(180deg, rgba(23,19,13,.94), rgba(23,19,13,.66));
  border-bottom:1px solid var(--gold-line);
  font-family:var(--serif); font-weight:700; text-transform:uppercase;
  letter-spacing:.24em; font-size:.6rem; color:var(--gold-hi); pointer-events:none; }
.hero-mast .hm-mid{ letter-spacing:.4em; }
@media (max-width:600px){ .hero-mast .hm-side{ display:none; } .hero-mast{ justify-content:center; } }

/* configurator -> luxury gilt console */
.configurator{ box-shadow:
    inset 0 0 0 1px var(--matline), inset 0 0 0 3px rgba(255,255,255,.42),
    0 44px 80px -40px rgba(0,0,0,.8), 0 14px 24px -18px rgba(0,0,0,.6) !important; }
.config-preview{ background:
    linear-gradient(180deg, rgba(23,19,13,.9), rgba(23,19,13,.8)),
    url("../images/doku-pirinc.jpg") center/cover no-repeat !important; }
.preview-label{ color:var(--gold-hi) !important; }
.preview-price .amount{ color:var(--gold-hi) !important; }
.preview-price .cur{ color:var(--gold-hi) !important; }
.control-group > .control-label{ color:var(--paper-ink) !important; }
.opt{ background:var(--mat-2) !important; color:#3a3324 !important; border-color:var(--matline) !important; }
.opt:hover{ border-color:var(--gold) !important; }
.opt[aria-pressed="true"]{ background:var(--gold-grad) !important; color:#231803 !important; border-color:var(--gold) !important; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15) !important; }
.opt[aria-pressed="true"] small{ color:#2c2205 !important; }
.field-text{ background:#fffdf6 !important; color:var(--paper-ink) !important; border-color:var(--matline) !important; }
.field-text:focus{ border-color:var(--gold) !important; box-shadow:0 0 0 3px rgba(201,162,75,.18) !important; }
.check-line{ background:var(--mat-2) !important; color:#3a3324 !important; border-color:var(--matline) !important; }
.check-line:has(input:checked){ border-color:var(--gold) !important; background:rgba(201,162,75,.16) !important; color:var(--accent-text) !important; }
.check-line .price-plus{ color:var(--accent-text) !important; }
.config-summary{ border-top-color:var(--matline) !important; }
.config-summary .sum-price{ color:var(--paper-ink) !important; }
.config-summary .sum-price small{ color:#6d685c !important; }
.config-warning{ background:#fff3e2 !important; border-color:var(--gold-line) !important; color:var(--accent-deep) !important; }
.config-warning::before{ background:var(--accent-deep) !important; }
.char-count.over{ color:var(--accent-deep) !important; }

/* ============================================================
   ENGRAVING EPHEMERA DECOR TOOLKIT  (.gr absolute) — collage
   ============================================================ */
.gr{ position:absolute; pointer-events:none; z-index:1; }
.gr-decor{ left:0; right:0; width:100%; }

/* full-bleed gilt rail / rule */
.gr-rail{ height:6px; left:0; right:0; width:100%;
  background:linear-gradient(180deg, rgba(241,220,159,.5), rgba(122,92,38,.42) 48%, rgba(60,44,16,.4));
  box-shadow:0 3px 7px -3px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,246,214,.45); }
.gr-rail::after{ content:""; position:absolute; left:0; right:0; top:6px; height:5px;
  background:linear-gradient(180deg, rgba(0,0,0,.26), transparent); }

/* engraved brass tag (rounded plate w/ groove + ring hole) */
.gr-tag{ width:64px; height:64px; border-radius:16px; background:var(--gold-grad);
  box-shadow:0 18px 28px -16px rgba(0,0,0,.8), inset 0 2px 3px rgba(255,255,255,.5), inset 0 -6px 12px rgba(0,0,0,.32); }
.gr-tag::before{ content:""; position:absolute; left:50%; top:7px; width:9px; height:9px; transform:translateX(-50%);
  border-radius:50%; background:#2b2208; box-shadow:inset 0 1px 2px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.4); }
.gr-tag::after{ content:""; position:absolute; left:22%; right:22%; top:52%; height:9px;
  background:repeating-linear-gradient(180deg, rgba(60,44,16,.55) 0 1px, rgba(255,247,214,.35) 1px 2px);
  border-radius:1px; }
.gr-tag.round{ border-radius:50%; }
.gr-tag.steel{ background:linear-gradient(135deg,#eef1f3,#c3c9cd 46%,#8f979c);
  box-shadow:0 18px 28px -16px rgba(0,0,0,.8), inset 0 2px 3px rgba(255,255,255,.7), inset 0 -6px 12px rgba(0,0,0,.28); }
.gr-tag.heart{ border-radius:0;
  clip-path:polygon(50% 100%, 12% 62%, 0% 35%, 7% 16%, 28% 9%, 50% 26%, 72% 9%, 93% 16%, 100% 35%, 88% 62%); }
.gr-tag.heart::before{ display:none; }

/* bone-shaped tag */
.gr-bone{ width:76px; height:30px; background:var(--gold-grad); border-radius:15px;
  box-shadow:0 16px 24px -14px rgba(0,0,0,.75), inset 0 2px 3px rgba(255,255,255,.5), inset 0 -5px 10px rgba(0,0,0,.3); }
.gr-bone::before, .gr-bone::after{ content:""; position:absolute; top:-6px; width:24px; height:42px;
  background:var(--gold-grad); border-radius:12px;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.45), inset 0 -4px 8px rgba(0,0,0,.28); }
.gr-bone::before{ left:-9px; } .gr-bone::after{ right:-9px; }

/* split-ring (O-ring) */
.gr-ring{ width:46px; height:46px; border-radius:50%; background:transparent;
  border:6px solid transparent; border-image:var(--gold-grad) 1;
  box-shadow:0 10px 18px -10px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.25); }
.gr-ring::after{ content:""; position:absolute; right:-3px; top:44%; width:16px; height:6px; border-radius:3px;
  background:var(--gold-grad); box-shadow:0 3px 5px -2px rgba(0,0,0,.6); transform:rotate(-24deg); }

/* small bell */
.gr-bell{ width:40px; height:40px; }
.gr-bell::before{ content:""; position:absolute; left:50%; top:2px; width:32px; height:30px; transform:translateX(-50%);
  background:var(--gold-grad); border-radius:16px 16px 8px 8px / 20px 20px 8px 8px;
  box-shadow:0 10px 16px -10px rgba(0,0,0,.75), inset 0 2px 3px rgba(255,255,255,.5), inset 0 -4px 8px rgba(0,0,0,.3); }
.gr-bell::after{ content:""; position:absolute; left:50%; bottom:2px; width:9px; height:9px; transform:translateX(-50%);
  border-radius:50%; background:#3a2c10; box-shadow:0 2px 3px rgba(0,0,0,.5); }

/* buckle */
.gr-buckle{ width:56px; height:40px; border:6px solid transparent; border-image:var(--gold-grad) 1;
  border-radius:8px; box-shadow:0 12px 20px -12px rgba(0,0,0,.7); }
.gr-buckle::after{ content:""; position:absolute; left:44%; top:-8px; bottom:-8px; width:5px;
  background:var(--gold-grad); border-radius:3px; }

/* hallmark stamp (shield) */
.gr-hallmark{ width:34px; height:44px; background:linear-gradient(180deg,var(--mat),var(--mat-2));
  clip-path:polygon(50% 0,100% 16%,100% 66%,50% 100%,0 66%,0 16%);
  border:1px solid var(--gold-line);
  box-shadow:0 10px 16px -10px rgba(0,0,0,.7); display:grid; place-items:center; }
.gr-hallmark::after{ content:"925"; font-family:var(--serif); font-weight:800; font-size:8px; letter-spacing:.04em; color:var(--accent-text); }

/* engraved name plate (hatch + border + hole) */
.gr-plate{ width:96px; height:46px; background:linear-gradient(180deg,var(--mat),var(--mat-2));
  border:1px solid var(--matline);
  box-shadow:0 12px 20px -12px rgba(0,0,0,.7); border-radius:4px;
  background-image:repeating-linear-gradient(0deg, rgba(60,51,36,.16) 0 1px, transparent 1px 5px); }
.gr-plate::before{ content:""; position:absolute; inset:5px; border:1px solid var(--gold-line); }
.gr-plate::after{ content:""; position:absolute; left:12%; right:12%; top:50%; height:8px; transform:translateY(-50%);
  background:repeating-linear-gradient(90deg, rgba(60,44,16,.5) 0 8px, transparent 8px 13px); }

/* metal type slug (letter) */
.gr-slug{ width:32px; height:40px; display:grid; place-items:center;
  font-family:var(--serif); font-weight:800; font-size:19px; color:var(--gold-hi);
  background:var(--ground-2); box-shadow:0 8px 16px -10px rgba(0,0,0,.8), inset 0 0 0 1px var(--gold-line);
  transform:rotate(180deg); } /* mirrored like a real type slug */

/* guilloche rosette */
.gr-guilloche{ width:84px; height:84px; border-radius:50%; opacity:.85;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 3px, rgba(201,162,75,.30) 3px 3.6px),
    conic-gradient(from 0deg, rgba(201,162,75,.14), transparent 7%, rgba(201,162,75,.14) 14%, transparent 21%);
  border:1px solid var(--gold-line);
  box-shadow:inset 0 0 14px rgba(0,0,0,.4); }

/* foil monogram */
.gr-foil{ width:56px; height:56px; border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #f6e6ad, #caa254 46%, #7a5c26);
  border:2px solid transparent; border-image:var(--gold-grad) 1;
  box-shadow:0 14px 22px -12px rgba(0,0,0,.75), inset 0 2px 5px rgba(255,255,255,.4);
  display:grid; place-items:center; }
.gr-foil::after{ content:"OK"; font-family:var(--serif); font-weight:800; font-size:16px; color:#2c2205; }

/* engraved ruler / scale */
.gr-ruler{ width:120px; height:22px; background:linear-gradient(180deg,var(--mat),var(--mat-2));
  border:1px solid var(--matline); box-shadow:0 10px 16px -10px rgba(0,0,0,.6); }
.gr-ruler::after{ content:""; position:absolute; left:0; right:0; top:0; height:9px;
  background:repeating-linear-gradient(90deg, rgba(60,44,16,.55) 0 1px, transparent 1px 8px); }

/* wax seal */
.gr-seal{ width:56px; height:56px; border-radius:50%;
  background:radial-gradient(circle at 38% 30%, #a03d34, var(--wax) 62%, #4d1a16);
  box-shadow:0 14px 22px -10px rgba(0,0,0,.75), inset 0 2px 5px rgba(255,255,255,.22), inset 0 -4px 8px rgba(0,0,0,.4); }
.gr-seal::before{ content:""; position:absolute; inset:6px; border-radius:50%; border:1px dashed rgba(255,225,210,.4); }
.gr-seal::after{ content:"OK"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--serif); font-weight:800; font-size:15px; color:#f6dcd2; text-shadow:0 1px 1px rgba(0,0,0,.4); }
.gr-seal.lg{ width:78px; height:78px; } .gr-seal.lg::after{ font-size:22px; }

/* engraved-hatching swatch */
.gr-hatch{ width:64px; height:44px; background:var(--mat);
  background-image:repeating-linear-gradient(45deg, rgba(60,44,16,.42) 0 1px, transparent 1px 5px);
  border:1px solid var(--matline); box-shadow:0 10px 16px -10px rgba(0,0,0,.6); }

/* small marks */
.gr-cross{ width:22px; height:22px; }
.gr-cross::before, .gr-cross::after{ content:""; position:absolute; background:rgba(201,162,75,.6); }
.gr-cross::before{ left:50%; top:0; width:1.5px; height:100%; transform:translateX(-50%); }
.gr-cross::after{ top:50%; left:0; height:1.5px; width:100%; transform:translateY(-50%); }
.gr-crop{ width:20px; height:20px; border-top:2px solid rgba(201,162,75,.6); border-left:2px solid rgba(201,162,75,.6); }
.gr-crop.br{ border-top:0; border-left:0; border-bottom:2px solid rgba(201,162,75,.6); border-right:2px solid rgba(201,162,75,.6); }
.gr-dot{ width:52px; height:52px; opacity:.5;
  background:radial-gradient(rgba(201,162,75,.5) 1px, transparent 1.5px); background-size:6px 6px; }
.gr-glow{ width:220px; height:150px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(201,162,75,.16), transparent 72%); }
.gr-hr{ height:1px; width:120px; background:linear-gradient(90deg,transparent,var(--gold-line),transparent); }
.gr-letter{ width:30px; height:34px; display:grid; place-items:center;
  font-family:var(--serif); font-weight:800; font-size:17px; color:var(--gold-hi);
  background:var(--ground-2); box-shadow:0 8px 16px -10px rgba(0,0,0,.8), inset 0 0 0 1px var(--gold-line); }
.gr-mast{ display:inline-flex; align-items:center; gap:8px; height:26px; padding:0 12px;
  background:linear-gradient(180deg,rgba(201,162,75,.16),rgba(201,162,75,.08));
  border:1px solid var(--gold-line);
  font-family:var(--serif); font-weight:700; text-transform:uppercase; letter-spacing:.2em;
  font-size:9px; color:var(--gold-hi); box-shadow:2px 3px 0 rgba(0,0,0,.35); }
.gr-mast::before{ content:""; width:14px; height:1px; background:var(--gold); }
.gr-date{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; text-align:center;
  border:2px solid rgba(201,162,75,.6); color:var(--gold-hi);
  font-family:var(--sans); font-size:8px; font-weight:600; line-height:1.15; letter-spacing:.06em;
  transform:rotate(-8deg); background:rgba(201,162,75,.05); }
.gr-date::before{ content:""; position:absolute; inset:5px; border-radius:50%; border:1px dashed var(--gold-line-2); }

/* mobile decor curation: thin the bleed pieces, keep the substrate */
@media (max-width:900px){ .gr-bleed:nth-of-type(2n){ display:none !important; } }
@media (max-width:600px){
  .gr-bleed:nth-of-type(3n+1){ display:none !important; }
  .gr-tag,.gr-bone,.gr-ring,.gr-bell,.gr-buckle,.gr-hallmark,.gr-plate,.gr-slug,
  .gr-guilloche,.gr-foil,.gr-ruler,.gr-seal,.gr-hatch,.gr-mast,.gr-date{
    transform:scale(.78) rotate(-2deg); transform-origin:top left; }
}
@media (max-width:760px){ .hero .gr-seal, .hero .gr-plate, .hero .gr-glow{ display:none; } }

/* ============================================================
   SIGNATURE SCENE — DENGE kinetic mobile (Calder-style, sticky-pin)
   Engraved tags hang by threads from balanced brass rods; on scroll
   the mobile assembles, the arms sway on pendulum easing with a
   decaying oscillation and settle into equilibrium.
   ============================================================ */
.denge-track{ position:relative; height:360vh; }
.denge-pin{ position:sticky; top:0; height:100vh; overflow:hidden; display:grid; place-items:center;
  background-color:#140f09;
  background-image:
    radial-gradient(120% 82% at 50% 40%, rgba(201,162,75,.13), transparent 62%),
    radial-gradient(rgba(255,244,214,.03) 1px, transparent 1.6px),
    radial-gradient(rgba(0,0,0,.32) 1px, transparent 1.6px),
    linear-gradient(180deg,#1a130b,#0d0904);
  background-size:auto,7px 7px,7px 7px,auto;
  box-shadow:inset 0 0 200px rgba(0,0,0,.62), inset 0 0 0 6px rgba(201,162,75,.08); }
.denge-pin > *{ position:relative; z-index:4; }
.denge-wrap{ position:relative; z-index:4; width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:clamp(16px,4vw,32px);
  display:grid; grid-template-columns:1fr; gap:clamp(14px,3vw,40px); align-items:center; }
@media (min-width:1000px){ .denge-wrap{ grid-template-columns:1.04fr .96fr; } }

.denge-stage{ position:relative; width:min(92vw,620px); height:min(66vh,540px); margin-inline:auto; }
@media (min-width:1000px){ .denge-stage{ width:min(42vw,500px); } }
/* ceiling beam the mobile hangs from */
.d-ceil{ position:absolute; left:12%; right:12%; top:6%; height:7px; z-index:5;
  background:linear-gradient(180deg, rgba(241,220,159,.55), rgba(122,92,38,.5) 50%, rgba(48,36,14,.5));
  box-shadow:0 4px 8px -3px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,246,214,.5); }
.d-ceil::after{ content:""; position:absolute; left:50%; top:100%; width:11px; height:11px; transform:translateX(-50%) rotate(45deg);
  background:linear-gradient(135deg,#f1dc9f,#7a5c26); box-shadow:0 3px 5px -2px rgba(0,0,0,.6); }

.mobile{ position:absolute; left:50%; top:calc(6% + 7px); width:0; height:0; transform-origin:top center; }
@media (min-width:1000px){ .denge-wrap .mobile{ left:41%; transform:scale(.9); } }
.d-thread{ position:absolute; left:0; top:0; width:1px; height:var(--tl,66px);
  background:var(--thread); transform-origin:top center; transform:translateX(-50%); }
.drop{ position:absolute; top:0; width:0; height:0; }
.drop-root{ left:0; }
.arm{ position:absolute; top:var(--tl,66px); left:0; width:var(--w,420px);
  margin-left:calc(var(--w,420px) * var(--pivn,.5) * -1);
  transform-origin:calc(var(--w,420px) * var(--pivn,.5)) 0;
  will-change:transform; }
.arm .rod{ position:absolute; left:0; right:0; top:0; height:3px; border-radius:2px;
  background:linear-gradient(90deg, rgba(122,92,38,.75), #e6cd86 12%, #caa254 50%, #e6cd86 88%, rgba(122,92,38,.75));
  box-shadow:0 4px 8px -4px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,246,214,.6); }
.arm .rod::before, .arm .rod::after{ content:""; position:absolute; top:-2px; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #f6e6ad, #7a5c26); }
.arm .rod::before{ left:-3px; } .arm .rod::after{ right:-3px; }
.arm > .drop-l{ left:0; } .arm > .drop-r{ left:100%; }

/* hanging engraved tag */
.d-tag{ position:absolute; top:var(--tl,66px); left:0; width:var(--tw,74px);
  margin-left:calc(var(--tw,74px) * -.5);
  transform-origin:50% -10px; will-change:transform;
  border:4px solid var(--gold); border-image:var(--gold-grad) 1;
  background:var(--mat); padding:3px;
  box-shadow:0 16px 24px -14px rgba(0,0,0,.85), inset 0 0 0 1px var(--matline); }
.d-tag.round{ border-radius:50%; overflow:hidden; }
.d-tag img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:1/1; }
.d-tag .d-cap{ position:absolute; left:0; right:0; bottom:2px; text-align:center;
  font-family:var(--serif); font-weight:800; font-size:8px; letter-spacing:.04em; color:#f3e6c2;
  text-shadow:0 1px 2px rgba(0,0,0,.8); }
/* engraved (image-less) name tag */
.d-tag.plate{ background:var(--gold-grad); display:grid; place-items:center; }
.d-tag.plate .d-name{ font-family:var(--serif); font-weight:800; font-size:13px; color:#2c2205;
  text-shadow:0 1px 0 rgba(255,247,214,.5); }
/* little top loop where the thread meets the tag */
.d-tag::before{ content:""; position:absolute; left:50%; top:-9px; width:10px; height:10px; transform:translateX(-50%);
  border:2px solid var(--gold); border-radius:50%; background:transparent; }
/* small dangler (hallmark / bell) hung under a tag */
.d-mini{ position:absolute; top:var(--tl,40px); left:0; margin-left:-17px; transform-origin:50% -8px; will-change:transform; }

.denge-cap{ position:relative; z-index:6; }
@media (min-width:1000px){ .denge-cap{ background:radial-gradient(130% 110% at 78% 42%, rgba(18,13,8,.82), rgba(18,13,8,.32) 58%, rgba(18,13,8,0) 80%); border-radius:10px; } }
.denge-cap .denge-c{ opacity:0; transform:translateY(18px); }
.denge-cap h2{ color:var(--bone); }
.denge-cap .lead{ color:var(--bone-soft); max-width:46ch; margin-top:12px; }
.denge-readout{ margin-top:18px; display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--serif); font-weight:700; font-size:14px; letter-spacing:.04em; color:var(--bone);
  border:1px solid var(--gold-line); border-radius:2px; padding:10px 16px; background:rgba(201,162,75,.06); }
.denge-readout b{ color:var(--gold-hi); font-variant-numeric:tabular-nums; }
.denge-meter{ position:relative; width:120px; height:6px; background:rgba(201,162,75,.16);
  border:1px solid var(--gold-line-2); overflow:hidden; }
.denge-meter i{ position:absolute; inset:0; width:0; background:var(--gold-grad); }

@media (max-width:1000px){ .denge-track{ height:320vh; } .mobile{ transform:scale(.8); } }
@media (max-width:600px){
  .denge-track{ height:260vh; }
  .denge-stage{ width:min(94vw,380px); height:min(58vh,430px); }
  .mobile{ transform:scale(.54); }  /* shrink the whole rig so tags stay on-screen */
  .arm-c{ display:none; }          /* thin the mobile: fewer arms/tags on phone */
}

@media (prefers-reduced-motion:reduce){
  .denge-cap .denge-c{ opacity:1; transform:none; }
  .d-tag, .arm, .d-mini{ opacity:1 !important; }
}

/* ============================================================
   PRELOADER + gold-dust motes
   ============================================================ */
#pre{ position:fixed; inset:0; z-index:99999; display:grid; place-items:center;
  background-color:#17130d;
  background-image:radial-gradient(120% 90% at 50% -8%, rgba(201,162,75,.14), transparent 55%),
    radial-gradient(rgba(255,244,214,.03) 1px, transparent 1.7px), linear-gradient(180deg,#1d160e,#0d0904);
  background-size:auto,7px 7px,auto;
  transition:opacity .7s ease, visibility .7s; }
#pre.done{ opacity:0; visibility:hidden; pointer-events:none; }
html.no-js #pre{ display:none; }
#pre .pl-in{ position:relative; text-align:center; background:linear-gradient(180deg,var(--mat),var(--mat-2)); color:var(--paper-ink);
  padding:32px 46px; border:8px solid var(--gold); border-image:var(--gold-grad) 1;
  box-shadow:0 34px 56px -24px #000; transform:rotate(-1.2deg); }
#pre .pl-in::before{ content:""; position:absolute; top:-14px; left:50%; width:13px; height:13px;
  transform:translateX(-50%) rotate(45deg); background:linear-gradient(135deg,#f1dc9f,#8a6a2a);
  box-shadow:0 4px 8px -2px rgba(0,0,0,.6); }
#pre .pl-mark{ font-family:var(--serif); font-weight:800; font-size:clamp(22px,6vw,38px); letter-spacing:.02em; color:var(--paper-ink); text-transform:uppercase; }
#pre .pl-mark b{ color:var(--accent-text); font-weight:800; }
#pre .pl-sub{ font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:#6d685c; margin-top:8px; }
#pre .pl-bar{ margin:20px auto 0; width:min(230px,58vw); height:9px; border:1px solid var(--gold-line); background:rgba(122,92,38,.14); overflow:hidden; position:relative; }
#pre .pl-bar i{ position:absolute; inset:0; width:0;
  background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi)); animation:plFill 1.15s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes plFill{ to{ width:100%; } }
#motes{ position:fixed; inset:0; z-index:3; pointer-events:none; mix-blend-mode:screen; opacity:.5; }

/* ============================================================
   ELEVATE PASS — top-tier engraving-vitrine polish (appended)
   Adds: gilt-framed real-photo clippings, drop-caps, folios,
   brass hover-shimmer, refined display typography, deeper
   walnut tonal depth + hairline-gold corner ticks.
   ============================================================ */

/* ---- deeper walnut tonal depth: extra corner vignette + faint gild bloom ---- */
body::before{
  background:
    radial-gradient(130% 92% at 50% -12%, rgba(255,238,196,.06), transparent 55%),
    radial-gradient(80% 60% at 0% 100%, rgba(0,0,0,.34), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, rgba(0,0,0,.34), transparent 60%) !important; }

/* ============================================================
   REFINED DISPLAY TYPOGRAPHY (Bricolage Grotesque)
   ============================================================ */
.hero h1{ font-size:clamp(2.45rem,6.7vw,4.5rem) !important; letter-spacing:-.022em !important; line-height:1.04 !important; }
.hero h1 .kaz::after{ content:""; position:absolute; left:2%; right:2%; bottom:-.14em; height:.09em;
  background:linear-gradient(90deg,transparent,var(--gold-hi),transparent); opacity:.85; border-radius:2px; }
.sec-head h2, .split h2{ font-size:clamp(1.95rem,4.9vw,3.15rem) !important; letter-spacing:-.02em; }
.sec-head h2, .split h2, .cta-band h2, .denge-cap h2{ text-wrap:balance; }
.denge-cap h2{ font-size:clamp(1.9rem,4.4vw,2.9rem) !important; letter-spacing:-.018em; }
.eyebrow{ letter-spacing:.24em !important; font-size:.7rem; }
.accent-word{ letter-spacing:-.01em; }

/* refined engraved drop-cap for lead paragraphs (opt-in via .dropcap) */
.dropcap::first-letter{
  float:left; font-family:var(--serif); font-weight:800;
  font-size:3.15em; line-height:.78; padding:.06em .12em .02em 0; margin:.02em .06em 0 0;
  color:var(--gold-hi);
  text-shadow:0 1px 0 var(--gold-lo), 0 2px 10px rgba(0,0,0,.5);
  -webkit-text-stroke:.5px rgba(122,92,38,.35); }
.matbg .dropcap::first-letter, .band .dropcap::first-letter{ color:var(--gold-hi); }

/* small engraved section eyebrow "folio" as decor (No. ##) */
.gr-folio{ display:inline-flex; align-items:center; gap:7px; height:24px; padding:0 11px;
  font-family:var(--serif); font-weight:700; font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-hi); background:linear-gradient(180deg,rgba(201,162,75,.14),rgba(201,162,75,.05));
  border:1px solid var(--gold-line); box-shadow:2px 3px 0 rgba(0,0,0,.32); white-space:nowrap; }
.gr-folio::before{ content:""; width:16px; height:1px; background:var(--gold); }

/* ============================================================
   GILT-FRAMED REAL-PHOTO CLIPPINGS (.gr-photo) — collage layer
   Absolute, decorative; real workshop photos as pinned plates.
   ============================================================ */
.gr-photo{ width:136px; padding:5px; background:var(--mat);
  border:5px solid var(--gold); border-image:var(--gold-grad) 1;
  box-shadow:
    inset 0 0 0 1px var(--matline),
    0 30px 46px -22px rgba(0,0,0,.82),
    0 12px 22px -16px rgba(0,0,0,.6);
  overflow:visible; }
.gr-photo.sm{ width:104px; }
.gr-photo.lg{ width:176px; }
.gr-photo::after{ /* gilt inner matline + subtle sheen sweep */
  content:""; position:absolute; inset:5px; pointer-events:none; z-index:2;
  box-shadow:inset 0 0 0 1px var(--gold-line-2);
  background:linear-gradient(115deg, transparent 30%, rgba(255,247,214,.34) 46%, transparent 60%);
  background-size:260% 100%; background-position:120% 0; transition:background-position .9s var(--ease); }
.gr-photo:hover::after{ background-position:-40% 0; }
.gr-photo::before{ /* brass thumbtack pin */
  content:""; position:absolute; z-index:4; left:50%; top:-11px; width:13px; height:13px;
  transform:translateX(-50%) rotate(45deg);
  background:radial-gradient(circle at 38% 30%, #f6e6ad, #caa254 46%, #7a5c26);
  box-shadow:0 3px 6px -2px rgba(0,0,0,.65), inset 0 1px 2px rgba(255,255,255,.5); }
.gr-photo img{ display:block; width:100%; height:100%; aspect-ratio:1/1; object-fit:cover;
  filter:sepia(.16) contrast(1.03) saturate(.94) brightness(.99); }
.gr-photo.tall img{ aspect-ratio:4/5; }
.gr-photo.wide img{ aspect-ratio:5/4; }
.gr-photo .gr-cap{ position:absolute; left:5px; right:5px; bottom:5px; z-index:3;
  padding:5px 6px; text-align:center;
  font-family:var(--serif); font-weight:800; font-size:8.5px; letter-spacing:.14em; text-transform:uppercase;
  color:#f4e7c6; background:linear-gradient(180deg,rgba(23,17,9,.05),rgba(23,17,9,.82));
  text-shadow:0 1px 2px rgba(0,0,0,.8); }
/* keep the heavy photo collage to wider viewports (mobile stays clean, 0-overflow) */
@media (max-width:900px){ .gr-photo{ display:none !important; } }

/* ---- hairline-gold corner ticks on framed clippings (premium detail) ---- */
.mat-card, .price-card, .dur-card, .testi, .note, .member, .channel, .gal-tile{ position:relative; }
.gal-tile::before{ /* diagonal brass sheen sweep on hover */
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(115deg, transparent 34%, rgba(255,247,214,.30) 48%, transparent 62%);
  background-size:260% 100%; background-position:120% 0; opacity:0;
  transition:background-position 1s var(--ease), opacity .3s var(--ease); }
.gal-tile:hover::before{ background-position:-50% 0; opacity:1; }
.gal-tile:hover{ box-shadow:
    inset 0 0 0 1px var(--matline), inset 0 0 0 3px rgba(255,255,255,.42),
    0 40px 60px -26px rgba(201,162,75,.4), 0 14px 24px -16px rgba(0,0,0,.7) !important; }

/* ---- brass-lift shimmer on the gilt panels (border bloom + rise) ---- */
.mat-card:hover, .price-card:hover, .testi:hover, .note:hover, .channel:hover{
  transform:translateY(-4px);
  box-shadow:
    inset 0 0 0 1px var(--matline), inset 0 0 0 3px rgba(255,255,255,.5),
    0 40px 60px -26px rgba(201,162,75,.42), 0 14px 24px -16px rgba(0,0,0,.66) !important; }
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 34%, rgba(255,255,255,.5) 48%, transparent 62%);
  background-size:250% 100%; background-position:130% 0; transition:background-position .8s var(--ease); }
.btn-primary:hover::after{ background-position:-40% 0; }

@media (prefers-reduced-motion:reduce){
  .gr-photo::after, .gal-tile::before, .btn-primary::after{ transition:none; }
  .mat-card:hover, .price-card:hover, .testi:hover, .note:hover, .channel:hover{ transform:none; }
}

/* fix: on phones the denge kinetic scene (stage) + its caption together exceeded
   the pinned 100vh, so the caption got clipped and the scene read as empty/broken.
   Make the stage more compact and shorten the pinned scroll so stage + caption sit
   together comfortably. */
@media (max-width:640px){
  .denge-track{ height:230vh; }
  .denge-pin{ align-content:center; gap:8px; }
  .denge-stage{ height:min(40vh,300px); }
  .denge-wrap{ gap:10px; }
  .denge-cap h2{ font-size:clamp(1.5rem,6.4vw,2rem); }
  .denge-cap .lead{ font-size:.92rem; }
}

/* fix: `.nav-desktop a{color:var(--bone-soft)!important}` (0,1,1) out-specified the
   .nav-cta dark label (0,1,0) -> light text on the gold button = merged on desktop.
   Restore the dark label with a higher-specificity selector. */
.nav-desktop a.nav-cta{ color:#231803 !important; }

/* fix: on phones the decorative "NO. 01 · Karaköy" folio badge overlapped the
   eyebrow -> hide it (it is collage decoration). Also keep the denge kinetic scene
   inside the section so it doesn't spill past the right edge. */
@media (max-width:640px){
  .hero .gr-folio{ display:none; }
  .denge-wrap{ overflow:clip; }
  .denge-stage{ max-width:86vw; margin-inline:auto; }
  .denge-pin{ overflow:hidden; }
}

/* fix#2: the kinetic balance "pyramid" still reached the screen edges on phones and
   spilled past when it swung. Shrink the whole rig further and cap the stage so the
   tags always keep a clear margin inside the section. */
@media (max-width:640px){
  .denge-stage{ width:min(78vw,300px) !important; max-width:78vw !important; }
  .mobile{ transform:scale(.42) !important; }
}

/* fix#3 (denge on phones): the stage reserved ~300px but the shrunk pyramid used
   only the top ~120px -> a big void pushed the caption down and clipped the bottom
   readout ("Denge %100 · salınım 0°"). Give the stage a tight explicit height so the
   pyramid sits just above the caption and the whole block fits in the pinned view. */
@media (max-width:640px){
  .denge-track{ height:210vh; }
  .denge-pin{ align-content:center; }
  .denge-wrap{ gap:6px !important; }
  .denge-stage{ height:196px !important; width:min(82vw,320px) !important; max-width:82vw !important; }
  .mobile{ transform:scale(.5) !important; }
  .denge-cap{ padding-bottom:8px; }
}

/* fix#4 (denge across ALL widths): the kinetic mobile overlapped the caption text
   on desktop (2-col) and the caption got clipped/oversized on tablet (1-col).
   - Desktop: shrink the mobile and pull it left so the whole rig stays inside its
     own column, clear of the text.
   - Tablet: stack it compactly with a tight stage so the caption fits unclipped. */
@media (min-width:1000px){
  .denge-wrap{ grid-template-columns:0.92fr 1.08fr !important; }
  .denge-stage{ width:min(38vw,420px) !important; }
  .denge-wrap .mobile{ left:32% !important; transform:scale(.58) !important; }
}
@media (min-width:641px) and (max-width:999px){
  .denge-track{ height:220vh; }
  .denge-pin{ align-content:center; }
  .denge-wrap{ gap:10px !important; }
  .denge-stage{ height:230px !important; width:min(64vw,440px) !important; max-width:64vw !important; margin-inline:auto; }
  .mobile{ transform:scale(.56) !important; }
}

/* fix#5 (denge desktop): the caption (big h2 + lead + readout) was taller than the
   pinned viewport, so the paragraph and the "Denge %100 · salınım 0°" readout were
   clipped at the bottom. Shrink the h2 and the stage so the whole caption fits
   centered; pull the mobile fully inside its column at ~1024. */
@media (min-width:1000px){
  .denge-cap h2{ font-size:clamp(1.6rem,2.7vw,2.2rem) !important; line-height:1.12; }
  .denge-cap .lead{ font-size:.98rem !important; margin-top:10px; }
  .denge-stage{ height:min(52vh,420px) !important; }
  .denge-wrap .mobile{ left:30% !important; transform:scale(.52) !important; }
}

/* fix#6 (denge desktop clip): the caption sits centered in a row whose height == the
   stage height; at 420px that pushed the readout 19px below the pinned viewport for
   most of the scroll. Shorten the stage so caption+readout fit (cap_bottom≈709+H/2). */
@media (min-width:1000px){
  .denge-stage{ height:352px !important; }
  .denge-readout{ margin-top:10px !important; }
}

/* fix#7 (denge desktop, short viewports too): make the stage height track the
   viewport height (vh) and keep the caption compact, so caption+readout fit the
   pinned view on laptops (768h) as well as tall screens. */
@media (min-width:1000px){
  .denge-stage{ height:min(38vh,352px) !important; }
  .denge-cap h2{ font-size:clamp(1.5rem,2.3vw,1.95rem) !important; line-height:1.12; }
  .denge-cap .lead{ font-size:.92rem !important; line-height:1.5; margin-top:8px; max-width:44ch; }
  .denge-readout{ margin-top:8px !important; padding:8px 12px !important; }
}

/* ROOT FIX (denge): `.denge-pin > *{position:relative}` (for the wrap's stacking
   context) accidentally out-specified `.gr{position:absolute}`, so the 11 decorative
   .gr collage pieces became in-flow GRID ITEMS, stacking ~560px of rows that pushed
   the whole caption+scene down and clipped it at every viewport height. Put the
   decorative .gr pieces back to absolute so the wrap is the only grid item and
   centers correctly. */
.denge-pin > .gr{ position:absolute !important; }

/* narrow desktop (~1000-1200): nudge the mobile in a touch so its left arm doesn't
   reach the edge. */
@media (min-width:1000px) and (max-width:1200px){
  .denge-wrap .mobile{ left:36% !important; transform:scale(.48) !important; }
}

/* size-up (denge): the rig was over-shrunk while chasing the layout bug. Now that the
   .gr fix frees the space, make the kinetic mobile noticeably bigger while keeping it
   clear of the text and the edges. (Later rules override the earlier smaller values.) */
@media (max-width:640px){
  .denge-stage{ height:250px !important; width:min(90vw,360px) !important; max-width:90vw !important; }
  .mobile{ transform:scale(.62) !important; }
}
@media (min-width:641px) and (max-width:999px){
  .denge-stage{ height:300px !important; width:min(76vw,520px) !important; max-width:76vw !important; }
  .mobile{ transform:scale(.74) !important; }
}
@media (min-width:1000px) and (max-width:1200px){
  .denge-wrap .mobile{ left:37% !important; transform:scale(.62) !important; }
}
@media (min-width:1201px){
  .denge-wrap .mobile{ left:33% !important; transform:scale(.74) !important; }
}

/* tune narrow-desktop (1000-1200): the left column is tight there, so keep the mobile
   a bit smaller and nudged right so it neither escapes the left edge nor touches the
   caption. */
@media (min-width:1000px) and (max-width:1200px){
  .denge-wrap .mobile{ left:41% !important; transform:scale(.55) !important; }
}

/* phones are too narrow for scale .62 (the rig's arms reached past the left edge on
   360-414px). Use the largest scale that still keeps clear margins on small phones. */
@media (max-width:640px){
  .denge-stage{ width:min(94vw,360px) !important; max-width:94vw !important; }
  .mobile{ transform:scale(.5) !important; }
}

/* show the bottom-right photo clipping ("Yuvarlak · Yıldız") in the denge scene on
   phones too (all .gr-photo were hidden ≤900px). Keep it small, in the bottom-right,
   clear of the caption. */
@media (max-width:900px){
  .denge-pin .gr-photo[style*="right:3%"]{ display:block !important; width:74px; bottom:3% !important; right:4% !important; }
}

/* the innermost arm (.arm-c) held the heart-shaped "Duman" tag and the star "Pamuk"
   tag but was hidden on phones ("thin the mobile"). The user wants that heart tag
   visible, so bring .arm-c back on all sizes. */
.arm-c{ display:block !important; }

/* phones: with the heart arm back, narrow the inner arm and trim the rig scale a
   touch so all 5 tags (incl. the heart) fit inside the screen. */
@media (max-width:640px){
  .arm-c{ --w:84px !important; }
  .mobile{ transform:scale(.42) !important; }
  .denge-stage{ width:min(96vw,376px) !important; max-width:96vw !important; }
}