/* =====================================================================
   sections.css — all section styling over the fixed canvas.
   ZENTRY GRAMMAR PASS (03b): zones, mega type, bento, clip frame,
   numbered markers — colors stay 100% UNALSOFT (tokens only).
   Colors/spacing ONLY via var(--*) from tokens.css. Raw rgba() appears
   ONLY in scrim/veil/glow overlays where no token exists (contract).
   No text-transform anywhere (dotted-İ guard: copy ships uppercase).
   NEVER pre-hide [data-reveal] / [data-mega-reveal] — motion sets
   initial states at runtime; no-JS users get full content.
   ===================================================================== */

/* ---------------- Scroll zones + chapter sticky theatre ---------------- */
#hero.chapter-zone { display: block; min-height: 200vh; }
#hero .hero__content {
  position: sticky; top: 0; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
}
#ch2, #ch3, #ch4, #ch5, #ch6 { min-height: 160vh; position: relative; z-index: var(--z-content); }

.ch-sticky {
  position: sticky; top: 0; min-height: 100dvh;
  display: flex; align-items: center;
}
.ch-inner { display: flex; width: 100%; }
.ch-inner--right { justify-content: flex-end; }

.ch-card { max-width: var(--container-narrow); padding: var(--space-lg); }
.ch-card .chip { margin-bottom: var(--space-sm); }
.ch-card h2 { font-size: var(--fs-h2); }
.ch-card p { margin-top: var(--space-md); color: var(--color-muted); }

/* CH5 — the site's ONLY green accent: live/launch payoff */
.ch-card--live {
  border-color: var(--color-live);
  box-shadow: 0 0 42px -18px var(--color-live);
}

/* CH3 integration chips */
.ch-chips {
  list-style: none; margin: var(--space-md) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-xs);
}
.ch-chips li {
  font-size: var(--fs-xs); font-weight: 600; color: var(--color-muted);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-line); border-radius: 999px;
}

/* ================= MEGA TYPE (zentry signature, brand palette) =================
   Values arrive PRE-UPPERCASED from copy.json (Turkish İ/I safe) — no transform.
   Exactly one <b> per line: gradient on dark zones, solid violet in the
   elevated zone. Skew only — never font-style italic. */
.mega {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-mega); line-height: 0.84; letter-spacing: -0.02em;
  margin: 0;
}
.mega__line { display: block; }
.mega b {
  font-weight: inherit; display: inline-block; transform: skew(-6deg);
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#services .mega b, #tools .mega b, #packages .mega b {
  background: none; color: var(--color-violet);
}

/* ---------------- Section heads ---------------- */
.sec-head { position: relative; z-index: var(--z-content); }
.sec-head .mega { margin-top: var(--space-sm); }
.sec-head p { margin-top: var(--space-lg); color: var(--color-muted); max-width: 58ch; }
#services, #tools, #packages, #cta { position: relative; z-index: var(--z-content); }

/* ================= ELEVATED ZONE (zentry structure, UNALSOFT colors) =================
   #services/#tools/#packages form ONE opaque elevated slab over the canvas:
   #services rounds the top, #packages the bottom. While it fully covers the
   viewport, motion calms + visibility-hides the canvas (NEVER display:none). */
#services, #tools, #packages {
  background: var(--color-paper);
  color: var(--color-ink-on-paper);
}
#services {
  border-radius: var(--radius-zone) var(--radius-zone) 0 0;
  box-shadow: 0 -28px 90px -36px rgba(108, 60, 240, 0.4); /* violet glow edge — overlay, no token */
}
#packages {
  border-radius: 0 0 var(--radius-zone) var(--radius-zone);
  box-shadow: 0 28px 90px -36px rgba(108, 60, 240, 0.3);
}
[data-zone-inner] { position: relative; } /* motion parallaxes these inner wrappers */

/* ---------------- Shared 3D tilt hook (motion sets --rx/--ry/--mx/--my) ---------------- */
[data-tilt] {
  transform: perspective(800px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
}

/* ================= SERVICES — bento grid (six best sellers + CTA tile) ================= */
.bento {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(11rem, auto);
  gap: var(--space-md); margin-top: var(--space-xl);
}
.bento__card {
  position: relative; overflow: hidden;
  padding: var(--space-lg); border-radius: var(--radius-lg);
  background: var(--color-surface); border: 1px solid var(--color-line-on-paper);
  display: flex; flex-direction: column; justify-content: flex-start; gap: var(--space-sm);
}
.bento__card h3 { font-size: var(--fs-h3); }
.bento__card p { color: var(--color-muted); }
.bento__num {
  position: absolute; top: var(--space-md); right: var(--space-md);
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-xs);
  letter-spacing: var(--track-chip); color: var(--color-faint);
}
/* Cursor-following border glow on a masked ring (motion feeds --mx/--my) */
.bento__card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              rgba(108, 60, 240, 0.9), rgba(0, 212, 255, 0.25) 55%, transparent 75%);
  -webkit-mask: linear-gradient(rgba(0,0,0,1) 0 0) content-box, linear-gradient(rgba(0,0,0,1) 0 0);
          mask: linear-gradient(rgba(0,0,0,1) 0 0) content-box, linear-gradient(rgba(0,0,0,1) 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--dur-fast); pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .bento__card:hover::after, .bento__card:focus-within::after { opacity: 1; }
}
/* Variants */
.bento__card--tall { grid-column: span 2; grid-row: span 2; justify-content: flex-end; }
.bento__card--wide { grid-column: span 2; }
.bento__card--tall, .bento__card--art {
  color: var(--color-ink-on-paper);
  background-size: cover; background-position: center;
}
.bento__card--tall {
  background-image: linear-gradient(180deg, rgba(16, 19, 31, 0.25), rgba(16, 19, 31, 0.9) 78%),
                    url("../../assets/img/bento-art.webp");
}
.bento__card--art {
  justify-content: flex-end;
  background-image: linear-gradient(180deg, rgba(16, 19, 31, 0.3), rgba(16, 19, 31, 0.9) 80%),
                    url("../../assets/img/ai-creative.webp");
}
.bento__card--cta {
  border-color: transparent; justify-content: space-between;
  background: linear-gradient(135deg, var(--color-violet), var(--color-blue));
  color: var(--color-action-contrast);
}
.bento__card--cta p { color: var(--color-action-contrast); opacity: 0.85; }
.bento__card--cta .btn {
  align-self: flex-start; margin-top: var(--space-sm);
  background: var(--color-action-contrast); color: var(--color-bg);
}
.bento__card--cta .btn svg { width: 1.1rem; height: 1.1rem; transition: transform var(--dur-fast) var(--ease-cinematic); }
.bento__card--cta .btn:hover svg { transform: translateX(4px); }

