/* ============================================================
   KESKUTU — Kolaj Kutuları
   Retro-plakat · kraft karton dünyası
   ============================================================ */

/* ---------- Fonts ---------- */
/* Anton (heading) + Work Sans (body) — display:optional ile blik yok */

:root {
  interpolate-size: allow-keywords;

  --bg: #F5E9D0;
  --bg-deep: #EADCBB;
  --surface: #FFFFFF;
  --surface-2: #FBF3E1;
  --ink: #1E1B17;
  --ink-soft: #4A4136;
  --ink-faint: #6B6152;
  --accent: #147D75;        /* teal — dolgu/çerçeve/dekor */
  --accent-text: #0C574F;   /* koyu teal — metin/link/fiyat */
  --accent-2: #F04E23;      /* turuncu-kırmızı — dolgu/vurgu */
  --accent-2-text: #BC3610; /* koyu — metin */
  --kraft: #C6A26A;
  --kraft-deep: #A6824C;
  --kraft-dark: #6E5327;
  --line: rgba(30, 27, 23, 0.16);
  --line-strong: rgba(30, 27, 23, 0.30);
  --shadow-band: 0 14px 30px -20px rgba(46, 33, 12, 0.55);
  --shadow-lift: 0 22px 46px -26px rgba(46, 33, 12, 0.6);

  --header-h: 78px;
  --maxw: 1320px;
  --pad: clamp(16px, 4vw, 56px);

  --sheen-x: 50%;
  --sheen-y: 0%;

  --serif: "Anton", "Arial Narrow", Impact, sans-serif;
  --body: "Work Sans", "Segoe UI", system-ui, sans-serif;
}

@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: local("Anton");
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  max-width: 100%;
  overflow-x: clip;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--body);
  font-weight: 400;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(198, 162, 106, 0.16), transparent 42%),
    radial-gradient(circle at 88% 4%, rgba(20, 125, 117, 0.08), transparent 40%);
  background-attachment: scroll, scroll;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
figure, figcaption, blockquote { margin: 0; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-2-text); }
button { font-family: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.12;
  margin: 0 0 0.4em;
  color: var(--ink);
}

p { margin: 0 0 1em; overflow-wrap: anywhere; }

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

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

