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

/* ============================================================
   SIRLI HARF — Kişiye Özel Çini Harf Atölyesi
   Retro-poster / letterpress / sırlı çini yüzey dili
   ============================================================ */

:root {
  --bg:          #F2E3C6;
  --surface:     #FBF3E1;
  --surface-2:   #F1DFBC;
  --ink:         #20242B;
  --ink-soft:    #4A4E57;
  --ink-faint:   #6C6A61;
  --accent:      #D5482B;   /* domates-kırmızı / mercan — заливки/декор */
  --accent-text: #A6321A;   /* затемнённый для текста на светлом */
  --accent-2:    #148A8E;   /* türkuaz — заливки (polychrome pop) */
  --accent-2-tx: #0C6064;   /* затемнённый türkuaz текст */
  --plum:        #2B1637;   /* manganez moru — koyu sır bandı */
  --plum-2:      #4A2456;   /* manganez moru — buton/derinlik */
  --line:        #D8C49A;
  --line-strong: #B79B68;
  --paper-shadow: rgba(32,36,43,.16);

  --container: 1240px;
  --pad: clamp(16px, 4vw, 52px);
  --header-h: 74px;

  --serif: "Syne", "Trebuchet MS", "Segoe UI", sans-serif;
  --body:  "Space Grotesk", "Segoe UI", system-ui, sans-serif;

  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-press: cubic-bezier(.4,0,.2,1);

  interpolate-size: allow-keywords;
}

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

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.62;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(rgba(32,36,43,.035) 1px, transparent 1px);
  background-size: 4px 4px;
}

figure, figcaption, blockquote { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0 0 .5em;
  color: var(--ink);
}
p { margin: 0 0 1em; }
a { color: var(--accent-2-tx); text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

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

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

.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;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

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

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

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1080;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(242, 227, 198, 0.92);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 2px solid var(--ink);
  transition: background .24s var(--ease), height .24s var(--ease), box-shadow .24s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(242,227,198,.98);
  height: 62px;
  box-shadow: 0 8px 24px -16px rgba(32,36,43,.4);
}
.header-inner {
  width: 100%; max-width: var(--container); margin: 0 auto;
  padding-left: var(--pad); padding-right: var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--serif); font-weight: 800; font-size: 1.32rem;
  color: var(--ink); letter-spacing: -0.01em; line-height: 1.1;
  text-shadow: 0 1px 0 rgba(251,243,225,.9), 0 -1px 0 rgba(32,36,43,.12);
}
.brand b { color: var(--accent-text); }
.brand span { font-family: var(--body); font-weight: 400; font-size: .62rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }

.nav-desktop { display: none; align-items: center; gap: 26px; }
.nav-desktop a {
  position: relative; font-weight: 600; font-size: .92rem; color: var(--ink);
  padding: 6px 0; letter-spacing: .01em;
}
.nav-desktop a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 2px; background: var(--accent); transition: right .26s var(--ease);
}
.nav-desktop a:hover::after,
.nav-desktop a.is-active::after { right: 0; }
.nav-desktop a.is-active { color: var(--accent-text); }

.nav-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ink); color: var(--surface) !important;
  padding: 10px 18px; border: 2px solid var(--ink); border-radius: 2px;
  font-weight: 700; font-size: .9rem; letter-spacing: .02em;
  box-shadow: 3px 3px 0 var(--accent);
  transition: transform .16s var(--ease-press), box-shadow .16s var(--ease-press), background .2s;
}
.nav-desktop .nav-cta::after { display: none; }
.nav-cta:hover { background: var(--accent); color: var(--surface) !important;
  box-shadow: 3px 3px 0 var(--ink); transform: translateY(-1px); }
.nav-cta:active { transform: translate(3px,3px); box-shadow: 0 0 0 var(--ink); }

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

/* ---------- drawer ---------- */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1050;
  width: min(360px, 92vw); background: var(--surface);
  border-left: 3px solid var(--ink);
  transform: translateX(100%); transition: transform .32s var(--ease);
  display: flex; flex-direction: column; padding: calc(var(--header-h) + 16px) 28px 28px;
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer a {
  font-family: var(--serif); font-weight: 800; font-size: 1.4rem; color: var(--ink);
  padding: 14px 0; border-bottom: 1px dashed var(--line-strong);
}
.drawer a.is-active { color: var(--accent-text); }
.drawer .nav-cta { margin-top: 20px; font-size: 1rem; }
.drawer .nav-cta:hover { color: var(--surface) !important; }
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 1040; background: rgba(32,36,43,.55);
  opacity: 0; visibility: hidden; transition: opacity .24s var(--ease), visibility .24s;
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

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

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--serif); font-weight: 800; font-size: 1rem; letter-spacing: .01em;
  padding: 14px 26px; border-radius: 2px; cursor: pointer; border: 2px solid var(--ink);
  text-align: center; transition: transform .16s var(--ease-press), box-shadow .16s var(--ease-press), background .2s, color .2s;
}
.btn-primary { background: var(--accent); color: var(--surface); box-shadow: 4px 4px 0 var(--ink); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--ink); color: var(--surface); box-shadow: 4px 4px 0 var(--accent); transform: translateY(-2px); }
.btn-primary:active { transform: translate(4px,4px); box-shadow: 0 0 0 var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: 4px 4px 0 rgba(32,36,43,.18); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--surface); color: var(--ink); box-shadow: 4px 4px 0 var(--accent-2); transform: translateY(-2px); }
.btn-ghost:active { transform: translate(4px,4px); box-shadow: 0 0 0 var(--ink); }
.btn-lg { padding: 17px 34px; font-size: 1.08rem; }

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section { padding: clamp(56px, 8vw, 104px) 0; position: relative; }
main section[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
.section-band { background: var(--surface); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.section-ink { background: var(--ink); color: var(--surface); }
.section-ink h2, .section-ink h3 { color: var(--surface); }

/* çift baskı çizgisi ayraç */
.rule2 { height: 0; border: 0; border-top: 2px solid var(--ink); position: relative; margin: 0; }
.rule2::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 1px solid var(--line-strong); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body); font-weight: 700; font-size: .74rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--accent-text);
  margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); }
