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

/* ============================================================
   KATMAN KOLAJ STÜDYOSU — çerçeveli kolaj vitrin
   Malzeme: cam (glossy sheen) + passe-partout kenar + metal profil
   ============================================================ */

/* ---------- Fonts (display: optional → FOUT/flash yok) ---------- */
:root {
  interpolate-size: allow-keywords;

  /* ---- ANALOG-COLLAGE / RISO ground: warm off-white paper ---- */
  --bg:          #F3EDE1;   /* warm paper ground */
  --surface:     #FBF6EC;   /* cream paper card */
  --surface-2:   #EFE7D6;   /* darker paper */
  --surface-3:   #E6DAC3;   /* kraft-ish paper */
  --ink:         #17130E;   /* warm near-black */
  --ink-soft:    #3B3227;
  --muted:       #6E6252;
  --accent:      #2E6BE6;   /* cut-paper blue — fills / shapes */
  --accent-text: #1E52C4;   /* blue text: link / etiket / fiyat */
  /* collage secondaries */
  --kraft:       #C99A5B;   /* kraft / tan cut-paper + tape */
  --kraft-ink:   #6B4A1E;   /* dark text on kraft */
  --coral:       #E8543D;   /* riso coral pop */
  --coral-ink:   #A6301D;   /* dark coral text */
  --accent-2:    #C99A5B;   /* legacy alias → kraft/tan */
  --accent-2-ink:#6B4A1E;
  --tape:        rgba(201,154,91,.46);      /* masking tape (kraft) */
  --tape-blue:   rgba(46,107,230,.30);      /* washi tape (blue) */
  --line:        #D8CBB3;
  --line-strong: #C2B393;
  --metal:       linear-gradient(180deg,#d8c7a5 0%,#f0e6d0 18%,#c2ab84 50%,#e8dcc2 82%,#cbb890 100%);
  /* torn cut-paper edge (reusable) */
  --torn: polygon(1% 3%,14% 1%,33% 4%,52% 1%,71% 3%,88% 1%,99% 4%,98% 22%,100% 44%,98% 62%,100% 80%,98% 97%,80% 99%,60% 97%,40% 100%,20% 97%,3% 99%,1% 78%,3% 56%,0 38%,2% 20%);

  --font-head: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-label:"Space Grotesk", ui-monospace, "Segoe UI", sans-serif;

  --maxw: 1320px;
  --pad:  clamp(16px, 4vw, 48px);
  --header-h: 74px;
  --radius: 14px;

  --shadow-sm: 0 6px 18px -12px rgba(18,35,58,.30);
  --shadow-md: 0 18px 44px -26px rgba(18,35,58,.42);
  --shadow-lg: 0 34px 70px -34px rgba(18,35,58,.50);

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

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body {
  margin: 0;
  max-width: 100vw;
  overflow-x: hidden;
}
body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  /* warm paper ground + faint halftone-dot paper grain */
  background-color: var(--bg);
  background-image:
    radial-gradient(rgba(107,74,30,.055) 1px, transparent 1.6px),
    radial-gradient(rgba(23,19,14,.035) 1px, transparent 1.6px);
  background-size: 6px 6px, 13px 13px;
  background-position: 0 0, 3px 4px;
  line-height: 1.62;
  font-size: clamp(16px, 1.05vw, 16.5px);
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
figure, figcaption, blockquote { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

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

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

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

.eyebrow {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--kraft-ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* washi-tape strip behind the eyebrow, slightly rotated */
  background: var(--tape);
  padding: 5px 11px 4px;
  transform: rotate(-1.4deg);
  box-shadow: 0 2px 6px -3px rgba(23,19,14,.3);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 3px;
  background: var(--coral);
  display: inline-block;
  transform: rotate(-2deg);
}

.section-h {
  font-size: clamp(1.9rem, 3.8vw, 3.1rem);
  position: relative;
}

/* ---- CUT-PAPER HIGHLIGHT: rotated solid slab of torn paper behind a word ---- */
.cut {
  position: relative;
  display: inline-block;
  color: #fff;
  padding: 0 .16em;
  isolation: isolate;
}
.cut::before {
  content: "";
  position: absolute; inset: -.06em -.02em -.10em;
  z-index: -1;
  background: var(--accent);
  transform: rotate(-2.2deg);
  clip-path: polygon(2% 8%,26% 2%,55% 6%,82% 1%,99% 9%,97% 74%,99% 96%,74% 99%,46% 95%,20% 100%,1% 93%,3% 40%);
  box-shadow: 0 6px 14px -8px rgba(23,19,14,.5);
}
.cut.coral::before { background: var(--coral); transform: rotate(1.8deg); }
.cut.kraft::before { background: var(--kraft); transform: rotate(-1.4deg); }
.cut.kraft { color: var(--ink); }

/* ---- hand-torn underline under section titles ---- */
.section-h::after {
  content: "";
  display: block;
  height: 9px;
  width: clamp(90px, 22%, 190px);
  margin-top: .34em;
  background: var(--coral);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='9' preserveAspectRatio='none'%3E%3Cpath d='M0 5 Q14 1 28 4 T56 4 T84 3 T112 5 T140 3 T168 4 T200 4 L200 9 L0 9 Z' fill='black'/%3E%3C/svg%3E") left/200px 9px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='9' preserveAspectRatio='none'%3E%3Cpath d='M0 5 Q14 1 28 4 T56 4 T84 3 T112 5 T140 3 T168 4 T200 4 L200 9 L0 9 Z' fill='black'/%3E%3C/svg%3E") left/200px 9px repeat-x;
  transform: rotate(-.6deg);
}

/* ---- reusable collage decor: halftone-dot circle + torn strip ---- */
.deco-dots {
  position: absolute; pointer-events: none; z-index: 0;
  width: 120px; height: 120px; border-radius: 50%;
  background-image: radial-gradient(var(--kraft) 30%, transparent 33%);
  background-size: 13px 13px;
  opacity: .5;
  -webkit-mask: radial-gradient(circle, #000 62%, transparent 66%);
  mask: radial-gradient(circle, #000 62%, transparent 66%);
}
.deco-dots.blue { background-image: radial-gradient(var(--accent) 30%, transparent 33%); }
.deco-dots.coral { background-image: radial-gradient(var(--coral) 30%, transparent 33%); }
.deco-strip {
  position: absolute; pointer-events: none; z-index: 0;
  width: 90px; height: 26px;
  background: var(--kraft);
  clip-path: polygon(3% 22%,30% 6%,58% 20%,86% 4%,99% 30%,96% 74%,70% 96%,42% 82%,16% 98%,2% 70%);
  opacity: .8;
  box-shadow: 0 5px 12px -7px rgba(23,19,14,.5);
}
.deco-strip.coral { background: var(--coral); }
.deco-strip.blue { background: var(--accent); }
@media (max-width: 720px){ .deco-dots, .deco-strip { display:none; } }
.lead {
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.16rem);
  max-width: 60ch;
}

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

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

/* accessible-only */
.vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 10px;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: .02em;
  border: 1px solid transparent;
  transition: background .24s var(--ease), color .24s var(--ease),
              transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
  text-align: center;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--accent); color: #fff;
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.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-gold { background: var(--accent-2); color: var(--ink); }
.btn-gold:hover, .btn-gold:focus-visible {
  background: #ffcf3d; color: var(--ink);
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.btn .arw { transition: transform .24s var(--ease); }
.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(243, 237, 225, 0.92);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent;
  transition: background .24s var(--ease), box-shadow .24s var(--ease),
              height .24s var(--ease), border-color .24s var(--ease);
}
.site-header.scrolled {
  background: rgba(243,237,225,.98);
  box-shadow: 0 8px 24px -16px rgba(23,19,14,.28);
  border-bottom-color: var(--line);
  height: 62px;
}
.header-inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
}
.brand {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--font-head); font-weight: 800;
  font-size: 1.28rem; letter-spacing: -.02em; color: var(--ink);
}
.brand b {
  /* metal profil ayraç harfi */
  color: var(--accent-text);
}
.brand small {
  font-family: var(--font-label); font-weight: 500;
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); align-self: center;
}

