/* self-hosted fonts (restored after polish strip) */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-600-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-600-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Karevitrin — koyu / soğuk cam vitrin
   Palet: bg #101418 · surface #1A2028 · ink #EAF0F4
   accent #3AA0FF · accent-2 #B9F2D0
   ============================================================ */

:root {
  --bg: #101418;
  --surface: #1A2028;
  --surface-2: #212a34;
  --surface-3: #283340;
  --ink: #EAF0F4;
  --ink-soft: #b6c2cd;
  --ink-faint: #8695a3;
  --accent: #3AA0FF;
  --accent-text: #7cc0ff;      /* accent, ama koyu üstünde okunur */
  --accent-2: #B9F2D0;
  --accent-2-text: #B9F2D0;
  --line: rgba(234, 240, 244, 0.10);
  --line-strong: rgba(234, 240, 244, 0.20);
  --glass: rgba(26, 32, 40, 0.62);
  --scrim: linear-gradient(180deg, rgba(16,20,24,0) 0%, rgba(16,20,24,0.55) 55%, rgba(16,20,24,0.92) 100%);

  --heading: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Consolas", "SF Mono", "JetBrains Mono", ui-monospace, monospace;

  --container: 1320px;
  --header-h: 72px;
  --radius: 14px;
  --radius-sm: 10px;
  --gap: 12px;

  interpolate-size: allow-keywords;
}

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

html, body {
  margin: 0;
  max-width: 100vw;
  overflow-x: hidden;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
figure, figcaption, blockquote { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  font-family: var(--heading);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0;
}
p { margin: 0 0 1em; }
.mono { font-family: var(--mono); }

/* ---------- layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
}
main { padding-top: var(--header-h); }
section { position: relative; }
/* anchor sections clear the fixed header on native (cross-page) jumps */
:where(section[id], [id]) { scroll-margin-top: calc(var(--header-h) + 20px); }
.section {
  padding-block: clamp(56px, 8vw, 104px);
}
.section--tight { padding-block: clamp(40px, 6vw, 72px); }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--accent);
}
.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 46px); }
.section-head h2 { font-size: clamp(1.8rem, 4vw, 2.9rem); }
.section-head p { color: var(--ink-soft); margin-top: 14px; font-size: 1.05rem; }

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

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1080;
  height: var(--header-h);
  background: rgba(16, 20, 24, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.2) blur(8px);
  transition: height .24s ease, background .24s ease, box-shadow .24s ease;
}
.site-header.is-scrolled {
  height: 60px;
  background: rgba(14, 18, 22, 0.98);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,0.7);
}
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--heading);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: 1.24rem;
  color: var(--ink);
}
.brand b { color: var(--accent-text); font-weight: 800; }
.brand span.dot {
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--accent-2);
  display: inline-block;
  margin-left: 4px;
  align-self: center;
}

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

.btn {
  --btn-bg: var(--accent);
  --btn-fg: #06121f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: transform .2s cubic-bezier(.2,.7,.2,1), background .2s ease, color .2s ease, box-shadow .2s ease;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(58,160,255,0.7); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--accent); color: #06121f; }
.btn-primary:hover, .btn-primary:focus-visible { background: #5db1ff; color: #06121f; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: none;
}
.nav-cta { padding: 9px 18px; }
.nav-desktop .nav-cta { color: #06121f; }
.nav-desktop .nav-cta:hover { background: #5db1ff; color: #06121f; }

.arrow::after { content: "→"; font-family: var(--body); }

/* hamburger */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  cursor: pointer;
  z-index: 1100;
  position: relative;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .28s ease, opacity .2s 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); }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

/* drawer */
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 92vw);
  background: #0d1116;
  border-left: 1px solid var(--line-strong);
  z-index: 1050;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.2,.7,.2,1);
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 18px) 26px 30px;
  gap: 4px;
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer a {
  font-family: var(--heading);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.35rem;
  color: var(--ink);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  transition: color .2s ease, padding-left .2s ease;
}
.drawer a:hover, .drawer a.is-active { color: var(--accent-text); padding-left: 6px; }
.drawer .btn { margin-top: 22px; }
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s ease, visibility .24s ease;
  z-index: 1040;
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

/* ============================================================
   SHEEN — signature craft interaction
   ============================================================ */
.sheen {
  position: relative;
  overflow: hidden;
  --mx: 50%;
  --my: 50%;
}
.sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(240px circle at var(--mx) var(--my),
              rgba(185, 242, 208, 0.16), rgba(58, 160, 255, 0.10) 34%, transparent 62%);
  opacity: 0;
  transition: opacity .3s ease;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 3;
}
.sheen:hover::after { opacity: 1; }
/* thin light line sweeping across on hover */
.sheen::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -40%;
  width: 32%;
  background: linear-gradient(105deg, transparent, rgba(234,240,244,0.28), transparent);
  transform: skewX(-16deg);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}
