/* self-hosted fonts (restored after polish strip) */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/Fredoka-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: 'Fredoka';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/Fredoka-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: 'Fredoka';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/Fredoka-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: 'Fredoka';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/Fredoka-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: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/Fredoka-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: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/Fredoka-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: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/Fredoka-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: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/Fredoka-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/HankenGrotesk-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: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/HankenGrotesk-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: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/HankenGrotesk-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: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/HankenGrotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/HankenGrotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/HankenGrotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/HankenGrotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/HankenGrotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/HankenGrotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/HankenGrotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/HankenGrotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/HankenGrotesk-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;
}

/* ============================================================
   Katman Atölyesi — Kişiye özel dondurma pastası konfigüratörü
   Candy resin + acrylic-glass photo surfaces, glossy candy sheen
   ============================================================ */

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

:root {
  --bg: #FBF3EC;              /* cream */
  --surface: #FFFFFF;
  --surface-2: #F7EAE2;       /* strawberry-milk cream */
  --surface-3: #F1E6D8;       /* biscuit cream */
  --ink: #2A211F;             /* deep ink */
  --ink-soft: #4A3C36;
  --ink-faint: #6A574E;
  --accent: #E9A9B4;          /* strawberry-milk pink — fills, decor */
  --accent-text: #A34E5C;     /* deep rose — text on light (>=4.5) */
  --accent-2: #A7C48C;        /* pistachio — fills */
  --accent-2-text: #4F6E3B;   /* deep pistachio — text on light (>=4.5) */
  --cocoa: #7A4E36;           /* cocoa — decor / neapolitan third hue */
  --cocoa-text: #6A4230;      /* cocoa text on light */
  --line: #EBD8CC;
  --line-strong: #DFC2B2;
  --shadow-pink: 30px 40px 70px -40px rgba(163, 78, 92, .34);
  --shadow-soft: 0 18px 40px -26px rgba(42, 33, 31, .28);
  --header-h: 76px;
  --radius: 20px;
  --radius-sm: 12px;
  --font-display: 'Fredoka', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --font-body: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  --maxw: 1240px;
  --pad: clamp(18px, 4vw, 56px);
  interpolate-size: allow-keywords;
}

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;
  letter-spacing: -0.005em;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.62;
  font-size: clamp(15.5px, 1.05vw, 17px);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(167, 196, 140, .16), transparent 42%),
    radial-gradient(circle at 88% 2%, rgba(233, 169, 180, .20), transparent 40%);
  background-attachment: fixed;
}

