/* ==========================================================================
   Header / Footer / Mobile menu / Scroll-to-top / WhatsApp FAB
   ========================================================================== */

/* ---------- Brand ---------- */
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand__logo { display: block; width: auto; height: 46px; }
/* The supplied lockup is the navy one (#0F3661), which would disappear
   on the dark surfaces — rendered as a solid white mark there instead.
   Swap this for a real light-variant asset if one exists. */
.brand--dark .brand__logo { filter: brightness(0) invert(1); }
@media (max-width: 640px) {
  .brand__logo { height: 38px; }
}

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 1000; }
.site-header__bar {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-scrolled .site-header__bar {
  box-shadow: 0 10px 30px rgba(0,45,116,.08);
  border-color: var(--line);
}
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
  gap: 24px;
}
.mainnav { justify-self: center; }
.mainnav ul { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); }
.mainnav a {
  position: relative;
  font-weight: 500;
  font-size: .93rem;
  color: var(--ink);
  padding: 8px 2px;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.mainnav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
  border-radius: 2px;
}
@media (min-width: 681px) and (hover: hover) { .mainnav a:hover { color: var(--pink); } }
@media (min-width: 681px) and (hover: hover) { .mainnav a:hover::after { transform: scaleX(1); } }

/* ---------- Horizontal treatment dropdown (replaces any accordion pattern) ---------- */
.mainnav li.has-drop { position: relative; }
.mainnav li.has-drop > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-chev { transition: transform var(--dur) var(--ease); flex-shrink: 0; }
.mainnav li.has-drop:focus-within .nav-chev { transform: rotate(180deg); }
@media (min-width: 681px) and (hover: hover) { .mainnav li.has-drop:hover .nav-chev { transform: rotate(180deg); } }
/* .navdrop is an invisible hit-zone (no gap, no dead space) that starts
   right at the trigger's bottom edge; .navdrop__panel is the actual
   visible card, offset down from inside it. Without this split, the
   dropdown's real gap (top:100% + margin-top) fell outside the <li>'s
   hoverable box, so the mouse lost :hover mid-transit and it snapped
   shut before reaching the panel. */
