/* ==========================================================================
   Jinekolojide Robotik Cerrahi v2 — inner page patterns
   ========================================================================== */

/* ---------- Page hero ------------------------------------------------ */
.phero {
  position: relative; overflow: hidden;
  padding-top: calc(var(--shell-h) + var(--shell-gap) + 36px);
  padding-bottom: clamp(24px, 3vw, 42px);
}
.phero__field { position: absolute; inset: -30% -10% auto -10%; height: 150%; z-index: -1; }
.phero__field span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .42; }
.phero__field span:nth-child(1) { width: min(38vw, 430px); aspect-ratio: 1; left: -6%; top: -18%; background: rgba(229, 86, 145, .3); }
.phero__field span:nth-child(2) { width: min(30vw, 350px); aspect-ratio: 1; right: -2%; top: 6%; background: rgba(15, 54, 97, .22); }

.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; }

.phero__row { display: grid; grid-template-columns: 1fr; gap: clamp(22px, 3vw, 40px); margin-top: 18px; align-items: center; }
.phero__row:has(.phero__fig) { grid-template-columns: 1.05fr .95fr; }
.phero__text h1 { font-size: var(--fs-h1); line-height: 1.1; }
.phero__text .lead { margin-top: 14px; max-width: 58ch; font-size: var(--fs-lead); color: var(--muted); line-height: 1.75; }
.phero__fig { margin: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.phero__fig img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; }

/* ---------- Prose ---------------------------------------------------- */
.container.narrow { width: min(760px, 100% - var(--gutter) * 2); }
.prose { color: var(--muted); line-height: 1.85; }
/* a hard cap on the measure: a wider screen gives more margin, not
   longer lines */
.prose p, .prose li { max-width: 74ch; }
.prose > * + * { margin-top: 1.1em; }
.prose p { color: var(--muted); }
.prose h2 { font-size: var(--fs-h3); color: var(--navy); margin-top: 1.7em; }
.prose h3 { font-size: 1.1rem; color: var(--navy); margin-top: 1.5em; }
.prose a { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 0; }
.prose li { position: relative; padding-left: 26px; margin-bottom: 9px; }
/* a pink tick rather than a bullet, to match the brand's other lists */
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--grad-pink);
}
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; }
.prose ol li::before {
  content: counter(n); position: absolute; left: 0; top: .1em;
  font-size: .78rem; font-weight: 700; color: var(--pink);
}

.artmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; font-size: .84rem; color: var(--muted-2); }
.crumb__cat {
  display: inline-flex; align-items: center; padding: 5px 13px;
  border-radius: var(--r-pill); background: var(--pink-50); color: var(--pink);
  font-weight: 700; font-size: .76rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .crumb__cat:hover { background: var(--pink); color: var(--white); } }
/* The pill is 30px tall; on touch its hit area reaches 44px without the
   pill itself growing. */
@media (pointer: coarse) {
  .crumb__cat { position: relative; }
  .crumb__cat::after { content: ""; position: absolute; inset: -7px -4px; }
}

/* ---------- Treatment layout ----------------------------------------- */
/* The rail used to lead, which pushed the body copy 316px inside the
   header's left edge — the text lined up with nothing. The reading column
   comes first now and starts exactly where the logo does; the rail closes
   the right edge where the header's button does. Same column split as
   .artic, so the two page families measure the same. */
.tlayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 26%, 364px);
  gap: clamp(30px, 4vw, 72px);
  align-items: start;
}
.tlayout > .tbody { grid-column: 1; grid-row: 1; }
.tlayout > .tside { grid-column: 2; grid-row: 1; }
/* The rail is now a column of two cards — contents, then the appointment
   card — so the sticky behaviour belongs to the column, not to the nav. */
.tside {
  position: sticky; top: calc(var(--shell-h) + var(--shell-gap) + 20px);
  display: grid; gap: 16px; align-content: start;
}
.tnav {
  display: flex; flex-direction: column; gap: 2px;
  padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--white); box-shadow: var(--shadow-sm);
}
.tnav__head { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px; }
.tnav a {
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: .85rem; color: var(--muted); line-height: 1.4;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .tnav a:hover { background: var(--pink-50); color: var(--navy); transform: translateX(4px); } }
/* a finger needs more than the 37px the desktop padding gives */
@media (max-width: 620px) { .tnav a { padding: 12px; } }
.tbody { display: flex; flex-direction: column; gap: clamp(26px, 3vw, 40px); min-width: 0; }
/* Justified, with hyphenation on: justifying Turkish without it opens
   rivers of white space between the long words. lang="tr" on <html> is
   what tells the engine which dictionary to hyphenate by. */
.tlayout--justify .prose p,
.tlayout--justify .prose li {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* The lead block reads as an intro rather than as an untitled section. */
.tblock--lead .prose > p:first-child {
  font-size: var(--fs-lead); font-weight: 500; line-height: 1.7;
  color: var(--navy-700);
}
.tblock { scroll-margin-top: calc(var(--shell-h) + var(--shell-gap) + 24px); }
.tblock h2 { font-size: var(--fs-h3); margin-bottom: 14px; }
/* a pink rule that grows out of the heading */
.tblock h2::after {
  content: ""; display: block; width: 34px; height: 3px; margin-top: 12px;
  border-radius: 3px; background: var(--grad-pink);
}

/* ---------- Person --------------------------------------------------- */
.person { display: grid; grid-template-columns: 380px 1fr; gap: clamp(26px, 4vw, 56px); align-items: start; }
.person__photo { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.person__photo img { width: 100%; height: auto; display: block; }
.person__body h2 { margin: 10px 0 18px; font-size: var(--fs-h2); }

/* ---------- Pager ---------------------------------------------------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: clamp(30px, 4vw, 48px); }
.pager__btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--white); color: var(--navy);
  font-size: .85rem; font-weight: 700;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pager__btn svg { width: 14px; height: 14px; }
@media (min-width: 681px) and (hover: hover) { .pager__btn:hover { background: var(--navy); color: var(--white); border-color: transparent; transform: translateY(-2px); } }
.pager__pos { font-size: .85rem; color: var(--muted); }
.pager__pos b { color: var(--navy); }

/* ---------- Robot TV intro ------------------------------------------- */
.rtv-intro { padding-bottom: 0; }
.rtv-intro__row {
  display: grid; grid-template-columns: minmax(0, 420px) 1fr;
  gap: clamp(22px, 3vw, 44px); align-items: center;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface);
}
.rtv-intro__video { width: 100%; height: auto; border-radius: var(--r-lg); display: block; box-shadow: var(--shadow-md); }
.rtv-intro__text { font-size: var(--fs-lead); line-height: 1.75; color: var(--muted); }
.vcard__by { display: block; margin-top: 3px; font-size: .78rem; color: var(--muted-2); }

/* ---------- Timeline -------------------------------------------------- */
.tline { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: 26px; }
/* one continuous rail behind the whole column */
.tline::before {
  content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(var(--pink), rgba(229, 86, 145, .12));
}
.tline__item { position: relative; padding: 12px 0 12px 8px; }
.tline__item::before {
  content: ""; position: absolute; left: -26px; top: 19px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--pink);
  transition: transform var(--dur) var(--ease-pop), background var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .tline__item:hover::before { transform: scale(1.25); background: var(--pink); } }