.eyebrow {
  font-family: var(--body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  color: var(--accent-2-text);
  display: inline-block;
  margin-bottom: 0.9em;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 640ms cubic-bezier(.2,.7,.2,1), transform 640ms cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.reveal.is-in { opacity: 1; transform: none; }
html.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Kraft bant / perfore ayraç ---------- */
.tape {
  position: relative;
  display: inline-block;
  background: var(--kraft);
  color: var(--kraft-dark);
  padding: 6px 18px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(-1.4deg);
  box-shadow: 0 6px 14px -8px rgba(46, 33, 12, 0.6);
}
.tape::before, .tape::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 8px;
  background: repeating-linear-gradient(180deg, transparent 0 4px, rgba(0,0,0,.18) 4px 6px);
}
.tape::before { left: -4px; }
.tape::after { right: -4px; }

.perf-divider {
  height: 22px;
  border: 0;
  margin: 0;
  background: transparent;
  border-top: 2px dashed var(--line-strong);
  position: relative;
}

/* ============================================================
   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(245, 233, 208, 0.92);
  backdrop-filter: saturate(1.4);
  border-bottom: 1px solid var(--line);
  transition: background 240ms ease, box-shadow 240ms ease, height 240ms ease;
}
.site-header.is-scrolled {
  background: rgba(245, 233, 208, 0.98);
  box-shadow: 0 8px 24px -16px rgba(46, 33, 12, 0.4);
  height: 66px;
}
.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: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand .brand-mark {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  background: var(--accent-2);
  color: #fff;
  border-radius: 6px;
  font-size: 1rem;
  transform: rotate(-4deg);
  box-shadow: 0 4px 0 var(--accent-2-text);
}
.brand small {
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  color: var(--accent-text);
  display: block;
  line-height: 1;
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
}
.nav-desktop a {
  position: relative;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  padding: 4px 0;
}
.nav-desktop a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--accent-2);
  transition: width 220ms cubic-bezier(.2,.7,.2,1);
}
.nav-desktop a:not(.nav-cta):hover,
.nav-desktop a:not(.nav-cta).is-active { color: var(--accent-2-text); }
.nav-desktop a:not(.nav-cta):hover::after,
.nav-desktop a:not(.nav-cta).is-active::after { width: 100%; }

.nav-cta {
  background: var(--ink);
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 0 var(--kraft-dark);
  transition: transform 200ms ease, background 200ms ease;
}
.nav-desktop .nav-cta::after { display: none; }
.nav-cta:hover { background: var(--accent); color: #fff !important; transform: translateY(-2px); }

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

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

/* ---------- 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 320ms cubic-bezier(.2,.7,.2,1);
  padding: calc(var(--header-h) + 20px) 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: -20px 0 50px -30px rgba(0,0,0,.5);
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer a {
  font-family: var(--serif);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
}
.drawer a:hover, .drawer a.is-active { color: var(--accent-2-text); }
.drawer .drawer-cta {
  margin-top: 16px;
  background: var(--accent-2);
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 14px;
  border-bottom: 0;
  box-shadow: 0 5px 0 var(--accent-2-text);
}
.drawer .drawer-cta:hover { color: #fff; background: var(--accent-2-text); }
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 8, 0.55);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 240ms ease;
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

/* ============================================================
   MAIN / SECTIONS
   ============================================================ */
main { padding-top: var(--header-h); }
main section[id], [id].filter-bar { scroll-margin-top: calc(var(--header-h) + 18px); }

.section { padding-block: clamp(56px, 8vw, 108px); }
.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head h2 {
  font-size: clamp(2rem, 5vw, 3.4rem);
}
.section-head p { color: var(--ink-soft); font-size: 1.05rem; }
.section--band {
  background: var(--ink);
  color: #F3E7CE;
  position: relative;
}
.section--band h2, .section--band h3 { color: #fff; }
.section--band p { color: #D8CBB0; }

/* ============================================================
   01 · HERO — type-only-massive
   ============================================================ */
.hero {
  position: relative;
  padding-block: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 40px);
  overflow: hidden;
}
.hero-plate {
  position: relative;
  background: var(--accent);
  border: 3px solid var(--ink);
  border-radius: 10px;
  padding: clamp(28px, 5vw, 64px) clamp(22px, 4vw, 56px);
  box-shadow: 14px 14px 0 var(--kraft-dark);
  color: #FCEFD6;
  isolation: isolate;
}
.hero-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background: radial-gradient(320px circle at var(--sheen-x) var(--sheen-y),
              rgba(255,255,255,0.55), transparent 60%);
  z-index: 3;
}
.hero-plate > * { position: relative; z-index: 2; }
.hero .eyebrow { color: #FFD9AA; }
.hero h1 {
  color: #FFF6E4;
  font-size: clamp(3.2rem, 13vw, 4.5rem);
  line-height: 0.94;
  letter-spacing: -0.005em;
  margin: 0.1em 0 0.35em;
  text-shadow: 4px 4px 0 rgba(0,0,0,0.28);
}
.hero h1 .word { display: inline-block; }
.hero-sub {
  max-width: 620px;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: #FBEBCE;
  font-weight: 500;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
  align-items: center;
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 2px dashed rgba(255,246,228,0.4);
}
.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.86rem;
  color: #FFF3DC;
}
.hero-trust span::before {
  content: "";
  width: 9px; height: 9px;
  background: var(--accent-2);
  border-radius: 2px;
  transform: rotate(45deg);
}

/* Ürün şeridi altında */
.hero-strip {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.hero-strip figure {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--ink);
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow-band);
  background: var(--surface-2);
}
.hero-strip img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.2,.7,.2,1);
}
.hero-strip figure:hover img { transform: scale(1.06); }
.hero-strip figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 10px 8px;
  font-family: var(--serif);
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: #fff;
  background: linear-gradient(transparent, rgba(20,15,8,0.82));
}
.hero-strip figcaption b {
  display: block;
  font-family: var(--body);
  color: #FFD9AA;
  font-size: 0.92rem;
}
@media (max-width: 640px) {
  .hero-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 14px 26px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease, color 200ms ease, box-shadow 200ms ease;
  text-align: center;
}
.btn-primary {
  background: var(--accent-2);
  color: #fff;
  box-shadow: 0 6px 0 var(--accent-2-text);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--accent-2-text);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #8f2609;
}
.btn-ghost {
  background: transparent;
  color: #FFF6E4;
  border-color: #FFF6E4;
}
.section--light .btn-ghost { color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: #FFF6E4;
  color: var(--ink);
  transform: translateY(-2px);
}
.btn-ink {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 6px 0 var(--kraft-dark);
}
.btn-ink:hover, .btn-ink:focus-visible { background: var(--accent); color: #fff; transform: translateY(-2px); }

/* ============================================================
   02 · KUTU KATALOĞU + 03 FİLTRE (araç — sayfanın kalbi)
   ============================================================ */
.catalog { position: relative; }

.filter-bar {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: clamp(18px, 3vw, 28px);
  box-shadow: var(--shadow-band);
  margin-bottom: 30px;
  position: relative;
}
.filter-bar::before {
  content: "Kutuyu filtrele";
  position: absolute;
  top: -14px; left: 22px;
  background: var(--kraft);
  color: var(--kraft-dark);
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 14px;
  transform: rotate(-1.6deg);
  box-shadow: 0 5px 12px -8px rgba(46,33,12,.6);
}
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px 22px;
  align-items: end;
}
.filter-group { min-width: 0; }
.filter-group > span.flabel {
  display: block;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.86rem;
  padding: 8px 15px;
  border-radius: 20px;
  border: 2px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  transition: all 180ms ease;
}
.chip:hover { border-color: var(--accent); color: var(--accent-text); }
.chip[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.filter-select {
  width: 100%;
  font-family: var(--body);
  font-size: 0.95rem;
  padding: 11px 14px;
  border: 2px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
}
.budget-out {
  font-weight: 700;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.budget-range { width: 100%; accent-color: var(--accent-2); }
.filter-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}
.filter-count {
  font-weight: 600;
  color: var(--ink-soft);
}
.filter-count b { color: var(--accent-2-text); font-variant-numeric: tabular-nums; }
.btn-reset {
  background: transparent;
  border: 2px solid var(--line-strong);
  border-radius: 8px;
  padding: 9px 16px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: all 180ms ease;
}
.btn-reset:hover { border-color: var(--accent-2); color: var(--accent-2-text); }

/* --- Ürün gridi --- */
.box-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 900px) { .box-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .box-grid { grid-template-columns: 1fr; } }

.box-card {
  position: relative;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-band);
  transition: transform 240ms cubic-bezier(.2,.7,.2,1), box-shadow 240ms ease;
}
.box-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }

/* karton kapak açılışı efekti */
.box-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-2);
}
.box-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.2,.7,.2,1);
}
.box-card:hover .box-photo img { transform: scale(1.05); }
.box-lid {
  position: absolute;
  inset: 0;
  background: var(--kraft);
  border-bottom: 3px solid var(--kraft-dark);
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform 620ms cubic-bezier(.5,.05,.2,1);
  z-index: 4;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
}
.box-lid span {
  font-family: var(--serif);
  text-transform: uppercase;
  color: var(--kraft-dark);
  letter-spacing: 0.14em;
  font-size: 0.82rem;
  opacity: 0.85;
}
.box-card:hover .box-lid,
.box-card:focus-within .box-lid { transform: rotateX(-118deg); }

/* kesik kağıt saçılması */
.scrap {
  position: absolute;
  width: 22px; height: 22px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: transform 640ms cubic-bezier(.2,.8,.3,1.1), opacity 500ms ease;
}
.scrap.s1 { background: var(--accent-2); clip-path: polygon(0 0,100% 12%,86% 100%,10% 84%); left: 16%; top: 30%; }
.scrap.s2 { background: var(--accent); clip-path: polygon(12% 0,100% 22%,78% 100%,0 70%); left: 62%; top: 22%; width: 18px; height: 18px; }
.scrap.s3 { background: #F4C430; clip-path: polygon(0 18%,88% 0,100% 90%,20% 100%); left: 40%; top: 46%; width: 16px; height: 16px; }
.box-card:hover .scrap { opacity: 1; }
.box-card:hover .scrap.s1 { transform: translate(-10px, -18px) rotate(-24deg); }
.box-card:hover .scrap.s2 { transform: translate(14px, -22px) rotate(30deg); }
.box-card:hover .scrap.s3 { transform: translate(4px, -14px) rotate(12deg); }

.stock-badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 6;
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 4px;
  background: var(--ink);
  color: #fff;
}
.stock-badge.is-out { background: var(--accent-2-text); }
.tema-tag {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 6;
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
  background: rgba(255,246,228,0.92);
  color: var(--accent-text);
}

