/* ==========================================================================
   Jinekolojide Robotik Cerrahi v2 — homepage sections
   ========================================================================== */

.section {
  padding-block: var(--pad-y);
}

.sechead {
  max-width: 62ch;
  margin-bottom: clamp(22px, 2.6vw, 36px);
}

.sechead--wide {
  max-width: none;
}

/* runs to the end of the line at normal widths, but stops growing before
   the measure gets unreadable on a wide monitor */
.sechead--wide p {
  max-width: min(100%, 110ch);
}

.sechead.center {
  margin-inline: auto;
  text-align: center;
}

.sechead.center p {
  margin-inline: auto;
}

.sechead h2 {
  font-size: var(--fs-h2);
  margin-top: 12px;
}

.sechead p {
  margin-top: 14px;
  max-width: 78ch;
  color: var(--muted);
  line-height: 1.75;
}

.sechead__more {
  margin-top: clamp(20px, 2.4vw, 30px);
}

.sechead.center+*+.sechead__more,
.sechead.center~.sechead__more {
  text-align: center;
}

.btn-ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--navy);
  font-size: .87rem;
  font-weight: 700;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* the fill rises from the bottom rather than fading in */
.btn-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-navy);
  transform: translateY(101%);
  transition: transform .42s var(--ease);
}

@media (min-width: 681px) and (hover: hover) { .btn-ghost:hover {
  color: var(--white);
  border-color: transparent;
  transform: translateY(-2px);
} }

@media (min-width: 681px) and (hover: hover) { .btn-ghost:hover::before {
  transform: translateY(0);
} }

/* ---------- Hero ---------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--shell-h) + var(--shell-gap) + 48px);
  padding-bottom: clamp(28px, 4vw, 56px);
}

/* four blurred colour fields, each on its own slow loop — the background
   is never still, but nothing ever crosses into the reading area */
.hero__field {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  z-index: -2;
}

.hero__field span {
  position: absolute;
  border-radius: 50%;
  filter: blur(56px);
  opacity: .5;
  will-change: transform;
}

.hero__field span:nth-child(1) {
  width: min(46vw, 520px);
  height: min(46vw, 520px);
  left: -6%;
  top: -8%;
  background: rgba(229, 86, 145, .34);
  animation: fieldA 17s var(--ease) infinite;
}

.hero__field span:nth-child(2) {
  width: min(38vw, 440px);
  height: min(38vw, 440px);
  right: -4%;
  top: 4%;
  background: rgba(15, 54, 97, .26);
  animation: fieldB 21s var(--ease) infinite;
}

.hero__field span:nth-child(3) {
  width: min(30vw, 360px);
  height: min(30vw, 360px);
  left: 32%;
  bottom: -12%;
  background: rgba(255, 143, 184, .3);
  animation: fieldC 25s var(--ease) infinite;
}

.hero__field span:nth-child(4) {
  width: min(26vw, 320px);
  height: min(26vw, 320px);
  right: 22%;
  bottom: -6%;
  background: rgba(121, 166, 2, .14);
  animation: fieldD 29s var(--ease) infinite;
}

@keyframes fieldA {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(7vw, 4vh) scale(1.14);
  }

  66% {
    transform: translate(-3vw, 8vh) scale(.94);
  }
}

@keyframes fieldB {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  40% {
    transform: translate(-6vw, 6vh) scale(1.1);
  }

  70% {
    transform: translate(2vw, -4vh) scale(.92);
  }
}

@keyframes fieldC {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(5vw, -7vh) scale(1.18);
  }
}

@keyframes fieldD {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  45% {
    transform: translate(-7vw, -5vh) scale(1.12);
  }
}

/* a faint engineering grid, because the subject is a machine */
.hero.is-idle .hero__field span {
  animation-play-state: paused;
}

.hero__grid-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(15, 54, 97, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 54, 97, .055) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%);
}

/* The voxel field is a canvas (js/voxel.js): a flat grid whose cells
   swell on a wave that travels across the plate and back. It sits on the
   same 62px module as the grid lines above it, so the two read as one
   surface. */
.hero__voxel {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 42%, #000 22%, transparent 78%);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: stretch;
}

.hero__title {
  font-size: var(--fs-hero);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin-top: 16px;
}

.hero__title em {
  font-style: normal;
  color: var(--pink);
}

/* each line is masked and pivots up into place, one after the next */
.wordflip {
  display: block;
  overflow: hidden;
  perspective: 600px;
}

