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

/* ============================================================
   Karesi Kare — Çini Mozaik Atölyesi
   Glazed-tile configurator studio
   ============================================================ */

/* ---- Fonts ---- */
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/clash-display-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: optional;
}

/* ---- Tokens ---- */
:root {
  --bg: #F4FBFA;
  --surface: #FFFFFF;
  --surface-2: #E8F5F3;
  --surface-3: #DDEFEC;
  --ink: #12333B;
  --ink-soft: #3B565D;
  --muted: #556B70;            /* ≥4.5:1 on --bg */
  --accent: #12A5A5;           /* fills / borders / decor */
  --accent-text: #0A6A6A;      /* darkened for text on light */
  --accent2: #E8B23A;          /* gold fills */
  --accent2-text: #8A6410;     /* gold text */
  --line: rgba(18,51,59,.13);
  --line-strong: rgba(18,51,59,.24);
  --ink-band: #0E2A31;

  /* çini glaze palette (tiles) */
  --g-turkuaz: #16A6A2;
  --g-mavi: #1B5E8C;
  --g-mercan: #BC4038;
  --g-yesil: #2E7D5B;
  --g-lacivert: #143D72;
  --g-altin: #E3A72C;
  --g-beyaz: #FBFBF6;
  --g-mor: #6C3B68;

  --font-head: 'Clash Display', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'General Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', 'SFMono-Regular', monospace;

  --header-h: 74px;
  --container: 1400px;
  --pad: clamp(16px, 4vw, 56px);
  --radius: 14px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease2: cubic-bezier(.4,0,.2,1);

  interpolate-size: allow-keywords;
}

/* ---- Reset ---- */
*, *::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 {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: clamp(15px, 1.05vw, 17px);
  -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(--font-head);
  font-weight: 600;
  line-height: 1.14;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}
p { margin: 0 0 1em; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-text); }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
::selection { background: var(--accent2); color: var(--ink); }

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

.skip-link {
  position: absolute; left: 12px; top: -60px;
  background: var(--ink); color: #fff; padding: 10px 16px;
  border-radius: 8px; z-index: 2000; transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---- Eyebrow / headings ---- */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  color: var(--accent-text);
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px;
  background: var(--accent2); display: inline-block;
}
.section { padding-block: clamp(56px, 8vw, 104px); position: relative; }
.section-head { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head h2 {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  letter-spacing: -0.02em;
}
.section-head p { color: var(--ink-soft); font-size: 1.05rem; margin-top: .7em; max-width: 58ch; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0;
  z-index: 1080;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(244, 251, 250, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background .24s var(--ease), box-shadow .24s var(--ease), height .24s var(--ease), border-color .24s var(--ease);
}
.site-header.scrolled {
  background: rgba(244,251,250,.98);
  box-shadow: 0 8px 24px -16px rgba(18,51,59,.4);
  border-bottom-color: var(--line);
  height: 64px;
}
.header-inner {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-head); font-weight: 600;
  font-size: 1.16rem; color: var(--ink); letter-spacing: -0.01em;
  line-height: 1;
}
.brand:hover { color: var(--ink); }
.brand-mark {
  width: 34px; height: 34px; flex: none;
  border-radius: 7px;
  background:
    linear-gradient(135deg, var(--accent) 0 50%, var(--accent2) 50% 100%);
  position: relative;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), 0 4px 10px -4px rgba(18,51,59,.5);
}
.brand-mark::after {
  content: ""; position: absolute; inset: 8px;
  border: 1.5px solid rgba(255,255,255,.85); border-radius: 3px;
  transform: rotate(45deg);
}
.brand small {
  display: block; font-family: var(--font-body); font-weight: 500;
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-text); margin-top: 3px;
}

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