.sheen:hover::before {
  animation: sweep .85s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes sweep {
  0%   { left: -40%; opacity: 0; }
  12%  { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sheen:hover::before { animation: none; }
  .sheen::after { display: none; }
}

/* glass panel */
.glass {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(10px) saturate(1.2);
  position: relative;
}
.glass::after {  /* faint top light-edge */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(234,240,244,0.06), transparent 40%);
  pointer-events: none;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: min(88vh, 820px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  animation: slowzoom 18s ease-out forwards;
}
@keyframes slowzoom { to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .hero-media img { animation: none; transform: none; } }
.hero-media::after {  /* glass vitrine reflection + light line */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 40%, rgba(234,240,244,0.10) 48%, transparent 52%),
    linear-gradient(90deg, rgba(16,20,24,0.86) 0%, rgba(16,20,24,0.55) 42%, rgba(16,20,24,0.30) 100%),
    var(--scrim);
}
.hero-inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(48px, 9vw, 96px);
  width: 100%;
}
.hero-grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: end;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr); }
}
.hero h1 {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  letter-spacing: -0.045em;
  max-width: 14ch;
}
.hero h1 .accent { color: var(--accent-2); }
.hero-sub {
  margin-top: 22px;
  font-size: clamp(1.02rem, 2vw, 1.24rem);
  color: var(--ink-soft);
  max-width: 46ch;
}
.hero-cta {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.trust-strip {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.trust-strip li {
  list-style: none;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(26,32,40,0.5);
}
.trust-strip li::before { content: "▪ "; color: var(--accent-2); }

/* hero stat card */
.hero-stats {
  display: grid;
  gap: 12px;
  padding: 22px;
  background: var(--glass);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  backdrop-filter: blur(10px) saturate(1.2);
}
.hero-stats .row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.hero-stats .row:last-child { border-bottom: 0; padding-bottom: 0; }
.hero-stats .num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
}
.hero-stats .lab { color: var(--ink-faint); font-size: 0.86rem; text-align: right; }

/* ============================================================
   FILTER + CATALOG (business tool heart)
   ============================================================ */
.filterbar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: rgba(16,20,24,0.94);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  backdrop-filter: blur(8px);
  margin-bottom: 26px;
  display: grid;
  gap: 14px;
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 26px;
  align-items: center;
}
.filter-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-group > .flabel {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  margin-right: 4px;
}
.chip {
  font-family: var(--body);
  font-size: 0.84rem;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.chip:hover { color: var(--ink); border-color: var(--accent); }
.chip.is-active {
  background: var(--accent);
  color: #06121f;
  border-color: var(--accent);
  font-weight: 700;
}
.filter-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.result-count { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-soft); }
.result-count b { color: var(--accent-2); }
.link-btn {
  background: none;
  border: 0;
  color: var(--accent-text);
  font-family: var(--mono);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 4px 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn:hover { color: var(--ink); }
.link-btn[disabled] { color: var(--ink-faint); cursor: default; text-decoration: none; }

/* dense 4-col grid, gap 12 */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
@media (min-width: 640px) { .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.poster-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .24s cubic-bezier(.2,.7,.2,1), border-color .24s ease, box-shadow .24s ease;
}
.poster-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 22px 40px -26px rgba(0,0,0,0.9);
}
.poster-card.is-hidden { display: none; }
.poster-thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--surface-3);   /* solid fallback if image missing */
}
.poster-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.poster-tag {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 5;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(13,17,22,0.82);
  border: 1px solid var(--line-strong);
  color: var(--accent-2);
}
.poster-body {
  padding: 13px 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.poster-body h3 {
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}
.poster-attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ink-faint);
}
.poster-attrs span {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.poster-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
}
.poster-price {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
}
.poster-price small { color: var(--ink-faint); font-weight: 400; font-size: 0.7rem; }
.compare-btn {
  font-family: var(--mono);
  font-size: 0.68rem;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.compare-btn:hover { border-color: var(--accent-2); color: var(--ink); }
.compare-btn.is-on {
  background: var(--accent-2);
  color: #0b1d16;
  border-color: var(--accent-2);
  font-weight: 700;
}

.no-results {
  display: none;
  text-align: center;
  padding: 56px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-soft);
}
.no-results.is-shown { display: block; }
.no-results strong { display: block; font-family: var(--heading); font-size: 1.3rem; color: var(--ink); margin-bottom: 8px; }

/* ============================================================
   COMPARISON TRAY / TABLE
   ============================================================ */
.compare-panel { margin-top: 30px; }
.compare-empty {
  padding: 30px;
  text-align: center;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  font-size: 0.95rem;
}
.compare-hint b { color: var(--accent-2-text); }
.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: var(--radius);
}
.table-scroll > table { margin: 0 !important; min-width: 480px; width: 100%; }
:where(*:has(> .table-scroll), *:has(> * > .table-scroll), *:has(> * > * > .table-scroll)) { min-width: 0; }

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
}
.compare-table th, .compare-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare-table thead th {
  background: var(--surface-2);
  font-family: var(--heading);
  letter-spacing: -0.01em;
}
.compare-table .rowlabel {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  width: 130px;
  white-space: nowrap;
}
.compare-table td.val { color: var(--ink); }
.compare-table td .price { font-family: var(--mono); font-weight: 700; }
.compare-thumb {
  width: 100%;
  max-width: 160px;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 8px;
  background: var(--surface-3);
}
.compare-clear { margin-top: 6px; }

/* generic price table */
.data-table th, .data-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.data-table thead th { background: var(--surface-2); font-family: var(--heading); font-weight: 800; }
.data-table td.num { font-family: var(--mono); text-align: right; }

/* ============================================================
   FEATURED / editorial split
   ============================================================ */
.feature-split {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .feature-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .feature-split.reverse .feature-media { order: -1; }
}
.feature-media {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  background: var(--surface-3);
}
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-text h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
.feature-text p { color: var(--ink-soft); margin-top: 16px; }
.feature-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.feature-list li {
  position: relative;
  padding-left: 24px;
  color: var(--ink);
}
.feature-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 9px;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--accent-2);
}
.feature-list li b { font-family: var(--mono); }

