/* ==========================================================================
   Homepage sections
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--grad-navy);
  overflow: hidden;
  padding-top: clamp(56px, 8vw, 96px);
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 60vw; height: 60vw; max-width: 800px; max-height: 800px;
  background: radial-gradient(closest-side, rgba(229,86,145,.35), transparent 70%);
  filter: blur(10px);
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto auto -30% -10%;
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  background: radial-gradient(closest-side, rgba(255,255,255,.08), transparent 70%);
}
/* ---------- Hero aurora (living mesh-gradient background) ---------- */
/* Three large, heavily blurred colour fields drifting on independent
   slow loops over the navy base — the colours keep re-mixing where they
   overlap, so the hero background never sits still. transform/opacity
   only (no background-position or filter animation), so it stays on the
   compositor and costs nothing per frame. */
.hero__aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero__aurora span {
  position: absolute; display: block;
  border-radius: 50%;
  filter: blur(64px);
  will-change: transform, opacity;
}
/* Each field travels a long way (up to ~45% of its own size), swings
   through several waypoints rather than just out-and-back, and pulses
   its opacity — at the earlier ±16% / 2-keyframe settings the movement
   was technically running but too small to actually read as motion. */
.hero__aurora span:nth-child(1) {
  top: -24%; left: -12%;
  width: 56vw; height: 56vw; max-width: 780px; max-height: 780px;
  background: radial-gradient(circle at 35% 35%, rgba(229,86,145,.85), rgba(229,86,145,0) 70%);
  animation: hero-aurora-a 12s ease-in-out infinite;
}
.hero__aurora span:nth-child(2) {
  top: 4%; right: -16%;
  width: 48vw; height: 48vw; max-width: 680px; max-height: 680px;
  background: radial-gradient(circle at 60% 40%, rgba(90,150,255,.6), rgba(90,150,255,0) 70%);
  animation: hero-aurora-b 15s ease-in-out infinite;
}
.hero__aurora span:nth-child(3) {
  bottom: -30%; left: 26%;
  width: 52vw; height: 52vw; max-width: 720px; max-height: 720px;
  background: radial-gradient(circle at 45% 55%, rgba(255,143,184,.55), rgba(255,143,184,0) 72%);
  animation: hero-aurora-c 18s ease-in-out infinite;
}
.hero__aurora span:nth-child(4) {
  top: 26%; left: 34%;
  width: 40vw; height: 40vw; max-width: 560px; max-height: 560px;
  background: radial-gradient(circle at 50% 50%, rgba(140,90,220,.5), rgba(140,90,220,0) 70%);
  animation: hero-aurora-d 21s ease-in-out infinite;
}
@keyframes hero-aurora-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .9; }
  33% { transform: translate3d(38%, 18%, 0) scale(1.35); opacity: 1; }
  66% { transform: translate3d(14%, 40%, 0) scale(.82); opacity: .65; }
}
@keyframes hero-aurora-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.1); opacity: .75; }
  30% { transform: translate3d(-42%, 26%, 0) scale(.78); opacity: 1; }
  70% { transform: translate3d(-16%, -22%, 0) scale(1.3); opacity: .8; }
}
@keyframes hero-aurora-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.95); opacity: .7; }
  40% { transform: translate3d(-34%, -38%, 0) scale(1.4); opacity: 1; }
  75% { transform: translate3d(24%, -14%, 0) scale(1.05); opacity: .8; }
}
@keyframes hero-aurora-d {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.15); opacity: .55; }
  35% { transform: translate3d(30%, -30%, 0) scale(.85); opacity: .95; }
  70% { transform: translate3d(-28%, 22%, 0) scale(1.3); opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__aurora span { animation: none; }
}
/* Silk shader (hero-ipek.js, 2026-10-16). The canvas is drawn at reduced
   resolution and stretched; once it is running the CSS blobs and the two
   radial washes step aside, since the shader carries its own light. */
.hero__ipek { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; animation: hero-ipek-in 1.2s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes hero-ipek-in { to { opacity: 1; } }
.hero.has-ipek .hero__aurora span { display: none; }
.hero.has-ipek::before, .hero.has-ipek::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hero__ipek { animation: none; opacity: 1; } }
.hero__inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: clamp(24px, 4vw, 48px);
}
.hero__eyebrow { color: #ffb7d3; }
.hero__eyebrow::before { background: #ffb7d3; }
.hero h1 { color: var(--white); font-size: var(--fs-hero); margin: 18px 0 20px; }
.hero h1 .hl { color: var(--pink); position: relative; white-space: nowrap; }
.hero__lead { color: rgba(255,255,255,.72); font-size: var(--fs-lead); max-width: 540px; margin-bottom: 32px; }
/* The 2 CTAs above and the single doctor-link pill below are both
   stretched to the column's full width, so their combined/total widths
   always match exactly regardless of button label length. */
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.hero__actions .btn { flex: 1 1 0; }
/* Two half-width buttons don't hold "Doktorunuza Sorun" + its icon under
   ~440px — the label was clipped at 360. Stacked, they stay equal. */
@media (max-width: 440px) { .hero__actions .btn { flex-basis: 100%; } }
/* Hero button hover: a light band sweeps diagonally across the button
   while it lifts, and the arrow pushes forward. Scoped to .hero so it
   can own `overflow: hidden` without affecting the .btn-snake CTAs,
   which need the overflow visible for their thread. */
.hero__actions .btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hero__actions .btn::after {
  content: "";
  position: absolute; top: -70%; left: -90%;
  width: 42%; height: 240%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(0) rotate(14deg);
  opacity: 0;
  pointer-events: none;
  transition: transform .8s var(--ease), opacity .15s linear .1s;
}
@media (min-width: 681px) and (hover: hover) { .hero__actions .btn:hover::after { transform: translateX(460%) rotate(14deg); opacity: 1; transition: transform .8s var(--ease), opacity .12s linear; } }
@media (min-width: 681px) and (hover: hover) { .hero__actions .btn:hover { transform: translateY(-3px); } }
.hero__actions .btn svg { transition: transform var(--dur) var(--ease); }
@media (min-width: 681px) and (hover: hover) { .hero__actions .btn-primary:hover svg { transform: translateX(5px); } }
@media (min-width: 681px) and (hover: hover) { .hero__actions .btn-ghost-white:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.6); } }
@media (min-width: 681px) and (hover: hover) { .hero__actions .btn-ghost-white:hover svg { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .hero__actions .btn, .hero__actions .btn::after, .hero__actions .btn svg { transition: none; }
}
.hero__doctorlink {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 12px 18px 12px 12px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.85);
  font-size: .88rem; font-weight: 500;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .hero__doctorlink:hover { background: rgba(255,255,255,.14); transform: translateX(4px); } }