.btn {
  --btn-pad: 13px 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: var(--btn-pad);
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  border-radius: 999px; border: 1.5px solid transparent;
  transition: background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  text-align: center; line-height: 1.1;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--accent); color: #fff; transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(18,165,165,.7);
}
.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-gold { background: var(--accent2); color: #3B2A05; }
.btn-gold:hover, .btn-gold:focus-visible {
  background: #f0c05a; color: #3B2A05; transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(232,178,58,.8);
}
.nav-cta { padding: 10px 20px; }
.nav-desktop .nav-cta { background: var(--ink); color: #fff; }
.nav-desktop .nav-cta:hover { background: var(--accent); color: #fff; }

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

/* ---- Drawer ---- */
.drawer-backdrop, .drawer-backdrop[hidden] {
  display: block;
  position: fixed; inset: 0; background: rgba(11,28,32,.55);
  opacity: 0; visibility: hidden; z-index: 1040;
  transition: opacity .24s var(--ease), visibility .24s var(--ease);
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.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);
  display: flex; flex-direction: column;
  padding: calc(var(--header-h) + 16px) 26px 32px;
  box-shadow: -20px 0 50px -30px rgba(18,51,59,.5);
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer a {
  display: block; padding: 15px 4px; font-family: var(--font-head);
  font-weight: 600; font-size: 1.3rem; color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.drawer a:hover, .drawer a.is-active { color: var(--accent-text); padding-left: 12px; }
.drawer .btn { margin-top: 24px; width: 100%; }
.drawer-tag {
  margin-top: auto; padding-top: 28px; color: var(--muted);
  font-size: .82rem; line-height: 1.7;
}

/* ============================================================
   MAIN / HERO — TOOL FIRST
   ============================================================ */
main { padding-top: var(--header-h); }
main section[id], [id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.hero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(244,251,250,.4), var(--bg) 78%),
    var(--surface-2);
  overflow: hidden;
  padding-block: clamp(28px, 4vw, 52px) clamp(40px, 6vw, 72px);
}
.hero::before {
  /* mozaik kılavuz ızgara decor */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(18,165,165,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,165,165,.07) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(120% 100% at 70% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 100% at 70% 0%, #000 30%, transparent 75%);
}
.hero-top {
  position: relative; z-index: 2;
  max-width: 760px; margin-bottom: clamp(24px, 3.5vw, 40px);
}
.hero-top h1 {
  font-size: clamp(2.5rem, 6.6vw, 4.5rem);
  letter-spacing: -0.025em; line-height: 1.02;
  margin-top: .1em;
}
.hero-top h1 .g {
  color: var(--accent-text);
  position: relative; display: inline-block;
}
.hero-top h1 .g::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em;
  height: .16em; background: var(--accent2); opacity: .5; z-index: -1;
  transform: scaleX(0); transform-origin: left; animation: draw-underline .9s .5s var(--ease) forwards;
}
@keyframes draw-underline { to { transform: scaleX(1); } }
.hero-top .sub {
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  color: var(--ink-soft); max-width: 56ch; margin-top: 1.1em;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.7em; }
.trust-strip {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 1.9em;
  font-size: .84rem; color: var(--muted); font-weight: 500;
}
.trust-strip span { display: inline-flex; align-items: center; gap: 8px; }
.trust-strip span::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: var(--accent); transform: rotate(45deg);
}

/* ============================================================
   CONFIGURATOR / TUVAL
   ============================================================ */
.studio {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(18px, 2.4vw, 30px);
  align-items: start;
}
@media (max-width: 1080px) { .studio { grid-template-columns: 1fr; } }

.canvas-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(12px, 1.6vw, 20px);
  box-shadow: 0 30px 60px -40px rgba(18,51,59,.45);
  min-width: 0;
}
.canvas-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-bottom: 14px;
}
.active-swatch {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 7px 14px 7px 8px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface-2);
  font-weight: 500; font-size: .9rem;
}
.active-swatch .chip {
  width: 26px; height: 26px; border-radius: 6px; flex: none;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4);
}
.tool-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); font-weight: 500; font-size: .86rem;
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease), transform .12s var(--ease);
}
.tool-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--ink); }
.tool-btn:active:not(:disabled) { transform: translateY(1px); }
.tool-btn:disabled { opacity: .4; cursor: not-allowed; }
.tool-btn.is-eraser[aria-pressed="true"] {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.tool-spacer { flex: 1 1 auto; }

/* wall + grid */
.canvas-stage {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 30% 0%, #dbe6e2, transparent 60%),
    linear-gradient(160deg, #d3e0dc 0%, #c2d2ce 55%, #b4c7c2 100%);
  aspect-ratio: 4 / 3;
  --mx: 50%; --my: 40%;
}
.canvas-stage::before {
  /* tone scrim for tile readability */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(14,42,49,.18), rgba(14,42,49,.34));
}
.canvas-stage::after {
  /* signature glaze sheen following cursor */
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(220px 220px at var(--mx) var(--my), rgba(255,255,255,.28), transparent 60%);
  mix-blend-mode: screen; opacity: 0; transition: opacity .3s var(--ease);
}
.canvas-stage.sheen-on::after { opacity: 1; }

.tile-grid {
  position: absolute; inset: 5%; z-index: 3;
  display: grid; gap: 3px;
  border-radius: 4px;
}
.cell {
  position: relative;
  border-radius: 3px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
  overflow: hidden;
  /* stagger-in */
  opacity: 0; transform: scale(.4);
  animation: cell-in .32s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 9ms);
}
@keyframes cell-in { to { opacity: 1; transform: scale(1); } }
.cell.is-empty {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 4px, transparent 4px 8px);
}
.cell:hover { box-shadow: inset 0 0 0 2px var(--accent2); z-index: 2; }
.cell:focus-visible { outline: 2px solid #fff; outline-offset: -2px; z-index: 3; }
.cell.filled::after {
  /* glaze gloss */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.16) 100%);
  pointer-events: none;
}
.cell.just-set { animation: snap-set .28s var(--ease); }
@keyframes snap-set { 0% { transform: scale(.72); } 55% { transform: scale(1.06); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .cell { animation: none !important; opacity: 1; transform: none; }
  .cell.just-set { animation: none; }
  .hero-top h1 .g::after { animation: none; transform: scaleX(1); }
}

.canvas-hint {
  margin-top: 12px; font-size: .82rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
}
.canvas-hint b { color: var(--ink-soft); font-weight: 600; }

/* summary / özet panel */
.summary {
  position: sticky; top: calc(var(--header-h) + 14px);
  background: var(--ink-band); color: #EAF6F5;
  border-radius: var(--radius);
  padding: clamp(20px, 2vw, 26px);
  box-shadow: 0 30px 60px -40px rgba(18,51,59,.6);
}
.summary h3 {
  color: #fff; font-size: 1.15rem; margin-bottom: 4px;
  display: flex; align-items: center; gap: 9px;
}
.summary h3::before {
  content: ""; width: 9px; height: 9px; background: var(--accent2);
  border-radius: 2px; transform: rotate(45deg);
}
.summary .lead { color: #9FC2C1; font-size: .84rem; margin-bottom: 18px; }

.size-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.stepper label {
  display: block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .12em; color: #8FB4B3; margin-bottom: 7px; font-weight: 600;
}
.stepper-ctrl {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px; padding: 4px;
}
.stepper-ctrl button {
  width: 34px; height: 34px; border-radius: 7px; border: none;
  background: rgba(255,255,255,.1); color: #fff; font-size: 1.2rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .16s var(--ease);
}
.stepper-ctrl button:hover:not(:disabled) { background: var(--accent); }
.stepper-ctrl button:disabled { opacity: .35; cursor: not-allowed; }
.stepper-ctrl output {
  font-family: var(--font-mono); font-size: 1.05rem; font-weight: 500;
  min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums;
}

.summary-metrics { display: grid; gap: 1px; background: rgba(255,255,255,.12); border-radius: 10px; overflow: hidden; margin-bottom: 18px; }
.metric {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 13px 15px; background: rgba(255,255,255,.03);
}
.metric .k { font-size: .84rem; color: #A9CBCA; }
.metric .v {
  font-family: var(--font-mono); font-weight: 500;
  font-variant-numeric: tabular-nums; font-size: 1.02rem; color: #fff;
}
.metric.total { background: rgba(232,178,58,.14); }
.metric.total .k { color: #F0D79A; font-weight: 600; }
.metric.total .v { color: var(--accent2); font-size: 1.5rem; min-width: 6ch; text-align: right; }

.share-row { margin-bottom: 16px; }
.share-row label {
  display: block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .12em; color: #8FB4B3; margin-bottom: 7px; font-weight: 600;
}
.share-input { display: flex; gap: 8px; }
.share-input input {
  flex: 1 1 auto; min-width: 0;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  color: #EAF6F5; border-radius: 9px; padding: 10px 12px;
  font-family: var(--font-mono); font-size: .82rem; letter-spacing: .04em;
}
.share-input input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.share-input button {
  flex: none; padding: 0 15px; border-radius: 9px; border: none;
  background: rgba(255,255,255,.1); color: #fff; font-weight: 600; font-size: .82rem;
  transition: background .16s var(--ease);
}
.share-input button:hover { background: var(--accent); }
.share-note { font-size: .74rem; color: #7FA5A4; margin-top: 8px; }
.summary .btn { width: 100%; margin-top: 4px; }
.summary .fineprint { font-size: .72rem; color: #6E9594; margin-top: 12px; line-height: 1.6; }

/* ============================================================
   DESENLER / palette
   ============================================================ */
.palette-band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.palette-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
@media (max-width: 900px) { .palette-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .palette-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.pattern {
  text-align: left; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 10px; display: flex; flex-direction: column; gap: 10px;
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.pattern:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 16px 30px -22px rgba(18,51,59,.5); }
.pattern.is-active {
  border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 16px 30px -20px rgba(18,165,165,.6);
}
.pattern.is-active .swatch::before {
  content: "✓"; position: absolute; top: 6px; right: 8px; z-index: 3;
  color: #fff; font-size: .8rem; font-weight: 700;
  background: var(--ink); width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
}
.swatch {
  aspect-ratio: 1 / 1; border-radius: 8px; position: relative; overflow: hidden;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.28);
}
.swatch::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(255,255,255,.4), transparent 45%);
}
.pattern-meta strong { display: block; font-family: var(--font-head); font-weight: 600; font-size: .95rem; }
.pattern-meta span { font-size: .78rem; color: var(--muted); }

/* ------------------------------------------------------------------
   Çini glazed-tile motifs — hand-painted İznik look for swatches & cells.
   White / cream GLAZE GROUND (as real İznik) with cobalt-led motifs so the
   canvas visibly builds a glossy hand-painted ceramic panel, not flat swatches.
   ------------------------------------------------------------------ */
:root{
  --g-cobalt:#17408B;   /* deep İznik cobalt */
  --g-cream:#FBF6EA;    /* warm glaze ground */
}

/* ------------------------------------------------------------------
   REAL İZNİK IMAGERY — the 8 library motifs are tight crops of actual
   atelier çini panels/tiles the site already ships (assets/images).
   main.js puts the same .t-* class on the palette swatch, the active-
   brush chip AND every painted canvas cell, so the tuval visibly builds
   from real, glossy hand-painted ceramic — no flat CSS circles.
   Height-relative background-size keeps the crop stable whether the box
   is a square swatch or a slightly non-square grid cell.
   ------------------------------------------------------------------ */
.swatch, .cell.filled, .active-swatch .chip {
  background-repeat: no-repeat;
  background-color: var(--g-cream);
}

/* 1 · Turkuaz Lâle — turquoise-ground tulip panel */
.t-turkuaz { background-image: url("../images/motif-turkuaz.jpg"); background-size: cover; background-position: center; }
/* 2 · Mavi Rûmi — cobalt & turquoise tulip/rûmi border on white ground */
.t-mavi { background-image: url("../images/motif-mavi.jpg"); background-size: cover; background-position: center; }
/* 3 · Mercan Karanfil — coral pomegranate head on white ground */
.t-mercan { background-image: url("../images/motif-mercan.jpg"); background-size: cover; background-position: center; }
/* 4 · Zümrüt Hatâi — green tree-of-life foliage */
.t-yesil { background-image: url("../images/motif-yesil.jpg"); background-size: cover; background-position: center; }
/* 5 · Lacivert Yıldız — eight-point cobalt star */
.t-lacivert { background-image: url("../images/motif-lacivert.jpg"); background-size: cover; background-position: center; }
/* 6 · Altın Geometri — cobalt lattice geometry on white ground */
.t-altin { background-image: url("../images/motif-altin.jpg"); background-size: cover; background-position: center; }
/* 7 · Beyaz Halkâr — clean white-ground tulip tile */
.t-beyaz { background-image: url("../images/motif-beyaz.jpg"); background-size: cover; background-position: center; }
/* 8 · Patlıcan Selvi — hand-painted cypress motif */
.t-mor { background-image: url("../images/motif-mor.jpg"); background-size: cover; background-position: center; }

/* wet-glaze gloss so every real tile still reads as fired, sırlı ceramic */
.cell.filled::after,
.swatch::after{
  background:linear-gradient(150deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 46%, rgba(23,64,139,.12) 100%);
}
.swatch{box-shadow:inset 0 0 0 2px rgba(255,255,255,.6), inset 0 0 0 3px rgba(23,64,139,.18)}

/* ============================================================
   ORNEKLER / gallery
   ============================================================ */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
}
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }

.pano-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pano-card:hover { transform: translateY(-6px); box-shadow: 0 26px 48px -30px rgba(18,51,59,.5); }
.pano-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-3); }
.pano-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.pano-card:hover .pano-media img { transform: scale(1.05); }
.pano-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(14,42,49,.82); color: #fff; padding: 5px 12px;
  border-radius: 999px; font-size: .74rem; font-weight: 600; letter-spacing: .02em;
  backdrop-filter: blur(4px);
}
.pano-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pano-body h3 { font-size: 1.15rem; }
.pano-body p { font-size: .88rem; color: var(--ink-soft); margin: 2px 0 auto; }
.pano-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.pano-price { font-family: var(--font-mono); font-weight: 600; font-size: 1.2rem; color: var(--ink); }
.pano-price small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .72rem; color: var(--muted); }
.pano-dim { font-size: .82rem; color: var(--muted); font-family: var(--font-mono); }

