/* ==========================================================================
   Jinekolojide Robotik Cerrahi v2 — Design System
   Palette from the client-supplied brand guide ("Taner Usta - Renk ve
   Font.html"): navy #0F3661, pink #E55691. Deliberately the same
   foundation as the miyomcerrahisiv2 theme — one doctor, one brand — but
   this is an independent copy: the two sites share no file, no database
   and no container.

   TYPE IS A DEPARTURE FROM THAT GUIDE. The guide specifies Neue Haas Unica
   Pro, which was self-hosted here from its embedded woff2 files; it was
   replaced on request with Plus Jakarta Sans for a more current voice.
   Palette and everything else still follow the guide. One typeface
   site-wide, headings included — no separate display face. The only other
   faces loaded are the two handwriting cuts the welcome banner uses.
   ========================================================================== */

/* ---------- Type ----------
   Plus Jakarta Sans, served as a variable face from the Google Fonts link
   in header.php. It carries Latin-Ext, so every Turkish diacritic
   (ı İ ş ğ ç ö ü) is a drawn glyph rather than a composed one, and because
   it is variable every weight used below is a real instance. */
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* `overflow-x: clip`, NOT `hidden`. `hidden` makes <html> its own scroll
   container, which cancels viewport propagation — scrollY still moves but
   the scroll *event* fires at the element and never reaches window, which
   silently kills every scroll-driven behaviour on the page. `clip` gives
   the same overflow guard without creating a scroll container. */
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; }

/* ---------- Design tokens ---------- */
:root {
  /* Brand — exact values from the client's brand guide
     ("Taner Usta - Renk ve Font.html"): anarenk/kirmizi/pembe-acik/yesil */
  --pink: #E55691;
  --pink-600: #d43f7d;
  --pink-light: #FF8FB8;
  --pink-50: #fdf1f6;
  --pink-100: #fbe2ec;
  --navy: #0F3661;
  --navy-2: #14284A;
  --navy-700: #33465C;
  --navy-900: #0B1220;
  --green: #79A602;
  --white: #ffffff;

  /* Neutrals — from the same guide (metin-soluk / surface-soft / border-soft) */
  --ink: #0F3661;
  --muted: #5B6B7C;
  --muted-2: #8092A5;
  --line: #E9ECF3;
  --surface: #F6F8FB;
  --surface-2: #EEF1F5;

  /* Gradients */
  --grad-pink: linear-gradient(135deg, var(--pink-light), var(--pink) 60%, var(--pink-600));
  --grad-navy: linear-gradient(160deg, var(--navy-900), var(--navy) 55%, var(--navy-700));

  /* Shadows — navy-tinted, never pure black */
  --shadow-sm: 0 6px 18px rgba(15, 54, 97, .08);
  --shadow-md: 0 18px 44px rgba(15, 54, 97, .12);
  --shadow-lg: 0 34px 80px rgba(15, 54, 97, .18);
  --shadow-pink: 0 18px 40px rgba(229, 86, 145, .28);

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Fluid layout */
  --container-w: 1320px;
  --gutter: clamp(20px, 5vw, 64px);
  /* Two stacked sections each pay this, so the gap between them is TWICE
     the number: at 80px the trough between every block was 160px. Halved
     again here, so a section pays 40px and the trough is 80px. */
  --pad-y: clamp(20px, 2.3vw, 40px);
  --pad-y-sm: clamp(14px, 1.6vw, 26px);

  /* Fluid type scale */
  --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;

  --header-h: 92px;
}

/* ---------- 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;
  /* the Gecko/macOS half of the line above, which was missing */
  -moz-osx-font-smoothing: grayscale;
  /* The body face is variable so every weight is drawn, but this still
     matters for the fallback stack and for the banner's handwriting
     faces, which are static cuts. */
  font-synthesis: none;
  font-kerning: normal;
}
h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
  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; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--pad-y); }
.section--sm { padding-block: var(--pad-y-sm); }
.section--surface { background: var(--surface); }
.section--navy { background: var(--grad-navy); color: rgba(255,255,255,.92); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--white); }
.section--navy p { color: rgba(255,255,255,.72); }