.nav-desktop { display: none; }
@media (min-width: 1024px) {
  .nav-desktop {
    display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px);
  }
  .nav-desktop a {
    position: relative;
    font-family: var(--font-label); font-weight: 500;
    font-size: .9rem; color: var(--ink-soft);
    padding: 6px 0;
    transition: color .2s var(--ease);
  }
  .nav-desktop a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: -2px;
    height: 2px; background: var(--accent);
    transition: right .26s var(--ease);
  }
  .nav-desktop a:hover, .nav-desktop a.is-active { color: var(--ink); }
  .nav-desktop a:hover::after, .nav-desktop a.is-active::after { right: 0; }
  .nav-desktop .nav-cta {
    color: #fff; background: var(--ink);
    padding: 10px 20px; border-radius: 9px;
  }
  .nav-desktop .nav-cta::after { display: none; }
  .nav-desktop .nav-cta:hover { background: var(--accent); color: #fff; }
}

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

/* drawer */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 1040;
  background: rgba(9,16,28,.55);
  opacity: 0; visibility: hidden;
  transition: opacity .24s var(--ease), visibility .24s var(--ease);
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1050;
  width: min(360px, 92vw);
  background: var(--surface);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.2,.7,.2,1);
  display: flex; flex-direction: column;
  padding: calc(var(--header-h) + 12px) 26px 26px;
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer a {
  font-family: var(--font-head); font-weight: 800; font-size: 1.35rem;
  color: var(--ink); padding: 14px 0; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.drawer a:hover, .drawer a.is-active { color: var(--accent-text); padding-left: 6px; }
.drawer a .arw { color: var(--accent); }
.drawer .drawer-cta {
  margin-top: auto; justify-content: center; border-bottom: 0;
  color: #fff;
}
.drawer .drawer-cta:hover, .drawer .drawer-cta:focus-visible { color: #fff; }

/* ============================================================
   MAIN
   ============================================================ */
main { padding-top: var(--header-h); }

section { position: relative; }
/* mobile/tablet safety net: clip any residual decor bleed at the section edge
   (x-axis only, so position:sticky pinning inside .cine-pin keeps working) */
@media (max-width: 768px) { section { overflow-x: clip; } }
/* anchor hedeflerini sabit header altından kurtar (cross-page jump) */
section[id], [id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* uzun URL / e-posta taşmasını engelle */
a, p, li, dd, blockquote { overflow-wrap: anywhere; word-break: break-word; }
.section-pad { padding-block: clamp(56px, 8vw, 118px); }
.section-head {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 70ch; margin-bottom: clamp(30px, 5vw, 56px);
}

/* ---- passe-partout ince kenar dekor (metal profil ayraç) ---- */
.rule-metal {
  height: 14px; width: 100%;
  background: repeating-linear-gradient(-6deg, var(--kraft) 0 22px, var(--coral) 22px 44px, var(--accent) 44px 66px);
  border-radius: 0;
  opacity: .82;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='14' preserveAspectRatio='none'%3E%3Cpath d='M0 3 Q40 0 80 4 T160 4 T240 2 T320 5 T400 3 T480 4 T560 2 T640 5 T720 3 T800 4 T880 2 T960 5 T1040 3 T1120 4 T1200 3 L1200 12 Q1160 14 1120 11 T1040 11 T960 13 T880 10 T800 12 T720 11 T640 13 T560 10 T480 12 T400 11 T320 13 T240 10 T160 12 T80 11 T0 12 Z' fill='black'/%3E%3C/svg%3E") center/1200px 14px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='14' preserveAspectRatio='none'%3E%3Cpath d='M0 3 Q40 0 80 4 T160 4 T240 2 T320 5 T400 3 T480 4 T560 2 T640 5 T720 3 T800 4 T880 2 T960 5 T1040 3 T1120 4 T1200 3 L1200 12 Q1160 14 1120 11 T1040 11 T960 13 T880 10 T800 12 T720 11 T640 13 T560 10 T480 12 T400 11 T320 13 T240 10 T160 12 T80 11 T0 12 Z' fill='black'/%3E%3C/svg%3E") center/1200px 14px repeat-x;
}

/* ============================================================
   HERO — split asimetrik: sol dar metin / sağ geniş eser grid
   ============================================================ */
.hero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(238,241,244,.4), rgba(238,241,244,0) 40%),
    var(--bg);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 44px);
  padding-block: clamp(34px, 6vw, 70px) clamp(46px, 7vw, 88px);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0,0.82fr) minmax(0,1.18fr); }
}
.hero-copy { position: relative; }
.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.04;
  margin: 18px 0 20px;
}
.hero h1 .accent { color: var(--accent-text); }
.hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  color: var(--ink-soft);
  max-width: 40ch;
  margin-bottom: 26px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* trust strip */
.trust-strip {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 30px;
}
.trust-strip .pill {
  font-family: var(--font-label); font-weight: 500;
  font-size: .78rem; letter-spacing: .02em;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 8px 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
}
.trust-strip .pill::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-2);
}