/* featured showcase strip (static editorial, not marquee) */
.showcase-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 768px) { .showcase-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.showcase-grid .big { grid-column: span 2; grid-row: span 2; }
.showcase-tile {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 3/4;
  background: var(--surface-3);
}
.showcase-grid .big { aspect-ratio: auto; }
@media (max-width: 767px) {
  .showcase-grid .big { grid-column: span 2; grid-row: auto; aspect-ratio: 3/4; }
}
.showcase-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.showcase-tile:hover img { transform: scale(1.05); }
.showcase-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px;
  background: linear-gradient(0deg, rgba(13,17,22,0.92), transparent);
  z-index: 2;
}
.showcase-cap span {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.showcase-cap h3 { font-size: 1rem; margin-top: 4px; }

/* ============================================================
   PRICING
   ============================================================ */
.price-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .price-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.price-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.price-card.is-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.price-badge {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #06121f;
  background: var(--accent-2);
  padding: 4px 10px;
  border-radius: 999px;
}
.price-card h3 { font-size: 1.3rem; }
.price-tag {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 2.3rem;
  color: var(--ink);
  line-height: 1;
}
.price-tag small { font-size: 0.8rem; color: var(--ink-faint); font-weight: 400; }
.price-note { font-size: 0.82rem; color: var(--ink-faint); }
.price-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 9px; font-size: 0.9rem; }
.price-list li { position: relative; padding-left: 22px; color: var(--ink-soft); }
.price-list li.inc::before { content: "＋"; position: absolute; left: 0; color: var(--accent-2-text); font-family: var(--mono); }
.price-list li.exc { color: var(--ink-faint); }
.price-list li.exc::before { content: "－"; position: absolute; left: 0; color: var(--ink-faint); font-family: var(--mono); }
.price-card .btn { margin-top: auto; }

/* ============================================================
   PROCESS timeline (vertical, no icons)
   ============================================================ */
.timeline { display: grid; gap: 0; margin-top: 10px; }
.timeline-step {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.timeline-step:last-child { border-bottom: 1px solid var(--line); }
.timeline-when {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--accent-text);
  letter-spacing: 0.04em;
  padding-top: 4px;
}
.timeline-step h3 { font-size: 1.14rem; }
.timeline-step p { color: var(--ink-soft); margin: 8px 0 0; font-size: 0.95rem; }
@media (max-width: 560px) {
  .timeline-step { grid-template-columns: 1fr; gap: 6px; }
}

/* ============================================================
   TESTIMONIALS (editorial grid)
   ============================================================ */
.testi-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .testi-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.testi {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.testi blockquote { font-size: 0.98rem; color: var(--ink); line-height: 1.55; }
.testi .who { margin-top: auto; border-top: 1px solid var(--line); padding-top: 12px; }
.testi .who strong { display: block; font-size: 0.92rem; }
.testi .who span { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); }
.testi .rate { font-family: var(--mono); font-size: 0.78rem; color: var(--accent-2-text); letter-spacing: 0.1em; }

/* ============================================================
   FAQ (pure CSS)
   ============================================================ */