.tline__yr { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--pink); }
.tline__item p { margin-top: 3px; color: var(--navy); font-weight: 500; }

/* ---------- Contact ---------------------------------------------------
   One panel, split down the middle. Both halves are children of the same
   stretch grid inside a shared bordered shell, so they can't end up at
   different heights — the asymmetry in the first pass came from two
   separately-bordered cards each sizing to its own content. */
.ilet {
  display: grid; grid-template-columns: .85fr 1.15fr;
  align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-md);
}
.ilet__side {
  display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 40px);
  background: var(--grad-navy); color: rgba(255, 255, 255, .78);
  position: relative; overflow: hidden;
}
/* a slow drifting glow so the navy half isn't a dead rectangle */
.ilet__side::before {
  content: ""; position: absolute; right: -30%; top: -20%;
  width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(229, 86, 145, .34), transparent 70%);
  animation: iletdrift 16s var(--ease) infinite;
}
@keyframes iletdrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-12%, 14%) scale(1.18); }
}
.ilet__side > * { position: relative; z-index: 1; }
.ilet__eyebrow {
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pink-light);
}
.ilet__side h2 { margin: 12px 0 10px; font-size: var(--fs-h3); color: var(--white); }
.ilet__intro { font-size: .9rem; line-height: 1.7; color: rgba(255, 255, 255, .62); margin-bottom: 8px; }

.ilet__row {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 15px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  transition: transform var(--dur) var(--ease);
}
.ilet__row--static { cursor: default; }
@media (min-width: 681px) and (hover: hover) { .ilet__row:not(.ilet__row--static):hover { transform: translateX(4px); } }
.ilet__ico {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .1); color: var(--white);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ilet__ico svg { width: 17px; height: 17px; }
@media (min-width: 681px) and (hover: hover) { .ilet__row:not(.ilet__row--static):hover .ilet__ico { background: var(--pink); color: var(--white); } }
.ilet__txt { font-size: .9rem; line-height: 1.5; color: var(--white); }
.ilet__txt b {
  display: block; margin-bottom: 2px;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.ilet__social { display: flex; gap: 9px; margin-top: auto; padding-top: 22px; }
.ilet__social a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .1); color: var(--white);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .ilet__social a:hover { background: var(--pink); transform: translateY(-3px); } }

/* ---- the form half ---- */
.ilet__form { display: flex; flex-direction: column; padding: clamp(26px, 3vw, 40px); }
.ilet__form h2 { margin: 12px 0 22px; font-size: var(--fs-h3); }
/* .ilet__form is a column flex container, and the panel stretches it to
   the navy half's height. Flex items shrink by default, so when the form
   was the taller of the two every .field was squeezed BELOW its own
   input's height — the control then overflowed its wrapper and ran into
   the field beneath it. Only the message box is allowed to flex. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: none; }
.field { position: relative; margin-bottom: 12px; flex: none; }
.field--grow { flex: 1 1 auto; display: flex; min-height: 120px; }
.field--grow .form-control { flex: 1; resize: vertical; min-height: 120px; }
.form-control {
  /* display:block, not the input default of inline-block. As an inline box
     the control sat on its parent's text baseline, and the descender space
     under that baseline left .field 4.9px SHORTER than the input inside it
     — so every control overflowed its own wrapper and ran into the field
     below. This is what made the writing areas look stacked on each other. */
  display: block;
  width: 100%; padding: 26px 16px 9px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* the label rides inside the field and lifts on focus or once filled —
   placeholder=" " is what makes :placeholder-shown the "empty" test */
.field > label {
  position: absolute; left: 17px; top: 15px;
  font-size: .92rem; color: var(--muted-2);
  pointer-events: none;
  transition: transform .22s var(--ease), font-size .22s var(--ease), color .22s var(--ease);
  transform-origin: 0 0;
}
/* Lifted far enough to actually clear the text. At -9px the label's
   bottom still landed 1.6px BELOW the first line of what you type, so the
   two sat on top of each other; the control's top padding went up to 26px
   to match. */
