/* ==========================================================================
   Op. Dr. Özlem Yüksel Coşar — site styles
   Mobile-first. Desktop layout starts at 1080px (--bp-lg).
   Reference widths: mobile 360px, desktop 1320px.
   ========================================================================== */

/* Helvetica Neue is a licensed font that is only preinstalled on Apple devices.
   Each weight is mapped to its own installed face by exact name. Without this, a machine that has only one face
   installed (e.g. just "Helvetica Neue Medium") renders ALL text with that face and everything looks bold.
   A weight whose face isn't installed falls back to the next font in --font (Helvetica/Arial).
   Once web font files are licensed, add a url("/fonts/….woff2") after the local() sources below. */
@font-face { font-family: "Site Sans"; font-weight: 300; font-display: swap; src: local("Helvetica Neue Light"), local("HelveticaNeue-Light"); }
@font-face { font-family: "Site Sans"; font-weight: 400; font-display: swap; src: local("Helvetica Neue"), local("HelveticaNeue"), local("Helvetica Neue Roman"), local("HelveticaNeue-Roman"); }
@font-face { font-family: "Site Sans"; font-weight: 500; font-display: swap; src: local("Helvetica Neue Medium"), local("HelveticaNeue-Medium"); }
@font-face { font-family: "Site Sans"; font-weight: 700; font-display: swap; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"); }

/* Signature script for the doctor's name (Birthstone, SIL Open Font License). Self-hosted so it looks the same everywhere;
   split into Latin / Latin-Extended so Turkish letters (ş, ğ, İ) load only when needed. */
@font-face { font-family: "Signature"; font-weight: 400; font-display: swap; src: url("/fonts/birthstone-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F; }
@font-face { font-family: "Signature"; font-weight: 400; font-display: swap; src: url("/fonts/birthstone-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --c-primary: #3b5b57;
  --c-primary-hover: #2f4a46;
  --c-topbar: var(--c-primary);
  --c-ink: #18201d;
  --c-text: #4b524e;
  --c-muted: #8a8579;
  --c-bg: #faf9f5;
  --c-line: #e3ded5;
  --c-outline: #cfd4d0;
  --c-deep: #0f201f;
  --c-deep-line: #213130;
  --c-accent-bg: var(--c-primary);
  --c-gold: #b08c57;
  --c-card-line: #d3cdc1;
  --c-link-line: #9eb2ae;
  --c-sand: #f1ede7;
  --c-surgery: #182725;
  --c-footer: #13201f;
  --c-rule: #bbc5bf;
  --c-outline-strong: #74908a;

  --font: "Site Sans", Helvetica, Arial, sans-serif;

  --gutter: 17px;
  --radius: 5px;
  --topbar-h: 32px;
  --header-h: 74px; /* room for the 62px logo */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 1080px) {
  :root {
    --gutter: 44px;
    --topbar-h: 46px;
    --header-h: 104px; /* room for the 81px logo */
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Menu links jump to home page sections; stop them just below the sticky header. */
main [id] { scroll-margin-top: var(--header-h); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; overflow-wrap: break-word; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }
body.menu-open { overflow: hidden; }

/* ---------- Utilities ---------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lg-only { display: none; }
@media (min-width: 1080px) {
  .lg-only { display: inline; }
  .lg-hidden { display: none; }
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius);
  background: var(--c-primary); color: #fff; font-weight: 600;
}
.skip-link:focus { top: 12px; }

.icon { width: 16px; height: 16px; flex: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 26px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-size: 14px; font-weight: 400; line-height: 1.2; text-align: center;
  transition: background-color .2s, border-color .2s, color .2s;
}
.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-hover); }
.btn--outline { background: rgba(250, 249, 245, .85); border-color: var(--c-outline); color: var(--c-primary); }
.btn--outline:hover { border-color: var(--c-primary); background: var(--c-bg); }
.btn--sm { min-height: 38px; padding: 0 22px; font-size: 13px; }

/* ---------- Top bar ---------- */
.topbar { background: var(--c-topbar); color: #fff; }
.topbar__inner {
  display: flex; align-items: center;
  height: var(--topbar-h); padding-inline: var(--gutter);
  font-size: 13px;
}
.topbar__location { display: none; font-weight: 400; letter-spacing: .01em; }
.topbar__phone { margin-left: auto; font-weight: 400; letter-spacing: .01em; white-space: nowrap; }
.topbar__sep { width: 1px; height: 14px; margin-inline: 11px; background: rgba(255, 255, 255, .28); }
.topbar__sep--desktop { display: none; }

.social { display: flex; align-items: center; gap: 4px; }
.social a {
  display: grid; place-items: center; width: 28px; height: 28px; margin-inline: -4px;
  border-radius: 50%; transition: opacity .2s;
}
.social a:hover { opacity: .7; }
.topbar .social { gap: 12px; }

.lang-switcher { display: flex; gap: 12px; }
.lang-switcher a {
  display: block; padding: 4px 0;
  font-size: 12px; font-weight: 400; letter-spacing: .04em;
  color: rgba(255, 255, 255, .42); transition: color .2s;
}
.lang-switcher a:hover, .lang-switcher a[aria-current="true"] { color: #fff; }

@media (min-width: 1080px) {
  /* Desktop top bar is set 1.25× the mobile scale for readability. */
  /* Top bar text and logo start on the same line as the hero heading. */
  .topbar__inner { padding-left: clamp(40px, 7.6vw, 150px); font-size: 16px; }
  .topbar__location { display: block; }
  .topbar .social { margin-left: auto; gap: 16px; }
  .topbar .social a { width: 34px; height: 34px; }
  .topbar .social .icon { width: 20px; height: 20px; }
  .topbar__phone { margin-left: 0; font-size: 17.5px; }
  .topbar__sep { height: 18px; margin-inline: 24px; }
  .lang-switcher a { font-size: 15px; }
  .topbar__sep--desktop { display: block; }
  .lang-switcher { gap: 20px; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
  display: flex; align-items: center; gap: 16px;
  height: var(--header-h); padding-inline: var(--gutter);
}

.brand { display: flex; align-items: center; min-width: 0; margin-right: auto; }
/* The logo file is cropped to its drawing (no built-in margins), so the height here is the visible height. */
.brand__logo { width: auto; height: 62px; }

.menu-toggle { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; }
.menu-toggle__bars { display: flex; flex-direction: column; gap: 6px; width: 21px; }
.menu-toggle__bars span {
  display: block; height: 1.5px; background: var(--c-ink); border-radius: 1px;
  transition: transform .3s var(--ease), opacity .2s, width .3s var(--ease);
}
.menu-toggle__bars span:last-child { width: 72%; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { width: 100%; transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile menu panel: fixed under the header; JS sets --menu-top to the header's current bottom edge. */
.site-menu {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--menu-top, 106px);
  display: flex; flex-direction: column;
  padding: 8px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  background: var(--c-bg); overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
}
.site-menu.is-open {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.main-nav a {
  display: flex; align-items: center; min-height: 60px;
  border-bottom: 1px solid var(--c-line);
  font-size: 21px; font-weight: 500; letter-spacing: -.01em;
}
.main-nav a[aria-current="page"] { color: var(--c-primary); }
.site-menu__cta { margin-top: 28px; min-height: 50px; font-size: 15px; }
.site-menu__contact {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: auto; padding-top: 32px; color: var(--c-primary);
}
.site-menu__phone { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 400; color: var(--c-ink); }
.site-menu__phone .icon { width: 20px; height: 20px; color: var(--c-primary); }
.site-menu__phone small { display: block; font-size: 12px; font-weight: 500; color: var(--c-muted); }
.site-menu__contact .social { gap: 14px; }
.site-menu__contact .icon { width: 20px; height: 20px; }

@media (min-width: 1080px) {
  .site-header__inner { padding-left: clamp(40px, 7.6vw, 150px); }
  .brand__logo { height: 81px; }

  .menu-toggle { display: none; }
  .site-menu {
    position: static; flex-direction: row; align-items: center;
    padding: 0; background: none; overflow: visible;
    visibility: visible; opacity: 1; transform: none; transition: none;
  }
  .main-nav ul { display: flex; gap: clamp(20px, 2.4vw, 32px); }
  .main-nav a {
    min-height: 0; padding: 8px 0; border: 0;
    font-size: 16px; font-weight: 500; letter-spacing: 0;
    transition: color .2s;
  }
  .main-nav a:hover { color: var(--c-primary); }
  .site-menu__cta { margin: 0 0 0 clamp(24px, 2.4vw, 32px); min-height: 48px; padding-inline: 28px; font-size: 16px; }
  .site-menu__contact { display: none; }
  .main-nav a, .site-menu__cta { white-space: nowrap; }
}

/* Small laptops: the long German/English nav + title don't fit in one row, so tighten the header. */
@media (min-width: 1080px) and (max-width: 1279px) {
  .main-nav ul { gap: 18px; }
  .main-nav a { font-size: 15px; }
  .site-menu__cta { margin-left: 20px; padding-inline: 22px; font-size: 15px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(40px, 13vw, 64px) 22px 0;
  text-align: center;
}
/* Mobile: the portrait photo keeps its own aspect, sits on the hero's bottom edge and is pushed down a bit,
   so the lamp/microscope land at the doctor's head height. Its top edge fades out behind the text. */
.hero__bg {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: -2;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
}
/* Scaled 125% and shifted right so the exam lamp sits beside the doctor's head instead of behind it. */
.hero__bg img { width: 125%; max-width: none; margin-left: -20.5%; transform: translateY(20%); }
/* Fades the photo into the page color behind the text. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(250, 249, 245, .97) 0%,
    rgba(250, 249, 245, .9) 45%,
    rgba(250, 249, 245, .4) 62%,
    rgba(250, 249, 245, .22) 100%);
}

.hero__content { width: 100%; max-width: 560px; }
.hero__title {
  font-size: clamp(28px, 8.9vw, 46px);
  font-weight: 500; line-height: 1.12; letter-spacing: -.025em;
  color: var(--c-ink);
}
.hero__title em { font-style: normal; color: var(--c-primary); }
.hero__lead {
  max-width: 285px; margin: 16px auto 0;
  font-size: 14px; line-height: 1.75; color: var(--c-text);
}
.hero__actions { display: grid; gap: 10px; width: 88%; margin: 24px auto 0; }
.hero__actions .btn { min-height: 40px; font-size: 14px; }

.hero__doctor { width: min(82%, 380px); margin-top: 28px; }
.hero__doctor img { width: 100%; }

@media (min-width: 600px) {
  .hero__lead { max-width: 420px; font-size: 15px; }
  .hero__actions { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1080px) {
  .hero {
    align-items: flex-start; justify-content: center;
    min-height: clamp(560px, calc(100svh - var(--topbar-h) - var(--header-h)), 860px);
    padding: 64px 0 72px clamp(40px, 7.6vw, 150px);
    text-align: left;
  }
  .hero::before {
    background: linear-gradient(90deg,
      rgba(250, 249, 245, .96) 0%,
      rgba(250, 249, 245, .93) 40%,
      rgba(250, 249, 245, .68) 50%,
      rgba(250, 249, 245, .38) 59%,
      rgba(250, 249, 245, .3) 100%);
  }
  /* The photo is widened past the left edge (only empty wall is lost there) so the ENT unit, lamp and chair
     land in the gap between the text and the doctor instead of hiding behind her. */
  .hero__bg { top: 0; left: -30%; max-width: none; -webkit-mask-image: none; mask-image: none; }
  .hero__bg img { width: 100%; height: 100%; margin-left: 0; object-fit: cover; object-position: 50% 30%; transform: none; }
  .hero__content { max-width: min(46vw, 680px); }
  .hero__title { font-size: clamp(46px, 4.6vw, 76px); line-height: 1.1; letter-spacing: -.03em; text-wrap: nowrap; }
  .hero__line { display: block; }
  .hero__lead { max-width: 27.5em; margin: 30px 0 0; font-size: clamp(15px, 1.22vw, 19px); line-height: 1.8; }
  .hero__actions { display: flex; gap: 13px; width: auto; margin: 44px 0 0; }
  .hero__actions .btn { min-height: 58px; padding-inline: 34px; font-size: 17.5px; }

  .hero__doctor {
    position: absolute; bottom: 0; right: clamp(16px, 2vw, 48px);
    width: auto; height: calc(100% - 16px); margin: 0;
  }
  .hero__doctor img { width: auto; height: 100%; }
}

/* ---------- Stats strip ---------- */
.stats { background: var(--c-deep); color: #fff; }
.stats__list { display: grid; grid-template-columns: 1fr 1fr; }
.stats__item {
  display: flex; flex-direction: column;
  min-height: 0; padding: 18px 20px 16px;
  border-right: 1px solid var(--c-deep-line);
  border-bottom: 1px solid var(--c-deep-line);
}
.stats__item:nth-child(2n) { border-right: 0; }
.stats__item:nth-child(n+3) { border-bottom: 0; }
.stats__item:first-child { background: var(--c-accent-bg); border-color: transparent; }
.stats__value {
  font-size: clamp(22.4px, 6.72vw, 27.2px); font-weight: 300; line-height: 1; letter-spacing: -.02em;
}
.stats__plus { color: var(--c-gold); }
.stats__label {
  margin-top: 8px; max-width: 15em;
  font-size: 12.5px; font-weight: 300; line-height: 1.45; color: rgba(255, 255, 255, .78);
}

@media (min-width: 720px) {
  .stats__list { grid-template-columns: repeat(4, 1fr); }
  .stats__item { border-bottom: 0; }
  .stats__item:nth-child(2n) { border-right: 1px solid var(--c-deep-line); }
  .stats__item:last-child { border-right: 0; }
}

@media (min-width: 1080px) {
  .stats__item { min-height: 0; padding: 26px var(--gutter) 24px; }
  .stats__value { font-size: clamp(38px, 3.2vw, 48px); }
  .stats__label { margin-top: 10px; max-width: none; font-size: clamp(13px, 1.02vw, 15px); }
}

/* ---------- Sections (shared) ---------- */
.section { padding: 48px var(--gutter); }
.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 12px 24px; margin-bottom: 24px;
}
.section-title {
  font-size: clamp(24px, 6.4vw, 30px); font-weight: 500; line-height: 1.15; letter-spacing: -.02em;
  color: var(--c-ink);
}
.section-title em { font-style: normal; color: var(--c-primary); }
/* Phones/tablets: the accented part of a section title starts on its own line. */
@media (max-width: 1079px) {
  .section-title em { display: block; }
}
.link-arrow {
  display: inline-flex; gap: 6px; padding-bottom: 5px;
  border-bottom: 1px solid var(--c-link-line);
  font-size: 14px; font-weight: 500; color: var(--c-primary); white-space: nowrap;
  transition: border-color .2s;
}
.link-arrow:hover { border-color: var(--c-primary); }

@media (min-width: 1080px) {
  /* Same left edge as the hero text, so the page reads along one line. */
  .section { padding: 72px clamp(40px, 7.6vw, 150px); }
  .section-head { margin-bottom: 44px; }
  .section-title { font-size: clamp(34px, 3.05vw, 48px); }
  .link-arrow { font-size: 16px; }
}

/* ---------- Treatment cards ---------- */
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.service-card__link {
  display: flex; flex-direction: column; height: 100%;
  padding: 10px 10px 14px;
  background: var(--c-bg); border: 1px solid var(--c-card-line); border-radius: 4px;
  transition: border-color .2s, box-shadow .2s;
}
.service-card__link:hover { border-color: var(--c-primary); box-shadow: 0 6px 24px rgba(24, 32, 29, .06); }
.service-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-line); }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.service-card__link:hover .service-card__media img { transform: scale(1.04); }
.service-card__title {
  margin-top: 12px;
  font-size: 14.5px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--c-primary);
  text-align: center;
}
/* Phones show photo + title only, so all 10 treatments fit in a short scroll. */
.service-card__text, .service-card__more { display: none; }

@media (min-width: 720px) {
  .service-card__link { padding: 14px 14px 18px; }
  .service-card__title { font-size: 17px; }
  /* site.js shrinks this box to its longest line; auto margins then leave equal space on both sides. */
  .service-card__text {
    display: block; margin: 10px auto 18px; font-size: 13.5px; line-height: 1.65; color: var(--c-text);
  }
  .service-card__more {
    display: block; margin-top: auto; padding-top: 14px;
    border-top: 1px solid var(--c-line);
    font-size: 13.5px; font-weight: 500; text-align: right; color: var(--c-primary);
  }
}

@media (min-width: 1080px) {
  .services-grid { grid-template-columns: repeat(5, 1fr); gap: 20px; }
  /* Photo runs edge to edge along the top of the card; text keeps the inner padding. */
  .service-card__link { --card-pad: clamp(14px, 1.35vw, 24px); padding: 0 var(--card-pad) var(--card-pad); overflow: hidden; }
  .service-card__media { width: calc(100% + 2 * var(--card-pad)); max-width: none; margin-inline: calc(-1 * var(--card-pad)); }
  .service-card__title { margin-top: 20px; font-size: clamp(16px, 1.45vw, 21px); }
  .service-card__text { font-size: clamp(13px, 1vw, 14.5px); }
}

/* Cards in the same row share their row tracks (subgrid): when one title wraps to two lines,
   every title in that row reserves the same height, so descriptions and links start on one line. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 720px) {
    .service-card, .service-card__link { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .service-card__more { align-self: end; }
  }
}

/* ---------- Eyebrow (small caps label above a heading) ---------- */
.eyebrow {
  display: inline-block; padding-bottom: 12px;
  border-bottom: 1px solid var(--c-rule);
  font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--c-primary);
}

/* ---------- About ---------- */
.about { background: var(--c-sand); }
.about__media { display: block; aspect-ratio: 1 / 1.02; overflow: hidden; }
.about__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.about__body { padding: 36px 21px 36px; }
.about__signature {
  font-family: "Signature", cursive; font-weight: 400; font-size: clamp(30px, 9.4vw, 42px); line-height: 1.1; color: var(--c-primary);
  white-space: nowrap;
}
.about__quote {
  margin-top: 16px;
  font-size: clamp(24px, 7.2vw, 32px); font-weight: 500; line-height: 1.25; letter-spacing: -.02em; color: var(--c-ink);
}
.about__quote em { font-style: normal; color: var(--c-primary); }
.about__text { margin-top: 20px; font-size: 14px; line-height: 1.8; color: var(--c-text); }
.about__text p + p { margin-top: 14px; }
.about__actions { display: grid; gap: 10px; margin-top: 26px; }
/* Same size and styles as the hero buttons. */
.about__actions .btn { min-height: 40px; font-size: 14px; }

@media (min-width: 1080px) {
  /* Sized to the viewport below the sticky header, so the menu's "Hakkımda" jump shows the whole section.
     The photo only fills the column (absolute), so the text — not the photo's aspect ratio — sets the height. */
  .about { display: grid; grid-template-columns: 39% 1fr; min-height: clamp(560px, calc(100svh - var(--header-h)), 900px); }
  .about__media { position: relative; aspect-ratio: auto; }
  .about__media img { position: absolute; inset: 0; }
  .about__body {
    align-self: center;
    padding: 56px clamp(40px, 7.6vw, 150px) 56px clamp(40px, 5vw, 96px);
  }
  .about__body > * { max-width: 40rem; }
  .eyebrow { font-size: 12.5px; }
  .about__signature { font-size: clamp(46px, 3.6vw, 62px); }
  .about__quote { margin-top: 22px; font-size: clamp(30px, 2.9vw, 46px); line-height: 1.18; }
  .about__text { margin-top: 28px; font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.85; }
  .about__text p + p { margin-top: 16px; }
  .about__actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
  .about__actions .btn { min-height: 58px; padding-inline: 34px; font-size: 17.5px; }
}

/* Large monitors: widen the photo and the text measure so the right side doesn't sit empty. */
@media (min-width: 1600px) {
  .about { grid-template-columns: 44% 1fr; }
  .about__body { padding-left: clamp(80px, 5.5vw, 130px); }
  .about__body > * { max-width: 44rem; }
}

/* ---------- Operating room banner ---------- */
/* The photo has no fade of its own: the dark green overlay below keeps the text readable on any photo. */
.surgery {
  position: relative; isolation: isolate; overflow: hidden;
  /* Phones/tablets: text centered on the photo, both ways. */
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: clamp(360px, 108vw, 460px);
  padding: 44px 22px;
  background: var(--c-surgery);
  color: #fff;
}
.surgery__bg { position: absolute; inset: 0; z-index: -2; }
.surgery__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.surgery::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Mobile: evenly dark over the whole photo, slightly deeper at the bottom (measured from the design). */
  background: linear-gradient(180deg, rgba(24, 39, 37, .9) 0%, rgba(24, 39, 37, .86) 50%, rgba(18, 30, 29, .93) 100%);
}
/* Bottom edge melts into the sand-coloured process section below, so the two read as one piece. */
.surgery::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  height: var(--surgery-fade);
  background: linear-gradient(180deg,
    rgba(241, 237, 231, 0) 0%,
    rgba(241, 237, 231, .12) 25%,
    rgba(241, 237, 231, .45) 55%,
    rgba(241, 237, 231, .82) 80%,
    var(--c-sand) 100%);
}
.surgery { --surgery-fade: 150px; padding-bottom: calc(44px + var(--surgery-fade) * .6); }
.surgery + .process { padding-top: 16px; }
.surgery__title { font-size: clamp(26px, 7.8vw, 36px); font-weight: 500; line-height: 1.22; letter-spacing: -.02em; }
.surgery__line { display: block; }
.surgery__lead { margin: 22px auto 0; max-width: 26em; font-size: 14.5px; line-height: 1.8; color: rgba(214, 226, 222, .8); }

@media (min-width: 1080px) {
  .surgery {
    --surgery-fade: clamp(160px, 14vw, 260px);
    align-items: center; justify-content: flex-start; text-align: left;
    min-height: calc(clamp(400px, 33.6vw, 600px) + var(--surgery-fade) * .5);
    padding: 64px var(--gutter) calc(64px + var(--surgery-fade) * .5);
  }
  .surgery + .process { padding-top: 24px; }
  /* Desktop: solid on the left ~third behind the text, then opening up towards the right (measured from the design). */
  .surgery::before {
    background: linear-gradient(90deg,
      rgba(24, 39, 37, .98) 0%,
      rgba(24, 39, 37, .96) 36%,
      rgba(24, 39, 37, .82) 43%,
      rgba(24, 39, 37, .6) 55%,
      rgba(24, 39, 37, .5) 75%,
      rgba(24, 39, 37, .45) 100%);
  }
  .surgery__bg img { object-position: 50% 50%; }
  .surgery__title { font-size: clamp(30px, 2.6vw, 44px); line-height: 1.22; }
  .surgery__lead { margin: 26px 0 0; max-width: 27em; font-size: clamp(13.5px, 1.06vw, 16.5px); font-weight: 400; line-height: 1.95; color: rgba(255, 255, 255, .8); }
}

/* Large monitors: move the banner text in from the edge and scale it up, keeping the laptop look. */
@media (min-width: 1600px) {
  .surgery { padding-left: clamp(80px, 6.5vw, 150px); }
  .surgery__title { font-size: clamp(44px, 2.9vw, 56px); }
  .surgery__lead { font-size: clamp(17px, 1.05vw, 20px); }
}

/* ---------- Treatment process (informational only) ---------- */
.process { background: var(--c-sand); }
/* Phones: narrower centered cards with larger text. */
.process__steps { display: flex; flex-direction: column; align-items: stretch; width: min(88%, 420px); margin: 0 auto; padding: 0; list-style: none; }
.process__step {
  padding: 22px 18px 24px;
  background: var(--c-bg); border: 1px solid var(--c-card-line); border-radius: 4px;
  text-align: center;
}
.process__title { padding-bottom: 16px; border-bottom: 1px solid var(--c-card-line); font-size: 16px; font-weight: 500; color: var(--c-ink); }
.process__text { margin-top: 16px; font-size: 14.5px; line-height: 1.7; color: var(--c-text); }
.process__arrow { display: flex; justify-content: center; padding: 12px 0; }
.process__arrow span {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--c-primary); color: #fff; font-size: 15px; line-height: 1;
  transform: rotate(90deg); /* points down on phones */
}

@media (min-width: 1080px) {
  /* The design runs this row edge to edge like the header, not inset like the treatments grid. */
  .process { padding-inline: var(--gutter); }
  .process__steps { flex-direction: row; align-items: stretch; width: auto; margin: 0; }
  .process__step { flex: 1 1 0; min-height: 176px; padding: 26px clamp(16px, 1.8vw, 26px) 30px; }
  .process__title { padding-bottom: 18px; font-size: clamp(15px, 1.25vw, 19px); }
  .process__text { margin-top: 20px; font-size: clamp(12.5px, .98vw, 15px); }
  .process__arrow { flex: none; align-items: center; padding: 0 clamp(12px, 1.1vw, 18px); }
  .process__arrow span { width: 36px; height: 36px; font-size: 16px; transform: none; }
}

/* ---------- Contact ----------
   Phones: intro → booking/phone/WhatsApp cards → map → form.
   Desktop: intro + form on the left, cards + map on the right. */
.contact { display: grid; grid-template-areas: "intro" "side" "form"; gap: 20px; background: var(--c-sand); }
.contact__intro { grid-area: intro; }
.contact__side { grid-area: side; display: grid; gap: 12px; }
.contact-form { grid-area: form; }
.contact__title { font-size: clamp(26px, 7.6vw, 34px); font-weight: 500; letter-spacing: -.02em; color: var(--c-ink); }
.contact__lead { margin-top: 12px; font-size: 14px; line-height: 1.75; color: var(--c-text); }

.contact-card {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px 14px;
  padding: 18px 18px 20px;
  background: var(--c-bg); border: 1px solid var(--c-outline-strong); border-radius: 4px;
  color: var(--c-ink); transition: border-color .2s, box-shadow .2s;
}
.contact-card:hover { border-color: var(--c-primary); box-shadow: 0 6px 20px rgba(24, 32, 29, .05); }
.contact-card--accent { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.contact-card__icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(59, 91, 87, .1); color: var(--c-primary);
}
.contact-card__icon .icon { width: 18px; height: 18px; }
.contact-card--accent .contact-card__icon { background: rgba(255, 255, 255, .14); color: #fff; }
.contact-card__label { font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.contact-card__btn {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 0 22px; border-radius: 2px;
  font-size: 14px; font-weight: 500; white-space: nowrap;
}
.contact-card__btn--dark { background: var(--c-ink); color: #fff; }
.contact-card__btn--light { background: #fff; color: var(--c-primary); }
.contact-card__btn--outline { border: 1px solid var(--c-primary); color: var(--c-primary); }
/* Phone and WhatsApp show the number itself as plain text, not inside a button (the whole card stays tappable). */
.contact-card .contact-card__btn--number {
  justify-content: flex-start; min-height: 0; padding: 0; background: none; border: 0; border-radius: 0;
  color: var(--c-primary); font-size: 20px; font-weight: 500; letter-spacing: .01em; font-variant-numeric: tabular-nums;
}
.contact-card--accent .contact-card__btn--number { color: #fff; }

.contact-map { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 4px; overflow: hidden; }
.contact-map__frame { position: relative; aspect-ratio: 4 / 3; background: var(--c-line); }
.contact-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.contact-map__open {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px;
  background: #fff; border-radius: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  font-size: 13px; color: #1a73e8;
}
.contact-map__open .icon { width: 13px; height: 13px; }
.contact-map__address { display: grid; gap: 6px; padding: 18px; font-style: normal; font-size: 13px; line-height: 1.6; color: var(--c-text); }
.contact-map__address strong { font-weight: 500; color: var(--c-ink); }

.contact-form { display: grid; gap: 18px; padding: 22px 20px 24px; background: var(--c-primary); border-radius: 4px; color: #fff; }
.contact-form__row { display: grid; gap: 18px; }
.field { display: grid; gap: 9px; }
.field__label { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.field__input {
  width: 100%; min-height: 46px; padding: 10px 14px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .22); border-radius: 2px;
  color: #fff; font-size: 16px; /* 16px stops iOS from zooming into the field */
  transition: border-color .2s, background-color .2s;
}
.field__input:focus { outline: none; border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .1); }
.field__select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(-45deg, transparent 50%, #fff 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.field__select option { color: var(--c-ink); }
.field__textarea { min-height: 96px; resize: vertical; }
.contact-form__footer { display: grid; gap: 14px; }
.contact-form__submit { min-height: 46px; background: #fff; color: var(--c-primary); font-weight: 500; }
.contact-form__submit:hover { background: var(--c-bg); }
.contact-form__note { font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .8); }

/* Phones: all three contact cards share one calm style (same card, same green button) so they don't compete;
   the icon and label tell them apart. The mixed dark/green/outline styles are kept for desktop only. */
@media (max-width: 1079px) {
  .contact-card--accent { background: var(--c-bg); border-color: var(--c-outline-strong); color: var(--c-ink); }
  .contact-card--accent .contact-card__icon { background: rgba(59, 91, 87, .1); color: var(--c-primary); }
  .contact-card__btn--dark, .contact-card__btn--light:not(.contact-card__btn--number), .contact-card__btn--outline:not(.contact-card__btn--number) {
    background: var(--c-primary); border: 0; color: #fff;
  }
  .contact-card--accent .contact-card__btn--number { color: var(--c-primary); }
  .contact-card .contact-card__btn--number { padding-left: 58px; margin-top: -8px; font-weight: 700; color: var(--c-primary-hover); }
}

@media (min-width: 720px) {
  .contact-form__row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1080px) {
  .contact {
    grid-template-columns: 1fr 1fr; grid-template-areas: "intro side" "form side";
    grid-template-rows: auto 1fr; gap: 0 clamp(40px, 5vw, 66px);
    padding-inline: var(--gutter);
  }
  .contact__title { font-size: clamp(34px, 3.05vw, 48px); }
  .contact__lead { margin-top: 18px; max-width: 36em; font-size: clamp(14px, 1.1vw, 16.5px); line-height: 1.85; }
  .contact-form { margin-top: 30px; gap: 20px; padding: 34px; }
  .contact__side { gap: 18px; }
  .contact-card { grid-template-columns: auto 1fr auto; gap: 16px; padding: clamp(20px, 2.2vw, 30px); }
  .contact-card__label { font-size: clamp(17px, 1.55vw, 22px); }
  .contact-card__btn { grid-column: auto; min-width: 146px; min-height: 44px; }
  .contact-card .contact-card__btn--number { min-width: 0; justify-content: flex-end; font-size: clamp(18px, 1.6vw, 22px); }
  .contact-map__frame { aspect-ratio: 16 / 6.4; }
  .contact-map__address { padding: 22px 30px 26px; font-size: 14px; }
  .contact-form__footer { grid-template-columns: auto 1fr; align-items: center; gap: 14px 16px; }
  .contact-form__submit { padding-inline: 30px; }
}

/* ---------- FAQ ---------- */
.faq { background: var(--c-sand); }
.faq .section-title em { display: inline; } /* short title: keep on one line on phones too */
.faq-list { display: grid; gap: 8px; }
.faq-item {
  background: var(--c-bg); border: 1px solid var(--c-card-line); border-radius: 4px;
  transition: border-color .2s;
}
.faq-item[open] { border-color: var(--c-primary); }
.faq-item__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 16px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--c-ink);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__icon {
  position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(59, 91, 87, .12); transition: background-color .2s;
}
.faq-item__icon::before, .faq-item__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px;
  background: var(--c-primary); transform: translate(-50%, -50%); transition: transform .2s, background-color .2s;
}
.faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-item__icon { background: var(--c-primary); }
.faq-item[open] .faq-item__icon::before, .faq-item[open] .faq-item__icon::after { background: #fff; }
.faq-item[open] .faq-item__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item__a { padding: 0 16px 20px; font-size: 14px; line-height: 1.75; color: var(--c-text); }

/* Process and FAQ share the sand background: don't stack both sections' paddings between them. */
.process + .faq { padding-top: 8px; }

/* Phones: "Devamı →" sits bottom-right under the list. */
.faq .section-head { margin-bottom: 20px; }
.faq { display: flex; flex-direction: column; }
.faq__more { order: 3; align-self: flex-end; margin-top: 22px; }
.faq .section-head { display: contents; }
.faq .section-title { margin-bottom: 20px; }

@media (min-width: 1080px) {
  .faq { display: block; padding-inline: var(--gutter); }
  /* Narrower centered column: the questions shouldn't run the full screen width. */
  .faq .section-head, .faq-list { width: min(100%, 72%, 1180px); margin-inline: auto; }
  /* Title centered over the column, "Devamı →" stays on the right. */
  .faq .section-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; margin-bottom: 36px; }
  .faq .section-title { grid-column: 2; text-align: center; }
  .faq__more { grid-column: 3; justify-self: end; }
  .faq .section-title { margin-bottom: 0; }
  .faq__more { margin-top: 0; }
  .faq-list { gap: 10px; }
  .faq-item__q { padding: 22px 20px; font-size: clamp(15px, 1.15vw, 17px); }
  .faq-item__a { padding: 0 20px 24px; font-size: clamp(13.5px, 1.05vw, 15.5px); }
}

/* ---------- Blog ---------- */
/* Phones: 4 posts stacked, "Tüm yazılar →" bottom-right. Desktop: 3 × 2 grid, link top-right. */
.blog { display: flex; flex-direction: column; }
.blog .section-head { display: contents; }
.blog .section-title { margin-bottom: 22px; }
.blog__all { order: 3; align-self: flex-end; margin-top: 26px; }
.blog-grid { display: grid; gap: 34px; }
.blog-card:nth-child(n+5) { display: none; }
.blog-card__link { display: block; }
.blog-card__media { display: block; aspect-ratio: 2 / 1; overflow: hidden; background: var(--c-line); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.blog-card__link:hover .blog-card__media img { transform: scale(1.03); }
.blog-card__category {
  display: block; margin-top: 16px;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-gold);
}
.blog-card__title {
  margin-top: 10px; font-size: 19px; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; color: var(--c-ink);
  transition: color .2s;
}
.blog-card__link:hover .blog-card__title { color: var(--c-primary); }

@media (min-width: 1080px) {
  .blog { display: block; padding-inline: var(--gutter); }
  .blog .section-head { display: flex; margin-bottom: 44px; }
  .blog .section-title { margin-bottom: 0; }
  .blog__all { margin-top: 0; }
  .blog-grid { grid-template-columns: repeat(3, 1fr); gap: 52px clamp(24px, 3vw, 44px); }
  .blog-card:nth-child(n+5) { display: block; }
  .blog-card__media { aspect-ratio: 2.36 / 1; }
  .blog-card__category { margin-top: 20px; font-size: 12px; }
  .blog-card__title { margin-top: 12px; font-size: clamp(18px, 1.55vw, 24px); }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--c-footer); color: rgba(255, 255, 255, .78); font-size: 15px; }
.site-footer a { transition: color .2s; }
.site-footer a:hover { color: #fff; }
.site-footer__main {
  display: grid; grid-template-columns: 1fr 1fr; gap: 34px 20px;
  padding: 44px var(--gutter) 32px;
}
.footer-brand, .footer-col--contact { grid-column: 1 / -1; }
.footer-brand__logo { width: auto; height: 84px; }
@media (max-width: 1079px) {
  .footer-brand__logo { margin-inline: auto; }
}
.footer-brand__address { margin-top: 20px; font-style: normal; line-height: 1.75; }
.footer-col__title { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-gold); }
.footer-col ul { display: grid; gap: 12px; margin-top: 16px; }
/* Phones: phone · WhatsApp · Instagram on one line, e-mail below. */
.footer-contact { grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 0 !important; }
.footer-contact li:not(.footer-contact__email):not(:nth-child(3))::after { content: "·"; margin: 0 8px; }
.footer-contact__email { grid-column: 1 / -1; }

.site-footer__bottom {
  display: flex; flex-direction: column; gap: 6px;
  margin: 0 var(--gutter); padding: 22px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .6);
}
.site-footer__credits {
  order: 3; display: flex; align-items: center; justify-content: center; gap: 28px;
  margin-top: 22px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14);
}
.site-footer__disclaimer { order: 2; }
/* Both credit logos at the same height; their files are trimmed so there's no hidden padding. */
.site-footer__credits img { width: auto; height: 48px; }
/* Phones/tablets: whole footer centered. */
@media (max-width: 1079px) {
  .site-footer__main, .site-footer__bottom { text-align: center; }
  .footer-contact { justify-content: center; }
}
.site-footer__credits-sep { align-self: stretch; width: 1px; margin-block: 4px; background: rgba(255, 255, 255, .22); }

@media (min-width: 1080px) {
  .site-footer__main {
    grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 40px;
    padding: 64px var(--gutter) 56px;
  }
  .footer-brand, .footer-col--contact { grid-column: auto; }
  .footer-brand__logo { height: 96px; }
  .footer-col__title { margin-top: 6px; }
  .footer-col ul { gap: 14px; margin-top: 20px; }
  .footer-contact { grid-template-columns: 1fr; }
  .footer-contact li::after { content: none !important; }

  .site-footer__bottom {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
    padding: 26px 0 30px;
  }
  .site-footer__copy { order: 1; }
  .site-footer__credits { order: 2; margin: 0; padding: 0; border: 0; gap: 28px; }
  .site-footer__disclaimer { order: 3; text-align: right; }
  .site-footer__credits img { height: 50px; }
}

/* ---------- Treatment page ----------
   Hero (breadcrumb, H1, lead, buttons + photo) → dark "at a glance" strip → article with a table of contents
   (desktop: sticky side column with a booking box) → treatment FAQ → the treatment's blog posts
   → contact → footer. */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--c-muted); }
.breadcrumb li:not(:last-child)::after { content: "/"; margin: 0 8px; color: var(--c-card-line); }
.breadcrumb a { transition: color .2s; }
.breadcrumb a:hover { color: var(--c-primary); }
.breadcrumb [aria-current] { color: var(--c-primary); }

.t-hero { display: grid; gap: 28px; padding: 22px var(--gutter) 36px; }
.t-hero__title {
  margin-top: 18px;
  font-size: clamp(28px, 8.4vw, 38px); font-weight: 500; line-height: 1.14; letter-spacing: -.025em; color: var(--c-ink);
}
.t-hero__lead { margin-top: 16px; font-size: 15px; line-height: 1.8; color: var(--c-text); }
.t-hero__actions { display: grid; gap: 10px; margin-top: 24px; }
.t-hero__actions .btn { gap: 8px; min-height: 46px; font-size: 14.5px; }
.t-hero__actions .icon { width: 18px; height: 18px; }
.t-hero__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--c-line); }
.t-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.t-facts { background: var(--c-deep); color: #fff; }
.t-facts__list { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.t-facts__item { padding: 18px 20px; border-right: 1px solid var(--c-deep-line); border-bottom: 1px solid var(--c-deep-line); }
.t-facts__item:nth-child(2n) { border-right: 0; }
.t-facts__item:nth-last-child(-n+2):nth-child(odd), .t-facts__item:last-child { border-bottom: 0; }
.t-facts__item dt { font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--c-gold); }
.t-facts__item dd { margin: 8px 0 0; font-size: 17px; font-weight: 300; line-height: 1.3; letter-spacing: -.01em; }

.t-body { display: grid; gap: 28px; padding: 36px var(--gutter) 48px; }
.t-toc__box { background: var(--c-sand); border: 1px solid var(--c-card-line); border-radius: 4px; }
.t-toc__title {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 18px;
  cursor: pointer; list-style: none;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-primary);
}
.t-toc__title::-webkit-details-marker { display: none; }
.t-toc__title::after { content: "+"; font-size: 18px; font-weight: 300; letter-spacing: 0; }
.t-toc__box[open] .t-toc__title::after { content: "–"; }
.t-toc__list { display: grid; padding: 0 18px 14px; list-style: none; counter-reset: toc; }
.t-toc__list li { counter-increment: toc; border-top: 1px solid var(--c-card-line); }
.t-toc__list a { display: flex; gap: 10px; padding: 11px 0; font-size: 14px; line-height: 1.45; color: var(--c-ink); transition: color .2s; }
.t-toc__list a::before { content: counter(toc, decimal-leading-zero); flex: none; font-size: 12px; line-height: 1.7; color: var(--c-gold); }
.t-toc__list a:hover, .t-toc__list a.is-active { color: var(--c-primary); }
/* Phones use the contact section at the bottom instead of the side booking box. */
.t-cta { display: none; }

.t-article { min-width: 0; }
.t-section + .t-section, .t-figure + .t-section { margin-top: 40px; }
.t-section h2 { font-size: clamp(22px, 6.4vw, 26px); font-weight: 500; line-height: 1.25; letter-spacing: -.02em; color: var(--c-ink); }
.t-section h3 { margin-top: 26px; font-size: 17.5px; font-weight: 500; line-height: 1.35; color: var(--c-ink); }
.t-section p, .t-section li { font-size: 15px; line-height: 1.8; color: var(--c-text); }
.t-section p, .t-section ul, .t-section ol, .t-section table { margin-top: 16px; }
.t-section h2 + p { margin-top: 18px; }
.t-section strong { font-weight: 500; color: var(--c-ink); }
.t-section a { color: var(--c-primary); text-decoration: underline; text-decoration-color: var(--c-link-line); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.t-section a:hover { text-decoration-color: var(--c-primary); }
.t-section ul { display: grid; gap: 8px; }
.t-section ul li { position: relative; padding-left: 22px; }
.t-section ul li::before { content: ""; position: absolute; left: 2px; top: .9em; width: 10px; height: 1.5px; background: var(--c-primary); }
.t-section ol { display: grid; gap: 10px; padding: 0; list-style: none; counter-reset: step; }
.t-section ol li { position: relative; padding-left: 38px; counter-increment: step; }
.t-section ol li::before {
  content: counter(step); position: absolute; left: 0; top: .15em;
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(59, 91, 87, .12); color: var(--c-primary); font-size: 12.5px; font-weight: 500; line-height: 1;
}
.t-section table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; font-size: 14px; }
.t-section th, .t-section td { padding: 10px 8px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; line-height: 1.6; }
.t-section th { font-weight: 500; color: var(--c-ink); background: var(--c-sand); }
.t-section td { color: var(--c-text); }

.t-figure { margin: 36px 0 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--c-line); }
.t-figure img { width: 100%; height: 100%; object-fit: cover; }
.t-figure--placeholder {
  display: grid; place-items: center; padding: 16px; border: 1px dashed var(--c-outline-strong);
  font-size: 13px; text-align: center; color: var(--c-muted);
}

