/* ==========================================================================
   Shared page-level patterns (breadcrumb hero, detail layout, FAQ, forms…)
   ========================================================================== */

/* ---------- Page hero / breadcrumb ---------- */
.pagehero { background: var(--grad-navy); padding: clamp(52px, 8vw, 96px) 0 clamp(40px, 6vw, 64px); position: relative; overflow: hidden; }
.pagehero::before {
  content: ""; position: absolute; inset: -30% -10% auto auto;
  width: 50vw; height: 50vw; max-width: 620px; max-height: 620px;
  background: radial-gradient(closest-side, rgba(229,86,145,.28), transparent 70%);
}
.breadcrumb { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; font-size: .85rem; color: rgba(255,255,255,.55); margin-bottom: 18px; flex-wrap: wrap; }
@media (min-width: 681px) and (hover: hover) { .breadcrumb a:hover { color: var(--white); } }
.breadcrumb svg { width: 14px; height: 14px; opacity: .6; }
.pagehero h1 { position: relative; z-index: 2; color: var(--white); font-size: var(--fs-h1); max-width: 780px; }
.pagehero p.lead { position: relative; z-index: 2; color: rgba(255,255,255,.68); margin-top: 14px; max-width: 640px; font-size: var(--fs-lead); }

/* ---------- Pagehero with a certification badge (space-between row) ---------- */
.pagehero__row { display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.pagehero__row .pagehero__text { flex: 1; min-width: 0; }
/* This is the headline credential on the page, so it's sized to hold its
   own against the h1 rather than sit beside it as a stamp. */
.pagehero__badge {
  position: relative; z-index: 2; flex-shrink: 0;
  width: clamp(190px, 21vw, 320px); height: auto;
  object-fit: contain;
}
@media (max-width: 700px) {
  .pagehero__row { flex-direction: column; text-align: center; gap: 22px; }
  .pagehero__row .pagehero__text { text-align: center; }
  .pagehero h1, .pagehero p.lead { max-width: none; margin-left: auto; margin-right: auto; }
}

/* ---------- Pagehero with a real photo, stretched to match the text
   block's own height (Miyom Cerrahisi / Ameliyatsız Tedavi + subpages) ---------- */
.pagehero__split { display: flex; align-items: stretch; justify-content: space-between; gap: 36px; }
.pagehero__split .pagehero__text { flex: 1; min-width: 0; }
.pagehero__photo {
  position: relative; z-index: 2; flex-shrink: 0;
  width: clamp(220px, 24vw, 320px);
  border-radius: var(--r-lg);
  object-fit: cover;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 700px) {
  .pagehero__split { flex-direction: column; text-align: center; gap: 22px; }
  .pagehero__split .pagehero__text { text-align: center; }
  .pagehero__photo { width: 100%; height: 220px; }
}

/* ---------- Detail page layout (treatment/miyom-type pages) ---------- */
.detail-layout { display: grid; grid-template-columns: 1fr 340px; gap: clamp(32px, 4vw, 56px); align-items: start; }
.detail-main img.cover { width: 100%; aspect-ratio: 16/8; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-md); margin-bottom: clamp(24px, 3vw, 36px); }
.prose { color: var(--ink); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: 1.5rem; margin-top: 1.8em; }
.prose h3 { font-size: 1.2rem; margin-top: 1.5em; }
.prose p { color: var(--muted); text-align: justify; line-height: 1.8; }
.prose ul { padding-left: 0; }
.prose ul li { position: relative; padding-left: 30px; color: var(--muted); margin-bottom: 10px; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--pink-50);
}
.prose ul li::after {
  content: ""; position: absolute; left: 5px; top: 12px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--pink);
}

.sidebar { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 20px; }
.side-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-sm); }
/* ---------- Career timeline cards (İş Tecrübelerim) — animated hover ---------- */
.timeline-card {
  position: relative;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.timeline-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--grad-pink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur-slow) var(--ease);
}
.timeline-card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--pink);
}
@media (min-width: 681px) and (hover: hover) { .timeline-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--pink);
} }
.timeline-card:focus-within::before { transform: scaleY(1); }
@media (min-width: 681px) and (hover: hover) { .timeline-card:hover::before { transform: scaleY(1); } }
.timeline-card b { display: inline-block; transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.timeline-card:focus-within b { transform: translateX(4px); color: var(--pink-600); }
@media (min-width: 681px) and (hover: hover) { .timeline-card:hover b { transform: translateX(4px); color: var(--pink-600); } }
@media (prefers-reduced-motion: reduce) {
  .timeline-card, .timeline-card::before, .timeline-card b { transition: none; }
}
.side-cta { background: var(--grad-pink); color: var(--white); border-radius: var(--r-lg); padding: 28px; text-align: center; }
.side-cta .ic { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.side-cta h3 { color: var(--white); font-size: 1.05rem; margin-bottom: 6px; }
.side-cta p { color: rgba(255,255,255,.8); font-size: .86rem; margin-bottom: 18px; }
.side-links { display: flex; flex-direction: column; }
.side-links a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 4px; font-size: .9rem; font-weight: 500; color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.side-links a:last-child { border-bottom: 0; }
.side-links a.active { color: var(--pink); padding-left: 8px; }
@media (min-width: 681px) and (hover: hover) { .side-links a:hover { color: var(--pink); padding-left: 8px; } }
/* Some pages' side-links arrows omit explicit width/height on the <svg>
   (a content-authoring inconsistency) — without a CSS size, an SVG falls
   back to its 300x150 browser default, ballooning each link's height and
   scattering a giant chevron across the sidebar. Pin the size here so
   this can't happen regardless of the markup. */
.side-links a svg { width: 15px; height: 15px; opacity: 0; transition: opacity var(--dur) var(--ease); flex-shrink: 0; }
.side-links a.active svg { opacity: 1; }
@media (min-width: 681px) and (hover: hover) { .side-links a:hover svg { opacity: 1; } }

@media (max-width: 980px) {
  .detail-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}

/* ---------- Listing grid pages (miyom-cerrahisi, ameliyatsiz-tedavi, blog) ---------- */
.listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 28px); }
/* Ameliyatsız Tedavi only has four methods — two per row reads as a
   deliberate pair-up rather than a 3+1 orphan. */