.field > .form-control:focus + label,
.field > .form-control:not(:placeholder-shown) + label {
  transform: translateY(-12px) scale(.76);
  color: var(--pink);
}
.form-control:focus {
  outline: none; border-color: var(--pink); background: var(--white);
  box-shadow: 0 0 0 4px var(--pink-50);
}
.form-control.is-bad { border-color: #d43f3f; box-shadow: 0 0 0 4px rgba(212, 63, 63, .08); }
.ilet__form .btn-appt--block { margin-top: 6px; height: 52px; }
.ilet__note { margin-top: 12px; font-size: .78rem; line-height: 1.5; color: var(--muted-2); }
.ilet__form .sonuc { margin-top: 12px; font-size: .88rem; min-height: 1.2em; }
.ilet__form .sonuc.ok { color: #2f7d4f; }
.ilet__form .sonuc.err { color: #c53030; }
.ilet__form.is-sending { opacity: .7; pointer-events: none; }

/* The map iframe carries NO rounded clip — not on an ancestor and not on
   itself. Chrome stops routing pointer events into a cross-origin iframe
   that is clipped by a radius, which is why the map drew perfectly and
   would not pan; both variants were tested and both broke it.

   The corners are painted ON TOP instead: one pointer-events:none overlay
   whose four radial gradients fill exactly the area outside each corner
   arc with the page colour. Same rounded look, nothing clipped. */
.ilet-map__frame { position: relative; box-shadow: var(--shadow-md); line-height: 0; border-radius: var(--r-xl); }
.ilet-map__frame iframe {
  width: 100%; height: clamp(280px, 40vw, 440px);
  border: 0; display: block;
}
.ilet-map__rnd {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(circle 32px at 100% 100%, #0000 0 32px, var(--white) 32px) left top / 33px 33px no-repeat,
    radial-gradient(circle 32px at 0    100%, #0000 0 32px, var(--white) 32px) right top / 33px 33px no-repeat,
    radial-gradient(circle 32px at 100% 0,    #0000 0 32px, var(--white) 32px) left bottom / 33px 33px no-repeat,
    radial-gradient(circle 32px at 0    0,    #0000 0 32px, var(--white) 32px) right bottom / 33px 33px no-repeat;
}
.ilet-map__ph { border-radius: var(--r-xl); }

/* ---------- Responsive ------------------------------------------------ */
@media (max-width: 980px) {
  .phero__row, .phero__row:has(.phero__fig) { grid-template-columns: 1fr; }
  .tlayout { grid-template-columns: 1fr; }
  .tnav { position: static; }
  .person { grid-template-columns: 1fr; }
  .person__photo { max-width: 380px; }
  .rtv-intro__row { grid-template-columns: 1fr; }
  .ilet { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tnav a, .tline__item::before, .ilet__ico, .pager__btn, .crumb__cat,
  .ilet__row, .field > label { transition: none; }
  .ilet__side::before { animation: none; }
}

/* ---------- Overview pages -------------------------------------------
   The title used to sit alone above a long drop of white. The robot
   cut-out now fills the right of the hero and a sibling strip closes the
   gap underneath, so the four robotic-surgery pages read as one set. */
.phero__fig--cut {
  border-radius: 0; box-shadow: none; background: none;
  display: grid; place-items: center;
}
.phero__fig--cut img {
  width: auto; max-width: 100%; max-height: 330px; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 34px 48px rgba(15, 54, 97, .28));
  animation: cutfloat 8s var(--ease) infinite;
}
@keyframes cutfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.otabs-sec { padding-block: 0 clamp(20px, 3vw, 34px); }
.otabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.otab {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--white);
  font-size: .86rem; font-weight: 500; line-height: 1.3; color: var(--muted);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.otab::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-navy); transform: translateY(101%);
  transition: transform .42s var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .otab:hover { color: var(--white); border-color: transparent; transform: translateY(-4px); } }
@media (min-width: 681px) and (hover: hover) { .otab:hover::before { transform: translateY(0); } }
.otab__ico {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--pink-50);
  transition: background var(--dur) var(--ease);
}
.otab__ico img { width: 22px; height: 22px; object-fit: contain; }
@media (min-width: 681px) and (hover: hover) { .otab:hover .otab__ico { background: rgba(255, 255, 255, .14); } }
/* .otab.is-current and .otab:hover have equal specificity, and is-current
   came later — so hovering the current card left navy text on the navy
   fill. The hover state is now stated for it explicitly. */
.otab.is-current { border-color: var(--pink); color: var(--navy); font-weight: 700; }
.otab.is-current .otab__ico { background: var(--grad-pink); }
@media (min-width: 681px) and (hover: hover) { .otab.is-current:hover { color: var(--white); border-color: transparent; } }
@media (min-width: 681px) and (hover: hover) { .otab.is-current:hover .otab__ico { background: rgba(255, 255, 255, .18); } }
.section--tight { padding-top: clamp(20px, 3vw, 34px); }

/* ---------- Article layout (.artic) -----------------------------------
   The body copy used to be a 760px grey column floating inside a 1344px
   container: it began 234px inside the header's left edge and stopped
   445px short of its right, so nothing lined up with anything. Now the
   measure starts on the header's left edge and an aside closes the right
   edge on the header's right, and the block reads as one width. */
.artic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 26%, 364px);
  gap: clamp(30px, 4vw, 72px);
  align-items: start;
}
.artic__main { min-width: 0; }
.artic .prose { font-size: 1.05rem; line-height: 1.8; }
.artic .prose p, .artic .prose li { max-width: 72ch; }

/* The opening paragraph carries the page — it is set as a lead rather
   than as the first of four identical grey blocks. */
.artic .prose > p:first-child {
  max-width: 66ch;
  font-size: var(--fs-lead); font-weight: 500; line-height: 1.7;
  color: var(--navy-700);
}
.artic .prose > p:first-child::before {
  content: ""; display: block;
  width: 52px; height: 3px; margin-bottom: 20px;
  border-radius: 2px; background: var(--grad-pink);
}

/* Headings get counted. A numbered sequence tells the reader how much of
   the argument is left, which a row of same-sized navy lines does not. */
.artic .prose { counter-reset: artsec; }
.artic .prose h2 {
  counter-increment: artsec;
  display: flex; align-items: baseline; gap: 14px;
  margin-top: 2em; font-size: var(--fs-h3);
}
.artic .prose h2::before {
  content: counter(artsec, decimal-leading-zero);
  flex: none;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  color: var(--pink);
  /* sits on the heading's own baseline, not in a rail beside the text */
  transform: translateY(-.15em);
}

/* ---------- Article aside --------------------------------------------- */
.artic__side {
  position: sticky; top: calc(var(--shell-h) + var(--shell-gap) + 22px);
  display: grid; gap: 16px;
}
/* Built by main.js from the page's own h2s. */
.sidetoc {
  padding: 20px 22px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
}
.sidetoc[hidden] { display: none; }
.sidetoc__h {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2);
  margin-bottom: 12px;
}
.sidetoc a {
  display: block; padding: 7px 0 7px 18px;
  position: relative;
  font-size: .89rem; line-height: 1.45; color: var(--muted);
  transition: color var(--dur) var(--ease);
}
/* the marker is the reading position, so it belongs to the link that is
   current rather than to every link at once */
.sidetoc a::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 8px; height: 2px; border-radius: 1px;
  background: var(--muted-2); opacity: .5;
  /* scaleX off the left edge rather than an animated width: 1 -> 1.75 on an
     8px bar is the same 8px -> 14px, with no relayout on hover */
  transform-origin: 0 50%;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .sidetoc a:hover { color: var(--navy); } }