/* Slim system-solutions strip under the bento */
.system-strip {
  margin-top: var(--space-md); padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-line-on-paper); border-radius: var(--radius-lg);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-lg);
}
.system-strip h3 { font-size: var(--fs-base); }
.system-strip p { color: var(--color-muted); font-size: var(--fs-sm); }

/* ================= TOOLS — endeks clip frame + optimizer card ================= */
/* Initial clipped/rotated state per shared hook contract; motion scrubs to
   inset(0) rotate(0) scale(1). Neutralized for reduced-motion / mobile below. */
.endeks-frame {
  position: relative; overflow: hidden; margin-top: var(--space-xl);
  border-radius: var(--radius-lg); border: 1px solid var(--color-line);
  background-image: linear-gradient(rgba(5, 6, 11, 0.74), rgba(5, 6, 11, 0.88)),
                    url("../../assets/img/ch03-poster.webp");
  background-size: cover; background-position: center;
  clip-path: inset(6% round 24px);
  transform: rotate(-3deg) scale(0.96);
}
.endeks-frame__inner { padding: var(--space-xl) clamp(var(--space-lg), 7vw, 5.5rem); }
.endeks-frame__inner .chip { display: inline-block; margin-bottom: var(--space-sm); }
.endeks-frame__inner h3 { font-size: var(--fs-h2); color: var(--color-ink); }
.endeks-frame__inner > p { margin-top: var(--space-md); color: var(--color-muted); max-width: 58ch; }

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg) var(--space-md); margin-top: var(--space-xl);
}
.stat__value { display: flex; align-items: baseline; gap: var(--space-xs); }
.stat__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h1); line-height: 1; letter-spacing: -0.02em;
  color: var(--color-ink); font-variant-numeric: tabular-nums;
}
.stat__unit {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h3); color: var(--color-muted);
}
.stat__label { margin-top: var(--space-xs); font-size: var(--fs-sm); color: var(--color-muted); }

.endeks-frame__cta {
  margin-top: var(--space-xl);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md);
}

.opt-card {
  margin-top: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-lg);
  background: var(--color-surface); border: 1px solid var(--color-line-on-paper);
  display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-lg); align-items: center;
  transition: border-color var(--dur);
}
.opt-card:hover { border-color: var(--color-faint); }
.opt-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.opt-card__body h3 { font-size: var(--fs-h3); }
.opt-card__body > p { color: var(--color-muted); }
.opt-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); color: var(--color-muted); }
.opt-card li { position: relative; padding-left: var(--space-md); }
.opt-card li::before {
  content: ""; position: absolute; left: 0; top: 0.8em;
  width: 0.6em; height: 1px; background: var(--color-violet);
}
.opt-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }
.tool-meta { font-size: var(--fs-xs); color: var(--color-muted); }
.tool-meta a { text-decoration: underline; text-underline-offset: 0.2em; }
.tool-meta a:hover { color: var(--color-ink); }

/* ================= PACKAGES — 3 tiers, featured near-black pop ================= */
.pkg-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch;
  gap: var(--space-md); margin-top: var(--space-xl);
}
.pkg {
  position: relative; overflow: hidden;
  padding: var(--space-lg); padding-top: var(--space-xl); border-radius: var(--radius-lg);
  background: var(--color-surface); border: 1px solid var(--color-line-on-paper);
  display: flex; flex-direction: column; gap: var(--space-md);
}
.pkg__num {
  position: absolute; top: var(--space-md); right: var(--space-md);
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-xs);
  letter-spacing: var(--track-chip); color: var(--color-faint);
}
.pkg h3 { font-size: var(--fs-h3); }
.pkg__pos { color: var(--color-muted); font-size: var(--fs-sm); }
.pkg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); color: var(--color-muted); flex: 1; align-content: start; }
.pkg li { position: relative; padding-left: var(--space-md); }
.pkg li::before {
  content: ""; position: absolute; left: 0; top: 0.8em;
  width: 0.6em; height: 1px; background: var(--color-violet);
}
.pkg--featured {
  background: var(--color-bg);
  border-color: rgba(108, 60, 240, 0.55); /* violet glow ring — overlay, no token */
  box-shadow: 0 0 52px -14px rgba(108, 60, 240, 0.5);
  transform: translateY(calc(-1 * var(--space-sm)));
}
.pkg__badge {
  position: absolute; top: calc(-1 * var(--space-sm)); left: var(--space-lg);
  padding: var(--space-xs) var(--space-sm); border-radius: 999px;
  background: var(--gradient-brand); color: var(--color-action-contrast);
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-xs);
  letter-spacing: var(--track-chip);
}
.pkg--featured .pkg__badge { top: var(--space-md); left: var(--space-lg); }

/* ================= CTA — giant claim moment (dark zone, canvas awake) ================= */
#cta { min-height: 100svh; display: grid; place-items: center; text-align: center; }
.cta-wrap .mega { margin-inline: auto; }
.cta-sub { margin-top: var(--space-lg); color: var(--color-muted); max-width: 50ch; margin-inline: auto; }
.cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }

/* ---------------- Footer (dark) + giant watermark ---------------- */
footer {
  position: relative; z-index: var(--z-content); overflow: hidden;
  background: var(--color-bg); border-top: 1px solid var(--color-line);
  padding-block: var(--space-xl) var(--space-lg);
}
.foot-watermark {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 36%);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(6rem, 19vw, 22rem); line-height: 0.8; letter-spacing: -0.02em;
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0.06; white-space: nowrap; pointer-events: none; user-select: none;
}
.foot-grid { position: relative; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-lg); }
.foot-brand { display: inline-flex; align-items: center; gap: var(--space-sm); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lead); }
.foot-brand img { width: 2.125rem; height: auto; }
.foot-pitch { margin-top: var(--space-md); color: var(--color-muted); max-width: 40ch; }
.foot-addr { margin-top: var(--space-xs); font-style: normal; color: var(--color-faint); font-size: var(--fs-sm); }
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.foot-list a { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-muted); transition: color var(--dur-fast); }
.foot-list a:hover, .foot-list a:focus-visible { color: var(--color-ink); }
.foot-list svg { width: 1.1rem; height: 1.1rem; color: var(--color-cyan); flex: none; }
.foot-bottom {
  position: relative;
  margin-top: var(--space-xl); padding-top: var(--space-md);
  border-top: 1px solid var(--color-line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md);
  color: var(--color-faint); font-size: var(--fs-sm);
}