.faq { display: grid; gap: 10px; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px clamp(18px, 3vw, 26px);
  font-family: var(--heading);
  font-weight: 800;
  letter-spacing: -0.01em;
  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::after {
  content: "+";
  font-family: var(--mono);
  color: var(--accent-text);
  font-size: 1.4rem;
  transition: transform .3s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item > .answer {
  height: 0;
  padding: 0 clamp(18px, 3vw, 26px);
  overflow: hidden;
  color: var(--ink-soft);
  transition: height 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;
}
@media (prefers-reduced-motion: reduce) {
  .faq-item > .answer { transition: none; }
}

/* ============================================================
   ORDER / CTA band + form
   ============================================================ */
.band {
  background: linear-gradient(135deg, #0b2740, #0e1b2b 60%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.order-grid {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .order-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.order-intro h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); }
.order-intro p { color: var(--ink-soft); margin-top: 14px; }
.order-facts { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.order-facts li {
  display: flex; gap: 12px; align-items: baseline;
  font-size: 0.94rem; color: var(--ink);
}
.order-facts b { font-family: var(--mono); color: var(--accent-2-text); min-width: 62px; }

/* order CTA panel (replaces the on-home form) */
.order-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: clamp(24px, 4vw, 40px);
}
.order-cta h3 { font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.02em; }
.order-cta p { color: var(--ink-soft); margin: 0; }
.order-cta .btn { margin-top: 8px; }

form.lead-form {
  display: grid;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 34px);
}
.form-row { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .form-row.two { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 7px; }
.field > span { font-size: 0.82rem; color: var(--ink-soft); font-family: var(--mono); letter-spacing: 0.02em; }
.field > span small { color: var(--ink-faint); font-size: 0.92em; }
.field input, .field select, .field textarea {
  width: 100%;
  background: #0e1319;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.96rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 118px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(58,160,255,0.2);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field.kvkk {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.field input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: auto;
  width: 18px; height: 18px;
  min-width: 18px; min-height: 18px;
  padding: 0; border: 0; margin: 2px 0 0;
  accent-color: var(--accent);
}
.field.kvkk a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
form.lead-form .btn { width: 100%; }
@media (min-width: 620px) { form.lead-form .btn { width: auto; justify-self: start; padding-inline: 34px; } }

/* ============================================================
   CONTACT cards
   ============================================================ */
.contact-cards {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .contact-cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.contact-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.contact-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 18px 36px -24px rgba(0,0,0,0.9); }
.contact-card .ck {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(58,160,255,0.14);
  color: var(--accent-text);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1rem;
}
.contact-card .clabel { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); }
.contact-card .cval { font-size: 1.02rem; color: var(--ink); word-break: break-word; overflow-wrap: anywhere; }
.contact-card a.cval:hover { color: var(--accent-text); }
.contact-card .csub { font-size: 0.84rem; color: var(--ink-soft); }

.hours-grid { display: grid; gap: 6px; margin-top: 8px; }
.hours-grid .hrow {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 0.9rem;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.hours-grid .hrow:last-child { border-bottom: 0; }
.hours-grid .hrow.today { color: var(--accent-2-text); font-weight: 600; }
.hours-grid .hrow .d { color: var(--ink-soft); }
.hours-grid .hrow .t { font-family: var(--mono); }

/* ============================================================
   TEAM
   ============================================================ */
.team-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .team-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.team-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.team-photo { aspect-ratio: 4/5; background: var(--surface-3); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-info { padding: 18px 20px 22px; }
.team-info h3 { font-size: 1.14rem; }
.team-info .role { font-family: var(--mono); font-size: 0.74rem; color: var(--accent-text); margin: 4px 0 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.team-info p { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }

/* notes / son eklenenler */
.notes { display: grid; gap: 12px; }
.note {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.note:last-child { border-bottom: 1px solid var(--line); }
.note time { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); }
.note h3 { font-size: 1.02rem; }
.note p { color: var(--ink-soft); font-size: 0.9rem; margin: 6px 0 0; }
@media (max-width: 520px) { .note { grid-template-columns: 1fr; gap: 4px; } }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #0b0f13;
  border-top: 1px solid var(--line);
  padding-block: clamp(44px, 6vw, 72px) 28px;
}
.footer-grid {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer-brand .brand { font-size: 1.4rem; margin-bottom: 14px; }
.footer-brand p { color: var(--ink-soft); font-size: 0.92rem; max-width: 40ch; }
.footer-col h4 {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin-bottom: 14px;
  font-weight: 400;
}
.footer-col a { display: block; color: var(--ink-soft); padding: 6px 0; font-size: 0.92rem; transition: color .2s ease; }
.footer-col a:hover { color: var(--accent-text); }
.footer-legal {
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.footer-legal .legal-links a { display: inline; color: var(--ink-faint); margin-right: 14px; }
.footer-legal .legal-links a:hover { color: var(--ink); }

/* ============================================================
   COOKIE
   ============================================================ */
.cookie-banner {
  position: fixed;
  bottom: 16px; left: 16px; right: 16px;
  max-width: 520px;
  margin: 0 auto;
  background: #0d1116;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 20px 22px;
  z-index: 9999;
  transform: translateY(140%);
  opacity: 0;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), opacity 240ms;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.9);
}
.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.05rem; margin-bottom: 8px; }
.cookie-banner p { font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 16px; }
.cookie-banner p a { color: var(--accent-text); text-decoration: underline; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions button {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  transition: background .2s ease, color .2s ease;
}
.cookie-actions button[data-consent="accept"] { background: var(--accent); color: #06121f; border-color: var(--accent); }
.cookie-actions button[data-consent="accept"]:hover { background: #5db1ff; }
.cookie-actions button[data-consent="reject"]:hover,
.cookie-actions button[data-consent="settings"]:hover { background: var(--surface-3); }

/* ============================================================
   PAGE HERO (subpages)
   ============================================================ */
.page-hero {
  padding-block: clamp(48px, 7vw, 90px) clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(58,160,255,0.10), transparent 60%),
    var(--surface);
}
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); max-width: 18ch; }
.page-hero p { color: var(--ink-soft); margin-top: 16px; max-width: 60ch; font-size: 1.05rem; }

.prose { max-width: 780px; }
.prose h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 40px 0 14px; }
.prose h3 { font-size: 1.15rem; margin: 28px 0 10px; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 1em; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--ink); }

/* thank-you / 404 */
.centered-msg {
  min-height: calc(100vh - var(--header-h));
  display: grid;
  place-items: center;
  text-align: center;
  padding: 60px 20px;
}
.centered-msg .inner { max-width: 560px; }
.centered-msg h1 { font-size: clamp(2rem, 6vw, 3.6rem); }
.centered-msg .big404 { font-family: var(--mono); font-size: clamp(4rem, 16vw, 9rem); color: var(--accent); line-height: 1; }
.centered-msg p { color: var(--ink-soft); margin: 18px 0 28px; }

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

/* counters reserve width */
.count { font-variant-numeric: tabular-nums; }

.sitemap-list { list-style: none; padding: 0; display: grid; gap: 10px; max-width: 620px; }
.sitemap-list a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; font-size: 1.05rem; }
.sitemap-list a:hover { color: var(--ink); }

/* small utilities */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.center { text-align: center; }
.mt-l { margin-top: clamp(28px, 4vw, 44px); }
.lead { font-size: 1.1rem; color: var(--ink-soft); }

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

/* ============================================================
   ██ CORKBOARD / MOODBOARD PIN-UP ENGINE — Karevitrin
   Dense pinboard transform: cork texture, pins, tape, string,
   sticky notes, index cards, torn scraps + cinematic pin-up scene.
   Keeps brand palette (accent #3AA0FF / mint #B9F2D0) as pin hues.
   ============================================================ */

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

:root{
  --cork:#b5854a;
  --board-ink:#2b2012;
  --board-ink-soft:#4d3c24;
  --felt:#241b11;
  --pin-red:#d8443a;
  --pin-blue:#3AA0FF;
  --pin-mint:#57c98c;
  --pin-amber:#f2b330;
  --note-y:#f6e27a;
  --note-b:#a9d5f2;
  --note-m:#c6f0d6;
  --note-p:#f4c9d9;
  --tape:rgba(243,229,183,.60);
  --tape-b:rgba(178,210,236,.55);
  --tape-m:rgba(180,236,205,.55);
  --paper:#f4ecdb;
  --paper-ink:#2b2214;
  --thread:#8a5a2c;
}

/* ---------- CORK BOARD SURFACE (dense speckle) ---------- */
body{
  background-color:#b5854a;
  background-image:
    radial-gradient(rgba(74,44,16,.30) 11%, transparent 12%),
    radial-gradient(rgba(48,28,10,.26) 9%, transparent 10%),
    radial-gradient(rgba(255,224,158,.22) 8%, transparent 9%),
    radial-gradient(rgba(120,74,30,.24) 13%, transparent 14%),
    radial-gradient(rgba(90,55,22,.18) 16%, transparent 17%);
  background-size:13px 13px, 21px 21px, 17px 17px, 29px 29px, 37px 37px;
  background-position:0 0, 7px 11px, 3px 9px, 12px 5px, 19px 14px;
}
/* subtle board vignette + frame so it reads as a real pinboard */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  box-shadow:inset 0 0 140px rgba(40,24,8,.55), inset 0 0 0 10px rgba(58,36,14,.32);
  background:radial-gradient(120% 80% at 50% 0%, rgba(255,230,170,.10), transparent 60%);
}
section > .container, .cine-pin > *{ position:relative; z-index:2; }