.section-ink .eyebrow { color: #E8B4A6; }
.section-ink .eyebrow::before { background: var(--accent); }

.section-head { max-width: 720px; margin-bottom: clamp(30px, 5vw, 54px); }
.section-head h2 { font-size: clamp(2rem, 5.2vw, 3.4rem); }
.section-head p { color: var(--ink-soft); font-size: 1.06rem; max-width: 60ch; }
.section-ink .section-head p { color: #CFCABD; }

/* letterpress emboss title helper */
.emboss {
  text-shadow: 0 1px 0 rgba(251,243,225,.85), 0 2px 1px rgba(32,36,43,.22), 0 -1px 0 rgba(32,36,43,.16);
}

/* ============================================================
   HERO — poster lockup
   ============================================================ */
.hero {
  position: relative; padding-top: calc(var(--header-h) + clamp(28px, 5vw, 56px));
  padding-bottom: clamp(40px, 6vw, 80px);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(251,243,225,.65), rgba(242,227,198,.35)),
    var(--bg);
  border-bottom: 2px solid var(--ink);
}
.hero-grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); }
}
.hero-copy { min-width: 0; }
.hero h1 {
  font-size: clamp(2.9rem, 9vw, 4.5rem);
  line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 18px;
  text-shadow: 0 2px 0 rgba(251,243,225,.7), 0 4px 2px rgba(32,36,43,.2);
}
.hero h1 .word { display: inline-block; }
.hero h1 .ln { display: block; }
.hero h1 .stamp { color: var(--accent-text); position: relative; }
.hero-letter {
  display: inline-block; opacity: 0; transform: translateY(.28em) rotate(-4deg);
  animation: letter-press .5s var(--ease-press) forwards;
}
@keyframes letter-press {
  0%   { opacity: 0; transform: translateY(-.4em) rotate(3deg) scale(1.05); }
  60%  { opacity: 1; transform: translateY(.05em) rotate(-1deg) scale(.99); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
.hero-sub { font-size: clamp(1.05rem, 2.4vw, 1.32rem); color: var(--ink-soft); max-width: 46ch; margin-bottom: 26px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }

.trust-strip { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.trust-strip li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 600; color: var(--ink-soft);
  background: var(--surface); border: 1.5px solid var(--line-strong);
  padding: 6px 12px; border-radius: 40px;
}
.trust-strip li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); }

/* poster plaque composite */
.hero-plate {
  position: relative; border: 3px solid var(--ink); border-radius: 4px;
  background: var(--ink); box-shadow: 10px 12px 0 rgba(32,36,43,.28);
  overflow: hidden; aspect-ratio: 4/5;
  --mx: 50%; --my: 40%;
}
.hero-plate img { width: 100%; height: 100%; object-fit: cover; }
.hero-plate::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(220px 220px at var(--mx) var(--my), rgba(255,255,255,.42), rgba(255,255,255,0) 70%);
  mix-blend-mode: soft-light; transition: background .12s linear;
}
.hero-plate .plate-tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  background: var(--surface); border: 2px solid var(--ink); color: var(--ink);
  font-family: var(--serif); font-weight: 800; font-size: .82rem;
  padding: 6px 12px; border-radius: 2px; box-shadow: 3px 3px 0 var(--accent);
}
/* live typed overlay on plate */
.plate-overlay {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  padding: 12%;
}
.plate-overlay .lp-text {
  font-family: var(--serif); font-weight: 800; color: #f4ecd6;
  text-align: center; line-height: 1.06; letter-spacing: -.01em;
  text-shadow: 0 1px 0 rgba(0,0,0,.5), 0 -1px 0 rgba(255,255,255,.25), 0 2px 6px rgba(0,0,0,.4);
  word-break: break-word; overflow-wrap: anywhere;
}

/* ============================================================
   STAT ROW (woven into hero band)
   ============================================================ */
.mini-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px;
  margin-top: clamp(28px,4vw,40px);
}
.mini-facts .fact { border-top: 2px solid var(--ink); padding-top: 12px; }
.mini-facts .num {
  font-family: var(--serif); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--accent-text); font-variant-numeric: tabular-nums; display: block; line-height: 1.1;
  min-width: 4ch;
}
.mini-facts .lbl { font-size: .8rem; color: var(--ink-soft); letter-spacing: .02em; }
@media (max-width: 560px){ .mini-facts { grid-template-columns: repeat(3,1fr); gap: 10px; } .mini-facts .lbl{ font-size:.72rem; } }

/* ============================================================
   URUNLER — product/price grid
   ============================================================ */
.urun-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
@media (max-width: 900px){ .urun-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }
.urun-card {
  min-width: 0; background: var(--surface); border: 2px solid var(--ink); border-radius: 4px;
  overflow: hidden; box-shadow: 5px 6px 0 rgba(32,36,43,.14);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
  display: flex; flex-direction: column;
}
.urun-card:hover { transform: translateY(-5px); box-shadow: 8px 12px 0 var(--accent); }
.urun-media { position: relative; aspect-ratio: 5/4; overflow: hidden; border-bottom: 2px solid var(--ink); }
.urun-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.urun-card:hover .urun-media img { transform: scale(1.05); }
.urun-price-badge {
  position: absolute; right: 10px; top: 10px; background: var(--ink); color: var(--surface);
  font-family: var(--serif); font-weight: 800; padding: 6px 12px; border-radius: 2px;
  box-shadow: 3px 3px 0 var(--accent); font-variant-numeric: tabular-nums;
}
.urun-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.urun-body h3 { font-size: 1.4rem; margin: 0; }
.urun-body p { color: var(--ink-soft); font-size: .96rem; margin: 0; }
.urun-feats { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.urun-feats li { position: relative; padding-left: 18px; font-size: .9rem; color: var(--ink); }
.urun-feats li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--accent-2); border-radius: 50%; }
.urun-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-top: 1px dashed var(--line-strong); }
.urun-foot .from { font-size: .78rem; color: var(--ink-faint); letter-spacing: .04em; text-transform: uppercase; }
.urun-foot .val { font-family: var(--serif); font-weight: 800; font-size: 1.5rem; color: var(--accent-text); font-variant-numeric: tabular-nums; }

/* ============================================================
   KISISEL — personalization tool
   ============================================================ */