/* ---------------- Loop sentinel ---------------- */
#loop-sentinel { min-height: 100vh; display: grid; place-items: center; position: relative; z-index: var(--z-content); }
.loop-hint {
  display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 0.55em; max-width: 34ch; margin-inline: auto;
  background: none; border: 0; padding: 0.5em 0.9em; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); letter-spacing: var(--track-chip);
  text-align: center; color: var(--color-faint);
  transition: color 220ms ease;
}
.loop-hint__icon { width: 1.2em; height: 1.2em; flex: none; transition: transform 700ms var(--ease-cinematic, cubic-bezier(.4, 0, .2, 1)); }
.loop-hint:hover, .loop-hint:focus-visible { color: var(--color-ink); }
.loop-hint:hover .loop-hint__icon, .loop-hint:focus-visible .loop-hint__icon { transform: rotate(-360deg); }
.loop-hint:focus-visible { outline: 2px solid var(--color-action); outline-offset: 4px; border-radius: 12px; }

/* ---------------- Fullscreen menu overlay ---------------- */
#menu { position: fixed; inset: 0; z-index: var(--z-menu); }
#menu[hidden] { display: none; }
html.menu-open, html.modal-open { overflow: hidden; }
.menu__veil {
  position: absolute; inset: 0;
  background: rgba(5, 6, 11, 0.72); /* veil — no token exists (contract) */
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity var(--dur) var(--ease-cinematic);
}
html.menu-open .menu__veil { opacity: 1; }
.menu__panel {
  position: relative; height: 100%; width: 100%;
  max-width: var(--container); margin-inline: auto;
  padding: var(--space-xl) var(--space-lg);
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-xl);
}
.menu__close {
  position: absolute; top: var(--space-md); right: var(--space-lg);
  padding: var(--space-xs) var(--space-md); border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid var(--color-line); color: var(--color-ink);
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm);
}
.menu__close:hover { border-color: var(--color-faint); }
.menu__nav { display: flex; flex-direction: column; gap: var(--space-sm); }
.menu__link {
  display: flex; align-items: baseline; gap: var(--space-md);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-menu); line-height: var(--leading-tight); color: var(--color-ink);
  opacity: 0; transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-cinematic), transform var(--dur-slow) var(--ease-cinematic);
  transition-delay: calc(var(--i, 0) * 60ms);
}
html.menu-open .menu__link { opacity: 1; transform: none; }
.menu__num { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-xs); letter-spacing: var(--track-chip); color: var(--color-faint); }
.menu__link:hover span:last-child,
.menu__link:focus-visible span:last-child {
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.menu__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.menu__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-md); }
.menu__contact a { color: var(--color-muted); font-size: var(--fs-sm); transition: color var(--dur-fast); }
.menu__contact a:hover, .menu__contact a:focus-visible { color: var(--color-ink); }
.menu__lang { display: inline-flex; gap: var(--space-xs); margin-left: auto; }
.menu__lang button {
  padding: var(--space-xs) var(--space-sm); border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid var(--color-line); color: var(--color-muted);
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-xs); letter-spacing: var(--track-chip);
}
.menu__lang button[aria-pressed="true"] { background: var(--gradient-brand); border-color: transparent; color: var(--color-action-contrast); }

/* ---------------- Progress rail (right edge) ---------------- */
.rail {
  position: fixed; top: 50%; right: var(--space-md); transform: translateY(-50%);
  z-index: var(--z-rail); display: flex; flex-direction: column; align-items: center; gap: var(--space-xs);
  pointer-events: none;
}
.rail__num { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-xs); letter-spacing: var(--track-chip); color: var(--color-faint); }
.rail__track { display: block; width: 2px; height: 22vh; border-radius: 999px; background: var(--color-line); overflow: hidden; }
.rail__fill {
  display: block; width: 100%; height: 100%;
  background: var(--gradient-brand);
  transform: scaleY(var(--progress, 0)); transform-origin: top center;
}

/* ---------------- Floating WhatsApp button ---------------- */
.wa {
  position: fixed; right: var(--space-md); bottom: var(--space-md); z-index: var(--z-rail);
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gradient-brand); color: var(--color-action-contrast);
  box-shadow: 0 12px 32px -14px var(--color-violet);
  transition: transform var(--dur-fast) var(--ease-cinematic);
}
.wa:hover { transform: translateY(-3px) scale(1.04); }
.wa:focus-visible { outline: 2px solid var(--color-cyan); outline-offset: 3px; }
.wa__icon { width: 1.75rem; height: 1.75rem; }

/* ---------------- Custom cursor (dot + lerped ring) ---------------- */
.cursor { position: fixed; top: 0; left: 0; z-index: var(--z-cursor); pointer-events: none; }
.cursor__dot, .cursor__ring {
  position: fixed; top: 0; left: 0; border-radius: 50%;
  mix-blend-mode: difference; will-change: transform;
}
.cursor__dot { width: 0.5rem; height: 0.5rem; background: var(--color-ink); }
.cursor__ring { width: 2.5rem; height: 2.5rem; border: 1px solid var(--color-ink); }
html.no-cursor .cursor { display: none; }
@media (pointer: coarse) { .cursor { display: none; } }

/* ---------------- Appointment modal ---------------- */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-md); }
.modal[hidden] { display: none; }
.modal__veil {
  position: absolute; inset: 0;
  background: rgba(5, 6, 11, 0.72); /* veil — no token exists (contract) */
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.modal__panel {
  position: relative; width: 100%; max-width: calc(var(--container-narrow) + var(--space-xl));
  max-height: 90dvh; overflow: auto; padding: var(--space-lg);
  animation: modal-in var(--dur) var(--ease-cinematic);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(12px); } }