.grid { display: grid; gap: clamp(20px, 3vw, 32px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pink);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--pink);
  border-radius: 2px;
}
.section-head { max-width: 680px; margin-bottom: clamp(24px, 3vw, 40px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head > .eyebrow { margin-bottom: 14px; }
.section-head > h2 { margin-bottom: 14px; }
.section-head > p { font-size: var(--fs-lead); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 30px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: .95rem;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn svg, .btn i { flex-shrink: 0; }
.btn:active { transform: scale(.97); }
.btn-primary {
  background: var(--grad-pink);
  color: var(--white);
  box-shadow: var(--shadow-pink);
}
@media (min-width: 681px) and (hover: hover) { .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 24px 52px rgba(229,86,145,.36); } }
.btn-navy {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 18px 40px rgba(0,45,116,.28);
}
@media (min-width: 681px) and (hover: hover) { .btn-navy:hover { transform: translateY(-2px); background: var(--navy-700); } }
.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--line);
}
@media (min-width: 681px) and (hover: hover) { .btn-outline:hover { border-color: var(--navy); background: var(--surface); } }
.btn-ghost-white {
  background: rgba(255,255,255,.1);
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
}
@media (min-width: 681px) and (hover: hover) { .btn-ghost-white:hover { background: rgba(255,255,255,.18); } }
.btn-sm { height: 46px; padding: 0 22px; font-size: .88rem; }
/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } }

/* ---------- Reveal-on-scroll (vanilla, no library) ----------
   Driven by an animation, not a transition. A card that carries its own
   `transition` for hover (.bcard, .tcard, .ecard...) replaces the whole
   shorthand, which silently dropped the stagger's transition-delay and
   made grids arrive all at once. An animation can't be clobbered that
   way, and `backwards` means the element falls back to its normal style
   once it lands, so hover transforms still work. */
.js .reveal { opacity: 0; }
.reveal.in {
  opacity: 1;
  /* Was .7s with an .08s step. On a grid of twelve that put the last card
     1.66s behind the first, and since nothing is readable until it has
     arrived, every page felt like it was still loading long after it had
     finished. Halving both keeps the entrance and gives the page back. */
  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-zoom.in  { animation-name: rv-zoom; }
/* auto-marked blocks travel a shorter distance and land quicker, so a
   section full of them reads as one movement instead of a queue */
.reveal--auto.in { animation-duration: .55s; }
.reveal--auto.reveal-left.in  { animation-name: rv-left-sm; }
.reveal--auto.reveal-right.in { animation-name: rv-right-sm; }

@keyframes rv-up      { from { opacity: 0; transform: translateY(30px); } }
@keyframes rv-left    { from { opacity: 0; transform: translateX(-48px); } }
@keyframes rv-right   { from { opacity: 0; transform: translateX(48px); } }
@keyframes rv-zoom    { from { opacity: 0; transform: scale(.94); } }
@keyframes rv-left-sm { from { opacity: 0; transform: translateX(-32px); } }
@keyframes rv-right-sm{ from { opacity: 0; transform: translateX(32px); } }

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

/* ---------- Stat counters ---------- */
.stat { text-align: center; }
.stat .num {
  display: block;
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.02em;
}
.section--navy .stat .num { color: var(--white); }
.stat .label { font-size: .92rem; color: var(--muted); font-weight: 500; }
.section--navy .stat .label { color: rgba(255,255,255,.65); }

/* ---------- Accordion (FAQ) ---------- */
.acc-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--white);
}
.acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  text-align: left;
  font-weight: 700;
  color: var(--navy);
}
.acc-trigger .plus {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pink-50);
  color: var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.acc-item.is-open { border-color: var(--pink-100); box-shadow: var(--shadow-sm); }
.acc-item.is-open .acc-trigger .plus { transform: rotate(135deg); background: var(--pink); color: var(--white); }
/* --h is measured by main.js from the panel's own content, so the answer
   is never clipped and the height is never a guessed constant. (The
   grid 0fr->1fr trick sized the row to 0 here, because the inner's
   min-content contribution is zero once it is overflow:hidden.) */
.acc-panel { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease); }
.acc-item.is-open .acc-panel { max-height: var(--h, 1200px); }
.acc-panel-inner { padding: 0 24px 22px; color: var(--muted); line-height: 1.75; }

/* ---------- Forms ----------
   The bare `.field` control styles that used to live here are gone. They
   were written for a form where the CONTROL itself carried .field
   (hence `textarea.field` and `.field:focus`), and nothing on this site is
   built that way any more — but the contact form uses .field for the
   WRAPPER around its input, so the old `height: 56px` was pinning that
   wrapper 8px shorter than the control inside it. That is what made the
   writing areas overlap. The contact form owns .field now; see pages.css. */

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: .78rem;
  font-weight: 700;
  background: var(--pink-50);
  color: var(--pink-600);
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mt-0 { margin-top: 0 !important; }
.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: 12px; top: -60px; z-index: 2000;
  background: var(--navy); color: var(--white); padding: 12px 18px;
  border-radius: var(--r-sm); transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 12px; }