.t-author {
  display: flex; align-items: center; gap: 16px;
  margin-top: 44px; padding: 20px; border: 1px solid var(--c-card-line); border-radius: 4px;
}
.t-author__photo { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--c-line); }
.t-author__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.t-author__label { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-gold); }
.t-author__name { margin-top: 4px; font-size: 17px; font-weight: 500; color: var(--c-ink); }
.t-author__name a:hover { color: var(--c-primary); }
.t-author__meta { margin-top: 3px; font-size: 13px; line-height: 1.55; color: var(--c-muted); }
.t-disclaimer { margin-top: 16px; font-size: 12.5px; line-height: 1.7; color: var(--c-muted); }

/* Treatment FAQ: no "Devamı" link, so the title just sits on top. */
.t-faq .section-title em { display: block; }

/* Related blog posts: all of them are shown (the home page hides posts 5–6 on phones). */
.t-blog .blog-card:nth-child(n+5) { display: block; }

/* Treatments without blog posts: FAQ and contact share the sand background, a hairline keeps them apart. */
.t-faq + .contact { border-top: 1px solid var(--c-card-line); }

@media (min-width: 600px) {
  .t-hero__actions { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 720px) {
  .t-facts__list { grid-template-columns: repeat(4, 1fr); }
  .t-facts__item { border-bottom: 0; }
  .t-facts__item:nth-child(2n) { border-right: 1px solid var(--c-deep-line); }
  .t-facts__item:last-child { border-right: 0; }
}

@media (min-width: 1080px) {
  .t-hero {
    grid-template-columns: 1fr 44%; align-items: center; gap: clamp(40px, 5vw, 88px);
    padding: 40px var(--gutter) 64px clamp(40px, 7.6vw, 150px);
  }
  .breadcrumb ol { font-size: 14px; }
  .t-hero__title { margin-top: 34px; font-size: clamp(40px, 3.7vw, 60px); line-height: 1.1; letter-spacing: -.03em; }
  .t-hero__lead { max-width: 34em; margin-top: 26px; font-size: clamp(15px, 1.2vw, 18.5px); line-height: 1.85; }
  .t-hero__actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 38px; }
  .t-hero__actions .btn { min-height: 56px; padding-inline: 30px; font-size: clamp(15px, 1.2vw, 17px); }

  .t-facts__item { padding: 26px var(--gutter) 24px; }
  .t-facts__item:first-child { padding-left: clamp(40px, 7.6vw, 150px); }
  .t-facts__item dt { font-size: 11.5px; }
  .t-facts__item dd { margin-top: 10px; font-size: clamp(20px, 1.75vw, 28px); }

  /* Article on the left in a readable measure, table of contents + booking box on the right. */
  .t-body {
    grid-template-columns: minmax(0, 1fr) clamp(280px, 24vw, 360px); align-items: start; gap: clamp(48px, 6vw, 110px);
    padding: 80px var(--gutter) 88px clamp(40px, 7.6vw, 150px);
  }
  .t-aside { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 18px; }
  .t-article { grid-column: 1; grid-row: 1; max-width: 800px; }
  .t-toc__title { padding: 20px 22px 14px; cursor: default; pointer-events: none; }
  .t-toc__title::after, .t-toc__box[open] .t-toc__title::after { content: none; }
  .t-toc__list { padding: 0 22px 12px; }
  .t-toc__list a { font-size: 14.5px; }

  .t-cta { display: grid; gap: 14px; padding: 24px 22px; background: var(--c-primary); border-radius: 4px; color: #fff; }
  .t-cta__title { font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
  .t-cta__text { font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .8); }
  .t-cta .btn { margin-top: 4px; background: #fff; color: var(--c-primary); font-weight: 500; }
  .t-cta .btn:hover { background: var(--c-bg); }
  .t-cta__line { display: flex; align-items: center; gap: 10px; font-size: 15px; transition: opacity .2s; }
  .t-cta__line:hover { opacity: .8; }
  .t-cta__line .icon { width: 18px; height: 18px; }
  .t-cta__line + .t-cta__line { margin-top: -4px; }

  .t-section + .t-section, .t-figure + .t-section { margin-top: 56px; }
  .t-section h2 { font-size: clamp(26px, 2.1vw, 34px); }
  .t-section h3 { margin-top: 30px; font-size: clamp(18px, 1.4vw, 21px); }
  .t-section p, .t-section li { font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.85; }
  .t-section p, .t-section ul, .t-section ol, .t-section table { margin-top: 20px; }
  .t-section h2 + p { margin-top: 22px; }
  .t-section table { display: table; font-size: 15px; }
  .t-section th, .t-section td { padding: 12px 14px; }
  .t-figure { margin-top: 48px; }
  .t-author { margin-top: 64px; padding: 24px 26px; gap: 20px; }
  .t-author__photo { width: 76px; height: 76px; }
  .t-author__name { font-size: 19px; }
  .t-author__meta { font-size: 14px; }
  .t-disclaimer { font-size: 13.5px; }

  .t-faq .section-title em { display: inline; }
  /* Same left edge as the article (the home page blog runs edge to edge). */
  .t-blog { padding-inline: clamp(40px, 7.6vw, 150px); }
}

/* Large monitors: the article grows with the screen instead of stopping at 800px (which left a wide empty gap
   before the side column); text, headings and the side column scale up with it so the line length stays readable. */
@media (min-width: 1600px) {
  .t-body { grid-template-columns: minmax(0, 1fr) clamp(360px, 23vw, 600px); gap: clamp(96px, 7vw, 200px); }
  .t-article { max-width: none; }
  .t-section h2 { font-size: clamp(34px, 1.95vw, 52px); }
  .t-section h3 { font-size: clamp(21px, 1.2vw, 31px); }
  .t-section p, .t-section li { font-size: clamp(17.5px, 1vw, 26px); }
  .t-section table { font-size: clamp(15px, .85vw, 22px); }
  .t-section + .t-section, .t-figure + .t-section { margin-top: 64px; }
  .t-toc__title { font-size: 12px; }
  .t-toc__list a { font-size: clamp(14.5px, .82vw, 21px); padding-block: 13px; }
  .t-toc__list a::before { font-size: .82em; }
  .t-cta__title { font-size: clamp(20px, 1.2vw, 31px); }
  .t-cta__text, .t-cta__line { font-size: clamp(14px, .85vw, 22px); }
  .t-author__name { font-size: clamp(19px, 1.1vw, 28px); }
  .t-author__meta, .t-disclaimer { font-size: clamp(14px, .8vw, 20px); }
}

/* ---------- FAQ page ----------
   Page heading, then the treatment-page layout (.t-body): question groups on the left, topic list + booking box
   fixed on the right. Each group: title, link to its treatment page, accordion. */
.page-head { padding: 22px var(--gutter) 0; }
.page-head__title { margin-top: 24px; font-size: clamp(28px, 8.4vw, 38px); font-weight: 500; line-height: 1.14; letter-spacing: -.025em; color: var(--c-ink); }
.page-head__lead { margin-top: 14px; font-size: 15px; line-height: 1.8; color: var(--c-text); }
.faq-page { padding-top: 28px; }
.faq-group + .faq-group { margin-top: 44px; }
.faq-group__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 20px; margin-bottom: 16px; }
.faq-group__title { font-size: clamp(22px, 6.4vw, 26px); font-weight: 500; line-height: 1.25; letter-spacing: -.02em; color: var(--c-ink); }
.faq-group .link-arrow { font-size: 13.5px; }

@media (min-width: 1080px) {
  .page-head { padding: 40px var(--gutter) 0 clamp(40px, 7.6vw, 150px); }
  .page-head__title { margin-top: 34px; font-size: clamp(40px, 3.7vw, 60px); line-height: 1.1; letter-spacing: -.03em; }
  .page-head__lead { max-width: 44em; margin-top: 22px; font-size: clamp(15px, 1.2vw, 18.5px); line-height: 1.85; }
  .faq-page { padding-top: 56px; }
  .faq-group + .faq-group { margin-top: 64px; }
  .faq-group__head { margin-bottom: 22px; }
  .faq-group__title { font-size: clamp(26px, 2.1vw, 34px); }
  .faq-group .link-arrow { font-size: 15px; }
  .faq-page .t-article { max-width: 900px; }
  .faq-page .faq-list { width: auto; margin-inline: 0; } /* the home page list is a narrower centered column */
}
@media (min-width: 1600px) {
  .page-head__lead { font-size: clamp(18px, 1vw, 22px); }
  .faq-page .t-article { max-width: none; }
  .faq-group__title { font-size: clamp(34px, 1.95vw, 52px); }
  .faq-page .faq-item__q { font-size: clamp(17px, .95vw, 22px); }
  .faq-page .faq-item__a { font-size: clamp(15.5px, .9vw, 21px); }
}

/* ---------- Blog list & posts ----------
   List: text-only cards (no photos), category chips, pager. Post (no photo): heading block, then the
   treatment-page layout (.t-body) with a related-treatment box in the side column. */
.blog-card__media--empty { background: linear-gradient(135deg, var(--c-sand), var(--c-line)); }

.blog-index { padding-top: 28px; }
.chips { display: flex; gap: 8px; margin: 0 calc(-1 * var(--gutter)) 24px; padding: 0 var(--gutter) 4px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px;
  border: 1px solid var(--c-card-line); border-radius: 999px; background: var(--c-bg);
  font-size: 13.5px; font-weight: 500; color: var(--c-ink); white-space: nowrap; transition: border-color .2s, background-color .2s, color .2s;
}
.chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.chip[aria-current="page"] { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

.post-list { display: grid; gap: 12px; }
.post-card {
  position: relative; display: flex; flex-direction: column;
  padding: 20px 18px 18px; background: var(--c-bg); border: 1px solid var(--c-card-line); border-radius: 4px;
  transition: border-color .2s, box-shadow .2s;
}
.post-card:hover { border-color: var(--c-primary); box-shadow: 0 6px 24px rgba(24, 32, 29, .06); }
.post-card__meta { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 12.5px; color: var(--c-muted); }
.post-card__meta > * + *::before { content: "·"; margin: 0 8px; }
.post-card__category { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; line-height: 1.7; color: var(--c-gold); }
.post-card__title { margin-top: 10px; font-size: 18px; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; color: var(--c-ink); }
/* The whole card is clickable through the title link. */
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card:hover .post-card__title { color: var(--c-primary); }
.post-card__excerpt { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--c-text); }
.post-card__more { margin-top: auto; padding-top: 14px; font-size: 13.5px; font-weight: 500; color: var(--c-primary); }
.blog-index__empty { color: var(--c-text); }

.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 32px; }
.pager__link {
  display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--c-card-line); border-radius: 4px; font-size: 14px; color: var(--c-ink);
}
.pager__link:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pager__num[aria-current="page"] { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

.post-head__category {
  display: inline-block; margin-top: 24px;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-gold);
}
.post-head .post-head__category + .page-head__title { margin-top: 10px; }
.post-head__meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 16px; font-size: 13px; color: var(--c-muted); }
.post-head__meta > * + *::before { content: "·"; margin: 0 8px; }
.post-head__meta a { color: var(--c-primary); }
.post-body { padding-top: 32px; }
.post-treatment { display: none; }
.post-related { padding-top: 8px; }
.post-related .section-title { font-size: clamp(22px, 6.4vw, 26px); }