.modal__x {
  position: absolute; top: var(--space-sm); right: var(--space-sm);
  width: 2.25rem; height: 2.25rem; border-radius: 50%; cursor: pointer;
  background: none; border: 1px solid var(--color-line); color: var(--color-muted);
  font-size: var(--fs-lead); line-height: 1; display: grid; place-items: center;
}
.modal__x:hover { color: var(--color-ink); border-color: var(--color-faint); }
.modal__panel h2 { font-size: var(--fs-h3); padding-right: var(--space-xl); }
.modal__sub { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--fs-sm); }
.modal__form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
.field { display: grid; gap: var(--space-xs); align-content: start; font-size: var(--fs-sm); color: var(--color-muted); }
.field--wide, .modal__actions { grid-column: 1 / -1; }
.field--req > span::after { content: " *"; color: var(--color-cyan); }
.field input, .field select, .field textarea {
  width: 100%; padding: var(--space-sm) var(--space-md);
  background: var(--color-surface); color: var(--color-ink);
  border: 1px solid var(--color-line); border-radius: var(--radius);
  font-family: var(--font-body); font-size: var(--fs-base);
}
.field textarea { resize: vertical; min-height: 5.5rem; }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--space-xs) var(--space-sm); }
.field--check input {
  width: 1.1rem; height: 1.1rem; padding: 0; margin-top: 0.2rem;
  accent-color: var(--color-violet);
}
.field--check .field__err { grid-column: 1 / -1; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.menu__close:focus-visible, .menu__lang button:focus-visible, .menu__link:focus-visible,
.modal__x:focus-visible, .cookie .btn:focus-visible {
  outline: 2px solid var(--color-cyan); outline-offset: 2px;
}
.field__err { display: block; font-style: normal; font-size: var(--fs-xs); color: var(--color-cyan); }
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--color-cyan); }
.modal__actions { display: grid; gap: var(--space-sm); }
.modal__alt { text-align: center; font-size: var(--fs-sm); color: var(--color-faint); }
.modal__alt a { text-decoration: underline; text-underline-offset: 0.2em; }
.modal__alt a:hover { color: var(--color-muted); }
.modal__success { padding-block: var(--space-xl); display: grid; gap: var(--space-md); justify-items: center; text-align: center; }
.modal__success p { color: var(--color-ink); max-width: 40ch; font-size: var(--fs-lead); font-family: var(--font-display); }

/* ---------------- Cookie bar ---------------- */
.cookie {
  position: fixed; left: var(--space-md); right: var(--space-md); bottom: var(--space-md);
  z-index: var(--z-menu); margin-inline: auto; max-width: 60ch;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md); padding: var(--space-md) var(--space-lg);
  font-size: var(--fs-sm); color: var(--color-muted);
}
.cookie[hidden] { display: none; }
.cookie a { text-decoration: underline; text-underline-offset: 0.2em; }
.cookie a:hover { color: var(--color-ink); }
.cookie__actions { display: flex; gap: var(--space-xs); }
.cookie .btn { padding: var(--space-xs) var(--space-md); font-size: var(--fs-sm); }