.sidetoc a.is-current { color: var(--navy); font-weight: 700; }
.sidetoc a.is-current::before { transform: scaleX(1.75); background: var(--pink); opacity: 1; }

.authcard {
  padding: 22px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--white); box-shadow: var(--shadow-sm);
}
.authcard__top { display: flex; gap: 14px; align-items: center; }
.authcard__ph {
  flex: none; width: 62px; height: 62px;
  border-radius: 50%; overflow: hidden; background: var(--surface-2);
}
.authcard__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.authcard__k {
  display: block; margin-bottom: 3px;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2);
}
.authcard__top strong { display: block; font-size: 1rem; color: var(--navy); line-height: 1.3; }
.authcard__role { display: block; margin-top: 3px; font-size: .78rem; line-height: 1.4; color: var(--muted); }
.authcard__note {
  margin: 16px 0 16px;
  padding-top: 16px; border-top: 1px solid var(--line);
  font-size: .84rem; line-height: 1.6; color: var(--muted);
}
/* .btn-appt--block already stretches the button; layout.css owns it. */

/* The biography column is the shorter of the two, so it stretches to the
   künye's height and the quote is pushed to its foot — the two columns
   then start and finish on the same lines instead of one trailing off
   77px above the other. Sticky is pointless on this row (the side is the
   taller column, so it has nothing to scroll within) and would fight the
   stretch, so it is off here. */
.artic--bio { align-items: stretch; }
.artic--bio .artic__main { display: flex; flex-direction: column; }
.artic--bio .artic__side { position: static; }

/* The credential that used to be one grey row in the künye. It is the
   strongest single fact on the page, so it is set as a quote in the
   reading column rather than buried in a sidebar list. */
.pullq {
  margin: clamp(26px, 3vw, 38px) 0 0;
  padding: 24px 28px;
  border-radius: var(--r-lg);
  background: var(--pink-50);
}
.artic--bio .pullq { margin-top: auto; }
.pullq p {
  margin: 0; max-width: 46ch;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.55;
  color: var(--navy); font-weight: 500;
}
.pullq b { font-weight: 700; color: var(--pink-600); }


/* ---------- Künye (About) --------------------------------------------- */
.kunye {
  padding: 24px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
}
.kunye__h {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2);
}
.kunye__list { margin-top: 4px; }
.kunye__row { padding: 14px 0; border-bottom: 1px solid var(--line); }
.kunye__row:last-child { border-bottom: 0; padding-bottom: 0; }
.kunye__row dt {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pink);
  margin-bottom: 5px;
}
.kunye__row dd { margin: 0; font-size: .89rem; line-height: 1.55; color: var(--navy); }

@media (max-width: 1000px) {
  /* one column: the aside stops being a rail and becomes a footer block */
  .artic { grid-template-columns: 1fr; gap: 32px; }
  .artic__side { position: static; }
  .artic .prose p, .artic .prose li { max-width: 72ch; }
  .tlayout { grid-template-columns: 1fr; gap: 32px; }
  .tlayout > .tbody { grid-column: 1; grid-row: 1; }
  .tlayout > .tside { grid-column: 1; grid-row: 2; position: static; }
}

/* ---------- About page ------------------------------------------------ */
.ahero {
  position: relative; overflow: hidden;
  padding-top: calc(var(--shell-h) + var(--shell-gap) + 36px);
  padding-bottom: clamp(30px, 4vw, 56px);
}
.ahero__field { position: absolute; inset: -20% -10% auto -10%; height: 140%; z-index: -1; }
.ahero__field span { position: absolute; border-radius: 50%; filter: blur(64px); }
.ahero__field span:nth-child(1) { width: min(40vw, 460px); aspect-ratio: 1; left: -8%; top: -14%; background: rgba(229, 86, 145, .3); }
.ahero__field span:nth-child(2) { width: min(32vw, 380px); aspect-ratio: 1; right: 4%; top: 2%; background: rgba(15, 54, 97, .2); }
.ahero__field span:nth-child(3) { width: min(26vw, 300px); aspect-ratio: 1; left: 44%; bottom: -14%; background: rgba(255, 143, 184, .24); }
.ahero__row { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 60px); align-items: center; margin-top: 20px; }
.ahero__text h1 { font-size: var(--fs-hero); line-height: 1.05; letter-spacing: -.03em; margin-top: 14px; }
.ahero__text .lead { margin-top: 18px; max-width: 52ch; font-size: var(--fs-lead); color: var(--muted); line-height: 1.75; }
.ahero__stats { display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 36px); margin-top: 30px; }
.astat b { display: block; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 700; line-height: 1; color: var(--navy); letter-spacing: -.02em; }
.astat span { display: block; margin-top: 6px; font-size: .82rem; color: var(--muted); }

/* the portrait sits on a stack of offset plates, so the block has depth */
.ahero__stack { position: relative; justify-self: end; width: min(100%, 420px); aspect-ratio: 5 / 6; }
.ahero__plate { position: absolute; border-radius: var(--r-xl); }
.ahero__plate--back { inset: 8% -6% 12% 14%; background: var(--grad-pink); opacity: .22; transform: rotate(6deg); }
.ahero__plate--mid { inset: 4% 4% 8% 4%; background: var(--grad-navy); opacity: .14; transform: rotate(-4deg); }
.ahero__photo {
  position: absolute; inset: 0; margin: 0;
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.ahero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; display: block; }
.ahero__badge {
  position: absolute; left: -18px; bottom: 26px;
  display: block; padding: 13px 18px;
  border-radius: var(--r-md);
  background: var(--white); box-shadow: var(--shadow-md);
  font-size: .76rem; color: var(--muted); line-height: 1.35;
}
.ahero__badge b { display: block; font-size: .86rem; color: var(--navy); margin-bottom: 2px; }

/* the timeline is a horizontal track the reader scrolls through */
.trail-sec { overflow: hidden; }
.trail {
  display: flex; gap: 14px;
  padding: 26px var(--gutter) 34px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.trail__card {
  position: relative; flex: 0 0 auto;
  width: min(250px, 72vw); padding: 22px 20px 26px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--white); box-shadow: var(--shadow-sm);
  scroll-snap-align: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .trail__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--pink-100); } }