/* hero stats — vplet, gigant değil */
.hero-stats {
  display: flex; gap: clamp(22px, 4vw, 44px); margin-top: 34px;
  flex-wrap: wrap;
}
.hero-stats .stat b {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--ink); display: block; line-height: 1;
  font-variant-numeric: tabular-nums;
  min-width: 3.5ch;
}
.hero-stats .stat span {
  font-family: var(--font-label); font-size: .74rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

/* hero eser grid önizleme — cam refle */
.hero-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  grid-auto-rows: 1fr;
  gap: 14px;
  position: relative;
}
.hero-preview .frame:nth-child(1) { grid-column: span 2; grid-row: span 2; }

/* çerçeve → TORN CUT-OUT: cream paper mat, hand-torn edge, tape, rotation */
.frame {
  position: relative;
  min-width: 0;                           /* stop real-photo intrinsic size from blowing out the grid track */
  background: var(--surface);
  padding: 12px 12px 14px;                /* cream paper mat */
  border-radius: 0;
  border: 0;
  box-shadow: 0 20px 34px -22px rgba(23,19,14,.5);
  overflow: visible;
  aspect-ratio: 1 / 1;
  clip-path: var(--torn);
  transform: rotate(-1.6deg);
  transition: transform .3s var(--ease);
}
.hero-preview .frame:nth-child(2n) { transform: rotate(2deg); }
.hero-preview .frame:nth-child(3n) { transform: rotate(-2.6deg); }
.hero-preview .frame:nth-child(1)  { transform: rotate(-.8deg); z-index:2; }
.frame:hover { transform: rotate(0deg) scale(1.02); z-index: 5; }
.frame .frame-inner {
  position: relative; width: 100%; height: 100%;
  overflow: hidden; border-radius: 0;
  background: var(--surface-3);
  clip-path: var(--torn);
}
.frame img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.04) saturate(1.02);
  transition: transform .8s var(--ease);
}
.frame:hover img { transform: scale(1.05); }

/* ---- SIGNATURE: masking TAPE strip on collage cut-outs (was cam refle) ---- */
.glass::after { content: none; }
.glass::before {
  content: "";
  position: absolute; top: -11px; left: 50%; z-index: 4;
  width: 92px; height: 26px;
  transform: translateX(-50%) rotate(-4deg);
  background: var(--tape);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 3px 8px -4px rgba(23,19,14,.4);
  pointer-events: none;
}
.hero-preview .frame:nth-child(2n)::before { transform: translateX(-50%) rotate(5deg); background: var(--tape-blue); }
.hero-preview .frame:nth-child(3n)::before { left: 22%; transform: rotate(-8deg); }

@media (prefers-reduced-motion: reduce) {
  .frame { transition: none; }
}

/* ============================================================
   VITRIN — filtre-katalog + karşılaştırma (ARAÇ / sertifika)
   ============================================================ */
.vitrin-band {
  background:
    linear-gradient(180deg, var(--surface), var(--surface));
}
.tool-shell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.tool-topbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 18px clamp(16px,3vw,26px);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.tool-topbar .count {
  font-family: var(--font-label); font-size: .84rem; color: var(--muted);
}
.tool-topbar .count b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* filtre grupları */
.filters {
  display: grid; gap: 18px 26px;
  grid-template-columns: 1fr;
  padding: clamp(18px,3vw,26px);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) { .filters { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1080px) { .filters { grid-template-columns: repeat(4,1fr); } }

.filter-group > .flabel {
  font-family: var(--font-label); font-weight: 500;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px; display: block;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--font-label); font-size: .82rem;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-soft);
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .12s var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--accent-text); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.chip[data-group="renk"][aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color:#fff;
}

.filter-reset {
  font-family: var(--font-label); font-size: .82rem;
  color: var(--accent-text); background: none; border: 0;
  padding: 4px 0; text-decoration: underline; text-underline-offset: 3px;
}

/* katalog grid 3-4 kolon */
.catalog {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(12px, 2vw, 20px);
  padding: clamp(18px,3vw,26px);
}
@media (min-width: 720px) { .catalog { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1080px) { .catalog { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.eser-card {
  position: relative;
  background: var(--surface);
  border: 0;
  border-radius: 0;
  overflow: visible;
  padding: 10px 10px 20px;
  display: flex; flex-direction: column;
  /* torn-paper cut-out edge */
  clip-path: polygon(1% 2%,20% 0.5%,44% 2.5%,68% 0.5%,90% 2%,99.5% 3%,98.5% 26%,100% 50%,98.5% 74%,99.5% 97%,80% 98.5%,56% 97%,32% 99%,10% 97.5%,0.5% 96%,1.5% 74%,0 50%,1.5% 26%);
  box-shadow: 0 18px 30px -20px rgba(23,19,14,.55);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
  animation: cardIn .5s var(--ease) both;
  animation-delay: calc(var(--i,0) * 55ms);
}
.eser-card:nth-child(3n)   { transform: rotate(-1.4deg); }
.eser-card:nth-child(3n+1) { transform: rotate(1.1deg); }
.eser-card:nth-child(4n)   { transform: rotate(-.6deg); }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to   { opacity: 1; }
}
.eser-card:hover {
  transform: rotate(0deg) translateY(-6px) scale(1.02);
  box-shadow: 0 30px 48px -26px rgba(23,19,14,.6);
  z-index: 5;
}
.eser-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface-3);
  overflow: hidden;
  padding: 0;
  clip-path: var(--torn);
}
.eser-photo .frame-inner { border-radius: 0; height: 100%; clip-path: var(--torn); }
.eser-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.04) saturate(1.02);
  transition: transform .7s var(--ease);
}
.eser-card:hover .eser-photo img { transform: scale(1.06); }