/* ---------------- Scroll cue (hero, bottom center) ---------------- */
.scroll-cue {
  position: absolute; top: calc(100dvh - var(--space-xl) - var(--space-md)); left: 50%;
  transform: translateX(-50%);
  width: 1px; height: var(--space-xl); overflow: hidden; z-index: var(--z-content);
}
.scroll-cue span {
  display: block; width: 1px; height: 100%; background: var(--gradient-brand);
  animation: cue 2.2s var(--ease-cinematic) infinite;
}
@keyframes cue {
  0% { transform: translateY(-100%); }
  55% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ---------------- Poster fallbacks (mobile / no-WebGL) ----------------
   Files are a build contract (assets/img/ch01..ch06-poster.webp) —
   referenced even before they exist on disk.
   04d mobile-lite: html:not(.hero-active) keeps posters for no-JS and
   static phones, but clears them the moment the LITE universe goes live
   (a live transparent canvas must not fight poster backgrounds). */
@media (max-width: 900px) {
  html:not(.hero-active) .hero__poster { background-image: linear-gradient(rgba(5, 6, 11, 0.45), rgba(5, 6, 11, 0.65)), url("../../assets/img/ch01-poster.webp"); }
  html:not(.hero-active) .ch-sticky { background-size: cover; background-position: center; }
  html:not(.hero-active) #ch2 .ch-sticky { background-image: linear-gradient(rgba(5, 6, 11, 0.45), rgba(5, 6, 11, 0.65)), url("../../assets/img/ch02-poster.webp"); }
  html:not(.hero-active) #ch3 .ch-sticky { background-image: linear-gradient(rgba(5, 6, 11, 0.45), rgba(5, 6, 11, 0.65)), url("../../assets/img/ch03-poster.webp"); }
  html:not(.hero-active) #ch4 .ch-sticky { background-image: linear-gradient(rgba(5, 6, 11, 0.45), rgba(5, 6, 11, 0.65)), url("../../assets/img/ch04-poster.webp"); }
  html:not(.hero-active) #ch5 .ch-sticky { background-image: linear-gradient(rgba(5, 6, 11, 0.45), rgba(5, 6, 11, 0.65)), url("../../assets/img/ch05-poster.webp"); }
  html:not(.hero-active) #ch6 .ch-sticky { background-image: linear-gradient(rgba(5, 6, 11, 0.45), rgba(5, 6, 11, 0.65)), url("../../assets/img/ch06-poster.webp"); }
}
html.hero-static .hero__poster { background-image: linear-gradient(rgba(5, 6, 11, 0.45), rgba(5, 6, 11, 0.65)), url("../../assets/img/ch01-poster.webp"); }
html.hero-static .ch-sticky { background-size: cover; background-position: center; }
html.hero-static #ch2 .ch-sticky { background-image: linear-gradient(rgba(5, 6, 11, 0.45), rgba(5, 6, 11, 0.65)), url("../../assets/img/ch02-poster.webp"); }
html.hero-static #ch3 .ch-sticky { background-image: linear-gradient(rgba(5, 6, 11, 0.45), rgba(5, 6, 11, 0.65)), url("../../assets/img/ch03-poster.webp"); }
html.hero-static #ch4 .ch-sticky { background-image: linear-gradient(rgba(5, 6, 11, 0.45), rgba(5, 6, 11, 0.65)), url("../../assets/img/ch04-poster.webp"); }
html.hero-static #ch5 .ch-sticky { background-image: linear-gradient(rgba(5, 6, 11, 0.45), rgba(5, 6, 11, 0.65)), url("../../assets/img/ch05-poster.webp"); }
html.hero-static #ch6 .ch-sticky { background-image: linear-gradient(rgba(5, 6, 11, 0.45), rgba(5, 6, 11, 0.65)), url("../../assets/img/ch06-poster.webp"); }

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .pkg-grid { grid-template-columns: 1fr; }
  .pkg--featured { transform: none; }
}
@media (max-width: 900px) {
  .opt-card { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-bottom { flex-direction: column; gap: var(--space-xs); }
  .ch-inner, .ch-inner--right { justify-content: center; }
  .modal__form { grid-template-columns: 1fr; }
  .rail { display: none; }
  .menu__lang { margin-left: 0; }
  /* Scrub is scaled down / skipped on small screens — show the frame open. */
  .endeks-frame { clip-path: none; transform: none; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento__card--tall, .bento__card--wide { grid-column: auto; grid-row: auto; }
  .bento__card--tall { min-height: 22rem; }
  .system-strip { flex-direction: column; align-items: flex-start; }
}

/* ---------------- Reduced motion: no theatre ---------------- */
@media (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
  .wa, .menu__veil, .menu__link, .foot-list a, .menu__contact a,
  .opt-card, .bento__card::after, .bento__card--cta .btn svg { transition: none; }
  .menu__link { transition-delay: 0ms; }
  .modal__panel { animation: none; }
  .scroll-cue span { animation: none; }
  .wa:hover { transform: none; }
  [data-tilt] { transform: none; }
  .endeks-frame { clip-path: none; transform: none; }
}

/* =====================================================================
   03c — REJOUICE POLISH (APPENDED LAYER — nothing above was touched).
   roll hovers · marquee · cursor view-chip · ↗ affordances · media
   scale-settle layers · ScrollSmoother compat. Tokens + rgba overlays
   only; all text arrives pre-uppercased where uppercase (İ-guard).
   ===================================================================== */

/* -- Smoother compat (03c item 1): when director.js activates
      ScrollSmoother it sets html.has-smoother and replicates the sticky
      theatre with ScrollTrigger pins — position:sticky cannot live
      inside the transformed #smooth-content. Native path (class absent)
      keeps the CSS sticky rules above exactly as they are. -- */
html.has-smoother #hero .hero__content,
html.has-smoother .ch-sticky { position: static; }

/* -- Masked line reveals (03c item 2): wrapper injected at runtime by
      director.js around safe text reveals; clips the yPercent rise. -- */
.reveal-mask { display: block; overflow: hidden; }
.reveal-mask--inline { display: inline-block; overflow: hidden; vertical-align: bottom; }

/* -- Letter-roll link hovers (03c item 3): dual copy from data-text;
      the anchor itself is the overflow mask. Pure CSS. -- */
.roll { overflow: hidden; }
.roll [data-text] {
  position: relative; display: inline-block;
  transition: transform var(--dur) var(--ease-cinematic);
}
.roll [data-text]::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 100%;
}
@media (hover: hover) and (pointer: fine) {
  .roll:hover [data-text],
  .roll:focus-visible [data-text] { transform: translateY(-100%); }
}

/* -- Single marquee ticker (03c item 7): slim uppercase strip at the
      top seam of #services. DM Sans 600, faint ink. The ONLY linear
      animation on the site (by spec). Track = two identical halves
      (10 identical segs) so translateX(-50%) loops seamlessly. -- */
.svc-marquee {
  overflow: hidden; display: flex;
  padding-block: var(--space-sm);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-line-on-paper);
}
.svc-marquee__track {
  display: inline-flex; flex: none; white-space: nowrap;
  animation: svc-marquee 28s linear infinite;
  will-change: transform;
}
.svc-marquee__seg {
  flex: none; padding-right: 0.5em;
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-sm); letter-spacing: var(--track-chip);
  color: var(--color-faint);
}
.svc-marquee:hover .svc-marquee__track { animation-play-state: paused; }
@keyframes svc-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Screen-reader-only utility (the marquee's accessible list). */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* -- Cursor "view" chip (03c item 5): over data-cursor="view" targets
      the ring collapses its border and a labeled pill scales in
      (cursor.js sets .cursor--view + data-label on the ring).
      Transform/opacity only; touch never sees it (html.no-cursor and
      the coarse-pointer kill above). -- */
.cursor__dot { transition: opacity var(--dur-fast) var(--ease-cinematic); }
.cursor__ring { transition: border-color var(--dur-fast) var(--ease-cinematic); }
.cursor__ring::after {
  content: "↗ " attr(data-label);
  position: absolute; left: 50%; top: 50%;
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 0.5em 1em; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.06em;
  background: var(--color-glass-brt); border: 1px solid var(--color-line);
  color: var(--color-ink);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: translate(-50%, -50%) scale(0.4);
  transition: transform var(--dur) var(--ease-cinematic),
              opacity var(--dur-fast) var(--ease-cinematic);
}
.cursor--view .cursor__ring { border-color: transparent; }
.cursor--view .cursor__ring::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cursor--view .cursor__dot { opacity: 0; }

/* -- Cursor preview panel (rejouice-style): over [data-preview] cards a
      small thumbnail of the destination page trails the cursor. cursor.js
      creates it behind the desktop-grade (>=900px) gate and drives its
      position each frame; the chip is suppressed so there is one label.
      Transform/opacity only; touch / reduced-motion never see it. -- */
.peek {
  position: fixed; top: 0; left: 0; z-index: calc(var(--z-cursor) - 1);
  width: 260px; pointer-events: none; will-change: transform;
}
.peek__inner {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--color-line);
  background: var(--color-glass); transform-origin: 0 0;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.72);
  opacity: 0; transform: scale(0.82) translateY(10px);
  transition: opacity var(--dur-fast) var(--ease-cinematic),
              transform var(--dur) var(--ease-cinematic);
}
.peek--on .peek__inner { opacity: 1; transform: none; }
.peek__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.peek__inner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(5, 6, 11, 0.55), transparent 46%);
}
.peek__label {
  position: absolute; left: 10px; bottom: 10px; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.42em 0.8em; border-radius: 999px; line-height: 1;
  font-family: var(--font-body); font-weight: 600;
  font-size: 0.7rem; letter-spacing: 0.04em; color: #fff;
  background: rgba(10, 12, 22, 0.6); border: 1px solid var(--color-line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.peek__label::before { content: "\2197"; }
@media (pointer: coarse) { .peek { display: none; } }

/* -- ↗ affordances (03c item 8): bento cards, tool CTAs, footer
      external links; diagonal 4px travel on hover. (The roll copy owns
      [data-text]::after, so the anchors host the arrow themselves;
      .btn and .foot-list a are inline-flex — the pseudo slots last.) -- */
.bento__card:not(.bento__card--cta) > h3::after,
.endeks-frame__cta .btn::after,
.opt-card__actions .btn::after,
.foot-list a[target="_blank"]::after {
  content: "↗";
  display: inline-block;
  margin-left: 0.35em;
  font-family: var(--font-body); font-weight: 600;
  opacity: 0.55;
  transition: transform var(--dur-fast) var(--ease-cinematic),
              opacity var(--dur-fast) var(--ease-cinematic);
}
@media (hover: hover) and (pointer: fine) {
  .bento__card:not(.bento__card--cta):hover > h3::after,
  .endeks-frame__cta .btn:hover::after,
  .opt-card__actions .btn:hover::after,
  .foot-list a[target="_blank"]:hover::after {
    transform: translate(4px, -4px);
    opacity: 1;
  }
}

/* -- Media scale-settle layers (03c item 6): the art/bg image is
      duplicated onto a ::before layer driven by --media-scale (director
      scrubs 1.12→1 over the entrance; the default of 1 keeps every
      fallback path pixel-identical). Transform only, clipped by the
      overflow-hidden card — MDS-HR4 intact. The rgba stops below are
      verbatim copies of the existing overlays higher in this file. -- */
.bento__card--tall::before,
.bento__card--art::before,
.endeks-frame::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background-size: cover; background-position: center;
  transform: scale(var(--media-scale, 1));
}
.bento__card--tall::before {
  background-image: linear-gradient(180deg, rgba(16, 19, 31, 0.25), rgba(16, 19, 31, 0.9) 78%),
                    url("../../assets/img/bento-art.webp");
}
.bento__card--art::before {
  background-image: linear-gradient(180deg, rgba(16, 19, 31, 0.3), rgba(16, 19, 31, 0.9) 80%),
                    url("../../assets/img/ai-creative.webp");
}
.endeks-frame::before {
  background-image: linear-gradient(rgba(5, 6, 11, 0.74), rgba(5, 6, 11, 0.88)),
                    url("../../assets/img/ch03-poster.webp");
}
/* Optimizer visual scales as a real <img> — clip it at the card edge. */
.opt-card { overflow: hidden; }

/* -- 03c item 10 guards: the polish layer no-ops without motion.
      (Cursor is already display:none under reduced motion above.) -- */
@media (prefers-reduced-motion: reduce) {
  .svc-marquee { display: none; }
  .roll [data-text],
  .bento__card:not(.bento__card--cta) > h3::after,
  .endeks-frame__cta .btn::after,
  .opt-card__actions .btn::after,
  .foot-list a[target="_blank"]::after { transition: none; }
  .roll:hover [data-text],
  .roll:focus-visible [data-text] { transform: none; }
  .bento__card:not(.bento__card--cta):hover > h3::after,
  .endeks-frame__cta .btn:hover::after,
  .opt-card__actions .btn:hover::after,
  .foot-list a[target="_blank"]:hover::after { transform: none; }
  .bento__card--tall::before,
  .bento__card--art::before,
  .endeks-frame::before { transform: none; }
}

/* ===== 03d conversion additions (orchestrator): process ritual + reassurance ===== */
.cta-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm) var(--space-lg); list-style: none; padding: 0; margin: var(--space-lg) auto 0; counter-reset: step; }
.cta-steps li { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--fs-sm); color: var(--color-muted); counter-increment: step; }
.cta-steps li::before { content: counter(step); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; border: 1px solid var(--color-line); font-family: var(--font-display); font-size: var(--fs-xs); color: var(--color-cyan); }
.menu__reply { margin-top: var(--space-xs); font-size: var(--fs-xs); color: var(--color-faint); }
.modal__privacy { margin-top: var(--space-sm); font-size: var(--fs-xs); color: var(--color-faint); text-align: center; }