.tool-grid { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
@media (min-width: 960px){ .tool-grid { grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 40px; } }

.tool-panel { min-width: 0; }
.tool-block { margin-bottom: 24px; }
.tool-block > .lg-label { display: block; font-family: var(--serif); font-weight: 800; font-size: 1.02rem; margin-bottom: 12px; }
.tool-block .hint { font-size: .8rem; color: var(--ink-faint); font-weight: 400; font-family: var(--body); }

.type-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
@media (max-width: 520px){ .type-row { grid-template-columns: 1fr; } }
.type-card {
  min-width: 0; text-align: left; cursor: pointer; user-select: none;
  border: 2px solid var(--line-strong); border-radius: 3px; background: var(--surface);
  padding: 12px 14px; transition: border-color .18s, background .18s, transform .16s var(--ease-press);
}
.type-card:hover { transform: translateY(-2px); }
.type-card[aria-pressed="true"] { border-color: var(--ink); background: var(--surface-2); box-shadow: 3px 3px 0 var(--accent); }
.type-card .tc-name { font-family: var(--serif); font-weight: 800; font-size: 1rem; display: block; }
.type-card .tc-price { font-size: .85rem; color: var(--accent-text); font-variant-numeric: tabular-nums; }

.field { display: block; margin-bottom: 6px; }
.field .fl { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; }
.field .fl .hint { font-weight: 400; font-size: .8rem; color: var(--ink-faint); }
.field input[type="text"],
.field input[type="date"],
.field select,
.field textarea {
  width: 100%; font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 2px solid var(--line-strong); border-radius: 3px;
  padding: 12px 14px; transition: border-color .18s, box-shadow .18s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ink); box-shadow: 3px 3px 0 var(--accent-2);
}
.field textarea { min-height: 92px; resize: vertical; }
.field .fl .cc { float: right; color: var(--ink-faint); font-weight: 400; font-variant-numeric: tabular-nums; }
.tool-warn { font-size: .82rem; color: var(--accent-text); font-weight: 600; min-height: 1.2em; margin-top: 4px; }

.swatch-row { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch {
  width: 46px; height: 46px; border-radius: 3px; cursor: pointer; padding: 0;
  border: 2px solid var(--ink); position: relative; transition: transform .16s var(--ease-press);
}
.swatch:hover { transform: translateY(-2px); }
.swatch[aria-pressed="true"]::after {
  content: "✓"; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }

/* preview */
.tool-preview { position: sticky; top: calc(var(--header-h) + 16px); }
.preview-frame {
  position: relative; border: 3px solid var(--ink); border-radius: 4px; overflow: hidden;
  aspect-ratio: 4/5; background: var(--ink); box-shadow: 8px 10px 0 rgba(32,36,43,.24);
  --mx: 50%; --my: 40%;
}
.preview-frame img { width: 100%; height: 100%; object-fit: cover; }
.preview-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(200px 200px at var(--mx) var(--my), rgba(255,255,255,.4), rgba(255,255,255,0) 70%);
  mix-blend-mode: soft-light; transition: background .12s linear;
}
.preview-inner {
  position: absolute; inset: 8%; z-index: 1; display: grid; place-items: center;
  border: 3px solid rgba(244,236,214,.85); border-radius: 4px;
  transition: border-color .3s, box-shadow .3s;
}
.preview-inner.frame-lale { border-style: double; border-width: 6px; }
.preview-inner.frame-karanfil { border-style: dashed; }
.preview-inner.frame-rumi { border-style: solid; box-shadow: inset 0 0 0 3px rgba(244,236,214,.4); }
.preview-inner.frame-duz { border-color: rgba(244,236,214,.55); }
.pv-text {
  font-family: var(--serif); font-weight: 800; text-align: center; line-height: 1.05;
  padding: 10%; letter-spacing: -.01em; word-break: break-word; overflow-wrap: anywhere;
  text-shadow: 0 1px 0 rgba(0,0,0,.5), 0 -1px 0 rgba(255,255,255,.22), 0 3px 8px rgba(0,0,0,.4);
  animation: press-in .28s var(--ease-press);
}
.pv-date { font-family: var(--body); font-weight: 400; font-size: .5em; opacity: .92; display: block; margin-top: .4em; letter-spacing: .04em; }
@keyframes press-in { from { transform: scale(1.08); opacity: .3; } to { transform: scale(1); opacity: 1; } }

.price-readout {
  margin-top: 18px; border: 2px solid var(--ink); border-radius: 4px; background: var(--surface);
  padding: 16px 18px; box-shadow: 5px 5px 0 var(--accent);
}
.price-readout .pr-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .9rem; color: var(--ink-soft); padding: 3px 0; }
.price-readout .pr-total { border-top: 2px solid var(--ink); margin-top: 8px; padding-top: 10px; }
.price-readout .pr-total .lab { font-family: var(--serif); font-weight: 800; font-size: 1rem; color: var(--ink); }
.price-readout .pr-total .val { font-family: var(--serif); font-weight: 800; font-size: 1.8rem; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.price-readout .disc { font-size: .74rem; color: var(--ink-faint); margin-top: 8px; }
.price-readout .btn { width: 100%; margin-top: 12px; }

/* ============================================================
   GALERI — editorial masonry-ish
   ============================================================ */
.galeri-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
@media (max-width: 900px){ .galeri-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .galeri-grid { grid-template-columns: 1fr; } }
.gal-item {
  position: relative; min-width: 0; border: 2px solid var(--ink); border-radius: 4px; overflow: hidden;
  aspect-ratio: 1/1; box-shadow: 4px 5px 0 rgba(32,36,43,.14);
}
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gal-item:hover img { transform: scale(1.06); }
.gal-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px;
  background: linear-gradient(transparent, rgba(32,36,43,.86));
  color: var(--surface); display: flex; justify-content: space-between; align-items: end; gap: 8px;
}
.gal-cap .t { font-family: var(--serif); font-weight: 800; font-size: 1rem; line-height: 1.1; }
.gal-cap .p { font-size: .82rem; color: #F0C9BB; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================================================
   PAKET — gift box editorial split
   ============================================================ */
.paket-split { display: grid; grid-template-columns: 1fr; gap: clamp(24px,4vw,44px); align-items: center; }
@media (min-width: 900px){ .paket-split { grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); } }
.paket-media { min-width: 0; border: 3px solid var(--surface); border-radius: 4px; overflow: hidden; box-shadow: 10px 12px 0 rgba(0,0,0,.3); aspect-ratio: 4/3; }
.paket-media img { width: 100%; height: 100%; object-fit: cover; }
.paket-copy { min-width: 0; }
.paket-copy h2 { font-size: clamp(2rem,5vw,3.2rem); }
.paket-list { margin: 18px 0 24px; display: grid; gap: 10px; }
.paket-list li { position: relative; padding-left: 26px; color: #E7E2D6; }
.paket-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; border: 2px solid var(--accent); background: transparent; transform: rotate(45deg); }
.paket-price { font-family: var(--serif); font-weight: 800; font-size: 2rem; color: #F3C6B7; font-variant-numeric: tabular-nums; }

/* ============================================================
   PROCESS — vertical timeline
   ============================================================ */
.timeline { max-width: 820px; margin: 0 auto; display: grid; gap: 4px; }
.tl-step { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 20px; padding: 22px 0; border-bottom: 1px dashed var(--line-strong); }
.tl-step:last-child { border-bottom: 0; }
.tl-num { font-family: var(--serif); font-weight: 800; font-size: 1.5rem; color: var(--surface); background: var(--ink); width: 52px; height: 52px; display: grid; place-items: center; border-radius: 3px; box-shadow: 3px 3px 0 var(--accent); font-variant-numeric: tabular-nums; }
.tl-body { min-width: 0; }
.tl-body h3 { font-size: 1.25rem; margin-bottom: 4px; }
.tl-body .when { display: inline-block; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2-tx); font-weight: 700; margin-bottom: 6px; }
.tl-body p { color: var(--ink-soft); margin: 0; font-size: .96rem; }