/* cork sections: readable dark board-ink for bare text on the cork */
.section:not(.band) .section-head h2,
.section:not(.band) .feature-text h2,
.section:not(.band) .order-intro h2,
#karsilastir h2{ color:var(--board-ink); }
.section:not(.band) .section-head p,
.section:not(.band) .feature-text p,
.section:not(.band) .feature-text li,
.section:not(.band) .order-intro p,
.section:not(.band) .order-facts li,
#karsilastir p{ color:var(--board-ink-soft); }
.section:not(.band) .order-facts b{ color:#0a4b8f; }
.section:not(.band) .feature-list li{ color:var(--board-ink); }
/* shared subpage content sitting directly on cork (legal / sitemap / 404) */
.section:not(.band) .prose h2,
.section:not(.band) .prose h3,
.section:not(.band) .prose strong,
.centered-msg h1{ color:var(--board-ink); }
.section:not(.band) .prose p,
.section:not(.band) .prose li,
.centered-msg p{ color:var(--board-ink-soft); }
.section:not(.band) .prose a,
.section:not(.band) .sitemap-list a{ color:#0a4b8f; }
.centered-msg .big404{ color:#7a3a10; }

/* eyebrow becomes a pinned washi-tape label on cork */
.section:not(.band) .eyebrow,
.hero .eyebrow{
  color:#3a2a12; background:var(--tape);
  padding:5px 12px 5px 11px; border-radius:2px;
  transform:rotate(-1.3deg);
  box-shadow:2px 3px 0 rgba(40,24,8,.20);
  border:1px solid rgba(255,255,255,.30);
}
.section:not(.band) .eyebrow::before,
.hero .eyebrow::before{ background:#3a2a12; }

/* band sections become a DARK cork felt panel */
.band{
  background-color:var(--felt);
  background-image:
    radial-gradient(rgba(255,220,160,.06) 11%, transparent 12%),
    radial-gradient(rgba(0,0,0,.30) 9%, transparent 10%),
    radial-gradient(rgba(120,80,36,.14) 15%, transparent 16%);
  background-size:13px 13px, 19px 19px, 30px 30px;
  background-position:0 0, 6px 9px, 12px 5px;
  border-top:3px solid rgba(40,24,8,.5);
  border-bottom:3px solid rgba(40,24,8,.5);
}

/* ---------- highlighted / "pinned" heading word ---------- */
.pin-word{
  position:relative; color:var(--board-ink);
  background:linear-gradient(180deg,transparent 56%, var(--note-m) 56%, var(--note-m) 92%, transparent 92%);
  padding:0 .1em; border-radius:2px;
}
.band .pin-word, .pin-word.on-dark{
  color:#fff;
  background:linear-gradient(180deg,transparent 56%, rgba(87,201,140,.45) 56%, rgba(87,201,140,.45) 92%, transparent 92%);
}
.hero h1 .pin-word{ color:#fff2c9; background:linear-gradient(180deg,transparent 58%, rgba(216,68,58,.5) 58%, rgba(216,68,58,.5) 92%, transparent 92%); }

/* ============================================================
   DECOR SYSTEM  (.pm = absolute, pointer-events:none)
   ============================================================ */
.pm{ position:absolute; pointer-events:none; z-index:3; }
.tc-red{ color:var(--pin-red);} .tc-blue{ color:var(--pin-blue);}
.tc-mint{ color:var(--pin-mint);} .tc-amber{ color:var(--pin-amber);}
.o5{opacity:.5}.o6{opacity:.6}.o7{opacity:.7}.o85{opacity:.85}

/* PUSH-PIN / thumbtack */
.pm-pin{ width:20px; height:20px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.9), currentColor 46%, rgba(0,0,0,.55) 100%);
  box-shadow:0 4px 6px -1px rgba(0,0,0,.55); }
.pm-pin::after{ content:""; position:absolute; left:52%; top:64%;
  width:2.5px; height:11px; background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.1));
  transform:translateX(-50%) rotate(10deg); border-radius:2px; }
.pm-pin.sm{ width:14px; height:14px; }
.pm-pin.sm::after{ height:8px; }

/* STICKY NOTE with folded corner + mono scribble */
.pm-note{ width:92px; min-height:84px; background:var(--note-y); color:#4a3a10;
  font-family:var(--mono); font-size:11px; line-height:1.35; padding:11px 11px 14px;
  box-shadow:0 10px 20px -10px rgba(0,0,0,.6), 0 2px 0 rgba(0,0,0,.08);
  transform:rotate(-3deg); }
.pm-note::after{ content:""; position:absolute; right:0; bottom:0; border-width:0 0 16px 16px;
  border-style:solid; border-color:transparent transparent rgba(0,0,0,.16) transparent; }
.pm-note.blue{ background:var(--note-b); color:#123246; }
.pm-note.mint{ background:var(--note-m); color:#124228; }
.pm-note.pink{ background:var(--note-p); color:#4a1428; }
.pm-note b{ display:block; font-weight:700; margin-bottom:3px; }

/* TAPE strip (washi) */
.pm-tape{ width:84px; height:26px; background:var(--tape);
  border:1px solid rgba(255,255,255,.35); box-shadow:0 3px 8px -4px rgba(0,0,0,.5);
  transform:rotate(-6deg); }
.pm-tape::before,.pm-tape::after{ content:""; position:absolute; top:0; bottom:0; width:6px;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.05) 0 2px, transparent 2px 4px); }
.pm-tape::before{ left:0; } .pm-tape::after{ right:0; }
.pm-tape.blue{ background:var(--tape-b); }
.pm-tape.mint{ background:var(--tape-m); }
.pm-tape.long{ width:120px; }

/* PAPER CLIP */
.pm-clip{ width:22px; height:52px; }
.pm-clip::before{ content:""; position:absolute; inset:0; border:2.5px solid rgba(60,60,68,.8);
  border-radius:11px; box-shadow:0 2px 3px rgba(0,0,0,.4); }
.pm-clip::after{ content:""; position:absolute; left:6px; top:6px; right:6px; bottom:12px;
  border:2.5px solid rgba(90,90,100,.8); border-radius:8px; }

/* INDEX CARD (lined) */
.pm-card{ width:120px; height:78px; background:var(--paper); color:var(--paper-ink);
  border:1px solid rgba(0,0,0,.12); box-shadow:0 12px 22px -12px rgba(0,0,0,.6);
  font-family:var(--mono); font-size:10.5px; padding:12px 10px 8px; transform:rotate(2deg);
  background-image:repeating-linear-gradient(180deg, transparent 0 17px, rgba(160,40,40,.16) 17px 18px);
  background-position:0 4px; }
.pm-card .ttl{ display:block; font-weight:700; letter-spacing:.02em; }

/* TORN PAPER SCRAP */
.pm-scrap{ width:96px; height:66px; background:var(--paper);
  box-shadow:0 10px 20px -12px rgba(0,0,0,.6);
  clip-path:polygon(2% 8%,18% 2%,40% 7%,62% 1%,86% 6%,99% 14%,97% 40%,100% 66%,95% 92%,74% 99%,50% 94%,28% 100%,8% 95%,1% 70%,4% 40%);
  transform:rotate(-4deg); }
.pm-scrap.ink{ background:#e7dcc4; }

/* STRING / THREAD (svg wrapper) */
.pm-string{ overflow:visible; }
.pm-string path{ fill:none; stroke:var(--thread); stroke-width:2; stroke-linecap:round;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); }

/* ---------- 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-note{ transform:scale(.82) rotate(-3deg); transform-origin:top left; }
  .pm-keep.pm-card{ transform:scale(.8) rotate(2deg); transform-origin:top left; }
}

/* ============================================================
   PINNED PHOTO / CARD treatment (real content -> moodboard)
   ============================================================ */
/* catalog cards read as pinned photos */
.poster-card{ border-color:rgba(40,24,8,.35); box-shadow:0 16px 30px -18px rgba(30,16,4,.85); }
.poster-card::before{ /* thumbtack */
  content:""; position:absolute; z-index:7; top:8px; left:50%; transform:translateX(-50%);
  width:17px; height:17px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.92), var(--pin-red) 46%, rgba(0,0,0,.5) 100%);
  box-shadow:0 4px 7px -2px rgba(0,0,0,.7); }