figure, figcaption, blockquote, dl, dd { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }
a { color: var(--accent-text); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

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

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.section { padding: clamp(56px, 8vw, 120px) 0; position: relative; }
.section-head { max-width: 640px; margin-bottom: clamp(28px, 4vw, 52px); }
.section-head h2 {
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  margin: 14px 0 12px;
}
.section-head p { color: var(--ink-soft); font-size: 1.06rem; }

.lead { font-size: 1.14rem; color: var(--ink-soft); }

/* Cream brush-stroke divider */
.brush-rule {
  height: 26px;
  background:
    radial-gradient(closest-side at 6% 60%, var(--accent) 60%, transparent) 0 0/ 5% 100% no-repeat,
    radial-gradient(closest-side at 50% 40%, var(--accent-2) 62%, transparent) 40% 0/ 22% 100% no-repeat,
    radial-gradient(closest-side at 94% 55%, var(--cocoa) 60%, transparent) 100% 0/ 30% 100% no-repeat;
  opacity: .7;
  filter: blur(.3px);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  padding: 15px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.2,.7,.2,1), background .22s, color .22s, box-shadow .22s;
  text-align: center;
  line-height: 1.1;
}
.btn-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 14px 30px -16px rgba(42,33,31,.7);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: #3a2c58;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 20px 34px -14px rgba(163,78,92,.55);
}
.btn-candy {
  background: linear-gradient(135deg, var(--accent), #F4CBD3);
  color: var(--ink);
  box-shadow: 0 16px 34px -16px rgba(163,78,92,.6), inset 0 2px 0 rgba(255,255,255,.6);
}
.btn-candy:hover, .btn-candy:focus-visible { transform: translateY(-2px) rotate(-.6deg); color: var(--ink); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: var(--surface);
  color: var(--accent-text);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.btn .arw { font-size: 1.05em; transition: transform .22s; }
.btn:hover .arw { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1080;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 244, 250, 0.92);
  backdrop-filter: saturate(1.4) blur(10px);
  transition: background .24s, box-shadow .24s, height .24s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(255, 244, 250, .98);
  box-shadow: 0 8px 24px -16px rgba(42,33,31,.28);
  border-bottom-color: var(--line);
  height: 66px;
}
.header-inner {
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding-left: var(--pad); padding-right: var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.28rem;
  color: var(--ink); letter-spacing: -0.01em;
}
.brand .scoop {
  width: 30px; height: 30px; border-radius: 50% 50% 50% 8px;
  background: conic-gradient(from 210deg, var(--accent), var(--accent-2), var(--cocoa), var(--accent));
  box-shadow: inset 0 2px 3px rgba(255,255,255,.6), 0 4px 10px -4px rgba(163,78,92,.8);
  transform: rotate(-8deg);
}
.brand b { color: var(--accent-text); font-weight: 600; }

.nav-desktop { display: flex; align-items: center; gap: 8px; }
.nav-desktop a {
  position: relative;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 8px 14px;
  border-radius: 999px;
  transition: color .2s, background .2s;
}
.nav-desktop a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .24s cubic-bezier(.2,.7,.2,1);
}
.nav-desktop a:hover { color: var(--ink); }
.nav-desktop a:hover::after, .nav-desktop a.is-active::after { transform: scaleX(1); }
.nav-desktop a.is-active { color: var(--accent-text); }
.nav-desktop .nav-cta {
  color: #fff; background: var(--ink); margin-left: 8px; padding: 10px 20px;
}
.nav-desktop .nav-cta::after { display: none; }
.nav-desktop .nav-cta:hover { background: #3a2c58; color: #fff; }

/* Hamburger */
.nav-toggle {
  display: none;
  position: relative;
  width: 46px; height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  z-index: 1100;
  cursor: pointer;
}
.nav-toggle span {
  position: absolute; left: 12px; right: 12px; height: 2.5px; border-radius: 2px;
  background: var(--ink); transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .2s;
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 29px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(360px, 92vw);
  background: var(--surface);
  z-index: 1050;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.2,.7,.2,1);
  padding: calc(var(--header-h) + 20px) 26px 34px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: -20px 0 50px -30px rgba(42,33,31,.5);
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer a {
  font-family: var(--font-display); font-weight: 500; font-size: 1.22rem;
  color: var(--ink); padding: 13px 8px; border-bottom: 1px solid var(--line);
}
.drawer a.is-active { color: var(--accent-text); }
.drawer .btn { margin-top: 18px; width: 100%; }
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(42,33,31,.5);
  z-index: 1040; opacity: 0; visibility: hidden; transition: opacity .24s;
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

main { padding-top: var(--header-h); }
:where(main section[id], main [id]) { scroll-margin-top: calc(var(--header-h) + 16px); }

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

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

/* ============================================================
   HERO / CONFIGURATOR (01 — tasarla)
   ============================================================ */
.hero {
  position: relative;
  padding: clamp(30px, 5vw, 60px) 0 clamp(48px, 6vw, 80px);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 78% 12%, rgba(167,196,140,.24), transparent 42%),
    radial-gradient(circle at 8% 82%, rgba(233,169,180,.28), transparent 48%);
}
/* sugar-sprinkle decor */
.sprinkle { position: absolute; border-radius: 4px; opacity: .85; z-index: 0; pointer-events: none;
  animation: floaty 9s ease-in-out infinite; }
.sprinkle:nth-child(1){ width:14px;height:6px; background:var(--accent); top:12%; left:6%; transform:rotate(24deg); }
.sprinkle:nth-child(2){ width:12px;height:5px; background:var(--accent-2); top:22%; right:12%; transform:rotate(-32deg); animation-delay:1.2s; }
.sprinkle:nth-child(3){ width:13px;height:6px; background:var(--cocoa); bottom:26%; left:14%; transform:rotate(48deg); animation-delay:2.1s; }
.sprinkle:nth-child(4){ width:11px;height:5px; background:var(--accent-2); bottom:16%; right:8%; transform:rotate(-14deg); animation-delay:.7s; }
@keyframes floaty { 0%,100%{ transform: translateY(0) rotate(var(--r,0)); } 50%{ transform: translateY(-14px) rotate(var(--r,0)); } }

.hero-eyebrow-row { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom: 18px; }

/* vertical stack: konfigüratör above, text below */
.hero-stack { display: grid; gap: clamp(30px, 4vw, 46px); }

.config {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow-pink);
  overflow: hidden;
}
.config-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
.config-preview {
  position: relative;
  background:
    radial-gradient(circle at 50% 120%, var(--surface-2), var(--surface));
  padding: clamp(20px, 3vw, 34px);
  display: flex; flex-direction: column; gap: 16px;
  border-right: 1px solid var(--line);
}
.config-preview .live-badge {
  position: absolute; top: 18px; left: 18px; z-index: 4;
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.92); color: var(--accent-text);
  font-family: var(--font-display); font-weight:500; font-size:.72rem; letter-spacing:.06em;
  padding: 7px 13px; border-radius: 999px; box-shadow: var(--shadow-soft);
}
.config-preview .live-badge::before {
  content:""; width:8px;height:8px;border-radius:50%; background: #2fbf6b;
  box-shadow:0 0 0 0 rgba(47,191,107,.6); animation: pulse 1.8s infinite;
}
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(47,191,107,.6);} 70%{box-shadow:0 0 0 8px rgba(47,191,107,0);} 100%{box-shadow:0 0 0 0 rgba(47,191,107,0);} }

