/* self-hosted fonts (restored after polish strip) */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Newsreader-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: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Newsreader-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: 'Newsreader';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Newsreader-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: 'Newsreader';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Newsreader-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: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Newsreader-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: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Newsreader-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: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/Newsreader-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: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/Newsreader-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: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Newsreader-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: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Newsreader-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: 'Newsreader';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/Newsreader-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: 'Newsreader';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/Newsreader-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: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/SourceSans3-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: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/SourceSans3-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: 'Source Sans 3';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/SourceSans3-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: 'Source Sans 3';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/SourceSans3-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: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/SourceSans3-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: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/SourceSans3-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: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/SourceSans3-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: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/SourceSans3-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: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/SourceSans3-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: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/SourceSans3-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: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/SourceSans3-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: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/SourceSans3-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;
}

/* ============================================================
   Sırma Çini Atölyesi — storytelling longread
   El boyaması İznik çini · mutfak tezgah arası & banyo
   ============================================================ */

:root {
  --bg: #FBF8F3;
  --surface: #FFFFFF;
  --surface-2: #F3EDE3;
  --surface-3: #ECE3D4;
  --ink: #3A342C;
  --ink-soft: #6B6155;
  --ink-faint: #6C6357;
  --accent: #0E7C6B;          /* fill / border / decor */
  --accent-text: #0A5C4F;     /* teal as TEXT on light */
  --accent2: #B8863B;         /* gold fill */
  --accent2-text: #8A6221;    /* gold as TEXT on light */
  --line: rgba(58, 52, 44, 0.14);
  --line-strong: rgba(58, 52, 44, 0.30);

  --serif: "Newsreader", Georgia, "Palatino Linotype", "Times New Roman", serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --container: 1080px;
  --pad: clamp(20px, 6vw, 72px);
  --header-h: 74px;

  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;
  overflow-x: hidden;
  max-width: 100vw;
}

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

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

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

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent2-text); }

strong { font-weight: 600; color: var(--ink); }

::selection { background: rgba(14, 124, 107, 0.18); color: var(--ink); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.eyebrow {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent2), transparent);
  display: inline-block;
}

.lead { font-size: clamp(1.15rem, 2.4vw, 1.42rem); color: var(--ink-soft); line-height: 1.6; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--surface);
  padding: 12px 18px;
  z-index: 2000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: var(--surface); }

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

/* ---------- Brush-stroke separator (material: fırça izi) ---------- */
.brush-rule {
  height: 3px;
  margin: 0;
  border: 0;
  background:
    radial-gradient(closest-side, rgba(14, 124, 107, 0.35), transparent) center / 120px 3px no-repeat,
    linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent);
  opacity: 0.6;
}
.hair-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent);
  border: 0;
  margin: 0;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1080;
  height: var(--header-h);
  background: rgba(251, 248, 243, 0.92);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid transparent;
  transition: background 240ms ease, box-shadow 240ms ease, height 240ms ease, border-color 240ms ease;
}
.site-header.is-scrolled {
  background: rgba(251, 248, 243, 0.98);
  box-shadow: 0 8px 24px -18px rgba(58, 52, 44, 0.5);
  border-bottom-color: var(--line);
  height: 64px;
}
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5ch;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.34rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand b {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text);
  transform: translateY(-1px);
}

.nav-desktop { display: none; }
.nav-desktop ul {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-desktop a {
  position: relative;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 6px 2px;
  transition: color 200ms ease;
}
.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--accent2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(.2,.7,.2,1);
}
.nav-desktop a:hover,
.nav-desktop a.is-active { color: var(--ink); }
.nav-desktop a:hover::after,
.nav-desktop a.is-active::after { transform: scaleX(1); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5ch;
  background: var(--ink);
  color: var(--surface);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  transition: background 220ms ease, color 220ms ease, transform 220ms ease;
}
.nav-desktop .nav-cta::after { display: none; }
.nav-cta:hover, .nav-cta:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
  transform: translateY(-2px);
}

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

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

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

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 1050;
  width: min(360px, 92vw);
  background: var(--surface);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 14px) 30px 30px;
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer nav ul { list-style: none; margin: 0; padding: 0; }
.drawer nav li { border-bottom: 1px solid var(--line); }
.drawer nav a {
  display: block;
  padding: 16px 2px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink);
}
.drawer nav a.is-active { color: var(--accent-text); }
.drawer .drawer-cta {
  margin-top: 26px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--accent);
  color: var(--surface);
  font-weight: 600;
  padding: 14px 22px;
  border-radius: 999px;
}
.drawer .drawer-cta:hover { background: var(--ink); color: var(--surface); }
.drawer-meta { margin-top: auto; padding-top: 26px; color: var(--ink-soft); font-size: 0.9rem; }
.drawer-meta a { color: var(--accent-text); }

@media (min-width: 1024px) { .drawer, .drawer-backdrop { display: none; } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6ch;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  text-align: center;
}
.btn-primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(14, 124, 107, 0.9);
}
.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(--ink);
  transform: translateY(-2px);
}
.btn .arw { transition: transform 220ms ease; }
.btn:hover .arw { transform: translateX(4px); }

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

/* ============================================================
   HERO — vertical stack: başlık üstte, tam-en foto altta
   ============================================================ */
.hero { padding: clamp(38px, 7vw, 76px) 0 0; }
.hero-head { max-width: 880px; }
.hero h1 {
  font-size: clamp(2.7rem, 8vw, 4.5rem);
  line-height: 1.08;
  margin: 0.2em 0 0.42em;
  letter-spacing: -0.02em;
}
.hero h1 .ln { display: block; overflow: hidden; }
.hero h1 .ln > span {
  display: block;
  transform: translateY(105%);
  animation: lineUp 900ms cubic-bezier(.2,.7,.2,1) forwards;
}
.hero h1 .ln:nth-child(2) > span { animation-delay: 120ms; }
@keyframes lineUp { to { transform: translateY(0); } }
.hero .sub {
  font-size: clamp(1.1rem, 2.5vw, 1.44rem);
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  max-width: 640px;
  line-height: 1.5;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 30px;
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 26px;
  list-style: none;
  padding: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
}
.hero-trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust li::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent2);
  flex: none;
}

