/* ==========================================================================
   Çikolata Kisti v2 — inner pages
   ========================================================================== */

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

/* ---------- Page hero ----------
   No blurred colour fields here (that is the sibling sites' device). The
   hero carries one large, very faint ring bled off the right edge — the
   page's motif at its largest size, used once. */
.phero {
  position: relative; overflow: hidden;
  padding-top: calc(var(--shell-h) + 44px);
  padding-bottom: clamp(20px, 2.6vw, 36px);
}
.phero__orbit {
  position: absolute; right: -14vw; top: -22vw; z-index: -1;
  width: min(54vw, 720px); aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.phero__orbit::before {
  content: ""; position: absolute; inset: 14%;
  border: 1px solid var(--plum-50); border-radius: 50%;
}
.phero h1 { margin-top: 16px; font-size: var(--fs-h1); line-height: 1.1; }
.phero__lead { margin-top: 14px; max-width: 62ch; font-size: var(--fs-lead); color: var(--muted); line-height: 1.75; }

.crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .8rem; color: var(--muted-2); }
.crumb a { color: var(--muted); transition: color var(--dur) var(--ease); }
@media (min-width: 681px) and (hover: hover) { .crumb a:hover { color: var(--pink); } }
.crumb svg { width: 12px; height: 12px; opacity: .5; }
.crumb span { color: var(--navy); font-weight: 500; }

/* ---------- Article ----------
   The reading column leads and starts on the header's own left edge; the
   rail closes the right edge where the header's button does. Same symmetry
   contract as the sibling sites, which the brief asks for. */
.artic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 24%, 320px);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.artic__main { min-width: 0; }

.prose { color: var(--muted); line-height: 1.85; font-size: 1.04rem; }
.prose p, .prose li { max-width: 72ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.9em; font-size: var(--fs-h3); color: var(--navy); }
.prose h3 { margin-top: 1.5em; font-size: 1.1rem; color: var(--navy); }
/* The reference lists print bare URLs, and one of them is 469px of
   unbreakable string — on a 390px screen that pushed the whole Endometriozis
   page sideways. `anywhere` lets a URL break mid-token without touching how
   ordinary words wrap. */
.prose a { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose img { margin-block: 1.4em; border-radius: var(--r-petal); box-shadow: var(--shadow-md); }
.prose ul, .prose ol { padding-left: 0; }
.prose li { position: relative; padding-left: 26px; margin-bottom: 9px; }
/* a small open ring, not a dot — the motif at list size */
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--pink);
}
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; }
.prose ol li::before { content: counter(n); position: absolute; left: 0; top: .08em; font-size: .78rem; font-weight: 700; color: var(--pink); }

/* The opening paragraph is the page's first line; it is set as a lead and
   it does NOT animate in — a reader should not wait for the sentence that
   greets them. main.js strips its reveal marking. */
.artic .prose > p:first-child {
  max-width: 66ch;
  font-size: var(--fs-lead); font-weight: 500; line-height: 1.7;
  color: var(--navy-700);
}

/* ---------- The article's lead picture ----------
   It opens the reading column, at the column's full width, so the article
   starts with the thing it is about instead of with a wall of type. */
.artic__lead { position: relative; margin: 0 0 clamp(20px, 2.4vw, 32px); }
.artic__lead img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-petal);
  box-shadow: var(--shadow-md);
}
/* the motif, cropped by the picture's own corner */
.artic__lead-ring {
  position: absolute; right: -26px; bottom: -26px;
  width: 128px; height: 128px;
  border: 1.5px solid var(--pink-100); border-radius: 50%;
  pointer-events: none;
}

/* ---------- /hakkimda/ ----------
   The portrait column is the .artic rail's slot, so it is already sticky and
   already shares its top edge with the text — the same edge the header's
   inner rule sits on. */
.artic--about .artic__main > .prose > p + p { margin-top: 1.2em; }

.abcard { display: grid; gap: 4px; }
.abcard__photo { position: relative; margin: 0 0 16px; }
/* :not(.abcard__seal) — the da Vinci rosette is also an img inside this
   figure, and the unqualified selector was stretching it to the portrait's
   full width and aspect */
.abcard__photo > img:not(.abcard__seal) {
  width: 100%; aspect-ratio: 5 / 6; object-fit: cover; object-position: 50% 12%;
  border-radius: var(--r-petal);
  box-shadow: var(--shadow-md);
}
.abcard__ring {
  position: absolute; left: -22px; top: -22px;
  width: 132px; height: 132px;
  border: 1.5px solid var(--pink-100); border-radius: 50%;
  pointer-events: none;
}
/* the card over the picture: it overlaps the bottom edge so the two read as
   one object rather than as a picture with a caption under it */
.abcard__badge {
  position: absolute; left: 16px; bottom: -18px;
  display: grid; gap: 1px;
  padding: 12px 18px;
  border-radius: var(--r-petal-alt);
  background: var(--grad-deep); color: var(--white);
  box-shadow: var(--shadow-md);
}
.abcard__badge b { font-size: 1.5rem; line-height: 1; letter-spacing: -.03em; }
.abcard__badge span { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.abcard__seal {
  position: absolute; right: 12px; bottom: -14px;
  width: clamp(76px, 8vw, 104px); height: auto;
  filter: drop-shadow(0 8px 18px rgba(0,25,53,.24));
}
.abcred {
  display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 12px;
  padding: 12px 0;
}
.abcred + .abcred { border-top: 1px solid var(--line); }
.abcred:first-of-type { margin-top: 14px; border-top: 1px solid var(--line); }
.abcred__ico {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 50%; color: var(--pink);
}
.abcred__ico svg { width: 17px; height: 17px; }
.abcred__txt { display: grid; gap: 1px; min-width: 0; }
.abcred__txt b { font-size: .95rem; color: var(--navy); }
.abcred__txt span { font-size: .78rem; line-height: 1.45; color: var(--muted); }

/* the eleven fields */
.skillgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.skill {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--r-petal);
  background: var(--white);
  transition: transform .34s var(--ease), box-shadow .34s var(--ease), border-color .34s var(--ease);
}
.skill:nth-child(even) { border-radius: var(--r-petal-alt); }
.skill__seal { position: relative; display: grid; place-items: center; width: 42px; height: 42px; color: var(--pink); }
.skill__seal svg { width: 20px; height: 20px; }
.skill__ring {
  position: absolute; inset: 0;
  border: 1.5px solid var(--pink-100); border-radius: 50%;
  transition: transform .5s var(--ease-pop), border-color .34s var(--ease);
}
.skill h3 { font-size: .92rem; line-height: 1.35; }
@media (min-width: 681px) and (hover: hover) { .skill:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--pink); } }
@media (min-width: 681px) and (hover: hover) { .skill:hover .skill__ring { transform: scale(1.14); border-color: var(--pink); } }