/* the cake stage — real photo + live layers */
.cake-stage {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--line), 0 20px 40px -28px rgba(42,33,31,.5);
  isolation: isolate;
}
.cake-stage .cake-base {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.cake-stage .glossy {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  mix-blend-mode: screen;
  transform: translateX(-60%);
  opacity: 0;
}
.cake-stage:hover .glossy { animation: sweep 1.1s ease; }
@keyframes sweep { 0%{transform:translateX(-60%);opacity:0;} 40%{opacity:.9;} 100%{transform:translateX(60%);opacity:0;} }

/* layers container anchored to bottom of cake */
.cake-layers {
  position: absolute; left: 12%; right: 12%; bottom: 12%;
  z-index: 3; display: flex; flex-direction: column-reverse; gap: 4px;
}
.cake-layer {
  height: 0; border-radius: 40px / 22px;
  box-shadow: inset 0 4px 6px rgba(255,255,255,.5), inset 0 -5px 8px rgba(0,0,0,.14), 0 6px 12px -6px rgba(0,0,0,.25);
  transform-origin: bottom center;
  animation: layerIn .5s cubic-bezier(.2,.9,.3,1.2) forwards;
  position: relative;
  overflow: hidden;
}
.cake-layer::after { /* candy gloss highlight */
  content:""; position:absolute; top:12%; left:10%; right:45%; height:22%;
  background: rgba(255,255,255,.5); border-radius: 999px; filter: blur(2px);
}
@keyframes layerIn {
  0% { height: 0; opacity: 0; transform: scaleX(.6) translateY(8px); }
  60% { transform: scaleX(1.05) translateY(0); }
  100% { height: var(--h, 34px); opacity: 1; transform: scaleX(1); }
}
.cake-layer.jiggle { animation: jiggle .5s ease; }
@keyframes jiggle { 0%,100%{transform:scaleX(1) skewX(0);} 25%{transform:scaleX(1.04) skewX(-3deg);} 60%{transform:scaleX(.98) skewX(2deg);} }

/* sauce drip overlay */
.cake-sauce {
  position: absolute; left: 12%; right: 12%; z-index: 4;
  height: 30px; border-radius: 0 0 30px 30px / 0 0 40px 40px;
  opacity: 0; transition: opacity .4s, bottom .4s;
  bottom: 12%;
  filter: drop-shadow(0 6px 4px rgba(0,0,0,.18));
}
.cake-sauce.on { opacity: .96; }
.cake-sauce::before, .cake-sauce::after {
  content:""; position:absolute; top:100%; width:14px; border-radius:0 0 14px 14px;
  background: inherit;
}
.cake-sauce::before { left: 22%; height: 20px; }
.cake-sauce::after { right: 30%; height: 30px; }

/* custom text on cake */
.cake-text {
  position: absolute; left: 8%; right: 8%; top: 16%; z-index: 6;
  text-align: center; font-family: var(--font-display); font-weight: 600;
  color: #fff; font-size: clamp(.9rem, 2.4vw, 1.3rem); line-height: 1.15;
  text-shadow: 0 1px 0 rgba(0,0,0,.25), 0 3px 8px rgba(0,0,0,.3);
  opacity: 0; transform: translateY(-6px); transition: opacity .35s, transform .35s;
  word-break: break-word;
}
.cake-text.on { opacity: 1; transform: translateY(0); }

.preview-caption { text-align:center; }
.preview-caption .persons { font-family:var(--font-display); font-weight:500; color: var(--ink); }
.preview-caption .small { font-size:.82rem; color: var(--ink-soft); }

/* config controls */
.config-controls {
  padding: clamp(20px, 3vw, 32px);
  display: flex; flex-direction: column; gap: 22px;
}
.ctrl-block { }
.ctrl-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-family: var(--font-display); font-weight: 500; font-size: .95rem; color: var(--ink);
  margin-bottom: 10px;
}
.ctrl-label .hint { font-family: var(--font-body); font-weight:400; font-size:.76rem; color: var(--ink-soft); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--font-body); font-weight: 500; font-size: .88rem;
  padding: 9px 15px; border-radius: 999px;
  border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink-soft);
  cursor: pointer; transition: transform .18s, background .18s, color .18s, border-color .18s, box-shadow .18s;
  display:inline-flex; align-items:center; gap:8px;
}
.chip .dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 1px 1px rgba(255,255,255,.6); }
.chip:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--ink); }
.chip[aria-pressed="true"], .chip.is-on {
  background: var(--ink); color: #fff; border-color: var(--ink);
  box-shadow: 0 10px 20px -12px rgba(42,33,31,.7);
}
.chip.is-disabled { opacity: .38; pointer-events: none; }

/* stepper for size + layers */
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper button {
  width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font-size: 1.3rem; font-family: var(--font-display);
  cursor: pointer; display: grid; place-items: center; line-height: 1;
  transition: background .18s, transform .18s, color .18s, border-color .18s;
}
.stepper button:hover:not(:disabled) { background: var(--accent); color: var(--ink); border-color: var(--accent); transform: translateY(-1px); }
.stepper button:disabled { opacity: .4; cursor: not-allowed; }
.stepper .val {
  min-width: 92px; text-align: center; font-family: var(--font-display); font-weight: 500;
  font-size: 1.02rem; color: var(--ink); font-variant-numeric: tabular-nums;
}
.stepper .val small { display:block; font-family:var(--font-body); font-weight:400; font-size:.72rem; color:var(--ink-soft); }

