/* ==========================================================================
   Miyom Cerrahisi v2 — Design System
   Palette + type from the client-supplied brand guide ("Taner Usta - Renk
   ve Font.html"): navy #0F3661, pink #E55691. Neue Haas Unica Pro is the
   ONLY typeface site-wide (headings included — no separate display face),
   self-hosted below from that guide's embedded woff2 files since it isn't
   on Google Fonts. Only 300/400/500/700 weights exist as real files, so
   every font-weight in this codebase is pinned to one of those four —
   never 600/800/900, which would silently fall back to a different
   weight (or family, in some engines) instead of Neue Haas.
   ========================================================================== */

/* ---------- Brand fonts (self-hosted from the client's brand guide) ---------- */
@font-face {
  font-family: 'Neue Haas';
  src: url('../fonts/NeueHaas-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Haas';
  src: url('../fonts/NeueHaas-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Haas';
  src: url('../fonts/NeueHaas-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Haas';
  src: url('../fonts/NeueHaas-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
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);
  --pad-y: clamp(56px, 8vw, 128px);
  --pad-y-sm: clamp(40px, 5vw, 72px);

  /* 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: 'Neue Haas', Poppins, -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;
}
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(32px, 5vw, 56px); }
.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; }
/* ---------- Curling thread + "goo" wave fill (Sorularınız mı var? CTA) ---------- */
/* On hover: a glowing dot curls in from outside the button along an
   SVG motion path (reading as if it travelled from the navy section's
   own outer edge), while 4 blurred "blob" shapes rise from below and
   melt into one liquid wave via an SVG goo filter (feGaussianBlur +
   feColorMatrix — the classic blob-button technique) that floods the
   pill white. The thread fades out right as the wave finishes filling,
   and the label flips to pink in sync. */
.btn-snake { position: relative; overflow: visible; isolation: isolate; box-shadow: var(--shadow-pink); transition: box-shadow var(--dur) var(--ease); }
@media (min-width: 681px) and (hover: hover) { .btn-snake:hover { box-shadow: 0 24px 52px rgba(229,86,145,.36); } }
/* Label is its own flex row (icon + text) so an inline SVG icon next to
   the text can never wrap to its own line or shrink the button — that
   was happening because the global `svg { display:block }` reset forces
   a line break on any inline text right next to it unless the parent
   is itself a flex/inline-flex container. */
.btn-snake__label { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 10px; }
.btn-snake__label-icon { color: var(--white); flex-shrink: 0; transition: color .2s var(--ease); }
@media (min-width: 681px) and (hover: hover) { .btn-snake:hover .btn-snake__label-icon { color: var(--pink); transition: color .2s var(--ease) .92s; } }
/* The background-clip:text gradient-wipe approach kept coming back
   low-contrast/unreadable at rest in real testing (anti-aliasing at
   the hard color edge, plus relying on transparent text as a base
   state is inherently fragile) — dropped entirely. Every letter is
   now its own span with a single solid `color`, always fully opaque
   white at rest, so there is no way for it to render as anything but
   plain readable text. The "flows across the letters" motion instead
   comes from staggering each letter's own transition-delay, so they
   turn pink one after another left-to-right rather than all at once —
   same visual idea, zero transparency risk. */
.btn-snake__label-text span {
  display: inline-block;
  color: var(--white);
  transition: color .3s var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .btn-snake:hover .btn-snake__label-text span { color: var(--pink); } }
/* Covers up to 20 letters — enough for the longest label used
   ("Doktorunuza Sorun", 17 characters) with room to spare, so no
   button's text falls off the end of the stagger and snaps to pink
   all at once instead of flowing letter by letter. */
.btn-snake__label-text span:nth-child(1) { transition-delay: .55s; }
.btn-snake__label-text span:nth-child(2) { transition-delay: .58s; }
.btn-snake__label-text span:nth-child(3) { transition-delay: .61s; }
.btn-snake__label-text span:nth-child(4) { transition-delay: .64s; }
.btn-snake__label-text span:nth-child(5) { transition-delay: .67s; }
.btn-snake__label-text span:nth-child(6) { transition-delay: .7s; }
.btn-snake__label-text span:nth-child(7) { transition-delay: .73s; }
.btn-snake__label-text span:nth-child(8) { transition-delay: .76s; }
.btn-snake__label-text span:nth-child(9) { transition-delay: .79s; }
.btn-snake__label-text span:nth-child(10) { transition-delay: .82s; }
.btn-snake__label-text span:nth-child(11) { transition-delay: .85s; }
.btn-snake__label-text span:nth-child(12) { transition-delay: .88s; }
.btn-snake__label-text span:nth-child(13) { transition-delay: .91s; }
.btn-snake__label-text span:nth-child(14) { transition-delay: .94s; }
.btn-snake__label-text span:nth-child(15) { transition-delay: .97s; }
.btn-snake__label-text span:nth-child(16) { transition-delay: 1s; }
.btn-snake__label-text span:nth-child(17) { transition-delay: 1.03s; }
.btn-snake__label-text span:nth-child(18) { transition-delay: 1.06s; }
.btn-snake__label-text span:nth-child(19) { transition-delay: 1.09s; }
.btn-snake__label-text span:nth-child(20) { transition-delay: 1.12s; }
@media (prefers-reduced-motion: reduce) {
  .btn-snake__label-text span { transition-delay: 0s !important; }
}

.btn-snake__thread {
  position: absolute; top: 50%; left: 100%; width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: var(--white);
  box-shadow: 0 0 14px 3px rgba(255,255,255,.85);
  /* Continues 60px past the (0,0) edge point, into the button's own
     interior, instead of stopping right at the edge — it now visibly
     enters the pill rather than just touching it. */
  offset-path: path("M 230,-36 C 160,4 130,-40 70,-6 C 30,16 8,4 0,0 C -20,-4 -40,4 -60,0");
  offset-distance: 0%;
  opacity: 0;
  pointer-events: none; z-index: 2;
}
/* Slowed down (.71s→.95s) for a more fluid, less rushed feel, and
   retimed against the blob fill below (delays 0/.1/.2/.3s, each .65s
   long → finishing at .65/.75/.85/.95s): the thread arrives right as
   the first blob lands, and is fully gone by .95s — the same moment
   the last blob (and the label) finishes — so "thread arrives → wave
   floods in → thread disappears exactly as it completes" still reads
   as one continuous, synced motion, just at a calmer pace. */
@media (min-width: 681px) and (hover: hover) { .btn-snake:hover .btn-snake__thread { animation: btn-thread-travel .95s var(--ease) forwards; } }
@keyframes btn-thread-travel {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  63% { offset-distance: 100%; opacity: 1; }
  85% { opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

.btn-snake__clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: 1; }
.btn-snake__blobs { position: absolute; inset: -30% -10%; filter: url(#btn-goo); }
.btn-snake__blob {
  position: absolute; bottom: -30%; width: 34%; height: 100%;
  background: var(--white); border-radius: 50%;
  transform: translateY(80%) scale(1.5);
  transition: transform .65s var(--ease);
}
.btn-snake__blob:nth-child(1) { left: -6%; }
.btn-snake__blob:nth-child(2) { left: 21%; transition-delay: .1s; }
.btn-snake__blob:nth-child(3) { left: 48%; transition-delay: .2s; }
.btn-snake__blob:nth-child(4) { left: 75%; transition-delay: .3s; }
@media (min-width: 681px) and (hover: hover) { .btn-snake:hover .btn-snake__blob { transform: translateY(0) scale(1.5); } }

/* ---------- Left-to-right variant (homepage cta-banner) ---------- */
/* Same mechanism, mirrored: the thread now curls in from the left
   instead of the right, and continues 60px past the edge into the
   button's interior on that side too. The blob fill and the text-color
   wipe both already read left-to-right (blob 1 / the gradient's pink
   stop are both first from the left), so only the thread's approach
   direction needs to flip. */
.btn-snake--ltr .btn-snake__thread {
  left: auto; right: 100%; margin: -4.5px -4.5px 0 0;
  offset-path: path("M -230,-36 C -160,4 -130,-40 -70,-6 C -30,16 -8,4 0,0 C 20,-4 40,4 60,0");
}

@supports not (offset-path: path("M0,0")) {
  /* Fallback for browsers without CSS Motion Path: same idea, straight
     line instead of a curl. */
  .btn-snake__thread { offset-path: none; transform: translate(230px, -50%); transition: transform .55s var(--ease), opacity .1s linear .45s; }
  @media (min-width: 681px) and (hover: hover) { .btn-snake:hover .btn-snake__thread { animation: none; transform: translate(-60px, -50%); opacity: 1; transition: transform .55s var(--ease), opacity .1s linear; } }
  .btn-snake--ltr .btn-snake__thread { transform: translate(-230px, -50%); }
  @media (min-width: 681px) and (hover: hover) { .btn-snake--ltr:hover .btn-snake__thread { transform: translate(60px, -50%); } }
}
/* The thread parks 230px outside the button — on purpose, it has to curl in
   from off the pill — and .btn-snake is overflow:visible so it can. On a
   narrow screen the button sits near the edge and that parked position was
   114px of horizontal page scroll. It is a hover effect and there is no
   hover on a touch screen, so below the tablet breakpoint it simply is not
   built. Gated on hover:none too, so a small window with a mouse keeps it. */
@media (max-width: 1040px) {
  .btn-snake__thread { display: none; }
}
@media (hover: none) {
  .btn-snake__thread { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-snake__thread { animation: none; }
  .btn-snake__blob { transition: none; }
  @media (min-width: 681px) and (hover: hover) { .btn-snake:hover .btn-snake__blob { transform: translateY(0) scale(1.5); } }
}

/* ---------- 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) ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
/* Directional variants — e.g. the hero's text and photo enter from
   opposite sides instead of both just fading up the same way. */
.reveal-left { transform: translateX(-56px); }
.reveal-left.in { transform: translateX(0); }
.reveal-right { transform: translateX(56px); }
.reveal-right.in { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 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.open .acc-trigger .plus { transform: rotate(135deg); background: var(--pink); color: var(--white); }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease); }
.acc-panel-inner { padding: 0 24px 22px; color: var(--muted); }

/* ---------- Forms ---------- */
.field {
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
textarea.field { height: 140px; padding-top: 16px; resize: vertical; }
.field:focus { outline: none; border-color: var(--pink); background: var(--white); }

/* ---------- 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);
}

/* ---------- Scroll-to-top ---------- */
.totop {
  position: fixed;
  right: clamp(18px, 3vw, 32px);
  bottom: clamp(18px, 3vw, 32px);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.85);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-pop), visibility var(--dur);
  overflow: hidden;
}
.totop.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.totop svg { position: relative; z-index: 2; color: var(--navy); transition: color var(--dur) var(--ease); }
.totop .ring { position: absolute; inset: 0; }
.totop .ring circle {
  fill: none;
  stroke: var(--pink);
  stroke-width: 3;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset .15s linear;
}
.totop::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--grad-pink);
  transform: scale(0);
  transition: transform var(--dur-slow) var(--ease);
  z-index: 1;
}
@media (min-width: 681px) and (hover: hover) { .totop:hover::before { transform: scale(1); } }
@media (min-width: 681px) and (hover: hover) { .totop:hover svg { color: var(--white); } }
/* On click, the arrow (not the progress ring) escapes the button's own
   circular boundary and is fully gone by the halfway point of its exit
   — .flying briefly lifts the button's overflow clip so the arrow can
   actually travel past its edge instead of being cut off inside it.
   Toggled by main.js and removed once the animation finishes. */
.totop.flying { overflow: visible; }
@keyframes totop-fly {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-34px); opacity: 0; }
  100% { transform: translateY(-34px); opacity: 0; }
}
.totop.flying svg:not(.ring) { animation: totop-fly .5s var(--ease) forwards; }
@media (prefers-reduced-motion: reduce) {
  .totop.flying svg:not(.ring) { animation: none; }
}

/* ---------- 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; }

/* ---------- Shooting-star cursor trail (site-wide) ---------- */
.cursor-yildiz {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 9000;
  color: var(--pink);
  filter: drop-shadow(0 0 4px rgba(229, 86, 145, .8));
  will-change: transform, opacity, filter;
}
.cursor-yildiz svg {
  width: 100%;
  height: 100%;
  display: block;
}