.trail__yr { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--pink); }
.trail__card p { margin-top: 8px; font-size: .92rem; line-height: 1.5; color: var(--navy); font-weight: 500; }
/* the dots line up across the row and read as one rail */
.trail__dot {
  position: absolute; left: 20px; bottom: -7px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--pink);
  transition: transform var(--dur) var(--ease-pop), background var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .trail__card:hover .trail__dot { transform: scale(1.3); background: var(--pink); } }
.trail::after { content: ""; flex: 0 0 var(--gutter); }

@media (max-width: 980px) {
  .ahero__row { grid-template-columns: 1fr; }
  .ahero__stack { justify-self: center; }
  .otabs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .otabs { grid-template-columns: 1fr; }
  .ahero__badge { left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .phero__fig--cut img { animation: none; }
  .otab, .otab::before, .trail__card, .trail__dot { transition: none; }
}

/* ---------- Trail controls -------------------------------------------
   The track is inside .container now, so it is exactly header-wide; the
   arrows sit above it and the whole thing is drag-scrollable. */
.trail-sec .sechead { position: relative; padding-right: 110px; }
.trailbar { position: absolute; right: 0; top: 0; display: flex; gap: 8px; }
.trail-sec .container { position: relative; }
.trailbtn {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--white); color: var(--navy);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.trailbtn svg { width: 18px; height: 18px; }
@media (min-width: 681px) and (hover: hover) { .trailbtn:hover { background: var(--navy); color: var(--white); border-color: transparent; transform: translateY(-2px); } }
.trailbtn[disabled] { opacity: .35; pointer-events: none; }
.trail {
  display: flex; gap: 14px;
  margin-top: clamp(18px, 2.4vw, 28px);
  padding: 8px 2px 34px;
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  scroll-snap-type: none;          /* snapping fights the auto-drift */
}
.trail::-webkit-scrollbar { display: none; }
.trail.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.trail.is-dragging .trail__card { pointer-events: none; }
.trail::after { content: ""; flex: 0 0 1px; }
.trail__card { user-select: none; }

/* ---------- da Vinci block (About) ------------------------------------ */
.dvb { background: var(--surface); }
.dvb__row { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 62px); align-items: center; }
.dvb__text h2 { margin: 12px 0 16px; font-size: var(--fs-h2); }
.dvb__text p { color: var(--muted); line-height: 1.8; }
.dvb__list { margin: 20px 0 26px; display: grid; gap: 10px; }
.dvb__list li { position: relative; padding-left: 28px; color: var(--navy); font-weight: 500; font-size: .94rem; }
.dvb__list li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--grad-pink);
}
.dvb__figure { position: relative; display: grid; place-items: center; }
/* The cut-out used to bob up and down inside two pulsing rings. It is a
   surgical instrument, not a mascot: it holds still now, on a plate that
   labels the three things about it that actually matter. */
.dvbplate {
  position: relative;
  display: grid; place-items: center;
  width: 100%; padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.dvbplate__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(15,54,97,.055) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(15,54,97,.055) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 25%, transparent 78%);
}
.dvbplate img {
  position: relative; z-index: 1;
  width: auto; max-width: 100%; max-height: 340px;
  filter: drop-shadow(0 26px 40px rgba(15, 54, 97, .22));
}
/* the callouts are pinned to the plate, not to the artwork, so they stay
   put at any width instead of chasing a rescaled cut-out */
.dvbnote {
  position: absolute; z-index: 2;
  display: grid; gap: 1px;
  padding: 9px 13px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm);
  font-size: .72rem; line-height: 1.2; color: var(--muted);
}
.dvbnote b { font-size: .98rem; color: var(--navy); letter-spacing: -.01em; }
.dvbnote--a { top: 11%; left: 5%; }
.dvbnote--b { top: 44%; right: 4%; }
.dvbnote--c { bottom: 11%; left: 9%; }

/* ---------- Robot TV video hero --------------------------------------- */
.rtv-hero { padding-block: clamp(10px, 2vw, 22px) 0; }
.rtv-hero__frame {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--navy-900);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 7;
}
.rtv-hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rtv-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11, 18, 32, .86) 0%, rgba(11, 18, 32, .55) 42%, rgba(11, 18, 32, .06) 78%);
}
.rtv-hero__copy {
  position: absolute; left: clamp(20px, 4vw, 52px); right: clamp(20px, 4vw, 52px);
  bottom: clamp(20px, 4vw, 44px);
  max-width: 46ch; color: var(--white);
}
.rtv-hero__tag {
  display: inline-block; margin-bottom: 12px;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--grad-pink); color: var(--white);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.rtv-hero__copy p { color: rgba(255, 255, 255, .88); font-size: var(--fs-lead); line-height: 1.6; }
/* The sound toggle that sat on the video is gone; the intro plays muted. */