.wordflip>span {
  display: block;
  transform-origin: 50% 100%;
  animation: wordflip .95s var(--ease) both;
}

.wordflip:nth-child(1)>span {
  animation-delay: .05s;
}

.wordflip:nth-child(2)>span {
  animation-delay: .17s;
}

.wordflip:nth-child(3)>span {
  animation-delay: .29s;
}

.wordflip:nth-child(4)>span {
  animation-delay: .41s;
}

@keyframes wordflip {
  from {
    transform: translateY(105%) rotateX(-58deg);
    opacity: 0;
  }

  to {
    transform: translateY(0) rotateX(0);
    opacity: 1;
  }
}

.hero__lead {
  margin-top: 20px;
  max-width: 52ch;
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 1.75;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero__figure {
  position: relative;
  justify-self: stretch;
  display: flex;
}

/* The plate stretches to the copy column's height and crops the photo to
   fill it, so the two halves of the hero end on the same line instead of
   the picture sitting at whatever size it happens to be. */
.hero__plate {
  display: block;
  position: relative;
  width: 100%;
  align-self: stretch;
  min-height: 320px;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.hero__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  display: block;
}

/* a navy wash keeps the photo's own warm background from fighting the palette */
.hero__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 54, 97, .06), rgba(15, 54, 97, .22));
  pointer-events: none;
}

@keyframes floaty {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-14px);
  }
}

/* ---------- Ranking strip ------------------------------------------- */
.rankbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 3vw, 42px);
  margin-top: clamp(24px, 3vw, 40px);
  padding: 22px clamp(20px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}

.rankbar__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.rankbar__txt {
  font-size: .92rem;
  color: var(--muted);
}

/* the ranking itself is the headline, so it is set at display size */
.rankbar__item b {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--navy);
}

.rankbar__note {
  margin-left: auto;
  font-size: .86rem;
  color: var(--muted);
  font-weight: 500;
}

/* ---------- Treatments ---------------------------------------------- */
.tgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.tcard {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 210px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  transition: transform .34s var(--ease), box-shadow .34s var(--ease),
              border-color .34s var(--ease), opacity .34s var(--ease);
}

/* The grid answers as a whole: the card under the pointer stays lit and
   every other one steps back. Dimming the siblings rather than decorating
   the hovered card means the effect is the same size as the thing it is
   describing — a choice among six — instead of six separate flourishes.
   :has on the grid is what lets a child's hover style its siblings. */
.tgrid:has(.tcard:focus-visible) .tcard:not(:focus-visible) {
  opacity: .42;
  transform: scale(.985);
}
@media (min-width: 681px) and (hover: hover) { .tgrid:has(.tcard:hover) .tcard:not(:hover) {
  opacity: .42;
  transform: scale(.985);
} }

.tcard:focus-visible {
  transform: translateY(-5px);
  box-shadow: var(--shadow-pink);
  border-color: var(--pink);
}
@media (min-width: 681px) and (hover: hover) { .tcard:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-pink);
  border-color: var(--pink);
} }

.tcard__no { font-size: .74rem; font-weight: 700; letter-spacing: .1em; color: var(--pink); }
.tcard h3 { margin-top: 14px; font-size: 1.06rem; }
.tcard p { margin-top: 8px; margin-bottom: 16px; font-size: .86rem; line-height: 1.6; color: var(--muted); }

/* the arrow is the only thing that inverts — it fills, so the card still
   reads as clickable without the whole panel changing colour */
.tcard__go {
  margin-top: auto;
  width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 50%;
  display: grid; place-items: center;
  color: var(--navy);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tcard__go svg { width: 16px; height: 16px; }
.tcard:focus-visible .tcard__go {
  background: var(--grad-pink); color: var(--white);
  border-color: transparent; transform: translateX(4px);
}
@media (min-width: 681px) and (hover: hover) { .tcard:hover .tcard__go {
  background: var(--grad-pink); color: var(--white);
  border-color: transparent; transform: translateX(4px);
} }


/* ---------- da Vinci showcase (#robotikvitrin) -----------------------
   The section is tall and its inner panel is sticky, so the reader scrolls
   "through" it. --p (0→1, written by main.js) is the section's own
   progress: the depth layers ride it at different multiples, which is the
   parallax technique with no library, and main.js swaps the frame/step
   pair at each fifth of it. */
.rv {
  position: relative;
  height: 520vh;
  background: var(--navy-900);
  color: var(--white);
}

.rv__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.rv__head {
  text-align: center;
  margin-bottom: clamp(18px, 2.6vw, 34px);
}

.rv__head h2 {
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.8rem);
  margin-top: 10px;
  color: var(--white);
}