.hero__doctorlink .av { width: 32px; height: 32px; border-radius: 50%; background: var(--pink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hero__doctorlink b { color: var(--white); }
/* the trailing arrow rides the far edge; the avatar glyph stays centred in its disc (2026-10-22) */
.hero__doctorlink > svg { margin-inline-start: auto; flex-shrink: 0; }

.hero__media { position: relative; }
.hero__media-glow {
  position: absolute; inset: 6%;
  background: radial-gradient(closest-side, rgba(229,86,145,.4), transparent 72%);
  filter: blur(30px);
}
.hero__media img {
  position: relative; z-index: 1;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.hero__trustbar {
  position: relative; z-index: 2;
  padding-block: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.trust-item { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.75); font-size: .86rem; font-weight: 500; }
.trust-item strong { color: var(--white); font-size: 1.05rem; }
.trust-item svg { color: var(--pink); flex-shrink: 0; }
/* Each trust-item is its own .reveal target, staggered left-to-right,
   so the trustbar builds itself in one item at a time instead of
   appearing as a single block. */
.trust-item.reveal { transition-delay: 0s; }
.hero__trustbar .trust-item:nth-child(1) { transition-delay: 0s; }
.hero__trustbar .trust-item:nth-child(2) { transition-delay: .1s; }
.hero__trustbar .trust-item:nth-child(3) { transition-delay: .2s; }
.hero__trustbar .trust-item:nth-child(4) { transition-delay: .3s; }

@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__lead { margin-inline: auto; }
  .hero__actions, .hero__trustbar { justify-content: center; }
  .hero__doctorlink { margin-inline: auto; }
}

/* ---------- Treatment picker ---------- */
/* Each card is a 3D flip container: the front is the normal card, the
   back (pre-rotated 180°) carries the OTHER card's page image + title.
   Hovering one card floods it with the goo-blob wave (same technique as
   the .btn-snake buttons) and flips its sibling over to preview where
   the hovered card leads — see the .picker handler in main.js, which
   toggles .is-flipped on the sibling. */
.picker { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: clamp(16px, 3vw, 28px); }
/* Sized with nested single-cell grids rather than a height:100% chain:
   percentage heights here would resolve against a height that is itself
   content-derived, which collapsed the card. Grid's stretch alignment
   equalises the two cards without that circular dependency. */
.picker-card {
  position: relative;
  display: grid;
  border-radius: var(--r-xl);
}
.picker-card__inner {
  position: relative;
  display: grid;
  border-radius: var(--r-xl);
  transition: transform .85s var(--ease), box-shadow var(--dur-slow) var(--ease);
}
/* The 3D context (perspective / preserve-3d / backface-visibility) is
   switched on only while the pair is being interacted with — see the
   .is-live toggle in main.js. Leaving it on permanently promotes the
   card to its own composited layer, and the resampled layer makes the
   resting text look soft, as if a filter sat over it. At rest the card
   is a plain flat box again and the text renders crisply; the back face
   is held invisible with opacity instead of backface-visibility. */
.picker.is-live .picker-card { perspective: 1600px; }
.picker.is-live .picker-card__inner { transform-style: preserve-3d; }
.picker.is-live .picker-card__face {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* The lift lives on the inner, not the card itself — the card's own
   transform is already owned by the [data-reveal-center] entrance
   rules further down, which would otherwise cancel it out. */
@media (min-width: 681px) and (hover: hover) { .picker-card:hover .picker-card__inner { box-shadow: var(--shadow-lg); } }
.picker-card.is-flipped .picker-card__inner { transform: rotateY(180deg); }
.picker-card__face {
  border-radius: var(--r-xl);
  overflow: hidden;
}
.picker-card__face--front {
  position: relative;
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(28px, 3vw, 40px);
  transition: border-color var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .picker-card:hover .picker-card__face--front { border-color: transparent; } }
.picker-card__face--back {
  position: absolute; inset: 0;
  transform: rotateY(180deg);
  background: var(--navy);
  opacity: 0;
}
.picker.is-live .picker-card__face--back { opacity: 1; }
.picker-card__face--back img { width: 100%; height: 100%; object-fit: cover; display: block; }
.picker-card__back-body {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(22px, 3vw, 34px);
  background: linear-gradient(to top, rgba(11,18,32,.94) 15%, rgba(11,18,32,.6) 55%, transparent);
  color: var(--white);
}
.picker-card__back-body .eyebrow { color: #ffb7d3; margin-bottom: 10px; }
.picker-card__back-body .eyebrow::before { background: #ffb7d3; }
.picker-card__back-body b {
  display: block;
  font-size: clamp(1.15rem, .95rem + .7vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
}
/* Goo-blob wave that floods the front face on hover, same filter trick
   as the buttons (feGaussianBlur + feColorMatrix, #picker-goo) but
   tuned larger for a card-sized surface. */
/* Own clip layer for the wave. `overflow: hidden` alone is NOT enough
   here: the blobs carry an SVG filter, and a filtered element's painted
   output escapes an ancestor's overflow clip (verified in-browser —
   the blobs spilled out below the card until this was added). clip-path
   clips the final painted result of the subtree, filter included. */
.picker-card__clip {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
  clip-path: inset(0 round var(--r-xl));
  z-index: 0;
  pointer-events: none;
}
.picker-card__blobs {
  position: absolute; inset: -16% -10%;
  filter: url(#picker-goo);
  pointer-events: none;
}
.picker-card__blob {
  position: absolute; bottom: -25%;
  width: 36%; height: 100%;
  background: var(--pink); border-radius: 50%;
  transform: translateY(88%) scale(1.5);
  transition: transform .7s var(--ease);
}
.picker-card__blob:nth-child(1) { left: -8%; }
.picker-card__blob:nth-child(2) { left: 19%; transition-delay: .08s; }
.picker-card__blob:nth-child(3) { left: 46%; transition-delay: .16s; }
.picker-card__blob:nth-child(4) { left: 73%; transition-delay: .24s; }
@media (min-width: 681px) and (hover: hover) { .picker-card:hover .picker-card__blob { transform: translateY(0) scale(1.5); } }
/* Everything on the front face sits above the wave, and re-colours to
   white as it floods past (delayed to land with the wave, not before). */
.picker-card__no, .picker-card__icon, .picker-card__face--front h3,
.picker-card__face--front p, .picker-card .go { position: relative; z-index: 2; }
.picker-card__no {
  position: absolute; top: 24px; right: 28px; z-index: 2;
  font-size: 2.4rem; font-weight: 700; color: var(--surface-2); line-height: 1;
  transition: color .3s var(--ease) .35s;
}
.picker-card__icon {
  width: 68px; height: 68px; border-radius: var(--r-md);
  background: var(--pink-50); display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  transition: background .3s var(--ease) .1s;
}
.picker-card__icon img { width: 34px; height: 34px; }
.picker-card h3 { margin-bottom: 10px; transition: color .3s var(--ease) .18s; }
.picker-card p { margin-bottom: 22px; transition: color .3s var(--ease) .26s; }
.picker-card .go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .82rem; letter-spacing: .06em; color: var(--pink); text-transform: uppercase; transition: color .3s var(--ease) .34s; }
.picker-card .go svg { transition: transform var(--dur) var(--ease); }
@media (min-width: 681px) and (hover: hover) { .picker-card:hover .go svg { transform: translateX(5px); } }
@media (min-width: 681px) and (hover: hover) { .picker-card:hover .picker-card__face--front h3 { color: var(--white); } }
@media (min-width: 681px) and (hover: hover) { .picker-card:hover .picker-card__face--front p { color: rgba(255,255,255,.95); } }
@media (min-width: 681px) and (hover: hover) { .picker-card:hover .go { color: var(--white); } }
@media (min-width: 681px) and (hover: hover) { .picker-card:hover .picker-card__icon { background: rgba(255,255,255,.2); } }
@media (min-width: 681px) and (hover: hover) { .picker-card:hover .picker-card__no { color: rgba(255,255,255,.32); } }
@media (prefers-reduced-motion: reduce) {
  .picker-card__inner, .picker-card__blob { transition: none; }
}
.picker-or {
  align-self: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: var(--muted-2); letter-spacing: .06em;
}
@media (max-width: 780px) {
  .picker { grid-template-columns: 1fr; }
  .picker-or { justify-self: center; margin: -4px 0; }
  /* a shorter run-in, so the gesture still reads but nothing needs 90px of
     room it does not have */
  .picker[data-reveal-center] .picker-card:first-of-type { transform: translateX(-26px); }
  .picker[data-reveal-center] .picker-card:last-of-type { transform: translateX(26px); }
}
/* The entrance below parks the right-hand card 90px to the RIGHT of its
   place until it is scrolled into view, and on a phone that is 70px of
   horizontal page scroll for anyone who lands above the section. Clipping
   the picker contains the offset; the clip margin keeps the hover shadow
   from being cut off with it. */
/* overflow:hidden, not clip — measured: `clip` still left 20px of page
   scroll here (something inside, most likely the filtered blob layer, keeps
   contributing to the ancestor's overflow), while `hidden` contains it. The
   vertical padding with a matching negative margin gives the hover shadow
   room inside the clip without moving the section or widening it. */
.picker {
  overflow: hidden;
  padding-block: 26px;
  margin-block: -26px;
}

/* The two picker cards fly in from opposite edges (left card from the
   left, right card from the right) once the section crosses the
   viewport's vertical center — see the [data-reveal-center] observer in
   main.js, which adds .in the same way the generic .reveal observer
   does, just on a different trigger condition. The "VEYA" badge shares
   that same .in toggle but with a longer delay, so it only appears once
   both cards have already landed in place. */
.picker[data-reveal-center] .picker-card:first-of-type { transform: translateX(-90px); opacity: 0; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.picker[data-reveal-center] .picker-card:last-of-type { transform: translateX(90px); opacity: 0; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.picker[data-reveal-center] .picker-or { opacity: 0; transform: scale(.6); transition: opacity .5s var(--ease) .55s, transform .5s var(--ease) .55s; }
.picker[data-reveal-center].in .picker-card { transform: translateX(0); opacity: 1; }
.picker[data-reveal-center].in .picker-or { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .picker[data-reveal-center] .picker-card, .picker[data-reveal-center] .picker-or { transform: none; transition: none; }
}

/* ---------- Type cards grid ---------- */
.type-card {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 30px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
/* Spotlight hover: a radial glow that follows the cursor, position set
   via --spot-x/--spot-y custom properties from main.js on mousemove. */
.type-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
  background: radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(229, 86, 145, .22), transparent 70%);
  pointer-events: none;
}
.type-card:focus-within::before { opacity: 1; }
@media (min-width: 681px) and (hover: hover) { .type-card:hover::before { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .type-card::before { transition: none; } }
.type-card__icon {
  position: relative;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .type-card:hover .type-card__icon { background: var(--pink); color: var(--white); transform: scale(1.08) rotate(-6deg); } }
/* Miyom türleri cards use a real round photo instead of an abstract SVG
   icon — the circle keeps its navy ring, but the hover scale/rotate skips
   the color swap (there's no icon glyph to recolor), and the img itself
   is upscaled 4x from its 70x70 source so it stays sharp inside the ring. */
.type-card__icon--photo { background: var(--navy); overflow: hidden; padding: 0; perspective: 600px; }
/* Scoped to the DIRECT child photo only (`>`), not the descendant
   selector it was before — that also matched the icon <img> nested
   inside .arrow below, so the reveal icon was getting the exact same
   rotateY(180deg) + backface-visibility:hidden treatment as the photo
   and hiding itself at the same moment it was supposed to appear. */
.type-card__icon--photo > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; backface-visibility: hidden; transition: transform .6s var(--ease); }
@media (min-width: 681px) and (hover: hover) { .type-card:hover .type-card__icon--photo { background: rgb(255 255 255); transform: scale(1.08); } }
@media (min-width: 681px) and (hover: hover) { .type-card:hover .type-card__icon--photo > img { transform: rotateY(180deg); } }
/* The photo flips away on hover to reveal this icon instead — no
   background disc behind it (kept transparent per the icon's own PNG
   alpha channel), sized to fill the circle rather than float in it. */
.type-card__icon--photo .arrow {
  position: absolute; inset: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.5) rotate(-45deg);
  transition: opacity .3s var(--ease) .15s, transform .3s var(--ease-pop) .15s;
}
.type-card__icon--photo .arrow img { width: 80%; height: 80%; object-fit: contain; }
@media (min-width: 681px) and (hover: hover) { .type-card:hover .type-card__icon--photo .arrow { opacity: 1; transform: scale(1) rotate(0deg); } }
@media (prefers-reduced-motion: reduce) {
  .type-card__icon--photo > img, .type-card__icon--photo .arrow { transition: none; }
}
.type-card h3 { font-size: 1.02rem; margin-bottom: 6px; }
/* Scoped to the trailing "İncele" span only — a bare ".type-card span"
   selector also matched .type-card__icon (it's a <span> too) and beat
   its color:white via higher specificity, turning the icon pink-on-pink
   (invisible) on hover. */
.type-card > span:last-child { font-size: .82rem; color: var(--pink); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }


/* ---------- Testimonials ---------- */
/* The bundled swiper CSS doesn't reliably stretch slides to an equal
   height on its own — force it explicitly so every card matches the
   tallest testimonial in view, regardless of quote length. */
.swiper-testi .swiper-wrapper { align-items: stretch; }
.swiper-testi .swiper-slide { height: auto; }
/* A clearer "rises up from below into place" entrance than the default
   .reveal's subtle 24px nudge — scoped to this swiper specifically. */
.swiper-testi.reveal { transform: translateY(64px); }
.swiper-testi.reveal.in { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .swiper-testi.reveal { transform: none; }
}
.testi-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  height: 100%;
  display: flex; flex-direction: column;
}
.testi-card .quote-ico { color: var(--pink-100); margin-bottom: 12px; }
.testi-card p { color: var(--ink); flex: 1; }
.testi-card .who { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.testi-card .av {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--white); color: var(--pink);
  border: 1.5px solid var(--pink-100);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
  flex-shrink: 0;
}
.testi-card .who b { display: block; color: var(--navy); font-size: .92rem; }
.testi-card .who span { font-size: .78rem; color: var(--muted-2); }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
/* Scoped to #yorumlar only — align the Google rating chip with the
   "5.000'den Fazla Mutlu Hasta" heading line rather than the bottom
   of the eyebrow+heading block. */
#yorumlar .section-head-row { align-items: center; }
.google-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-pill); background: var(--surface); font-weight: 700; font-size: .88rem; }
.google-chip .stars { color: #f5b301; display: flex; gap: 2px; }

/* ---------- Video / press cards ---------- */
.media-card { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/10; }
.media-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
@media (min-width: 681px) and (hover: hover) { .media-card:hover img { transform: scale(1.08); } }
.media-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,26,69,.85), rgba(0,26,69,.1) 55%); }
.media-card__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.5);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  color: var(--white); z-index: 2;
  transition: transform var(--dur) var(--ease-pop), background var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .media-card:hover .media-card__play { background: var(--pink); transform: translate(-50%,-50%) scale(1.12); } }
