/* ==========================================================================
   Çikolata Kisti v2 — Design System

   SHARED WITH THE SIBLING SITES: the palette (navy #0F3661, pink #E55691),
   the splash animation, and the single-token symmetry contract. Everything
   else is this site's own.

   THE LANGUAGE — "döngü" (the cycle).
   Endometriosis is a cyclical condition: tissue that returns, pain that
   tracks the month. So the recurring device here is the RING — arcs,
   orbits, dials, phases — where the sibling sites use rectangles, plates
   and rising fills. Three rules follow from it:

     1. Corners are asymmetric. Cards use a "petal" radius (large on one
        diagonal, small on the other) instead of a uniform box radius, so
        the page reads as organic rather than gridded.
     2. Hover DRAWS rather than fills. A ring strokes itself around the
        element (stroke-dasharray), which is the splash's own gesture
        brought into the page — nothing floods, nothing slides.
     3. Progress is a dial, not a bar. The reader's position through a page
        is shown as an arc filling a circle.

   The ground is deeper than the sibling sites: #001935 (taken from the v1
   stylesheet) rather than #0B1220, with a berry mid-tone between navy and
   pink so the dark sections read warm instead of clinical.
   ========================================================================== */

/* ---------- Type ----------
   Plus Jakarta Sans, self-hosted alongside the sibling sites, with the
   handwriting cuts available for accents. @font-face rules come from
   fonts/fonts.css. */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* `clip`, NOT `hidden`: `hidden` would make <html> its own scroll
   container, which cancels viewport propagation — scrollY still moves but
   the scroll EVENT fires at the element and never reaches window, silently
   killing every scroll-driven behaviour on the page. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; }
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
/* The UA's rule for [hidden] is display:none at the lowest specificity, so
   any later `display:` on the same element wins and the element stays on
   screen — an invisible overlay that still eats clicks. Anything marked
   hidden here is hidden. */
[hidden] { display: none !important; }

/* ---------- Design tokens ---------- */
:root {
  /* Brand — shared with the sibling sites */
  --pink: #E55691;
  --pink-600: #d43f7d;
  --pink-700: #b82f66;
  --pink-light: #FF8FB8;
  --pink-50: #fdf1f6;
  --pink-100: #fbe2ec;
  --navy: #0F3661;
  --navy-700: #33465C;

  /* This site's own ground and mid-tone: deeper and warmer than the
     siblings', so the dark bands read as dusk rather than as a screen */
  --ink-900: #001935;
  --berry: #6B2B52;
  --berry-700: #4A1D39;
  --plum-50: #FBF3F7;

  --white: #ffffff;
  --ink: #0F3661;
  --muted: #5B6B7C;
  --muted-2: #8092A5;
  --line: #E9E4EC;
  --surface: #FAF6F9;
  --surface-2: #F2EBF1;

  /* Gradients — all three run navy → berry → pink, so every dark surface
     on the site is a slice of one continuous ramp */
  --grad-pink: linear-gradient(135deg, var(--pink-light), var(--pink) 58%, var(--pink-600));
  --grad-deep: linear-gradient(155deg, var(--ink-900), var(--berry-700) 62%, var(--berry));
  --grad-dusk: linear-gradient(120deg, var(--ink-900) 8%, var(--berry) 58%, var(--pink-600));

  /* Shadows — berry-tinted, never neutral grey */
  --shadow-sm: 0 6px 18px rgba(0, 25, 53, .07);
  --shadow-md: 0 18px 44px rgba(0, 25, 53, .11);
  --shadow-lg: 0 34px 80px rgba(0, 25, 53, .17);
  --shadow-pink: 0 18px 40px rgba(229, 86, 145, .26);

  /* Radii. --r-petal is the signature: one diagonal round, the other
     tight, which is what stops the cards reading as boxes. */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-petal: 34px 8px 34px 8px;
  --r-petal-alt: 8px 34px 8px 34px;
  --r-pill: 999px;

  /* Fluid layout — the symmetry contract, same idea as the siblings:
     one width token that the header, every section and the footer all
     measure themselves against. */
  --container-w: 1320px;
  --gutter: clamp(20px, 5vw, 64px);
  --pad-y: clamp(24px, 2.8vw, 48px);
  --pad-y-sm: clamp(16px, 1.9vw, 30px);

  /* Fluid type */
  --fs-hero: clamp(2.4rem, 1.5rem + 3.6vw, 4.2rem);
  --fs-h1: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
  --fs-h2: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  --fs-body: 1rem;
  --fs-eyebrow: .78rem;

  --ease: cubic-bezier(.22,.9,.24,1);
  --ease-pop: cubic-bezier(.34,1.3,.44,1);
  --dur: .28s;
  --dur-slow: .55s;
}

/* ---------- Base ---------- */
html { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
body {
  color: var(--ink);
  background: var(--white);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* the body face is variable so every weight is drawn; this still matters
     for the fallback stack and the static handwriting cuts */
  font-synthesis: none;
  font-kerning: normal;
}
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.02em; line-height: 1.14; color: var(--navy); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { color: var(--muted); }
main { display: block; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 5000;
  padding: 12px 18px; background: var(--navy); color: var(--white);
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Eyebrow: a petal, not a rule (2026-10-06: quarter ring → petal) ----------
   The sibling sites prefix a section label with a short straight line.
   A small filled petal — the cards' asymmetric petal corners at their smallest size. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--pink);
}
.eyebrow::before {
  content: ""; flex: none;
  width: 11px; height: 11px;
  background: var(--pink);
  border-radius: 1px 70% 1px 70%;
}

/* ---------- Reveal ----------
   An animation with `backwards`, not a transition: a transition can be
   wiped out by any later `transition` shorthand on the same element, which
   is how the sibling site lost its card stagger. `.js` scopes the hiding,
   so if the script never runs the content is simply visible. */
.js .reveal { opacity: 0; }
.reveal.in {
  opacity: 1;
  animation: rv-up .42s var(--ease) backwards;
  animation-delay: calc(var(--n, 0) * .04s);
}
.reveal-left.in  { animation-name: rv-left; }
.reveal-right.in { animation-name: rv-right; }
.reveal-up.in    { animation-name: rv-up; }
.reveal-ring.in  { animation-name: rv-ring; }
@keyframes rv-up    { from { opacity: 0; transform: translateY(26px); } }
@keyframes rv-left  { from { opacity: 0; transform: translateX(-34px); } }
@keyframes rv-right { from { opacity: 0; transform: translateX(34px); } }
/* the site's own entrance: the element arrives turning slightly open, as
   if it had swung in on an arc */
@keyframes rv-ring  { from { opacity: 0; transform: scale(.94) rotate(-2.5deg); } }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; }
  .reveal.in { animation: none; }
  html { scroll-behavior: auto; }
}