.rv .eyebrow {
  color: rgba(255, 255, 255, .55);
}

.rv .eyebrow::before {
  background: var(--pink);
}

.rv__stage {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.rv__depth {
  position: absolute;
  inset: -40% -30%;
  z-index: 0;
  pointer-events: none;
}

.rv__depth span {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.rv__depth-a {
  width: 52%;
  aspect-ratio: 1;
  left: -6%;
  top: 6%;
  background: radial-gradient(closest-side, rgba(229, 86, 145, .34), transparent 70%);
  transform: translateY(calc(var(--p, 0) * -22%));
}

.rv__depth-b {
  width: 40%;
  aspect-ratio: 1;
  right: 2%;
  top: 22%;
  background: radial-gradient(closest-side, rgba(90, 150, 255, .22), transparent 70%);
  transform: translateY(calc(var(--p, 0) * -44%));
}

.rv__depth-c {
  width: 30%;
  aspect-ratio: 1;
  left: 38%;
  bottom: 4%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .12), transparent 70%);
  transform: translateY(calc(var(--p, 0) * -70%));
}

.rv__visual {
  position: relative;
  z-index: 1;
  aspect-ratio: 1 / 1;
  max-height: 62vh;
}

.rv__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(.965) translateY(10px);
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}

.rv__frame.is-on {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.rv__glow {
  position: absolute;
  left: 50%;
  bottom: 4%;
  translate: -50% 0;
  width: 66%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(229, 86, 145, .5), transparent 70%);
  filter: blur(16px);
}

.rv__copy {
  position: relative;
  z-index: 1;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

.rv__label {
  display: inline-block;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.rv__step {
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .45s var(--ease), transform .55s var(--ease);
  pointer-events: none;
}

.rv__step.is-on {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.rv__step-no {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--pink);
}

.rv__step h3 {
  margin-top: 14px;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--white);
}

.rv__step p {
  margin-top: 18px;
  max-width: 46ch;
  color: rgba(255, 255, 255, .72);
  line-height: 1.75;
  font-size: 1.02rem;
}

.rv__rail {
  margin-top: auto;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}

.rv__rail-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--grad-pink);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}

.rv .btn-ghost {
  align-self: flex-start;
  margin-top: 22px;
  color: var(--white);
  border-color: rgba(255, 255, 255, .22);
}

.rv .btn-ghost::before {
  background: var(--grad-pink);
}

/* ---------- Certificates -------------------------------------------- */
.certs {
  background: var(--surface);
}

/* padding-top: 0 here butted the certificates straight onto the clinic
   gallery. Both sections share the --surface background so there was no
   visible seam, but the gap between the gallery and the certificates
   heading came out at 41px against a median of 86 across the page — the
   block read as cramped rather than continuous. Half the normal trough is
   enough to keep the two reading as one grey panel without squashing the
   heading against the photographs. */
#sertifikalar {
  padding-top: calc(var(--pad-y) / 2);
}

/* the pair sits fanned like two documents dropped on a desk; hovering one
   squares it up and pushes the other back */
.certfan {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(-40px, -3vw, 0px);
  padding-block: clamp(10px, 2vw, 26px);
  perspective: 1400px;
}

.certfan__card {
  position: relative;
  display: block;
  /* the supplied scans are only 400px wide, so the card never exceeds
     that — upscaling them would just make the type mushy */
  width: min(400px, 44vw);
  cursor: zoom-in;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  transition: transform .55s var(--ease-pop), box-shadow .45s var(--ease);
  will-change: transform;
}

.certfan__card[data-i="0"] {
  transform: rotate(-6deg) translateX(6%);
  z-index: 1;
}

.certfan__card[data-i="1"] {
  transform: rotate(5deg) translateX(-6%);
  z-index: 2;
}

@media (min-width: 681px) and (hover: hover) { .certfan:hover .certfan__card {
  transform: rotate(0deg) translateX(0) scale(.96);
} }

@media (min-width: 681px) and (hover: hover) { .certfan__card:hover {
  transform: rotate(0deg) translateX(0) scale(1.06) !important;
  z-index: 3;
  box-shadow: var(--shadow-lg), 0 0 0 4px var(--pink-100);
} }

.certfan__card img {
  width: 100%;
  height: auto;
}

.certfan__tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: rgba(15, 54, 97, .88);
  color: var(--white);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}