.media-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px; color: var(--white); }
.media-card__body b { display: block; font-size: .95rem; line-height: 1.35; }

/* ---------- Blog cards ---------- */
.blog-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); height: 100%; }
.blog-card__img { aspect-ratio: 4/3; overflow: hidden; }
.blog-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
@media (min-width: 681px) and (hover: hover) { .blog-card:hover .blog-card__img img { transform: scale(1.07); } }
.blog-card__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card__body h3 { font-size: 1.05rem; line-height: 1.4; }
.blog-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .82rem; color: var(--pink); }

/* ---------- Swiper nav (shared) ---------- */
/* Defensive: the bundled swiper CSS targets an older `.swiper-container`
   class name that our markup doesn't use, so the carousel root needs its
   own clip explicitly rather than relying only on the document-level
   overflow-x guard. */
.swiper { overflow: hidden; position: relative; }
.carousel-nav { display: flex; align-items: center; gap: 10px; }
.carousel-nav button {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .carousel-nav button:hover { background: var(--pink); border-color: var(--pink); color: var(--white); } }
.carousel-nav button.swiper-button-disabled { opacity: .35; pointer-events: none; }

/* ---------- FAQ teaser ---------- */
/* .faq-grid.faq-teaser (2 classes) beats the plain .faq-grid rule in
   pages.css, which loads after this file and would otherwise win the
   1-vs-1 specificity tie and silently keep this at 2 columns. */