/* ============================================================
   TESTIMONIALS — irregular editorial grid
   ============================================================ */
.ref-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
@media (max-width: 900px){ .ref-grid { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; } }
.ref-card { min-width: 0; border: 2px solid var(--ink); border-radius: 4px; background: var(--surface); padding: 22px; box-shadow: 4px 5px 0 rgba(32,36,43,.12); }
.ref-card:nth-child(2){ background: var(--surface-2); }
.ref-card .q { font-size: 1rem; color: var(--ink); margin-bottom: 14px; }
.ref-card .who { font-family: var(--serif); font-weight: 800; font-size: .96rem; }
.ref-card .meta { font-size: .8rem; color: var(--ink-faint); }
.ref-stars { color: var(--accent); letter-spacing: 2px; margin-bottom: 10px; font-size: .9rem; }

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

/* ============================================================
   NOTES — son eklenenler
   ============================================================ */
.notes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
@media (max-width: 760px){ .notes { grid-template-columns: 1fr; } }
.note { min-width: 0; border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; }
.note .d { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2-tx); font-weight: 700; }
.note h4 { font-size: 1.05rem; margin: 4px 0 4px; }
.note p { font-size: .9rem; color: var(--ink-soft); margin: 0; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 16px; }
.contact-card { min-width: 0; border: 2px solid var(--ink); border-radius: 4px; background: var(--surface); padding: 22px; box-shadow: 4px 5px 0 rgba(32,36,43,.12); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.contact-card:hover { transform: translateY(-3px); box-shadow: 6px 9px 0 var(--accent); }
.contact-card .cc-ico { width: 48px; height: 48px; border-radius: 3px; background: var(--surface-2); border: 2px solid var(--ink); display: grid; place-items: center; font-family: var(--serif); font-weight: 800; font-size: 1.2rem; color: var(--accent-text); margin-bottom: 12px; }
.contact-card h3 { font-size: 1.1rem; margin-bottom: 4px; }
.contact-card a { font-weight: 600; color: var(--accent-2-tx); word-break: break-word; }
.contact-card .sub { font-size: .84rem; color: var(--ink-faint); margin-top: 4px; }

.hours-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 8px; margin-top: 10px; }
.hours-grid .day { border: 1.5px solid var(--line-strong); border-radius: 3px; padding: 10px 12px; background: var(--surface); display: flex; justify-content: space-between; gap: 8px; font-size: .9rem; }
.hours-grid .day.today { border-color: var(--ink); background: var(--surface-2); box-shadow: 3px 3px 0 var(--accent); }
.hours-grid .day .t { font-variant-numeric: tabular-nums; color: var(--ink-soft); }