/* the career, down one line of ring nodes */
.tline { position: relative; display: grid; gap: 2px; padding-left: 26px; }
.tline::before {
  content: ""; position: absolute; left: 5px; top: 12px; bottom: 12px;
  width: 1px; background: linear-gradient(var(--pink-100), var(--line));
}
.tline__item {
  position: relative;
  display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: baseline; gap: 18px;
  padding: 14px 0;
}
.tline__item + .tline__item { border-top: 1px solid var(--line); }
.tline__node {
  position: absolute; left: -26px; top: 20px;
  width: 11px; height: 11px;
  border: 2px solid var(--pink-100); border-radius: 50%;
  background: var(--white);
  transition: border-color .34s var(--ease), transform .34s var(--ease-pop);
}
@media (min-width: 681px) and (hover: hover) { .tline__item:hover .tline__node { border-color: var(--pink); transform: scale(1.25); } }
.tline__year { font-size: .86rem; font-weight: 700; letter-spacing: .04em; color: var(--pink-700); }
.tline__item p { color: var(--muted); line-height: 1.65; }

/* ---------- Patient comments ----------
   One quote at a time. The slides are stacked in a single grid cell rather
   than laid out on a track, so the panel is as tall as the longest comment
   and nothing reflows when it changes — the same trick the eight signals
   use on the homepage. */
.revs {
  position: relative; overflow: hidden;
  /* room down both sides for the arrows */
  padding: clamp(28px, 4vw, 52px) clamp(56px, 6vw, 92px) clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--line); border-radius: var(--r-petal);
  background: var(--surface);
}
/* ---------- The arrows ----------
   On the panel's edges, vertically centred, at 46px — they were inline with
   the dots before, at the same weight as a 9px dot, and read as decoration
   rather than as the control. */
.revs__arrow {
  position: absolute; top: 50%; z-index: 3;
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-top: -23px;
  border: 1.5px solid var(--line); border-radius: 50%;
  background: var(--white); color: var(--navy);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.revs__arrow svg { width: 18px; height: 18px; }
.revs__arrow--prev { left: clamp(8px, 1.2vw, 18px); }
.revs__arrow--next { right: clamp(8px, 1.2vw, 18px); }
@media (min-width: 681px) and (hover: hover) { .revs__arrow:hover { border-color: var(--pink); background: var(--pink); color: var(--white); } }
@media (min-width: 681px) and (hover: hover) { .revs__arrow--prev:hover { transform: translateX(-2px); } }
@media (min-width: 681px) and (hover: hover) { .revs__arrow--next:hover { transform: translateX(2px); } }
/* the motif, cropped by the panel's corner */
.revs__ring {
  position: absolute; right: -90px; bottom: -120px;
  width: 300px; height: 300px;
  border: 1.5px solid var(--pink-100); border-radius: 50%;
  pointer-events: none;
}
.revs__ring::before {
  content: ""; position: absolute; inset: 18%;
  border: 1px solid var(--pink-100); border-radius: 50%;
}
/* a quotation mark at scale, sitting behind the text as texture */
.revs__mark {
  position: absolute; left: clamp(6px, 1.4vw, 22px); top: -18px;
  font-size: clamp(7rem, 12vw, 11rem); line-height: 1;
  color: var(--pink-100);
  pointer-events: none; user-select: none;
}
.revs__track { position: relative; display: grid; }
.rev {
  grid-area: 1 / 1; margin: 0;
  /* centred, because the cell is as tall as the LONGEST comment and a
     two-line one pinned to the top leaves the panel looking half empty */
  display: grid; gap: 14px; align-content: center;
  opacity: 0; transform: translateX(22px);
  transition: opacity .42s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.rev.is-on { opacity: 1; transform: none; pointer-events: auto; }
.rev__stars { display: flex; gap: 3px; color: var(--pink); }
.rev__stars svg { width: 15px; height: 15px; }
.rev blockquote {
  margin: 0; max-width: 78ch;
  font-size: clamp(1rem, .96rem + .35vw, 1.2rem);
  line-height: 1.75; color: var(--navy);
}
/* ---------- Clamped comments ----------
   The panel is as tall as the LONGEST comment, and one of these runs seven
   hundred characters — on a tablet that is most of a screen of quotation.
   Below 1100px each quote is cut to a few lines and carries its own "read
   more", so the block keeps a fixed, small height until someone asks for
   the rest. .is-open is set on the figure by main.js. */
.rev__more { display: none; }
@media (max-width: 1100px) {
  .rev blockquote {
    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
    -webkit-line-clamp: 5;
  }
  .rev.is-open blockquote { display: block; overflow: visible; }
  .rev__more {
    display: inline-flex; align-items: center; gap: 6px;
    justify-self: start; margin-top: -4px;
    font-size: .82rem; font-weight: 700; color: var(--pink-700);
  }
  .rev__more svg { width: 13px; height: 13px; transition: transform var(--dur) var(--ease); }
  .rev.is-open .rev__more svg { transform: rotate(180deg); }
  /* the quote that is not clamped does not need the control */
  .rev__more[hidden] { display: none; }
}
/* name and place, under the quote */
.rev__by { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
/* an initial in a ring stands in for a portrait there is no photograph of */
.rev__seal {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--pink-100); background: var(--white);
  font-weight: 700; color: var(--pink-700);
}
.rev__who { display: grid; gap: 1px; min-width: 0; }
.rev__who b { font-size: .95rem; color: var(--navy); }
.rev__who span { font-size: .8rem; color: var(--muted); }

/* Above the phone breakpoint the bar is only scaffolding: the arrows keep
   their absolute positions on the panel's edges and the counter is off, so
   the desktop and tablet control row is the dots alone, as before. */
.revs__bar { position: relative; margin-top: clamp(20px, 2.4vw, 30px); }
.revs__at { display: none; }
.revs__dots {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 7px;
}
.revs__dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--line);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .revs__dot:hover { border-color: var(--pink); } }
.revs__dot.is-on { background: var(--pink); border-color: var(--pink); transform: scale(1.35); }

/* Tablets (681–1100px): sixteen 9px dots are not a control a finger can hit
   (measured 14×9px). They give way to the phone's plain "4 / 16" count,
   centred between the two side arrows. (audit 2026-09-28) */
@media (min-width: 681px) and (max-width: 1100px) {
  .revs__dots { display: none; }
  .revs__at {
    display: block; text-align: center; min-height: 44px; line-height: 44px;
    font-size: .86rem; font-weight: 700; letter-spacing: .06em; color: var(--muted);
  }
  .revs__at b { color: var(--pink-700); }
}

/* ---------- The pinned risk-test call ---------- */
.rtcall {
  position: relative; overflow: hidden;
  display: grid; gap: 10px;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--r-petal);
  background: var(--grad-deep); color: rgba(255,255,255,.76);
}
.rail + .rtcall { margin-top: 14px; }
.rtcall__ring {
  position: absolute; right: -54px; bottom: -66px;
  width: 190px; height: 190px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 50%;
}
.rtcall__ring::before {
  content: ""; position: absolute; inset: 18%;
  border: 1px solid rgba(255,143,184,.22); border-radius: 50%;
}
.rtcall__eyebrow { position: relative; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pink-light); }
.rtcall h3 { position: relative; font-size: 1.2rem; color: var(--white); }
.rtcall p { position: relative; font-size: .88rem; line-height: 1.65; color: rgba(255,255,255,.7); }
.rtcall .btn-appt { position: relative; margin-top: 6px; }
.rtcall__alt {
  position: relative; justify-self: center;
  font-size: .8rem; color: rgba(255,255,255,.58);
  text-decoration: underline; text-underline-offset: 4px;
  transition: color var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .rtcall__alt:hover { color: var(--white); } }

