/* =========================================================
   REPRO İSTANBUL — Dedicated Service Page Layout (Phase 14)
   Shared stylesheet for /surecler/* pages (first one:
   /surecler/renk-ayrimi/). Self-contained tokens (does not
   depend on legal.css or header.css's own :root — but DOES
   reuse the global tokens already defined in styles.css, since
   every page that loads this file also loads styles.css for the
   B2B modal + global buttons). No bracket `[...]` usage.

   Independent module: own classes only (service-*), no reuse of
   or edits to Hero, Hizalama Kilidi, Teknik Hizmet Matrisi,
   Sektörel Ambalaj Çözümleri, C-M-Y ambient system, Navbar, or
   B2B Modal rules/scripts — all stay completely untouched.
   ========================================================= */

:root {
  --sv-bg: #0A0A0C;
  --sv-surface: #121215;
  --sv-border: rgba(255, 255, 255, 0.08);
  --sv-text: #F3F4F6;
  --sv-text-secondary: #9CA3AF;
  --sv-cyan: #00E5FF;
  --sv-mono: 'IBM Plex Mono', monospace;
  --sv-body: 'Inter', 'Satoshi', system-ui, sans-serif;
  --sv-display: 'Cabinet Grotesk', 'General Sans', sans-serif;
  --sv-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sv-pad: clamp(24px, 5vw, 96px);
}

* { box-sizing: border-box; }

body.service-page {
  margin: 0;
  background: var(--sv-bg);
  color: var(--sv-text);
  font-family: var(--sv-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- Ambient cyan glow ---
   This page represents the prepress/color-separation discipline,
   so its own ambient wash stays a constant cyan instead of the
   homepage's scroll-driven C-M-Y journey — a separate, static
   element scoped to this page only, so ambient.js/ambient.css
   (the homepage's shared C-M-Y system) are never read, loaded,
   or modified here. Same proven technique (mix-blend-mode:
   screen on a full-viewport radial gradient) as ambient.css. */
.service-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 20%, rgba(0, 229, 255, 0.16) 0%, transparent 70%);
}

/* Modifier: a Magenta/Cyan blend instead of pure Cyan, for pages
   representing a repro/reproduction discipline that sits between
   the two — two independent radial layers, each on its own
   corner, so they visibly mix in the middle rather than
   producing a single flat tone. */
.service-ambient--mc {
  background:
    radial-gradient(circle at 28% 18%, rgba(0, 229, 255, 0.15) 0%, transparent 62%),
    radial-gradient(circle at 76% 55%, rgba(255, 0, 127, 0.14) 0%, transparent 62%);
}

/* Modifier: a Yellow/Magenta blend for pages representing the
   on-site press approval discipline — same two-layer technique,
   different pair of hues. */
.service-ambient--ym {
  background:
    radial-gradient(circle at 26% 20%, rgba(255, 200, 0, 0.15) 0%, transparent 62%),
    radial-gradient(circle at 74% 58%, rgba(255, 0, 127, 0.14) 0%, transparent 62%);
}

/* Modifier: full Cyan/Magenta/Yellow convergence — for the page
   representing the final physical proofing stage, where every
   prior discipline (color separation, reproduction, press
   approval) comes together in one tangible sample. Three layers,
   one per corner, so all three hues visibly mix toward the
   center. */
.service-ambient--cmy {
  background:
    radial-gradient(circle at 22% 20%, rgba(0, 229, 255, 0.13) 0%, transparent 58%),
    radial-gradient(circle at 78% 22%, rgba(255, 0, 127, 0.12) 0%, transparent 58%),
    radial-gradient(circle at 50% 72%, rgba(255, 200, 0, 0.12) 0%, transparent 58%);
}

/* --- Breadcrumbs --- */
.service-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 20px var(--sv-pad) 0;
  font-family: var(--sv-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--sv-text-secondary);
}
.service-breadcrumbs a {
  color: var(--sv-text-secondary);
  text-decoration: none;
  transition: color 0.3s var(--sv-ease);
}
.service-breadcrumbs a:hover { color: var(--sv-cyan); }
.service-breadcrumbs [aria-current="page"] { color: var(--sv-text); }