@media (min-width: 720px) {
  .post-list { grid-template-columns: 1fr 1fr; gap: 16px; }
}

@media (min-width: 1080px) {
  .blog-index { padding-top: 40px; padding-inline: clamp(40px, 7.6vw, 150px); }
  .chips { flex-wrap: wrap; margin: 0 0 32px; padding: 0; overflow: visible; }
  .chip { min-height: 42px; padding: 0 20px; font-size: 14.5px; }
  .post-list { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .post-card { padding: 26px 26px 22px; }
  .post-card__title { margin-top: 12px; font-size: clamp(18px, 1.45vw, 22px); }
  .post-card__excerpt { margin-top: 10px; font-size: clamp(14px, 1.05vw, 15.5px); }
  .pager { margin-top: 44px; }

  .post-head__category { margin-top: 34px; font-size: 12px; }
  .post-head .post-head__category + .page-head__title { margin-top: 14px; }
  .post-head__meta { margin-top: 22px; font-size: 14.5px; }
  .post-body { padding-top: 64px; }
  .post-treatment {
    display: grid; gap: 10px; padding: 22px; background: var(--c-sand); border: 1px solid var(--c-card-line); border-radius: 4px;
  }
  .post-treatment__label { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-gold); }
  .post-treatment__title { font-size: 20px; font-weight: 500; color: var(--c-ink); }
  .post-treatment__text { font-size: 14px; line-height: 1.7; color: var(--c-text); }
  .post-treatment .link-arrow { justify-self: start; font-size: 14.5px; }
  .post-related { padding-inline: clamp(40px, 7.6vw, 150px); }
  .post-related .section-title { font-size: clamp(26px, 2.1vw, 34px); }
}