.eser-tag {
  position: absolute; top: 12px; left: 10px; z-index: 3;
  font-family: var(--font-label); font-weight: 600; font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--coral); color: #fff;
  padding: 5px 11px; border-radius: 0;
  transform: rotate(-3deg);
  box-shadow: 0 3px 8px -4px rgba(23,19,14,.5);
}
.eser-body {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.eser-title {
  font-family: var(--font-head); font-weight: 800; font-size: 1.02rem;
  line-height: 1.18;
}
.eser-meta {
  font-family: var(--font-label); font-size: .74rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 6px 10px;
}
.eser-meta span::before { content: ""; }
.eser-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px solid var(--line);
}
.eser-price {
  font-family: var(--font-label); font-weight: 500;
  color: var(--accent-text); font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.eser-price small { color: var(--muted); font-weight: 400; }

.eser-compare {
  font-family: var(--font-label); font-size: .76rem;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-soft); padding: 6px 11px; border-radius: 8px;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.eser-compare:hover { border-color: var(--accent); color: var(--accent-text); }
.eser-compare[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* boş sonuç uyarısı */
.empty-note {
  grid-column: 1 / -1;
  text-align: center;
  padding: clamp(40px,7vw,72px) 20px;
  color: var(--ink-soft);
}
.empty-note b {
  font-family: var(--font-head); font-size: 1.3rem; color: var(--ink);
  display: block; margin-bottom: 8px;
}
.empty-note button { margin-top: 16px; }

/* ---- karşılaştırma tepsisi (fixed) ---- */
.compare-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900;
  max-width: 720px; margin-inline: auto;
  background: var(--ink); color: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 14px clamp(16px,3vw,24px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transform: translateY(180%);
  transition: transform .3s var(--ease);
  flex-wrap: wrap;
}
.compare-bar.is-active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .compare-bar { transition: none; } }
.compare-bar .cb-info { font-family: var(--font-label); font-size: .86rem; }
.compare-bar .cb-info b { color: var(--accent-2); font-variant-numeric: tabular-nums; }
.compare-bar .cb-actions { display: flex; gap: 10px; }
.compare-bar .btn { padding: 10px 18px; }
.compare-bar .btn-clear {
  background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff;
}
.compare-bar .btn-clear:hover { background: rgba(255,255,255,.12); color:#fff; }
.compare-bar .btn-open { background: var(--accent-2); color: var(--ink); }
.compare-bar .btn-open:hover { background: #ffcf3d; color: var(--ink); }
.compare-bar .btn-open[disabled] { opacity: .5; cursor: not-allowed; }

/* karşılaştırma modal */
.compare-modal {
  position: fixed; inset: 0; z-index: 2000;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(9,16,28,.62);
}
.compare-modal.is-open { display: flex; }
.compare-inner {
  background: var(--surface);
  border-radius: 18px;
  width: min(880px, 100%);
  max-height: 92vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
  padding: clamp(20px,3vw,32px);
  position: relative;
}
.compare-inner h3 { font-size: 1.5rem; margin-bottom: 4px; }
.compare-close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 1.1rem; color: var(--ink); line-height: 1;
}
.compare-close:hover { background: var(--ink); color: #fff; }
.compare-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px;
}
@media (max-width: 560px) { .compare-cols { grid-template-columns: 1fr; } }
.compare-col {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--surface-2);
}
.compare-col .cc-photo { aspect-ratio: 1/1; background: var(--surface-3); position: relative; padding: 8px; }
.compare-col .cc-photo .frame-inner { height: 100%; border-radius: 4px; }
.compare-col img { width: 100%; height: 100%; object-fit: cover; }
.compare-col .cc-body { padding: 14px 16px 18px; }
.compare-col dl { margin: 12px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.compare-col dt { font-family: var(--font-label); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.compare-col dd { margin: 0; font-size: .9rem; text-align: right; }
.compare-col .cc-price { color: var(--accent-text); font-family: var(--font-label); font-weight: 500; }

/* ============================================================
   KOLEKSIYONLAR — editorial asimetrik
   ============================================================ */
.koleksiyon-grid {
  display: grid; gap: clamp(16px,2.5vw,26px);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .koleksiyon-grid { grid-template-columns: repeat(6, 1fr); }
  .kol:nth-child(1) { grid-column: span 4; }
  .kol:nth-child(2) { grid-column: span 2; }
  .kol:nth-child(3) { grid-column: span 2; }
  .kol:nth-child(4) { grid-column: span 4; }
}
.kol {
  position: relative; border-radius: var(--radius); overflow: hidden;
  min-height: 260px; display: flex; align-items: flex-end;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  background: var(--ink);
}
.kol img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.kol:hover img { transform: scale(1.06); }
.kol::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(9,16,28,.82) 0%, rgba(9,16,28,.20) 45%, rgba(9,16,28,0) 72%);
}
.kol .kol-body { position: relative; z-index: 2; padding: 22px 24px; color: #fff; }
.kol .kol-body h3 { color: #fff; font-size: clamp(1.3rem,2.2vw,1.8rem); }
.kol .kol-body p { margin: 6px 0 0; color: rgba(255,255,255,.86); font-size: .92rem; max-width: 40ch; }
.kol .kol-count {
  font-family: var(--font-label); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 8px; display: inline-block;
}

/* ============================================================
   ÖZEL SİPARİŞ — süreç (5 adım) editorial timeline
   ============================================================ */
.ozel-wrap {
  display: grid; grid-template-columns: 1fr; gap: clamp(28px,4vw,48px);
}
@media (min-width: 1000px) { .ozel-wrap { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }
.ozel-media {
  position: relative; border-radius: 0; overflow: visible;
  border: 0;
  background: var(--surface); padding: 12px 12px 14px;
  clip-path: var(--torn);
  transform: rotate(-1.6deg);
  box-shadow: 0 26px 44px -24px rgba(23,19,14,.55);
  aspect-ratio: 4/5;
}
.ozel-media .frame-inner { clip-path: var(--torn); }
.ozel-media img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(1.02); }
@media (min-width: 1000px) { .ozel-media { position: sticky; top: calc(var(--header-h) + 24px); } }

.steps { display: grid; gap: 4px; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 18px;
  padding: 22px 0; border-top: 1px solid var(--line);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step .step-no {
  font-family: var(--font-head); font-weight: 800; font-size: 1.4rem;
  color: #fff;
  width: 50px; height: 50px; border-radius: 0;
  display: grid; place-items: center;
  background: var(--accent); border: 0;
  clip-path: polygon(4% 8%,52% 1%,97% 6%,99% 52%,95% 96%,50% 99%,7% 95%,1% 50%);
  transform: rotate(-4deg);
  box-shadow: 0 6px 14px -7px rgba(23,19,14,.5);
  font-variant-numeric: tabular-nums;
}
.step:nth-child(2n) .step-no { background: var(--coral); transform: rotate(4deg); }
.step:nth-child(3n) .step-no { background: var(--kraft); color: var(--ink); transform: rotate(-2deg); }
.step .step-c { min-width: 0; }
.step h4 { font-size: 1.12rem; margin-bottom: 4px; }
.step .step-when {
  font-family: var(--font-label); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-text);
}
.step p { margin: 6px 0 0; color: var(--ink-soft); font-size: .94rem; }

/* ============================================================
   MALZEME NOTU — cam / passe-partout / metal
   ============================================================ */
.malzeme-band {
  background: var(--ink); color: #fff; position: relative; overflow: hidden;
}
.malzeme-band::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px circle at 82% 12%, rgba(46,107,230,.30), transparent 55%),
    radial-gradient(500px circle at 10% 92%, rgba(232,84,61,.20), transparent 55%),
    radial-gradient(rgba(201,154,91,.10) 1px, transparent 1.6px);
  background-size: auto, auto, 7px 7px;
  pointer-events: none;
}
.malzeme-band .eyebrow { color: var(--ink); background: var(--kraft); }
.malzeme-band .eyebrow::before { background: var(--coral); }
.malzeme-band .section-h { color: #fff; }
.malzeme-band .section-h::after { background: var(--kraft); }
.malzeme-band .lead { color: rgba(255,255,255,.8); }
.malzeme-grid {
  display: grid; gap: clamp(16px,2.5vw,26px); grid-template-columns: 1fr;
  margin-top: 40px; position: relative;
}
@media (min-width: 760px) { .malzeme-grid { grid-template-columns: repeat(3,1fr); } }
.mat-card {
  background: var(--surface);
  border: 0;
  border-radius: 0; overflow: visible;
  padding: 10px 10px 4px;
  display: flex; flex-direction: column;
  clip-path: polygon(1% 2%,22% 0.5%,48% 2.5%,74% 0.5%,99% 3%,98% 28%,100% 52%,98% 76%,99% 98%,76% 99%,50% 97%,24% 99%,1% 97%,2% 74%,0 50%,2% 26%);
  box-shadow: 0 24px 40px -22px rgba(0,0,0,.65);
}
.mat-card:nth-child(1) { transform: rotate(-1.8deg); }
.mat-card:nth-child(2) { transform: rotate(1.4deg); }
.mat-card:nth-child(3) { transform: rotate(-1deg); }
.mat-card .mat-photo { aspect-ratio: 16/11; overflow: hidden; position: relative; clip-path: var(--torn); }
.mat-card .mat-photo img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(1.03); }
.mat-card .mat-body { padding: 16px 16px 20px; }
.mat-card h3 { color: var(--ink); font-size: 1.2rem; }
.mat-card .mat-k {
  font-family: var(--font-label); font-weight: 600; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--coral-ink); display: inline-block; margin-bottom: 8px;
  background: var(--tape); padding: 3px 8px; transform: rotate(-1.6deg);
}
.mat-card p { color: var(--ink-soft); font-size: .9rem; margin: 6px 0 0; }