.navdrop {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  padding-top: 10px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
  z-index: 1050;
}
.navdrop__panel {
  display: flex; align-items: stretch; gap: 4px;
  max-width: calc(100vw - 32px);
  overflow-x: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  transform: translateY(-6px);
  transition: transform var(--dur) var(--ease);
}
.mainnav li.has-drop:focus-within .navdrop {
  opacity: 1; visibility: visible; pointer-events: auto;
}
@media (min-width: 681px) and (hover: hover) { .mainnav li.has-drop:hover .navdrop {
  opacity: 1; visibility: visible; pointer-events: auto;
} }
.mainnav li.has-drop:focus-within .navdrop__panel {
  transform: translateY(0);
}
@media (min-width: 681px) and (hover: hover) { .mainnav li.has-drop:hover .navdrop__panel {
  transform: translateY(0);
} }
.navdrop a {
  padding: 11px 16px;
  border-radius: var(--r-md);
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.navdrop a::after { content: none; }
.navdrop a:focus-visible { background: var(--pink-50); color: var(--pink-600); }
@media (min-width: 681px) and (hover: hover) { .navdrop a:hover { background: var(--pink-50); color: var(--pink-600); } }

.site-header__actions { justify-self: end; display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
/* Phone number: tablet/mobile only, never on desktop (see @media block below) */
.header-phone { display: none; align-items: center; gap: 8px; font-weight: 700; font-size: .88rem; color: var(--navy); white-space: nowrap; }
.header-phone svg { color: var(--pink); }
.header-phone--block { display: none; }

/* ---------- Language switcher ----------
   Same card as .navdrop so it reads as part of the header, but stacked
   vertically: three short rows, code + native name. */
.langpick { position: relative; }
.langpick__cur {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px; padding: 0 6px;
  font-weight: 700; font-size: .85rem; letter-spacing: .04em; color: var(--navy);
  cursor: pointer; list-style: none; border-radius: var(--r-md);
  transition: color var(--dur) var(--ease);
}
.langpick__cur::-webkit-details-marker { display: none; }
@media (min-width: 681px) and (hover: hover) { .langpick__cur:hover { color: var(--pink-600); } }
.langpick[open] .nav-chev { transform: rotate(180deg); }
.langpick__panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1050;
  display: flex; flex-direction: column; gap: 2px; min-width: 190px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 8px;
  animation: langpick-in var(--dur) var(--ease);
}
@keyframes langpick-in { from { opacity: 0; transform: translateY(-6px); } }
.langpick__opt {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px;
  border-radius: var(--r-md); font-size: .9rem; font-weight: 500; color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.langpick__opt b { width: 22px; font-size: .75rem; letter-spacing: .06em; color: var(--pink-600); }
.langpick__opt.is-current { color: var(--navy); font-weight: 700; background: var(--pink-50); }
a.langpick__opt:focus-visible { background: var(--pink-50); color: var(--pink-600); }
@media (min-width: 681px) and (hover: hover) { a.langpick__opt:hover { background: var(--pink-50); color: var(--pink-600); } }
.langpick__opt::after { content: none; }

.mnu-langs { display: flex; gap: 8px; }
.mnu-langs__opt {
  flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px;
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-pill);
  font-weight: 700; font-size: .85rem; letter-spacing: .06em; color: var(--white);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mnu-langs__opt.is-current { background: var(--white); border-color: var(--white); color: var(--navy); }
a.mnu-langs__opt:focus-visible { border-color: var(--pink); background: rgba(229,86,145,.18); }
@media (min-width: 681px) and (hover: hover) { a.mnu-langs__opt:hover { border-color: var(--pink); background: rgba(229,86,145,.18); } }

.hbtn { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; }
.hbtn span { display: block; height: 2px; width: 100%; background: var(--navy); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }

/* ---------- Mobile menu ---------- */
.mobilemenu {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(400px, 88vw);
  background: var(--grad-navy);
  z-index: 1200;
  display: flex; flex-direction: column;
  padding: 22px;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
  overflow-y: auto;
}
.mobilemenu.open { transform: translateX(0); }
.mobilemenu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.mbtn-close { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; color: var(--white); border-radius: 50%; background: rgba(255,255,255,.1); }
.mobilemenu__nav ul { display: flex; flex-direction: column; }
.mobilemenu__nav a {
  display: block; padding: 15px 4px; font-size: 1.1rem; font-weight: 700; color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,.12);
  /* translateX, not padding-left — the nudge is the same 10px and it no
     longer relayouts the row on every hover */
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mobilemenu__nav a:focus-visible { color: var(--pink); transform: translateX(10px); }
@media (min-width: 681px) and (hover: hover) { .mobilemenu__nav a:hover { color: var(--pink); transform: translateX(10px); } }
.mobilemenu__foot { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.mobilemenu__foot .header-phone { color: var(--white); justify-content: center; }
.mobilemenu__backdrop {
  position: fixed; inset: 0; background: rgba(0,10,30,.5); backdrop-filter: blur(2px);
  z-index: 1100; opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.mobilemenu__backdrop.open { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }

/* 8 nav items + phone + CTA genuinely don't fit before ~1400px — measured
   an actual horizontal-scroll overflow at 1280px with the breakpoint set
   any lower than this. */
@media (max-width: 1400px) {
  .mainnav { display: none; }
  .header-phone { display: flex; }
  .hbtn { display: flex; }
  .site-header__inner { grid-template-columns: 1fr auto; }
  .header-phone--block { display: flex; }
}

/* Phone collapses to an icon-only pill on small phones so it never
   crowds the Randevu Al button + hamburger in the persistent top bar. */
@media (max-width: 560px) {
  .site-header__actions { gap: 10px; }
  .site-header__actions .btn-sm { padding: 0 16px; font-size: .82rem; }
  .langpick { display: none; }
}
/* Icon-only phone pill up to 640px: with the number spelled out, the
   language button, number, Randevu and burger left the wordmark 66px wide
   at 561. */
@media (max-width: 640px) {
  .site-header__actions .header-phone span { display: none; }
  .site-header__actions .header-phone { padding: 10px; border-radius: 50%; background: var(--pink-50); width: 44px; justify-content: center; }
}
/* Phones. Measured 2026-09-25: phone pill + Randevu + burger left the
   wordmark 93px wide at 390 and 23px at 320 — unreadable. The number is
   still one tap away in the menu (and WhatsApp stays on screen), so the
   pill yields first and the wordmark keeps a readable floor. */
@media (max-width: 420px) {
  .site-header__actions .header-phone { display: none; }
  .site-header__inner { gap: 12px; }
  .site-header .brand__logo { height: auto; width: clamp(108px, 34vw, 141px); max-width: none; }
}
@media (max-width: 359px) {
  .site-header__actions .btn-sm { padding: 0 12px; }
  .site-header__actions .btn-sm svg { display: none; }
}
@media (prefers-reduced-motion: reduce) { .langpick__panel { animation: none; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--grad-navy); color: rgba(255,255,255,.75); padding-top: clamp(56px, 7vw, 96px); }
.site-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
/* Same lockup as the header. Its artwork is navy, so .brand--dark whites
   it out for the dark surface -- which would flatten the pink "e" along
   with everything else. So a second, unfiltered copy is laid back on top,
   clipped to just that mark. Measured off taner-usta-logo.svg (viewBox
   193x52): the "e" spans 33.94%-44.09% across, and its ink stops at 52%
   down while the pink "MİYOM CERRAHİSİ" path starts at 64% -- hence the
   42% bottom cut, which keeps the subtitle white like the rest. */
.brand--footer .brand__stack { position: relative; display: block; }
.brand--footer .brand__logo.brand__logo--mark {
  position: absolute; top: 0; left: 0;
  filter: none;
  clip-path: inset(0 55.91% 42% 33.94%);
}
.footer-brand p { color: rgba(255,255,255,.6); margin: 16px 0 20px; max-width: 320px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
@media (min-width: 681px) and (hover: hover) { .footer-social a:hover { background: var(--pink); transform: translateY(-3px); } }
.footer-col__head { color: var(--white); font-weight: 700; font-size: .95rem; margin-bottom: 18px; }
.footer-col__head--sp { margin-top: 22px; }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { display: inline-block; font-size: .92rem; transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
@media (min-width: 681px) and (hover: hover) { .footer-col a:hover { color: var(--pink); transform: translateX(4px); } }
.footer-contact li { font-size: .9rem; line-height: 1.5; }
@media (min-width: 681px) and (hover: hover) { .footer-contact a:hover { color: var(--pink); } }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-block: 22px; font-size: .85rem; }
.site-footer__bottom .fav b { color: var(--pink); }

@media (max-width: 900px) {
  /* three link columns in one row under the full-width brand block — at
     two columns the third (Ameliyatsız Tedavi + İletişim) dropped to a row
     of its own and left the right half of the footer empty (2026-09-28) */
  .site-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .site-footer__top { grid-template-columns: 1fr; }
}

/* ---------- WhatsApp FAB ---------- */
.whatsapp-fab { position: fixed; left: clamp(18px, 3vw, 32px); bottom: clamp(18px, 3vw, 32px); z-index: 900; }
.whatsapp-fab a {
  position: relative;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 34px rgba(37,211,102,.4);
  animation: wa-wiggle 4.8s ease-in-out infinite;
}
/* Two staggered outward-expanding rings instead of a flat box-shadow
   pulse, plus a periodic "ringing" wiggle to catch the eye. */
.whatsapp-fab a::before,
.whatsapp-fab a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25d366;
  opacity: 0;
  animation: wa-ripple 2.6s ease-out infinite;
  pointer-events: none;
}
.whatsapp-fab a::after { animation-delay: 1.3s; }
@keyframes wa-ripple {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(1.9); opacity: 0; }
}
@keyframes wa-wiggle {
  0%, 85%, 100% { transform: rotate(0deg); }
  87% { transform: rotate(-10deg); }
  89% { transform: rotate(9deg); }
  91% { transform: rotate(-7deg); }
  93% { transform: rotate(5deg); }
  95% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab a, .whatsapp-fab a::before, .whatsapp-fab a::after { animation: none; }
}

/* ---------- Page loader (splash) ---------- */
/* Geometry is derived from the logo artwork: inside the 193x52 SVG the
   raster wordmark occupies the top 37 units (the pink "MIYOM CERRAHISI"
   line below it is a separate <path>, cropped away here). Measured off
   the embedded raster: the "e" mark spans 33.94%-44.09% of the wordmark
   width, so its centre sits at 39.015% -- 10.985% left of the wordmark's
   centre -- and 55.28% of the way down the cropped band. Those numbers
   drive every offset below.

   Sequence: the "e" alone, large and centred; a navy line orbits it
   twice; the line pulls out to the wordmark's left edge as the whole
   composition zooms back to wordmark scale, then sweeps right. The
   wordmark's reveal clip tracks the line exactly (both linear, same
   keyframe percentages) so each letter lands under the line as it
   passes, and the line fades once it clears the last one. */
.pageloader {
  position: fixed; inset: 0; z-index: 4000; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  animation: pl-dismiss .55s var(--ease) 3.9s forwards;
}
.pageloader__stage {
  /* Every offset is a ratio of the loader artwork's width, so the whole
     composition rescales from that one number.

     Measured off taner-usta-loader.svg (viewBox 354.21 x 31.8, with the
     "Taner Usta" raster placed at x 161.208 w 192.922): the "e" mark
     spans 63.995%-69.525% of the width, so its centre is at 66.760%
     across and 62.736% down. The artwork is 8.978% as tall as it is wide.

     That vertical figure is the MEASURED ink centre of the glyph, sampled
     off the artwork itself: the "e" runs from 29.2% to 96.2% of the band's
     height, because a lowercase letter sits on the baseline rather than in
     the middle of the line. The number used before was near the middle of
     the whole band, which put the orbit centre above the letter — the ring
     circled a point the "e" was not at, and the letter sat low inside it. */
  --pl-logo: 760px;                                          /* wordmark width */
  --pl-ex:    calc(var(--pl-logo) * .66760);                 /* "e" centre, from the left edge */
  --pl-shift: calc(var(--pl-logo) / 2 - var(--pl-ex));       /* puts the "e" on screen centre */
  --pl-left:  calc(var(--pl-ex) * -1);                       /* wordmark left edge, from the "e" */
  --pl-right: calc(var(--pl-logo) - var(--pl-ex));           /* wordmark right edge, from the "e" */
  --pl-r:     calc(var(--pl-logo) * .053);                   /* orbit radius */
  --pl-th:    max(3px, calc(var(--pl-logo) * .0053));        /* stroke thickness */
  --pl-big: 4.2;                                             /* how large the lone "e" stands */
  position: relative;
  width: var(--pl-logo);
  height: calc(var(--pl-logo) * .08978);
  /* Scaling about the "e" itself keeps it pinned on screen centre no
     matter what --pl-big is. */
  transform-origin: var(--pl-ex) 62.736%;
  animation: pl-stage 3.9s linear forwards;
}
.pageloader__word, .pageloader__e { position: absolute; inset: 0; overflow: hidden; }
.pageloader__word img, .pageloader__e img { display: block; width: 100%; height: auto; }
/* Hidden until the sweep reaches each letter */
.pageloader__word { clip-path: inset(0 100% 0 0); animation: pl-reveal 3.9s linear forwards; }
/* The "e" alone: same artwork, same place, so it lines up seamlessly
   with the wordmark once that is revealed underneath it. */
.pageloader__e { clip-path: inset(0 30.475% 0 63.995%); }
.pageloader__orbit {
  position: absolute; top: 62.736%; left: var(--pl-ex);
  width: 0; height: 0;
  animation: pl-orbit 3.9s linear forwards;
}
/* The stroke lives in its own 520x260 viewBox where 100 units == --pl-r,
   with the viewBox origin sitting exactly on the "e" centre. So the arc
   is drawn at the orbit radius directly and needs no transform of its
   own while it circles: the parent's rotation carries it round, and
   because it never counter-rotates it stays tangent to the circle and
   reads as a segment of a ring. */
.pageloader__line {
  position: absolute;
  left: calc(var(--pl-r) * -2.6); top: calc(var(--pl-r) * -1.3);
  width: calc(var(--pl-r) * 5.2); height: calc(var(--pl-r) * 2.6);
  /* the reset's `svg { max-width: 100% }` would resolve against the
     zero-width orbit anchor and collapse this to nothing */
  max-width: none; max-height: none;
  overflow: visible;
  animation: pl-line 3.9s linear forwards;
}
.pageloader__line path {
  fill: none;
  stroke: var(--navy);
  stroke-linecap: round;
  animation: pl-uncurl 3.9s linear forwards;
}
@keyframes pl-orbit {
  /* eased rather than constant-speed, so the two laps flow into the
     hand-off instead of stopping dead */
  0%      { transform: rotate(0deg); animation-timing-function: cubic-bezier(.35, 0, .25, 1); }
  51.28%  { transform: rotate(720deg); }   /* 2 laps, ending back on the left */
  100%    { transform: rotate(720deg); }
}
@keyframes pl-uncurl {
  /* the ring segment unrolls into a straight stroke as it pulls out of
     orbit -- same node count both sides, so the two curves interpolate.
     It goes from a 75deg arc (131 units long) to a 200-unit stroke, so
     it doesn't only flatten, it draws out into a brush. */
  0%, 51.28% { d: path("M-79.34 60.88 C-106.89 24.97 -106.89 -24.97 -79.34 -60.88");
               stroke-width: calc(var(--pl-th) * 1.5 / var(--pl-big));
               animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  62.82%, 100% { d: path("M-200 0 C-133.33 0 -66.67 0 0 0");
                 stroke-width: var(--pl-th); }
}
@keyframes pl-line {
  /* parked on the orbit until the hand-off, then the straightened stroke
     sweeps across the wordmark. Its left tip sits 2 x --pl-r left of
     the viewBox origin, which is what the offsets below cancel out. */
  0%, 51.28%   { transform: translateX(0); opacity: 1;
                 animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  62.82%       { transform: translateX(calc(var(--pl-left) + var(--pl-r) * 2)); opacity: 1;
                 animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  92.31%       { transform: translateX(calc(var(--pl-right) + var(--pl-r) * 2)); opacity: 1; }
  94.87%, 100% { transform: translateX(calc(var(--pl-right) + var(--pl-r) * 2)); opacity: 0; }
}
@keyframes pl-reveal {
  /* same segment, same easing as pl-line: the reveal edge and the
     stroke's trailing tip stay locked together to the pixel */
  0%, 62.82% { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  92.31%     { clip-path: inset(0 0% 0 0); }
  100%       { clip-path: inset(0 0% 0 0); }
}
@keyframes pl-stage {
  /* large while the stroke orbits, zooming back to wordmark scale as it
     pulls out left, then sliding so the finished wordmark sits centred */
  0%, 51.28% { transform: translateX(var(--pl-shift)) scale(var(--pl-big));
               animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  62.82%     { transform: translateX(var(--pl-shift)) scale(1);
               animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  92.31%     { transform: translateX(0) scale(1); }
  100%       { transform: translateX(0) scale(1); }
}
@keyframes pl-dismiss {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
/* Skipped on repeat visits (main.js), and never shown at all to anyone
   who has asked for reduced motion. */
.pageloader.is-skipped { display: none; }
@media (max-width: 1000px) {
  .pageloader__stage { --pl-logo: 560px; }
}
@media (max-width: 640px) {
  .pageloader__stage { --pl-logo: 300px; --pl-big: 3.2; }
}
@media (prefers-reduced-motion: reduce) {
  .pageloader { display: none; }
}

/* ==========================================================================
   Touch targets

   Audited at 834px and 390px: the logo link (38px), the header phone button
   (38px), the breadcrumb links (22px), the contact details (24px) and the
   footer credit (22px) were all under the 44px a finger needs. Applied from
   1040px down, where the pointer is already a finger — and gated on
   hover:none as well, so a small desktop window keeps its compact header.

   Links inside a sentence are deliberately untouched: they cannot be padded
   without breaking the paragraph, and the guideline exempts them for that. */
@media (max-width: 1040px) {
  .site-header .brand { min-height: 44px; }
  /* 44px tall; the width is only fixed where the pill is icon-only (≤560).
     A fixed 44px width clipped the number to "0216 64" in the bar and to
     "216 649 57 7" in the menu. */
  .header-phone { min-width: 44px; height: 44px; }
  .breadcrumb a, .breadcrumb span { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-brand .brand { min-height: 44px; }
  /* Footer link lists were 24px rows with an 11px gap — padding the link
     itself instead gives the same rhythm a 44px finger target. */
  .footer-col ul { gap: 0; }
  .footer-col a { padding-block: 10px; }
  .site-footer .fav { display: inline-flex; align-items: center; min-height: 44px; }
  .contact-info-item a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Touch input above 1040px (iPad landscape): the same targets, keyed on
   the input instead of the width. (audit 2026-09-25) */
@media (pointer: coarse) {
  .site-header .brand { min-height: 44px; }
  .breadcrumb a, .breadcrumb span { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-brand .brand { min-height: 44px; }
  .site-footer .fav { display: inline-flex; align-items: center; min-height: 44px; }
  .contact-info-item a { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-col ul { gap: 0; }
  .footer-col a { padding-block: 10px; }
}

/* ==========================================================================
   Languages — twelve now, the same set as the sibling v2 sites (2026-09-28)
   ========================================================================== */

/* Header dropdown: twelve rows no longer fit under the bar on a short
   screen, so the panel is capped and scrolls. */
.langpick__panel { max-height: min(62vh, 440px); overflow-y: auto; overscroll-behavior: contain; }

/* Mobile menu: the languages are a group of the menu that opens (the same
   pattern as jinekolojiderobotikcerrahiv2), shown only where the header has
   no switcher of its own. The drawer here is navy, so the colours are the
   drawer's own. */
.mobilemenu { interpolate-size: allow-keywords; }
.mnu-grp--lang { display: none; }
@media (max-width: 560px) { .mnu-grp--lang { display: block; } }
.mnu-grp--lang > summary {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 4px; border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: 1.1rem; font-weight: 700; color: var(--white);
  list-style: none; cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.mnu-grp--lang > summary::-webkit-details-marker { display: none; }
.mnu-grp--lang > summary svg { width: 16px; height: 16px; flex: none; opacity: .75; transition: transform .35s var(--ease); }
.mnu-grp__cur {
  margin-left: auto;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--white); color: var(--navy);
  font-size: .74rem; letter-spacing: .06em;
}
.mnu-grp--lang[open] > summary { color: var(--pink); }
.mnu-grp--lang[open] > summary svg { transform: rotate(180deg); opacity: 1; }
.mnu-grp--lang > summary:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 6px; }
.mnu-grp--lang::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .35s var(--ease), content-visibility .35s allow-discrete;
}
.mnu-grp--lang[open]::details-content { block-size: auto; }
.mnu-grp--lang .mnu-grp__body { padding: 12px 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.mnu-grp--lang .mnu-langs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.mnu-grp--lang .mnu-langs__opt { min-height: 42px; border-radius: 12px; font-size: .78rem; }
.mobilemenu__nav .mnu-grp--lang .mnu-langs__opt:focus-visible { transform: none; }
@media (min-width: 681px) and (hover: hover) { .mobilemenu__nav .mnu-grp--lang .mnu-langs__opt:hover { transform: none; } }
@media (max-width: 359px) { .mnu-grp--lang .mnu-langs { grid-template-columns: repeat(4, 1fr); } }

/* Randevu + phone stay at the bottom of the screen while a long menu
   scrolls under them (same as the sibling site). */
.mobilemenu { padding-bottom: 0; }
.mobilemenu__foot {
  position: sticky; bottom: 0; z-index: 2;
  padding-bottom: calc(22px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(15, 54, 97, 0) 0, var(--navy) 24px);
}

/* footer phone / WhatsApp rows: glyph + number (2026-10-22) */
a.foot-ico-link { display: inline-flex; align-items: center; gap: 9px; }
.foot-ico-link .foot-ico { width: 16px; height: 16px; flex-shrink: 0; }