@media (min-width: 1600px) {
  .post-card__title { font-size: clamp(22px, 1.25vw, 28px); }
  .post-card__excerpt { font-size: clamp(15.5px, .9vw, 19px); }
  .post-treatment__title { font-size: clamp(20px, 1.2vw, 28px); }
  .post-treatment__text { font-size: clamp(14px, .85vw, 18px); }
}

/* ---------- CV page ----------
   Phones: portrait on top, text below. Desktop: portrait fixed in the left column (sticky, fills the screen
   under the header) while the text scrolls on the right; the contact section follows. */
.cv__photo { display: block; aspect-ratio: 4 / 5; max-height: 78svh; width: 100%; overflow: hidden; background: var(--c-line); }
.cv__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.cv__body { padding: 22px var(--gutter) 52px; }
.cv__title { margin-top: 24px; font-size: clamp(28px, 8.4vw, 38px); font-weight: 500; line-height: 1.14; letter-spacing: -.025em; color: var(--c-ink); }
.cv__subtitle { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--c-primary); }
.cv__lead { margin-top: 18px; font-size: 15px; line-height: 1.8; color: var(--c-text); }

.cv-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin: 26px 0 0; }
.cv-facts__item { padding: 16px 0; border-top: 1px solid var(--c-line); }
.cv-facts__item dt { font-size: 10.5px; font-weight: 500; letter-spacing: .14em; line-height: 1.5; text-transform: uppercase; color: var(--c-gold); }
.cv-facts__item dd { margin: 6px 0 0; font-size: 19px; font-weight: 300; line-height: 1.3; letter-spacing: -.01em; color: var(--c-primary); }