.poster-card:nth-child(4n+1){ transform:rotate(-1.1deg); }
.poster-card:nth-child(4n+2){ transform:rotate(.8deg); }
.poster-card:nth-child(4n+3){ transform:rotate(1.2deg); }
.poster-card:nth-child(4n){ transform:rotate(-.7deg); }
.poster-card:nth-child(3n+1)::before{ background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.92), var(--pin-blue) 46%, rgba(0,0,0,.5) 100%); }
.poster-card:nth-child(3n+2)::before{ background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.92), var(--pin-mint) 46%, rgba(0,0,0,.5) 100%); }
.poster-card:hover{ transform:translateY(-4px) rotate(0deg); z-index:8; }

/* showcase tiles pinned with tape corner */
.showcase-tile{ box-shadow:0 18px 30px -16px rgba(20,12,4,.85); }
.showcase-tile::after{ content:""; position:absolute; z-index:6; top:-9px; left:22%;
  width:74px; height:22px; background:var(--tape); transform:rotate(-7deg);
  border:1px solid rgba(255,255,255,.35); box-shadow:0 3px 7px -4px rgba(0,0,0,.5); }
.showcase-tile:nth-child(2n)::after{ background:var(--tape-b); left:auto; right:18%; transform:rotate(6deg); }
.showcase-tile:nth-child(3n)::after{ background:var(--tape-m); }

/* editorial media = pinned print with pin */
.feature-media{ border-color:rgba(40,24,8,.4); box-shadow:0 20px 36px -18px rgba(20,12,4,.85); transform:rotate(-1.2deg); }
.feature-media::before{ content:""; position:absolute; z-index:6; top:10px; left:14px;
  width:19px; height:19px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.9), var(--pin-amber) 46%, rgba(0,0,0,.5));
  box-shadow:0 4px 7px -2px rgba(0,0,0,.7); }

/* price / testi cards get a corner pin */
.price-card, .testi{ box-shadow:0 16px 30px -18px rgba(20,12,4,.8); }
.price-card::before, .testi::before{ content:""; position:absolute; z-index:6; top:10px; right:14px;
  width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.9), var(--pin-mint) 46%, rgba(0,0,0,.5));
  box-shadow:0 3px 6px -2px rgba(0,0,0,.65); }
.price-card.is-featured::before{ background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.9), var(--pin-red) 46%, rgba(0,0,0,.5)); }

/* notes -> pinned cream cards */
.notes .note{ background:var(--paper); color:var(--paper-ink);
  border:1px solid rgba(0,0,0,.14); border-top:1px solid rgba(0,0,0,.14);
  border-radius:4px; padding:16px 18px; box-shadow:0 14px 26px -14px rgba(20,12,4,.7);
  position:relative; }
.notes .note:last-child{ border-bottom:1px solid rgba(0,0,0,.14); }
.notes .note::before{ content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.9), var(--pin-blue) 46%, rgba(0,0,0,.5));
  box-shadow:0 3px 6px -2px rgba(0,0,0,.6); }