/* forms */
.form-wrap { border: 2px solid var(--ink); border-radius: 4px; background: var(--surface); padding: clamp(20px,4vw,34px); box-shadow: 6px 8px 0 rgba(32,36,43,.14); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px){ .form-row { grid-template-columns: 1fr; } }
.form-wrap .field { margin-bottom: 16px; }
.field.kvkk { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: .9rem; color: var(--ink-soft); }
.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-wrap .btn-primary { width: 100%; }
@media (min-width: 620px){ .form-wrap .btn-primary { width: auto; } }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--ink); color: #D9D4C7; border-top: 3px solid var(--accent); padding: clamp(44px,6vw,72px) 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; }
@media (max-width: 820px){ .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--surface); font-size: 1rem; margin-bottom: 14px; letter-spacing: .02em; }
.site-footer .fbrand { font-family: var(--serif); font-weight: 800; font-size: 1.5rem; color: var(--surface); }
.site-footer .fbrand b { color: #F3C6B7; }
.site-footer p { color: #B7B2A5; font-size: .92rem; }
.footer-grid a { display: block; color: #D9D4C7; padding: 5px 0; font-size: .92rem; }
.footer-grid a:hover { color: #F3C6B7; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: 34px; padding-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .8rem; color: #918D82; }
.footer-legal a { display: inline; color: #B7B2A5; margin-right: 14px; }
.footer-legal a:hover { color: #F3C6B7; }

/* ============================================================
   COOKIE
   ============================================================ */
.cookie-banner {
  position: fixed; bottom: 16px; left: 16px; right: 16px; max-width: 520px; margin: 0 auto;
  background: var(--surface); border: 2px solid var(--ink); border-radius: 6px;
  box-shadow: 8px 10px 0 rgba(32,36,43,.3); padding: 20px; z-index: 9999;
  transform: translateY(140%); opacity: 0;
  transition: transform .28s var(--ease), opacity .24s;
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
@media (min-width: 720px){ .cookie-banner { left: 24px; right: auto; max-width: 420px; } }
.cookie-banner h3 { font-size: 1.1rem; margin-bottom: 6px; }
.cookie-banner p { font-size: .88rem; color: var(--ink-soft); margin-bottom: 14px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-actions button {
  flex: 1 1 auto; min-height: 44px; font-family: var(--serif); font-weight: 700; font-size: .9rem;
  border: 2px solid var(--ink); border-radius: 3px; cursor: pointer; padding: 8px 14px;
  transition: background .18s, color .18s, transform .14s var(--ease-press);
}
.cookie-actions [data-consent="accept"] { background: var(--accent); color: var(--surface); }
.cookie-actions [data-consent="accept"]:hover { background: var(--ink); color: var(--surface); }
.cookie-actions [data-consent="reject"] { background: var(--surface); color: var(--ink); }
.cookie-actions [data-consent="reject"]:hover { background: var(--surface-2); color: var(--ink); }
.cookie-actions [data-consent="settings"] { background: transparent; color: var(--ink); flex-basis: 100%; }
.cookie-actions [data-consent="settings"]:hover { background: var(--surface-2); }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.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 { padding: calc(var(--header-h) + clamp(36px,6vw,64px)) 0 clamp(30px,5vw,56px); border-bottom: 2px solid var(--ink); background: var(--surface); position: relative; }
.page-hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
.page-hero p { color: var(--ink-soft); max-width: 62ch; font-size: 1.05rem; }

/* prose */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(1.5rem,3.5vw,2.1rem); margin-top: 1.8em; }
.prose h3 { font-size: 1.2rem; margin-top: 1.4em; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul { margin: 0 0 1em; padding-left: 4px; }
.prose ul li { position: relative; padding-left: 20px; margin-bottom: 6px; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }
.prose a { color: var(--accent-2-tx); text-decoration: underline; }

/* tables */
.table-scroll {
  display: block; width: 100%; max-width: 100%; min-width: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 18px 0;
  border: 2px solid var(--ink); border-radius: 4px;
}
.table-scroll > table { margin: 0 !important; min-width: 480px; width: 100%; border-collapse: collapse; }
:where(*:has(> .table-scroll), *:has(> * > .table-scroll), *:has(> * > * > .table-scroll)) { min-width: 0; }
.table-scroll th, .table-scroll td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: .92rem; }
.table-scroll th { background: var(--surface-2); font-family: var(--serif); font-weight: 800; }
.table-scroll tr:last-child td { border-bottom: 0; }

/* team */
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
@media (max-width: 820px){ .team-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.team-card { min-width: 0; border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; background: var(--surface); box-shadow: 4px 5px 0 rgba(32,36,43,.12); }
.team-media { aspect-ratio: 4/5; overflow: hidden; border-bottom: 2px solid var(--ink); }
.team-media img { width: 100%; height: 100%; object-fit: cover; }
.team-body { padding: 18px; }
.team-body h3 { font-size: 1.2rem; margin-bottom: 2px; }
.team-body .role { font-size: .82rem; color: var(--accent-2-tx); font-weight: 700; letter-spacing: .04em; margin-bottom: 8px; }
.team-body p { font-size: .9rem; color: var(--ink-soft); margin: 0; }

/* pricing packages */
.pkg-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
@media (max-width: 900px){ .pkg-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }
.pkg { min-width: 0; border: 2px solid var(--ink); border-radius: 4px; background: var(--surface); padding: 24px; display: flex; flex-direction: column; box-shadow: 5px 6px 0 rgba(32,36,43,.14); }
.pkg.feat { background: var(--surface-2); box-shadow: 6px 8px 0 var(--accent); }
.pkg h3 { font-size: 1.4rem; }
.pkg .p { font-family: var(--serif); font-weight: 800; font-size: 2rem; color: var(--accent-text); font-variant-numeric: tabular-nums; margin: 6px 0 4px; }
.pkg .term { font-size: .8rem; color: var(--ink-faint); margin-bottom: 14px; }
.pkg ul { display: grid; gap: 8px; margin-bottom: 8px; }
.pkg li { position: relative; padding-left: 20px; font-size: .92rem; color: var(--ink); }
.pkg li::before { content: "+"; position: absolute; left: 0; color: var(--accent-2); font-weight: 800; }
.pkg li.no { color: var(--ink-faint); }
.pkg li.no::before { content: "–"; color: var(--ink-faint); }
.pkg .btn { margin-top: auto; }

/* section intro helper */
.lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 62ch; }

/* util */
.mt0 { margin-top: 0; }
.center { text-align: center; }
.stack-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }

.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)
   Palette kept: cobalt (--accent-2) + coral (--accent) · Space Grotesk
   ############################################################ */

/* ---------- helpers ---------- */
.section-title{font-family:var(--serif);font-weight:800;line-height:1.12;letter-spacing:-.012em;
  color:var(--ink);font-size:clamp(2rem,5.2vw,3.4rem)}
.eyebrow-block{margin-bottom:16px}
.num{font-variant-numeric:tabular-nums}
.btn .arw{display:inline-block;transition:transform .2s var(--ease)}
.btn:hover .arw,.nav-cta:hover .arw{transform:translateX(4px)}

/* ---------- GLAZE SIGNATURE: wet 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-cobalt.glaze::after,.tilewall.glaze::after,.frame.glaze::after,.btn-glaze::after{
  background:radial-gradient(56% 48% at var(--mx,50%) var(--my,-12%),rgba(238,222,250,.5),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}}

/* ---------- COBALT GLAZE BAND (deep İznik sır surface) ---------- */
.band-cobalt{color:#F3E9FB;overflow:hidden;background-color:var(--plum);
  background-image:linear-gradient(rgba(46,22,54,.76),rgba(34,16,42,.84)),url('../images/sir-mor.jpg');
  background-size:cover;background-position:center;border:0}
.band-cobalt .eyebrow,.band-cobalt .eyebrow.engrave{color:#D9B8E4}
.band-cobalt .eyebrow::before{background:var(--accent)}
.on-dark{color:#fff}
.engrave{color:#D9B8E4;text-shadow:0 1px 0 rgba(0,0,0,.5),0 -1px 0 rgba(255,255,255,.06)}

/* ---------- SEAM: authentic İznik polychrome motif border as divider ---------- */
.seam{height:clamp(46px,6.5vw,74px);background-color:#efe5cd;
  background-image:url('../images/bordur-polikrom.jpg');background-size:auto 120%;
  background-position:center;background-repeat:repeat-x;
  border-block:1px solid rgba(90,58,99,.3)}
.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 cobalt frame + gloss) ---------- */
.frame{position:relative;overflow:hidden;border-radius:4px;--mx:50%;--my:40%;
  box-shadow:0 26px 52px -30px rgba(43,22,55,.6),
    inset 0 0 0 3px rgba(90,58,99,.6),inset 0 0 0 4px rgba(255,255,255,.18),inset 0 0 0 5px rgba(43,22,55,.3)}
.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(43,22,55,.88);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(--accent);color:#fff;
  font-family:var(--body);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 11px;border-radius:2px}

/* ---------- HERO (full-bleed cobalt glaze, motif-framed) ---------- */
.hero{position:relative;display:flex;align-items:center;min-height:86vh;overflow:hidden;border:0;
  padding-block:calc(var(--header-h) + clamp(46px,6vw,74px) + clamp(24px,4vw,48px)) calc(clamp(46px,6.5vw,74px) + clamp(24px,4vw,48px));
  background-image:linear-gradient(rgba(46,22,54,.76),rgba(34,16,42,.84)),url('../images/sir-mor.jpg')}
.hero .container{width:100%}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero-copy{min-width:0}
.hero .eyebrow{margin-bottom:18px}
.hero h1{font-family:var(--serif);font-weight:800;color:#FBF3E1;
  font-size:clamp(2.9rem,8vw,5.4rem);line-height:1.02;letter-spacing:-.02em;margin:0 0 20px;
  text-shadow:0 2px 0 rgba(0,0,0,.28),0 24px 50px rgba(0,0,0,.4)}
.hero h1 .ln{display:block}
.hero h1 .stamp{color:#6FD3D6}
.hero .hero-sub{font-size:clamp(1.06rem,1.7vw,1.3rem);line-height:1.6;color:#E3D0EC;max-width:46ch;margin-bottom:26px}
.hero .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.hero .trust-strip{display:flex;flex-wrap:wrap;gap:10px 8px}
.hero .trust-strip li{font-size:.78rem;font-weight:600;color:#E7D8EF;
  background:rgba(255,255,255,.08);border:1px solid rgba(200,170,215,.4);
  padding:7px 13px;border-radius:100px}
.hero .trust-strip li::before{background:var(--accent)}
/* hero plate — real personalized-tile photo, cobalt frame + live overlay */
.hero-plate{justify-self:center;width:100%;max-width:430px;
  border:0;border-radius:4px;background:var(--plum);aspect-ratio:4/5;
  box-shadow:0 30px 60px -28px rgba(34,16,42,.75),
    inset 0 0 0 3px rgba(90,58,99,.68),inset 0 0 0 4px rgba(255,255,255,.18),inset 0 0 0 5px rgba(43,22,55,.3)}
.hero-plate::after{background:radial-gradient(220px 220px at var(--mx) var(--my),rgba(238,224,250,.5),rgba(255,255,255,0) 70%);
  mix-blend-mode:screen}
.hero-plate .plate-tag{background:var(--surface);border:0;color:var(--ink);box-shadow:0 6px 16px -8px rgba(34,16,42,.7)}

/* ---------- PANOLAR / GALLERY (uniform glazed-tile grid) ---------- */
.panolar{background:var(--surface)}
.pano-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,48px)}
.pano-head p{max-width:44ch;color:var(--ink-soft);margin:0}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,32px)}
.gcard{display:flex;flex-direction:column;min-width:0}
.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-weight:800;font-size:clamp(1.3rem,2vw,1.55rem);
  line-height:1.14;color:var(--ink);margin:0 0 8px}
.gcard-body p{font-size:.92rem;color:var(--ink-soft);margin:0 0 14px}
.gprice{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:14px;border-top:1px dashed var(--line-strong)}
.gprice .amt{font-family:var(--serif);font-weight:800;font-size:1.3rem;color:var(--accent-2-tx)}
.gprice small{font-size:.78rem;color:var(--ink-faint)}

/* ---------- TASARLA — the tool, as a glaze panel ---------- */
.tool-section{background-color:var(--surface-2);
  background-image:linear-gradient(rgba(251,243,225,.82),rgba(241,223,188,.82)),url('../images/sir-krem.jpg');
  background-size:cover;background-position:center;overflow:hidden}
.tool-section .section-head{max-width:720px;margin-bottom:clamp(28px,4vw,44px)}
.tool-grid.glaze{background:var(--surface);border:2px solid var(--ink);border-radius:4px;
  padding:clamp(20px,3vw,36px);box-shadow:8px 10px 0 rgba(213,72,43,.22),0 30px 60px -40px rgba(43,22,55,.5)}
.tool-grid.glaze > *{position:relative;z-index:3}
.tool-grid.glaze::before,.tool-grid.glaze::after{border-radius:4px}
/* preview surface -> glaze gloss + scanner-safe plum backing */
.preview-frame{background-image:linear-gradient(rgba(43,22,55,.15),rgba(43,22,55,.15));border-color:var(--plum)}
.preview-frame::after{background:radial-gradient(200px 200px at var(--mx) var(--my),rgba(238,224,250,.46),rgba(255,255,255,0) 70%);
  mix-blend-mode:screen}
.price-readout{box-shadow:5px 5px 0 var(--accent-2)}

/* ---------- 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 rgba(90,58,99,.3)}
.tilewall-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(34,16,42,.86),rgba(34,16,42,.34) 58%,rgba(34,16,42,.74))}
.tilewall-line{font-family:var(--serif);font-weight:800;color:#fff;
  font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.22;max-width:24ch;margin:0;
  text-shadow:0 2px 26px rgba(0,0,0,.6)}

/* ---------- NASIL / ATÖLYE (cobalt band + pull-quote) ---------- */
.atolye-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,60px);align-items:center}
.atolye-copy p{color:#E3D0EC;font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.7}
.pullquote{font-family:var(--serif);font-weight:800;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(--accent)}
.pullquote .hl{color:#6FD3D6}
.pullquote cite{display:block;font-family:var(--body);font-style:normal;font-weight:600;font-size:.9rem;
  color:#CDA9DA;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}

/* ---------- HEDIYE — elegant price list beside photo ---------- */
.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{min-width:0}
.price-list-wrap .price-intro{color:var(--ink-soft);margin:14px 0 6px;max-width:52ch}
.price-list{margin:18px 0 26px;border-top:2px 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-weight:800;font-size:clamp(1.25rem,2vw,1.5rem);
  color:var(--accent-2-tx);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;text-align:center;
  padding-block:calc(clamp(64px,9vw,110px) + clamp(24px,4vw,48px))}
.cta-inner{max-width:58ch;margin-inline:auto}
.cta-inner .eyebrow{justify-content:center;margin-bottom:16px}
.cta-title{font-family:var(--serif);font-weight:800;color:#fff;
  font-size:clamp(2rem,4.8vw,3.3rem);line-height:1.12;margin-bottom:16px;text-shadow:0 2px 30px rgba(0,0,0,.42)}
.cta-band p{color:#E3D0EC;margin-bottom:28px;margin-inline:auto;max-width:52ch}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- BUTTONS: glaze variants ---------- */
.btn-glaze{position:relative;overflow:hidden;color:#fff;border:2px solid transparent;--mx:50%;--my:-12%;
  background-color:var(--plum-2);background-image:linear-gradient(180deg,#7A3E8E,#4A2456);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 12px 26px -14px rgba(43,22,55,.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,#8A4CA0,#5A2E6B);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 18px 34px -16px rgba(90,58,99,.9)}
.btn-glaze:active{transform:translateY(0)}
.btn-ghost-glaze{background:rgba(255,255,255,.07);color:#F3E9FB;border:2px solid rgba(210,180,225,.55)}
.btn-ghost-glaze:hover,.btn-ghost-glaze:focus-visible{background:rgba(255,255,255,.15);color:#fff;border-color:#fff;transform:translateY(-2px)}
.nav-cta.btn-glaze{color:#fff !important;border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),3px 3px 0 rgba(43,22,55,.3)}
.nav-cta.btn-glaze:hover{color:#fff !important;background-image:linear-gradient(180deg,#8A4CA0,#5A2E6B);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),3px 3px 0 var(--ink)}
.drawer .nav-cta.btn-glaze{margin-top:20px}

/* ---------- SUB-PAGE glaze skin (page-hero motif seam) ---------- */
.page-hero{position:relative;overflow:hidden;
  background-color:var(--surface);
  background-image:linear-gradient(rgba(251,243,225,.86),rgba(242,227,198,.9)),url('../images/sir-krem.jpg');
  background-size:cover;background-position:center}
.page-hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(40px,5vw,60px);z-index:2;
  background-color:#efe5cd;background-image:url('../images/bordur-polikrom.jpg');background-size:auto 120%;
  background-position:center;background-repeat:repeat-x;border-top:1px solid rgba(90,58,99,.3)}
.page-hero > .container{position:relative;z-index:3}

/* ---------- RESPONSIVE (new components; appended -> wins) ---------- */
@media (max-width:1024px){
  .hero{min-height:auto}
  .hero-grid,.atolye-grid,.price-grid2{grid-template-columns:1fr;gap:34px}
  .hero-plate{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:24px}
  .hero h1{font-size:clamp(2.6rem,13vw,4rem)}
  .price-row{flex-direction:column;gap:6px}
  .price-row dd{align-self:flex-start}
  .atolye-media{grid-template-columns:1fr}
  .pano-head{gap:12px}
}

/* ---------- contrast fixes (shared) ---------- */
.btn-primary{background:var(--accent-text)}
.cookie-actions [data-consent="accept"]{background:var(--accent-text)}
.frame-tag{background:var(--accent-text)}
.table-scroll th{color:var(--ink)}
.pkg .term,.pkg li.no{color:var(--ink-soft)}

/* ############################################################
   ADINACINI — CONFIGURATOR-FIRST GIFT-SHOP (index only)
   Bright, joyful, rounded. Hero = live personalization studio.
   Scoped to new classes (.cfg-*, .gift-*, .how-*) so sub-pages
   are untouched. Appended last -> wins by order.
   ############################################################ */

/* ---------- HERO becomes a tall configurator, not a centered lockup ---------- */
.hero.cfg{display:block;min-height:auto;align-items:stretch;
  padding-block:calc(var(--header-h) + clamp(26px,4.5vw,52px)) clamp(64px,8vw,104px)}
.cfg-head{max-width:760px;margin:0 auto clamp(26px,3.5vw,40px);text-align:center}
.cfg-head .eyebrow{justify-content:center}
.hero.cfg h1{font-size:clamp(2.5rem,6.4vw,4.3rem);margin:0 0 16px}
.hero.cfg .hero-sub{margin:0 auto 20px;max-width:56ch}
.cfg-head .trust-strip{justify-content:center}

/* ---------- THE STUDIO: one bright app-card on the plum ground ---------- */
.cfg-studio{position:relative;display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(20px,2.6vw,34px);align-items:start;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:26px;
  padding:clamp(18px,2.4vw,30px);
  box-shadow:0 40px 80px -36px rgba(34,16,42,.8),0 0 0 1px rgba(255,255,255,.5) inset}
.cfg-studio > *{position:relative;z-index:3}
.cfg-studio::before,.cfg-studio::after{border-radius:26px}
@media (max-width:900px){
  .cfg-studio{grid-template-columns:1fr;gap:22px}
  .cfg-stage{order:-1}
}

/* stage (live plaque + price) */
.cfg-stage{min-width:0;display:flex;flex-direction:column;gap:14px}
.cfg-stage-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cfg-live{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:700;
  font-size:.8rem;letter-spacing:.04em;color:var(--accent-2-tx)}
.cfg-live .dot{width:9px;height:9px;border-radius:50%;background:#1F9B5E;
  box-shadow:0 0 0 0 rgba(31,155,94,.5);animation:cfg-pulse 1.8s var(--ease) infinite}
@keyframes cfg-pulse{0%{box-shadow:0 0 0 0 rgba(31,155,94,.5)}70%{box-shadow:0 0 0 8px rgba(31,155,94,0)}100%{box-shadow:0 0 0 0 rgba(31,155,94,0)}}
@media (prefers-reduced-motion:reduce){.cfg-live .dot{animation:none}}
.cfg-hint{font-size:.76rem;color:var(--ink-faint);font-weight:600}
.cfg-stage .preview-frame{width:100%;max-width:none;aspect-ratio:4/5;border-radius:18px}
.cfg-stage .preview-inner{border-radius:14px}
.cfg-stage .price-readout{margin-top:0;border-radius:16px;box-shadow:5px 5px 0 var(--accent-2)}

/* panel (playful controls) */
.cfg-panel{min-width:0;display:flex;flex-direction:column;gap:clamp(16px,2vw,22px)}
.cfg-block{min-width:0}
.cfg-step{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:800;
  font-size:1.04rem;color:var(--ink);margin-bottom:12px}
.cfg-step-inline{display:inline-flex;align-items:center;gap:8px}
.cfg-step b,.cfg-step-inline b{display:inline-grid;place-items:center;width:26px;height:26px;flex:none;
  border-radius:50%;background:var(--plum-2);color:#fff;font-family:var(--serif);font-weight:800;
  font-size:.86rem;font-style:normal}
.cfg-foot{font-size:.82rem;color:var(--ink-soft);margin:2px 0 0}

/* type chips — rounded, bright when picked */
.cfg-panel .type-row{gap:8px}
.cfg-panel .type-card{border-radius:14px;border:2px solid var(--line-strong);padding:12px 12px;
  transition:border-color .18s,background .18s,box-shadow .18s,transform .16s var(--ease-press)}
.cfg-panel .type-card:hover{transform:translateY(-2px);border-color:var(--accent-2)}
.cfg-panel .type-card[aria-pressed="true"]{border-color:var(--accent-2-tx);
  background:rgba(20,138,142,.10);box-shadow:0 8px 20px -12px rgba(12,96,100,.9)}
.cfg-panel .type-card .tc-name{font-size:.98rem}
.cfg-panel .type-card .tc-price{color:var(--accent-2-tx)}

/* inputs — friendly rounded */
.cfg-panel .field input[type="text"],
.cfg-panel .field input[type="date"],
.cfg-panel .field select{border-radius:12px;border-width:2px}
.cfg-panel .field input:focus,
.cfg-panel .field select:focus{border-color:var(--accent-2-tx);box-shadow:0 0 0 4px rgba(20,138,142,.18)}
.cfg-panel .field .fl{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cfg-panel .field .fl .cc{float:none}

/* swatches — big rounded */
.cfg-panel .swatch-row{gap:12px}
.cfg-panel .swatch{width:50px;height:50px;border-radius:14px}

/* ---------- HEDİYELER — bright gift cards ---------- */
.gift-wrap{background:var(--surface)}
.gift-head{max-width:720px;margin:0 auto clamp(30px,4vw,48px);text-align:center}
.gift-head .eyebrow{justify-content:center}
.gift-head p{color:var(--ink-soft);margin-inline:auto;max-width:56ch}
.gift-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,28px)}
@media (max-width:900px){.gift-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.gift-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
.gift-card{min-width:0;display:flex;flex-direction:column;background:var(--bg);
  border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:0 18px 40px -28px rgba(43,22,55,.55);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.gift-card:hover{transform:translateY(-6px);box-shadow:0 30px 56px -26px rgba(43,22,55,.6)}
.gift-media{position:relative;aspect-ratio:1/1;overflow:hidden;--mx:50%;--my:40%}
.gift-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gift-card:hover .gift-media img{transform:scale(1.06)}
.gift-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.gift-tag{align-self:flex-start;font-family:var(--body);font-weight:700;font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;padding:5px 11px;border-radius:100px}
.tag-mavi{background:#155E8A}
.tag-turkuaz{background:var(--accent-2-tx)}
.tag-mor{background:var(--plum-2)}
.tag-mercan{background:var(--accent-text)}
.tag-yesil{background:#3E6B4A}
.gift-body h3{font-family:var(--serif);font-weight:800;font-size:1.28rem;line-height:1.14;color:var(--ink);margin:0}
.gift-body p{font-size:.9rem;color:var(--ink-soft);margin:0}
.gift-price{margin-top:auto;padding-top:12px;font-family:var(--serif);font-weight:800;
  font-size:1.34rem;color:var(--accent-text);font-variant-numeric:tabular-nums}
.gift-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:clamp(30px,4vw,46px)}

/* ---------- NASIL OLUYOR — light 3-photo strip ---------- */
.how-wrap{background:var(--surface-2)}
.how-head{max-width:720px;margin:0 auto clamp(30px,4vw,46px);text-align:center}
.how-head .eyebrow{justify-content:center}
.how-head p{color:var(--ink-soft);margin-inline:auto;max-width:54ch}
.how-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.8vw,34px)}
@media (max-width:820px){.how-strip{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
.how-step{min-width:0;position:relative;display:flex;flex-direction:column}
.how-media{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:20px;--mx:50%;--my:40%;
  box-shadow:0 22px 44px -26px rgba(43,22,55,.55)}
.how-media img{width:100%;height:100%;object-fit:cover}
.how-num{position:absolute;top:-14px;left:18px;z-index:4;width:46px;height:46px;display:grid;place-items:center;
  border-radius:50%;background:var(--plum);color:#fff;font-family:var(--serif);font-weight:800;font-size:1.3rem;
  border:3px solid var(--surface-2);box-shadow:0 8px 18px -8px rgba(34,16,42,.7)}
.how-step h3{font-family:var(--serif);font-weight:800;font-size:1.3rem;color:var(--ink);margin:20px 0 6px}
.how-step p{font-size:.94rem;color:var(--ink-soft);margin:0}

/* ---------- drawer close X (visible, closes via existing anchor handler) ---------- */
.drawer-close{align-self:flex-end;width:44px;height:44px;display:inline-grid !important;place-items:center;
  margin:0 0 6px;padding:0 !important;border:2px solid var(--ink);border-radius:12px;background:var(--surface);
  font-family:var(--serif);font-weight:800;font-size:1.7rem;line-height:1;color:var(--ink) !important;
  border-bottom:2px solid var(--ink) !important}
.drawer-close:hover{background:var(--accent);color:#fff !important;border-color:var(--accent)}
.drawer-close span{display:block;transform:translateY(-2px)}


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