/* --- Hero block --- */
.service-hero {
  padding: 40px var(--sv-pad) 72px;
  max-width: 900px;
  border-bottom: 1px solid var(--sv-border);
}
.service-hero__title {
  font-family: var(--sv-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-size: clamp(30px, 4.6vw, 52px);
  margin: 0 0 20px;
  color: var(--sv-text);
}
.service-hero__subtitle {
  font-family: var(--sv-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--sv-text-secondary);
  max-width: 680px;
  margin: 0 0 32px;
}

/* --- Hero background photo wrapper (Reel Mockup only) ---
   Page-specific wrapper class (only used in
   /surecler/reel-mockup/index.html) around the breadcrumb nav
   AND the hero header together, so the photo covers both as one
   seamless block starting immediately under the fixed navbar —
   no other /surecler/ page uses this class, so nothing else is
   affected.

   Full-bleed technique: left:0; width:100vw — NOT the classic
   left:50%/translateX(-50%) break-out trick. That trick only
   works when the parent is centered in the viewport; this
   wrapper is a plain block flush against the left edge of the
   page (like every other top-level section here), so its own
   left edge already IS the viewport's left edge. Adding the
   translateX(-50%) on a non-centered parent computed "50%" against
   the parent's own (narrower) box instead of the viewport,
   which is what left a gap down the right side previously.
   overflow-x:hidden guards against sub-pixel vw/scrollbar
   rounding ever introducing a horizontal scrollbar. */
.reel-hero-wrap {
  position: relative;
  z-index: 0;
  overflow-x: hidden;
}
.reel-hero-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  z-index: -1;
  background-image:
    linear-gradient(
      180deg,
      rgba(10, 10, 10, 0.90) 0%,
      rgba(10, 10, 10, 0.75) 50%,
      rgba(10, 10, 10, 0.98) 100%
    ),
    url("images/reel-mockup-hero.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .reel-hero-wrap::before {
    background-image:
      linear-gradient(
        180deg,
        rgba(10, 10, 10, 0.90) 0%,
        rgba(10, 10, 10, 0.75) 50%,
        rgba(10, 10, 10, 0.98) 100%
      ),
      url("images/reel-mockup-hero-mobile.webp");
  }
}

/* --- Hero background photo wrapper (Saha Baskı Onayı only) ---
   Only used on this one page, so every other /surecler/ page is
   untouched. Three layers, back to front:

   1. .baski-hero-wrap's own background: solid #0A0A0C — exactly
      --sv-bg, the color .service-risk (no background of its own)
      actually shows below it. This is the real fallback/base
      color everything else fades onto, so top/bottom/left/right
      edges all resolve to a true color match, not a guess.
   2. ::before — the photo only, full-bleed (left:0/width:100vw;
      never the left:50%/translateX(-50%) break-out trick, which
      only works on a centered parent and would reopen the same
      right-side gap it did before). mask-image fades it out
      toward the bottom, so it dissolves into layer 1 with no
      band or line — nothing painted there to draw one.
   3. ::after — the left-to-right readability scrim. NOT masked,
      always fully covering, independent of the photo's own fade,
      so the text stays legible even where the photo has already
      faded to nothing.

   All three sit within .baski-hero-wrap's own stacking context
   (position:relative + z-index:0), ::before/::after at z-index:-1
   — negative-z-index layers always paint behind normal-flow
   content, so the H1/subtitle/CTA need no z-index of their own to
   stay on top and clickable.

   Mobile drops the left-right split (there's no "right side"
   worth preserving at 375px) for a single dimmed, top-anchored
   photo instead, so the ΔE/ISO readout screen — the most legible
   part of the image — stays in frame instead of getting cropped
   by cover-fit.

   The old 1px border-bottom on .service-hero (a plain hairline
   every other /surecler/ page still uses) would redraw the exact
   hard line the bottom fade removes, so it's turned off here,
   scoped to this page only. */
.baski-hero-wrap {
  position: relative;
  z-index: 0;
  overflow-x: hidden;
  background: #0a0a0c;
}
.baski-hero-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  z-index: -1;
  opacity: 0.5;
  background-image: url("images/baski-onayi-hero-mobile.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.85) 50%,
    rgba(0, 0, 0, 0.2) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.85) 50%,
    rgba(0, 0, 0, 0.2) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.baski-hero-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    #0a0a0c 0%,
    rgba(10, 10, 12, 0.85) 50%,
    rgba(10, 10, 12, 0.5) 100%
  );
}
.baski-hero-wrap .service-hero {
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 64px;
  padding-bottom: 64px;
  border-bottom: none;
}

@media (min-width: 769px) {
  .baski-hero-wrap::before {
    opacity: 1;
    background-image: url("images/baski-onayi-hero.webp");
    background-position: center center;
  }
}