.yazi-field {
  width: 100%; padding: 12px 15px; border-radius: 12px; border: 1.5px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: .95rem;
}
.yazi-field:focus { border-color: var(--accent); outline: none; }
.yazi-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.toggle-price { font-size:.8rem; color: var(--accent-2-text); font-weight:600; white-space:nowrap; }

.config-alert {
  min-height: 0;
  font-size: .86rem;
  color: var(--accent-2-text);
  background: #FFF7DE;
  border: 1px solid #F0DC9A;
  border-radius: 12px;
  padding: 0 14px;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .3s, opacity .3s, padding .3s;
}
.config-alert.show { max-height: 120px; opacity: 1; padding: 11px 14px; }

/* summary bar */
.config-summary {
  border-top: 1px dashed var(--line-strong);
  padding: clamp(18px, 3vw, 26px) clamp(20px, 3vw, 32px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
.price-wrap { display: flex; flex-direction: column; }
.price-wrap .plabel { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.price-wrap .pval {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4.5vw, 2.9rem);
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.05;
}
.price-wrap .pval .cur { color: var(--accent-text); font-size: .6em; }
.price-wrap .pnote { font-size: .74rem; color: var(--ink-soft); }
.summary-actions { display:flex; flex-wrap:wrap; gap: 10px; }

/* hero text block (below configurator) */
.hero-text { max-width: 760px; }
.hero-text h1 {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.hero-text h1 .hl { color: var(--accent-text); position: relative; }
.hero-text h1 .hl::after {
  content:""; position:absolute; left:0; right:0; bottom: .06em; height: .12em;
  background: var(--accent-2); border-radius: 999px; z-index:-1; opacity:.7;
}
.hero-text .sub { font-size: 1.16rem; color: var(--ink-soft); margin: 18px 0 24px; max-width: 620px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.trust-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.trust-strip .tb {
  display:inline-flex; align-items:center; gap:8px; font-size:.85rem; font-weight:500; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px;
}
.trust-strip .tb::before { content:""; width:9px;height:9px;border-radius:50%; background: var(--accent); }
.trust-strip .tb:nth-child(2)::before { background: var(--accent-2); }
.trust-strip .tb:nth-child(3)::before { background: var(--cocoa); }

/* ============================================================
   02 — Katman rehberi (layer guide) — editorial timeline
   ============================================================ */
.guide { background: linear-gradient(180deg, var(--bg), var(--surface-2)); }
.guide-steps { display: grid; gap: 18px; }
.guide-step {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: clamp(16px, 3vw, 30px);
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(18px, 3vw, 28px);
  box-shadow: var(--shadow-soft);
  transition: transform .24s, box-shadow .24s;
}
.guide-step:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(163,78,92,.42); }
/* neapolitan scoop marker (no numerals) — dished into a cone-tip */
.guide-num {
  width: 52px; height: 52px; border-radius: 50% 50% 50% 12px;
  font-size: 0; color: transparent;
  background: conic-gradient(from 200deg, var(--accent), var(--accent-2), var(--cocoa), var(--accent));
  box-shadow: inset 0 3px 4px rgba(255,255,255,.6), 0 10px 20px -10px rgba(163,78,92,.65);
  transform: rotate(-8deg);
  position: relative;
}
.guide-num::after {
  content:""; position:absolute; top: 20%; left: 24%; width: 15px; height: 15px;
  border-radius: 50%; background: rgba(255,255,255,.6); filter: blur(1px);
}
.guide-step:nth-child(2) .guide-num { background: conic-gradient(from 40deg, var(--accent-2), var(--cocoa), var(--accent), var(--accent-2)); }
.guide-step:nth-child(3) .guide-num { background: conic-gradient(from 120deg, var(--cocoa), var(--accent), var(--accent-2), var(--cocoa)); }
.guide-step:nth-child(4) .guide-num { background: conic-gradient(from 280deg, var(--accent), var(--cocoa), var(--accent-2), var(--accent)); }
.guide-step:nth-child(5) .guide-num { background: conic-gradient(from 160deg, var(--accent-2), var(--accent), var(--cocoa), var(--accent-2)); }
.guide-step h3 { font-size: 1.32rem; margin-bottom: 6px; }
.guide-step p { color: var(--ink-soft); margin: 0 0 8px; }
.guide-step .price-tag {
  display:inline-block; font-family: var(--font-display); font-weight:500; font-size:.82rem;
  color: var(--accent-2-text); background: var(--surface-3); border-radius: 999px; padding: 5px 12px;
}

/* ============================================================
   03 — Örnek tasarımlar (gallery)
   ============================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.cake-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  transition: transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s;
}
.cake-card:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: 0 30px 55px -30px rgba(163,78,92,.55); }
.cake-card .ph { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.cake-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.cake-card:hover .ph img { transform: scale(1.05); }
.cake-card .tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--font-display); font-weight: 500; font-size: .74rem;
  background: rgba(255,255,255,.94); color: var(--accent-text);
  padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow-soft);
}
.cake-card .body { padding: 18px 20px 22px; }
.cake-card h3 { font-size: 1.18rem; margin-bottom: 4px; }
.cake-card .meta { font-size: .86rem; color: var(--ink-soft); margin-bottom: 12px; }
.cake-card .price {
  font-family: var(--font-display); font-weight: 600; font-size: 1.28rem; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cake-card .price small { font-family: var(--font-body); font-weight:400; font-size:.7rem; color: var(--ink-soft); display:block; }

/* ============================================================
   04 — Fiyat özet (pricing)
   ============================================================ */
.pricing { background: linear-gradient(180deg, var(--surface-2), var(--bg)); }
.price-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.price-list {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow-soft);
}
.price-list h3 { font-size: 1.4rem; margin-bottom: 6px; }
.price-list .disc { font-size:.82rem; color: var(--ink-soft); margin-bottom: 18px; }
.price-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 0; border-bottom: 1px dashed var(--line-strong);
}
.price-line:last-child { border-bottom: 0; }
.price-line .pn { font-family: var(--font-display); font-weight: 500; color: var(--ink); }
.price-line .pn small { display:block; font-family:var(--font-body); font-weight:400; font-size:.78rem; color:var(--ink-soft); }
.price-line .pp {
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--accent-text);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* size / price list (right column) — a warm list, not SaaS tiers */
.size-list {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow-soft);
}
.size-list h3 { font-size: 1.4rem; margin-bottom: 6px; }
.size-list .disc { font-size:.82rem; color: var(--ink-soft); margin-bottom: 18px; }
.size-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 0; border-bottom: 1px dashed var(--line-strong);
}
.size-row:last-child { border-bottom: 0; }
.size-row.pick { background: var(--surface-2); border-radius: 14px; padding: 15px 16px; border-bottom: 0; }
.size-row .sn { font-family: var(--font-display); font-weight: 500; color: var(--ink); display:flex; align-items:center; gap:12px; }
.size-row .sn small { display:block; font-family:var(--font-body); font-weight:400; font-size:.78rem; color:var(--ink-soft); }
/* scoop dots showing serving size */
.size-row .scoops { display:inline-flex; gap:4px; }
.size-row .scoops i {
  width:11px; height:11px; border-radius:50% 50% 50% 3px; transform:rotate(-8deg);
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6);
}
.size-row .sp {
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--accent-text);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.size-row .pill { font-size:.68rem; color: var(--accent-2-text); background: var(--surface-3); border-radius:999px; padding:3px 9px; margin-left:8px; font-family:var(--font-display); font-weight:500; }