.notes .note:nth-child(2n)::before{ background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.9), var(--pin-red) 46%, rgba(0,0,0,.5)); }
.notes .note h3{ color:var(--paper-ink); }
.notes .note time{ color:#8a3a2a; }
.notes .note p{ color:#4a3d28; }
.notes .note:nth-child(odd){ transform:rotate(-.8deg); }
.notes .note:nth-child(even){ transform:rotate(.8deg); }

/* order CTA glass = pinned card */
.order-cta.glass{ box-shadow:0 20px 40px -20px rgba(20,12,4,.85); }
.order-cta.glass::before{ content:""; position:absolute; z-index:6; top:12px; right:16px;
  width:17px; height:17px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.9), var(--pin-amber) 46%, rgba(0,0,0,.5));
  box-shadow:0 4px 7px -2px rgba(0,0,0,.7); }

/* filterbar reads as a taped control strip */
.filterbar{ background:rgba(20,26,32,0.95); box-shadow:0 14px 26px -16px rgba(20,12,4,.7); }

/* ============================================================
   PRELOADER
   ============================================================ */
#pre{ position:fixed; inset:0; z-index:9999;
  background-color:#b5854a;
  background-image:radial-gradient(rgba(74,44,16,.30) 11%, transparent 12%),radial-gradient(rgba(255,224,158,.22) 8%, transparent 9%);
  background-size:13px 13px,17px 17px;
  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; position:relative; background:var(--paper); color:var(--paper-ink);
  padding:30px 40px; border-radius:4px; box-shadow:0 26px 50px -20px rgba(20,12,4,.8); transform:rotate(-1.5deg); }
#pre .pl-in::before{ content:""; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.92), var(--pin-red) 46%, rgba(0,0,0,.5));
  box-shadow:0 5px 9px -2px rgba(0,0,0,.7); }
#pre .pl-mark{ font-family:var(--heading); font-weight:800; font-size:clamp(28px,7vw,52px); letter-spacing:-.03em; color:var(--paper-ink); }
#pre .pl-mark b{ color:#0a4b8f; }
#pre .pl-sub{ font-family:var(--mono); font-size:11px; letter-spacing:.30em; text-transform:uppercase; color:#7a6a4a; margin-top:8px; }
#pre .pl-bar{ margin:20px auto 0; width:min(230px,58vw); height:12px; border:1px solid rgba(0,0,0,.25); background:#e6dcc4; overflow:hidden; position:relative; }
#pre .pl-bar i{ position:absolute; inset:0; width:0;
  background:linear-gradient(90deg,var(--pin-red) 0 33%,var(--pin-amber) 33% 66%,var(--pin-blue) 66% 100%);
  animation:plFill 1.15s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes plFill{ to{ width:100%; } }

/* ink/dust motes canvas */
#motes{ position:fixed; inset:0; z-index:4; 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 (corkboard pin-up) ---------- */
.hero{ min-height:auto; display:block; border-bottom:0; overflow:visible; padding:0; }
.hero-cine{ height:196vh; }
.cine-pin.hero-pin{
  background-color:#b5854a;
  background-image:
    radial-gradient(rgba(74,44,16,.30) 11%, transparent 12%),
    radial-gradient(rgba(48,28,10,.26) 9%, transparent 10%),
    radial-gradient(rgba(255,224,158,.22) 8%, transparent 9%),
    radial-gradient(rgba(120,74,30,.24) 13%, transparent 14%);
  background-size:13px 13px, 21px 21px, 17px 17px, 29px 29px;
  background-position:0 0, 7px 11px, 3px 9px, 12px 5px;
  box-shadow:inset 0 0 130px rgba(40,24,8,.5);
}
.hero-inner{ position:relative; z-index:4; width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:clamp(16px,4vw,32px); padding-block:0;
  display:grid; grid-template-columns:1fr; gap:clamp(24px,4vw,44px); align-items:center; }
@media (min-width:1000px){ .hero-inner{ grid-template-columns:1.05fr .95fr; } }
.hero-copy{ position:relative; z-index:5; max-width:640px; }
.hero .eyebrow{ display:inline-flex; }
.hero h1{ color:var(--board-ink); font-size:clamp(2.3rem,6vw,4.1rem); margin:16px 0 18px; text-shadow:1px 1px 0 rgba(255,240,200,.4); }
.hero h1 .accent{ color:#0a4b8f; }
.hero-sub{ color:var(--board-ink-soft); max-width:48ch; }
.hero .trust-strip li{ background:var(--paper); color:#3a2e18; border-color:rgba(40,24,8,.25); box-shadow:0 3px 8px -4px rgba(0,0,0,.4); }
.hero .trust-strip li::before{ color:var(--pin-red); }

/* hero pinned photo cluster */
.hero-board{ position:relative; height:min(62vh,500px); z-index:3; }
@media (max-width:999px){ .hero-board{ height:clamp(320px,64vw,440px); margin-top:8px; } }
.hero-board .hp{ position:absolute; background:#fbf7ec; padding:8px 8px 26px;
  box-shadow:0 26px 46px -22px rgba(20,12,4,.85); transform:rotate(var(--r,0deg)); }
.hero-board .hp img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }
.hero-board .hp .cap{ position:absolute; left:0; right:0; bottom:5px; text-align:center;
  font-family:var(--mono); font-size:9.5px; color:#6a5836; letter-spacing:.02em; }
.hero-board .hp::before{ content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.92), var(--pin-c,var(--pin-red)) 46%, rgba(0,0,0,.5));
  box-shadow:0 4px 7px -2px rgba(0,0,0,.7); z-index:4; }