.box-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.box-body h3 { font-size: 1.35rem; margin: 0; }
.box-level {
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.box-desc { font-size: 0.92rem; color: var(--ink-soft); margin: 4px 0 0; }
.box-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  gap: 10px;
}
.box-price {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.box-price small { font-family: var(--body); font-weight: 600; font-size: 0.8rem; color: var(--ink-faint); }
.box-actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.box-actions .btn { padding: 10px 18px; font-size: 0.86rem; flex: 1; min-width: 120px; }
.cmp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}
.cmp-toggle input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: auto;
  width: 18px; height: 18px;
  min-width: 18px; min-height: 18px;
  padding: 0; border: 0; margin: 0;
  accent-color: var(--accent-2);
}

.empty-msg {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 24px;
  border: 2px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--surface-2);
}
.empty-msg h3 { color: var(--accent-2-text); font-size: 1.5rem; }
.empty-msg p { color: var(--ink-soft); max-width: 420px; margin-inline: auto; }

/* --- Karşılaştırma paneli --- */
.compare-panel {
  margin-top: 26px;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--shadow-band);
  overflow: hidden;
}
.compare-panel[hidden] { display: none; }
.compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--accent);
  color: #fff;
}
.compare-head h3 { color: #fff; margin: 0; font-size: 1.1rem; }
.compare-clear {
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
  padding: 7px 14px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  transition: background 180ms ease;
}
.compare-clear:hover { background: rgba(255,255,255,0.28); color: #fff; }
.compare-body { padding: 6px 0; }
.compare-hint { padding: 18px 20px; color: var(--ink-soft); }

/* ============================================================
   04 · İÇİNDEKİLER
   ============================================================ */
.inside-wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 860px) { .inside-wrap { grid-template-columns: 1fr; } }
.inside-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.inside-media figure {
  border: 2px solid var(--ink);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-band);
  aspect-ratio: 3 / 4;
}
.inside-media figure:first-child { grid-row: span 2; aspect-ratio: 3 / 5; }
.inside-media img { width: 100%; height: 100%; object-fit: cover; }
.inside-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.inside-list li {
  position: relative;
  padding-left: 30px;
  font-size: 1.02rem;
}
.inside-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 12px; height: 12px;
  background: var(--accent-2);
  clip-path: polygon(0 15%,85% 0,100% 88%,18% 100%);
}
.inside-list li b { display: block; font-weight: 700; }
.inside-list li span { color: var(--ink-soft); font-size: 0.92rem; }

/* ============================================================
   PROCESS / SÜREÇ
   ============================================================ */
.steps { display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 2px dashed rgba(255,255,255,0.18);
  align-items: start;
}
.step:last-child { border-bottom: 0; }
.step-num {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  color: var(--accent-2);
  line-height: 1;
  min-width: 2.4ch;
}
.step-body h3 { font-size: 1.3rem; margin-bottom: 6px; }
.step-body .step-time {
  display: inline-block;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFD9AA;
  margin-bottom: 8px;
}

/* ============================================================
   05 · YORUMLAR (editorial grid)
   ============================================================ */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
}
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .reviews-grid { grid-template-columns: 1fr; } }
.review-card {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-band);
  position: relative;
}
.review-card:nth-child(2) { transform: rotate(-0.8deg); }
.review-card:nth-child(5) { transform: rotate(0.9deg); }
.review-card blockquote { font-size: 1.02rem; color: var(--ink); margin-bottom: 16px; }
.review-meta { display: flex; align-items: center; gap: 12px; border-top: 1px dashed var(--line); padding-top: 14px; }
.review-ava {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--accent);
  color: #fff;
  font-family: var(--serif);
  border-radius: 8px;
  font-size: 1.1rem;
  transform: rotate(-3deg);
}
.review-who b { display: block; font-weight: 700; }
.review-who span { font-size: 0.82rem; color: var(--ink-faint); }
.review-stars { color: var(--accent-2); letter-spacing: 2px; font-size: 0.9rem; margin-bottom: 8px; }

/* ============================================================
   NOTLAR (son eklenenler)
   ============================================================ */
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 760px) { .notes { grid-template-columns: 1fr; } }
.note {
  padding: 20px;
  border: 2px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-2);
}
.note time { font-weight: 700; font-size: 0.76rem; color: var(--accent-2-text); text-transform: uppercase; letter-spacing: 0.05em; }
.note h4 { font-size: 1.05rem; margin: 8px 0 4px; }
.note p { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }

/* ============================================================
   PRICING / PAKETLER
   ============================================================ */
.price-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .price-list { grid-template-columns: 1fr; } }
.price-card {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 26px;
  box-shadow: var(--shadow-band);
  display: flex;
  flex-direction: column;
}
.price-card.is-featured { border-color: var(--accent-2); box-shadow: 0 0 0 2px var(--accent-2), var(--shadow-lift); }
.price-card .tier { font-family: var(--serif); font-size: 1.5rem; text-transform: uppercase; }
.price-card .amt { font-family: var(--serif); font-size: 2.6rem; color: var(--accent-2-text); line-height: 1; margin: 8px 0; }
.price-card .amt small { font-family: var(--body); font-weight: 600; font-size: 0.9rem; color: var(--ink-faint); }
.price-card ul { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 9px; }
.price-card li { position: relative; padding-left: 24px; font-size: 0.94rem; }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-text); font-weight: 700; }
.price-card li.no::before { content: "×"; color: var(--accent-2-text); }
.price-card li.no { color: var(--ink-faint); }
.price-card .btn { margin-top: auto; }
.price-note { font-size: 0.8rem; color: var(--ink-faint); margin-top: 16px; }