@media (min-width: 681px) and (hover: hover) { .certfan__card:hover .certfan__tag {
  opacity: 1;
  transform: translateY(0);
} }

.certfan__zoom {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s var(--ease), transform .34s var(--ease-pop);
}

.certfan__zoom svg {
  width: 17px;
  height: 17px;
}

@media (min-width: 681px) and (hover: hover) { .certfan__card:hover .certfan__zoom {
  opacity: 1;
  transform: scale(1);
} }

.certflags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: clamp(26px, 3.4vw, 44px);
}

.certflags__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 17px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--white);
  font-size: .87rem;
  color: var(--muted);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.certflags__item b {
  color: var(--navy);
}

.certflags__item img {
  width: 26px;
  height: auto;
}

/* the supplied Acıbadem mark is the white-on-dark variant, so this one
   chip carries a navy plate instead of disappearing into the row */
.certflags__item--brand {
  background: var(--navy);
  border-color: var(--navy);
  color: rgba(255, 255, 255, .8);
}

.certflags__item--brand img {
  width: 96px;
}

@media (min-width: 681px) and (hover: hover) { .certflags__item--brand:hover {
  border-color: var(--pink);
} }

@media (min-width: 681px) and (hover: hover) { .certflags__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
  border-color: var(--pink);
} }

/* ---------- Videos --------------------------------------------------- */
.vgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.vcard {
  display: block;
  cursor: pointer;
}

.vcard__img {
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
}

.vcard__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

@media (min-width: 681px) and (hover: hover) { .vcard:hover .vcard__img img {
  transform: scale(1.07);
} }

/* A pill, not a disc: the triangle never had a visual centre that agreed
   with a circle, so it gets a shape with a real one and a ring that
   breathes outward on hover. Centred by the grid, so hover scales in
   place instead of drifting. */
.vcard__play {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .94);
  color: var(--navy);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-md);
  transition: transform .36s var(--ease-pop), background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.vcard__play::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .5);
  opacity: 0;
  transform: scale(.9);
  transition: opacity .36s var(--ease), transform .36s var(--ease);
}

.vcard__play svg {
  width: 13px;
  height: 13px;
}

@media (min-width: 681px) and (hover: hover) { .vcard:hover .vcard__play {
  transform: scale(1.06);
  background: var(--pink);
  color: var(--white);
} }

@media (min-width: 681px) and (hover: hover) { .vcard:hover .vcard__play::after {
  opacity: 1;
  transform: scale(1);
} }

.vcard__name {
  display: block;
  margin-top: 13px;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.45;
  transition: color var(--dur) var(--ease);
}

@media (min-width: 681px) and (hover: hover) { .vcard:hover .vcard__name {
  color: var(--pink);
} }

/* ---------- Blog ----------
   Was three bare title cards. Now each one is a real preview: image, date,
   excerpt — and the image drifts up under a navy scrim on hover while the
   pink hairline sweeps the top edge. */
.bgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.bcard {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* The pink edge bar that used to wipe in here is gone: the card already
   lifts, shadows, warms its border, zooms its image and slides its arrow
   on hover, so the stripe was a fifth signal saying the same thing. */
@media (min-width: 681px) and (hover: hover) { .bcard:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-md);
  border-color: var(--pink-100);
} }

.bcard__img {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
}

.bcard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

.bcard__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(15, 54, 97, .5));
  opacity: 0;
  transition: opacity .42s var(--ease);
}

@media (min-width: 681px) and (hover: hover) { .bcard:hover .bcard__img img {
  transform: scale(1.08) translateY(-2%);
} }

@media (min-width: 681px) and (hover: hover) { .bcard:hover .bcard__img::after {
  opacity: 1;
} }

.bcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
}

.bcard__date {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pink);
}

.bcard h3 {
  margin-top: 10px;
  font-size: 1.02rem;
  line-height: 1.38;
}

.bcard p {
  margin-top: 10px;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--muted);
}

.bcard__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  color: var(--navy);
  font-size: .84rem;
  font-weight: 700;
  transition: color var(--dur) var(--ease);
}

.bcard__go svg {
  width: 13px;
  height: 13px;
  transition: transform var(--dur) var(--ease);
}

@media (min-width: 681px) and (hover: hover) { .bcard:hover .bcard__go {
  color: var(--pink);
} }

@media (min-width: 681px) and (hover: hover) { .bcard:hover .bcard__go svg {
  transform: translateX(5px);
} }