.hero-board .hp1{ width:min(48%,214px); left:34%; top:2%;  --r:-5deg; --pin-c:var(--pin-red);  z-index:6; }
.hero-board .hp2{ width:min(40%,178px); left:2%;  top:12%; --r:6deg;  --pin-c:var(--pin-blue); z-index:5; }
.hero-board .hp3{ width:min(42%,188px); left:40%; top:46%; --r:4deg;  --pin-c:var(--pin-mint); z-index:7; }
.hero-board .hp4{ width:min(34%,150px); left:6%;  top:56%; --r:-8deg; --pin-c:var(--pin-amber); z-index:6; }
.hero-board .hero-stats{ position:absolute; right:0; top:30%; width:min(46%,220px); z-index:8;
  background:rgba(20,26,32,.9); box-shadow:0 22px 40px -18px rgba(20,12,4,.9); transform:rotate(2deg); }
@media (max-width:999px){ .hero-board .hero-stats{ position:static; width:auto; transform:none; margin-top:14px; } }
.hero-scroll{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:9;
  font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:#3a2a12; background:var(--tape); padding:6px 12px; border:1px solid rgba(255,255,255,.3);
  animation:cineBob 2s ease-in-out infinite; }
@keyframes cineBob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,7px);} }

/* unpin hero on small screens: flow normally, no clipping */
@media (max-width:999px){
  .hero-cine{ height:auto; }
  .cine-pin.hero-pin{ position:static; height:auto; min-height:auto; display:block;
    padding:calc(var(--header-h) + 20px) 0 40px; }
  .hero-inner{ padding-block:0; }
  .hero-scroll{ display:none; }
}

/* ---------- SIGNATURE SCENE: PIN-UP BOARD ---------- */
.pin-track{ height:340vh; }
.cine-pin.pin-pin{
  background-color:#a9773c;
  background-image:
    radial-gradient(rgba(74,44,16,.34) 11%, transparent 12%),
    radial-gradient(rgba(48,28,10,.28) 9%, transparent 10%),
    radial-gradient(rgba(255,224,158,.20) 8%, transparent 9%),
    radial-gradient(rgba(120,74,30,.26) 13%, transparent 14%);
  background-size:13px 13px, 21px 21px, 17px 17px, 29px 29px;
  background-position:0 0, 7px 11px, 3px 9px, 12px 5px;
  box-shadow:inset 0 0 150px rgba(40,24,8,.6);
}
.pin-wrap{ position:relative; z-index:3; width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:clamp(16px,4vw,32px);
  display:grid; grid-template-columns:1fr; gap:clamp(20px,3vw,40px); align-items:center; }
@media (min-width:960px){ .pin-wrap{ grid-template-columns:1.15fr .85fr; } }
.pin-board{ position:relative; width:100%; max-width:560px; aspect-ratio:5/4; margin-inline:auto;
  border:3px solid rgba(40,24,8,.45); border-radius:4px;
  box-shadow:inset 0 0 60px rgba(40,24,8,.45), 0 30px 60px -30px rgba(20,12,4,.8);
  background:rgba(0,0,0,.05); overflow:visible; }
.pin-strings{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; overflow:visible; }
.pin-strings path{ fill:none; stroke:#2e1a08; stroke-width:2.8; stroke-linecap:round;
  vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1;
  filter:drop-shadow(0 1px 1.5px rgba(255,238,200,.4)); }
.drop{ position:absolute; will-change:transform,opacity; }
.drop.photo{ background:#fbf7ec; padding:7px 7px 20px; box-shadow:0 20px 34px -18px rgba(20,12,4,.85); z-index:5; }
.drop.photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.drop.photo .cap{ position:absolute; left:0; right:0; bottom:4px; text-align:center;
  font-family:var(--mono); font-size:9px; color:#6a5836; }
.drop.photo::before, .drop.note::before, .drop.card::before{ content:""; position:absolute; top:-8px; left:50%;
  transform:translateX(-50%); width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.92), var(--pin-c,var(--pin-red)) 46%, rgba(0,0,0,.5));
  box-shadow:0 4px 7px -2px rgba(0,0,0,.7); z-index:6; }
.drop.note{ background:var(--note-y); color:#4a3a10; font-family:var(--mono); font-size:11px; line-height:1.35;
  padding:12px 12px 14px; box-shadow:0 16px 28px -14px rgba(20,12,4,.8); z-index:6; }
.drop.note b{ display:block; margin-bottom:3px; }
.drop.note.blue{ background:var(--note-b); color:#123246; }
.drop.note.mint{ background:var(--note-m); color:#124228; }
.drop.card{ background:var(--paper); color:var(--paper-ink); font-family:var(--mono); font-size:10.5px;
  padding:12px 12px 10px; box-shadow:0 16px 28px -14px rgba(20,12,4,.8); z-index:6;
  background-image:repeating-linear-gradient(180deg, transparent 0 16px, rgba(160,40,40,.16) 16px 17px); background-position:0 6px; }
.drop.card .ttl{ display:block; font-weight:700; margin-bottom:4px; }

.pin-cap .pin-c{ opacity:0; transform:translateY(20px); }
.pin-cap h2{ color:#fff; font-size:clamp(1.7rem,4vw,2.6rem); }
.pin-cap .lead{ color:rgba(255,244,224,.85); max-width:44ch; margin-top:12px; }
.pin-cap .eyebrow{ color:#3a2a12; }
.pin-readout{ margin-top:16px; display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-weight:700; font-size:14px; color:#fff;
  border:1px solid rgba(255,255,255,.3); border-radius:3px; padding:10px 14px; background:rgba(0,0,0,.25); }
.pin-readout b{ color:var(--note-m); font-variant-numeric:tabular-nums; min-width:4ch; text-align:right; }

@media (max-width:959px){
  .pin-track{ height:300vh; }
  .pin-board{ max-width:420px; }
}
@media (max-width:600px){
  .pin-track{ height:260vh; }
}

@media (prefers-reduced-motion:reduce){
  .hero-scroll{ animation:none; }
  .pin-cap .pin-c{ opacity:1; transform:none; }
  .drop{ opacity:1 !important; transform:none !important; }
  .pin-strings path{ stroke-dashoffset:0 !important; }
  .hero-media img{ animation:none; }
}