/* ============================================================
   FİYAT — liste (foto yanında), SaaS kart değil
   ============================================================ */
.fiyat-wrap { display: grid; gap: clamp(24px,4vw,44px); grid-template-columns: 1fr; }
@media (min-width: 940px) { .fiyat-wrap { grid-template-columns: 1.15fr 0.85fr; align-items: start; } }
.fiyat-list { display: grid; gap: 14px; }
.fiyat-row {
  position: relative;
  background: var(--surface); border: 0;
  border-left: 6px solid var(--kraft);
  border-radius: 0; padding: 22px 24px;
  display: grid; grid-template-columns: 1fr auto; gap: 12px 20px;
  align-items: start;
  box-shadow: 0 14px 26px -20px rgba(23,19,14,.45);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}
.fiyat-row:nth-child(2n) { transform: rotate(.5deg); }
.fiyat-row:nth-child(2n+1) { transform: rotate(-.5deg); }
.fiyat-row:hover { transform: rotate(0) translateY(-3px); box-shadow: var(--shadow-md); }
.fiyat-row.feature { border-left-color: var(--coral); box-shadow: 0 14px 26px -18px rgba(232,84,61,.5); }
.fiyat-row h3 { font-size: 1.25rem; }
.fiyat-row .fr-size {
  font-family: var(--font-label); font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-top: 2px;
}
.fiyat-row .fr-price {
  font-family: var(--font-head); font-weight: 800; font-size: 1.5rem;
  color: var(--ink); text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fiyat-row .fr-price small { display: block; font-family: var(--font-label); font-weight: 400; font-size: .68rem; color: var(--muted); letter-spacing: .04em; }
.fiyat-row .fr-inc {
  grid-column: 1 / -1; display: grid; gap: 6px; margin-top: 6px;
}
.fiyat-row .fr-inc li {
  font-size: .88rem; color: var(--ink-soft); padding-left: 20px; position: relative;
}
.fiyat-row .fr-inc li::before {
  content: ""; position: absolute; left: 4px; top: .55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.fiyat-row .fr-inc li.no { color: var(--muted); }
.fiyat-row .fr-inc li.no::before { background: var(--line-strong); }
.fiyat-note {
  font-family: var(--font-label); font-size: .78rem; color: var(--muted);
  margin-top: 10px;
}
.fiyat-aside {
  background: var(--ink); color: #fff; border-radius: var(--radius);
  padding: 28px 28px 30px; position: relative; overflow: hidden;
}
.fiyat-aside h3 { color: #fff; font-size: 1.35rem; margin-bottom: 10px; }
.fiyat-aside p { color: rgba(255,255,255,.82); font-size: .92rem; }
.fiyat-aside .kap {
  margin: 18px 0; padding: 16px; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
}
.fiyat-aside .kap .bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; margin-top: 10px; }
.fiyat-aside .kap .bar i { display: block; height: 100%; width: 80%; background: var(--accent-2); border-radius: 999px; }
.fiyat-aside .kap b { font-family: var(--font-label); font-size: .8rem; }
.fiyat-aside .btn { margin-top: 12px; width: 100%; }

/* ============================================================
   REFERANSLAR — editorial grid
   ============================================================ */
.ref-grid { display: grid; gap: clamp(16px,2.5vw,24px); grid-template-columns: 1fr; }
@media (min-width: 720px) { .ref-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1080px) { .ref-grid { grid-template-columns: repeat(3,1fr); } }
.ref-card {
  position: relative;
  background: var(--surface); border: 0;
  border-radius: 0; padding: 26px 24px 22px;
  display: flex; flex-direction: column; gap: 12px;
  clip-path: polygon(1% 2%,26% 0.5%,52% 2.5%,80% 0.5%,99% 3%,98% 30%,100% 60%,98% 98%,72% 99%,44% 97%,18% 99%,1% 97%,2% 62%,0 32%);
  box-shadow: 0 18px 30px -22px rgba(23,19,14,.5);
}
.ref-card:nth-child(2n) { transform: rotate(1.2deg); }
.ref-card:nth-child(2n+1) { transform: rotate(-1.2deg); }
.ref-card::before {
  content: ""; position: absolute; top: -10px; left: 24px; z-index: 3;
  width: 78px; height: 24px; transform: rotate(-5deg);
  background: var(--tape-blue); border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 3px 8px -4px rgba(23,19,14,.4);
}
.ref-card:nth-child(2n)::before { left: auto; right: 24px; transform: rotate(6deg); background: var(--tape); }
.ref-card .stars { color: var(--coral); letter-spacing: 2px; font-size: .95rem; }
.ref-card blockquote { font-size: .96rem; color: var(--ink); line-height: 1.6; }
.ref-card .ref-who {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line);
  font-family: var(--font-label); font-size: .82rem;
}
.ref-card .ref-who b { color: var(--ink); display: block; }
.ref-card .ref-who span { color: var(--muted); }

/* ============================================================
   FAQ — pure CSS accordion
   ============================================================ */
.faq-list { display: grid; gap: 12px; max-width: 900px; }
.faq-item {
  background: var(--surface); border: 0;
  border-left: 5px solid var(--kraft);
  border-radius: 0; overflow: hidden;
  box-shadow: 0 10px 22px -18px rgba(23,19,14,.4);
}
.faq-item[open] { border-left-color: var(--coral); }
.faq-item summary {
  list-style: none; cursor: pointer;
  padding: 20px clamp(18px,3vw,26px);
  font-family: var(--font-head); font-weight: 800; font-size: 1.02rem;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .ico {
  flex: none; width: 26px; height: 26px; position: relative;
  border-radius: 50%; border: 1px solid var(--line-strong);
  transition: background .24s var(--ease), border-color .24s var(--ease);
}
.faq-item summary .ico::before,
.faq-item summary .ico::after {
  content: ""; position: absolute; background: var(--ink);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  transition: transform .24s var(--ease), background .24s var(--ease);
}
.faq-item summary .ico::before { width: 11px; height: 2px; }
.faq-item summary .ico::after  { width: 2px; height: 11px; }
.faq-item[open] summary .ico { background: var(--accent); border-color: var(--accent); }
.faq-item[open] summary .ico::before,
.faq-item[open] summary .ico::after { background: #fff; }
.faq-item[open] summary .ico::after { transform: translate(-50%,-50%) scaleY(0); }
.faq-item > .answer {
  height: 0; overflow: hidden;
  padding: 0 clamp(18px,3vw,26px);
  color: var(--ink-soft); font-size: .95rem;
  transition: height 360ms var(--ease-2), padding-block-end 360ms var(--ease-2);
}
.faq-item[open] > .answer { height: auto; padding-block-end: 24px; }
@media (prefers-reduced-motion: reduce) {
  .faq-item > .answer { transition: none; }
}

/* ============================================================
   ATÖLYE NOTLARI — son eklenenler
   ============================================================ */
.notlar { display: grid; gap: 14px; max-width: 820px; }
.not-row {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.not-row time {
  font-family: var(--font-label); font-size: .76rem; letter-spacing: .04em;
  color: var(--accent-text); white-space: nowrap;
}
.not-row p { margin: 0; color: var(--ink-soft); font-size: .94rem; }
.not-row b { color: var(--ink); font-family: var(--font-head); }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  background: var(--accent); color: #fff; border-radius: 22px;
  padding: clamp(34px,5vw,60px);
  display: grid; gap: 22px; align-items: center;
  grid-template-columns: 1fr; text-align: center;
  position: relative; overflow: hidden;
}
@media (min-width: 860px) { .cta-band { grid-template-columns: 1.4fr auto; text-align: left; } }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.14), rgba(255,255,255,0) 40%);
}
.cta-band h2 { color: #fff; font-size: clamp(1.7rem,3.4vw,2.6rem); position: relative; }
.cta-band p { color: rgba(255,255,255,.9); margin-top: 8px; position: relative; }
.cta-band .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; position: relative; justify-content: center; }
.cta-band .btn-primary { background: #fff; color: var(--accent-text); }
.cta-band .btn-primary:hover { background: var(--ink); color: #fff; }
.cta-band .btn-ghost { border-color: rgba(255,255,255,.6); color: #fff; }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; border-color:#fff; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--ink); color: rgba(255,255,255,.78);
  padding-block: clamp(46px,6vw,72px) 30px;
}
.footer-top {
  display: grid; gap: 34px; grid-template-columns: 1fr;
  padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (min-width: 760px) { .footer-top { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer-brand .brand { color: #fff; }
.footer-brand .brand b { color: var(--accent-2); }
.footer-brand p { margin: 14px 0 0; max-width: 40ch; font-size: .92rem; }
.footer-col h4 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-label); font-weight: 500; margin-bottom: 14px; }
.footer-col a { display: block; padding: 6px 0; color: rgba(255,255,255,.74); font-size: .92rem; transition: color .2s var(--ease), padding-left .2s var(--ease); }
.footer-col a:hover { color: #fff; padding-left: 4px; }
.footer-contact li { padding: 5px 0; font-size: .92rem; color: rgba(255,255,255,.78); word-break: break-word; }
.footer-contact a:hover { color: var(--accent-2); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between;
  align-items: center; padding-top: 26px;
  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: #fff; }
.footer-legal span { margin: 0 8px; opacity: .4; }

/* ============================================================
   COOKIE
   ============================================================ */
.cookie-banner {
  position: fixed; bottom: 16px; left: 16px; right: 16px;
  max-width: 520px; margin: 0 auto; z-index: 9999;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 20px 22px;
  transform: translateY(140%); opacity: 0;
  transition: transform 280ms var(--ease), opacity 240ms var(--ease);
}
@media (min-width: 720px) { .cookie-banner { left: 24px; right: auto; max-width: 420px; } }
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
.cookie-banner h4 { font-size: 1.02rem; 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: 8px; }
.cookie-actions button {
  flex: 1 1 auto; min-height: 44px;
  padding: 11px 16px; border-radius: 9px;
  font-family: var(--font-label); font-size: .86rem; font-weight: 500;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.cookie-actions button[data-consent="accept"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.cookie-actions button[data-consent="accept"]:hover { background: var(--accent); border-color: var(--accent); }
.cookie-actions button[data-consent="reject"]:hover,
.cookie-actions button[data-consent="settings"]:hover { border-color: var(--accent); color: var(--accent-text); }

/* ============================================================
   PAGE HERO (iç sayfalar)
   ============================================================ */
.page-hero {
  background: var(--ink); color: #fff; position: relative; overflow: hidden;
  padding-block: clamp(48px,7vw,92px);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px circle at 85% 10%, rgba(46,107,230,.3), transparent 55%);
}
.page-hero .eyebrow { color: var(--ink); background: var(--kraft); position: relative; }
.page-hero .eyebrow::before { background: var(--coral); }
.page-hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 16px 0 14px; position: relative; }
.page-hero p { color: rgba(255,255,255,.84); max-width: 60ch; position: relative; }

/* prose (yasal / hakkında) */
.prose { max-width: 78ch; }
.prose h2 { font-size: clamp(1.4rem,2.6vw,1.9rem); margin: 40px 0 14px; }
.prose h3 { font-size: 1.15rem; margin: 26px 0 10px; }
.prose p { margin: 0 0 16px; color: var(--ink-soft); }
.prose ul { margin: 0 0 16px; display: grid; gap: 8px; }
.prose ul li { padding-left: 20px; position: relative; color: var(--ink-soft); }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }

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

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; gap: clamp(26px,4vw,44px); grid-template-columns: 1fr; }
@media (min-width: 940px) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.channel-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.channel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 22px; display: flex; flex-direction: column; gap: 4px;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.channel:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.channel .ch-ico {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface-3); color: var(--accent-text);
  font-family: var(--font-label); font-weight: 500; font-size: 1.05rem; margin-bottom: 8px;
}
.channel .ch-label { font-family: var(--font-label); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.channel .ch-val { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: var(--ink); word-break: break-word; }
.channel .ch-val:hover { color: var(--accent-text); }
.channel .ch-sub { font-size: .82rem; color: var(--muted); }

/* hours card grid */
.hours { display: grid; gap: 6px; margin-top: 16px; }
.hours .h-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); font-size: .9rem;
}
.hours .h-row.today { border-color: var(--accent); background: var(--surface-2); }
.hours .h-row .h-day { font-family: var(--font-label); }
.hours .h-row .h-time { font-variant-numeric: tabular-nums; color: var(--ink-soft); }

/* ============================================================
   FORM
   ============================================================ */
.form-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: clamp(22px,3vw,32px); box-shadow: var(--shadow-sm);
}
.form-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .form-grid.two { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label, .field > span.lbl {
  font-family: var(--font-label); font-size: .8rem; font-weight: 500;
  color: var(--ink); letter-spacing: .02em;
}
.field input, .field select, .field textarea {
  font: inherit; font-size: .95rem;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong); border-radius: 10px;
  color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  background: var(--surface); box-shadow: 0 0 0 3px rgba(46,107,230,.14);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field.kvkk { flex-direction: row; align-items: flex-start; gap: 10px; }
.field.kvkk label { font-weight: 400; color: var(--ink-soft); font-family: var(--font-body); font-size: .86rem; }
.field input[type="checkbox"] {
  appearance: auto; -webkit-appearance: auto;
  width: 18px; height: 18px; min-width: 18px; min-height: 18px;
  padding: 0; border: 0; margin: 2px 0 0; accent-color: var(--accent);
}
.form-card button[type="submit"] { width: 100%; margin-top: 4px; }
@media (min-width: 620px) { .form-card button[type="submit"] { width: auto; } }

/* thank you */
.thanks-wrap { text-align: center; max-width: 620px; margin-inline: auto; padding-block: clamp(50px,8vw,110px); }
.thanks-wrap .tick {
  width: 78px; height: 78px; border-radius: 50%; margin: 0 auto 24px;
  background: var(--accent); display: grid; place-items: center;
  color: #fff; font-size: 2rem; box-shadow: var(--shadow-md);
}
.thanks-wrap h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 14px; }
.thanks-wrap p { color: var(--ink-soft); font-size: 1.08rem; margin-bottom: 26px; }

/* 404 */
.err-wrap { text-align: center; max-width: 640px; margin-inline: auto; padding-block: clamp(60px,9vw,130px); }
.err-wrap .code { font-family: var(--font-head); font-weight: 800; font-size: clamp(5rem,16vw,10rem); line-height: .9; color: var(--accent-text); letter-spacing: -.04em; }
.err-wrap h1 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin: 10px 0 14px; }
.err-wrap p { color: var(--ink-soft); margin-bottom: 26px; }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 90ms; }
.reveal[data-d="2"] { transition-delay: 180ms; }
.reveal[data-d="3"] { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .eser-card { animation: none !important; opacity: 1 !important; transform: none !important; }
  .frame:hover img, .kol:hover img, .eser-card:hover .eser-photo img { transform: none; }
}
html.no-js .reveal { opacity: 1; transform: none; }