/* ============================================================
   FAQ — pure CSS accordion
   ============================================================ */
.faq { max-width: 820px; }
.faq-item {
  border: 2px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px clamp(18px, 3vw, 26px);
  font-family: var(--serif);
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--accent-2);
  transition: transform 300ms ease;
  line-height: 1;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item > .answer {
  height: 0;
  padding: 0 clamp(18px, 3vw, 26px);
  overflow: hidden;
  transition: height 360ms cubic-bezier(.4,0,.2,1), padding-block-end 360ms cubic-bezier(.4,0,.2,1);
}
.faq-item[open] > .answer { height: auto; padding-block-end: 22px; }
.faq-item > .answer p { color: var(--ink-soft); margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .faq-item > .answer { transition: none; }
}

/* ============================================================
   06 · İLETİŞİM / FORM
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.channel {
  display: block;
  border: 2px solid var(--line-strong);
  border-radius: 12px;
  padding: 20px;
  background: var(--surface);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.channel:hover { transform: translateY(-3px); box-shadow: var(--shadow-band); border-color: var(--accent); color: inherit; }
.channel .ch-ico {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-family: var(--serif);
  font-size: 1.1rem;
  margin-bottom: 12px;
  transform: rotate(-3deg);
}
.channel .ch-name { font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.channel .ch-val { font-weight: 700; font-size: 1.05rem; color: var(--ink); word-break: break-word; margin: 3px 0; }
.channel .ch-sub { font-size: 0.84rem; color: var(--ink-faint); }

.form-card {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--shadow-band);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; margin-bottom: 16px; }
.field > span, .field > label:first-child { font-weight: 700; font-size: 0.82rem; margin-bottom: 6px; }
.field label { font-weight: 700; font-size: 0.82rem; display: block; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  font-family: var(--body);
  font-size: 0.98rem;
  padding: 12px 14px;
  border: 2px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  width: 100%;
  transition: border-color 180ms ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.field textarea { min-height: 130px; resize: vertical; }
.field.kvkk {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.field.kvkk label { font-weight: 400; }
.field input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: auto;
  width: 18px; height: 18px;
  min-width: 18px; min-height: 18px;
  padding: 0; border: 0; margin: 2px 0 0;
  accent-color: var(--accent);
}
.form-card .btn { width: 100%; }
@media (min-width: 640px) { .form-card .btn.submit { width: auto; } }

/* Hours */
.hours-card {
  border: 2px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}