/* ---------- Press ---------------------------------------------------- */
.press {
  background: var(--surface);
}

.pgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 1fr, not auto: the headlines are different lengths, so each row sized
     itself and the wall of cards came out ragged. Every card matches the
     tallest one now. */
  grid-auto-rows: 1fr;
  gap: 14px;
}

.pcard {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.pcard__logo {
  flex: none;
  width: 104px;
  display: grid;
  place-items: center;
}

/* logos sit grey until the card is touched, so the row reads as one block */
.pcard__logo img {
  max-width: 100%;
  height: auto;
  filter: grayscale(1);
  opacity: .6;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

@media (min-width: 681px) and (hover: hover) { .pcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--pink-100);
} }

@media (min-width: 681px) and (hover: hover) { .pcard:hover .pcard__logo img {
  filter: grayscale(0);
  opacity: 1;
} }

.pcard__name {
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.45;
}

.pcard__ext {
  margin-left: auto;
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--muted);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

.pcard__ext svg {
  width: 100%;
  height: 100%;
}

@media (min-width: 681px) and (hover: hover) { .pcard:hover .pcard__ext {
  transform: translate(3px, -3px);
  color: var(--pink);
} }

/* Phones: logo 104 + arrow + gaps left the headline a 92px column at 360
   — one word a line. The logo goes above the headline instead and the
   arrow takes the top-right corner. (audit 2026-09-25) */
@media (max-width: 480px) {
  .pcard { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 20px; }
  .pcard__logo { width: 92px; place-items: center start; }
  .pcard__ext { position: absolute; top: 18px; right: 18px; margin: 0; }
}

/* ---------- FAQ ------------------------------------------------------ */
/* Two per row. main.js orders them so the questions that fit on one
   line come first and the wrapping ones settle underneath, which keeps
   the top of the block on an even baseline. */
/* Questions run straight down one column, with the man who answers them
   beside it. Two columns of questions left the reading order ambiguous —
   down the left, or across the row? — and nothing anchored the right of
   the section. */
/* align-items: START, with the aside's height set once by main.js from the
   questions column at rest. Stretch made the two columns equal — which is
   what was wanted — but it also meant opening a question grew the row and
   stretched the photo with it, so answering a question resized the picture
   next to it. Pinned to the resting height, the columns still start level
   and finish level, and the accordion now grows its own column only. */
.faqrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 30%, 400px);
  gap: clamp(30px, 4vw, 68px);
  align-items: start;
}
.faqstack { display: grid; gap: 12px; }
.faqstack .acc-item { margin-bottom: 0; }

/* a column, so the photo can take whatever height the card leaves over.
   Sticky is dropped: with the two columns the same height there is nothing
   for it to scroll within, and it would fight the stretch. */
.faqside { display: flex; flex-direction: column; }
.faqside__fig {
  margin: 0; overflow: hidden;
  flex: 1; min-height: 260px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--surface-2);
}
.faqside__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; display: block; }
/* the card butts onto the photo, so the two read as one object */
.faqside__card {
  padding: 22px;
  border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  background: var(--white); box-shadow: var(--shadow-sm);
}
.faqside__k {
  display: block; margin-bottom: 4px;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2);
}
.faqside__card strong { display: block; font-size: 1.05rem; color: var(--navy); line-height: 1.25; }
.faqside__card p { margin: 10px 0 16px; font-size: .86rem; line-height: 1.6; color: var(--muted); }

@media (max-width: 980px) {
  .faqrow { grid-template-columns: 1fr; }
  .faqside { max-width: 420px; }
  .faqside__fig { flex: none; aspect-ratio: 5 / 6; }
}

/* ---------- Team ----------------------------------------------------- */
.egrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.ecard {
  display: block;
  text-align: center;
}

.ecard__img {
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 5;
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.ecard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease), filter .5s var(--ease);
}

@media (min-width: 681px) and (hover: hover) { .ecard:hover .ecard__img {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
} }

@media (min-width: 681px) and (hover: hover) { .ecard:hover .ecard__img img {
  transform: scale(1.06);
} }

.ecard h3 {
  margin-top: 15px;
  font-size: 1rem;
  transition: color var(--dur) var(--ease);
}

@media (min-width: 681px) and (hover: hover) { .ecard:hover h3 {
  color: var(--pink);
} }

.ecard__role {
  display: block;
  margin-top: 4px;
  font-size: .84rem;
  color: var(--muted);
}