/* full-bleed hero photo w/ signature glaze sheen following cursor */
.hero-figure {
  position: relative;
  margin-top: clamp(34px, 5vw, 56px);
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  aspect-ratio: 21 / 10;
  max-height: 78vh;
  background: var(--surface-2);
}
.hero-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transform: scale(1.06);
}
.hero-figure .glaze-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(320px 320px at var(--mx, 50%) var(--my, 40%),
              rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 60%);
  mix-blend-mode: soft-light;
  opacity: 0.9;
}
.hero-figure figcaption {
  position: absolute;
  left: 0; bottom: 0;
  padding: 22px clamp(20px, 6vw, 72px);
  width: 100%;
  background: linear-gradient(0deg, rgba(28, 24, 18, 0.72), rgba(28, 24, 18, 0) 100%);
  color: #F5EFE4;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
}
.hero-figure figcaption span { color: #E4C58A; font-style: normal; font-family: var(--sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; display: block; margin-bottom: 6px; }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
section { scroll-margin-top: calc(var(--header-h) + 16px); }
.slab { padding: clamp(58px, 9vw, 118px) 0; }
.slab-tint { background: var(--surface-2); }
.slab-ink { background: var(--ink); color: #EDE6DA; }
.slab-ink h1, .slab-ink h2, .slab-ink h3 { color: #FBF8F3; }
.slab-ink .eyebrow { color: #E4C58A; }
.slab-ink .lead { color: #CFC6B7; }

.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head h2 { font-size: clamp(2rem, 5vw, 3.35rem); }
.section-head .lead { margin-top: 0.4em; }

.pull {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  line-height: 1.3;
  color: var(--ink);
  max-width: 900px;
  margin: 0;
}
.pull em { color: var(--accent-text); font-style: italic; }

/* ---------- Longread story (baslangic) ---------- */
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: start;
}
@media (min-width: 900px) {
  .story-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.story-body p { font-size: 1.08rem; }
.story-body p + p { margin-top: 1.1em; }
.dropcap::first-letter {
  font-family: var(--serif);
  font-style: italic;
  font-size: 3.6em;
  line-height: 0.78;
  float: left;
  padding: 0.08em 0.12em 0 0;
  color: var(--accent-text);
}
.story-figure {
  position: relative;
  border: 1px solid var(--line);
  padding: 10px;
  background: var(--surface);
  box-shadow: 0 30px 60px -50px rgba(58, 52, 44, 0.8);
}
.story-figure img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.story-figure figcaption {
  font-size: 0.84rem;
  color: var(--ink-faint);
  padding: 12px 6px 4px;
  font-style: italic;
  font-family: var(--serif);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  margin-top: clamp(30px, 4vw, 50px);
  border: 1px solid var(--line);
  background: var(--line);
  border-radius: 12px;
  overflow: hidden;
}
@media (min-width: 760px) { .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  background: var(--surface);
  padding: 24px 20px;
}
.slab-tint .stat { background: var(--bg); }
.stat .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 2ch;
}
.stat .lbl { display: block; margin-top: 8px; font-size: 0.84rem; color: var(--ink-soft); }

/* ============================================================
   CONFIGURATOR (mekan konfigüratörü) — business tool
   ============================================================ */
.config { display: grid; gap: clamp(24px, 4vw, 40px); }
@media (min-width: 960px) {
  .config { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); align-items: start; }
}

/* preview: real kitchen photo + brush-wipe pattern reveal */
.cfg-preview {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-3);
  box-shadow: 0 40px 80px -60px rgba(58, 52, 44, 0.9);
}
.cfg-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.cfg-zone {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 30%;
  height: 34%;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), 0 6px 18px -8px rgba(0,0,0,0.5);
}
.cfg-tile {
  position: absolute;
  inset: 0;
  background-image: url("../images/desen-lale.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 42%;
  filter: saturate(1) hue-rotate(0deg);
  transition: filter 500ms ease;
}
/* brush wipe overlay (biscuit) that slides away on recompute */
.cfg-wipe {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(58, 52, 44, 0.05) 0 8px, transparent 8px 16px),
    var(--surface-3);
  /* rest state = swept away so the çini tile shows through the photo;
     the biscuit only sweeps across transiently while recomputing */
  transform: translateX(103%);
}
.cfg-zone.is-wiping .cfg-wipe {
  animation: brushWipe 900ms cubic-bezier(.5,0,.1,1) forwards;
}
@keyframes brushWipe {
  0% { transform: translateX(0); }
  100% { transform: translateX(103%); }
}
.cfg-caption {
  position: absolute;
  left: 12px; bottom: 12px;
  background: rgba(28,24,18,0.78);
  color: #F5EFE4;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
}

/* controls */
.cfg-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(20px, 3vw, 30px);
}
.slab-ink .cfg-panel { background: #453E33; border-color: rgba(255,255,255,0.14); color: #EDE6DA; }
.slab-ink .cfg-panel label, .slab-ink .cfg-panel legend { color: #EDE6DA; }
.cfg-field { margin-bottom: 20px; }
.cfg-field > label, .cfg-field > .lbl-txt, .cfg-field legend {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 8px;
  padding: 0;
}
.cfg-field output {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.slab-ink .cfg-field output { color: #E4C58A; }
.cfg-field input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  height: 26px;
}
.cfg-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0;
}
.cfg-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: border-color 200ms ease, background 200ms ease, transform 160ms ease;
}
.slab-ink .cfg-choice { border-color: rgba(255,255,255,0.2); }
.cfg-choice input { position: absolute; opacity: 0; pointer-events: none; }
.cfg-choice .cc-name { font-weight: 600; }
.cfg-choice .cc-meta { font-size: 0.78rem; color: var(--ink-faint); }
.slab-ink .cfg-choice .cc-meta { color: #BCB2A2; }
.cfg-choice .swatch { width: 100%; height: 8px; border-radius: 4px; margin-top: 4px; }
.cfg-choice:hover { transform: translateY(-2px); }
.cfg-choice:has(input:checked) {
  border-color: var(--accent);
  background: rgba(14, 124, 107, 0.08);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.cfg-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.cfg-out {
  margin-top: 22px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.slab-ink .cfg-out { border-top-color: rgba(255,255,255,0.16); }
.cfg-out dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 16px;
  margin: 0 0 4px;
  font-size: 0.95rem;
}
.cfg-out dt { color: var(--ink-soft); }
.slab-ink .cfg-out dt { color: #C6BCAD; }
.cfg-out dd { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; margin: 0; }
.cfg-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
}
.cfg-total .t-lbl { font-weight: 600; }
.cfg-total .t-val {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.slab-ink .cfg-total .t-val { color: #E4C58A; }
.cfg-note {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.slab-ink .cfg-note { color: #B4AA9A; }
.cfg-warn {
  margin-top: 10px;
  font-size: 0.86rem;
  color: var(--accent2-text);
  background: rgba(184, 134, 59, 0.12);
  border-left: 3px solid var(--accent2);
  padding: 8px 12px;
  border-radius: 0 8px 8px 0;
  display: none;
}
.cfg-warn.show { display: block; }
.slab-ink .cfg-warn { color: #E4C58A; background: rgba(228,197,138,0.12); }
.cfg-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }

/* ============================================================
   PRICED GALLERY (tezgah-arasi projeler)
   ============================================================ */
.works-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px);
  margin-top: clamp(28px, 4vw, 48px);
}
@media (min-width: 640px) { .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.work {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  transition: transform 260ms cubic-bezier(.2,.7,.2,1), box-shadow 260ms ease;
}
.work:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -40px rgba(58,52,44,0.7); }
.work-media {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--surface-3);
}
.work-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.2,.7,.2,1); }
.work:hover .work-media img { transform: scale(1.05); }
/* brush wipe on reveal */
.work-media .raw {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(58, 52, 44, 0.05) 0 8px, transparent 8px 16px),
    var(--surface-3);
  transform: translateX(0);
  z-index: 2;
}
.work.is-in .work-media .raw { animation: brushWipe 1000ms cubic-bezier(.5,0,.1,1) forwards; }
.work-tag {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 3;
  background: rgba(251,248,243,0.94);
  color: var(--accent-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
}
.work-body { padding: 20px 22px 24px; }
.work-body h3 { font-size: 1.35rem; margin-bottom: 0.3em; }
.work-body .meta { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 0.8em; }
.work-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.work-price .amt {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.work-price .unit { font-size: 0.78rem; color: var(--ink-faint); }

/* ============================================================
   PACKAGES / PRICING LIST
   ============================================================ */
.pkg-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: clamp(26px, 4vw, 44px);
}
@media (min-width: 860px) { .pkg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pkg {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 24px 28px;
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
.pkg:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -46px rgba(58,52,44,0.7); }
.pkg.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.pkg-badge {
  align-self: flex-start;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent2-text);
  background: rgba(184,134,59,0.14);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.pkg h3 { font-size: 1.5rem; margin-bottom: 0.2em; }
.pkg .pkg-desc { font-size: 0.9rem; color: var(--ink-soft); min-height: 2.8em; }
.pkg .pkg-price {
  margin: 14px 0 4px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 2rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pkg .pkg-price small { font-family: var(--sans); font-style: normal; font-size: 0.8rem; color: var(--ink-faint); font-weight: 400; }
.pkg ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pkg ul li { position: relative; padding-left: 22px; font-size: 0.92rem; color: var(--ink-soft); }
.pkg ul li::before {
  content: "";
  position: absolute; left: 2px; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}
.pkg ul li.no::before { background: var(--line-strong); }
.pkg ul li.no { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.pkg .btn { margin-top: 22px; width: 100%; }
.pkg-fineprint { margin-top: 18px; font-size: 0.82rem; color: var(--ink-faint); text-align: center; }

/* ============================================================
   PROCESS TIMELINE (yontem)
   ============================================================ */
.timeline { position: relative; margin-top: clamp(30px, 5vw, 56px); }
.tl-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 3vw, 40px);
  padding: clamp(26px, 4vw, 44px) 0;
  border-top: 1px solid var(--line);
  align-items: center;
}
@media (min-width: 820px) {
  .tl-item { grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr); }
  .tl-item.flip .tl-media { order: -1; }
}
.tl-step {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  color: var(--accent2-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tl-txt h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.tl-txt .when {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 10px;
}
.tl-media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface-3);
  border: 1px solid var(--line);
}
.tl-media img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   GARDEN PANEL (bahce) — overlap editorial
   ============================================================ */
.pano {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}
@media (min-width: 940px) { .pano { grid-template-columns: 1.35fr 1fr; } }
.pano-figure {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 16 / 10;
  background: var(--surface-3);
}
.pano-figure img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.pano-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(24px, 3.5vw, 38px);
}
@media (min-width: 940px) {
  .pano-card { margin-left: -80px; z-index: 2; box-shadow: 0 40px 90px -60px rgba(58,52,44,0.8); }
}
.pano-card h3 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }

/* ============================================================
   TESTIMONIALS — editorial grid
   ============================================================ */
.quotes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: clamp(26px, 4vw, 44px);
}
@media (min-width: 720px) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quote {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
}
.quote.tall { grid-row: span 1; }
@media (min-width: 1020px) { .quote:nth-child(1) { grid-row: span 2; } }
.quote .mark { font-family: var(--serif); font-style: italic; font-size: 2.6rem; color: var(--accent2); line-height: 0.5; height: 0.5em; }
.quote p { font-size: 1.02rem; color: var(--ink); margin: 14px 0 0; }
.quote .who {
  margin-top: auto;
  padding-top: 18px;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.quote .who b { display: block; color: var(--ink); font-weight: 600; font-size: 0.95rem; }

/* ============================================================
   NOTES (son eklenenler)
   ============================================================ */
.notes { display: grid; gap: 2px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 20px;
  padding: 18px 22px;
  background: var(--surface);
  align-items: baseline;
}
.slab-tint .note { background: var(--bg); }
.note time {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.note p { margin: 0; font-size: 0.98rem; }
@media (max-width: 560px) { .note { grid-template-columns: 1fr; } }

/* ============================================================
   CONTACT (iletisim) — cards + form
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
}
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; } }

.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.channel {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  background: var(--surface);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.channel:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -30px rgba(58,52,44,0.7); border-color: var(--line-strong); }
.channel .ch-badge {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(14,124,107,0.12);
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  margin-bottom: 12px;
}
.channel h3 { font-size: 1.1rem; font-style: normal; font-family: var(--sans); font-weight: 600; margin-bottom: 4px; }
.channel a, .channel .val { color: var(--ink); font-weight: 600; word-break: break-word; }
.channel a:hover { color: var(--accent-text); }
.channel .sub { display: block; font-size: 0.82rem; color: var(--ink-faint); margin-top: 4px; font-weight: 400; }

.hours { margin-top: 22px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.hours .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.hours .row:last-child { border-bottom: 0; }
.hours .row.today { background: rgba(14,124,107,0.07); }
.hours .row .d { font-weight: 600; }
.hours .row .h { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* form */
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(22px, 3.5vw, 38px);
}
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 620px) { .form-grid .half { grid-column: span 1; } .form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.field .req { color: var(--accent2-text); }
.field input, .field select, .field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color 200ms ease, box-shadow 200ms 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(14,124,107,0.16);
}
.field.kvkk {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}
.field.kvkk label { font-weight: 400; font-size: 0.86rem; color: var(--ink-soft); line-height: 1.5; }
.field input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: auto;
  width: 18px; height: 18px;
  min-width: 18px; min-height: 18px;
  padding: 0; border: 0; margin: 3px 0 0;
  accent-color: var(--accent);
}
.form-card .btn { margin-top: 6px; width: 100%; }
@media (min-width: 620px) { .form-card .btn { width: auto; } }
.form-hint { font-size: 0.82rem; color: var(--ink-faint); margin-top: 14px; }

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

/* ============================================================
   FAQ (pure CSS accordion)
   ============================================================ */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px clamp(6px, 2vw, 12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--accent-text);
  transition: transform 300ms cubic-bezier(.4,0,.2,1);
  flex: none;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item > .answer {
  height: 0;
  padding: 0 clamp(6px, 2vw, 12px);
  overflow: hidden;
  transition: height 360ms cubic-bezier(.4,0,.2,1), padding-block-end 360ms cubic-bezier(.4,0,.2,1);
}
.faq-item[open] > .answer { height: auto; padding-block-end: 22px; }
.faq-item > .answer p { color: var(--ink-soft); margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .faq-item > .answer { transition: none; }
  .faq-item summary::after { transition: none; }
}

/* ============================================================
   DOC PAGES (policies)
   ============================================================ */
.doc { max-width: 760px; }
.doc h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-top: 1.8em; }
.doc h3 { font-size: 1.2rem; margin-top: 1.4em; font-style: italic; }
.doc p, .doc li { color: var(--ink-soft); line-height: 1.75; }
.doc ul, .doc ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.doc li { margin-bottom: 0.5em; }
.doc .updated { font-size: 0.86rem; color: var(--ink-faint); }