/* ---------- Sibling rail ---------- */
.artic__side { position: sticky; top: calc(var(--shell-h) + 22px); }
.rail {
  display: grid; gap: 3px; padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-petal);
  background: var(--surface);
}
.rail__head {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 8px;
}
.rail__item {
  position: relative;
  padding: 10px 12px 10px 26px;
  border-radius: var(--r-md);
  font-size: .86rem; line-height: 1.4; color: var(--muted);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* the marker is a small petal that fills pink as the item becomes current (2026-10-06) */
.rail__item::before {
  content: ""; position: absolute; left: 8px; top: 1.1em;
  width: 8px; height: 8px; border-radius: 1px 70% 1px 70%;
  background: var(--muted-2);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .rail__item:hover { color: var(--pink-700); background: var(--plum-50); } }
@media (min-width: 681px) and (hover: hover) { .rail__item:hover::before { background: var(--pink); } }
.rail__item.is-current { color: var(--navy); font-weight: 700; }
.rail__item.is-current::before { background: var(--pink); transform: scale(1.25); }

/* ---------- Closing CTA ----------
   One ring, drawn large and cropped by the panel — the same object as the
   page hero's, so the page opens and closes on the same shape. */
.ctaband { padding-block: var(--pad-y); }
.ctaband__inner {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(18px, 3vw, 40px);
  padding: clamp(28px, 4vw, 52px);
  border-radius: var(--r-petal);
  background: var(--grad-dusk); color: rgba(255, 255, 255, .78);
}
.ctaband__ring {
  position: absolute; right: -6%; top: -60%;
  width: min(42%, 420px); aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  pointer-events: none;
}
.ctaband__inner > div { position: relative; z-index: 1; max-width: 56ch; }
.ctaband__inner h2 { color: var(--white); font-size: var(--fs-h2); }
.ctaband__inner p { margin-top: 10px; color: rgba(255, 255, 255, .7); line-height: 1.7; }
.ctaband__inner .btn-appt { position: relative; z-index: 1; background: var(--white); color: var(--navy); height: 52px; padding: 0 26px; }
@media (min-width: 681px) and (hover: hover) { .ctaband__inner .btn-appt:hover { color: var(--white); } }

/* ==========================================================================
   List pages

   Four of them carry between 23 and 32 entries. A wall that long needs a
   way in, so each one opens with the same bar: a count and an instant
   filter. The bar is shared; the wall below it is not — an index of topics,
   a blog with a front page, a video wall and a press strip each get the
   shape their content asks for.
   ========================================================================== */
.hubbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: clamp(18px, 2.2vw, 28px);
}
.hubfind {
  position: relative; display: flex; align-items: center; gap: 10px;
  width: min(420px, 100%); height: 52px; padding: 0 16px;
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  background: var(--white);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hubfind:focus-within { border-color: var(--pink); box-shadow: 0 0 0 4px var(--pink-50); }
.hubfind svg { flex: none; width: 17px; height: 17px; color: var(--muted-2); }
.hubfind input {
  flex: 1 1 auto; min-width: 0; height: 100%;
  border: 0; outline: 0; background: none;
  font-size: .95rem;
}
/* Safari draws its own clear button on type=search and it lands on top of
   ours */
.hubfind input::-webkit-search-decoration,
.hubfind input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hubfind__clear {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  color: var(--muted); background: var(--surface-2);
  font-size: 1rem; line-height: 1;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .hubfind__clear:hover { color: var(--white); background: var(--pink); } }
.hubbar__count { font-size: .86rem; color: var(--muted); }
.hubbar__count b { color: var(--navy); font-size: 1.05rem; }
.hubempty { margin-top: 26px; color: var(--muted); }
/* the filter hides a row outright: a row that is merely faded still takes
   its place in the grid and the wall keeps its holes */
[data-hub-list] .is-off { display: none; }

/* ---------- /cikolata-kisti/ : the topic index ----------
   Twenty-four equal tiles would be a wall to scan twice. The picture sits
   as a seal on the left of a wide row instead, so titles line up down one
   edge for reading and the pictures make a row findable again on the way
   back. */
.ixgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.icard {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  padding: 18px;
  border: 1px solid var(--line); border-radius: var(--r-petal);
  background: var(--white);
  transition: transform .34s var(--ease), box-shadow .34s var(--ease),
              border-color .34s var(--ease), opacity .34s var(--ease), filter .34s var(--ease);
}
.icard:nth-child(even) { border-radius: var(--r-petal-alt); }
.icard__seal {
  position: relative; flex: none;
  display: grid; place-items: stretch;
  width: clamp(76px, 7vw, 104px); aspect-ratio: 1; padding: 5px;
  border-radius: 50%; background: var(--surface);
}
.icard__seal img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* the ring is drawn OUTSIDE the seal, so it reads as the seal being
   stamped rather than as a border thickening */
.icard__ring {
  position: absolute; inset: -6px;
  border: 1.5px solid var(--pink); border-radius: 50%;
  opacity: 0; transform: scale(.82);
  transition: transform .5s var(--ease-pop), opacity .34s var(--ease);
}
.icard__body { display: grid; gap: 5px; min-width: 0; }
.icard__no { font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: var(--pink); }
.icard h3 { font-size: 1.04rem; line-height: 1.32; }
.icard p { font-size: .86rem; line-height: 1.55; color: var(--muted); }
.icard__go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
  font-size: .78rem; font-weight: 700; color: var(--pink-700);
  opacity: 0; transform: translateY(5px);
  transition: opacity .3s var(--ease), transform .34s var(--ease);
}
.icard__go svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
@media (min-width: 681px) and (hover: hover) { .icard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--pink); } }
@media (min-width: 681px) and (hover: hover) { .icard:hover .icard__ring { opacity: 1; transform: none; } }
@media (min-width: 681px) and (hover: hover) { .icard:hover .icard__go { opacity: 1; transform: none; } }
@media (min-width: 681px) and (hover: hover) { .icard:hover .icard__go svg { transform: translateX(3px); } }
/* the index answers as a whole, the same way the homepage grid does */
@media (min-width: 681px) and (hover: hover) { .ixgrid:has(.icard:hover) .icard:not(:hover) { opacity: .42; filter: saturate(.6); } }

/* ---------- /blog/ : a front page, then the rest ---------- */
.bfeat {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch; gap: 0;
  margin-bottom: 16px;
  border: 1px solid var(--line); border-radius: var(--r-petal);
  background: var(--white);
  transition: transform .34s var(--ease), box-shadow .34s var(--ease), border-color .34s var(--ease);
}
.bfeat__img { position: relative; overflow: hidden; min-height: 280px; }
.bfeat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.bfeat__ring {
  position: absolute; right: -70px; bottom: -70px;
  width: 220px; height: 220px;
  border: 1.5px solid rgba(255,255,255,.55); border-radius: 50%;
  transform: scale(.6); opacity: 0;
  transition: transform .6s var(--ease-pop), opacity .4s var(--ease);
  pointer-events: none;
}
.bfeat__body {
  display: grid; align-content: center; gap: 12px;
  padding: clamp(24px, 3vw, 44px);
}
.bfeat__kicker { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); }
.bfeat h2 { font-size: var(--fs-h3); line-height: 1.25; }
.bfeat p { color: var(--muted); line-height: 1.7; }
@media (min-width: 681px) and (hover: hover) { .bfeat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--pink); } }
@media (min-width: 681px) and (hover: hover) { .bfeat:hover .bfeat__img img { transform: scale(1.05); } }
@media (min-width: 681px) and (hover: hover) { .bfeat:hover .bfeat__ring { transform: none; opacity: 1; } }
@media (min-width: 681px) and (hover: hover) { .bfeat:hover .icard__go { opacity: 1; transform: none; } }
.bfeat .icard__go { opacity: .001; transform: translateY(5px); }