.faq-grid.faq-teaser { max-width: none; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .faq-grid.faq-teaser { grid-template-columns: 1fr 1fr; } }
@media (max-width: 780px) { .faq-grid.faq-teaser { grid-template-columns: 1fr; } }
/* Each FAQ question comes in one at a time instead of the whole 3x3
   grid fading in as a single block. */
.faq-teaser .acc-item.reveal { transition-delay: 0s; }
.faq-teaser .acc-item:nth-child(1) { transition-delay: 0s; }
.faq-teaser .acc-item:nth-child(2) { transition-delay: .05s; }
.faq-teaser .acc-item:nth-child(3) { transition-delay: .1s; }
.faq-teaser .acc-item:nth-child(4) { transition-delay: .15s; }
.faq-teaser .acc-item:nth-child(5) { transition-delay: .2s; }
.faq-teaser .acc-item:nth-child(6) { transition-delay: .25s; }
.faq-teaser .acc-item:nth-child(7) { transition-delay: .3s; }
.faq-teaser .acc-item:nth-child(8) { transition-delay: .35s; }
.faq-teaser .acc-item:nth-child(9) { transition-delay: .4s; }

/* ---------- Final CTA banner ---------- */
.cta-banner {
  position: relative;
  background: var(--grad-pink);
  border-radius: var(--r-xl);
  padding: clamp(36px, 5vw, 64px);
  overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cta-banner::after {
  content: "";
  position: absolute; right: -8%; top: -30%;
  width: 40%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255,255,255,.25), transparent 70%);
}
.cta-banner h2 { color: var(--white); margin-bottom: 8px; }
.cta-banner p { color: rgba(255,255,255,.85); }
.cta-banner .btn-navy { position: relative; z-index: 2; }

/* ---------- Interactive self-check widget (Miyom Risk Değerlendirmesi) ---------- */
.quiz-section { background: var(--surface); padding-top: 0; }
.quiz-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 52px);
  box-shadow: var(--shadow-lg);
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.quiz-card__intro { max-width: 560px; margin: 0 auto clamp(26px, 3vw, 38px); }
.quiz-card__intro p { color: var(--muted); margin-top: 10px; line-height: 1.7; }
.quiz-progress { height: 8px; border-radius: var(--r-pill); background: var(--surface); overflow: hidden; margin-bottom: clamp(26px, 3vw, 36px); }
.quiz-progress__bar { height: 100%; width: 0%; background: var(--grad-pink); border-radius: var(--r-pill); transition: width .4s var(--ease); }
.quiz-step__q { font-size: 1.15rem; font-weight: 700; color: var(--navy); max-width: 560px; margin: 0 auto 28px; line-height: 1.5; }
.quiz-step__actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.quiz-btn {
  min-width: 140px;
  padding: 14px 30px;
  border-radius: var(--r-pill);
  border: 2px solid var(--line);
  font-weight: 700;
  font-size: .95rem;
  color: var(--navy);
  background: var(--white);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.quiz-btn:focus-visible { border-color: var(--pink); color: var(--pink); transform: translateY(-2px); }
@media (min-width: 681px) and (hover: hover) { .quiz-btn:hover { border-color: var(--pink); color: var(--pink); transform: translateY(-2px); } }
.quiz-btn[data-answer="yes"]:focus-visible { background: var(--pink); color: var(--white); border-color: var(--pink); }
@media (min-width: 681px) and (hover: hover) { .quiz-btn[data-answer="yes"]:hover { background: var(--pink); color: var(--white); border-color: var(--pink); } }
.quiz-step__count { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px; }
.quiz-result__icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pink-50); color: var(--pink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.quiz-result.is-high .quiz-result__icon { background: var(--grad-pink); color: var(--white); }
.quiz-result h3 { color: var(--navy); font-size: 1.3rem; margin-bottom: 10px; }
.quiz-result p { color: var(--muted); max-width: 500px; margin: 0 auto 26px; line-height: 1.75; }
.quiz-result__actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.quiz-disclaimer { display: block; margin-top: 22px; font-size: .76rem; color: var(--muted-2); max-width: 520px; margin-inline: auto; }

/* ---------- Miyom Türleri + Risk Testi, merged side-by-side ---------- */
/* #turler and #risktesti used to be two stacked full-width sections;
   now they share one row, equal height via align-items:stretch, with
   the quiz-card's own centered max-width neutralized so it fills its
   column instead of floating narrow in the middle of it. */
.tt-merge { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 3vw, 40px); align-items: stretch; }
.tt-merge > * { display: flex; flex-direction: column; justify-content: flex-end; }
.tt-merge .quiz-card { max-width: none; margin: 0; }
.tt-merge .grid--3 { grid-template-columns: repeat(2, 1fr); flex: 1; }
/* The 6 type-cards settle in one row at a time, top to bottom, instead
   of the whole grid fading in as a single block — each card is its own
   .reveal target with an overshoot "drop into place" easing. */
.tt-merge .type-card.reveal { transform: translateY(34px) scale(.94); transition: opacity .55s var(--ease-pop), transform .55s var(--ease-pop); }
.tt-merge .type-card.reveal.in { transform: translateY(0) scale(1); }
.tt-merge .type-card:nth-child(1) { transition-delay: 0s; }
.tt-merge .type-card:nth-child(2) { transition-delay: .08s; }
.tt-merge .type-card:nth-child(3) { transition-delay: .16s; }
.tt-merge .type-card:nth-child(4) { transition-delay: .24s; }
.tt-merge .type-card:nth-child(5) { transition-delay: .32s; }
.tt-merge .type-card:nth-child(6) { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
  .tt-merge .type-card.reveal { transform: none; transition-delay: 0s; }
}
@media (max-width: 980px) {
  .tt-merge { grid-template-columns: 1fr; }
}