.listing-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .listing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .listing-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ page ---------- */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; align-items: start; }
@media (max-width: 780px) { .faq-grid { grid-template-columns: 1fr; } }

/* ---------- Pagination ---------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: clamp(32px, 4vw, 48px); }
.pager a, .pager span {
  min-width: 42px; height: 42px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); font-weight: 700; font-size: .88rem;
  border: 1px solid var(--line); color: var(--navy);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .pager a:hover { border-color: var(--pink); color: var(--pink); } }
.pager .is-active { background: var(--grad-pink); border-color: transparent; color: var(--white); }

/* ---------- Video grid page ---------- */
/* Flexbox (not grid) on purpose: page counts aren't always a clean multiple
   of the column count, and flex-wrap + justify-content:center keeps a
   trailing partial row centered instead of stranded on the left. Cards are
   a bit smaller than before too (360px basis vs. a full 1/3 column). */
.video-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
/* flex-grow:1 lets cards fill out each row to the container's full width
   (matching the header edges) instead of a fixed-basis row falling short
   and looking narrower/off-center under the header bar. */
.video-grid > a { flex: 1 1 340px; max-width: 440px; }
@media (max-width: 640px) { .video-grid > a { flex-basis: 100%; max-width: 420px; } }

/* ---------- Press grid page ---------- */
.press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) { .press-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .press-grid { grid-template-columns: 1fr; } }
.press-card { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; }
.press-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
@media (min-width: 681px) and (hover: hover) { .press-card:hover img { transform: scale(1.08); } }

/* ---------- Contact page ---------- */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 48px); align-items: stretch; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow-sm); }
/* "Bize Ulaşın" form card stretches to match the address+map column's
   height (align-items:stretch above); the message field grows to fill
   the extra room instead of leaving dead space at the bottom. */