/* ===== Shell header bar (gate fix R1: .nav was never styled — seam defect) ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(16px, 3vw, 40px);
  border-bottom: 1px solid transparent;
  transition: background var(--dur), border-color var(--dur), backdrop-filter var(--dur);
}
.nav--scrolled {
  background: rgba(5, 6, 11, 0.65);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--color-line);
}
.nav__brand { display: flex; align-items: center; gap: 0.6rem; }
.nav__brand img { width: 34px; height: 34px; }
.nav__word { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.12em; font-size: 0.95rem; }
.nav__actions { display: flex; align-items: center; gap: var(--space-sm); }
.nav__cta { padding: 0.55rem 1.15rem; font-size: var(--fs-sm); }
.nav__burger {
  width: 44px; height: 44px; border: 1px solid var(--color-line); border-radius: 999px;
  background: transparent; cursor: pointer; display: grid; place-content: center; gap: 5px;
}
.nav__burger span { display: block; width: 16px; height: 2px; background: var(--color-ink); transition: transform var(--dur) var(--ease-cinematic); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
@media (max-width: 640px) { .nav__word { display: none; } }
@media (prefers-reduced-motion: reduce) { .nav, .nav__burger span { transition: none; } }

/* ===== 04d · Object-universe polish: chapter interactivity + mobile wow ===== */
/* Chapter cards: tactile tilt (motion sets --rx/--ry via [data-tilt]) + light sweep */
.ch-card { transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); will-change: transform; overflow: hidden; }
.ch-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 32%, rgba(0, 212, 255, 0.09) 46%, rgba(108, 60, 240, 0.11) 56%, transparent 70%); transform: translateX(-130%); transition: transform 0.9s var(--ease-cinematic); pointer-events: none; }
.ch-card:hover::after { transform: translateX(130%); }