.hours-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px dashed var(--line);
  font-variant-numeric: tabular-nums;
}
.hours-row:last-child { border-bottom: 0; }
.hours-row.today { background: var(--surface-2); }
.hours-row .day { font-weight: 700; }
.hours-row.today .day::after { content: " · bugün"; color: var(--accent-2-text); font-weight: 700; font-size: 0.8rem; }
.hours-row .time { color: var(--ink-soft); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: #E9DCC2;
  padding-block: clamp(40px, 6vw, 72px) 28px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(20px, 4vw, 48px);
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-top { grid-template-columns: 1fr; } }
.footer-col h4 { color: #FFF6E4; font-size: 1rem; margin-bottom: 14px; }
.footer-col a { display: block; color: #D8CBB0; padding: 5px 0; font-weight: 500; }
.footer-col a:hover { color: #FFD9AA; }
.footer-brand .brand { color: #fff; margin-bottom: 12px; }
.footer-brand .brand small { color: #FFD9AA; }
.footer-brand p { color: #C9BCA1; font-size: 0.92rem; max-width: 34ch; }
.footer-legal-line {
  color: #C9BCA1;
  font-size: 0.82rem;
  margin-top: 12px;
  line-height: 1.7;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 22px;
  font-size: 0.82rem;
  color: #B7AB92;
}
.footer-bottom a { color: #D8CBB0; display: inline; }
.footer-bottom a:hover { color: #FFD9AA; }
.footer-bottom .legal-links a { margin-left: 6px; }

/* ============================================================
   COOKIE
   ============================================================ */
.cookie-banner {
  position: fixed;
  bottom: 16px; left: 16px; right: 16px;
  max-width: 520px;
  margin: 0 auto;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.5);
  transform: translateY(140%);
  opacity: 0;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), opacity 240ms;
  z-index: 9999;
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
@media (min-width: 720px) {
  .cookie-banner { left: 24px; right: auto; max-width: 420px; }
}
.cookie-banner h3 { font-size: 1.15rem; margin-bottom: 6px; }
.cookie-banner p { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 14px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions button {
  flex: 1;
  min-width: 100px;
  min-height: 44px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid var(--ink);
  transition: all 180ms ease;
}
.cookie-actions [data-consent="accept"] { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }
.cookie-actions [data-consent="accept"]:hover { background: var(--accent-2-text); }
.cookie-actions [data-consent="reject"] { background: var(--surface); color: var(--ink); }
.cookie-actions [data-consent="reject"]:hover { background: var(--surface-2); }
.cookie-actions [data-consent="settings"] { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.cookie-actions [data-consent="settings"]:hover { border-color: var(--accent); color: var(--accent-text); }

/* ============================================================
   PAGE HERO (interior)
   ============================================================ */
.page-hero {
  position: relative;
  padding-block: clamp(40px, 6vw, 72px);
  min-height: 240px;
  display: flex;
  align-items: center;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(2.4rem, 7vw, 4.5rem); }
.page-hero p { color: var(--ink-soft); max-width: 620px; font-size: 1.1rem; }
.page-hero--band { background: var(--ink); color: #F3E7CE; }
.page-hero--band h1 { color: #fff; }
.page-hero--band p { color: #D8CBB0; }

/* Longform / doc */
.doc { max-width: 760px; line-height: 1.75; }
.doc h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-top: 1.6em; }
.doc h3 { font-size: 1.2rem; margin-top: 1.4em; }
.doc p, .doc li { color: var(--ink-soft); }
.doc p { margin-bottom: 1.15em; }
.doc li { margin-bottom: 0.5em; }
.doc ul { padding-left: 22px; }
.doc a { text-decoration: underline; }
.doc .muted { font-size: 0.86rem; color: var(--ink-faint); }

/* 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: 8px;
}
.table-scroll > table { margin: 0 !important; min-width: 480px; width: 100%; border-collapse: collapse; }
:where(*:has(> .table-scroll), *:has(> * > .table-scroll), *:has(> * > * > .table-scroll)) { min-width: 0; }
.table-scroll th, .table-scroll td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.table-scroll th { background: var(--surface-2); font-weight: 700; color: var(--ink); }
.table-scroll td { color: var(--ink-soft); }

/* Team */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }
.team-card {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-band);
}
.team-card .team-photo { aspect-ratio: 4 / 5; overflow: hidden; }
.team-card img { width: 100%; height: 100%; object-fit: cover; }
.team-card .team-body { padding: 20px; }
.team-card h3 { font-size: 1.25rem; margin-bottom: 2px; }
.team-role { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-2-text); margin-bottom: 10px; }
.team-card p { font-size: 0.92rem; color: var(--ink-soft); }

/* Thank you */
.thanks {
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: 60px;
}
.thanks .thanks-mark {
  width: 80px; height: 80px;
  display: grid; place-items: center;
  background: var(--accent);
  color: #fff;
  border-radius: 14px;
  font-family: var(--serif);
  font-size: 2.4rem;
  margin: 0 auto 24px;
  transform: rotate(-4deg);
  box-shadow: 0 10px 0 var(--kraft-dark);
}
.thanks h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
.thanks p { color: var(--ink-soft); max-width: 460px; margin-inline: auto; }

/* Utilities */
.tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.pill {
  font-weight: 700;
  font-size: 0.78rem;
  padding: 7px 14px;
  border-radius: 20px;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  color: var(--ink);
}
.center { text-align: center; }
.mt-lg { margin-top: clamp(28px, 4vw, 48px); }
.lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 720px; }

/* stat inline */
.stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 5vw, 60px);
  margin-top: 30px;
  padding-top: 24px;
  border-top: 2px dashed var(--line);
}
.stat-strip .stat b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--accent-2-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
}
.stat-strip .stat span { font-size: 0.88rem; color: var(--ink-soft); font-weight: 600; }
.section--band .stat-strip { border-color: rgba(255,255,255,0.2); }
.section--band .stat-strip .stat span { color: #D8CBB0; }

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

/* ============================================================
   EPIC BOLD-POSTER COLLAGE ENGINE — KESKUTU
   Ransom cut-letters, torn paper, tape, halftone, riso
   overprint, registration marks, pinned cine scenes.
   Palette: teal #147D75 / orange #F04E23 / yellow #F4C430 / kraft
   ============================================================ */

/* sticky-fix: clip (NOT hidden) so position:sticky pinning survives */
html { overflow-x: clip; overflow-y: visible; }
body { overflow-x: clip; overflow-y: visible; max-width: 100vw; }

:root{
  --yellow:#F4C430; --yellow-deep:#C98A12;
  --tape:rgba(244,196,48,.80); --tape-teal:rgba(20,125,117,.42); --tape-kraft:rgba(198,162,106,.85);
}

/* GLOBAL halftone dot + faint kraft registration grid layered on cream */
body{
  background-image:
    radial-gradient(rgba(30,27,23,.05) 21%, transparent 23%),
    radial-gradient(rgba(20,125,117,.045) 21%, transparent 23%),
    radial-gradient(circle at 12% 8%, rgba(198,162,106,0.16), transparent 42%),
    radial-gradient(circle at 88% 4%, rgba(20,125,117,0.08), transparent 40%),
    linear-gradient(rgba(30,27,23,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,27,23,.05) 1px, transparent 1px);
  background-size:7px 7px, 7px 7px, auto, auto, 54px 54px, 54px 54px;
  background-position:0 0, 3.5px 3.5px, 0 0, 0 0, 0 0, 0 0;
  background-attachment: fixed, fixed, scroll, scroll, fixed, fixed;
}
section > .container{ position:relative; z-index:2; }
main section{ position:relative; overflow:clip; }

/* ---------- RANSOM cut-letters ---------- */
.ransom{ display:inline-flex; flex-wrap:wrap; gap:.06em .04em; line-height:.9; }
.ransom .rl{
  display:inline-block; padding:.02em .12em;
  background:var(--surface); color:var(--ink);
  box-shadow:3px 3px 0 rgba(30,27,23,.32);
  transform:rotate(var(--rr,-2deg));
}
.ransom .rl:nth-child(3n){ background:var(--accent); color:#FFF6E4; --rr:2.4deg; box-shadow:3px 3px 0 var(--accent-text); }
.ransom .rl:nth-child(3n+1){ background:var(--accent-2); color:#FFF6E4; --rr:-3deg; box-shadow:3px 3px 0 var(--accent-2-text); }
.ransom .rl:nth-child(4n+2){ background:var(--yellow); color:var(--ink); --rr:3deg; box-shadow:3px 3px 0 var(--yellow-deep); }
.ransom .rl:nth-child(5n){ transform:rotate(-4deg); }
.ransom .sp{ width:.28em; box-shadow:none; background:transparent; }

/* ---------- MISREGISTRATION heading words (riso split) ---------- */
.mis{ position:relative; color:var(--ink); letter-spacing:-.01em;
  text-shadow: 3px -2px 0 var(--accent-2), -3px 2px 0 var(--accent); }
h1 .mis, .mis.big{ text-shadow: 4px -3px 0 var(--accent-2), -4px 3px 0 var(--accent); }
.mis.on-dark{ color:#FFF6E4; text-shadow:4px -3px 0 var(--accent-2), -4px 3px 0 var(--yellow); }
@media (max-width:600px){
  .mis{ text-shadow: 2px -1px 0 var(--accent-2), -2px 1px 0 var(--accent); }
  h1 .mis, .mis.big{ text-shadow: 3px -2px 0 var(--accent-2), -3px 2px 0 var(--accent); }
}

/* stencil eyebrow chip */
.eyebrow.stencil{
  background:var(--ink); color:#FFF6E4 !important; padding:5px 11px; border-radius:3px;
  transform:rotate(-1.4deg); box-shadow:3px 3px 0 var(--accent-2); letter-spacing:.16em;
}

/* ============================================================
   PRINTER-MARK DECOR SYSTEM  (.pm = absolute, pointer-events:none)
   ============================================================ */
.pm{ position:absolute; pointer-events:none; z-index:0; }
.tc-ink{ color:var(--ink); } .tc-teal{ color:var(--accent); } .tc-red{ color:var(--accent-2); } .tc-yellow{ color:var(--yellow); }
.o35{opacity:.35}.o5{opacity:.5}.o6{opacity:.6}.o7{opacity:.7}.o85{opacity:.85}

.pm-reg{ width:40px; height:40px;
  background:radial-gradient(circle, transparent 5px, currentColor 5px, currentColor 6.5px, transparent 7px); }
.pm-reg::before{ content:""; position:absolute; left:50%; top:-6px; bottom:-6px; width:1.6px; background:currentColor; transform:translateX(-50%); }
.pm-reg::after{ content:""; position:absolute; top:50%; left:-6px; right:-6px; height:1.6px; background:currentColor; transform:translateY(-50%); }

.pm-crop{ width:30px; height:30px; }
.pm-crop::before{ content:""; position:absolute; left:0; top:0; width:30px; height:1.6px; background:currentColor; }
.pm-crop::after{ content:""; position:absolute; left:0; top:0; width:1.6px; height:30px; background:currentColor; }

/* brand calibration bar (teal/orange/yellow/ink) */
.pm-cmyk{ width:132px; height:18px; border:1px solid rgba(30,27,23,.35);
  background:linear-gradient(90deg,var(--accent) 0 25%,var(--accent-2) 25% 50%,var(--yellow) 50% 75%,var(--ink) 75% 100%); }
.pm-bar{ width:120px; height:18px; border:1px solid rgba(30,27,23,.35);
  background:linear-gradient(90deg,var(--accent) 0 33.33%,var(--accent-2) 33.33% 66.66%,var(--yellow) 66.66% 100%); }
.pm-swatch{ width:26px; height:104px; border:1px solid rgba(30,27,23,.3);
  background:linear-gradient(180deg,var(--accent) 0 25%,var(--accent-2) 25% 50%,var(--yellow) 50% 75%,var(--ink) 75% 100%); }

.pm-halo{ width:110px; height:110px;
  background:radial-gradient(currentColor 32%, transparent 34%); background-size:8px 8px;
  -webkit-mask:radial-gradient(circle,#000 60%,transparent 66%); mask:radial-gradient(circle,#000 60%,transparent 66%); }

.pm-star{ width:56px; height:56px; border-radius:50%;
  background:repeating-conic-gradient(currentColor 0 15deg, transparent 15deg 30deg);
  -webkit-mask:radial-gradient(circle, #000 68%, transparent 70%); mask:radial-gradient(circle, #000 68%, transparent 70%); }

.pm-ruler{ width:180px; height:16px; border-bottom:1.6px solid currentColor;
  background:repeating-linear-gradient(90deg, currentColor 0 1.4px, transparent 1.4px 9px);
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 55%); mask:linear-gradient(180deg,transparent 0,#000 55%); }

.pm-stamp{
  font-family:var(--body); font-weight:800; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:currentColor; border:2px solid currentColor; border-radius:3px; padding:5px 9px;
  opacity:.85; white-space:nowrap; background:rgba(245,233,208,.4);
}
.pm-stamp.ring{ box-shadow:0 0 0 2px rgba(255,246,228,.55) inset, 3px 3px 0 -1px currentColor; }
.pm-stamp.solid{ color:#FFF6E4; border-color:transparent; opacity:.94; }
.pm-stamp.solid.tc-red{ background:var(--accent-2); }
.pm-stamp.solid.tc-teal{ background:var(--accent); }
.pm-stamp.solid.tc-ink{ background:var(--ink); }
.pm-stamp.solid.tc-yellow{ background:var(--yellow); color:var(--ink); }

/* TAPE strip */
.pm-tape{ width:78px; height:24px; background:var(--tape);
  border:1px solid rgba(255,255,255,.4); box-shadow:0 2px 7px -3px rgba(0,0,0,.4);
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 6px,#000 calc(100% - 6px),transparent 100%);
  mask:linear-gradient(90deg,transparent 0,#000 6px,#000 calc(100% - 6px),transparent 100%); }
.pm-tape.teal{ background:var(--tape-teal); }
.pm-tape.kraft{ background:var(--tape-kraft); }

/* torn OVERPRINTED poster fragment (photo cutout) */
.pm-frag{ overflow:visible;
  clip-path:polygon(3% 5%,24% 1%,52% 4%,80% 0,98% 6%,96% 34%,100% 66%,97% 97%,72% 99%,44% 96%,20% 100%,2% 94%,0 62%,4% 30%); }
.pm-frag img{ width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.08) saturate(1.05); }
.pm-frag.duo-teal img{ filter:grayscale(1) contrast(1.15) brightness(1.05) sepia(1) saturate(4) hue-rotate(120deg); }
.pm-frag.duo-red img{ filter:grayscale(1) contrast(1.15) brightness(1.03) sepia(1) saturate(6) hue-rotate(-18deg); }

/* torn overprint BAND across a section edge */
.pm-band{ height:12px; left:-2%; right:-2%;
  background:repeating-linear-gradient(90deg,var(--accent) 0 26px,var(--accent-2) 26px 52px,var(--yellow) 52px 78px);
  opacity:.9;
  clip-path:polygon(0 40%,4% 10%,9% 55%,15% 15%,22% 60%,30% 12%,38% 58%,46% 18%,54% 60%,62% 14%,70% 58%,78% 16%,86% 60%,93% 18%,100% 52%,100% 100%,0 100%); }

/* torn paper edges for sections/cards */
.torn-edge{ position:absolute; left:0; right:0; height:16px; z-index:3; pointer-events:none;
  background:var(--edge-c,var(--bg));
  clip-path:polygon(0 0,3% 60%,7% 10%,12% 70%,17% 15%,23% 66%,29% 8%,35% 72%,41% 18%,47% 64%,53% 10%,59% 70%,65% 14%,71% 66%,77% 8%,83% 72%,89% 16%,95% 64%,100% 6%,100% 0); }
.torn-edge.tb{ top:-1px; }
.torn-edge.bb{ bottom:-1px; transform:scaleY(-1); }

/* decor mobile curation */
@media (max-width:900px){ .pm-bleed{ display:none !important; } }
@media (max-width:768px){
  .pm:not(.pm-keep){ display:none !important; }
  .pm-keep.pm-cmyk,.pm-keep.pm-bar{ width:98px; }
  .pm-keep.pm-ruler{ width:120px; }
  .pm-keep.pm-swatch{ height:78px; }
}

/* ============================================================
   PRELOADER + MOTES
   ============================================================ */
#pre{ position:fixed; inset:0; z-index:9999; background:var(--bg);
  display:grid; place-items:center; transition:opacity .7s ease, visibility .7s; }
#pre.done{ opacity:0; visibility:hidden; pointer-events:none; }
#pre .pl-in{ text-align:center; }
#pre .pl-mark{ font-family:var(--serif); text-transform:uppercase; font-size:clamp(40px,10vw,84px);
  letter-spacing:.01em; color:var(--ink); text-shadow:5px -4px 0 var(--accent-2), -5px 4px 0 var(--accent); }
#pre .pl-sub{ font-family:var(--body); font-weight:800; font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-faint); margin-top:12px; }
#pre .pl-bar{ margin:22px auto 0; width:min(240px,60vw); height:14px;
  border:2px solid var(--ink); background:var(--surface); overflow:hidden; position:relative; }
#pre .pl-bar i{ position:absolute; inset:0; width:0;
  background:linear-gradient(90deg,var(--accent) 0 33%,var(--accent-2) 33% 66%,var(--yellow) 66% 100%);
  animation:plFill 1.15s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes plFill{ to{ width:100%; } }
#motes{ position:fixed; inset:0; z-index:3; pointer-events:none; mix-blend-mode:multiply; opacity:.4; }

/* ============================================================
   CINEMATIC ENGINE — sticky-pin scenes
   ============================================================ */
.cine-track{ position:relative; }
.cine-pin{ position:sticky; top:0; height:100vh; overflow:hidden; display:grid; place-items:center; }

/* ---------- HERO (pinned poster cluster) ---------- */
.hero-scene{ padding:0 !important; overflow:visible; }
.hero-cine{ height:120vh; }
.cine-pin.hero-pin{
  background:
    radial-gradient(rgba(30,27,23,.05) 1px, transparent 1.7px) 0 0/7px 7px,
    linear-gradient(180deg, rgba(20,125,117,.12), transparent 46%), var(--bg);
}
.hero-inner{ position:relative; z-index:4; width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:1fr; gap:clamp(22px,4vw,44px); align-items:center; }
@media (min-width:1024px){ .hero-inner{ grid-template-columns:1.04fr .96fr; } }
.hero-copy2{ max-width:660px; position:relative; z-index:5; }
.hero-copy2 .eyebrow{ margin-bottom:14px; }
.hero-copy2 h1{ font-size:clamp(3rem,10vw,6.4rem); line-height:.86; margin:6px 0 22px;
  text-transform:uppercase; letter-spacing:-.01em; }
.hero-copy2 h1 .l2{ display:block; }
.hero-copy2 .lead{ font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--ink-soft); max-width:52ch; margin-bottom:24px; font-weight:500; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-copy2 .hero-trust{ border-top:2px dashed var(--line); margin-top:26px; padding-top:22px; }
.hero-copy2 .hero-trust span{ color:var(--ink-soft); }
.hero-copy2 .hero-trust span::before{ background:var(--accent-2); }

.hero-cluster{ position:relative; height:min(66vh,540px); z-index:3; }
@media (max-width:1023px){ .hero-cluster{ height:clamp(320px,64vw,440px); } }
.hero-cluster .hp{ position:absolute; background:#fff; padding:9px;
  box-shadow:0 26px 48px -24px rgba(46,33,12,.6); transform:rotate(var(--r,0));
  clip-path:polygon(2% 4%,22% 1%,50% 3%,76% 0,99% 5%,97% 32%,100% 64%,97% 97%,74% 99%,48% 96%,24% 100%,2% 95%,0 64%,3% 32%); }
.hero-cluster .hp img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }
.hero-cluster .hp.duo-teal img{ filter:grayscale(1) contrast(1.15) brightness(1.05) sepia(1) saturate(4) hue-rotate(120deg); }
.hero-cluster .hp.duo-red img{ filter:grayscale(1) contrast(1.12) brightness(1.03) sepia(1) saturate(6) hue-rotate(-18deg); }
.hero-cluster .hp .tp{ position:absolute; top:-10px; left:26%; width:70px; height:22px; background:var(--tape); transform:rotate(-6deg); border:1px solid rgba(255,255,255,.4); }
.hero-cluster .hp .tp.b{ background:var(--tape-teal); left:auto; right:18%; transform:rotate(6deg); }
.hero-cluster .hp1{ width:min(48%,246px); left:30%; top:5%;   --r:-5deg; z-index:6; }
.hero-cluster .hp2{ width:min(40%,200px); left:0%;  top:16%;  --r:6deg;  z-index:5; }
.hero-cluster .hp3{ width:min(42%,210px); left:40%; top:46%;  --r:5deg;  z-index:7; }
.hero-cluster .hp4{ width:min(34%,172px); left:6%;  top:56%;  --r:-8deg; z-index:6; }
.hero-cluster .acc{ position:absolute; z-index:2; }
.hero-cluster .acc.slab{ width:min(58%,290px); height:min(60%,300px); left:18%; top:10%; background:var(--accent); opacity:.92; transform:rotate(-6deg);
  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%); }
.hero-cluster .acc.slab2{ width:min(42%,190px); height:min(32%,160px); left:0%; top:0%; background:var(--accent-2); opacity:.88; transform:rotate(7deg);
  clip-path:polygon(2% 26%,28% 6%,56% 22%,86% 4%,99% 32%,96% 76%,68% 96%,40% 80%,14% 98%,1% 66%); }
.hero-cluster .acc.slab3{ width:min(30%,140px); height:min(30%,140px); right:2%; bottom:6%; background:var(--yellow); opacity:.9; transform:rotate(-10deg);
  clip-path:polygon(10% 4%,90% 0,100% 60%,84% 100%,20% 94%,0 40%); }
.hero-scroll{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:8;
  font-family:var(--body); font-weight:800; font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink); background:var(--tape); padding:7px 13px; animation:cineBob 2s ease-in-out infinite;
  box-shadow:0 4px 10px -6px rgba(0,0,0,.5); }
@keyframes cineBob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,7px); } }
@media (prefers-reduced-motion:reduce){ .hero-scroll{ animation:none; } }

/* ============================================================
   SIGNATURE SCENE — KUTU: kit contents explode -> assemble
   ============================================================ */
.kit-track{ height:300vh; }
.cine-pin.kit-pin{
  background:
    radial-gradient(rgba(30,27,23,.05) 1px, transparent 1.7px) 0 0/7px 7px,
    radial-gradient(120% 90% at 50% 40%, var(--surface-2), var(--bg) 74%);
}
.kit-wrap{ position:relative; z-index:3; width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:1fr; gap:clamp(20px,3vw,40px); align-items:center; }
@media (min-width:960px){ .kit-wrap{ grid-template-columns:1.05fr .8fr; } }
.kit-stage{ position:relative; width:100%; max-width:540px; aspect-ratio:1/1; margin-inline:auto; }
@media (max-width:520px){ .kit-stage{ max-width:340px; } }
.kit-piece{ position:absolute; will-change:transform; margin:0;
  box-shadow:0 20px 40px -22px rgba(46,33,12,.6); }
.kit-piece.kp-photo{ background:#fff; padding:7px; overflow:visible;
  clip-path:polygon(2% 4%,26% 0,52% 4%,78% 0,99% 6%,97% 32%,100% 66%,96% 98%,72% 99%,46% 96%,22% 100%,2% 94%,0 62%,4% 30%); }
.kit-piece.kp-photo img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:1/1; }
.kit-piece .kp-tape{ position:absolute; top:-8px; left:30%; width:56px; height:18px; background:var(--tape); transform:rotate(-7deg); border:1px solid rgba(255,255,255,.4); }
.kit-piece.kp-scrap{ box-shadow:0 14px 26px -18px rgba(46,33,12,.6); }
.kp-scrap.s-teal{ background:var(--accent); clip-path:polygon(0 12%,90% 0,100% 82%,14% 100%); }
.kp-scrap.s-red{ background:var(--accent-2); clip-path:polygon(8% 0,100% 16%,86% 100%,0 78%); }
.kp-scrap.s-yellow{ background:var(--yellow); clip-path:polygon(0 18%,86% 0,100% 90%,20% 100%); }
.kit-piece.kp-label{ display:grid; place-items:center; background:var(--surface); border:2px solid var(--ink);
  font-family:var(--serif); text-transform:uppercase; letter-spacing:.04em; color:var(--ink);
  font-size:clamp(.8rem,2.4vw,1.15rem); box-shadow:4px 4px 0 var(--ink); transform:rotate(-3deg); }
.kit-piece.kp-label.alt{ background:var(--yellow); box-shadow:4px 4px 0 var(--yellow-deep); }

.kit-cap{ position:relative; z-index:4; }
.kit-cap h2{ font-size:clamp(2rem,5.5vw,3.6rem); }
.kit-cap .lead{ color:var(--ink-soft); max-width:44ch; }
.kit-readout{ margin-top:16px; display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-family:var(--body); font-weight:800; font-size:14px; color:var(--ink);
  border:2px solid var(--ink); border-radius:4px; padding:10px 16px; background:var(--surface); box-shadow:4px 4px 0 var(--accent); }
.kit-readout b{ font-family:var(--serif); font-size:1.5rem; color:var(--accent-2-text); font-variant-numeric:tabular-nums; min-width:3.5ch; }
.kit-readout.done b{ color:var(--accent-text); }
.kit-c{ opacity:0; transform:translateY(20px); }
@media (prefers-reduced-motion:reduce){ .kit-c{ opacity:1; transform:none; } }

/* ---------- collage flourishes on existing sections ---------- */
.section--band{ overflow:clip; }
.section--band::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.6px);
  background-size:7px 7px; opacity:.7; }
.section--band .container{ position:relative; z-index:2; }

/* tape-corner on review/note/price cards */
.review-card::before, .note::before, .price-card::before{
  content:""; position:absolute; top:-11px; left:22px; width:74px; height:22px;
  background:var(--tape); transform:rotate(-4deg); border:1px solid rgba(255,255,255,.4);
  box-shadow:0 3px 8px -4px rgba(0,0,0,.5); z-index:5;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6px,#000 calc(100% - 6px),transparent);
  mask:linear-gradient(90deg,transparent,#000 6px,#000 calc(100% - 6px),transparent); }
.price-card.is-featured::before{ background:var(--accent-2); }
.note:nth-child(2)::before{ background:var(--tape-teal); }

/* poster mini-tag */
.poster-tag{ display:inline-block; font-family:var(--body); font-weight:800; font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink); background:var(--yellow);
  padding:4px 10px; transform:rotate(-1.6deg); box-shadow:3px 3px 0 var(--yellow-deep); margin-left:8px; }

/* interior page-hero collage */
.page-hero{ overflow:clip; }
.page-hero::after{ content:""; position:absolute; right:-2%; top:-2%; width:180px; height:180px; z-index:0; pointer-events:none;
  background:radial-gradient(var(--accent) 32%, transparent 34%); background-size:9px 9px; opacity:.18;
  -webkit-mask:radial-gradient(circle,#000 60%,transparent 66%); mask:radial-gradient(circle,#000 60%,transparent 66%); }

/* scroll-progress bar -> poster riso stripe */
.scroll-progress{ background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--yellow)) !important; height:4px !important; }

/* small-screen guards */
@media (max-width:600px){
  .hero-copy2 h1{ font-size:clamp(2.6rem,15vw,4rem); }
  .kit-readout{ font-size:12.5px; }
}

/* fix: team member names (.team-card h3) had no explicit colour and inherited the
   light body ink -> white-on-white on the light team card (invisible). */
.team-card h3{ color: var(--ink) !important; }

/* fix: header "Bize ulaş" nav-cta had padding:4px 0 (no horizontal padding) — text
   crammed to the edges, looked unstyled. Give it a proper filled-button shape. */
.nav-desktop a.nav-cta, .site-header a.nav-cta{
  padding: 10px 20px !important; border-radius: 8px;
  display: inline-flex; align-items: center; line-height: 1;
}