/* capacity note band */
.capacity-band {
  margin-top: clamp(28px, 4vw, 48px);
  background: var(--ink); color: #fff; border-radius: var(--radius);
  padding: clamp(24px, 4vw, 40px);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center;
}
.capacity-band h3 { color: #fff; font-size: 1.5rem; margin-bottom: 8px; }
.capacity-band p { color: rgba(255,255,255,.82); margin: 0; }
.capacity-stats { display: flex; gap: 22px; flex-wrap: wrap; }
/* themed capacity chips (no giant numerals) */
.cap-chips { display: flex; flex-direction: column; gap: 12px; }
.cap-chip {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px; padding: 12px 16px;
}
.cap-chip::before {
  content:""; flex: none; width: 16px; height: 16px; border-radius: 50% 50% 50% 4px; transform: rotate(-8deg);
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6);
}
.cap-chip span { color: #fff; font-family: var(--font-display); font-weight: 500; font-size: .96rem; }
.cap-chip small { display:block; font-family: var(--font-body); font-weight: 400; font-size: .8rem; color: rgba(255,255,255,.72); }

/* ============================================================
   Stats strip (woven, not giant badges) + notes
   ============================================================ */
.notes { background: var(--surface-2); }
/* single bespoke quote */
.quote-feature {
  position: relative;
  max-width: 880px; margin: 0 auto; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 28px;
  padding: clamp(40px, 6vw, 68px) clamp(24px, 5vw, 64px) clamp(30px, 4vw, 44px);
  box-shadow: var(--shadow-pink);
}
.quote-feature::before {
  content: "\201C"; position: absolute; top: -.18em; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 10vw, 6.5rem);
  color: var(--accent); line-height: 1; opacity: .9;
}
.quote-feature .q {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.2rem, 2.6vw, 1.7rem); line-height: 1.42; color: var(--ink);
  margin: 0 0 22px;
}
.quote-feature figcaption { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.quote-feature .who { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--accent-text); }
.quote-feature .when { font-size: .86rem; color: var(--ink-soft); }
.quote-feature .stars { color: var(--accent); letter-spacing: 3px; margin-bottom: 12px; font-size: 1rem; }

/* ============================================================
   05 — İletişim / footer & contact page
   ============================================================ */
.contact-hero { padding: clamp(40px,6vw,80px) 0 clamp(20px,3vw,40px); }
.contact-hero h1 { font-size: clamp(2.3rem, 6vw, 4rem); margin: 14px 0 12px; }
.contact-hero p { color: var(--ink-soft); font-size: 1.1rem; max-width: 620px; }