/* Static phones: slow Ken Burns keeps posters alive (transform-only, GPU) */
@media (max-width: 900px) {
  html:not(.hero-active) .hero__poster { animation: kenburns 16s ease-in-out infinite alternate; }
}
@keyframes kenburns { to { transform: scale(1.06) translateY(-1.5%); } }

/* Mobile rhythm & tap comfort */
@media (max-width: 640px) {
  .container { padding-inline: var(--space-md); }
  .hero__cta { width: 100%; }
  .hero__cta .btn { flex: 1 1 100%; justify-content: center; }
  .btn { min-height: 48px; }
  /* 04f · Mega line integrity (user report "AYNI MAS / ADA"): inline-block
     <b>s create soft-wrap points INSIDE words — inline restores word-only
     breaks (their skew already lives on the H2, 04e-c; the 04e-h vertical
     paint padding still paints on inline, and the no-op negative margins
     are compensating a layout shift inline never has). Size drops so the
     longest line (AYNI MASADA / BAŞLAYALIM?) holds unbroken at 320–640px. */
  .mega { font-size: clamp(2.4rem, 12vw, 4.1rem); }
  .mega b { display: inline; }
  .ch-card { padding: var(--space-md); }
  .cta-steps { flex-direction: column; align-items: center; gap: var(--space-xs); }
  .svc-marquee__seg { font-size: var(--fs-xs); }
  .wa { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.hero-active) .hero__poster { animation: none; }
  .ch-card::after { display: none; }
}

/* 04f · Mobile chapter theatre (899px = capability.js mobileRule, the ONE
   cutoff): the card and the 3D object split the screen vertically,
   ALTERNATING — desktop card-R chapters (ch2/ch4/ch6) pin the card to the
   TOP with the object re-fitted below it; card-L chapters (ch3/ch5) pin it
   to the BOTTOM with the object above. universe.js (04f mobile arrange)
   bakes the matching ∓y object targets on the same 899px line. Scoped to
   .hero-active: on the static-poster path there is no object to make room
   for, so cards stay comfortably centered. */
@media (max-width: 899px) {
  html.hero-active .ch-sticky {
    align-items: flex-start;
    padding-top: calc(76px + env(safe-area-inset-top, 0px)); /* clear the fixed nav */
  }
  html.hero-active #ch3 .ch-sticky,
  html.hero-active #ch5 .ch-sticky {
    align-items: flex-end;
    padding-top: 0;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }
  html.hero-active .ch-inner,
  html.hero-active .ch-inner--right { justify-content: center; } /* side layout is meaningless stacked */
}

/* 04e · Clip-reveal family: reveal vars compose WITH the tilt transform
   (GSAP animates --rs/--ty/--rr; it never writes inline transforms on
   tilt-bearing cards). Later in cascade → overrides the base [data-tilt]. */
[data-tilt] {
  transform: perspective(800px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg))
             rotate(var(--rr, 0deg)) scale(var(--rs, 1)) translateY(var(--ty, 0px));
}
.ch-inner { will-change: clip-path, transform; }

/* 04e-b · Collected-word payoff: adjacent accent letters in the CTA keep a
   hairline of air so six skewed gradient glyphs read as jewels, not a slab. */
.mega b + b { margin-inline-start: 0.015em; }

/* 04e-c · Mega finish (user direction): the WHITE letters themselves carry
   the look — slight slant + a soft white→gray vertical gradient per line.
   Skew lives on the H2 (GSAP animates the lines, so reveals can't wipe it);
   accent <b> letters drop their own skew (they inherit the line slant) and
   keep their violet / brand-gradient fills. */