/* utils */
.text-center { text-align: center; }
.mt-s { margin-top: 12px; } .mt-m { margin-top: 24px; } .mt-l { margin-top: 40px; }
.divider-wrap { display: flex; align-items: center; gap: 16px; margin: clamp(40px,6vw,72px) 0; }
.divider-wrap .rule-metal { flex: 1; }
.divider-wrap span { font-family: var(--font-label); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ============================================================
   RESPONSIVE tweaks
   ============================================================ */
@media (max-width: 640px) {
  .hero-preview { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero-preview .frame:nth-child(1) { grid-column: span 2; grid-row: auto; }
  .hero-preview .frame:nth-child(6) { display: none; }
  .step { grid-template-columns: auto 1fr; gap: 12px; }
  .step .step-no { width: 42px; height: 42px; font-size: 1.15rem; }
  .fiyat-row { grid-template-columns: 1fr; }
  .fiyat-row .fr-price { text-align: left; }
  .cookie-actions button { flex: 1 1 100%; }
  /* bigger tap targets on touch screens */
  .chip { padding: 11px 15px; min-height: 44px; display: inline-flex; align-items: center; }
  .eser-compare { padding: 10px 14px; min-height: 44px; }
  .filter-reset { padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 380px) {
  .brand small { display: none; }
}

.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}

/* ============================================================
   ABUNDANT CUT-PAPER / RISO COLLAGE DECOR  (flow-safe, non-interactive)
   every .cdec is absolute, pointer-events:none, sits BEHIND container
   content (containers are lifted to z-index:2). Bold riso energy:
   overlapping geometric cut-paper shapes, halftone patches, ransom
   letters, oversized numbers, registration marks, torn bands, taped
   photo fragments — in blue / coral / kraft on warm paper.
   ============================================================ */
.section-pad > .container,
.vitrin-band > .container,
.malzeme-band > .container { position: relative; z-index: 2; }
.cdec, .cdec * { pointer-events: none; }
.cdec { position: absolute; z-index: 0; opacity: .9; }

/* ---- fill colors (solid cut-paper) ---- */
.cd-blue  { background: var(--accent); }
.cd-coral { background: var(--coral); }
.cd-kraft { background: var(--kraft); }
.cd-ink   { background: var(--ink); }
.cd-paper { background: var(--surface); }
/* ---- text/stroke colors (halftone, marks, numbers) ---- */
.tc-blue  { color: var(--accent); }
.tc-coral { color: var(--coral); }
.tc-kraft { color: var(--kraft); }
.tc-ink   { color: var(--ink); }
.tc-paper { color: var(--surface); }

/* ---- solid geometric shapes ---- */
.cd-slab   { clip-path: polygon(4% 8%,34% 1%,68% 6%,98% 2%,95% 40%,100% 80%,66% 97%,34% 100%,5% 92%,0 52%,6% 24%); }
.cd-slab2  { clip-path: polygon(2% 12%,26% 2%,54% 8%,82% 1%,99% 14%,96% 52%,100% 88%,70% 98%,40% 92%,12% 99%,1% 62%); }
.cd-circle { border-radius: 50%; }
.cd-half   { border-radius: 999px 999px 0 0; }
.cd-halfb  { border-radius: 0 0 999px 999px; }
.cd-quarter  { border-radius: 100% 0 0 0; }
.cd-quarter2 { border-radius: 0 100% 0 0; }
.cd-quarter3 { border-radius: 0 0 0 100%; }
.cd-quarter4 { border-radius: 0 0 100% 0; }
.cd-tri  { clip-path: polygon(50% 2%,98% 98%,2% 98%); }
.cd-tri2 { clip-path: polygon(2% 2%,98% 50%,2% 98%); }
.cd-tri3 { clip-path: polygon(2% 2%,98% 2%,50% 98%); }
.cd-slab,.cd-slab2,.cd-circle,.cd-half,.cd-halfb,
.cd-quarter,.cd-quarter2,.cd-quarter3,.cd-quarter4,
.cd-tri,.cd-tri2,.cd-tri3 { box-shadow: 0 16px 30px -22px rgba(23,19,14,.5); }

/* ---- halftone-dot patches (use tc-* for color) ---- */
.cd-ht  { background-color: transparent !important;
  background-image: radial-gradient(currentColor 30%, transparent 34%);
  background-size: 12px 12px; opacity: .5; box-shadow: none; }
.cd-htc { background-color: transparent !important;
  background-image: radial-gradient(currentColor 30%, transparent 34%);
  background-size: 12px 12px; opacity: .5; box-shadow: none;
  -webkit-mask: radial-gradient(circle, #000 60%, transparent 64%);
  mask: radial-gradient(circle, #000 60%, transparent 64%); }
/* ---- fine grid / hatch patch ---- */
.cd-grid { background-color: transparent !important; opacity: .3; box-shadow: none;
  background-image:
    repeating-linear-gradient(0deg, currentColor 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 12px);
  color: var(--ink); }

/* ---- ransom / cut-out letter or symbol tile (use cd-* for bg) ---- */
.cd-ransom { display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 800; color: #fff; line-height: 1;
  clip-path: polygon(5% 4%,95% 1%,99% 92%,3% 98%);
  box-shadow: 0 10px 22px -14px rgba(23,19,14,.5); }
.cd-ransom.on-kraft, .cd-ransom.on-paper { color: var(--ink); }

/* ---- oversized section number (behind headings) ---- */
.cd-bignum { font-family: var(--font-head); font-weight: 800;
  line-height: .72; letter-spacing: -.05em; color: var(--ink); opacity: .12; }
.cd-bignum.hollow { color: transparent; -webkit-text-stroke: 3px currentColor;
  opacity: .5; }

/* ---- registration / crosshair mark ---- */
.cd-reg { width: 30px; height: 30px; color: var(--ink); opacity: .55; box-shadow: none;
  border: 2px solid currentColor; border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center/2px 100% no-repeat,
    linear-gradient(currentColor, currentColor) center/100% 2px no-repeat; }
/* ---- crop mark (L corner; rotate inline for other corners) ---- */
.cd-crop { width: 26px; height: 26px; color: var(--ink); opacity: .5; box-shadow: none;
  border-top: 2px solid currentColor; border-left: 2px solid currentColor; }

/* ---- torn color-block band separator (use cd-* for color) ---- */
.cd-tornband { height: 24px; opacity: .92; box-shadow: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='24' preserveAspectRatio='none'%3E%3Cpath d='M0 12 L6 4 L12 14 L18 3 L24 13 L30 6 L36 15 L42 4 L48 12 L54 6 L60 14 L66 3 L72 13 L78 6 L84 12 L90 4 L90 24 L0 24 Z' fill='black'/%3E%3C/svg%3E") top left/90px 24px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='24' preserveAspectRatio='none'%3E%3Cpath d='M0 12 L6 4 L12 14 L18 3 L24 13 L30 6 L36 15 L42 4 L48 12 L54 6 L60 14 L66 3 L72 13 L78 6 L84 12 L90 4 L90 24 L0 24 Z' fill='black'/%3E%3C/svg%3E") top left/90px 24px repeat-x; }

/* ---- taped cut photo fragment ---- */
.cd-frag { background: var(--surface); padding: 6px; z-index: 1;
  box-shadow: 0 16px 30px -20px rgba(23,19,14,.55);
  clip-path: polygon(2% 6%,30% 1%,60% 5%,98% 2%,96% 40%,99% 80%,64% 97%,32% 100%,4% 92%,1% 50%); }
.cd-frag img { display: block; width: 100%; height: 100%; object-fit: cover; clip-path: inherit; }
.cd-frag .tp { position: absolute; top: -9px; left: 28%; width: 54px; height: 18px;
  background: var(--tape); transform: rotate(-6deg); border: 1px solid rgba(255,255,255,.3); }
.cd-frag .tp.b { background: var(--tape-blue); left: auto; right: 22%; transform: rotate(7deg); }

/* dark-section decor (malzeme band) reads brighter */
.malzeme-band .cd-bignum { color: #fff; opacity: .06; }
.malzeme-band .cd-grid { color: rgba(255,255,255,.5); }
.malzeme-band .cd-crop, .malzeme-band .cd-reg { color: rgba(255,255,255,.7); }

/* ---- mobile: curated riso decor (not display:none across the board) ----
   Keep roughly 40% of .cdec per section — the thin/small signature marks
   (section numerals, torn-band dividers, taped photo scraps, ransom
   letters, registration + crop marks) shrunk to read cleanly on a phone.
   Hide only the biggest edge-bleeding shapes (solid slabs/quarters/
   triangles/halves) plus the mid-size halftone/grid patches, so nothing
   overflows or crowds the copy, while the page still reads as riso
   collage. `section{overflow-x:clip}` above is the overflow safety net. */
@media (max-width: 768px){
  .cd-quarter, .cd-quarter2, .cd-quarter3, .cd-quarter4,
  .cd-tri, .cd-tri2, .cd-tri3,
  .cd-slab, .cd-slab2,
  .cd-half, .cd-halfb,
  .cd-htc, .cd-ht, .cd-grid { display: none; }

  .cdec.cd-bignum { font-size: clamp(64px, 20vw, 130px) !important; }
  .cdec.cd-frag   { scale: .6; }
  .cdec.cd-ransom { scale: .75; }
  /* torn-band separators bleed 2% past each edge by design (full-bleed print
     effect) — kill the bleed on phones/tablets so they can't push scrollWidth
     past the viewport */
  .cdec.cd-tornband { left: 0 !important; right: 0 !important; }
}