/* ---------- Stats Bento (ported from the 21st.dev "Stats Bento" React
   component — same bento-grid shape, rebuilt in plain CSS grid against
   this site's own tokens instead of Tailwind's). Sits in its own
   quiz-card-styled shell (a "copy" of the #risktesti card treatment)
   directly under the merged Türler/Risk Testi row. ---------- */
.stats-bento-shell { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow-lg); overflow: hidden; }
/* 12 columns (not 6) so the two half-width badge rows (e + f) can sit
   side by side at exactly half each — 6 columns only allows whole
   thirds, which can't split a 3-column row into two equal halves. */
.stats-bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(4, auto); gap: 16px; }
.stats-bento__primary {
  grid-column: span 6; grid-row: span 3;
  background: var(--grad-navy); border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
/* A real moving element (not a background-position trick, which turned
   out not to render reliably) — a soft diagonal light bar translated
   straight across the panel on an infinite loop. transform-based, so
   it's guaranteed to actually animate. */
.stats-bento__sheen {
  position: absolute; top: -60%; left: -70%;
  width: 55%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  filter: blur(18px);
  transform: translateX(0) rotate(10deg);
  animation: bento-sheen-move 4.5s linear infinite;
  pointer-events: none; z-index: 1;
}
@keyframes bento-sheen-move {
  0% { transform: translateX(0) rotate(10deg); }
  100% { transform: translateX(340%) rotate(10deg); }
}
/* Continuous ambient motion behind "Klinik Sonuçlar" — two glows drift
   on independent slow loops, never resting, unlike everything else on
   the page which only animates once on scroll-reveal. */
.stats-bento__primary::before, .stats-bento__primary::after {
  content: ""; position: absolute; border-radius: 50%;
  animation: bento-drift 14s ease-in-out infinite;
}
.stats-bento__primary::before {
  inset: -20% -10% auto auto;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(229,86,145,.38), transparent 70%);
}
.stats-bento__primary::after {
  inset: auto auto -25% -15%;
  width: 50%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255,255,255,.1), transparent 70%);
  animation-duration: 18s;
  animation-direction: reverse;
}
@keyframes bento-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-6%, 6%) scale(1.15); }
}
.stats-bento__primary .eyebrow { position: relative; z-index: 2; color: rgba(255,255,255,.6); }
.stats-bento__primary .eyebrow::before { background: rgba(255,255,255,.6); }
.stats-bento__primary h3 { position: relative; z-index: 2; font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); color: var(--white); margin-top: 18px; }
.stats-bento__primary p { position: relative; z-index: 2; color: rgba(255,255,255,.65); font-size: .88rem; max-width: 30ch; }
/* The da Vinci badge from the Hakkımda hero, sitting alone on the right.
   Absolutely placed so the panel keeps its existing column rhythm; the
   content gets matching right padding so the copy never runs under it.
   Deliberately no plate behind it — the artwork's own transparency is
   what should read against the navy. */
