/* ==========================================================================
   markpay.com.tr clone — global foundation
   Tokens extracted verbatim via getComputedStyle from the live site.
   See docs/research/BEHAVIORS.md for provenance of every value here.
   ========================================================================== */

:root {
  /* --- ink & text ------------------------------------------------------ */
  --ink: #181D4E;          /* primary text (178 elements) */
  --muted: #4A4F7E;        /* secondary body text */
  --muted-2: #7A7FA8;      /* tertiary text */
  --muted-3: #9A9EC2;      /* eyebrow / label text */
  --white: #FFFFFF;

  /* --- brand ----------------------------------------------------------- */
  --pink: #6C63FF;
  --pink-mid: #7A70FF;
  --pink-deep: #2E259C;
  --pink-soft: #9A93FF;
  --pink-tint: #EEEDFF;
  --pink-line: #E6E4F7;
  --pink-line-2: #DEDBF5;
  --indigo: #1E26A8;
  --navy-800: #161C8E;
  --navy-900: #0D1060;

  /* --- surfaces -------------------------------------------------------- */
  --bg: #FFFFFF;
  --bg-tint: #F8F9FE;
  --bg-tint-2: #F6F7FC;

  /* --- lines ----------------------------------------------------------- */
  --line-soft: #ECEEF8;
  --line: #E4E7F6;
  --line-2: #E6E9F6;
  --line-3: #D9DDF1;
  --line-4: #E8EAF5;
  --line-5: #F0F1F9;

  /* --- status ---------------------------------------------------------- */
  --green: #18A06A;
  --green-bright: #3DDC97;

  /* --- gradients ------------------------------------------------------- */
  --grad-hero: linear-gradient(#FFFFFF 0%, #F8F9FE 100%);
  --grad-trust: linear-gradient(165deg, #161C8E 0%, #0D1060 100%);
  --grad-markplus: linear-gradient(135deg, #EEEDFF 0%, #F5F3FF 100%);
  --grad-dark: linear-gradient(135deg, #1E26A8, #0D1060);
  --grad-dark-alt: linear-gradient(135deg, #161C8E, #0D1060);
  --grad-pink: linear-gradient(135deg, #6C63FF, #2E259C);
  --grad-pink-red: linear-gradient(#7A70FF, #5A4FEE);
  --grad-slot: linear-gradient(135deg, #EEF0FB 0%, #EAE7F9 100%);

  /* --- elevation ------------------------------------------------------- */
  --shadow-card: 0 24px 50px rgba(24, 29, 78, .12);
  --shadow-card-lg: 0 30px 70px rgba(24, 29, 78, .12);
  --shadow-cta: 0 14px 34px rgba(108, 99, 255, .28);

  /* --- radii ----------------------------------------------------------- */
  --r-pill: 999px;
  --r-xl: 28px;
  --r-lg: 24px;
  --r-card: 22px;
  --r-md: 14px;
  --r-sm: 12px;
  --r-xs: 10px;

  /* --- layout ---------------------------------------------------------- */
  --container: 1180px;
  --container-pad: 32px;
  --header-h: 78px;

  /* --- motion ---------------------------------------------------------- */
  --reveal-ease: cubic-bezier(.16, 1, .3, 1);

  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --- reset (matches the original's own reset) ---------------------------- */
html, body { margin: 0; padding: 0; background: var(--bg); }

body {
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

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

input, button, select, textarea { font-family: inherit; }

img { max-width: 100%; display: block; }

/* --- layout helpers ------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* Section vertical rhythm. The original uses 90–130px desktop padding,
   collapsing to 56/64px at <=860px. */
.section-pad    { padding-top: 110px; padding-bottom: 110px; }
.section-pad-lg { padding-top: 130px; padding-bottom: 130px; }
.section-pad-sm { padding-top: 96px;  padding-bottom: 96px;  }

/* --- shared type ---------------------------------------------------------- */
.eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--muted-3);
  margin: 0 0 14px;
}

.h2 {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.92px;
  color: var(--ink);
  margin: 0;
}

.card {
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

/* --- keyframes (verbatim from the original) ------------------------------- */
@keyframes waveDrift { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes pulseDot  { 0%, 100% { opacity: 1; }              50% { opacity: .35; } }
@keyframes mobMenu   { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* --- scroll reveal --------------------------------------------------------
   JS adds .is-hidden only to elements that start below 92vh, then removes it
   on intersection. Elements above the fold never get the class, so they never
   animate — matching the original's _initReveal() early-return. */
[data-reveal] {
  transition: opacity .8s ease, transform .8s var(--reveal-ease);
}

[data-reveal].is-hidden {
  opacity: 0;
  transform: translateY(24px);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-hidden { opacity: 1; transform: none; transition: none; }
  .wave-track, .strip-track, .pulse-dot { animation: none !important; }
}

/* --- inline SVG fidelity switch -------------------------------------------
   On the live site every one of the 8 inline SVGs renders at 0×0 — verified
   computed width/height of 0px on all of them, despite each carrying correct
   width/height attributes and a viewBox. The cause is a bug in the original's
   hand-rolled renderer: it builds elements with document.createElement("svg")
   in the HTML namespace instead of createElementNS(SVG_NS, …), so the result is
   an unknown HTML element that ignores width/height and collapses. The same
   code path also emits a stray lowercase `viewbox` attribute alongside the
   correct one, which is the tell.

   Net effect on the original: the product-card waves, the trust section's large
   background swoosh, the hero badge check, and the PCI DSS lock are all present
   in the DOM but invisible. This clone reproduces that, because pixel-perfect
   emulation is the goal.

   TO SHOW THE ICONS AS THE DESIGNER INTENDED: delete this one rule. The markup
   and the SVG source are already correct and complete in every section, so the
   graphics light up immediately. Page geometry is unaffected either way — the
   decorative SVGs are absolutely positioned and the two inline ones sit in flex
   rows whose gaps apply regardless. */
body svg { width: 0; height: 0; }

/* --- nav dropdowns (CSS hover, exactly like the original) ------------------ */
.dc-dd-panel { display: none; }
.dc-dropdown:hover .dc-dd-panel { display: block; }

/* --- responsive visibility ------------------------------------------------- */
[data-mobile-only] { display: none; }

/* Verified against the original at 390px: the horizontal container padding stays
   32px all the way down — it does NOT shrink. --container-pad is deliberately
   not overridden here. */
@media (max-width: 860px) {
  html, body { overflow-x: hidden; }

  [data-desktop-only] { display: none !important; }
  [data-mobile-only]  { display: flex !important; }

  .section-pad,
  .section-pad-lg { padding-top: 64px; padding-bottom: 64px; }
  .section-pad-sm { padding-top: 56px; padding-bottom: 56px; }

  .h2 { font-size: 32px; letter-spacing: -0.64px; }
}