.bgrid--list { grid-template-columns: repeat(3, 1fr); }
.bgrid--list .bcard { height: 100%; }

/* ---------- /videolar/ : the wall ----------
   The v1 page threw every click out to YouTube. Here the still is the
   card, the play mark is the site's ring drawing itself, and the player is
   built over the page only when one is asked for. */
.vwall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* the homepage preview: three of them, so they can breathe a little more */
.vwall--peek { gap: clamp(16px, 1.8vw, 24px); }
.vtile {
  display: grid; gap: 12px; text-align: left;
  transition: transform .34s var(--ease);
}
.vtile__img {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-petal);
  background: var(--ink-900);
}
.vtile:nth-child(even) .vtile__img { border-radius: var(--r-petal-alt); }
.vtile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .34s var(--ease); }
/* Ring and triangle share ONE grid cell. Absolutely positioning the ring
   inside a centred grid item left it sitting at its static position, a few
   pixels off the arrow it is supposed to enclose. */
.vtile__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--white);
}
.vtile__ring {
  grid-area: 1 / 1; width: 64px; height: 64px;
  transform: rotate(-90deg);
  overflow: visible;
}
.vtile__ring circle {
  fill: rgba(0, 25, 53, .34); stroke: var(--white); stroke-width: 2;
  /* 2πr with r=29 */
  stroke-dasharray: 182.2; stroke-dashoffset: 182.2;
  transition: stroke-dashoffset .7s var(--ease), fill .34s var(--ease), stroke .34s var(--ease);
}
/* 3px right of centre: a triangle's visual centre is not its bounding box's */
.vtile__tri { grid-area: 1 / 1; width: 22px; height: 22px; margin-left: 3px; transition: transform .34s var(--ease-pop); }
/* ---------- The hover ----------
   No more dimming the other tiles: on a wall of thirty-two, fading
   thirty-one of them to answer one pointer is a lot of screen changing for
   a small cause, and the tile you are actually on gained the least from it.
   The tile answers for itself instead — a pink rim is drawn around the
   still, the picture warms rather than fades, the play ring closes, and the
   title underlines itself. Everything happens inside the one card. */
.vtile__title {
  position: relative; display: inline-block;
  font-size: .9rem; font-weight: 600; line-height: 1.45; color: var(--navy);
  transition: color var(--dur) var(--ease);
}
/* the rule under the title draws from the left, like the nav's own ring */
.vtile__title::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1.5px; border-radius: 2px; background: var(--pink);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .42s var(--ease);
}
/* the rim: an inset ring drawn inside the still's own petal corners */
.vtile__img::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border: 2px solid var(--pink); border-radius: inherit;
  opacity: 0; transform: scale(.985);
  transition: opacity .3s var(--ease), transform .42s var(--ease-pop);
  pointer-events: none;
}
@media (min-width: 681px) and (hover: hover) { .vtile:hover { transform: translateY(-5px); } }
/* warms and opens up, instead of being faded down */
@media (min-width: 681px) and (hover: hover) { .vtile:hover .vtile__img img { transform: scale(1.06); filter: saturate(1.12) brightness(1.06); } }
@media (min-width: 681px) and (hover: hover) { .vtile:hover .vtile__img::after { opacity: 1; transform: none; } }
@media (min-width: 681px) and (hover: hover) { .vtile:hover .vtile__ring circle { stroke-dashoffset: 0; fill: rgba(229, 86, 145, .82); stroke: var(--pink-light); } }
@media (min-width: 681px) and (hover: hover) { .vtile:hover .vtile__tri { transform: scale(1.14); } }
@media (min-width: 681px) and (hover: hover) { .vtile:hover .vtile__title { color: var(--pink-700); } }
@media (min-width: 681px) and (hover: hover) { .vtile:hover .vtile__title::after { transform: none; } }

.vlight {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(0, 25, 53, .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s var(--ease);
}
.vlight.is-open { opacity: 1; }
/* No rounded clip. A border-radius with overflow:hidden on an ancestor of a
   cross-origin iframe stops Chrome routing pointer events into it — the
   player was visible but its controls were dead, the same fault the map had.
   A square player over a dark scrim is the normal shape for one anyway. */
.vlight__frame {
  width: min(1040px, 100%); aspect-ratio: 16 / 9;
  background: #000; box-shadow: var(--shadow-lg);
  transform: scale(.96); transition: transform .38s var(--ease-pop);
}
.vlight.is-open .vlight__frame { transform: none; }
.vlight__frame iframe { width: 100%; height: 100%; border: 0; }
.vlight__close {
  position: absolute; top: clamp(12px, 2.4vw, 26px); right: clamp(12px, 2.4vw, 26px);
  display: grid; place-items: center; width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,.3); border-radius: 50%;
  color: var(--white);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .vlight__close:hover { background: rgba(255,255,255,.14); transform: rotate(90deg); } }
.vlight__close svg { width: 18px; height: 18px; }

/* ---------- /yazili-basin/ : the press strip ----------
   Every one of these leaves the site, so the card names the outlet it is
   sending you to — read off the link, not written by hand — and carries
   the outbound arrow rather than the site's own read-on mark. */
.pwall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.pcard {
  position: relative; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr; height: 100%;
  border: 1px solid var(--line); border-radius: var(--r-petal);
  background: var(--white);
  transition: transform .34s var(--ease), box-shadow .34s var(--ease),
              border-color .34s var(--ease), opacity .34s var(--ease), filter .34s var(--ease);
}
.pcard:nth-child(even) { border-radius: var(--r-petal-alt); }
/* 16:9 exactly, and no hover zoom: unlike the blog photographs these stills
   are made cards with the outlet's logo and the headline set into the
   picture, so any crop cuts the words off. */
.pcard__img { overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface-2); }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: filter .34s var(--ease); }
.pcard__body { display: grid; align-content: start; gap: 8px; padding: 18px 20px 22px; }
.pcard__src {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; color: var(--pink);
}
.pcard__src svg { width: 13px; height: 13px; transition: transform var(--dur) var(--ease); }
.pcard h3 { font-size: .98rem; line-height: 1.4; }
.pcard__ring {
  position: absolute; right: -44px; bottom: -44px;
  width: 150px; height: 150px;
  border: 1.5px solid var(--pink-100); border-radius: 50%;
  transform: scale(.35); opacity: 0;
  transition: transform .55s var(--ease-pop), opacity .4s var(--ease);
  pointer-events: none;
}
@media (min-width: 681px) and (hover: hover) { .pcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--pink); } }
@media (min-width: 681px) and (hover: hover) { .pcard:hover .pcard__img img { filter: saturate(1.08) brightness(1.03); } }
@media (min-width: 681px) and (hover: hover) { .pcard:hover .pcard__ring { transform: none; opacity: 1; } }
@media (min-width: 681px) and (hover: hover) { .pcard:hover .pcard__src svg { transform: translate(2px, -2px); } }
@media (min-width: 681px) and (hover: hover) { .pwall:has(.pcard:hover) .pcard:not(:hover) { opacity: .42; filter: saturate(.6); } }