.mega { transform: skew(-6deg); padding-right: 0.08em; }
.mega__line {
  background: linear-gradient(180deg, var(--color-ink) 8%, var(--color-muted) 98%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mega b { transform: none; }

/* 04e-d · Diacritic paint fix (user report): with background-clip:text and
   line-height .84, the line box is SHORTER than the glyphs — Ş's cedilla,
   İ/Ö dots and Ğ's breve fell outside the paint area and rendered
   transparent. Pad the paint box, pull the rhythm back with negative
   margins (visual stacking unchanged). */
.mega__line {
  padding-block: 0.14em;
  margin-block: -0.14em;
  padding-inline: 0.06em;
  margin-inline: -0.06em;
}

/* 04e-e · Gradient moved from per-line to the WHOLE title (user report:
   detached diacritic bands at some scroll states). One continuous paint
   box on the H2 = no inter-line negative-margin overlap, ever; padding
   covers first-line ascenders and last-line descenders. Lines drop their
   own paint entirely and inherit the parent's clipped gradient. */
.mega {
  background: linear-gradient(180deg, var(--color-ink) 6%, var(--color-muted) 97%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 0.14em 0.1em;
  margin: -0.14em -0.1em;
}
.mega__line {
  background: none;
  color: inherit;
  padding: 0; margin: 0;
}

/* ===== 04e-f · Roll/menu/mega fixes (user reports) ===== */
/* 1) overflow:hidden is a no-op on INLINE anchors — the rolled ::after copy
   painted below (menu contact row doubled; İ-dot sliver under İletişim).
   inline-block restores clipping; taller copy line-height keeps ascender
   dots inside each copy's own box. */
.roll { display: inline-block; }
.roll [data-text] { display: inline-block; line-height: 1.25; }
.roll [data-text]::after { line-height: 1.25; }

/* 2) Hover gradient must paint BOTH roll copies — background-clip is not
   inherited by pseudos, so the rolled-in copy was transparent-invisible. */
.menu__link:hover [data-text],
.menu__link:focus-visible [data-text],
.menu__link:hover [data-text]::after,
.menu__link:focus-visible [data-text]::after {
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* 3) Menu contact row → quiet chips instead of bare text (and no more
   duplication after fix 1). */
.menu__contact { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; padding: 0; }
.menu__contact a {
  display: inline-flex; align-items: center;
  padding: 0.45em 0.95em; border: 1px solid var(--color-line); border-radius: 999px;
  font-size: var(--fs-sm); color: var(--color-muted);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.menu__contact a:hover, .menu__contact a:focus-visible {
  color: var(--color-ink); border-color: var(--color-faint);
  background: rgba(108, 60, 240, 0.12);
}

/* 4) Mega whites: parent-level clip stops painting through GSAP-transformed
   lines (Chrome) — the violet <b>s survived on their own fills, whites
   vanished. Gradient returns to EACH LINE (paint travels WITH the line's
   transform); padded paint box keeps Turkish diacritics; matching negative
   margins keep the tight stack. */
.mega { background: none; color: var(--color-ink); padding: 0; margin: 0 -0.1em 0 0; padding-right: 0.1em; }
.mega__line {
  background: linear-gradient(180deg, var(--color-ink) 6%, var(--color-muted) 97%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 0.145em 0.09em;
  margin: -0.145em -0.09em;
}

/* 04e-g · Contact chips: the letter-roll's below-copy peeks through the
   chip's own padding (overflow clips at the border box, padding is inside).
   Chips carry their own hover — roll off entirely here. */
.menu__contact .roll [data-text]::after { content: none; }
.menu__contact .roll:hover [data-text],
.menu__contact .roll:focus-visible [data-text] { transform: none; }

/* 04e-h (02d item 6) · Accent-letter paint box: the <b>s are inline-block
   under a 0.84 line-height — their gradient painted only the box, so İ's
   dot ascended into the parent's white band ("İ'nin noktası beyaz").
   Extend the paint box up/down without moving layout. */
.mega b {
  padding-top: 0.16em;  margin-top: -0.16em;
  padding-bottom: 0.08em; margin-bottom: -0.08em;
}

/* 04f · Bento art set completion (user request): every service card gets
   its shard-metaphor plate; bottom scrim keeps copy AAA-legible. Files are
   a build contract (processed after generation). */
.bento__card--ads, .bento__card--brand, .bento__card--identity,
.bento__card--ugc, .bento__card--agentic {
  color: var(--color-ink-on-paper);
  background-size: cover; background-position: center;
  justify-content: flex-end;
}
.bento__card--ads      { background-image: linear-gradient(180deg, rgba(16,19,31,.42), rgba(16,19,31,.92) 74%), url("../../assets/img/bento-ads.webp"); }
.bento__card--brand    { background-image: linear-gradient(180deg, rgba(16,19,31,.42), rgba(16,19,31,.92) 74%), url("../../assets/img/bento-brand.webp"); }
.bento__card--identity { background-image: linear-gradient(180deg, rgba(16,19,31,.42), rgba(16,19,31,.92) 74%), url("../../assets/img/bento-identity.webp"); }
.bento__card--ugc      { background-image: linear-gradient(180deg, rgba(16,19,31,.42), rgba(16,19,31,.92) 74%), url("../../assets/img/bento-ugc.webp"); }
.bento__card--agentic  { background-image: linear-gradient(180deg, rgba(16,19,31,.42), rgba(16,19,31,.92) 74%), url("../../assets/img/bento-agentic.webp"); }
.bento__card--cta {
  background-image: linear-gradient(160deg, rgba(108,60,240,.58), rgba(56,106,246,.66)),
                    url("../../assets/img/bento-cta.webp");
  background-size: cover; background-position: center top;
}

/* ================= 07 · Bento cards → service detail pages =================
   Stretched link (last child of each service card; the CTA tile keeps its
   button — never wrapped). Anchor stays in-flow for AT reading order; the
   ::after plane stretches the hit area over the whole card. Tilt + cursor
   glow untouched: the card is the positioned/transformed ancestor, and the
   glow ring is pointer-events:none. */
.bento__link { position: static; color: inherit; }
.bento__link::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit;
}
.bento__link:focus-visible { outline: none; }
.bento__link:focus-visible::after {
  outline: 2px solid var(--color-cyan); outline-offset: -2px; border-radius: inherit;
}

/* ---------------- Footer location band + click-to-load map ---------------- */
.foot-map {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-lg);
  align-items: center; margin-bottom: var(--space-xl);
}
.foot-map__kicker {
  font-family: var(--font-display); font-size: var(--fs-xs);
  letter-spacing: var(--track-chip); color: var(--color-cyan);
  margin: 0 0 var(--space-sm);
}
.foot-map__title {
  font-family: var(--font-display); font-size: var(--fs-lead);
  line-height: var(--leading-tight); color: var(--color-ink); margin: 0 0 var(--space-sm);
}
.foot-map__sub {
  color: var(--color-muted); line-height: var(--leading-body);
  margin: 0 0 var(--space-md); max-width: 34ch;
}
.foot-map__frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 16 / 9; border: 1px solid var(--color-line);
  background: var(--color-surface);
}
.foot-map__load {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-sm); cursor: pointer; color: var(--color-ink); border: 0;
  background:
    radial-gradient(80% 60% at 50% 40%, rgba(108, 60, 240, 0.22), transparent 70%),
    linear-gradient(180deg, rgba(20, 23, 38, 0.35), rgba(13, 15, 24, 0.92)),
    repeating-linear-gradient(0deg, rgba(183,190,204,0.06) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(183,190,204,0.06) 0 1px, transparent 1px 30px),
    var(--color-surface);
  transition: filter var(--dur) var(--ease-cinematic);
}
.foot-map__load:hover { filter: brightness(1.12); }
.foot-map__load:focus-visible { outline: 2px solid var(--color-cyan); outline-offset: -4px; }
.foot-map__pin {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: var(--gradient-brand);
  box-shadow: 0 8px 24px rgba(108, 60, 240, 0.45);
}
.foot-map__pin svg { width: 24px; height: 24px; color: #fff; }
.foot-map__pin::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--color-cyan); opacity: 0.6;
  animation: footMapPulse 2.4s var(--ease-cinematic) infinite;
}
@keyframes footMapPulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.3); opacity: 0; }
}
.foot-map__load-main { font-family: var(--font-display); font-size: var(--fs-base); }
.foot-map__load-sub  { color: var(--color-faint); font-size: var(--fs-xs); }
.foot-map__frame.is-loaded .foot-map__load { display: none; }
/* Dark-mode the loaded Google map so it matches the premium dark theme. */
.foot-map__frame.is-loaded iframe {
  filter: invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.9);
}
@media (prefers-reduced-motion: reduce) { .foot-map__pin::before { animation: none; } }

@media (max-width: 720px) {
  .foot-map { grid-template-columns: 1fr; gap: var(--space-md); }
}