.page-hero { padding: clamp(30px, 6vw, 66px) 0 clamp(18px, 3vw, 30px); }
.page-hero h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }

/* thank-you / 404 */
.center-pane {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: clamp(40px, 8vw, 90px) 0;
}
.center-pane .eyebrow { justify-content: center; }
.center-pane h1 { font-size: clamp(2.4rem, 7vw, 4rem); }
.center-pane p { max-width: 520px; color: var(--ink-soft); font-size: 1.1rem; }
.center-pane .btn { margin-top: 18px; }

/* sitemap page */
.sitemap-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; }
.sitemap-cols h2 { font-size: 1.2rem; }
.sitemap-cols ul { list-style: none; padding: 0; margin: 10px 0 0; }
.sitemap-cols li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.sitemap-cols a { color: var(--ink); font-weight: 600; }
.sitemap-cols a:hover { color: var(--accent-text); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: #CFC6B7;
  padding: clamp(48px, 6vw, 78px) 0 30px;
  margin-top: clamp(40px, 6vw, 80px);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
}
@media (min-width: 760px) { .footer-top { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer-brand .brand { color: #FBF8F3; font-size: 1.5rem; }
.footer-brand .brand b { color: #E4C58A; }
.footer-brand p { margin-top: 14px; max-width: 360px; color: #B7AE9F; font-size: 0.94rem; }
.footer-col h4 {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #E4C58A;
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: #CFC6B7; font-size: 0.94rem; }
.footer-col a:hover { color: #FBF8F3; }
.footer-col address { font-style: normal; color: #B7AE9F; font-size: 0.94rem; line-height: 1.7; }
.footer-col address a { color: #CFC6B7; }
.footer-bottom {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: #B7AE9F;
}
.footer-legal a { color: #B7AE9F; display: inline; margin-right: 16px; }
.footer-legal a:hover { color: #E4C58A; }
.footer-reg { 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;
  padding: 20px 22px;
  box-shadow: 0 30px 70px -30px rgba(28,24,18,0.6);
  transform: translateY(140%);
  opacity: 0;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), opacity 240ms ease;
  z-index: 9999;
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
@media (min-width: 720px) { .cookie-banner { left: 24px; right: auto; max-width: 420px; } }
.cookie-banner h2 { font-size: 1.15rem; margin-bottom: 6px; }
.cookie-banner p { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 14px; }
.cookie-banner p a { color: var(--accent-text); text-decoration: underline; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-actions button {
  flex: 1 1 auto;
  min-height: 44px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.88rem;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.cookie-actions button[data-consent="accept"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.cookie-actions button[data-consent="accept"]:hover { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.cookie-actions button[data-consent="reject"]:hover,
.cookie-actions button[data-consent="settings"]:hover { border-color: var(--ink); background: var(--surface-2); }

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

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero h1 .ln > span { animation: none !important; transform: none !important; }
  .cfg-zone.is-wiping .cfg-wipe,
  .work.is-in .work-media .raw { animation: none !important; transform: translateX(103%) !important; }
  .hero-figure img { transform: none !important; }
  * { scroll-behavior: auto !important; }
}

/* count-up numbers reserve width */
[data-count] { font-variant-numeric: tabular-nums; }

/* long links / e-mails never overflow their container */
.footer-col address a, .doc a, .channel a, .cookie-banner p a { overflow-wrap: anywhere; word-break: break-word; }

/* ============================================================
   RESPONSIVE FINE-TUNE
   ============================================================ */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .cfg-choices { grid-template-columns: 1fr; }
  .channels { grid-template-columns: 1fr; }
  .hero-figure { aspect-ratio: 4 / 5; max-height: none; }
  .pano-card { margin-left: 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 400px) {
  .stat-row { grid-template-columns: 1fr; }
}

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

/* ############################################################
   GLAZED ÇİNİ — İznik ceramic-glaze rebuild (appended, wins by order)
   Warm turquoise sır + gold/coral · single-usta atelier
   ############################################################ */
:root{ --radius:4px; --accent-deep:#0A4237; --turq:#0E7C6B; --gold:#B8863B; --gold-text:#8A6221;
  --line-teal:rgba(14,124,107,.26); --ease:cubic-bezier(.2,.7,.2,1); }

/* ---------- GLAZE SIGNATURE: wet specular gloss (pointer) + scroll sheen ---------- */
.glaze{position:relative;isolation:isolate}
.glaze::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.10) 50%,transparent 58%);
  background-size:280% 100%;background-position:var(--sheen,0%) 0;mix-blend-mode:screen}
.glaze::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(58% 52% at var(--mx,50%) var(--my,-12%),rgba(255,255,255,.30),rgba(255,255,255,0) 62%);
  mix-blend-mode:soft-light;transition:background .16s linear}
.band-turkuaz.glaze::after,.tilewall.glaze::after,.frame.glaze::after,.btn-glaze::after,.calc-console.glaze::after{
  background:radial-gradient(56% 48% at var(--mx,50%) var(--my,-12%),rgba(190,238,222,.55),rgba(255,255,255,0) 60%);
  mix-blend-mode:screen}
.glaze > .container,.cta-inner,.tilewall-inner{position:relative;z-index:3}
@media (prefers-reduced-motion:reduce){.glaze::before,.glaze::after{transition:none}}

/* ---------- TURQUOISE GLAZE BAND (deep İznik sır surface) ---------- */
.band-turkuaz{color:#ECF6F1;overflow:hidden;background-color:#072a24;
  background-image:linear-gradient(rgba(7,42,35,.80),rgba(5,32,27,.87)),url('../images/sir-turkuaz.jpg');
  background-size:cover;background-position:center}
.band-turkuaz .eyebrow,.band-turkuaz .eyebrow.engrave{color:#86D0BE}
.band-turkuaz .eyebrow::before{background:linear-gradient(90deg,var(--gold),transparent)}
.band-turkuaz .section-head h2,.band-turkuaz h2,.band-turkuaz h3{color:#fff}
.band-turkuaz .lead{color:#C7E1D8}
.on-dark{color:#fff}
.engrave{text-shadow:0 1px 0 rgba(0,0,0,.5),0 -1px 0 rgba(255,255,255,.05)}

/* ---------- SEAM: authentic İznik motif border as section divider ---------- */
.seam{height:clamp(48px,7vw,78px);background-color:#efe7d7;
  background-image:url('../images/bordur-lale.jpg');background-size:auto 118%;
  background-position:center;background-repeat:repeat-x;border-block:1px solid var(--line-teal)}
.seam-top{position:absolute;top:0;left:0;right:0;z-index:5}
.seam-bottom{position:absolute;bottom:0;left:0;right:0;z-index:5}

/* ---------- GLAZED-TILE FRAME (thin teal frame + gloss) ---------- */
.frame{position:relative;overflow:hidden;border-radius:var(--radius);--mx:50%;--my:40%;
  box-shadow:0 28px 56px -30px rgba(7,42,35,.6),
    inset 0 0 0 3px rgba(14,124,107,.62),inset 0 0 0 4px rgba(255,255,255,.18),inset 0 0 0 5px rgba(7,42,35,.22)}
.frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.frame-cap{position:absolute;left:12px;bottom:12px;z-index:6;background:rgba(7,42,35,.86);color:#fff;
  font-size:.72rem;font-weight:500;letter-spacing:.03em;padding:7px 12px;border-radius:2px;backdrop-filter:blur(3px)}
.frame-tag{position:absolute;top:12px;left:12px;z-index:6;background:var(--gold-text);color:#fff;
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:2px}

/* ---------- HERO ---------- */
.hero{position:relative;display:flex;align-items:center;min-height:86vh;overflow:hidden;
  padding-block:calc(clamp(48px,7vw,78px) + clamp(26px,4vw,52px))}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,5vw,64px);align-items:center;width:100%}
.hero-lockup{min-width:0}
.hero .eyebrow{margin-bottom:18px}
.hero-h1{font-family:var(--serif);font-style:italic;font-weight:600;color:#fff;
  font-size:clamp(2.8rem,7.6vw,5.6rem);line-height:1.04;letter-spacing:-.02em;margin:0;
  text-shadow:0 2px 0 rgba(0,0,0,.3),0 26px 54px rgba(0,0,0,.42)}
.hero-h1 .w{display:inline-block;opacity:0;transform:translateY(26px);animation:heroLine .8s var(--ease) forwards}
.hero-h1 .hl{color:#8FE0CC;font-style:italic}
.hero-sub{margin-top:24px;font-size:clamp(1.06rem,1.7vw,1.28rem);line-height:1.62;color:#CFE6DE;max-width:46ch}
.hero-cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px}
.hero-trust{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px 8px;list-style:none;padding:0}
.trust-pill{font-size:.78rem;font-weight:500;color:#DCEFE8;background:rgba(255,255,255,.07);
  border:1px solid rgba(134,208,190,.36);padding:7px 13px;border-radius:100px;display:inline-flex;align-items:center;gap:7px}
.trust-pill::before{content:"";width:6px;height:6px;background:var(--gold);border-radius:50%;flex:none}
.hero-photo{position:relative;justify-self:center;width:100%;max-width:440px}
.frame-tall img{aspect-ratio:4/5}
@keyframes heroLine{to{opacity:1;transform:none}}

/* ---------- EDITORIAL INTRO (heritage) ---------- */
.intro{background:var(--bg)}
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center}
.intro-copy p{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.74;color:var(--ink)}
.intro-copy p:first-of-type{margin-top:22px}
.dropcap{float:left;font-family:var(--serif);font-style:italic;font-weight:600;color:var(--accent-text);
  font-size:clamp(3.4rem,7vw,4.8rem);line-height:.8;margin:.06em .12em -.04em 0}
.intro-sign{margin-top:24px;font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.2rem;color:var(--ink)}
.intro-sign small{display:block;font-family:var(--sans);font-style:normal;font-weight:600;font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:5px}
.intro-photo img{aspect-ratio:5/6}

/* ---------- PANOLAR GALLERY (uniform glazed-tile grid) ---------- */
.panolar{background:var(--surface)}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,32px);margin-top:44px}
.gcard{display:flex;flex-direction:column}
.gallery .frame img{aspect-ratio:4/5}
.gcard:hover .frame img{transform:scale(1.05)}
.gcard-body{padding:18px 2px 0;display:flex;flex-direction:column;flex:1}
.gcard-body h3{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(1.35rem,2vw,1.62rem);
  line-height:1.14;color:var(--ink);margin-bottom:8px}
.gcard-body p{font-size:.92rem;color:var(--ink-soft);margin-bottom:14px}
.gprice{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:14px;border-top:1px solid var(--line)}
.gprice .amt{font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.2rem;color:var(--accent-text)}
.gprice small{font-size:.78rem;color:var(--ink-faint)}

/* ---------- TILED-WALL BAND ---------- */
.tilewall{position:relative;overflow:hidden;min-height:clamp(240px,34vw,420px);display:flex;align-items:center;
  background:url('../images/karo-grid.jpg') center/cover;border-block:1px solid var(--line-teal)}
.tilewall-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(6,36,31,.86),rgba(6,36,31,.36) 58%,rgba(6,36,31,.74))}
.tilewall-inner{position:relative}
.tilewall-line{font-family:var(--serif);font-style:italic;font-weight:600;color:#fff;
  font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.24;max-width:26ch;margin:0;text-shadow:0 2px 26px rgba(0,0,0,.6)}

/* ---------- ATÖLYE (personal / heritage, glaze band) ---------- */
.atolye-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,60px);align-items:center}
.atolye-copy p{color:#C7E1D8;font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.72}
.pullquote{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(1.3rem,2.5vw,1.95rem);
  line-height:1.3;color:#fff;margin:26px 0;padding-left:22px;border-left:3px solid var(--gold)}
.pullquote .hl{color:#8FE0CC}
.pullquote cite{display:block;font-family:var(--sans);font-style:normal;font-weight:600;font-size:.9rem;
  color:#86D0BE;letter-spacing:.03em;margin-top:16px}
.atolye-media{display:grid;gap:clamp(14px,2vw,20px)}
.atolye-photo-a img{aspect-ratio:16/10}
.atolye-photo-b img{aspect-ratio:16/9}

/* ---------- CONFIGURATOR restyled as glaze console ---------- */
.tasarla{background:var(--surface-2)}
.tasarla .cfg-photo{aspect-ratio:4/3}
.band-turkuaz .cfg-panel{background:rgba(255,255,255,.06);border:1px solid rgba(134,208,190,.28);color:#ECF6F1;
  backdrop-filter:blur(2px)}
.band-turkuaz .cfg-panel label,.band-turkuaz .cfg-panel legend,.band-turkuaz .cfg-field > label,
.band-turkuaz .cfg-field legend{color:#ECF6F1}
.band-turkuaz .cfg-field output{color:#8FE0CC}
.band-turkuaz .cfg-choice{border-color:rgba(134,208,190,.32);color:#ECF6F1}
.band-turkuaz .cfg-choice .cc-meta{color:#9FC6BB}
.band-turkuaz .cfg-choice:has(input:checked){border-color:#8FE0CC;background:rgba(143,224,204,.16)}
.band-turkuaz .cfg-out{border-top-color:rgba(134,208,190,.24)}
.band-turkuaz .cfg-out dt{color:#C7E1D8}
.band-turkuaz .cfg-out dd{color:#fff}
.band-turkuaz .cfg-total{border-color:rgba(134,208,190,.3)}
.band-turkuaz .cfg-total .t-lbl{color:#fff}
.band-turkuaz .cfg-total .t-val{color:#8FE0CC}
.band-turkuaz .cfg-note{color:#A6CABF}
.band-turkuaz .cfg-warn{color:#F2D9A6;background:rgba(184,134,59,.16)}
.band-turkuaz .cfg-caption{background:rgba(7,42,35,.86);color:#fff}
.tasarla .config{position:relative;z-index:3}

/* ---------- FİYATLAR (elegant list beside panel) ---------- */
.fiyatlar{background:var(--bg)}
.price-grid2{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(28px,4vw,64px);align-items:center}
.price-photo img{aspect-ratio:4/5}
.price-list-wrap .price-intro{color:var(--ink-soft);margin:14px 0 6px;max-width:52ch}
.price-list{margin:18px 0 26px;border-top:1px solid var(--line-strong)}
.price-row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:17px 0;border-bottom:1px solid var(--line)}
.price-row dt{font-weight:600;color:var(--ink);font-size:1.02rem;min-width:0}
.price-row dt span{display:block;font-weight:400;font-size:.85rem;color:var(--ink-soft);margin-top:3px}
.price-row dd{margin:0;font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(1.25rem,2vw,1.5rem);
  color:var(--accent-text);white-space:nowrap;font-variant-numeric:tabular-nums}
.price-cta{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- CTA BAND ---------- */
.cta-band{position:relative;overflow:hidden;padding-block:calc(clamp(66px,10vw,116px) + clamp(26px,4vw,52px));text-align:center}
.cta-inner{max-width:58ch;margin-inline:auto}
.cta-inner .eyebrow{justify-content:center;margin-bottom:16px}
.cta-title{font-family:var(--serif);font-style:italic;font-weight:600;color:#fff;
  font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.12;margin-bottom:16px;text-shadow:0 2px 30px rgba(0,0,0,.42)}
.cta-band p{color:#CFE6DE;margin-bottom:28px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- BUTTONS: glaze variants ---------- */
.btn-glaze{position:relative;overflow:hidden;color:#fff;border-color:transparent;--mx:50%;--my:-12%;
  background-color:#0E7C6B;background-image:linear-gradient(180deg,#149a84,#0a5245);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 12px 26px -14px rgba(7,42,35,.8)}
.btn-glaze::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 65% at var(--mx) var(--my),rgba(255,255,255,.5),rgba(255,255,255,0) 60%);
  mix-blend-mode:screen;transition:background .16s linear}
.btn-glaze > *{position:relative;z-index:2}
.btn-glaze:hover,.btn-glaze:focus-visible{color:#fff;transform:translateY(-2px);
  background-image:linear-gradient(180deg,#1cae95,#0E7C6B);box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 18px 34px -16px rgba(14,124,107,.9)}
.btn-glaze:active{transform:translateY(0)}
.btn-ghost-glaze{background:rgba(255,255,255,.06);color:#ECF6F1;border:1.5px solid rgba(134,208,190,.5)}
.btn-ghost-glaze:hover,.btn-ghost-glaze:focus-visible{background:rgba(255,255,255,.14);color:#fff;border-color:#fff;transform:translateY(-2px)}
.nav-cta.btn-glaze{color:#fff !important}
.drawer .drawer-cta.btn-glaze{color:#fff}

/* ---------- SUB-PAGE glaze skin (page-hero motif seam + krem sır) ---------- */
.page-hero{position:relative;background-color:var(--surface);
  background-image:linear-gradient(rgba(251,248,243,.84),rgba(251,248,243,.9)),url('../images/sir-krem.jpg');
  background-size:cover;background-position:center;overflow:hidden;
  /* clear the bordür seam (::before) so multi-line lead text never overlaps it */
  padding-bottom:calc(clamp(42px,6vw,64px) + clamp(20px,3vw,30px))}
.page-hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(42px,6vw,64px);z-index:2;
  background-color:#efe7d7;background-image:url('../images/bordur-lale.jpg');background-size:auto 118%;
  background-position:center;background-repeat:repeat-x;border-top:1px solid var(--line-teal)}
.page-hero > .container{position:relative;z-index:3}
.form-card,.channel{border-color:var(--line-teal)}

/* ---------- RESPONSIVE (glaze components; appended, wins) ---------- */
@media (max-width:1024px){
  .hero{min-height:auto;padding-block:calc(clamp(48px,7vw,78px) + 26px)}
  .hero-grid,.intro-grid,.atolye-grid,.price-grid2{grid-template-columns:1fr;gap:34px}
  .hero-photo{order:-1;margin-inline:auto}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .price-photo{max-width:420px;margin-inline:auto}
}
@media (max-width:640px){
  .gallery{grid-template-columns:1fr;gap:26px}
  .hero-h1{font-size:clamp(2.5rem,12vw,3.9rem)}
  .price-row{flex-direction:column;gap:6px}
  .price-row dd{align-self:flex-start}
  .atolye-media{grid-template-columns:1fr}
}

/* ############################################################
   ATOLYE GUNLUGU — first-person vertical story rebuild (index)
   Appended last: wins by order. Scoped to .d* classes so the
   shared components (sub-pages) are untouched. Keeps glaze
   signature (.glaze / .frame / seam / bordur) + turquoise sir.
   ############################################################ */

/* visible drawer close X (all pages) */
.drawer-close{
  position:absolute; top:calc(var(--header-h) + 10px); right:20px; z-index:6;
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:12px;
  font-family:var(--sans); font-size:1.6rem; line-height:1; cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.drawer-close:hover,.drawer-close:focus-visible{ background:var(--accent); border-color:var(--accent); color:#fff; transform:rotate(90deg); }
/* make room for the close-X row above the nav */
.drawer{ padding-top:calc(var(--header-h) + 66px); }

/* full-bleed helper */
.bleed{ width:100vw; margin-inline:calc(50% - 50vw); }

/* ---------- 1 : IMMERSIVE FULL-BLEED HERO (usta's hands) ---------- */
.diary-hero{
  position:relative; margin-top:calc(var(--header-h) * -1);
  min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; background:#062019; isolation:isolate;
}
.diary-hero .dh-img{ position:absolute; inset:0; z-index:0; }
.diary-hero .dh-img img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; transform:scale(1.05); will-change:transform; }
.diary-hero .dh-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(0deg, rgba(4,20,16,.94) 2%, rgba(5,26,21,.62) 34%, rgba(6,30,24,.20) 62%, rgba(6,30,24,.42) 100%),
    linear-gradient(90deg, rgba(4,20,16,.6), rgba(4,20,16,0) 60%); }
.diary-hero .glaze-node{ z-index:2; }
.dh-inner{ position:relative; z-index:3; width:100%; padding-block:clamp(40px,7vw,84px) clamp(46px,7vw,90px); }
.dh-kicker{ display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-weight:600; font-size:.74rem; letter-spacing:.26em; text-transform:uppercase;
  color:#8FE0CC; margin:0 0 22px; }
.dh-kicker::before{ content:""; width:30px; height:2px; background:linear-gradient(90deg,var(--gold),transparent); }
.dh-title{ font-family:var(--serif); font-style:italic; font-weight:600; color:#fff;
  font-size:clamp(2.5rem,6.4vw,5rem); line-height:1.06; letter-spacing:-.02em; margin:0; max-width:17ch;
  text-shadow:0 2px 0 rgba(0,0,0,.35), 0 30px 60px rgba(0,0,0,.5); }
.dh-title .ink{ color:#8FE0CC; }
.dh-sub{ margin:24px 0 0; max-width:52ch; color:#DCEFE8; font-size:clamp(1.05rem,1.7vw,1.28rem); line-height:1.62; }
.dh-sign{ margin-top:26px; font-family:var(--serif); font-style:italic; font-weight:600; color:#fff; font-size:1.25rem; }
.dh-sign small{ display:block; font-family:var(--sans); font-style:normal; font-weight:600; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:#86D0BE; margin-top:5px; }
.dh-cue{ margin-top:30px; display:inline-flex; align-items:center; gap:.7ch;
  color:#DCEFE8; font-weight:600; font-size:.9rem; border-bottom:1px solid rgba(143,224,204,.5); padding-bottom:4px; }
.dh-cue .dn{ display:inline-block; animation:cueBob 1.9s var(--ease) infinite; }
@keyframes cueBob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }
@media (prefers-reduced-motion:reduce){ .dh-cue .dn{animation:none} .diary-hero .dh-img img{transform:none} }

/* ---------- 2 : STORY OPENER ---------- */
.story-open{ background:var(--bg); padding:clamp(56px,8vw,104px) 0 clamp(10px,2vw,24px); }
.story-open .so-inner{ max-width:40ch; }
.so-mark{ font-family:var(--serif); font-style:italic; font-weight:600; color:var(--gold-text);
  font-size:clamp(.9rem,2vw,1rem); letter-spacing:.02em; text-transform:uppercase; margin:0 0 14px; display:block; }
.so-line{ font-family:var(--serif); font-style:italic; font-weight:500; color:var(--ink);
  font-size:clamp(1.7rem,4.4vw,2.9rem); line-height:1.24; margin:0; }
.so-line em{ color:var(--accent-text); font-style:italic; }

/* ---------- 3 : THE MAKING — vertical chapter rail ---------- */
.making{ background:var(--bg); padding:clamp(30px,5vw,60px) 0 clamp(56px,9vw,110px); }
.chapters{ position:relative; }
.chapter{ position:relative; display:grid; grid-template-columns:1fr; gap:clamp(22px,3.5vw,44px);
  padding:clamp(34px,5vw,62px) 0; border-top:1px solid var(--line-teal); align-items:center; }
.chapter:first-child{ border-top:0; }
@media (min-width:860px){
  .chapter{ grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(34px,4vw,66px); }
  .chapter.flip .ch-media{ order:2; }
}
.ch-media{ position:relative; }
.ch-media .frame img{ aspect-ratio:5/4; }
.chapter.tall .ch-media .frame img{ aspect-ratio:4/5; }
.ch-copy{ position:relative; }
.ch-index{ display:flex; align-items:baseline; gap:12px; margin-bottom:6px; }
.ch-index .no{ font-family:var(--serif); font-style:italic; font-weight:600; color:var(--accent);
  font-size:clamp(2.4rem,6vw,3.8rem); line-height:.8; font-variant-numeric:tabular-nums; }
.ch-index .of{ font-family:var(--sans); font-weight:600; font-size:.74rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-text); }
.ch-step{ font-family:var(--serif); font-style:italic; font-weight:600; color:var(--ink);
  font-size:clamp(1.6rem,3.4vw,2.3rem); line-height:1.16; margin:2px 0 12px; }
.ch-body{ color:var(--ink); font-size:clamp(1.02rem,1.3vw,1.14rem); line-height:1.74; margin:0 0 14px; }
.ch-body strong{ color:var(--accent-text); }
/* handwritten-feel penned caption (Newsreader italic + teal margin mark) */
.penned{ position:relative; margin:0; padding-left:20px;
  font-family:var(--serif); font-style:italic; font-weight:500; color:var(--ink-soft);
  font-size:clamp(1.02rem,1.6vw,1.18rem); line-height:1.5; }
.penned::before{ content:""; position:absolute; left:0; top:.5em; width:3px; height:calc(100% - .7em);
  background:linear-gradient(180deg,var(--accent),var(--gold)); border-radius:3px; }
.ch-media .penned{ margin-top:14px; padding-left:0; }
.ch-media .penned::before{ display:none; }
.ch-tag{ position:absolute; top:12px; left:12px; z-index:6; background:var(--accent-deep); color:#fff;
  font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:6px 11px; border-radius:2px; }

/* master's voice — interleaved quotes */
.dvoice{ background:var(--bg); padding:clamp(30px,5vw,56px) 0; }
.dvoice .container{ max-width:840px; }
.dvoice blockquote{ margin:0; font-family:var(--serif); font-style:italic; font-weight:500; color:var(--ink);
  font-size:clamp(1.5rem,3.6vw,2.5rem); line-height:1.3; padding-left:clamp(18px,3vw,30px);
  border-left:3px solid var(--gold); }
.dvoice blockquote .hl{ color:var(--accent-text); }
.dvoice cite{ display:block; margin-top:18px; font-family:var(--sans); font-style:normal; font-weight:600;
  font-size:.88rem; letter-spacing:.03em; color:var(--gold-text); }

/* ---------- 4 : PORTRAIT interlude (personal / heritage) ---------- */
.dportrait{ background:var(--surface); padding:clamp(58px,9vw,116px) 0; border-block:1px solid var(--line); }
.dportrait-grid{ display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,60px); align-items:center; }
@media (min-width:900px){ .dportrait-grid{ grid-template-columns:.82fr 1.18fr; } }
.dportrait-photo .frame img{ aspect-ratio:4/5; }
.dportrait-copy .so-mark{ margin-bottom:16px; }
.dportrait-copy h2{ font-size:clamp(2rem,4.2vw,3rem); margin:0 0 .5em; }
.dportrait-copy p{ font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.74; color:var(--ink); }
.dportrait-copy p .dropcap{ float:left; font-family:var(--serif); font-style:italic; font-weight:600;
  color:var(--accent-text); font-size:clamp(3.4rem,7vw,4.6rem); line-height:.78; margin:.06em .14em -.04em 0; }
.dsign{ margin-top:26px; display:flex; align-items:center; gap:16px; }
.dsign .sig{ font-family:var(--serif); font-style:italic; font-weight:600; font-size:1.6rem; color:var(--accent-text); }
.dsign .sig small{ display:block; font-family:var(--sans); font-style:normal; font-weight:600; font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }

/* ---------- 5 : PLACES I HAVE TILED — woven scenes (not a grid) ---------- */
.dplaces{ background:var(--bg); padding:clamp(58px,9vw,116px) 0; }
.dplaces .so-inner{ max-width:44ch; margin-bottom:clamp(30px,5vw,56px); }
.scene{ position:relative; display:grid; grid-template-columns:1fr; gap:0;
  margin-bottom:clamp(30px,5vw,60px); }
.scene:last-child{ margin-bottom:0; }
.scene-photo .frame img{ aspect-ratio:16/11; }
.scene-note{ position:relative; z-index:2; background:var(--surface); border:1px solid var(--line-teal);
  border-radius:var(--radius); padding:clamp(20px,3vw,30px); box-shadow:0 34px 70px -50px rgba(7,42,35,.7);
  margin:-42px clamp(14px,4vw,40px) 0; }
@media (min-width:900px){
  .scene{ grid-template-columns:1.42fr 1fr; align-items:center; }
  .scene.flip .scene-photo{ order:2; }
  .scene-note{ margin:0; margin-inline:-70px 0; }
  .scene.flip .scene-note{ margin-inline:0 -70px; }
}
.scene-where{ display:inline-flex; align-items:center; gap:.6ch; font-family:var(--sans); font-weight:600;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-text); margin:0 0 10px; }
.scene-where::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.scene-note h3{ font-size:clamp(1.5rem,2.6vw,2rem); margin:0 0 .35em; }
.scene-note p{ color:var(--ink-soft); font-size:1rem; margin:0 0 12px; }
.scene-meta{ display:flex; flex-wrap:wrap; gap:6px 16px; padding-top:12px; border-top:1px solid var(--line);
  font-size:.86rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.scene-meta b{ color:var(--accent-text); font-weight:600; }

/* ---------- 6 : CONFIGURATOR wrap — kendi tezgah arani ciz ---------- */
.dtasarla{ position:relative; overflow:hidden; padding:clamp(58px,9vw,116px) 0;
  background-color:var(--bg); color:var(--ink);
  background-image:linear-gradient(rgba(251,248,243,.93),rgba(243,237,227,.96)), url('../images/karo-grid.jpg');
  background-size:300px; background-position:center; }
.dtasarla .seam-top{ position:absolute; top:0; left:0; right:0; z-index:5; }
.dtasarla .dt-head{ max-width:50ch; margin-bottom:clamp(28px,4vw,46px); position:relative; z-index:3; }
.dtasarla .dt-head .dh-kicker{ margin-bottom:16px; }
.dtasarla .dt-head h2{ color:var(--ink); font-size:clamp(2rem,4.6vw,3.1rem); margin:0 0 .4em; }
.dtasarla .dt-head p{ color:var(--ink-soft); font-size:clamp(1.06rem,1.6vw,1.24rem); line-height:1.6; }
.dtasarla .config{ position:relative; z-index:3; }
.dtasarla .cfg-photo{ aspect-ratio:4/3; }

/* ---------- 7 : NE KADAR — honest first-person ledger note ---------- */
.dledger{ background:var(--surface); padding:clamp(58px,9vw,116px) 0; border-top:1px solid var(--line); }
.dledger-grid{ display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,54px); align-items:start; }
@media (min-width:880px){ .dledger-grid{ grid-template-columns:.9fr 1.1fr; } }
.dledger-copy .so-mark{ margin-bottom:14px; }
.dledger-copy h2{ font-size:clamp(2rem,4.2vw,2.9rem); margin:0 0 .5em; }
.dledger-copy p{ color:var(--ink-soft); font-size:1.06rem; line-height:1.72; max-width:44ch; }
.ledger{ background:var(--bg); border:1px solid var(--line-teal); border-radius:var(--radius);
  padding:clamp(22px,3vw,34px); box-shadow:0 34px 70px -54px rgba(7,42,35,.7); }
.ledger-head{ font-family:var(--serif); font-style:italic; font-weight:600; color:var(--ink);
  font-size:1.3rem; margin:0 0 8px; }
.ledger-list{ margin:14px 0 0; border-top:1px solid var(--line-strong); }
.ledger-row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:15px 0; border-bottom:1px solid var(--line); }
.ledger-row dt{ font-weight:600; color:var(--ink); font-size:1rem; min-width:0; }
.ledger-row dt span{ display:block; font-weight:400; font-size:.84rem; color:var(--ink-soft); margin-top:3px; }
.ledger-row dd{ margin:0; font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:clamp(1.2rem,2vw,1.45rem); color:var(--accent-text); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ledger-note{ margin:16px 0 0; font-size:.86rem; color:var(--ink-faint); line-height:1.6; }
.ledger-cta{ margin-top:20px; display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- 8 : CLOSING (first-person invitation) ---------- */
.dclose{ position:relative; overflow:hidden; text-align:center;
  padding-block:calc(clamp(60px,9vw,110px) + clamp(26px,4vw,52px)); }
.dclose .seam-top{ position:absolute; top:0; left:0; right:0; z-index:5; }
.dclose .seam-bottom{ position:absolute; bottom:0; left:0; right:0; z-index:5; }
.dclose-inner{ position:relative; z-index:3; max-width:56ch; margin-inline:auto; }
.dclose .dh-kicker{ justify-content:center; margin-bottom:16px; }
.dclose h2{ font-family:var(--serif); font-style:italic; font-weight:600; color:#fff;
  font-size:clamp(2rem,4.8vw,3.3rem); line-height:1.12; margin:0 0 .4em; text-shadow:0 2px 30px rgba(0,0,0,.42); }
.dclose p{ color:#CFE6DE; margin:0 auto 12px; }
.dclose .dclose-sign{ margin:22px 0 26px; font-family:var(--serif); font-style:italic; font-weight:600; color:#8FE0CC; font-size:1.3rem; }
.dclose-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- responsive fine-tune (diary) ---------- */
@media (max-width:859px){
  .chapter.flip .ch-media{ order:-1; }
  .scene-note{ margin-top:-42px; }
}
@media (max-width:560px){
  .ledger-row{ flex-direction:column; gap:5px; }
  .ledger-row dd{ align-self:flex-start; }
  .scene-meta{ flex-direction:column; gap:5px; }
}


/* --- FIX2: single close = header hamburger-× (keep); drawer built-in × removed (per user) --- */
.drawer-close, .drawer-x{ display:none !important; }

/* ============================================================
   Configurator picker — visual mini-grid (thumb cards + swatch chips)
   Fixes the plain text boxes; makes Desen/Renk pickable "like mozaiktuval".
   ============================================================ */
.cfg-choices { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.cfg-choice { align-items: stretch; }

/* Desen = image-topped cards (see the actual pattern before you pick) */
.cfg-choice--desen { flex-direction: column; gap: 0; padding: 0; overflow: hidden; border-radius: 12px; }
.cfg-choice--desen .cc-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #0e211d; }
.cfg-choice--desen .cc-txt { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px 11px; }
.cfg-choice--desen:hover .cc-thumb { filter: brightness(1.04); }

/* Renk = compact swatch chips */
.cfg-choice--renk { flex-direction: row; align-items: center; gap: 11px; padding: 11px 13px; }
.cfg-choice--renk .cc-dot { width: 26px; height: 26px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 1px 3px rgba(0,0,0,.35); }
.cfg-choice--renk .cc-txt { min-width: 0; }
.cfg-choice--renk .cc-name { font-weight: 600; }

/* Selected tick badge */
.cfg-choice .cc-tick {
  position: absolute; top: 7px; right: 8px; width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700; line-height: 1;
  color: #072a23; background: #8FE0CC; box-shadow: 0 2px 6px rgba(0,0,0,.35);
  opacity: 0; transform: scale(.55); transition: opacity .18s ease, transform .18s ease;
}
.cfg-choice:has(input:checked) .cc-tick { opacity: 1; transform: scale(1); }

/* Stronger checked ring on the turquoise band */
.band-turkuaz .cfg-choice--desen:has(input:checked),
.band-turkuaz .cfg-choice--renk:has(input:checked) {
  border-color: #8FE0CC; box-shadow: inset 0 0 0 2px #8FE0CC; background: rgba(143,224,204,.10);
}

/* keep the grid 2-up on phones too (compact, not tall single boxes) */
@media (max-width: 640px) { .cfg-choices { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; } }