/* ---------- /iletisim/ ---------- */
.ctc {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-petal);
  background: var(--white); box-shadow: var(--shadow-sm);
}
.ctc__side {
  position: relative; overflow: hidden;
  display: grid; align-content: start; gap: 4px;
  padding: clamp(26px, 3vw, 44px);
  background: var(--grad-deep); color: rgba(255,255,255,.76);
}
/* the motif once, very large, cropped by the panel's own edge */
.ctc__side::before {
  content: ""; position: absolute; right: -90px; bottom: -120px;
  width: 320px; height: 320px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 50%;
}
.ctc__side::after {
  content: ""; position: absolute; right: -40px; bottom: -70px;
  width: 220px; height: 220px;
  border: 1px solid rgba(255,143,184,.2); border-radius: 50%;
}
.ctc__eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pink-light); }
.ctc__side h2 { margin-top: 10px; font-size: var(--fs-h3); color: var(--white); }
.ctc__intro { margin-top: 10px; margin-bottom: 18px; line-height: 1.7; color: rgba(255,255,255,.66); }
.ctc__row {
  position: relative;
  display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 12px;
  padding: 11px 0;
  color: rgba(255,255,255,.78);
  transition: color var(--dur) var(--ease);
}
.ctc__row + .ctc__row { border-top: 1px solid rgba(255,255,255,.1); }
.ctc__ico {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
  color: var(--pink-light);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ctc__ico svg { width: 16px; height: 16px; }
.ctc__txt { display: grid; gap: 2px; font-size: .92rem; min-width: 0; word-break: break-word; }
.ctc__txt b { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.44); }
@media (min-width: 681px) and (hover: hover) { a.ctc__row:hover { color: var(--white); } }
@media (min-width: 681px) and (hover: hover) { a.ctc__row:hover .ctc__ico { border-color: var(--pink-light); background: rgba(255,143,184,.14); } }

.ctc__social { position: relative; display: flex; gap: 10px; margin-top: 22px; }
.ctc__seal {
  position: relative; display: grid; place-items: center; isolation: isolate;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.78);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ctc__seal-fill {
  position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: var(--grad-pink); transform: scale(0); opacity: 0;
  transition: transform .34s var(--ease), opacity .24s var(--ease);
}
.ctc__seal svg { width: 18px; height: 18px; }
.ctc__seal:focus-visible { color: var(--white); border-color: transparent; transform: translateY(-3px); }
@media (min-width: 681px) and (hover: hover) { .ctc__seal:hover { color: var(--white); border-color: transparent; transform: translateY(-3px); } }
.ctc__seal:focus-visible .ctc__seal-fill { transform: scale(1); opacity: 1; }
@media (min-width: 681px) and (hover: hover) { .ctc__seal:hover .ctc__seal-fill { transform: scale(1); opacity: 1; } }

.ctc__form { display: grid; align-content: start; gap: 12px; padding: clamp(26px, 3vw, 44px); }
.ctc__form h2 { margin-top: 8px; margin-bottom: 6px; font-size: var(--fs-h3); }
.fld { position: relative; }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fld .form-control {
  width: 100%; height: 56px; padding: 22px 16px 8px;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--white); outline: 0;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fld textarea.form-control { height: auto; min-height: 132px; resize: vertical; }
/* the label rides inside the box and lifts on focus or content; :placeholder-shown
   is why every control carries placeholder=" " */
.fld label {
  position: absolute; left: 17px; top: 17px;
  font-size: .95rem; color: var(--muted-2);
  pointer-events: none;
  transition: transform .2s var(--ease), font-size .2s var(--ease), color .2s var(--ease);
  transform-origin: 0 0;
}
.fld .form-control:focus { border-color: var(--pink); box-shadow: 0 0 0 4px var(--pink-50); }
.fld .form-control:focus + label,
.fld .form-control:not(:placeholder-shown) + label { transform: translateY(-10px) scale(.76); color: var(--pink-700); }
.ctc__note { font-size: .78rem; line-height: 1.6; color: var(--muted-2); }
.sonuc:empty { display: none; }
.sonuc {
  padding: 12px 16px; border-radius: var(--r-sm);
  font-size: .88rem; background: var(--pink-50); color: var(--pink-700);
}
.sonuc.is-err { background: #fdecec; color: #b3261e; }

/* ---------- The map ----------
   The corners are painted by an overlay, never clipped. A rounded clip on
   an ancestor of a cross-origin iframe stops Chrome routing pointer events
   into it and the map stops responding to drags. */
/* No min-height. An aspect-ratio transfers minimum sizes across itself, so
   min-height:320px became min-width:840px and the panel pushed the whole
   page sideways on a tablet. The ratio alone gives the height, and the
   narrower screens get a taller ratio instead. */
.ctc-map__frame {
  position: relative; overflow: visible;
  aspect-ratio: 21 / 8;
  background: var(--surface-2);
}
.ctc-map__frame iframe { width: 100%; height: 100%; border: 0; }
.ctc-map__ph {
  position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 70% 20%, var(--plum-50), var(--surface-2));
}
.ctc-map__frame.is-live .ctc-map__ph { display: none; }
/* Four corner wedges in the page's own background colour, matching
   --r-petal (34 / 8 / 34 / 8). Each tile is exactly the size of its radius:
   a radial gradient keeps painting its last colour past the circle, so a
   tile any larger than the corner floods the map white. */
.ctc-map__rnd {
  position: absolute; inset: -1px; pointer-events: none; z-index: 1;
  background:
    radial-gradient(circle 34px at 100% 100%, #0000 0 34px, var(--white) 34px) left top / 35px 35px no-repeat,
    radial-gradient(circle 8px  at 0    100%, #0000 0 8px,  var(--white) 8px)  right top / 9px 9px no-repeat,
    radial-gradient(circle 34px at 0    0,    #0000 0 34px, var(--white) 34px) right bottom / 35px 35px no-repeat,
    radial-gradient(circle 8px  at 100% 0,    #0000 0 8px,  var(--white) 8px)  left bottom / 9px 9px no-repeat;
}
.ctc-map__ph { border-radius: var(--r-petal); }
.ctc-map__note { margin-top: 18px; }

/* ---------- /endometriozis-riski-testi/ ----------
   Ten questions, one at a time. The ring is the progress bar — the same
   ring the rest of the site uses — and it becomes the score at the end,
   so the test finishes inside the shape it started in. */
/* ---------- The ground reacts as the test fills in ----------
   main.js writes one number on .rtest — --a, the share of questions that
   have been answered — and three layers read it. It is deliberately tied to
   how many are ANSWERED and not to what was answered: a ground that warmed
   up with the yeses would be telling the reader what it thinks before the
   last question.

   Only opacity and transform move, so none of this costs a layout. */
.rtest {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-petal);
  background: var(--grad-deep); color: rgba(255,255,255,.8);
  box-shadow: var(--shadow-lg);
}
/* Rings, spreading out of the dial — the site's own gesture at panel size.
   Each answer pushes the set further out and brightens it, so the block
   reads as something being set in motion from the point that is counting,
   not as a bar filling up. The rings are one repeating gradient scaled by a
   transform, so ten steps cost one composited layer. */
.rtest__glow {
  position: absolute; z-index: -1;
  /* centred on the dial, which sits in the left column */
  left: clamp(40px, 8vw, 150px); top: 50%;
  width: 1500px; height: 1500px; margin: -750px 0 0 -750px;
  background: repeating-radial-gradient(circle at 50% 50%,
    rgba(255, 143, 184, .30) 0 2px,
    rgba(255, 143, 184, 0) 2px 58px);
  /* a soft edge, so the rings fade out rather than ending on a hard circle */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 78%);
  transform: scale(calc(.24 + var(--a, 0) * .76));
  opacity: calc(.35 + var(--a, 0) * .65);
  transition: transform .9s var(--ease), opacity .7s var(--ease);
  pointer-events: none;
}
/* and the ground warms behind them, so the colour moves too */
.rtest::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-dusk);
  opacity: calc(var(--a, 0) * .6);
  transition: opacity .65s var(--ease);
  pointer-events: none;
}
.rtest::before {
  content: ""; position: absolute; right: -140px; top: -160px;
  width: 420px; height: 420px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 50%;
  /* widens a little as the test fills, so the motif moves with the ground */
  transform: scale(calc(1 + var(--a, 0) * .12));
  transition: transform .8s var(--ease);
}
.rtest__stage, .rtest__result {
  position: relative;   /* above the two reacting grounds */
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 4vw, 56px);
}
.rtest.is-done .rtest__stage { display: none; }