@media (max-width: 860px) {
  .dvb__row { grid-template-columns: 1fr; }
  .dvb__figure { min-height: 280px; }
  /* The clip is 1920x702 — a 2.735 ratio. Forcing the frame to 4/3 and
     filling it with object-fit:cover threw away 51% of the picture on a
     tablet and a phone. The frame stops dictating a shape here: the video
     runs at its own ratio, whole, and the copy that used to sit on top of
     it moves underneath — at 2.735 there is nowhere near enough height to
     overlay text on a narrow screen anyway. */
  .rtv-hero__frame { aspect-ratio: auto; display: flex; flex-direction: column; }
  .rtv-hero__video { aspect-ratio: 1920 / 702; height: auto; object-fit: contain; }
  .rtv-hero__veil { display: none; }
  .rtv-hero__copy {
    position: static;
    max-width: none;
    padding: clamp(16px, 4vw, 26px);
    background: var(--navy-900);
  }
  .trail-sec .sechead { padding-right: 0; }
  .trailbar { position: static; margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .trailbtn { transition: none; }
}


/* ---------- Map (contact) ---------------------------------------------
   The iframe is injected by main.js when the panel nears the viewport, so
   there is nothing to click and nothing loaded before it is wanted. This
   placeholder holds the exact height the iframe will take, so its arrival
   does not shift the page. */
.ilet-map__ph {
  display: block; width: 100%; height: clamp(280px, 40vw, 440px);
  background: var(--surface-2);
  background-image: linear-gradient(rgba(15,54,97,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(15,54,97,.05) 1px, transparent 1px);
  background-size: 44px 44px;
}
.ilet-map__note { margin-top: 16px; }

/* ==========================================================================
   Tablet / phone list — 2026-09-28 (items numbered as in the request)
   ========================================================================== */

/* 1 · Mobile menu: the desktop's three dropdowns are three groups that open
   (native <details>, header.php). The height eases open where the browser
   can animate to `auto`; elsewhere the group simply opens. */
.mobilemenu { interpolate-size: allow-keywords; }
.mnu-grp > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  color: var(--navy); font-weight: 500; font-size: .96rem;
  list-style: none; cursor: pointer;
  opacity: 0; transform: translateX(18px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), color var(--dur) var(--ease);
}
.mnu-grp > summary::-webkit-details-marker { display: none; }
.mobilemenu.is-open .mnu-grp > summary { opacity: 1; transform: none; }
.mnu-grp > summary svg { width: 16px; height: 16px; flex: none; color: var(--muted); transition: transform .35s var(--ease), color var(--dur) var(--ease); }
.mnu-grp[open] > summary { color: var(--pink); }
.mnu-grp[open] > summary svg { transform: rotate(180deg); color: var(--pink); }
.mnu-grp > summary:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 6px; }
.mnu-grp::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .35s var(--ease), content-visibility .35s allow-discrete;
}
.mnu-grp[open]::details-content { block-size: auto; }
.mnu-grp__body { display: grid; padding: 4px 0 8px; border-bottom: 1px solid var(--line); }
.mobilemenu__nav .mnu-grp__body a {
  padding: 10px 0 10px 16px; border-bottom: 0;
  font-size: .9rem; color: var(--muted);
  position: relative;
}
.mobilemenu__nav .mnu-grp__body a::before {
  content: ""; position: absolute; left: 2px; top: 50%; width: 6px; height: 2px; border-radius: 1px;
  background: var(--line); transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .mobilemenu__nav .mnu-grp__body a:hover { color: var(--navy); } }
@media (min-width: 681px) and (hover: hover) { .mobilemenu__nav .mnu-grp__body a:hover::before { background: var(--pink); width: 9px; } }
/* the header already shows the language switcher from 621px up */
@media (min-width: 621px) { .mnu-langs { display: none; } }

/* 2 · "Teknolojiyi Yakından Tanıyın" on a tablet: the steps were stacked
   absolutely inside a 260px box, so a longer step ran under the progress
   rail and the button. All steps now share one grid cell — the box is as
   tall as the tallest step — and the rail and button follow below it. */