.stats-bento__rozet {
  position: absolute; z-index: 2;
  right: clamp(12px, 1.8vw, 26px); top: 50%;
  transform: translateY(-50%);
  width: clamp(140px, 17vw, 260px); height: auto;
  background: none; border-radius: 0; box-shadow: none;
  pointer-events: none;
}
.stats-bento__primary > div { padding-right: clamp(146px, 18vw, 272px); }
@media (max-width: 700px) {
  /* In the flow, under the copy: pinned bottom-right it sat on top of the
     paragraph on a phone (seen at 360). */
  .stats-bento__rozet { position: relative; width: 112px; right: auto; top: auto; transform: none; align-self: flex-end; margin-top: 8px; }
  .stats-bento__primary > div { padding-right: 0; }
}
.stats-bento__b { grid-column: span 6; grid-row: 1; background: var(--surface); border-radius: var(--r-lg); padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; }
.stats-bento__b .num { font-size: 1.7rem; font-weight: 700; color: var(--navy); }
.stats-bento__b .label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-2); font-weight: 700; margin-top: 2px; }
.stats-bento__bars { display: flex; gap: 5px; align-items: flex-end; height: 34px; }
.stats-bento__bars span { width: 6px; background: var(--pink); border-radius: 3px; }
.stats-bento__c { grid-column: span 2; grid-row: 2; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.stats-bento__c .num { font-size: 1.4rem; font-weight: 700; color: var(--navy); }
.stats-bento__c .label { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-2); font-weight: 700; }
.stats-bento__d { grid-column: span 4; grid-row: 2; background: var(--surface); border-radius: var(--r-lg); padding: 18px 20px; display: flex; align-items: center; gap: 14px; }
.stats-bento__d .ic { width: 40px; height: 40px; border-radius: 50%; background: var(--white); color: var(--pink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.stats-bento__d .ic svg { width: 20px; height: 20px; }
.stats-bento__d b { display: block; color: var(--navy); font-size: .92rem; line-height: 1; }
.stats-bento__d span { font-size: .72rem; color: var(--muted); font-weight: 600; }
.stats-bento__e { grid-column: span 3; grid-row: 3; background: var(--pink-50); border-radius: var(--r-lg); padding: 18px 14px; display: flex; align-items: center; gap: 12px; }
.stats-bento__e .ic { width: 40px; height: 40px; border-radius: 50%; background: var(--white); color: var(--pink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.stats-bento__e .ic svg { width: 20px; height: 20px; }
.stats-bento__e b { display: block; color: var(--navy); font-size: .92rem; line-height: 1; }
.stats-bento__e span { font-size: .72rem; color: var(--muted); font-weight: 600; }
/* e + f now sit side by side in the same row (each half of the right
   column) instead of stacked full-width rows. */
.stats-bento__f { grid-column: span 3; grid-row: 3; background: var(--surface); border-radius: var(--r-lg); padding: 18px 14px; display: flex; align-items: center; gap: 12px; }
.stats-bento__f .ic { width: 40px; height: 40px; border-radius: 50%; background: var(--white); color: var(--pink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.stats-bento__f .ic svg { width: 20px; height: 20px; }
.stats-bento__f b { display: block; color: var(--navy); font-size: .92rem; line-height: 1; }
.stats-bento__f span { font-size: .72rem; color: var(--muted); font-weight: 600; }
/* Same lift+shadow hover language as .picker-card / .hakkimda-kimlik-
   item elsewhere on the site, applied to the five smaller bento cells
   (not __primary, which already has its own always-on motion). */
.stats-bento__b, .stats-bento__c, .stats-bento__d, .stats-bento__e, .stats-bento__f {
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .stats-bento__b:hover, .stats-bento__c:hover, .stats-bento__d:hover, .stats-bento__e:hover, .stats-bento__f:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
} }
@media (prefers-reduced-motion: reduce) {
  .stats-bento__b, .stats-bento__c, .stats-bento__d, .stats-bento__e, .stats-bento__f { transition: none; }
}
/* Fresh "assemble in" entrance — each cell flies in from its own corner
   with a slight overshoot, staggered, instead of the single shared fade
   used everywhere else on the page. */
.stats-bento-shell.reveal { opacity: 1; transform: none; }
.stats-bento-shell.reveal .stats-bento > * {
  opacity: 0;
  transition: opacity .6s var(--ease-pop), transform .6s var(--ease-pop);
}
.stats-bento-shell.reveal .stats-bento__primary { transform: translate(-36px, -24px) scale(.92); }
.stats-bento-shell.reveal .stats-bento__b { transform: translate(28px, -24px) scale(.9); transition-delay: .1s; }
.stats-bento-shell.reveal .stats-bento__c { transform: translate(24px, 18px) scale(.85); transition-delay: .2s; }
.stats-bento-shell.reveal .stats-bento__d { transform: translate(32px, 18px) scale(.9); transition-delay: .3s; }
.stats-bento-shell.reveal .stats-bento__e { transform: translate(0, 30px) scale(.92); transition-delay: .4s; }
.stats-bento-shell.reveal .stats-bento__f { transform: translate(0, 30px) scale(.92); transition-delay: .48s; }
.stats-bento-shell.reveal.in .stats-bento > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .stats-bento__sheen { animation: none; display: none; }
  .stats-bento__primary::before, .stats-bento__primary::after { animation: none; }
  .stats-bento-shell.reveal .stats-bento > * { transform: none; transition: opacity .3s linear; }
}
@media (max-width: 780px) {
  .stats-bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .stats-bento__primary { grid-column: span 2; grid-row: auto; }
  .stats-bento__b, .stats-bento__d, .stats-bento__e, .stats-bento__f { grid-column: span 2; grid-row: auto; }
  /* the Google score was the only one-column tile in a two-column grid and
     sat alone with the right half of its row empty; it spans the row like
     the others now, number and label side by side (2026-09-28) */
  .stats-bento__c {
    grid-column: span 2; grid-row: auto;
    flex-direction: row; justify-content: space-between; gap: 12px;
    padding: 20px 24px; text-align: left;
  }
  .stats-bento__c .num { font-size: 1.7rem; }
}
/* Tablets: the twelve-column desktop bento squeezed the Google score and
   the credential tiles into slivers beside a narrow dark card. Two columns
   here — the dark card across the top, then the tiles in pairs. */
@media (min-width: 781px) and (max-width: 1040px) {
  .stats-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .stats-bento__primary { grid-column: 1 / -1; grid-row: auto; }
  .stats-bento__b, .stats-bento__c, .stats-bento__e, .stats-bento__f { grid-column: span 1; grid-row: auto; }
  .stats-bento__d { grid-column: 1 / -1; grid-row: auto; }
  .stats-bento__c { flex-direction: row; justify-content: space-between; gap: 12px; padding: 20px 24px; }
  .stats-bento__c .num { font-size: 1.7rem; }
}

/* Association memberships (2026-10-16): a full-width fourth row under the
   bento — micro-caps heading, then the two societies as linked logo badges
   (Endometriozis ve Adenomyozis Derneği, UKSEAD). Same lift-on-hover as
   the other cells; on tablet/phone it simply spans the whole grid. */
.stats-bento__g {
  grid-column: 1 / -1; grid-row: 4;
  background: var(--pink-50); border-radius: var(--r-lg);
  padding: 18px 22px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.stats-bento__g-baslik {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted-2); font-weight: 700; flex: 0 0 auto; max-width: 14ch; line-height: 1.35;
}
.stats-bento__dernekler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; flex: 1 1 520px; }
.dernek-rozet {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: center; min-width: 0;
  background: var(--white); border-radius: var(--r-md); padding: 10px 16px 10px 10px;
  box-shadow: var(--shadow-sm); color: inherit; text-decoration: none;
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.dernek-rozet img { grid-row: 1 / span 2; width: 56px; height: 56px; border-radius: 50%; background: var(--white); }
.dernek-rozet .sayi { display: block; align-self: end; color: var(--navy); font-size: .9rem; font-weight: 700; line-height: 1.2; }
.dernek-rozet .etiket { display: block; align-self: start; font-size: .72rem; color: var(--muted); font-weight: 600; margin-top: 3px; line-height: 1.35; }
@media (min-width: 681px) and (hover: hover) { .dernek-rozet:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } }
.dernek-rozet:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.stats-bento-shell.reveal .stats-bento__g { transform: translate(0, 30px) scale(.94); transition-delay: .56s; }
@media (prefers-reduced-motion: reduce) { .dernek-rozet { transition: none; } }
@media (max-width: 1040px) { .stats-bento__g { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 640px) {
  .stats-bento__g { padding: 16px; gap: 12px; }
  .stats-bento__g-baslik { max-width: none; }
  .stats-bento__dernekler { grid-template-columns: 1fr; flex-basis: 100%; }
}

#ameliyatsiz-carousel { background: #f1f1f1; }

/* ---------- Circular Testimonials (ported from the 21st.dev React/
   Framer-Motion component). Repurposed here for the "Ameliyatsız
   Tedavi" methods instead of patient quotes: 3 fixed cards (Myoliz,
   TCRFAS, Endometrial Ablasyon), which conveniently matches the
   component's native "always show active + prev + next" 3-panel shape
   exactly, so no 4th "hidden" state is ever needed. JS in main.js just
   toggles which of the 3 is .is-active/.is-prev/.is-next; everything
   else is a CSS transition instead of the original's spring physics. */
.circular-testi { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.circular-testi__stage { position: relative; height: clamp(280px, 32vw, 380px); perspective: 900px; overflow: hidden; border-radius: var(--r-xl); }
.circular-testi__panel {
  /* Narrower than the stage (not edge-to-edge) so the active panel
     doesn't fully hide the prev/next ones behind it — they now peek
     in from both sides instead of being completely covered. */
  position: absolute; inset: 0 9% 0 9%;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--grad-navy);
  box-shadow: var(--shadow-lg);
  transition: transform .7s var(--ease), opacity .7s var(--ease), filter .7s var(--ease);
}
/* Real photos from the Ameliyatsız Tedavi listing cards (not the
   abstract SVG icons this section started with) — cover-fit, with a
   thin navy wash so the white nav dots/labels elsewhere stay legible
   against any photo. */
.circular-testi__panel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.circular-testi__panel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(15,54,97,.55));
}
.circular-testi__panel.is-active { transform: translateX(0) scale(1) rotateY(0deg); z-index: 3; opacity: 1; filter: none; }
/* Prev/next sit much closer to center than before (28% vs. the old
   58%) and the stage now clips overflow (above), so the side panels
   can no longer visually spill out of the image column into the text
   column next to it. */
/* Tilt bumped up (12deg→24deg, perspective 1200px→900px above) to
   actually read as a 3D tilt like the original component's side
   cards, instead of looking nearly flat. */
.circular-testi__panel.is-prev { transform: translateX(-28%) scale(.82) rotateY(24deg); z-index: 2; opacity: .55; filter: grayscale(.3) blur(1px); }
.circular-testi__panel.is-next { transform: translateX(28%) scale(.82) rotateY(-24deg); z-index: 2; opacity: .55; filter: grayscale(.3) blur(1px); }
.circular-testi__content h3 { color: var(--navy); font-size: 1.4rem; margin-bottom: 12px; }
.circular-testi__content p { color: var(--muted); line-height: 1.8; margin-bottom: 26px; }
.circular-testi__nav { display: flex; gap: 14px; }
.circular-testi__nav button {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .circular-testi__nav button:hover { background: var(--pink); transform: translateY(-2px); } }
@media (max-width: 780px) {
  .circular-testi { grid-template-columns: 1fr; text-align: center; }
  .circular-testi__nav { justify-content: center; }
}

/* ---------- Hasta Yorumları header: title block + Google chip enter
   from opposite sides, timed to the section crossing viewport-center
   (see [data-reveal-center] in main.js) instead of the usual
   scroll-a-bit-into-view threshold. ---------- */
/* Same trap as the picker: the chip is parked 56px right of its place until
   the row is revealed, and it already sits on the right edge — that was 14px
   of page scroll for anyone above the section. The row contains it. */
#yorumlar .section-head-row { align-items: center; overflow: hidden; padding-block: 8px; margin-block: -8px; }
#yorumlar [data-reveal-center] .yorumlar-title { transform: translateX(-56px); opacity: 0; transition: opacity .7s var(--ease), transform .7s var(--ease); }
#yorumlar [data-reveal-center] .google-chip { transform: translateX(56px); opacity: 0; transition: opacity .7s var(--ease), transform .7s var(--ease); }
#yorumlar [data-reveal-center].in .yorumlar-title,
#yorumlar [data-reveal-center].in .google-chip { transform: translateX(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #yorumlar [data-reveal-center] .yorumlar-title, #yorumlar [data-reveal-center] .google-chip { transform: none; transition: none; }
}

/* ---------- Fibroid types: scroll scene (2026-10-16) ----------
   The section pins to the screen and scrolling walks through the six types.
   The photograph of each type rises into the frame behind a clip-path
   curtain while the previous one sinks back; the counter rolls its digit
   like a slot, the name comes up out of a mask, and a rail along the
   bottom fills as you go. --p is the scene's 0..1 position (main.js);
   the active step gets .is-on. Navy stage, the hero's light. */
.mtur {
  position: relative; height: calc(var(--n) * 85svh + 100svh);
  background:
    radial-gradient(60% 45% at 20% 30%, rgba(229,86,145,.20), transparent 70%),
    radial-gradient(50% 40% at 85% 80%, rgba(90,150,255,.14), transparent 70%),
    linear-gradient(160deg, #0B1220, #0F3661 60%, #14284A);
  color: var(--white);
}
.mtur__sahne { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.mtur__izgara {
  display: grid; width: 100%;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "foto bas" "foto metin" "ray ray";
  column-gap: clamp(32px, 5vw, 88px); row-gap: clamp(14px, 2.4svh, 28px);
  padding-top: calc(var(--header-h, 92px) + clamp(16px, 4svh, 40px)); padding-bottom: clamp(18px, 3svh, 36px);
  height: 100%; align-content: center;
}
.mtur__bas { grid-area: bas; align-self: end; }
.mtur__bas h2 { color: var(--white); font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.08; letter-spacing: -.025em; max-width: 16ch; text-wrap: balance; }
.mtur__bas p { margin-top: 12px; max-width: 46ch; color: rgba(255,255,255,.66); font-size: 1rem; line-height: 1.6; }

/* photograph frame */
.mtur__foto {
  grid-area: foto; position: relative; margin: 0; align-self: center;
  height: min(64svh, 600px); border-radius: var(--r-xl); overflow: hidden; isolation: isolate;
  background: #0B1220; box-shadow: 0 40px 90px -30px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.06);
}
.mtur__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: inset(100% 0 0 0 round var(--r-xl)); transform: scale(1.14);
  filter: saturate(.92);
  transition: clip-path 1s cubic-bezier(.77,0,.18,1), transform 1.6s cubic-bezier(.16,1,.3,1), filter .8s var(--ease);
}
.mtur__img.is-on { clip-path: inset(0 0 0 0 round var(--r-xl)); transform: scale(1); z-index: 2; }
.mtur__img.is-gecti { clip-path: inset(0 0 0 0 round var(--r-xl)); transform: scale(.94); filter: saturate(.6) brightness(.55); z-index: 1; transition-duration: 1s, 1.2s, .8s; }
.mtur__foto::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(11,18,32,.72));
}
/* counter: one rolling digit + total, bottom-left of the photo */
.mtur__sayac { position: absolute; left: clamp(18px, 2.4vw, 32px); bottom: clamp(14px, 2vw, 26px); z-index: 4; display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.mtur__rakam { display: block; height: 1em; overflow: hidden; font-size: clamp(3.4rem, 2.4rem + 3vw, 5.6rem); font-weight: 700; line-height: 1; letter-spacing: -.05em; }
.mtur__rakam::before { content: "0"; float: left; }
.mtur__serit { display: block; float: left; transform: translateY(calc(var(--i, 0) * -1em)); transition: transform .9s cubic-bezier(.77,0,.18,1); }
.mtur__serit span { display: block; height: 1em; }
.mtur__toplam { font-size: .95rem; font-weight: 600; letter-spacing: .08em; color: rgba(255,255,255,.6); }

/* text steps, stacked in one cell */
.mtur__metin { grid-area: metin; display: grid; align-self: start; }
.mtur__adim { grid-area: 1 / 1; display: grid; gap: 12px; align-content: start; visibility: hidden; }
.mtur__adim.is-on { visibility: visible; }
.mtur__adim > * { opacity: 0; transform: translateY(18px); transition: opacity .35s var(--ease), transform .5s var(--ease); }
.mtur__adim.is-on > * { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .9s cubic-bezier(.16,1,.3,1); }
.mtur__adim.is-on > :nth-child(2) { transition-delay: .06s; }
.mtur__adim.is-on > :nth-child(3) { transition-delay: .14s; }
.mtur__adim.is-on > :nth-child(4) { transition-delay: .2s; }
.mtur__adim.is-on > :nth-child(5) { transition-delay: .26s; }
.mtur__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.mtur__meta span { padding: 5px 12px; border-radius: var(--r-pill); font-size: .74rem; font-weight: 700; letter-spacing: .03em; background: rgba(229,86,145,.18); color: #ffb7d3; box-shadow: inset 0 0 0 1px rgba(255,143,184,.28); }
.mtur__meta span + span { background: rgba(255,255,255,.07); color: rgba(255,255,255,.82); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.mtur__ad { margin: 0; color: var(--white); font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.mtur__desc { margin: 0; max-width: 52ch; font-size: 1.04rem; line-height: 1.7; color: rgba(255,255,255,.74); }
.mtur__tedavi { margin: 4px 0 0; display: grid; gap: 4px; max-width: 52ch; padding: 14px 18px; border-radius: var(--r-md); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mtur__tedavi b { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #ffb7d3; }
.mtur__tedavi span { font-size: .95rem; line-height: 1.55; color: var(--white); }
.mtur__link { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; font-weight: 700; font-size: .95rem; color: var(--white); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgba(255,143,184,.6); }
.mtur__link svg { width: 15px; height: 15px; color: #ffb7d3; transition: transform var(--dur) var(--ease); }
@media (hover: hover) { .mtur__link:hover { text-decoration-color: #ffb7d3; } .mtur__link:hover svg { transform: translateX(4px); } }
.mtur__link:focus-visible { outline: 2px solid #ffb7d3; outline-offset: 4px; border-radius: 4px; }

/* rail */
.mtur__ray { grid-area: ray; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; }
.mtur__nokta { display: grid; gap: 10px; padding: 0; border: 0; background: none; color: rgba(255,255,255,.5); font: inherit; text-align: left; cursor: pointer; }
.mtur__dolgu { position: relative; display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.mtur__dolgu::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--pink), var(--pink-light)); transform-origin: 0 50%; transform: scaleX(var(--dol, 0)); }
.mtur__nad { font-size: .78rem; font-weight: 600; line-height: 1.3; transition: color .4s var(--ease); }
.mtur__nokta.is-on .mtur__nad, .mtur__nokta.is-gecti .mtur__nad { color: var(--white); }
@media (hover: hover) { .mtur__nokta:hover .mtur__nad { color: #ffb7d3; } }
.mtur__nokta:focus-visible { outline: 2px solid #ffb7d3; outline-offset: 4px; border-radius: 4px; }

/* desktop: the photo spans exactly the heading + copy column, top edge on
   the heading, bottom edge on the last line of the tallest step */
@media (min-width: 1041px) {
  .mtur__izgara { grid-template-rows: auto auto auto; }
  .mtur__bas { align-self: start; }
  .mtur__foto { align-self: stretch; height: auto; min-height: 420px; }
  .mtur__metin { align-self: stretch; }
}
/* tablet: photo over text, rail stays */
@media (max-width: 1040px) {
  .mtur__izgara { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; grid-template-areas: "bas" "foto" "metin" "ray"; row-gap: clamp(12px, 2svh, 22px); align-content: center; }
  .mtur__ray { margin-top: clamp(4px, 1.4svh, 14px); }
  .mtur__bas p { display: none; }
  .mtur__foto { height: 34svh; }
  .mtur__ad { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.6rem); }
}
/* phone: rail becomes dots + numbers; the copy tightens */
@media (max-width: 680px) {
  .mtur { height: calc(var(--n) * 95svh + 100svh); }
  .mtur__izgara { padding-top: calc(var(--header-h, 76px) + 4px); row-gap: 12px; }
  .mtur__bas h2 { font-size: 1.45rem; }
  .mtur__foto { height: 30svh; border-radius: var(--r-lg); }
  .mtur__img, .mtur__img.is-on, .mtur__img.is-gecti { --r-xl: var(--r-lg); }
  .mtur__rakam { font-size: 2.8rem; }
  .mtur__adim { gap: 8px; }
  .mtur__ad { font-size: 1.6rem; }
  .mtur__desc { font-size: .92rem; line-height: 1.55; }
  .mtur__tedavi { padding: 10px 12px; }
  .mtur__tedavi span { font-size: .86rem; }
  .mtur__nad { display: none; }
  .mtur__ray { gap: 6px; }
}
@media (max-width: 680px) and (max-height: 720px) {
  .mtur__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .mtur__foto { height: 26svh; }
}
/* reduced motion: no pin, every type in order */
@media (prefers-reduced-motion: reduce) {
  .mtur { height: auto; }
  .mtur__sahne { position: static; height: auto; padding-block: var(--pad-y); }
  .mtur__izgara { grid-template-columns: 1fr; grid-template-areas: "bas" "foto" "metin"; height: auto; padding-top: 0; }
  .mtur__foto, .mtur__ray, .mtur__sayac { display: none; }
  .mtur__metin { gap: 36px; }
  .mtur__adim { grid-area: auto; visibility: visible; }
  .mtur__adim > * { opacity: 1; transform: none; transition: none; }
}

/* Risk test with a photograph beside it on the desktop (2026-10-16): the
   photo takes the card's full height; tablets and phones keep the card alone. */
.mtur-quiz__gorsel { display: none; }
.mtur-quiz__izgara > .quiz-section { max-width: 760px; margin-inline: auto; width: 100%; }
@media (min-width: 1041px) {
  .mtur-quiz__izgara { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 3vw, 40px); align-items: stretch; }
  .mtur-quiz__izgara > .quiz-section { max-width: none; margin: 0; display: flex; }
  .mtur-quiz__izgara .quiz-card { max-width: none; width: 100%; margin: 0; }
  .mtur-quiz__gorsel {
    display: block; position: relative; margin: 0; min-height: 100%;
    border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg);
  }
  .mtur-quiz__gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.04); transition: transform 1.4s var(--ease); }
  .mtur-quiz__gorsel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(229,86,145,.12), transparent 45%, rgba(15,54,97,.28)); pointer-events: none; }
  @media (hover: hover) { .mtur-quiz__izgara:hover .mtur-quiz__gorsel img { transform: scale(1); } }
}
@media (prefers-reduced-motion: reduce) { .mtur-quiz__gorsel img { transition: none; transform: none; } }

/* RTL (Arabic): the rail fills from the right and the arrows point the way the line reads */
[dir="rtl"] .mtur__dolgu::after { transform-origin: 100% 50%; background: linear-gradient(270deg, var(--pink), var(--pink-light)); }
[dir="rtl"] .mtur__link svg, [dir="rtl"] .dernek-rozet svg { transform: scaleX(-1); }
@media (hover: hover) { [dir="rtl"] .mtur__link:hover svg { transform: scaleX(-1) translateX(4px); } }
[dir="rtl"] .mtur__nokta { text-align: right; }

/* 2026-10-16 (e) — Fibroid types scene polish
   1. The frame keeps its own rounded clip. While a photo is scaled and
      clipped in transition, Chrome drops the parent's overflow+radius clip
      for a moment and the bottom corners flashed square; a clip-path on the
      frame itself holds the corners whatever the children are doing.
   2. The section title is set apart from the step copy under it — smaller,
      lighter weight, the site's light pink — runs the full width of the text
      column, and a hairline closes the header before the active type. */
.mtur__foto { clip-path: inset(0 round var(--r-xl)); -webkit-mask-image: -webkit-radial-gradient(white, black); }
.mtur__img, .mtur__img.is-on, .mtur__img.is-gecti { border-radius: inherit; }
.mtur__bas { width: 100%; padding-bottom: clamp(14px, 2svh, 22px); border-bottom: 1px solid rgba(255,255,255,.14); }
.mtur__bas h2 {
  max-width: none; font-size: clamp(1.2rem, .9rem + .6vw, 1.5rem); font-weight: 600; line-height: 1.25;
  letter-spacing: -.01em; color: #ffb7d3; text-wrap: pretty;
}
.mtur__bas p { max-width: none; margin-top: 8px; font-size: .98rem; color: rgba(255,255,255,.62); }
.mtur__metin { width: 100%; }
.mtur__desc, .mtur__tedavi { max-width: none; }
@media (max-width: 1040px) {
  .mtur__bas h2 { font-size: 1.2rem; }
}
@media (max-width: 680px) {
  .mtur__foto { clip-path: inset(0 round var(--r-lg)); }
  .mtur__bas { padding-bottom: 10px; }
  .mtur__bas h2 { font-size: 1.08rem; }
}