/* the dial */
.rtest__dial, .rscore { position: relative; width: clamp(132px, 15vw, 190px); aspect-ratio: 1; }
.rtest__dial svg, .rscore svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.rtest__track, .rscore__track { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 6; }
.rtest__prog, .rscore__fill {
  fill: none; stroke: var(--pink); stroke-width: 6; stroke-linecap: round;
  /* 2πr with r=60 */
  stroke-dasharray: 377; stroke-dashoffset: calc(377 - 377 * var(--p, 0));
  transition: stroke-dashoffset .55s var(--ease), stroke .4s var(--ease);
}
.rscore__fill { stroke: var(--pink-light); }
.rtest.is-high .rscore__fill { stroke: var(--pink); }
.rtest__count, .rscore__num {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 2px;
  color: var(--white);
}
.rtest__count b, .rscore__num b { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.rtest__count i, .rscore__num i { font-style: normal; font-size: .78rem; letter-spacing: .1em; color: rgba(255,255,255,.5); }

.rtest__q { display: grid; gap: 16px; }
.rtest__q .eyebrow { color: var(--pink-light); }
.rtest__q .eyebrow::before { background: var(--pink-light); }
.rtest__text { font-size: clamp(1.15rem, .95rem + 1vw, 1.7rem); line-height: 1.35; color: var(--white); }

.rtest__opts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.ropt {
  position: relative; isolation: isolate; overflow: hidden;
  min-width: 132px; height: 52px; padding: 0 26px;
  border: 1.5px solid rgba(255,255,255,.26); border-radius: var(--r-pill);
  color: var(--white); font-weight: 700;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* the fill grows from the middle, the same gesture as the social seals */
.ropt::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--grad-pink);
  transform: scaleX(0); opacity: 0;
  transition: transform .34s var(--ease), opacity .24s var(--ease);
}
.ropt--no::before { background: rgba(255,255,255,.16); }
@media (min-width: 681px) and (hover: hover) { .ropt:hover { transform: translateY(-2px); border-color: transparent; } }
.ropt.is-picked::before { transform: none; opacity: 1; }
@media (min-width: 681px) and (hover: hover) { .ropt:hover::before { transform: none; opacity: 1; } }
.ropt.is-picked { border-color: transparent; }