@media (min-width: 681px) and (max-width: 1040px) {
  .rv__copy { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .rv__label { grid-row: 1; justify-self: start; }
  .rv__step { position: relative; top: auto; grid-row: 2; grid-column: 1; margin-top: 18px; }
  .rv__rail { grid-row: 3; margin-top: 24px; }
  .rv .btn-ghost { grid-row: 4; justify-self: start; }
}

/* 3 · #klinik on tablet and phone: the accordion of slivers (built for a
   mouse) becomes a strip of ordinary cards you swipe through — picture on
   top, title and description always readable below it, two cards in view
   on a tablet and one-and-a-bit on a phone so it is obvious there is more.
   Prev/next buttons and an "n / 5" count come from main.js. */
@media (max-width: 1100px) {
  .klgrid {
    flex-direction: row; height: auto; gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; padding: 4px 2px 10px;
  }
  .klgrid::-webkit-scrollbar { display: none; }
  .klp, .klp.is-open {
    flex: 0 0 calc((100% - 14px) / 2); height: auto;
    display: flex; flex-direction: column;
    background: var(--white); border: 1px solid var(--line);
    box-shadow: var(--shadow-sm); cursor: default; text-align: left;
    scroll-snap-align: start;
  }
  .klp img, .klp.is-open img {
    position: relative; inset: auto; height: auto; aspect-ratio: 16 / 11;
    transform: none; filter: none;
  }
  .klp__veil { display: none; }
  .klp__no, .klp.is-open .klp__no {
    left: 12px; right: auto; top: 12px;
    padding: 5px 10px; border-radius: var(--r-pill);
    background: rgba(11, 18, 32, .62); color: var(--white); text-shadow: none;
    font-size: .72rem;
  }
  .klp__body { position: static; gap: 6px; padding: 16px 18px 20px; color: var(--navy); }
  .klp__t, .klp.is-open .klp__t {
    order: -1; transform: none; white-space: normal;
    font-size: 1.02rem; line-height: 1.3; color: var(--navy); text-shadow: none;
  }
  .klp__d, .klp:not(.is-open) .klp__d, .klp.is-open .klp__d {
    opacity: 1; transform: none; height: auto; width: auto; margin: 0; overflow: visible;
    font-size: .88rem; line-height: 1.55; color: var(--muted); text-shadow: none;
  }
  .klnav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; }
  .klnav__btn {
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid var(--line); background: var(--white); color: var(--navy);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .klnav__btn svg { width: 18px; height: 18px; }
  @media (min-width: 681px) and (hover: hover) { .klnav__btn:hover { background: var(--navy); border-color: var(--navy); color: var(--white); } }
  .klnav__btn:disabled { opacity: .35; pointer-events: none; }
  .klnav__at { min-width: 56px; text-align: center; font-size: .86rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
  .klnav__at b { color: var(--pink); }
}
@media (min-width: 1101px) { .klnav { display: none; } }
@media (max-width: 680px) {
  .klp, .klp.is-open { flex-basis: 84%; }
}

/* 4 · 10 · Press cards: no hover effect on tablets and phones (homepage
   section and the Basında Biz page). The logos show in colour from the
   start instead of waiting for a hover that a finger never produces. */
@media (max-width: 1109px) {
  @media (min-width: 681px) and (hover: hover) { .pcard:hover { transform: none; box-shadow: none; border-color: var(--line); } }
  .pcard__logo img { filter: none; opacity: 1; }
@media (min-width: 681px) and (hover: hover) { .pcard:hover .pcard__logo img { filter: none; opacity: 1; } }
  @media (min-width: 681px) and (hover: hover) { .pcard:hover .pcard__ext { transform: none; color: var(--muted); } }
}

/* 5 · the photo-and-card beside the FAQ, centred once it stacks */
@media (max-width: 980px) {
  .faqside { margin-inline: auto; width: 100%; }
}

/* 6 · Team: three to a row on tablets, on every page that uses the grid */
@media (min-width: 681px) and (max-width: 1040px) {
  .egrid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

/* 7 · Footer: the three link columns share one row on a tablet */
@media (min-width: 621px) and (max-width: 1040px) {
  .shell-foot__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}

/* 8 · Article author card, once the side column drops under the article
   (every article page): photo and name on the left, the button on the
   right, the note full width along the bottom. */
@media (min-width: 621px) and (max-width: 1000px) {
  .authcard {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px; align-items: center;
  }
  .authcard__top { grid-column: 1; grid-row: 1; }
  .authcard .btn-appt { grid-column: 2; grid-row: 1; width: auto; }
  .authcard__note { grid-column: 1 / -1; grid-row: 2; margin: 16px 0 0; }
}

/* 9 · Contact map. The map's corners are painted on (clipping a
   cross-origin iframe stops it panning), and those painted corners were
   also covering the frame's own shadow — so the frame read as a square
   card around a round map. The frame is now a white card with a 10px
   margin round the map: the card carries the radius and the shadow, and
   the painted corners sit inside it, on white. */
.ilet-map__frame { padding: 10px; background: var(--white); border-radius: var(--r-xl); }
.ilet-map__ph { border-radius: 22px; }
.ilet-map__rnd {
  inset: 10px;
  background:
    radial-gradient(circle 22px at 100% 100%, #0000 0 22px, var(--white) 22px) left top / 23px 23px no-repeat,
    radial-gradient(circle 22px at 0    100%, #0000 0 22px, var(--white) 22px) right top / 23px 23px no-repeat,
    radial-gradient(circle 22px at 100% 0,    #0000 0 22px, var(--white) 22px) left bottom / 23px 23px no-repeat,
    radial-gradient(circle 22px at 0    0,    #0000 0 22px, var(--white) 22px) right bottom / 23px 23px no-repeat;
}


/* Menu CTA pinned to the bottom of the screen: the foot (language grid on a
   phone + "Randevu Talep Et") is pushed to the bottom of the drawer when
   the menu is short, and sticks to the bottom edge while a long menu (a
   group opened) scrolls under it. The drawer's own bottom padding moves
   into the foot so the sticky edge is the screen edge. */
.mobilemenu { padding-bottom: 0; }
.mobilemenu__foot {
  position: sticky; bottom: 0; z-index: 2;
  margin-top: auto;
  padding: 16px 0 calc(22px + env(safe-area-inset-bottom));
  background: var(--white);
  box-shadow: 0 -14px 18px -14px rgba(15, 54, 97, .18);
}

/* ==========================================================================
   Phone list — 2026-09-28 (items numbered as in the request)
   ========================================================================== */

/* 7 · the footer's extra bottom padding for the floating buttons was
   removed again, as asked (the rule itself is deleted, not overridden) */

/* 8 · Footer link lists: main.js wraps each list in .foot-col__body. Above
   620px every list is open and the heading is plain text. */
.foot-col__body { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 621px) {
  .foot-col__head[role="button"] { cursor: default; pointer-events: none; }
}
@media (max-width: 620px) {
  .shell-foot__inner { gap: 0; }
  .foot-col { gap: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .foot-col:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .foot-col__head {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 54px; margin: 0; cursor: pointer;
  }
  .foot-col__head::after {
    content: ""; width: 9px; height: 9px; margin-right: 4px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-3px); opacity: .7;
    transition: transform .35s var(--ease), color var(--dur) var(--ease);
  }
  .foot-col.is-open .foot-col__head { color: var(--pink); }
  .foot-col.is-open .foot-col__head::after { transform: rotate(-135deg) translate(-2px, -2px); opacity: 1; }
  .foot-col__head:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 6px; }
  .foot-col__body { display: none; padding-bottom: 12px; }
  .foot-col.is-open .foot-col__body { display: flex; animation: foot-open .35s var(--ease); }
}

/* 1 · Treatment cards on a phone: two to a row, and the arrow button
   (a hover affordance) goes */
@media (max-width: 680px) {
  .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tcard__go { display: none; }
}

/* 6 · Team cards on a phone: two to a row, on every page with the grid */
@media (max-width: 680px) {
  .egrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* 4 · 5 · Body copy justified on a phone: the robotic-surgery pages and
   Hakkımda (body classes from header.php). Hyphenation keeps justified
   Turkish from opening gaps between words. */
@media (max-width: 680px) {
  .pg-robotik .prose p, .pg-robotik .prose li,
  .pg-hakkimda .prose p, .pg-hakkimda .prose li, .pg-hakkimda .lead {
    text-align: justify; text-justify: inter-word;
    -webkit-hyphens: auto; hyphens: auto;
  }
}

/* 3 · Languages sit inside the menu as a group (header.php), phones only */
@media (min-width: 621px) { .mnu-grp--lang { display: none; } }
.mnu-grp__cur {
  margin-left: auto; margin-right: 10px;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--navy); color: var(--white);
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
}
.mnu-grp--lang .mnu-grp__body { padding: 8px 0 12px; }
.mnu-grp--lang .mnu-langs { display: grid; margin: 0; }
.mobilemenu__nav .mnu-grp--lang .mnu-langs__opt { padding: 0; border: 1px solid var(--line); font-size: .78rem; color: var(--navy); }
.mobilemenu__nav .mnu-grp--lang .mnu-langs__opt::before { display: none; }
.mobilemenu__nav .mnu-grp--lang .mnu-langs__opt.is-current { color: var(--white); }

/* 2 · The showcase on a phone (main.js builds .rv__swipe and .rv__dots).
   The robot picture crossfades between the five angles as the cards are
   swiped, its glow breathes, the depth lights drift, and the rail and dots
   track the card in view. */
@media (max-width: 680px) {
  .rv[data-swipe] .rv__visual { aspect-ratio: 1 / 1; max-height: none; margin-inline: auto; width: min(100%, 360px); }
  .rv[data-swipe] .rv__frame { opacity: 0; transform: scale(.94) translateY(8px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
  .rv[data-swipe] .rv__frame.is-on { opacity: 1; transform: none; }
  .rv[data-swipe] .rv__glow { animation: rv-breathe 3.6s ease-in-out infinite; }
  .rv[data-swipe] .rv__depth-a { animation: rv-drift 9s ease-in-out infinite alternate; }
  .rv[data-swipe] .rv__depth-b { animation: rv-drift 11s ease-in-out -4s infinite alternate-reverse; }
  .rv[data-swipe] .rv__copy { min-height: 0; margin-top: 8px; }
  .rv[data-swipe] .rv__label { align-self: center; }
  .rv__swipe {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; overscroll-behavior-x: contain;
    margin-top: 14px; gap: 0;
  }
  .rv__swipe::-webkit-scrollbar { display: none; }
  .rv[data-swipe] .rv__step {
    position: relative; top: auto; flex: 0 0 100%; margin: 0;
    scroll-snap-align: start;
    padding: 20px 20px 22px; border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
    opacity: .45; transform: scale(.96);
    transition: opacity .45s var(--ease), transform .5s var(--ease), border-color .45s var(--ease);
    pointer-events: auto;
  }
  .rv[data-swipe] .rv__step.is-on { opacity: 1; transform: none; border-color: rgba(229, 86, 145, .45); }
  .rv[data-swipe] .rv__step h3 { margin-top: 8px; font-size: 1.3rem; }
  .rv[data-swipe] .rv__step p { margin-top: 10px; font-size: .95rem; line-height: 1.65; }
  .rv__dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .rv__dots button {
    width: 28px; height: 28px; padding: 0; border: 0; background: none; position: relative;
  }
  .rv__dots button::before {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 8px; height: 8px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .3);
    transition: width .35s var(--ease), background .35s var(--ease);
  }
  .rv__dots button.is-on::before { width: 22px; background: var(--pink); }
  .rv[data-swipe] .rv__rail { margin-top: 14px; }
  .rv[data-swipe] .btn-ghost { align-self: center; }
}
@keyframes rv-breathe { 50% { opacity: .55; transform: scaleX(1.12); } }
@keyframes rv-drift { to { transform: translate(8%, -10%) scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .rv[data-swipe] .rv__glow, .rv[data-swipe] .rv__depth-a, .rv[data-swipe] .rv__depth-b { animation: none; }
}
@keyframes foot-open { from { opacity: 0; transform: translateY(-6px); } }
/* the swipe strip's full width (five cards side by side) must not become
   the grid column's minimum — without these the column grew to fit all
   five and the showcase ran off the right of the screen */
@media (max-width: 680px) {
  .rv[data-swipe] .rv__stage { grid-template-columns: minmax(0, 1fr); }
  .rv[data-swipe] .rv__copy, .rv__swipe { min-width: 0; width: 100%; }
}

/* room between the social row and the first footer accordion on a phone */
@media (max-width: 620px) {
  .foot-social { padding-bottom: 20px; }
}

/* ==========================================================================
   Web Sitelerimiz (2026-10-05, satır düzeni 2026-10-06) — dört sitenin tanıtımı.
   Her satırda bir site: sitenin kendi plakası (dvbplate — ızgara desenli beyaz
   zemin, cam not çipi) solda konu görseliyle, metin + site linki (btn-appt) sağda.
   ========================================================================== */
.wsx .container { display: grid; gap: clamp(40px, 5vw, 72px); }
.wsx__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.wsx__plate {
  position: relative; display: grid; place-items: center;
  padding: clamp(22px, 3vw, 40px);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--white); box-shadow: var(--shadow-sm); overflow: hidden;
  transition: box-shadow var(--dur-slow) var(--ease), border-color var(--dur) var(--ease);
}
.wsx__row.is-current .wsx__plate { border-color: rgba(229, 86, 145, .4); box-shadow: 0 0 0 5px var(--pink-50), var(--shadow-sm); }
.wsx__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(15,54,97,.055) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(15,54,97,.055) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 25%, transparent 78%);
}
.wsx__frame {
  position: relative; z-index: 1; display: block; width: 100%;
  border-radius: var(--r-md); overflow: hidden; background: var(--navy);
  box-shadow: 0 0 0 1px rgba(15, 54, 97, .08), 0 26px 46px rgba(15, 54, 97, .18);
  transition: transform var(--dur-slow) var(--ease);
}
.wsx__frame img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center bottom; }
@media (min-width: 681px) and (hover: hover) {
  .wsx__row:hover .wsx__plate { box-shadow: var(--shadow-md); }
  .wsx__row.is-current:hover .wsx__plate { box-shadow: 0 0 0 5px var(--pink-50), var(--shadow-md); }
  .wsx__row:hover .wsx__frame { transform: translateY(-6px); }
}
.wsx__note {
  position: absolute; z-index: 2; display: grid; gap: 1px;
  padding: 9px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm); font-size: .72rem; line-height: 1.2; color: var(--muted);
}
.wsx__note b { font-size: .98rem; color: var(--navy); letter-spacing: -.01em; }
.wsx__note--a { top: 14px; left: 14px; }
.wsx__row.is-current .wsx__note--a b { color: var(--pink); }
.wsx__top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.wsx__text h2 { margin: 12px 0 16px; font-size: var(--fs-h2); color: var(--navy); }
.wsx__text p { color: var(--muted); line-height: 1.8; max-width: 52ch; }
.wsx__cta { margin-top: 26px; }
.wsx__cta .btn-appt svg { position: relative; z-index: 2; width: 15px; height: 15px; }
.wsx__cta .btn-appt__label { position: relative; z-index: 2; }
.wsx__here {
  display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 14px;
  border: 1px solid rgba(229, 86, 145, .35); border-radius: var(--r-pill);
  background: var(--pink-50); color: var(--pink-600); font-size: .78rem; font-weight: 700;
}
.wsx__pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); }
.wsx__pulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--pink); opacity: 0; animation: wsxPulse 2s var(--ease) infinite; }
@keyframes wsxPulse { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wsx__pulse::after { animation: none; } }
/* tablet: oranlar daralır, yine yan yana */
@media (max-width: 980px) {
  .wsx__row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; }
  .wsx__plate { padding: 18px; }
}
/* telefon: plaka üstte, metin altta */
@media (max-width: 680px) {
  .wsx__row { grid-template-columns: 1fr; gap: 22px; max-width: 560px; margin-inline: auto; }
  .wsx__plate { border-radius: var(--r-lg); }
  .wsx__frame { border-radius: var(--r-sm); }
  .wsx__note { padding: 7px 10px; font-size: .66rem; }
  .wsx__note b { font-size: .86rem; }
  .wsx__note--a { top: 10px; left: 10px; }
  .wsx__text p { max-width: none; }
  .wsx__cta .btn-appt { width: 100%; justify-content: center; }
}