/* ---------- Closing CTA ---------------------------------------------- */
.ctaband {
  padding-bottom: var(--pad-y);
  padding-top: var(--pad-y);
}

.ctaband__inner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 22px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-xl);
  background: var(--grad-navy);
  color: var(--white);
}

/* one slow light bar keeps the panel alive without asking for attention */
.ctaband__inner::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -40%;
  width: 40%;
  height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent);
  filter: blur(22px);
  animation: ctasheen 6s linear infinite;
}

@keyframes ctasheen {
  0% {
    transform: translateX(0) rotate(10deg);
  }

  100% {
    transform: translateX(420%) rotate(10deg);
  }
}

.ctaband__inner>div {
  position: relative;
  z-index: 1;
}

.ctaband__inner h2 {
  font-size: var(--fs-h2);
  color: var(--white);
}

.ctaband__inner p {
  margin-top: 10px;
  max-width: 46ch;
  color: rgba(255, 255, 255, .68);
  font-size: .95rem;
  line-height: 1.7;
}

.ctaband__inner .btn-appt {
  position: relative;
  z-index: 1;
  height: 50px;
  /* 36px on the left, not 24. The base button reserves 30px there for the
     pink pip; this override had cut it back to 24 and the pip ended up
     sitting underneath the first letter of the label. */
  padding: 0 24px 0 36px;
  background: var(--white);
  color: var(--navy);
}

@media (min-width: 681px) and (hover: hover) { .ctaband__inner .btn-appt:hover {
  color: var(--white);
} }

/* ---------- Responsive ----------------------------------------------- */
@media (max-width: 1040px) {
  .hero {
    min-height: auto;
    padding-bottom: clamp(36px, 6vw, 64px);
  }

  .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__figure {
    justify-self: center;
    margin-top: 26px;
    max-width: 420px;
  }

  .hero__plate {
    min-height: 0;
  }

  .hero__plate img {
    height: auto;
  }

  .tgrid,
  .vgrid,
  .bgrid,
  .egrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rv {
    height: 420vh;
  }

  .rv__stage {
    grid-template-columns: 1fr;
  }

  .rv__visual {
    aspect-ratio: 16 / 10;
    max-height: 32vh;
  }

  .rv__copy {
    min-height: 260px;
  }
}

@media (max-width: 680px) {
  /* The pinned scene comes apart on a phone. Its unpinned layout was only
     ever written inside the prefers-reduced-motion block, so on a handset
     the 520/420vh scroll trap ran at full length — five screen-heights of
     scrolling through a scene laid out for a wide viewport. Below 680px it
     is simply three stacked blocks. */
  /* overflow:clip moves up to .rv, because the sticky's own clip is dropped
     here — and .rv__depth is inset -30% on each side on purpose, so with
     nothing clipping it the decoration pushed the page 61px sideways. */
  .rv { height: auto; overflow: clip; }
  .rv__sticky { position: static; height: auto; padding-block: var(--pad-y); overflow: visible; }
  .rv__step { position: static; opacity: 1; transform: none; margin-top: 18px; }
  .rv__frame { opacity: 1; transform: none; }
  .rv__visual { max-height: none; }


  .tgrid,
  .vgrid,
  .bgrid,
  .egrid,
  .pgrid {
    grid-template-columns: 1fr;
  }

  .rankbar {
    gap: 14px;
  }

  .rankbar__note {
    margin-left: 0;
    width: 100%;
  }

  .certfan {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .certfan__card,
  .certfan__card[data-i="0"],
  .certfan__card[data-i="1"] {
    width: min(300px, 78vw);
    transform: none;
  }

  @media (min-width: 681px) and (hover: hover) { .certfan:hover .certfan__card {
    transform: none;
  } }
}

@media (prefers-reduced-motion: reduce) {

  .hero__field span,
  .ctaband__inner::before,
  .wordflip>span {
    animation: none;
  }

  .wordflip>span {
    opacity: 1;
    transform: none;
  }

  .rv {
    height: auto;
  }

  .rv__sticky {
    position: static;
    height: auto;
    padding-block: var(--pad-y);
  }

  .rv__step {
    position: static;
    opacity: 1;
    transform: none;
    margin-top: 20px;
  }

  .rv__frame {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Clinic gallery (#klinik) ----------------------------------
   Five panels sharing one row. The open panel takes the bulk of the
   width and the others stay as slivers with their number showing, so
   the whole place is visible at once rather than one frame at a time.
   flex-grow does the work, so nothing is positioned by hand. */
.klinik {
  background: var(--surface);
}

.klgrid {
  display: flex;
  gap: 10px;
  height: clamp(320px, 42vw, 460px);
}

.klp {
  position: relative;
  overflow: hidden;
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--navy-900);
  cursor: pointer;
  transition: flex-grow .55s var(--ease), box-shadow .45s var(--ease);
}

.klp.is-open {
  flex-grow: 4.4;
  box-shadow: var(--shadow-md);
}

.klp img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform .8s var(--ease), filter .55s var(--ease);
  filter: saturate(.55) brightness(.72);
}

.klp.is-open img {
  transform: scale(1);
  filter: saturate(1) brightness(.9);
}

/* These photographs are mostly white corridors and daylight, so the text
   needs a real floor under it rather than a hint of one. The ramp starts
   lower and lands darker than a decorative scrim would. */
.klp__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(11, 18, 32, 0) 28%, rgba(11, 18, 32, .5) 62%, rgba(11, 18, 32, .92));
  opacity: .92;
  transition: opacity .45s var(--ease);
}