.contact-form-card { display: flex; flex-direction: column; height: 100%; }
.contact-form-card .contact-form { display: flex; flex-direction: column; flex: 1; }
.contact-form-card .fieldwrap--grow { flex: 1; display: flex; flex-direction: column; }
.contact-form-card .fieldwrap--grow textarea { flex: 1; resize: none; }
.contact-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .contact-form .row2 { grid-template-columns: 1fr; } }
.contact-form label { display: block; font-size: .84rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.contact-form .fieldwrap { margin-bottom: 18px; }
.contact-info-item { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-info-item:last-child { border-bottom: 0; }
.contact-info-item .ic { width: 46px; height: 46px; border-radius: 50%; background: var(--pink-50); color: var(--pink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info-item b { display: block; color: var(--navy); }
.contact-map { border-radius: var(--r-lg); overflow: hidden; margin-top: 20px; aspect-ratio: 16/9; }
.contact-map iframe { width: 100%; height: 100%; border: 0; }
.form-alert { border-radius: var(--r-sm); padding: 14px 16px; font-size: .88rem; font-weight: 500; margin-top: 14px; }
.form-alert.ok { background: #e8f7ee; color: #1c7a41; }
.form-alert.err { background: #fdecec; color: #b3261e; }

/* ---------- Helpful widget ---------- */
.helpful { display: flex; align-items: center; gap: 14px; margin-top: 40px; padding: 18px 22px; background: var(--surface); border-radius: var(--r-md); flex-wrap: wrap; }
.helpful b { color: var(--navy); }
.helpful .btns { display: flex; gap: 10px; margin-left: auto; }
.helpful .btns button { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid var(--line); font-weight: 700; font-size: .85rem; transition: background var(--dur), border-color var(--dur); }
@media (min-width: 681px) and (hover: hover) { .helpful .btns button:hover { border-color: var(--pink); color: var(--pink); } }

/* ---------- Uzmanlık Alanları (specialty badges on the right) ---------- */
.expertise-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: stretch; }
.expertise-row .section-head { margin-bottom: 0; }
/* align-items:stretch above makes this column match the text column's
   height; align-content:space-between spreads the wrapped badge rows
   evenly across that full height instead of clumping at the top. */
.expertise-badges { display: flex; flex-wrap: wrap; align-content: space-between; gap: 10px; justify-content: flex-end; }
.expertise-badges .badge {
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .expertise-badges .badge:hover {
  background: var(--grad-pink);
  color: var(--white);
  transform: translateY(-3px) scale(1.05);
  box-shadow: var(--shadow-pink);
} }
@media (max-width: 900px) {
  .expertise-row { grid-template-columns: 1fr; }
  .expertise-badges { justify-content: flex-start; align-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .expertise-badges .badge { transition: none; }
}

/* ---------- Hakkımda portrait + floating badge + identity strip (v2:
   the column now stretches to exactly match the .prose column's height
   — the portrait fills the leftover space above the identity strip via
   object-fit:cover instead of sitting at its own intrinsic height). ---------- */
/* This used to be an inline style on the element, which beat the
   max-width media query below it and kept the 460px column on phones. */
.hakkimda-layout { grid-template-columns: 460px 1fr; align-items: stretch; }
@media (max-width: 980px) { .hakkimda-layout { grid-template-columns: 1fr; } }
.hakkimda-layout > .reveal { display: flex; flex-direction: column; height: 100%; }
.hakkimda-portre { position: relative; flex: 1; min-height: 0; }
.hakkimda-portre .resim { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.hakkimda-rozet {
  position: absolute; bottom: 24px; left: -20px;
  background: var(--navy); color: var(--white);
  border-radius: var(--r-md); padding: 16px 22px;
  box-shadow: var(--shadow-lg);
}
.hakkimda-rozet .sayi { display: block; font-size: 28px; font-weight: 700; color: var(--pink); }
.hakkimda-rozet .etiket { font-size: 12px; opacity: .85; margin-top: 4px; }
/* Body copy sits larger here than in the generic .prose, and the column
   spreads its slack so the last line finishes level with the bottom of
   the identity cards beside it rather than stopping short of them.
   (.hakkimda-layout > .reveal already makes this a flex column.) */
.hakkimda-layout .prose { justify-content: space-between; }
.hakkimda-layout .prose p { font-size: 1.125rem; line-height: 1.85; }
.hakkimda-layout .prose h2 { font-size: 1.62rem; }

/* Identity strip — three credentials, not a stat grid. Each card is
   built like a small certificate: a gradient ribbon along the top edge,
   the icon in a navy squircle, then value / pink rule / micro-caps
   label reading down the left. Everything shifts to pink on hover. */
.hakkimda-kimlik-serit { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 28px; flex-shrink: 0; }
.hakkimda-kimlik-item { grid-column: span 2; }
/* Association badges (2026-10-16): second row of the strip, two half-width
   linked cards; the society's own logo stands in for the navy icon tile. */
.hakkimda-kimlik-item--dernek { grid-column: span 3; display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.hakkimda-kimlik-item--dernek .logo { grid-row: span 2; width: 52px; height: 52px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease); }
@media (min-width: 681px) and (hover: hover) { .hakkimda-kimlik-item--dernek:hover .logo { transform: rotate(-6deg) scale(1.05); } }
.hakkimda-kimlik-item--dernek .sayi { font-size: 15px; align-self: end; }
.hakkimda-kimlik-item--dernek .sayi::after { margin: 7px 0 6px; }
.hakkimda-kimlik-item--dernek .etiket { align-self: start; font-size: 10px; letter-spacing: .04em; }
.hakkimda-kimlik-item--dernek:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
@media (max-width: 640px) { .hakkimda-kimlik-item--dernek { grid-column: 1 / -1; } .hakkimda-kimlik-item--dernek .etiket { font-size: 11px; } }
.hakkimda-kimlik-item {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 14px 16px; text-align: left;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* the ribbon */
.hakkimda-kimlik-item::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-navy);
  transition: background var(--dur) var(--ease);
}
/* a glow that wakes up in the corner the icon leans away from */
.hakkimda-kimlik-item::after {
  content: ""; position: absolute; right: -30%; bottom: -40%;
  width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 86, 145, .22), transparent 70%);
  opacity: 0; z-index: -1;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .hakkimda-kimlik-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--pink); } }
@media (min-width: 681px) and (hover: hover) { .hakkimda-kimlik-item:hover::before { background: var(--grad-pink); } }
@media (min-width: 681px) and (hover: hover) { .hakkimda-kimlik-item:hover::after { opacity: 1; transform: scale(1.25); } }
.hakkimda-kimlik-item .ico {
  width: 34px; height: 34px; border-radius: 11px; margin: 0 0 12px;
  background: var(--grad-navy); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(15, 54, 97, .22);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .hakkimda-kimlik-item:hover .ico {
  background: var(--grad-pink);
  transform: translateY(-2px) rotate(-8deg);
  box-shadow: 0 8px 18px rgba(229, 86, 145, .32);
} }
.hakkimda-kimlik-item .ico svg { width: 17px; height: 17px; }
.hakkimda-kimlik-item .sayi {
  display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em;
  color: var(--navy); line-height: 1.15;
}
/* the rule between value and label, which extends on hover */
.hakkimda-kimlik-item .sayi::after {
  content: ""; display: block; width: 18px; height: 2px; border-radius: 2px;
  margin: 9px 0 8px; background: var(--grad-pink);
  transition: width var(--dur) var(--ease);
}
@media (min-width: 681px) and (hover: hover) { .hakkimda-kimlik-item:hover .sayi::after { width: 32px; } }
/* 9.5px uppercase was below legibility on a phone (audit 2026-09-25). */
@media (max-width: 640px) { .hakkimda-kimlik-item .etiket { font-size: 12px; } }
.hakkimda-kimlik-item .etiket {
  display: block;
  font-size: 11px; line-height: 1.45; letter-spacing: .055em;
  text-transform: uppercase; font-weight: 600;
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .hakkimda-kimlik-item, .hakkimda-kimlik-item::before, .hakkimda-kimlik-item::after,
  .hakkimda-kimlik-item .ico, .hakkimda-kimlik-item .sayi::after { transition: none; }
}

/* ---------- Hakkımda entrance choreography ----------
   Every block on the page arrives rather than being there already. The
   hero's three parts come in from their own directions, and the two
   card sets deal in one at a time instead of landing as a slab. */
.pagehero .breadcrumb.reveal { transition-delay: .05s; }
.pagehero__text.reveal { transition-delay: .15s; }
.pagehero__badge.reveal { transform: translateY(24px) scale(.82) rotate(-8deg); }
.pagehero__badge.reveal.in { transform: translateY(0) scale(1) rotate(0deg); transition-delay: .3s; }

.hakkimda-kimlik-item.reveal { transform: translateY(20px); }
.hakkimda-kimlik-item.reveal:nth-child(1) { transition-delay: .12s; }
.hakkimda-kimlik-item.reveal:nth-child(2) { transition-delay: .22s; }
.hakkimda-kimlik-item.reveal:nth-child(3) { transition-delay: .32s; }

/* 4 per row — the delay repeats every fourth card so each row deals
   left-to-right instead of the stagger drifting ever longer. */
.uzmanlik-grid .type-card.reveal { transform: translateY(28px) scale(.96); }
.uzmanlik-grid .type-card.reveal.in { transform: translateY(0) scale(1); }
.uzmanlik-grid .type-card.reveal:nth-child(4n + 1) { transition-delay: 0s; }
.uzmanlik-grid .type-card.reveal:nth-child(4n + 2) { transition-delay: .09s; }
.uzmanlik-grid .type-card.reveal:nth-child(4n + 3) { transition-delay: .18s; }
.uzmanlik-grid .type-card.reveal:nth-child(4n)     { transition-delay: .27s; }

@media (max-width: 980px) {
  /* two per row here, so the row rhythm halves with it */
  .uzmanlik-grid .type-card.reveal:nth-child(2n + 1) { transition-delay: 0s; }
  .uzmanlik-grid .type-card.reveal:nth-child(2n)     { transition-delay: .09s; }
}
@media (prefers-reduced-motion: reduce) {
  .pagehero__badge.reveal, .hakkimda-kimlik-item.reveal,
  .uzmanlik-grid .type-card.reveal { transform: none; transition-delay: 0s; }
}
@media (max-width: 640px) {
  .hakkimda-kimlik-serit { grid-template-columns: 1fr; }
  .hakkimda-rozet { left: 12px; }
  .hakkimda-layout > .reveal { height: auto; }
  .hakkimda-layout .prose { justify-content: flex-start; }
  .hakkimda-portre { flex: none; }
  .hakkimda-portre .resim { height: auto; }
}

.uzmanlik-alanlari { padding-top: 30px; }

/* ---------- Uzmanlık Alanları icons (hakkımda "Uzmanlık Alanları"
   grid only, scoped via .uzmanlik-grid so the homepage's Miyom Türleri
   cards — which reuse .type-card but with photo icons — are untouched):
   a cleaner two-tone icon chip, and on hover the glyph itself swaps to
   a checkmark instead of just recoloring. ---------- */
.uzmanlik-grid .type-card__icon { background: var(--pink-50); color: var(--pink); position: relative; }
.uzmanlik-grid .type-card__icon svg { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.uzmanlik-grid .type-card__icon .ico-check {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.5) rotate(-20deg);
}
.uzmanlik-grid .type-card__icon .ico-check svg { width: 22px; height: 22px; }
@media (min-width: 681px) and (hover: hover) { .uzmanlik-grid .type-card:hover .type-card__icon { background: var(--pink); color: var(--white); transform: scale(1.08); } }
@media (min-width: 681px) and (hover: hover) { .uzmanlik-grid .type-card:hover .type-card__icon .ico-main { opacity: 0; transform: scale(.5) rotate(20deg); } }
@media (min-width: 681px) and (hover: hover) { .uzmanlik-grid .type-card:hover .type-card__icon .ico-check { opacity: 1; transform: scale(1) rotate(0deg); } }
@media (prefers-reduced-motion: reduce) {
  .uzmanlik-grid .type-card__icon svg { transition: none; }
}

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

/* 8 · Contact map, every width. The map sat in a box with a radius and
   overflow:hidden, and Chrome stops routing pointer events into a
   cross-origin iframe that is clipped by a radius — it drew, but would not
   pan or zoom. Nothing clips it now; the rounded look is painted on top by
   a pointer-events:none layer that fills the four corners with the card's
   white. (Same fix as the contact map on jinekolojiderobotikcerrahiv2.) */
.contact-map { position: relative; overflow: visible; border-radius: 0; }
.contact-map iframe { display: block; }
.contact-map::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(circle 24px at 100% 100%, #0000 0 24px, var(--white) 24px) left top / 25px 25px no-repeat,
    radial-gradient(circle 24px at 0    100%, #0000 0 24px, var(--white) 24px) right top / 25px 25px no-repeat,
    radial-gradient(circle 24px at 100% 0,    #0000 0 24px, var(--white) 24px) left bottom / 25px 25px no-repeat,
    radial-gradient(circle 24px at 0    0,    #0000 0 24px, var(--white) 24px) right bottom / 25px 25px no-repeat;
}

/* 10 · Drawer logo: the pink "e" laid back over the whited-out lockup, the
   same clip as the footer's (header.php adds the second image) */
.brand--inked .brand__stack { position: relative; display: block; }
.brand--inked .brand__logo.brand__logo--mark {
  position: absolute; top: 0; left: 0;
  filter: none;
  clip-path: inset(0 55.91% 42% 33.94%);
}

/* 9 · the drawer foot has no background of its own (it stays pinned) */
.mobilemenu__foot { background: none; }

/* 6 · Wherever the header has collapsed to the burger (≤1400px), the
   language switcher and the phone number live only in the drawer: the bar
   is logo, Randevu Al and the menu button. The drawer's language group and
   its phone link cover the same range. */
@media (max-width: 1400px) {
  .site-header__actions .langpick,
  .site-header__actions .header-phone { display: none !important; }
  .mnu-grp--lang { display: block; }
}

@media (min-width: 681px) and (max-width: 1040px) {
  /* 1 · the doctor's photo in the hero, smaller once the hero stacks */
  .hero__media { max-width: 420px; margin-inline: auto; }

  /* 2 · the two treatment cards side by side (they stacked below 780px) */
  .picker { grid-template-columns: 1fr auto 1fr; }
  .picker-or { justify-self: auto; margin: 0; align-self: center; }

  /* 4 · homepage videos: three to a row */
  #videolar .grid--3 { grid-template-columns: repeat(3, 1fr); gap: 16px; }

  /* 7 · Medya page: two videos to a row */
  .video-grid > a { flex: 1 1 calc(50% - 11px); max-width: calc(50% - 11px); }
}

/* 3 · Stats bento on a tablet: the dark card across the top, "Hasta
   memnuniyeti" (with its bars) across the next row, then the last four
   tiles two to a row. */
@media (min-width: 681px) and (max-width: 1040px) {
  .stats-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .stats-bento__primary, .stats-bento__b { grid-column: 1 / -1; grid-row: auto; }
  .stats-bento__c, .stats-bento__d, .stats-bento__e, .stats-bento__f { grid-column: span 1; grid-row: auto; }
}


/* Drawer languages, redesigned (2026-09-28): twelve outlined code pills read
   as a keypad. Each option is now a row — a small code seal in the brand
   pink and the language's own name beside it — two to a line; the current
   one is the only light tile, with a tick, so it is found at a glance. */
.mnu-grp--lang .mnu-langs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.mnu-grp--lang .mnu-langs__opt {
  /* the drawer's own link rule (display:block, a 1.1rem bold row with a
     bottom border) must not reach these */
  display: flex; align-items: center; flex: none; justify-content: flex-start; gap: 10px;
  line-height: 1.2;
  min-height: 50px; padding: 8px 12px 8px 8px;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  font-size: .9rem; font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, .88);
  text-align: left;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mnu-langs__code {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 10px;
  background: rgba(229, 86, 145, .18); color: #ffb7d3;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mnu-langs__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnu-grp--lang a.mnu-langs__opt:focus-visible {
  background: rgba(255, 255, 255, .1); border-color: rgba(229, 86, 145, .55); color: var(--white);
}
@media (min-width: 681px) and (hover: hover) { .mnu-grp--lang a.mnu-langs__opt:hover {
  background: rgba(255, 255, 255, .1); border-color: rgba(229, 86, 145, .55); color: var(--white);
} }
.mnu-grp--lang a.mnu-langs__opt:focus-visible .mnu-langs__code { background: var(--pink); color: var(--white); }
@media (min-width: 681px) and (hover: hover) { .mnu-grp--lang a.mnu-langs__opt:hover .mnu-langs__code { background: var(--pink); color: var(--white); } }
.mnu-grp--lang a.mnu-langs__opt:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.mnu-grp--lang .mnu-langs__opt.is-current {
  position: relative; padding-right: 34px;
  background: var(--white); border-color: var(--white); color: var(--navy); font-weight: 700;
}
.mnu-grp--lang .mnu-langs__opt.is-current .mnu-langs__code { background: var(--pink); color: var(--white); }
.mnu-grp--lang .mnu-langs__opt.is-current::after {
  content: ""; position: absolute; right: 13px; top: 50%;
  width: 6px; height: 11px; margin-top: -7px;
  border-right: 2px solid var(--pink); border-bottom: 2px solid var(--pink);
  transform: rotate(45deg);
}
@media (max-width: 359px) {
  .mnu-grp--lang .mnu-langs { grid-template-columns: 1fr; }
}

/* The drawer foot lost its background on request, and a sticky foot with
   no background let the open language list run visibly underneath the
   Randevu button and the phone number. It is no longer sticky: a short menu
   still has it at the bottom (margin-top:auto), a long one scrolls it along
   with everything else, and nothing overlaps. */
.mobilemenu__foot { position: static; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }

/* Footer layout (2026-09-28). İletişim is its own block (footer.php).
   Desktop: it sits under Ameliyatsız Tedavi in the fourth column, as before —
   the other three blocks span both rows, so the fourth column simply stacks.
   Tablet: brand and İletişim share the top row (brand across two columns,
   İletişim in the third, with the social icons in a row under it); the three
   link columns fill the row below. Phone: one column, source order. */
.footer-social--ile { display: none; }
@media (min-width: 1041px) {
  .site-footer__top { row-gap: 22px; }
  .footer-brand, .footer-col--hak, .footer-col--tur { grid-row: 1 / span 2; }
  .footer-col--ame { grid-column: 4; grid-row: 1; }
  .footer-col--ile { grid-column: 4; grid-row: 2; }
}
@media (min-width: 561px) and (max-width: 1040px) {
  .site-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .footer-brand { grid-column: 1 / 3; grid-row: 1; }
  .footer-col--ile { grid-column: 3; grid-row: 1; }
  .footer-col--hak { grid-column: 1; grid-row: 2; }
  .footer-col--tur { grid-column: 2; grid-row: 2; }
  .footer-col--ame { grid-column: 3; grid-row: 2; }
  .footer-brand .footer-social { display: none; }
  .footer-social--ile { display: flex; flex-direction: row; margin-top: 20px; }
}

/* Drawer languages: a long native name (Azərbaycanca, ქართული) wraps onto
   a second line instead of being cut off with an ellipsis. */
.mnu-langs__name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; overflow-wrap: anywhere; }

/* "Bu içerik faydalı oldu mu?" — after an answer (main.js): the content
   fades, the thank-you sits in the exact middle of the same box, then the
   card folds away. */
.helpful { overflow: hidden; transition: height .5s var(--ease), opacity .45s var(--ease), margin .5s var(--ease), padding .5s var(--ease); }
.helpful > * { transition: opacity .25s var(--ease); }
.helpful.is-leaving > * { opacity: 0; }
.helpful.is-done { display: grid; place-items: center; }
.helpful.is-done > .helpful__thanks { opacity: 1; }
.helpful__thanks {
  margin: 0; width: 100%; text-align: center;
  font-weight: 700; color: var(--navy);
  animation: helpful-in .4s var(--ease);
}
@keyframes helpful-in { from { opacity: 0; transform: translateY(6px); } }
.helpful.is-gone { height: 0 !important; margin-top: 0; padding-block: 0; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .helpful, .helpful > * { transition: none; }
  .helpful__thanks { animation: none; }
}

/* Footer social icons: each glyph dead centre in its circle, in both rows
   (the tablet copy under İletişim sits inside a footer column, whose
   `a { display:inline-block }` had been winning and left the glyph at the
   top-left of the circle). */
.site-footer .footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; line-height: 0;
}
.site-footer .footer-social a svg { display: block; flex: none; }
@media (min-width: 681px) and (hover: hover) { .site-footer .footer-social a:hover { transform: translateY(-3px); } }

/* Contact page: the address is a directions link now — it reads as the
   other contact values do, and turns pink on hover like the phone. */
.contact-info-item a { color: inherit; transition: color var(--dur) var(--ease); }
@media (min-width: 681px) and (hover: hover) { .contact-info-item a:hover { color: var(--pink); } }
/* a finger-sized circle wherever the footer's other links get 44px rows */
@media (max-width: 1040px), (pointer: coarse) {
  .site-footer .footer-social a { width: 44px; height: 44px; }
}

/* Footer on a phone: five blocks in one column ran to ~1300px. The brand
   keeps the full width; the four link blocks sit two by two, in pairs that
   belong together (Hakkımızda | Miyom Türleri, Ameliyatsız Tedavi |
   İletişim). Long values (the e-mail, the address) wrap inside their half. */
@media (max-width: 560px) {
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col a, .footer-contact li { overflow-wrap: anywhere; }
}
/* the article's own paragraph rule (justified, with a bottom margin) was
   reaching the thank-you line too: a justified single line sits left, and
   the margin pushed it off the vertical middle */
.helpful .helpful__thanks { margin: 0 !important; text-align: center !important; max-width: none; }

/* ==========================================================================
   Phone list — 2026-09-28 (items numbered as in the request)
   ========================================================================== */
@media (max-width: 680px) {

  /* 1 · 2 · #tedaviler and #turler hover states: every :hover in the theme
     now lives behind (min-width: 681px) and (hover: hover), so a phone never
     gets them. The sibling flip is also skipped in main.js. */
  #tedaviler .picker-card.is-flipped .picker-card__inner { transform: none; }


  /* 3 · risk quiz: Evet / Hayır side by side on one row */
  .quiz-step__actions { flex-wrap: nowrap; gap: 10px; }
  .quiz-step__actions .quiz-btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; }

  /* 4 · stats bento: the dark card and "Hasta memnuniyeti" across, then
     the last four tiles two to a row */
  .stats-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-bento__primary, .stats-bento__b { grid-column: 1 / -1; }
  .stats-bento__c, .stats-bento__d, .stats-bento__e, .stats-bento__f { grid-column: span 1; }
  .stats-bento__c { flex-direction: column; justify-content: center; text-align: center; padding: 18px 12px; }
  .stats-bento__c .num { font-size: 1.5rem; }
  .stats-bento__d, .stats-bento__e, .stats-bento__f {
    flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 14px;
  }
  .stats-bento__d .ic, .stats-bento__e .ic, .stats-bento__f .ic { width: 36px; height: 36px; }

  /* 5 · section heads with an action beside them ("Tüm Videolar", "Tüm
     Yazılar", the Google chip): the heading keeps the row and the action
     sits at its right, on the heading's last line, as a compact pill —
     instead of dropping to a line of its own under the heading. */
  .section-head-row { flex-wrap: nowrap; align-items: flex-end; gap: 14px; }
  .section-head-row > :first-child { flex: 1 1 auto; min-width: 0; }
  .section-head-row > .btn, .section-head-row > a.btn {
    flex: none; min-height: 40px; padding: 0 14px; font-size: .8rem; white-space: nowrap;
  }
  .section-head-row .google-chip { flex: none; padding: 8px 12px; font-size: .8rem; }
  #yorumlar .section-head-row { align-items: flex-end; }

  /* 9 · Hakkımda › expertise cards: two to a row */
  .uzmanlik-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .uzmanlik-grid .type-card { padding: 22px 12px; }
}

/* 8 · Hakkımda identity strip: the three credentials on one row, as
   compact certificate cards — icon, value, label stacked and centred —
   instead of three full-width cards stacked. */
@media (max-width: 980px) {
  .hakkimda-kimlik-serit { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
}
@media (max-width: 680px) {
  .hakkimda-kimlik-item { padding: 16px 8px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .hakkimda-kimlik-item .ico { margin-inline: auto; }
  .hakkimda-kimlik-item .sayi { font-size: .95rem; }
  .hakkimda-kimlik-item .sayi::after { margin-inline: auto; }
  .hakkimda-kimlik-item .etiket { font-size: 11px; line-height: 1.35; letter-spacing: .02em; }
}
@media (max-width: 680px) {
  .hakkimda-kimlik-item--dernek { grid-column: 1 / -1; display: grid; text-align: left; align-items: center; padding: 14px 14px 12px; }
  .hakkimda-kimlik-item--dernek .sayi::after { margin-inline: 0; }
}

/* 6 · 7 · Footer on a phone: the link groups are an accordion (main.js
   wraps each list in .footer-col__body and makes the heading a button);
   one column; the bottom row centred. Above 560px every group is open. */
@media (min-width: 561px) {
  .footer-col__head[role="button"] { cursor: default; pointer-events: none; }
}
@media (max-width: 560px) {
  .site-footer__top { grid-template-columns: 1fr; row-gap: 0; }
  .footer-brand { padding-bottom: 22px; }
  .footer-col { border-top: 1px solid rgba(255, 255, 255, .12); }
  .footer-col:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .footer-col__head {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 56px; margin: 0; cursor: pointer;
  }
  .footer-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);
  }
  .footer-col.is-open .footer-col__head { color: var(--pink); }
  .footer-col.is-open .footer-col__head::after { transform: rotate(-135deg) translate(-2px, -2px); opacity: 1; }
  .footer-col__head:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 6px; }
  .footer-col__body { display: none; padding-bottom: 14px; }
  .footer-col.is-open .footer-col__body { display: block; animation: foot-open .35s var(--ease); }
  .site-footer__bottom { justify-content: center; text-align: center; }
}
@keyframes foot-open { from { opacity: 0; transform: translateY(-6px); } }

/* da Vinci tile: larger glyph, as asked (2026-09-28) */
.stats-bento__d .ic svg { width: 30px; height: 30px; }
/* the tile icons centred where the tiles are stacked (phones); on wider
   screens the icon sits beside the text in a row, where auto margins would
   push the two apart */
@media (max-width: 680px) {
  .stats-bento__d .ic, .stats-bento__e .ic, .stats-bento__f .ic { margin: 0 auto; }
}

/* Tablet footer, second pass (2026-09-28). The top-row/links-row layout now
   covers the whole tablet range (561–1040) — iPad landscape used to fall
   back to the cramped desktop four columns. The two rows are split by a
   full-width hairline (the grid's own ::before, placed in a row of its own),
   the brand paragraph uses the width of its two columns, and İletişim's
   head lines up with the logo. */
@media (min-width: 561px) and (max-width: 1040px) {
  .site-footer__top { column-gap: clamp(24px, 4vw, 44px); row-gap: 30px; align-items: start; }
  .site-footer__top::before {
    content: ""; grid-column: 1 / -1; grid-row: 2; height: 1px;
    background: rgba(255, 255, 255, .12);
  }
  .footer-col--hak, .footer-col--tur, .footer-col--ame { grid-row: 3; }
  .footer-brand p { max-width: 440px; margin-bottom: 0; }
  .footer-col--ile .footer-col__head { margin-top: 6px; }
  .footer-contact { gap: 12px; }
  .footer-col a, .footer-contact li { overflow-wrap: anywhere; }
  .footer-social--ile { gap: 10px; margin-top: 22px; }
}

/* Tablet footer: the social icons go back under the brand text (left),
   İletişim keeps the right of the top row on its own. */
@media (min-width: 561px) and (max-width: 1040px) {
  .footer-brand .footer-social { display: flex; flex-direction: row; gap: 10px; margin-top: 22px; }
  .footer-social--ile { display: none; }
}

/* ==========================================================================
   Web Sitelerimiz (2026-10-05, satır düzeni 2026-10-06) — dört sitenin tanıtımı.
   Her satırda bir site: konu görseli solda, iki cümlelik metin + site linki sağda.
   Kart dili sitenin kendisinden: beyaz zemin, ince çerçeve, --r-xl köşe,
   içi boş '01' numara, pembe vurgulu link.
   ========================================================================== */
.wsites { display: grid; gap: clamp(20px, 2.4vw, 32px); max-width: 1080px; margin-inline: auto; }
.wsite {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-slow) var(--ease), border-color var(--dur) var(--ease), translate var(--dur-slow) var(--ease);
}
.wsite.is-current { border-color: rgba(229, 86, 145, .45); box-shadow: 0 0 0 4px var(--pink-50), var(--shadow-sm); }
@media (min-width: 681px) and (hover: hover) {
  .wsite:hover { translate: 0 -4px; box-shadow: var(--shadow-lg); border-color: transparent; }
  .wsite.is-current:hover { box-shadow: 0 0 0 4px var(--pink-50), var(--shadow-lg); border-color: rgba(229, 86, 145, .45); }
  .wsite:hover .wsite__shot img { transform: scale(1.04); }
  .wsite__link:hover { color: var(--pink-600); }
  .wsite__link:hover span { background-size: 100% 2px; }
  .wsite__link:hover svg { transform: translate(2px, -2px); }
}
.wsite__shot { display: block; position: relative; margin: clamp(12px, 1.4vw, 16px); margin-right: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--navy-900); }
.wsite__shot img { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; object-position: center bottom; transition: transform .8s var(--ease); }
.wsite__body { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 3vw, 44px) clamp(26px, 3.2vw, 48px); }
.wsite__no {
  position: absolute; top: clamp(20px, 2.2vw, 30px); right: clamp(24px, 2.6vw, 36px);
  font-size: 2.6rem; font-weight: 700; line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px var(--pink-100);
}
.wsite.is-current .wsite__no { -webkit-text-stroke-color: var(--pink-light); }
.wsite__top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding-right: 72px; }
.wsite__title { margin: 12px 0 12px; font-size: clamp(1.4rem, 1.9vw, 1.8rem); color: var(--navy); padding-right: 72px; }
.wsite__body p { color: var(--muted); line-height: 1.75; margin-bottom: 22px; max-width: 58ch; }
.wsite__link {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  color: var(--navy); font-size: .98rem; font-weight: 700; text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.wsite__link span { background: linear-gradient(var(--pink), var(--pink)) no-repeat 0 100% / 0 2px; padding-bottom: 3px; transition: background-size var(--dur-slow) var(--ease); }
.wsite__link svg { color: var(--pink); transition: transform var(--dur) var(--ease); }
.wsite__here {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--pink-50); color: var(--pink-600); font-size: .78rem; font-weight: 700;
}
.wsite__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 3px rgba(229, 86, 145, .18); }
/* tablet: görsel daralır */
@media (max-width: 980px) {
  .wsite { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
  .wsite__no { font-size: 2rem; }
  .wsite__top, .wsite__title { padding-right: 52px; }
}
/* telefon: görsel üstte, metin altta */
@media (max-width: 680px) {
  .wsites { max-width: 560px; }
  .wsite { grid-template-columns: 1fr; border-radius: var(--r-lg); }
  .wsite__shot { margin: 12px 12px 0; border-radius: var(--r-md); }
  .wsite__shot img { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
  .wsite__body { padding: 22px 22px 26px; }
}