@media (min-width: 1024px) {
  .baski-hero-wrap .service-hero {
    min-height: 600px;
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

/* --- Problem / risk section --- */
.service-risk {
  padding: 72px var(--sv-pad);
  border-bottom: 1px solid var(--sv-border);
}
.service-risk__title {
  font-family: var(--sv-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  font-size: clamp(24px, 3.2vw, 34px);
  margin: 0 0 40px;
  max-width: 760px;
  color: var(--sv-text);
}
.service-risk__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: start;
}
.service-risk__problem p {
  font-family: var(--sv-body);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--sv-text-secondary);
  margin: 0;
}
.service-risk__warning {
  background: var(--sv-surface);
  border: 1px solid var(--sv-border);
  border-left: 2px solid var(--sv-cyan);
  border-radius: 6px;
  padding: 24px 26px;
}
.service-risk__warning-title {
  font-family: var(--sv-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sv-cyan);
  margin: 0 0 12px;
}
.service-risk__warning p {
  font-family: var(--sv-body);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--sv-text-secondary);
  margin: 0;
}

/* --- Methodology grid --- */
.service-methodology {
  padding: 72px var(--sv-pad);
  border-bottom: 1px solid var(--sv-border);
}
.service-methodology__title {
  font-family: var(--sv-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(24px, 3.2vw, 34px);
  margin: 0 0 40px;
  color: var(--sv-text);
}
/* Optional: a short lead-in sentence above the card grid — none
   of the existing three service pages use this, so it's additive
   only (negative margin-top just tightens the gap left by the
   title's own margin-bottom, nothing else is touched). */
.service-methodology__intro {
  font-family: var(--sv-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--sv-text-secondary);
  max-width: 640px;
  margin: -20px 0 32px;
}
.service-methodology__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-methodology__card {
  padding: 28px 26px;
  background: var(--sv-surface);
  border: 1px solid var(--sv-border);
  border-radius: 8px;
  transition: border-color 0.3s var(--sv-ease);
}
.service-methodology__card:hover {
  border-color: var(--sv-cyan);
}
.service-methodology__index {
  display: block;
  font-family: var(--sv-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--sv-cyan);
  margin-bottom: 16px;
}
.service-methodology__card h3 {
  font-family: var(--sv-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  color: var(--sv-text);
  margin: 0 0 12px;
}
.service-methodology__card p {
  font-family: var(--sv-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--sv-text-secondary);
  margin: 0;
}

/* --- Metrics grid --- */
.service-metrics {
  padding: 72px var(--sv-pad);
  border-bottom: 1px solid var(--sv-border);
}
.service-metrics__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-metrics__card {
  padding: 32px 26px;
  background: var(--sv-surface);
  border: 1px solid var(--sv-border);
  border-radius: 8px;
  text-align: center;
}
.service-metrics__value {
  display: block;
  font-family: var(--sv-mono);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 34px);
  color: var(--sv-cyan);
  margin-bottom: 10px;
}
.service-metrics__label {
  display: block;
  font-family: var(--sv-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sv-text);
  margin-bottom: 10px;
}
.service-metrics__card p {
  font-family: var(--sv-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--sv-text-secondary);
  margin: 0;
}

/* --- FAQ accordion --- */
.service-faq {
  padding: 72px var(--sv-pad);
  border-bottom: 1px solid var(--sv-border);
  max-width: 860px;
}
.service-faq__title {
  font-family: var(--sv-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(24px, 3.2vw, 34px);
  margin: 0 0 32px;
  color: var(--sv-text);
}
.service-faq__item {
  border-top: 1px solid var(--sv-border);
}
.service-faq__item:last-child {
  border-bottom: 1px solid var(--sv-border);
}
.service-faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--sv-body);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--sv-text);
  cursor: pointer;
}
.service-faq__chevron {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  color: var(--sv-text-secondary);
  transition: transform 0.3s var(--sv-ease), color 0.3s var(--sv-ease);
}
.service-faq__question[aria-expanded="true"] .service-faq__chevron {
  transform: rotate(180deg);
  color: var(--sv-cyan);
}
.service-faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--sv-ease);
}
.service-faq__question[aria-expanded="true"] + .service-faq__answer {
  max-height: 300px;
}
.service-faq__answer p {
  font-family: var(--sv-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--sv-text-secondary);
  margin: 0 4px 22px;
}

/* --- Bottom CTA banner --- */
.service-cta-banner {
  padding: 80px var(--sv-pad);
  text-align: center;
  background: var(--sv-surface);
}
.service-cta-banner p {
  font-family: var(--sv-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--sv-text-secondary);
  max-width: 640px;
  margin: 0 auto 32px;
}
.service-cta-banner__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .service-hero { padding: 32px var(--sv-pad) 56px; }
  .service-risk,
  .service-methodology,
  .service-metrics,
  .service-faq,
  .service-cta-banner {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .service-risk__grid { grid-template-columns: 1fr; gap: 28px; }
  .service-methodology__grid { grid-template-columns: 1fr; }
  .service-metrics__grid { grid-template-columns: 1fr; }
  .service-cta-banner__actions { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .service-faq__answer,
  .service-faq__chevron,
  .service-methodology__card {
    transition: none;
  }
}