.channels {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px;
}
.channel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: var(--shadow-soft);
  transition: transform .24s, box-shadow .24s;
}
.channel:hover { transform: translateY(-3px); box-shadow: 0 24px 46px -28px rgba(163,78,92,.5); }
.channel .ic {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--ink);
  background: linear-gradient(135deg, var(--accent), var(--cocoa)); margin-bottom: 14px;
}
.channel:nth-child(2n) .ic { background: linear-gradient(135deg, var(--accent-2), var(--accent)); }
.channel h3 { font-size: 1.1rem; margin-bottom: 4px; }
.channel a, .channel .v { color: var(--accent-text); font-weight: 600; word-break: break-word; }
.channel .sub { font-size: .82rem; color: var(--ink-soft); margin-top: 4px; }

.hours-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(20px,3vw,30px); box-shadow: var(--shadow-soft);
}
.hours-card h3 { font-size: 1.25rem; margin-bottom: 14px; }
.hours-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px dashed var(--line); font-variant-numeric: tabular-nums;
}
.hours-row:last-child { border-bottom: 0; }
.hours-row .d { color: var(--ink); font-weight: 500; }
.hours-row .t { color: var(--ink-soft); }
.hours-row.today { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.hours-row.today .d { color: var(--accent-text); }

/* ---------- Forms ---------- */
.form-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px,3.5vw,40px); box-shadow: var(--shadow-soft);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field > span { font-family: var(--font-display); font-weight: 500; font-size: .9rem; color: var(--ink); }
.field > span small { font-family: var(--font-body); font-weight: 400; font-size: .8em; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  padding: 13px 15px; border-radius: 12px; border: 1.5px solid var(--line-strong);
  background: var(--surface); transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(163,78,92,.16);
}
.field.kvkk { flex-direction: row; align-items: flex-start; gap: 12px; }
.field input[type="checkbox"] {
  appearance: auto; -webkit-appearance: auto;
  width: 18px; height: 18px; min-width: 18px; min-height: 18px;
  padding: 0; border: 0; margin: 3px 0 0; accent-color: var(--accent);
}
.field.kvkk span { font-family: var(--font-body); font-weight: 400; font-size: .9rem; color: var(--ink-soft); }
.form-card button[type="submit"] { margin-top: 4px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink); color: rgba(255,255,255,.78);
  padding: clamp(46px, 6vw, 80px) 0 30px;
}
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 34px; }
.footer-brand .brand { color: #fff; margin-bottom: 14px; }
.footer-brand .brand b { color: var(--accent); }
.footer-brand p { color: rgba(255,255,255,.7); max-width: 320px; font-size: .94rem; }
.footer-col h4 { color: #fff; font-size: 1rem; margin-bottom: 14px; font-family: var(--font-display); font-weight: 500; }
.footer-col a { display: block; color: rgba(255,255,255,.72); padding: 5px 0; transition: color .18s, transform .18s; }
.footer-col a:hover { color: var(--accent-2); transform: translateX(3px); }
.footer-col .cinfo { color: rgba(255,255,255,.72); font-size: .9rem; margin-bottom: 8px; }
.footer-col .cinfo a { display:inline; padding:0; }
.footer-bottom {
  margin-top: clamp(34px, 5vw, 56px); padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between;
  font-size: .82rem; color: rgba(255,255,255,.6);
}
.footer-legal a { display: inline; color: rgba(255,255,255,.7); }
.footer-legal a:hover { color: var(--accent-2); }
.footer-legal { display: flex; gap: 14px; flex-wrap: wrap; }

/* ============================================================
   Cookie banner
   ============================================================ */
.cookie-banner {
  position: fixed; bottom: 16px; left: 16px; right: 16px; max-width: 520px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px;
  padding: 20px 22px; box-shadow: 0 30px 60px -20px rgba(42,33,31,.5);
  transform: translateY(140%); opacity: 0; z-index: 9999;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .24s;
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
.cookie-banner h3 { font-size: 1.05rem; margin-bottom: 6px; }
.cookie-banner p { font-size: .86rem; color: var(--ink-soft); margin: 0 0 14px; }
.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: 12px; cursor: pointer;
  font-family: var(--font-display); font-weight: 500; font-size: .9rem;
  border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink);
  transition: background .18s, color .18s, transform .18s;
}
.cookie-actions button[data-consent="accept"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.cookie-actions button[data-consent="accept"]:hover { background: #3a2c58; border-color: #3a2c58; color: #fff; transform: translateY(-1px); }
.cookie-actions button[data-consent="reject"]:hover,
.cookie-actions button[data-consent="settings"]:hover { background: var(--surface-2); color: var(--accent-text); transform: translateY(-1px); }
@media (min-width: 720px) {
  .cookie-banner { left: 24px; right: auto; max-width: 420px; }
}

/* ============================================================
   FAQ (pure CSS accordion)
   ============================================================ */
.faq-list { display: grid; gap: 12px; max-width: 860px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden;
}
.faq-item > summary {
  list-style: none; cursor: pointer; padding: 18px clamp(18px,3vw,26px);
  font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+"; font-size: 1.5rem; color: var(--accent-text); transition: transform .3s; line-height: 1;
}
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-item > .answer {
  height: 0; padding: 0 clamp(18px,3vw,26px); overflow: hidden; color: var(--ink-soft);
  transition: height .36s cubic-bezier(.4,0,.2,1), padding-block-end .36s cubic-bezier(.4,0,.2,1);
}
.faq-item[open] > .answer { height: auto; padding-block-end: 22px; }

/* ============================================================
   Article / legal pages
   ============================================================ */
.doc { max-width: 820px; }
.doc h2 { font-size: 1.55rem; margin: 34px 0 12px; }
.doc h3 { font-size: 1.2rem; margin: 24px 0 8px; }
.doc p, .doc li { color: var(--ink-soft); }
.doc ul { padding-left: 20px; }
.doc .updated { font-size: .84rem; color: var(--ink-faint); margin-bottom: 8px; }

.page-hero { padding: clamp(30px,5vw,60px) 0 clamp(18px,3vw,30px); }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 12px 0 8px; }
.page-hero p { color: var(--ink-soft); max-width: 640px; }

/* about page */
.about-hero-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-pink); }
.about-hero-img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.member {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-soft); transition: transform .24s, box-shadow .24s;
}
.member:hover { transform: translateY(-5px); box-shadow: 0 28px 52px -30px rgba(163,78,92,.5); }
.member .ph { aspect-ratio: 1/1; overflow: hidden; }
.member .ph img { width: 100%; height: 100%; object-fit: cover; }
.member .body { padding: 18px 20px 22px; }
.member h3 { font-size: 1.18rem; }
.member .role { font-size: .84rem; color: var(--accent-text); font-weight: 600; margin-bottom: 10px; }
.member p { font-size: .9rem; color: var(--ink-soft); margin: 0; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); align-items: center; }

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