.rtest__nav { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.rnav {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 50%;
  color: rgba(255,255,255,.8);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.rnav svg { width: 16px; height: 16px; }
@media (min-width: 681px) and (hover: hover) { .rnav:hover:not(:disabled) { background: rgba(255,255,255,.12); border-color: var(--pink-light); } }
.rnav:disabled { opacity: .3; cursor: default; }
.rtest__dots { display: flex; flex-wrap: wrap; gap: 7px; }
.rtest__dots span {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.34);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rtest__dots span.is-filled { background: var(--pink); border-color: var(--pink); }
.rtest__dots span.is-here { transform: scale(1.4); border-color: var(--white); }

/* the plain list is what the page says with no script; it is removed from
   view only once the script that replaces it is running */
.js .rtest__all { display: none; }
.rtest__all { display: grid; gap: 10px; margin-top: 8px; counter-reset: rq; }
.rtest__all li { counter-increment: rq; }
.rtest__all li::before { content: counter(rq) ". "; color: var(--pink-light); font-weight: 700; }

.rtest__verdict { display: grid; gap: 12px; }
.rtest__tag {
  justify-self: start;
  padding: 6px 16px; border-radius: var(--r-pill);
  font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.14); color: var(--white);
}
.rtest.is-high .rtest__tag { background: var(--grad-pink); }
.rtest__verdict p { line-height: 1.75; color: rgba(255,255,255,.78); max-width: 62ch; }
.rtest__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.rtest__cta .btn-ghost { border-color: rgba(255,255,255,.3); color: var(--white); }
@media (min-width: 681px) and (hover: hover) { .rtest__cta .btn-ghost:hover { border-color: var(--pink-light); color: var(--pink-light); } }
.rtest__again {
  justify-self: start; margin-top: 4px;
  font-size: .84rem; color: rgba(255,255,255,.6);
  text-decoration: underline; text-underline-offset: 4px;
  transition: color var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .rtest__again:hover { color: var(--white); } }
.rtest__disc { margin-top: 16px; font-size: .82rem; color: var(--muted-2); }

@media (max-width: 1200px) {
  .pwall, .bgrid--list { grid-template-columns: repeat(2, 1fr); }
  /* the video wall keeps three across — a 16:9 still is legible small, and
     two-up on a tablet made each one nearly half the screen */
  .vwall { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .vtile__title { font-size: .82rem; }
  .vtile__ring { width: 52px; height: 52px; }
  .vtile__tri { width: 18px; height: 18px; }
  .skillgrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .artic { grid-template-columns: 1fr; gap: 30px; }
  .artic__side { position: static; }
  /* the portrait leads on a narrow screen instead of trailing the whole bio */
  .artic--about .artic__side { order: -1; }
  .abcard__photo > img:not(.abcard__seal) { aspect-ratio: 16 / 10; object-position: 50% 22%; }
  .skillgrid { grid-template-columns: repeat(2, 1fr); }
  .ctc-map__frame { aspect-ratio: 16 / 9; }
  .ixgrid { grid-template-columns: 1fr; }
  .bfeat { grid-template-columns: 1fr; }
  /* no min-height with a ratio: it transfers into a minimum WIDTH and the
     card pushes past the screen (same trap as the map panel) */
  .bfeat__img { min-height: 0; aspect-ratio: 16 / 9; }
  .ctc { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .rtest__stage, .rtest__result { grid-template-columns: 1fr; justify-items: start; }
  .rtest__dial, .rscore { justify-self: center; }
}
/* Touch targets. Below 1000px the pointer is a finger, and a 21px crumb or
   a 39px rail row is under the 44px it needs. */
@media (max-width: 1000px) {
  /* Justified body copy on the article pages, tablet and phone. At a
     reading measure this wide a ragged right edge leaves visible gulls
     down the side of every paragraph; hyphens keep justification from
     opening rivers between the words. */
  .artic .prose p, .artic .prose li {
    text-align: justify;
    -webkit-hyphens: auto; hyphens: auto;
  }
  .crumb { gap: 2px; }
  .crumb a, .crumb > span { display: inline-flex; align-items: center; min-height: 44px; }
  .rail__item { min-height: 44px; }
  .rnav { width: 44px; height: 44px; }
  /* standalone controls, so they get a finger's worth of height. The
     remaining short targets are links inside sentences, which cannot be
     padded without breaking the paragraph and are exempt for that reason. */
  .rtcall__alt, .rev__more { min-height: 44px; align-items: center; }
  .rtest__again { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 680px) {
  .pwall, .bgrid--list { grid-template-columns: 1fr; }
  .vwall { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .vtile { gap: 8px; }
  .vtile__title { font-size: .78rem; line-height: 1.35; }
  .vtile__ring { width: 42px; height: 42px; }
  .vtile__tri { width: 14px; height: 14px; }
  .fld-row { grid-template-columns: 1fr; }
  .hubfind { width: 100%; }
  .ctc-map__frame { aspect-ratio: 4 / 5; }
  .ropt { flex: 1 1 140px; }
  .skillgrid { grid-template-columns: 1fr; }
  .tline__item { grid-template-columns: 1fr; gap: 4px; }

  /* ---------- /cikolata-kisti/ index on a phone ----------
     The wide two-column row put a 104px seal next to a paragraph in about
     180px of space. The seal becomes a small round chip on the title's own
     line and the summary runs the full width under it. */
  .icard { grid-template-columns: 1fr; gap: 10px; padding: 14px; }
  .icard__seal { width: 52px; }
  .icard__body { gap: 4px; }
  .icard h3 { font-size: .98rem; }
  .icard p { font-size: .84rem; }
  .icard__go { display: none; }   /* no hover here to reveal it */
  .icard__ring { inset: -4px; }

  /* ---------- The comments on a phone ----------
     Side arrows cost 92px of a 390px panel and the sixteen dots wrapped to
     three rows. The arrows move under the quote, beside a plain "3 / 16",
     and the dots go — a row of dots you cannot hit is not a control. Swipe
     is the primary gesture here anyway. */
  .revs { padding: 24px 20px 18px; }
  .revs__mark { font-size: 5rem; top: -6px; left: 4px; }
  .revs__arrow { position: static; margin: 0; width: 42px; height: 42px; }
  .revs__dots { display: none; }
  .revs__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 18px;
  }
  .revs__at { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
  .revs__at b { color: var(--pink-700); }
  .rev blockquote { -webkit-line-clamp: 4; }
  .rev__seal { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .rail__item, .rail__item::before, .crumb a, .prose a { transition: none; }
  .icard, .icard__ring, .icard__go, .bfeat, .bfeat__img img, .bfeat__ring,
  .vtile, .vtile__img img, .vtile__ring circle, .vtile__tri,
  .pcard, .pcard__img img, .pcard__ring, .vlight, .vlight__frame { transition: none; }
}

/* Touch input above the 1000px breakpoint — an iPad in landscape is
   1024–1366px wide with a finger for a pointer, and was getting the
   21px desktop targets. Same rules as the ≤1000px block, keyed on the
   input instead of the width. (audit 2026-09-25) */
@media (pointer: coarse) {
  .crumb a, .crumb > span { display: inline-flex; align-items: center; min-height: 44px; }
  .rail__item { min-height: 44px; }
  .rtcall__alt, .rev__more { min-height: 44px; align-items: center; }
  .rtest__again { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ==========================================================================
   Tablet / phone pass — 2026-09-28 (user's tablet list, items 1–5)
   ========================================================================== */

/* 5 · Hero route cards on tablet and phone: the phone's treatment for both —
   no slide-out panel (there is no hover to open it), and the card is as tall
   as its text. The front face used to be absolutely positioned inside a
   fixed min-height box: on a tablet that left an empty band under short
   text, and on a phone a longer subtitle ran out of the bottom of the card.
   The front is now in flow and sets the height; the back (the photo seen on
   the turn) stays absolute and simply covers it. */
@media (max-width: 1100px) {
  .hero__routes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .route { width: auto; min-width: 0; }
  .route__face { width: 100%; min-height: 0; }
  .route__front { position: relative; inset: auto; min-height: 100%; padding: 16px 16px 18px; }
  .route__back { position: absolute; inset: 0; }
  .route__panel { display: none; }
  .route:focus-visible .route__panel { width: 0; }
@media (min-width: 681px) and (hover: hover) { .route:hover .route__panel { width: 0; } }
}
@media (max-width: 680px) {
  .hero__routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route__front { padding: 14px 14px 16px; }
}

@media (min-width: 621px) and (max-width: 1100px) {
  /* 1 · Footer brand block spans the full width on a tablet and left its
     right half empty: the social seals move there, stacked. */
  .foot-brand {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 32px; align-items: start;
  }
  .foot-brand > * { grid-column: 1; }
  .foot-brand .foot-social {
    grid-column: 2; grid-row: 1 / span 4; align-self: center;
    flex-direction: column; margin: 0; padding: 0;
  }
}

@media (min-width: 681px) and (max-width: 1100px) {
  /* 3 · a little room under the arrows at the foot of the comments panel */
  .revs { padding-bottom: 40px; }
}

@media (min-width: 621px) and (max-width: 1000px) {
  /* 2 · The risk-test call runs the full width under the article here: the
     copy stays left and the button (with its "or book an appointment"
     link) moves to the right of the card instead of under the text. */
  .rtcall {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 32px; row-gap: 8px; align-items: center;
  }
  .rtcall > * { grid-column: 1; }
  .rtcall .btn-appt { grid-column: 2; grid-row: 1 / span 2; align-self: end; width: auto; margin-top: 0; }
  .rtcall__alt { grid-column: 2; grid-row: 3; align-self: start; justify-self: center; }
}

@media (min-width: 621px) and (max-width: 880px) {
  /* 4 · The test stacks to one column here; the question, its answers and
     the dial above them are centred in the card instead of hanging left. */
  .rtest__stage { justify-items: center; text-align: center; }
  .rtest__q { justify-items: center; }
  .rtest__opts { justify-content: center; }
}

/* The homepage's three-video preview on a phone: two-up left the third tile
   alone with half the row empty. The first plays the lead, full width; the
   other two share the row under it. (The /videolar wall keeps two-up.) */
@media (max-width: 680px) {
  .vwall--peek > .vtile:first-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   Second tablet / phone list — 2026-09-28
   ========================================================================== */

/* ---- Tablet (621–1100px) ---- */
@media (min-width: 621px) and (max-width: 1100px) {
  /* 1 · the credit / copyright row: no inner padding, spread evenly */
  .shell-foot__bottom { padding: 0; justify-content: space-around; }
  /* 2 · larger glyphs in the social seals */
  .foot-social__seal svg { width: 25px; height: 25px; }
  /* 3 · The stacked seals sat at the far right edge of the brand block,
     aligned to nothing below them. The brand block now uses the same three
     columns (and the same gap) as the link columns under it: the copy spans
     the first two, and the seals start exactly where "SİTE" starts. */
  .foot-brand {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(22px, 3vw, 46px);
  }
  .foot-brand > * { grid-column: 1 / 3; }
  .foot-brand .foot-social { grid-column: 3; justify-self: start; align-self: start; }
}

/* ---- Phone (≤620 / ≤680px) ---- */
@media (max-width: 620px) {
  /* 2 · 5 · the bottom row: no padding, and the space above its rule is
     padding now rather than margin */
  .shell-foot__bottom { margin-top: 0; padding: clamp(26px, 3vw, 44px) 0 0; }
}
@media (max-width: 680px) {


  /* 3 · Çikolata Kisti index: two cards to a row. Picture above the text,
     sized to the narrower card; the "read" link (a hover affordance) goes. */
  .ixgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .icard { grid-template-columns: 1fr; align-items: start; gap: 10px; padding: 14px 12px 16px; }
  .icard__seal { width: 64px; padding: 4px; }
  .icard h3 { font-size: .92rem; line-height: 1.3; }
  .icard p {
    font-size: .8rem; line-height: 1.5;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
  }
  .icard__go { display: none; }

  /* 4 · the closing call: its contents centred in the band */
  .ctaband__inner { justify-content: center; text-align: center; }
  .ctaband__inner > div { margin-inline: auto; }

  /* 6 · Video wall: thirty-odd small tiles, each with the site's asymmetric
     petal corners alternating left/right, read as a restless pattern at this
     size. Even corners here, and every title held to three lines so the rows
     line up. */
  .vtile__img, .vtile:nth-child(even) .vtile__img { border-radius: 14px; }
  .vtile__title {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
    min-height: calc(3 * 1.35em);
  }
  .vwall { row-gap: 18px; }
}

/* ==========================================================================
   Web Sitelerimiz (2026-10-05, satır düzeni 2026-10-06) — dört sitenin tanıtımı,
   'döngü' diliyle: her satırda bir site, konu görseli solda (yaprak köşe),
   numara halkası görselin köşesinde; hover'da halka çizilir, diğer satırlar söner.
   Bulunulan site koyu (grad-deep) kart, halkası çizili durur.
   ========================================================================== */
.wrings { display: grid; gap: clamp(18px, 2.2vw, 28px); max-width: 1100px; margin-inline: auto; }
.wring {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-petal);
  background: var(--white); box-shadow: var(--shadow-sm);
  transition: transform .34s var(--ease), box-shadow .34s var(--ease), border-color .34s var(--ease),
              opacity .34s var(--ease), filter .34s var(--ease);
}
.wring:nth-child(even) { border-radius: var(--r-petal-alt); }
.wring__img { position: relative; overflow: hidden; background: var(--ink-900, #001935); min-height: 240px; }
.wring__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgba(0, 25, 53, .22)); }
.wring__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; transition: transform .8s var(--ease); }
/* numara halkası: görselin sol üst köşesinde */
.wring__badge {
  position: absolute; z-index: 2; left: clamp(16px, 1.8vw, 22px); top: clamp(16px, 1.8vw, 22px);
  width: 60px; height: 60px; display: grid; place-items: center;
  border-radius: 50%; background: var(--white); box-shadow: var(--shadow-md);
}
.wring__badge svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.wring__track { fill: none; stroke: var(--pink-100); stroke-width: 2; }
.wring__arc { fill: none; stroke: var(--pink); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .9s var(--ease); }
.wring__badge b { position: relative; font-size: 1rem; font-weight: 700; color: var(--ink-900); letter-spacing: -.02em; }
.wring__body { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3.2vw, 48px) clamp(26px, 3.4vw, 52px); }
.wring__top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.wring__body h2 { margin: 12px 0 12px; font-size: clamp(1.4rem, 1.1rem + .9vw, 1.8rem); line-height: 1.2; }
.wring__body p { color: var(--muted); line-height: 1.75; margin-bottom: 24px; max-width: 58ch; }
/* site linki: alan adı + halka içinde ok; hover'da halka dolar */
.wring__link { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; font-weight: 700; color: var(--ink-900); text-decoration: none; }
.wring__link i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--pink); color: var(--pink); transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.wring__link svg { width: 15px; height: 15px; }
.wring__here {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px;
  border: 1.5px solid rgba(255, 143, 184, .55); border-radius: var(--r-pill);
  color: #fff; font-size: .76rem; font-weight: 700;
}
.wring__here::before { content: ""; width: 9px; height: 9px; background: var(--pink-light); border-radius: 1px 70% 1px 70%; }
/* bulunulan site: koyu, sıcak bant */
.wring.is-current { background: var(--grad-deep); border-color: transparent; box-shadow: var(--shadow-lg); }
.wring.is-current .wring__body h2 { color: #fff; }
.wring.is-current .wring__body p { color: rgba(255, 255, 255, .72); }
.wring.is-current .eyebrow { color: var(--pink-light); }
.wring.is-current .eyebrow::before { background: var(--pink-light); }
.wring.is-current .wring__link { color: #fff; }
.wring.is-current .wring__link i { border-color: var(--pink-light); color: var(--pink-light); }
.wring.is-current .wring__arc { stroke-dashoffset: 0; }
@media (min-width: 681px) and (hover: hover) {
  .wring:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--pink); }
  .wring.is-current:hover { box-shadow: var(--shadow-lg); border-color: transparent; }
  .wring:hover .wring__arc { stroke-dashoffset: 0; }
  .wring:hover .wring__img img { transform: scale(1.04); }
  .wrings:has(.wring:hover) .wring:not(:hover) { opacity: .55; filter: saturate(.6); }
  .wring__link:hover i { background: var(--pink); color: #fff; transform: rotate(-45deg); }
}
/* tablet: oran daralır */
@media (max-width: 980px) {
  .wring { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
}
/* telefon: görsel üstte */
@media (max-width: 680px) {
  .wrings { max-width: 560px; }
  .wring { grid-template-columns: 1fr; }
  .wring__img { min-height: 0; aspect-ratio: 4 / 3; }
  .wring__img::after { background: linear-gradient(180deg, transparent 60%, rgba(0, 25, 53, .22)); }
  .wring__badge { width: 52px; height: 52px; }
  .wring__badge b { font-size: .9rem; }
  .wring__body { padding: 24px 22px 28px; }
}

/* ==========================================================================
   Konu sayfaları (2026-10-06) — Çikolata Kisti ve Endometriozis bölümlerinin
   sayfalarında başlık ve altındaki yazı ortada, iki yana uzanır.
   ========================================================================== */
.ckv2-konu .phero .container { text-align: center; }
.ckv2-konu .phero .crumb { justify-content: center; }
.ckv2-konu .phero h1 { margin-inline: auto; max-width: none; text-wrap: balance; }
.ckv2-konu .phero__lead { margin-inline: auto; max-width: none; text-wrap: pretty; }
/* İçerikteki görseller yazı sütununun tam genişliğinde: 600px'lik görseller
   785px'lik metnin yanında sağda boşluk bırakıyor, kenarlar hizalanmıyordu. */
.ckv2-konu .prose img { display: block; width: 100%; height: auto; }