.klp.is-open .klp__veil {
  opacity: 1;
}

/* the number is what a closed sliver shows; it rotates upright as the
   panel opens so the two states share one element */
.klp__no {
  position: absolute;
  left: 0;
  right: 0;
  top: 22px;
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .8);
  text-shadow: 0 1px 10px rgba(11, 18, 32, .6);
  transition: color .4s var(--ease), opacity .4s var(--ease);
}

.klp.is-open .klp__no {
  color: var(--pink-light);
}

/* The block is anchored to the panel's bottom edge and the title is its
   LAST child, so the title always sits exactly one padding above that edge
   — whatever the description above it is doing. Previously the title came
   first and the description below it re-wrapped from three lines (open,
   683px) to eight (closed, 155px), which walked the title up and down the
   panel every time it opened or closed. */
.klp__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 26px;
  text-align: left;
  color: var(--white);
  /* light type on a photograph fattens under subpixel rendering; this
     keeps the stems the weight the face actually draws */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.klp__t {
  display: block;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -.005em;
  /* a fixed line box, because the pivot below is derived from it */
  line-height: 28px;
  white-space: nowrap;
  color: var(--white);
  text-shadow: 0 1px 14px rgba(11, 18, 32, .6);
  /* Closed panels are too narrow for a title, so it is written sideways
     and hinges flat when the panel opens.
     The pivot is half a line box in from the left and vertically centred,
     which is the one origin where a PURE rotation lands the sideways text
     exactly on the body's padding. The earlier version pivoted on the
     bottom-left corner and pulled the result back with a translateX —
     but a transform list interpolates each function on its own, so the
     translate slid sideways while the rotation swung, and the title
     drifted instead of hinging. With no translate there is nothing left
     to drift. */
  transform-origin: 14px 50%;
  transform: rotate(-90deg);
  transition: transform .5s var(--ease);
}

.klp.is-open .klp__t {
  transform: rotate(0deg);
}

.klp__d {
  /* order matters: the description renders above the title, and its width
     is fixed to the open panel rather than to the current one so it does
     not reflow between states */
  display: block;
  margin-bottom: 10px;
  width: clamp(220px, 34vw, 520px);
  max-width: 100%;
  font-size: .94rem;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 12px rgba(11, 18, 32, .55);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s var(--ease) .12s, transform .45s var(--ease) .12s;
}

.klp.is-open .klp__d {
  opacity: 1;
  transform: translateY(0);
}

/* closed panels are slivers: the description is invisible there, and
   collapsing it keeps it from reserving height it does not need */
.klp:not(.is-open) .klp__d {
  height: 0;
  margin-bottom: 0;
  overflow: hidden;
}

.klp:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
}

/* The hospital's own published figures, sat directly under the photos so
   the claim and the evidence read as one block. */
.klfacts {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  margin-top: 12px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.klfact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 18px;
  background: var(--white);
  transition: background .35s var(--ease);
}

@media (min-width: 681px) and (hover: hover) { .klfact:hover {
  background: var(--pink-50);
} }