/* thank you */
.ty {
  min-height: 60vh; display: grid; place-items: center; text-align: center;
  padding: clamp(40px,8vw,100px) 0;
}
.ty .scoop-big {
  width: 90px; height: 90px; border-radius: 50% 50% 50% 14px; margin: 0 auto 24px;
  background: conic-gradient(from 200deg, var(--accent), var(--accent-2), var(--cocoa), var(--accent));
  box-shadow: inset 0 4px 5px rgba(255,255,255,.6), 0 20px 40px -18px rgba(163,78,92,.8);
  transform: rotate(-8deg);
}
.ty h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 12px; }
.ty p { color: var(--ink-soft); max-width: 480px; margin: 0 auto 26px; }

/* ============================================================
   Reveal
   ============================================================ */
/* Reveal — content ALWAYS visible; entrance animates transform only, never opacity */
.reveal { opacity: 1; transform: translateY(22px); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { transform: none; }
.reveal[style*="--i"] { transition-delay: calc(var(--i) * 80ms); }
html.no-js .reveal { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none !important; transition: none !important; }
  .sprinkle, .cake-stage:hover .glossy { animation: none !important; }
  .config-preview .live-badge::before { animation: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: block; }
  .config-grid { grid-template-columns: 1fr; }
  .config-preview { border-right: 0; border-bottom: 1px solid var(--line); }
  .price-layout { grid-template-columns: 1fr; }
  .notes-grid { grid-template-columns: 1fr; }
  .capacity-band { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .team-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 26px; }
  .guide-step { grid-template-columns: 60px 1fr; gap: 14px; }
  .guide-num { width: 56px; height: 56px; font-size: 1.4rem; border-radius: 16px; }
  .capacity-stats { gap: 16px; }
  .config-summary { flex-direction: column; align-items: stretch; }
  .summary-actions .btn { width: 100%; }
  .hero-text h1 { font-size: clamp(2.2rem, 10vw, 3rem); }
}
@media (max-width: 400px) {
  .channels { grid-template-columns: 1fr; }
}

.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));z-index:9998;transition:width 80ms linear;pointer-events:none}
/* --- void-proof reveal (QA hardening): transform-only entrance, never invisible --- */
html:not(.no-js) .reveal{opacity:1 !important;}
html:not(.no-js) .reveal:not(.is-in){transform:translateY(16px);}
html:not(.no-js) .reveal.is-in{transform:none !important;}

/* ============================================================
   THEME ELEVATION — sweet pastel confectionery atmosphere
   Bolder, more striking, saturated with theme-specific motion.
   Everything below is gated behind prefers-reduced-motion.
   ============================================================ */

/* --- Bouncier candy reveals (soft rise + a little settle) --- */
html:not(.no-js) .reveal { transition: transform .72s cubic-bezier(.16,.86,.32,1.14); }
html:not(.no-js) .reveal[style*="--i"] { transition-delay: calc(var(--i) * 90ms); }

/* --- Heading accent sweep: a candy underline draws under every h2 --- */
.section-head h2 { position: relative; }
.section-head h2::after {
  content: ""; display: block; height: .16em; width: 96px; margin-top: .3em;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2) 55%, var(--cocoa));
  box-shadow: 0 4px 12px -6px rgba(163,78,92,.6);
}
html:not(.no-js) .section-head.reveal h2::after {
  transform-origin: left center;
  transition: transform .8s cubic-bezier(.2,.7,.2,1) .18s;
}
html:not(.no-js) .section-head.reveal:not(.is-in) h2::after { transform: scaleX(0); }