/* ============================================================
   FİYAT / packages
   ============================================================ */
.pricing { background: var(--surface-2); }
.pkg-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px); align-items: start;
}
@media (max-width: 900px) { .pkg-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
.pkg {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px 28px;
  display: flex; flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.pkg:hover { transform: translateY(-5px); box-shadow: 0 26px 48px -32px rgba(18,51,59,.5); }
.pkg.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 30px 55px -34px rgba(18,165,165,.6); }
.pkg-tag {
  display: inline-block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .14em; font-weight: 600; color: var(--accent-text); margin-bottom: 10px;
}
.pkg.featured .pkg-tag { color: var(--accent2-text); }
.pkg h3 { font-size: 1.5rem; }
.pkg .price {
  font-family: var(--font-mono); font-weight: 600; font-size: 2.1rem;
  color: var(--ink); margin: 14px 0 2px; letter-spacing: -0.02em;
}
.pkg .price small { font-family: var(--font-body); font-weight: 500; font-size: .82rem; color: var(--muted); }
.pkg .pkg-desc { font-size: .9rem; color: var(--ink-soft); margin-bottom: 18px; }
.pkg-list { display: grid; gap: 9px; margin: 4px 0 18px; }
.pkg-list li { position: relative; padding-left: 26px; font-size: .9rem; color: var(--ink-soft); }
.pkg-list li::before {
  content: ""; position: absolute; left: 6px; top: .5em;
  width: 8px; height: 8px; background: var(--accent); border-radius: 2px; transform: rotate(45deg);
}
.pkg-list li.no::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.pkg-list li.no { color: var(--muted); }
.pkg .teslim { font-size: .8rem; color: var(--muted); margin-bottom: 18px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.pkg .teslim b { color: var(--ink-soft); }
.pkg .btn { margin-top: auto; }
.pricing-note { margin-top: 26px; font-size: .82rem; color: var(--muted); text-align: center; }

/* cancellation tiers */
.policy-tiers { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 820px) { .policy-tiers { grid-template-columns: 1fr; } }
.tier-list { display: grid; gap: 12px; }
.tier {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: baseline;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
}
.tier .when { font-family: var(--font-mono); font-weight: 600; color: var(--accent-text); font-size: .95rem; grid-row: span 2; }
.tier strong { font-size: .98rem; }
.tier p { margin: 0; font-size: .84rem; color: var(--ink-soft); grid-column: 2; }

/* ============================================================
   SUREC / timeline
   ============================================================ */
.timeline { display: grid; gap: 0; position: relative; }
.step {
  display: grid; grid-template-columns: 92px 1fr; gap: clamp(18px, 3vw, 40px);
  padding: clamp(22px, 3vw, 34px) 0; border-top: 1px solid var(--line);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step-num {
  font-family: var(--font-head); font-weight: 600; font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--accent); line-height: 1; position: relative;
}
.step-num small { display: block; font-family: var(--font-body); font-weight: 600; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.step-body { min-width: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
.step-body.has-img { grid-template-columns: 1.4fr 1fr; align-items: center; }
@media (max-width: 720px) {
  .step { grid-template-columns: 56px 1fr; }
  .step-body.has-img { grid-template-columns: 1fr; }
}
.step-body h3 { font-size: 1.25rem; margin-bottom: 6px; }
.step-body p { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.step-img { border-radius: 12px; overflow: hidden; aspect-ratio: 5/4; border: 1px solid var(--line); }
.step-img img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   ATOLYE NOTLARI + team teaser
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split-media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 60px -44px rgba(18,51,59,.5); }
.split-media img { width: 100%; aspect-ratio: 4/3.4; object-fit: cover; }
.notes-list { display: grid; gap: 14px; margin-top: 22px; }
.note {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 16px;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.note time { font-family: var(--font-mono); font-size: .8rem; color: var(--accent-text); font-weight: 600; grid-row: span 2; white-space: nowrap; }
.note strong { font-size: 1rem; }
.note p { margin: 0; font-size: .86rem; color: var(--ink-soft); grid-column: 2; }

.stat-row { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 46px); margin-top: 26px; }
.stat .n { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--ink); font-variant-numeric: tabular-nums; display: inline-block; min-width: 2ch; }
.stat .l { display: block; font-size: .82rem; color: var(--muted); margin-top: 2px; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.reviews { columns: 2; column-gap: clamp(16px, 2vw, 26px); }
@media (max-width: 760px) { .reviews { columns: 1; } }
.review {
  break-inside: avoid; margin-bottom: clamp(16px, 2vw, 24px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 24px 22px;
}
.review.gold { background: var(--ink-band); color: #E9F5F4; border: none; }
.review .stars { color: var(--accent2); letter-spacing: 3px; font-size: .9rem; margin-bottom: 12px; }
.review blockquote { font-size: 1.02rem; line-height: 1.6; color: var(--ink); }
.review.gold blockquote { color: #fff; }
.review .who { margin-top: 16px; display: flex; align-items: center; gap: 12px; }
.review .who .av { width: 40px; height: 40px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: grid; place-items: center; color: #fff; font-weight: 600; font-family: var(--font-head); }
.review.gold .who .av { background: linear-gradient(135deg, var(--accent2), #f0c05a); color: #3B2A05; }
.review .who cite { font-style: normal; font-weight: 600; font-size: .92rem; display: block; }
.review .who span { font-size: .78rem; color: var(--muted); }
.review.gold .who span { color: #9FC2C1; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 860px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 4px;
  font-family: var(--font-head); font-weight: 600; font-size: 1.08rem; color: var(--ink);
  position: relative; transition: color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent-text); }
.faq-item summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-weight: 400; font-size: 1.6rem; color: var(--accent);
  transition: transform .3s var(--ease);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item .answer {
  height: 0; overflow: hidden; padding: 0 44px 0 4px;
  transition: height .36s var(--ease2), padding-block-end .36s var(--ease2);
}
.faq-item[open] .answer { height: auto; padding-block-end: 24px; }
.faq-item .answer p { color: var(--ink-soft); font-size: .96rem; margin: 0; }
@media (prefers-reduced-motion: reduce) { .faq-item .answer { transition: none; } }

/* ============================================================
   İLETİŞİM
   ============================================================ */
.contact-band { background: var(--ink-band); color: #E9F5F4; }
.contact-band .eyebrow { color: #7FD4D2; }
.contact-band .eyebrow::before { background: var(--accent2); }
.contact-band h2 { color: #fff; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.channels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 480px) { .channels { grid-template-columns: 1fr; } }
.channel {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 18px; transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.channel:hover { transform: translateY(-3px); background: rgba(255,255,255,.09); border-color: var(--accent); }
.channel .lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: #8FB4B3; font-weight: 600; margin-bottom: 8px; }
.channel a, .channel .val { color: #fff; font-weight: 500; font-size: 1rem; word-break: break-word; }
.channel a:hover { color: var(--accent2); }
.channel small { display: block; color: #9FC2C1; font-size: .8rem; margin-top: 4px; }
.hours-mini { grid-column: 1 / -1; }
.hours-mini table { width: 100%; border-collapse: collapse; }
.hours-mini td { padding: 7px 0; font-size: .88rem; border-bottom: 1px solid rgba(255,255,255,.08); color: #CFE6E4; }
.hours-mini td:last-child { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hours-mini tr.today td { color: #fff; font-weight: 600; }
.hours-mini tr.today td:last-child { color: var(--accent2); }

/* ---- Forms ---- */
.form-card { background: var(--surface); color: var(--ink); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); box-shadow: 0 30px 60px -40px rgba(0,0,0,.5); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } .field { grid-column: 1 / -1 !important; } }
.field label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.field label .opt { font-weight: 400; color: var(--muted); font-size: .78em; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: .95rem; color: var(--ink);
  background: var(--surface-2); border: 1.5px solid transparent;
  border-radius: 10px; padding: 12px 14px; width: 100%;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.field.kvkk { flex-direction: row; align-items: flex-start; gap: 11px; }
.field.kvkk label { font-weight: 400; font-size: .85rem; 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: 2px 0 0; accent-color: var(--accent);
}
.form-card .btn { width: 100%; margin-top: 6px; }

/* CTA card (replaces on-page forms outside iletisim) */
.cta-card {
  background: var(--surface); color: var(--ink);
  border-radius: var(--radius); padding: clamp(26px, 3.4vw, 40px);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.cta-card h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.cta-card p { color: var(--ink-soft); font-size: .96rem; margin: 0; }
.cta-card .btn { margin-top: 8px; }
.cta-card .cta-meta { font-size: .82rem; color: var(--muted); margin-top: 2px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: #0A2027; color: #B9D3D1; padding-block: clamp(48px, 6vw, 72px) 30px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: clamp(24px, 3vw, 44px); }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 32px 24px; } }
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand .brand { color: #fff; }
.footer-brand p { margin-top: 16px; font-size: .88rem; color: #8FAFAD; max-width: 34ch; }
.footer-col h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 16px; font-family: var(--font-body); font-weight: 600; }
.footer-col a { display: block; color: #A9C6C4; font-size: .9rem; padding: 5px 0; transition: color .18s var(--ease), padding-left .18s var(--ease); }
.footer-col a:hover { color: #fff; padding-left: 5px; }
.footer-col .line { font-size: .9rem; color: #A9C6C4; padding: 5px 0; word-break: break-word; }
.footer-col .line a { display: inline; padding: 0; }
.footer-bottom {
  margin-top: clamp(36px, 5vw, 52px); padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center;
  font-size: .8rem; color: #7E9E9C;
}
.footer-legal a { display: inline; color: #7E9E9C; margin-right: 16px; }
.footer-legal a:hover { color: #fff; }
.footer-bottom .reg { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .02em; }

/* ============================================================
   COOKIE
   ============================================================ */
.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: var(--radius);
  padding: 20px 22px; z-index: 9999; box-shadow: 0 24px 60px -20px rgba(18,51,59,.5);
  transform: translateY(140%); opacity: 0;
  transition: transform .28s var(--ease), opacity .24s var(--ease);
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
@media (min-width: 720px) { .cookie-banner { left: 24px; right: auto; max-width: 420px; } }
.cookie-banner h4 { font-size: 1.05rem; margin-bottom: 6px; }
.cookie-banner p { font-size: .84rem; color: var(--ink-soft); margin-bottom: 16px; }
.cookie-banner p a { color: var(--accent-text); text-decoration: underline; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions button { flex: 1 1 auto; min-height: 44px; padding: 11px 16px; border-radius: 10px; font-weight: 600; font-size: .88rem; border: 1.5px solid transparent; transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); }
.cookie-actions [data-consent="accept"] { background: var(--ink); color: #fff; }
.cookie-actions [data-consent="accept"]:hover { background: var(--accent); color: #fff; }
.cookie-actions [data-consent="reject"] { background: var(--surface-2); color: var(--ink); }
.cookie-actions [data-consent="reject"]:hover { background: var(--surface-3); }
.cookie-actions [data-consent="settings"] { background: transparent; color: var(--ink-soft); border-color: var(--line-strong); flex-basis: 100%; }
.cookie-actions [data-consent="settings"]:hover { border-color: var(--accent); color: var(--ink); }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }
html.no-js .reveal { opacity: 1; transform: none; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero { background: var(--surface-2); padding-block: clamp(48px, 7vw, 96px); position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(18,165,165,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(18,165,165,.06) 1px, transparent 1px);
  background-size: 42px 42px; mask-image: radial-gradient(90% 120% at 90% 10%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(90% 120% at 90% 10%, #000, transparent 70%);
}
.page-hero .inner { position: relative; z-index: 2; max-width: 760px; }
.page-hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); letter-spacing: -0.02em; }
.page-hero p { color: var(--ink-soft); font-size: 1.08rem; margin-top: .8em; max-width: 56ch; }
.crumbs { font-size: .82rem; color: var(--muted); margin-bottom: 16px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent-text); }

/* prose (policies) */
.prose { max-width: 820px; }
.prose h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 1.8em 0 .5em; }
.prose h3 { font-size: 1.15rem; margin: 1.4em 0 .4em; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul { margin: 0 0 1.2em; display: grid; gap: 8px; }
.prose ul li { position: relative; padding-left: 22px; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); }
.prose strong { color: var(--ink); }
.prose a { text-decoration: underline; }
.prose .updated { font-size: .84rem; color: var(--muted); margin-bottom: 2em; }

/* table scroll */
.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-scroll th, .table-scroll td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); font-size: .9rem; }
.table-scroll th { background: var(--surface-2); font-family: var(--font-head); font-weight: 600; color: var(--ink); }
.table-scroll td { color: var(--ink-soft); }

/* team cards */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); }
@media (max-width: 820px) { .team-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }
.member { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.member img { width: 100%; aspect-ratio: 4/4.4; object-fit: cover; }
.member-body { padding: 20px 22px 24px; }
.member-body h3 { font-size: 1.2rem; }
.member-body .role { color: var(--accent-text); font-weight: 600; font-size: .84rem; margin: 3px 0 12px; }
.member-body p { font-size: .88rem; color: var(--ink-soft); margin: 0; }

/* thank you */
.thanks { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: clamp(60px, 10vw, 120px); }
.thanks .inner { max-width: 540px; }
.thanks .mark { width: 78px; height: 78px; border-radius: 20px; margin: 0 auto 26px; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: grid; place-items: center; color: #fff; font-size: 2.2rem; box-shadow: 0 20px 40px -20px rgba(18,165,165,.7); }
.thanks h1 { font-size: clamp(2rem, 5vw, 3rem); }
.thanks p { color: var(--ink-soft); font-size: 1.05rem; margin: .8em 0 1.6em; }

/* sitemap */
.sitemap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 720px) { .sitemap-grid { grid-template-columns: 1fr; } }
.sitemap-grid h2 { font-size: 1.15rem; margin-bottom: 12px; }
.sitemap-grid a { display: block; padding: 7px 0; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.sitemap-grid a:hover { color: var(--accent-text); padding-left: 6px; transition: padding-left .18s var(--ease), color .18s var(--ease); }

/* 404 */
.err { min-height: 66vh; display: grid; place-items: center; text-align: center; padding-block: 80px; }
.err .big { font-family: var(--font-head); font-weight: 600; font-size: clamp(5rem, 18vw, 11rem); line-height: 1; color: var(--accent); letter-spacing: -0.04em; }
.err h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 8px 0 14px; }
.err p { color: var(--ink-soft); max-width: 42ch; margin: 0 auto 26px; }

/* helper */
.lead-copy { font-size: 1.05rem; color: var(--ink-soft); max-width: 60ch; }
.mono { font-family: var(--font-mono); }

.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 turkuaz-sır rebuild (appended, wins by order)
   Hand-painted glaze surfaces · motif seams · wet-glass gloss
   ############################################################ */

/* ---------- 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,.28),rgba(255,255,255,0) 62%);
  mix-blend-mode:soft-light;transition:background .16s linear}
.band-glaze.glaze::after,.tilewall.glaze::after,.frame.glaze::after,.btn-glaze::after,.cta-band.glaze::after{
  background:radial-gradient(56% 48% at var(--mx,50%) var(--my,-12%),rgba(188,240,236,.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;background-image:none}}

/* ---------- SEAM: real İznik motif border as section divider ---------- */
.seam{height:clamp(46px,6.5vw,74px);background-color:#eef7f4;
  background-image:url('../images/bordur-lale.jpg');background-size:auto 118%;
  background-position:center;background-repeat:repeat-x;
  border-block:1px solid var(--line-strong)}
.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}

/* ---------- TURKUAZ GLAZE BAND (deep İznik sır surface) ---------- */
.band-glaze{color:#EAF7F5;overflow:hidden;background-color:#0B3A3A;
  background-image:linear-gradient(rgba(7,46,46,.80),rgba(5,34,36,.86)),url('../images/sir-turkuaz.jpg');
  background-size:cover;background-position:center}
.band-glaze :is(h1,h2,h3),.on-dark{color:#fff}
.band-glaze p{color:#CFEAE8}
.band-glaze .eyebrow,.band-glaze .eyebrow.engrave{color:#7FD4D2}
.band-glaze .eyebrow::before{background:var(--accent2)}
.engrave{text-shadow:0 1px 0 rgba(0,0,0,.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 -32px rgba(7,46,46,.6),
    inset 0 0 0 3px rgba(18,165,165,.62),inset 0 0 0 4px rgba(255,255,255,.20),inset 0 0 0 5px rgba(7,46,46,.28)}
.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,46,46,.86);color:#fff;
  font-size:.72rem;font-weight:500;letter-spacing:.03em;padding:7px 12px;border-radius:6px;backdrop-filter:blur(3px)}
.frame-tag{position:absolute;top:12px;left:12px;z-index:6;background:var(--accent2);color:#3B2A05;
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:999px}

/* ---------- BUTTONS: glaze variants ---------- */
.btn .arw{transition:transform .2s var(--ease);display:inline-block}
.btn:hover .arw,.btn:focus-visible .arw{transform:translateX(4px)}
.btn-lg{padding:16px 30px;font-size:1.02rem}
.btn-glaze{position:relative;overflow:hidden;color:#fff;border-color:transparent;--mx:50%;--my:-12%;
  background-color:#0f7d7b;background-image:linear-gradient(180deg,#0f7d7b,#0a5f5e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 12px 26px -14px rgba(7,46,46,.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);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 18px 34px -16px rgba(18,165,165,.85)}
.btn-glaze:active{transform:translateY(0)}
.nav-desktop .nav-cta.btn-glaze{background-image:linear-gradient(180deg,#0f7d7b,#0a5f5e);color:#fff}
.nav-desktop .nav-cta.btn-glaze:hover{background-image:linear-gradient(180deg,#12938e,#0f7d7b);color:#fff}
.btn-ghost-glaze{background:rgba(255,255,255,.08);color:#EAF7F5;border:1.5px solid rgba(127,212,210,.5)}
.btn-ghost-glaze:hover,.btn-ghost-glaze:focus-visible{background:rgba(255,255,255,.16);color:#fff;border-color:#fff;transform:translateY(-2px)}
.drawer .drawer-cta.btn-glaze{font-family:var(--font-body);font-size:1rem;text-align:center;border-bottom:0;color:#fff}
.drawer .drawer-cta.btn-glaze:hover{padding-left:0;color:#fff}

/* ---------- HERO glaze polish (keep tool prominent) ---------- */
.hero.glaze::before{background:linear-gradient(115deg,transparent 44%,rgba(255,255,255,.06) 50%,transparent 56%);
  background-size:280% 100%;background-position:var(--sheen,0%) 0}
.hero > .container{position:relative;z-index:3}
.hero .seam-bottom{border-bottom:0}

/* configurator: glazed frame around the canvas panel */
.canvas-wrap.glaze{box-shadow:0 30px 60px -40px rgba(7,46,46,.5),
  inset 0 0 0 3px rgba(18,165,165,.5),inset 0 0 0 4px rgba(255,255,255,.5)}
.canvas-wrap.glaze::after{background:radial-gradient(46% 40% at var(--mx,50%) var(--my,-12%),rgba(18,165,165,.14),transparent 62%);mix-blend-mode:multiply}
.canvas-stage{box-shadow:inset 0 0 0 2px rgba(7,46,46,.28)}
.summary.glaze{position:sticky;top:calc(var(--header-h) + 14px);z-index:2;
  box-shadow:0 30px 60px -40px rgba(7,46,46,.6),inset 0 0 0 1px rgba(127,212,210,.18)}
.summary.glaze::after{background:radial-gradient(56% 48% at var(--mx,50%) var(--my,-12%),rgba(188,240,236,.24),transparent 60%);mix-blend-mode:screen}
.summary > *{position:relative;z-index:3}
.summary-tools{display:flex;gap:10px;margin-bottom:6px}
.summary-tools .tool-btn{flex:1;justify-content:center;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#EAF7F5}
.summary-tools .tool-btn:hover:not(:disabled){border-color:var(--accent);color:#fff}

/* ---------- EDITORIAL INTRO ---------- */
.intro{background:var(--bg)}
.intro-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.intro-photo img{aspect-ratio:5/4}
.intro-copy h2{font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:-.02em;margin-bottom:.4em}
.intro-copy .lead-copy{margin-bottom:1em}
.intro-copy .btn{margin-top:.6em}

/* ---------- PANOLAR GALLERY (glazed-tile grid) ---------- */
.panolar{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gcard{display:flex;flex-direction:column}
.gallery .frame img{aspect-ratio:4/3}
.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-size:clamp(1.2rem,2vw,1.4rem);margin-bottom:6px}
.gcard-body p{font-size:.9rem;color:var(--ink-soft);margin:0 0 12px}
.gprice{margin-top:auto;display:flex;flex-direction:column;gap:3px;padding-top:14px;border-top:1px solid var(--line)}
.gprice .amt{font-family:var(--font-mono);font-weight:600;font-size:1.3rem;color:var(--accent-text);letter-spacing:-.01em}
.gprice small{font-size:.76rem;color:var(--muted)}

/* ---------- TILED-WALL BAND ---------- */
.tilewall{position:relative;overflow:hidden;min-height:clamp(230px,32vw,400px);display:flex;align-items:center;
  background:url('../images/karo-grid.jpg') center/cover;border-block:1px solid var(--line-strong)}
.tilewall-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(5,34,36,.86),rgba(5,34,36,.34) 58%,rgba(5,34,36,.74))}
.tilewall-line{font-family:var(--font-head);font-weight:600;color:#fff;
  font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.22;max-width:24ch;margin:0;letter-spacing:-.01em;
  text-shadow:0 2px 26px rgba(0,0,0,.6)}

/* ---------- ATÖLYE + pull-quote ---------- */
.atolye-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,60px);align-items:center}
.atolye-copy h2{font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:-.02em;margin-bottom:.4em}
.pullquote{font-family:var(--font-head);font-weight:600;font-size:clamp(1.25rem,2.4vw,1.85rem);
  line-height:1.32;color:#fff;margin:26px 0;padding-left:22px;border-left:3px solid var(--accent2);letter-spacing:-.01em}
.pullquote .hl{color:#7FD4D2}
.pullquote cite{display:block;font-family:var(--font-body);font-style:normal;font-weight:600;font-size:.9rem;
  color:#9FD0CE;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}

/* ---------- FİYAT (elegant list beside panel) ---------- */
.fiyatlar{background:var(--bg)}
.price-grid2{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,4vw,64px);align-items:center}
.price-photo img{aspect-ratio:4/5}
.price-list-wrap h2{font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:-.02em;margin-bottom:.3em}
.price-intro{color:var(--ink-soft);margin:0 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:16px 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:.84rem;color:var(--ink-soft);margin-top:3px}
.price-row dd{margin:0;font-family:var(--font-mono);font-weight:600;font-size:clamp(1.2rem,2vw,1.5rem);
  color:var(--accent-text);white-space:nowrap;text-align:right}
.price-row dd small{display:block;font-family:var(--font-body);font-weight:400;font-size:.72rem;color:var(--muted);white-space:nowrap}
.price-cta{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- CTA BAND ---------- */
.cta-band{position:relative;overflow:hidden;padding-block:calc(clamp(64px,9vw,110px) + clamp(28px,4vw,54px));text-align:center}
.cta-inner{max-width:60ch;margin-inline:auto}
.cta-inner .eyebrow{justify-content:center;margin-bottom:14px}
.cta-title{font-family:var(--font-head);font-weight:600;color:#fff;
  font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.12;margin-bottom:14px;letter-spacing:-.02em;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.cta-band p{color:#CFEAE8;margin-bottom:26px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-lines{margin-top:26px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;
  font-size:.86rem;color:#CFEAE8}
.cta-lines a{color:#EAF7F5;font-weight:500}
.cta-lines a:hover{color:var(--accent2)}

/* ---------- SUB-PAGE glaze skin (motif seam on page hero) ---------- */
.page-hero{position:relative}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(40px,5vw,60px);z-index:2;
  background-color:#eef7f4;background-image:url('../images/bordur-lale.jpg');background-size:auto 118%;
  background-position:center;background-repeat:repeat-x;border-top:1px solid var(--line-strong)}
.page-hero .inner,.page-hero .container{position:relative;z-index:3}

/* ---------- RESPONSIVE (glaze components) ---------- */
@media (max-width:1024px){
  .intro-grid,.atolye-grid,.price-grid2{grid-template-columns:1fr;gap:32px}
  .intro-photo,.price-photo{max-width:460px;margin-inline:auto;width:100%}
}
@media (max-width:640px){
  .atolye-media{grid-template-columns:1fr}
  .price-row{flex-direction:column;gap:6px}
  .price-row dd{text-align:left}
  .price-row dd small{white-space:normal}
}

/* ---------- Contrast fixes (override base bugs) ---------- */
.err .big{color:var(--accent-text)}
.site-footer .brand small{color:#7FD4D2}

/* ############################################################
   APP / TOOL-FIRST DESIGN STUDIO  (unmistakably an app, not a page)
   The first viewport IS the configurator: app-bar + dock + canvas + inspector.
   ############################################################ */

/* ---- Studio shell: fills most of the first viewport ---- */
.studio-shell{
  --dock-w:238px; --sum-w:340px;
  position:relative;
  padding-block:clamp(14px,2.4vw,26px) clamp(30px,4vw,48px);
  background:
    radial-gradient(130% 90% at 78% -8%, rgba(18,165,165,.10), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--bg) 92%);
  overflow:hidden;
}
.studio-shell::before{ /* faint design-grid — the "artboard" */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(18,165,165,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,165,165,.06) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(120% 100% at 60% 0%, #000 40%, transparent 82%);
  -webkit-mask-image:radial-gradient(120% 100% at 60% 0%, #000 40%, transparent 82%);
}
.studio-shell > .container{position:relative;z-index:1}

/* ---- The app "window" ---- */
.studio-frame{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 40px 80px -50px rgba(7,46,46,.6), inset 0 0 0 3px rgba(18,165,165,.10);
  overflow:hidden;
  min-height:min(72svh, 720px);
  display:flex;flex-direction:column;
}
.studio-frame.glaze::after{background:radial-gradient(46% 40% at var(--mx,50%) var(--my,-12%),rgba(18,165,165,.10),transparent 62%);mix-blend-mode:multiply}

/* ---- App top bar: one-line value prop + primary action ---- */
.app-bar{
  position:relative;z-index:3;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:16px 20px;
  padding:14px clamp(14px,1.8vw,22px);
  background:linear-gradient(180deg, #eaf6f4, #e0f1ee);
  border-bottom:1px solid var(--line);
}
.app-id{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-head);font-weight:600;font-size:1.02rem;color:var(--ink);
  letter-spacing:-.01em;line-height:1.05;white-space:nowrap;
}
.app-id small{
  display:block;font-family:var(--font-body);font-weight:600;font-size:.56rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text);margin-top:3px;
}
.app-dot{
  width:11px;height:11px;flex:none;border-radius:3px;transform:rotate(45deg);
  background:var(--accent);box-shadow:0 0 0 0 rgba(18,165,165,.5);
  animation:app-pulse 2.4s var(--ease) infinite;
}
@keyframes app-pulse{0%{box-shadow:0 0 0 0 rgba(18,165,165,.5)}70%{box-shadow:0 0 0 7px rgba(18,165,165,0)}100%{box-shadow:0 0 0 0 rgba(18,165,165,0)}}
.app-prop{
  margin:0;justify-self:start;min-width:0;
  font-size:clamp(.9rem,1.3vw,1.02rem);color:var(--ink-soft);line-height:1.35;
}
.app-prop b{color:var(--ink);font-weight:600}
.app-send{white-space:nowrap;padding:11px 20px;font-size:.92rem;justify-self:end}

/* ---- Studio grid: dock | canvas | inspector ---- */
.studio{
  position:relative;z-index:2;
  flex:1;
  display:grid;
  grid-template-columns:var(--dock-w) minmax(0,1fr) var(--sum-w);
  gap:0;align-items:stretch;
}

/* ---- LEFT DOCK: pattern palette ---- */
.dock{
  display:flex;flex-direction:column;min-height:0;
  background:linear-gradient(180deg,#f3faf8,#eaf5f2);
  border-right:1px solid var(--line);
  padding:16px 14px 14px;
}
.dock-title{
  margin:0 0 12px;font-family:var(--font-body);font-weight:600;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);
  display:flex;flex-direction:column;gap:3px;
}
.dock-title span{font-weight:500;letter-spacing:.02em;text-transform:none;font-size:.74rem;color:var(--muted)}
.dock .palette-grid{
  display:flex;flex-direction:column;gap:8px;
  grid-template-columns:none;overflow-y:auto;min-height:0;flex:1;
  padding-right:2px;scrollbar-width:thin;
}
.dock .pattern{
  flex:0 0 auto;flex-direction:row;align-items:center;gap:12px;padding:8px;border-radius:11px;
}
.dock .pattern .swatch{width:46px;height:46px;aspect-ratio:auto;flex:none;border-radius:9px}
.dock .pattern .pattern-meta{min-width:0}
.dock .pattern-meta strong{font-size:.9rem}
.dock .pattern-meta span{font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.dock-foot{margin:12px 0 0;font-size:.76rem;color:var(--muted);line-height:1.5}

/* ---- CENTER: canvas panel (borderless inside the app window) ---- */
.studio .canvas-wrap{
  border:0;border-radius:0;box-shadow:none;background:var(--surface);
  padding:clamp(14px,1.8vw,22px);display:flex;flex-direction:column;min-width:0;
}
.studio .canvas-wrap.glaze::after{display:none}
.canvas-toolbar{margin-bottom:14px}
.active-swatch .as-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio .canvas-stage{flex:1;min-height:clamp(300px,42vh,520px);aspect-ratio:auto}
.canvas-hint{margin-top:12px}

/* ---- RIGHT: inspector / summary panel ---- */
.studio .summary{
  position:static;border-radius:0;min-height:0;
  border-left:1px solid rgba(127,212,210,.16);
  overflow-y:auto;
}
.studio .summary.glaze{box-shadow:inset 0 0 0 1px rgba(127,212,210,.14)}

/* ============================================================
   NASIL — 3 real photos strip
   ============================================================ */
.howto{background:var(--bg)}
.howto-head{max-width:60ch;margin-bottom:clamp(24px,3vw,38px)}
.howto-head h2{font-size:clamp(1.7rem,3.6vw,2.6rem);letter-spacing:-.02em}
.howto-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
@media (max-width:820px){.howto-strip{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.howto-card{position:relative;display:block}
.howto-card img{aspect-ratio:4/3;width:100%}
.howto-num{
  position:absolute;top:12px;left:12px;z-index:6;
  font-family:var(--font-mono);font-weight:700;font-size:.9rem;letter-spacing:.04em;
  background:rgba(7,46,46,.86);color:#fff;padding:6px 11px;border-radius:8px;backdrop-filter:blur(3px);
}

/* ============================================================
   FİYAT — lean price note
   ============================================================ */
.price-note{background:var(--surface-2);border-block:1px solid var(--line)}
.price-note-inner{display:grid;gap:clamp(22px,3vw,34px)}
.pn-head{max-width:60ch}
.pn-head h2{font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:-.02em;margin-bottom:.35em}
.pn-sub{color:var(--ink-soft);margin:0;max-width:56ch}
.pn-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:820px){.pn-facts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.pn-facts{grid-template-columns:1fr}}
.pn-facts li{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px;
}
.pn-amt{font-family:var(--font-mono);font-weight:600;font-size:1.5rem;color:var(--accent-text);letter-spacing:-.01em}
.pn-lbl{font-size:.84rem;color:var(--ink-soft);line-height:1.45}
.pn-cta{display:flex;flex-wrap:wrap;gap:12px}

/* ============================================================
   RESPONSIVE — app reflows to usable stacked layout
   ============================================================ */
@media (max-width:1180px){
  .studio-frame{min-height:0}
  .studio{grid-template-columns:minmax(0,1fr)}
  .studio > *{min-width:0}
  .studio .canvas-wrap{order:1;border-bottom:1px solid var(--line)}
  .dock{order:2;border-right:0;border-bottom:1px solid var(--line)}
  .studio .summary{order:3;border-left:0}
  /* keep canvas cells square when the app is stacked (width drives height) */
  .studio .canvas-stage{min-height:0;aspect-ratio:5/4;max-height:82vh}
  /* dock becomes a horizontal scrolling tool rail below the canvas */
  .dock .palette-grid{flex-direction:row;overflow-x:auto;overflow-y:visible;gap:10px;padding-bottom:4px}
  .dock .pattern{flex:0 0 210px}
  .dock-foot{display:none}
}
@media (max-width:640px){
  .app-bar{grid-template-columns:1fr;gap:10px;text-align:left}
  .app-send{justify-self:stretch;width:100%}
  .app-prop{justify-self:stretch}
  .studio .canvas-stage{min-height:clamp(260px,60vw,360px)}
  .dock .pattern{flex:0 0 180px}
}
@media (prefers-reduced-motion:reduce){ .app-dot{animation:none} }

/* ############################################################
   ÇİNİ CONTEXT — real hand-painted ceramic framing the app chrome
   ############################################################ */

/* real İznik tulip-border ribbon on top of the app window */
.app-motif{
  position:relative;z-index:4;height:clamp(22px,2.4vw,30px);flex:none;
  background:#eef7f4 url('../images/bordur-lale.jpg') center/auto 150% repeat-x;
  border-bottom:1px solid var(--line-strong);
  box-shadow:inset 0 -6px 12px -8px rgba(7,46,46,.35);
}

/* inspector panel gets a real turquoise glaze (sır) surface under its dark veil */
.studio .summary{
  background-color:var(--ink-band);
  background-image:linear-gradient(rgba(7,46,46,.86),rgba(5,34,36,.9)),url('../images/sir-turkuaz.jpg');
  background-size:cover;background-position:center;
}

/* real çini wall band — big hand-painted tiles + hand-painted / kiln-fired note */
.tilewall{padding-block:clamp(46px,7vw,86px)}
.tilewall .eyebrow{color:#8FE0DD;margin-bottom:16px}
.tilewall .eyebrow::before{background:var(--accent2)}
.tilewall-inner{max-width:40ch}
.tilewall-line .hl{color:#8FE0DD}
.tilewall-sub{margin:16px 0 0;color:#CFEAE8;font-size:clamp(.92rem,1.4vw,1.05rem);
  line-height:1.6;max-width:46ch;text-shadow:0 1px 12px rgba(0,0,0,.5)}

/* ---- Drawer close X (wired via main.js drawer-anchor close handler) ---- */
.drawer .drawer-close{
  align-self:flex-end;order:-1;z-index:5;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;margin:0 0 8px;border:1px solid var(--line);
  border-radius:11px;background:var(--surface-2);color:var(--ink);
  font-family:var(--font-body);font-size:1.7rem;line-height:1;font-weight:400;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.drawer .drawer-close span{display:block;transform:translateY(-1px)}
.drawer .drawer-close:hover,.drawer .drawer-close:focus-visible{
  background:var(--ink);color:#fff;border-color:var(--ink);padding-left:0;
}


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

/* Empty squares: show a clear "+" so it's obvious you tap an empty kare to ADD a tile. */
.cell.is-empty::before {
  content: "+";
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--sans, sans-serif); font-weight: 300; line-height: 1;
  font-size: clamp(15px, 3.4vw, 24px); color: rgba(255,255,255,.42);
  pointer-events: none; transition: color .16s ease, transform .16s ease;
}
.cell.is-empty:hover::before { color: #EBBE52; transform: scale(1.3); }
.cell.is-empty:focus-visible::before { color: #fff; }

/* Motif cells: a solid çini glaze colour blended with the motif photo (multiply) so a
   placed tile is ALWAYS a clearly-coloured, never-blank square — even where the source
   photo has white ground, and even if it is slow/failed to load. */
.cell.filled { background-size: cover; background-position: center; background-repeat: no-repeat; }
.cell.filled.t-turkuaz  { background-color:#1F9DB8; }
.cell.filled.t-mavi     { background-color:#2554B8; }
.cell.filled.t-mercan   { background-color:#C13B49; }
.cell.filled.t-yesil    { background-color:#2C8A61; }
.cell.filled.t-lacivert { background-color:#293A96; }
.cell.filled.t-altin    { background-color:#C99A38; }
.cell.filled.t-beyaz    { background-color:#4E7EBC; }
.cell.filled.t-mor      { background-color:#744293; }