.cv__text { margin-top: 32px; }
.cv__actions { display: grid; gap: 10px; margin-top: 40px; }
.cv__actions .btn { min-height: 46px; font-size: 14.5px; }

@media (min-width: 600px) {
  .cv__actions { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1080px) {
  .cv { display: grid; grid-template-columns: 42% 1fr; align-items: start; }
  .cv__photo {
    position: sticky; top: var(--header-h);
    aspect-ratio: auto; height: calc(100svh - var(--header-h)); max-height: none;
  }
  .cv__body { padding: 40px clamp(40px, 7.6vw, 150px) 96px clamp(40px, 5vw, 96px); }
  .cv__body > * { max-width: 760px; }
  .cv__title { margin-top: 40px; font-size: clamp(40px, 3.5vw, 56px); line-height: 1.1; letter-spacing: -.03em; }
  .cv__subtitle { margin-top: 12px; font-size: clamp(15px, 1.2vw, 18px); }
  .cv__lead { margin-top: 26px; font-size: clamp(15.5px, 1.2vw, 18px); line-height: 1.85; }
  .cv-facts { gap: 0 32px; margin-top: 36px; }
  .cv-facts__item { padding: 18px 0 4px; }
  .cv-facts__item dt { font-size: 11px; }
  .cv-facts__item dd { margin-top: 8px; font-size: clamp(19px, 1.6vw, 24px); }
  .cv__text { margin-top: 56px; }
  .cv__actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 56px; }
  .cv__actions .btn { min-height: 56px; padding-inline: 30px; font-size: clamp(15px, 1.2vw, 17px); }
}

/* ---------- Placeholder pages ---------- */
.error-page, main > h1 { padding: 64px var(--gutter); }
.section > p { margin-top: 16px; max-width: 40em; color: var(--c-text); }