.klfact b {
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.klfact span {
  font-size: .82rem;
  line-height: 1.35;
  color: var(--muted);
}

.klnote {
  margin-top: 14px;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .klfacts {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 860px) {

  /* stacked: every panel is readable, no sideways titles */
  .klgrid {
    flex-direction: column;
    height: auto;
  }

  .klp {
    flex: none;
    height: 180px;
  }

  .klp.is-open {
    flex: none;
    height: 300px;
  }

  .klp__t {
    transform: none;
    white-space: normal;
  }

  .klp__d {
    opacity: 1;
    transform: none;
  }

  .klp img {
    filter: saturate(.85) brightness(.82);
  }

  .klfacts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {

  .klp,
  .klp img,
  .klp__t,
  .klp__d,
  .klp__veil {
    transition: none;
  }
}

/* ---------- Welcome banner (#hosgeldiniz) ------------------------------
   One line of handwriting that writes itself out, holds, wipes, and comes
   back in the next language.

   Two things make it read as a hand rather than a wipe. The reveal edge is
   SLANTED, the way a right-leaning nib leaves ink, instead of a vertical
   guillotine; and the rate is irregular — main.js measures where the spaces
   fall in the actual string and builds a linear() easing that dwells at
   each one, so the pen pauses between words the way a hand does.

   The clip and the nib read the same registered custom property, which is
   what keeps the nib exactly on the growing edge; animating them apart
   would let them drift. */
@property --wlc-cut {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 100%;
}

.wlc {
  background: var(--white);
  /* Was 30px top and 0 bottom. Zero underneath made the gap between the
     greeting and the Tedaviler heading about half of every comparable
     junction on the page — measured at 0.46-0.49 of the certificates →
     videos gap across widths — so the banner read as glued to the section
     below it. On the site's own rhythm now, top and bottom alike. */
  padding-block: var(--pad-y);
}

.wlc .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: clamp(120px, 11vw, 168px);
  justify-content: center;
}

.wlc__line {
  --wlc-cut: 100%;
  /* how far the nib leans; also the slant of the reveal edge */
  --wlc-lean: .14em;
  position: relative;
  display: inline-block;
  max-width: 100%;
  font-family: 'Caveat', 'Aref Ruqaa', cursive;
  font-weight: 600;
  font-size: clamp(2.8rem, 1.9rem + 3.4vw, 4.6rem);
  line-height: 1.2;
  color: var(--navy);
  white-space: nowrap;
  transition: --wlc-cut var(--wlc-dur, 1.25s) var(--wlc-ease, linear);
}

/* Scoped to .js: the clip starts fully closed, so without the script that
   drives it the greeting would simply never be visible. */
/* The slanted edge leans by --wlc-lean, so at the end of the write its
   BOTTOM corner still sat one lean short of the last glyph and shaved the
   tail off. Padding the ink box by a lean on each side (and pulling it
   back with a negative margin, so nothing moves) gives the slant the room
   it needs at both ends. */
.wlc__ink {
  display: block;
  /* one lean for the slant, plus a little more: the per-glyph rotation
     below swings letters a fraction past their own boxes, and measuring
     showed the last one still overhanging the clip by about a pixel */
  padding-inline: calc(var(--wlc-lean) + .07em);
  margin-inline: calc((var(--wlc-lean) + .07em) * -1);
}

/* Each glyph is set a hair off the baseline and off square, by a fixed
   amount derived from its position, so the line has the unevenness of a
   written one instead of sitting on a ruler. Arabic is left alone: its
   letters join, and boxing them individually would break the shaping. */
.wlc__ink span {
  display: inline-block;
  transform: translateY(var(--dy, 0)) rotate(var(--rot, 0deg));
}

.js .wlc__ink {
  clip-path: polygon(-5% -25%,
      calc(100% - var(--wlc-cut) + var(--wlc-lean)) -25%,
      calc(100% - var(--wlc-cut) - var(--wlc-lean)) 125%,
      -5% 125%);
}

/* mirrored for the one right-to-left greeting */
.js .wlc__line.is-rtl .wlc__ink {
  clip-path: polygon(105% -25%,
      calc(var(--wlc-cut) - var(--wlc-lean)) -25%,
      calc(var(--wlc-cut) + var(--wlc-lean)) 125%,
      105% 125%);
}

/* The nib that used to ride under the line is gone: the slanted edge and
   the uneven rhythm already read as a hand, and a dot travelling beneath
   the words was one marker too many. */

@media (max-width: 640px) {
  .wlc__line {
    font-size: clamp(2rem, 10vw, 3rem);
  }
}

@media (prefers-reduced-motion: reduce) {

  /* no writing, no nib: main.js cross-fades the wording instead */
  .wlc__line {
    transition: opacity .3s linear;
  }

  .js .wlc__ink,
  .js .wlc__line.is-rtl .wlc__ink {
    clip-path: none;
  }
}