/* --- Hero highlight underline draws in on reveal --- */
html:not(.no-js) .hero-text h1 .hl::after {
  transform-origin: left center;
  transition: transform .8s cubic-bezier(.2,.7,.2,1) .35s;
}
html:not(.no-js) .hero-text.reveal:not(.is-in) h1 .hl::after { transform: scaleX(0); }

/* --- Candy glow: rounded cards lift with a pastel halo --- */
.cake-card:hover {
  box-shadow: 0 30px 55px -30px rgba(163,78,92,.55),
              0 0 0 2px rgba(233,169,180,.55),
              0 0 34px -2px rgba(233,169,180,.4);
}
.guide-step:hover {
  box-shadow: 0 26px 50px -30px rgba(163,78,92,.42),
              0 0 0 2px rgba(167,196,140,.5),
              0 0 30px -4px rgba(167,196,140,.35);
}
.member:hover {
  box-shadow: 0 28px 52px -30px rgba(163,78,92,.5),
              0 0 0 2px rgba(233,169,180,.5),
              0 0 30px -4px rgba(233,169,180,.35);
}
.channel:hover {
  box-shadow: 0 24px 46px -28px rgba(163,78,92,.5),
              0 0 0 2px rgba(167,196,140,.45);
}

/* --- Chip select pop --- */
@keyframes chipPop { 0%{transform:scale(.86);} 55%{transform:scale(1.1);} 100%{transform:scale(1);} }
.chip[aria-pressed="true"] { animation: chipPop .34s cubic-bezier(.2,.8,.3,1.2); }

/* --- Bolder floating sprinkles (candy confetti drifting in the hero) --- */
.sprinkle { box-shadow: 0 2px 4px -1px rgba(0,0,0,.14); }
.sprinkle:nth-child(1){ animation-duration: 8s; }
.sprinkle:nth-child(2){ animation-duration: 10.5s; }
.sprinkle:nth-child(3){ animation-duration: 9.5s; }
.sprinkle:nth-child(4){ animation-duration: 7.5s; }
@keyframes floaty {
  0%,100%{ transform: translateY(0) rotate(var(--r,0)); }
  33%{ transform: translateY(-13px) rotate(calc(var(--r,0deg) + 12deg)); }
  66%{ transform: translateY(7px) rotate(calc(var(--r,0deg) - 8deg)); }
}

/* --- CONFIGURATOR: whole-cake soft jiggle/wobble on any change --- */
.cake-stage { transform-origin: 50% 100%; }
@keyframes cakeWobble {
  0%,100%{ transform: rotate(0deg) scale(1); }
  18%{ transform: rotate(-1.4deg) scale(1.018); }
  42%{ transform: rotate(1.1deg) scale(.988); }
  66%{ transform: rotate(-.6deg) scale(1.006); }
  84%{ transform: rotate(.3deg) scale(.998); }
}
.cake-stage.cake-wobble { animation: cakeWobble .62s cubic-bezier(.28,.72,.3,1.3); }

/* --- CONFIGURATOR: sauce pours down when applied / changed --- */
.cake-sauce { transform-origin: top center; }
@keyframes saucePour {
  0%{ transform: scaleY(.18); opacity: 0; }
  55%{ opacity: 1; }
  100%{ transform: scaleY(1); opacity: .96; }
}
.cake-sauce.on.pouring { animation: saucePour .6s cubic-bezier(.3,.8,.4,1.08); }

/* --- CONFIGURATOR: pastel sparkle burst on the preview --- */
.spark {
  position: absolute; z-index: 7; pointer-events: none;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  filter: drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 1px 2px rgba(90,40,60,.35));
  opacity: 0;
  animation: sparkPop .9s ease forwards;
}
@keyframes sparkPop {
  0%{ transform: scale(0) rotate(0deg); opacity: 0; }
  35%{ opacity: 1; }
  55%{ transform: scale(1.25) rotate(90deg); opacity: 1; }
  100%{ transform: scale(0) translateY(-16px) rotate(200deg); opacity: 0; }
}

/* --- Live badge dot: gentle sheen already pulses; add candy ring on config --- */
.config { transition: box-shadow .4s; }
.config:hover { box-shadow: var(--shadow-pink), 0 0 0 2px rgba(233,169,180,.35); }

/* --- Primary CTAs get a soft candy shimmer sweep --- */
.btn-candy { position: relative; overflow: hidden; }
.btn-candy::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.btn-candy:hover::after { animation: candyShimmer .8s ease; }
@keyframes candyShimmer { 0%{ left:-120%; } 100%{ left:150%; } }

@media (prefers-reduced-motion: reduce) {
  .section-head.reveal h2::after { transform: none !important; transition: none !important; }
  .hero-text.reveal h1 .hl::after { transform: none !important; transition: none !important; }
  .chip[aria-pressed="true"] { animation: none !important; }
  .cake-stage.cake-wobble { animation: none !important; }
  .cake-sauce.on.pouring { animation: none !important; }
  .spark { display: none !important; }
  .btn-candy:hover::after { animation: none !important; }
}