/* ==========================================================================
   Meridyen Diş — tema stilleri
   Bootstrap 5.3 üzerine tek dosya.
   Yön: aydınlık, sakin, hairline çizgili. İmza öge: kemer (gülüş yayı) motifi.
   Sıra: tokenlar → temel → düzen → bileşenler → yardımcılar → duyarlılık
   ========================================================================== */

/* 1. Tokenlar ------------------------------------------------------------- */
:root {
  /* Yüzeyler — hiçbiri koyu değil */
  --paper:      #FFFFFF;
  --shell:      #F3F7F9;   /* porselen, marka mavisine çalan kırık beyaz */
  --mist:       #E7EEF2;   /* ikinci yüzey, ayraç dolgusu */

  /* Metin */
  --ink:        #16212A;
  --ink-2:      #29363F;
  --muted:      #64737C;
  --muted-2:    #93A2AA;

  /* Aksan — logodan gelen camgöbeği, iki kademe
     --brand      : logonun kendi rengi. İşaret, ikon, çizgi, dekor.
     --accent     : koyulaştırılmış hâli. Buton zemini ve bağlantı metni
                    (beyaz üzerinde 5.3:1 kontrast).
     --accent-d   : üzerine gelince. */
  --brand:       #1B9CC4;
  --accent:      #14758F;
  --accent-d:    #0F5D73;
  --accent-soft: #E4F2F8;
  --star:        #C9A227;  /* sadece puan yıldızları */
  --wa:          #25A455;  /* sadece WhatsApp */

  /* Çizgi */
  --hair:        rgba(22, 33, 42, .12);
  --hair-strong: rgba(22, 33, 42, .22);

  /* Tipografi */
  --font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Ölçü */
  --wrap:      1180px;
  --gutter:    22px;
  --nav-h:     92px;
  --frame-pad: 12px;
  --sec-y:     clamp(2rem, 4vw, 3.75rem);
  --r-frame:   28px;   /* sayfa çerçevesi */
  --r-sur:     20px;   /* yüzeyler */
  --r-ctl:     12px;   /* buton, input */
  --shadow:    0 18px 50px rgba(22, 33, 42, .07);
  --shadow-lg: 0 30px 70px rgba(22, 33, 42, .11);
  --ease:      cubic-bezier(.2, .7, .2, 1);

  /* Bootstrap köprüsü */
  --bs-primary:      #14758F;
  --bs-primary-rgb:  20, 117, 143;
  --bs-body-color:   #16212A;
  --bs-body-bg:      #FFFFFF;
  --bs-border-color: rgba(22, 33, 42, .12);
  --bs-link-color:   #14758F;
  --bs-link-hover-color: #0F5D73;
}

/* 2. Temel ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--mist);
  padding: var(--frame-pad);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0 0 .6em;
}

h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); letter-spacing: -.042em; line-height: 1.03; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); letter-spacing: -.035em; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -.02em; }

p { color: var(--muted); margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; transition: color .2s var(--ease); }
img, svg, video { max-width: 100%; display: block; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

hr { border: 0; border-top: 1px solid var(--hair); opacity: 1; margin: 0; }

/* 3. Düzen ---------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sec { padding-block: var(--sec-y); }
.sec-shell { background: var(--shell); }
.sec-tight { padding-block: calc(var(--sec-y) * .62); }

/* Bölüm başlığı: kicker + başlık + isteğe bağlı sağ eylem */
.sec-head { margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }
.sec-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.sec-head p { max-width: 56ch; }

.kicker {
  display: block;
  font-family: var(--font-display);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 1rem;
}
.kicker--accent { color: var(--accent); }

.lead {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 58ch;
}

/* 4. İmza: kemer motifi --------------------------------------------------- */
/* Gülüş yayı — dikey görsellerde belirgin, yatayda sığ kemer */
.arch      { border-radius: 999px 999px var(--r-sur) var(--r-sur) / 46% 46% var(--r-sur) var(--r-sur); overflow: hidden; }
.arch-soft { border-radius: 999px 999px var(--r-sur) var(--r-sur) / 22% 22% var(--r-sur) var(--r-sur); overflow: hidden; }

/* Bölümleri ayıran ince yay */
.arc-divider {
  display: block;
  width: 100%;
  height: 42px;
  color: var(--hair);
}

/* 5. Butonlar ------------------------------------------------------------- */
.btn {
  --bs-btn-focus-box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  padding: .875rem 1.5rem;
  border-radius: var(--r-ctl);
  border: 1px solid transparent;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 1.0625rem 1.85rem; font-size: 1rem; }
.btn-sm { padding: .6875rem 1.15rem; font-size: .875rem; }

.btn-accent {
  background: var(--accent);
  color: #fff;
}
.btn-accent:hover, .btn-accent:focus { background: var(--accent-d); color: #fff; }

.btn-line {
  background: transparent;
  color: var(--ink);
  border-color: var(--hair-strong);
}
.btn-line:hover, .btn-line:focus {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.btn-quiet {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--hair);
}
.btn-quiet:hover { background: var(--shell); color: var(--accent-d); }

.btn-white {
  background: #fff;
  color: var(--ink);
}
.btn-white:hover, .btn-white:focus { background: var(--accent); color: #fff; }

.btn-ghost-white {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
  backdrop-filter: blur(8px);
}
.btn-ghost-white:hover, .btn-ghost-white:focus { background: #fff; color: var(--ink); border-color: #fff; }

.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: #1E8C47; color: #fff; }

/* Metin bağlantısı — ok ile */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--accent);
}
.link-arrow svg, .link-arrow .bi { transition: transform .22s var(--ease); }
.link-arrow:hover { color: var(--accent-d); }
.link-arrow:hover svg, .link-arrow:hover .bi { transform: translateX(4px); }

/* 6. Sayfa çerçevesi ------------------------------------------------------ */
/* Site ekrana yapışmaz; kenarlarda ince boşluk, köşeler yuvarlak. */
.frame {
  position: relative;
  border-radius: var(--r-frame);
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(22, 33, 42, .05);
}

/* 6b. Menü ---------------------------------------------------------------- */
/* Menü kabı, ortalanan başlıklara yer açmak için içerikten daha geniş */
.nav-bar .wrap { max-width: 1400px; }
/* Hero üzerinde şeffaf durur; hero geçilince beyaz sürüm aşağı iner. */
/* Header HER SAYFADA aynı davranıyor: en üstte saydam (altındaki hero ya
   da sayfa başlığı bandının üzerinde), kaydırınca beyaza dönüp yapışıyor.
   Önce anasayfa (absolute + JS) ve iç sayfalar (sticky) ayrı kurulmuştu;
   iki farklı davranış hem tutarsızdı hem iki ayrı yerde bakım demekti.

   position: fixed — sticky değil: sticky, sayfanın kendi akışında yer
   kaplar ve saydamken altındaki bandın üstüne binemez. */
.nav-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.nav-bar__inner {
  position: relative;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 3.5vw, 3rem);
}

/* space-between boş alanı öğeler arasına eşit böler:
   logo ↔ menü ile menü ↔ sağ blok mesafeleri tanım gereği eşit olur. */

/* Marka kilidi tek görsel: assets/img/logo.svg değiştirilince
   menüde ve alt bilgide birlikte değişir. Oran korunur, yükseklikle ölçeklenir. */
.brand { display: inline-flex; align-items: center; }
.brand-logo {
  height: 64px;          /* menü yüksekliği 92px; üstte altta 14px pay kalır */
  width: auto;
  display: block;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list .nav-link {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink-2);
  padding: .6rem .95rem;
  border-radius: 10px;
  white-space: nowrap;
}

/* Menünün başındaki ev ikonu */
.nav-link--home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  padding-inline: .85rem;
}
.nav-list .nav-link:hover { color: var(--accent); }
.nav-list .nav-link.is-active { font-weight: 600; color: var(--accent); }

.nav-actions { display: flex; align-items: center; gap: .55rem; }

/* Menüdeki telefon numarası */
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--ink);
  white-space: nowrap;
}
.nav-phone:hover { color: var(--accent); }

/* İnce dikey ayraç */
.nav-sep {
  width: 1px;
  height: 26px;
  background: var(--hair-strong);
  flex: 0 0 auto;
  margin-inline: .3rem;
}

/* Menüdeki çerçeveli randevu butonu */
.btn-nav {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9063rem;
  color: var(--ink);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-ctl);
  padding: .72rem 1.2rem;
  white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-nav:hover, .btn-nav:focus { background: var(--accent); border-color: var(--accent); color: #fff; }

.icon-btn {
  width: 40px; height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.05rem;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.icon-btn:hover { transform: translateY(-2px); }
.icon-btn--wa:hover { background: var(--wa); border-color: var(--wa); color: #fff; }
.icon-btn--ig:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Hero üzerindeyken cam görünüm */
.nav-bar--over:not(.is-stuck) .brand,
.nav-bar--over:not(.is-stuck) .nav-list .nav-link { color: #fff; }
.nav-bar--over:not(.is-stuck) .brand-logo { filter: brightness(0) invert(1); }
.nav-bar--over:not(.is-stuck) .nav-list .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .16); }
.nav-bar--over:not(.is-stuck) .nav-list .nav-link.is-active { color: #fff; background: rgba(255, 255, 255, .16); }
.nav-bar--over:not(.is-stuck) .icon-btn {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .32);
  color: #fff;
  backdrop-filter: blur(8px);
}
.nav-bar--over:not(.is-stuck) .nav-phone { color: #fff; }
.nav-bar--over:not(.is-stuck) .nav-phone:hover { color: rgba(255, 255, 255, .78); }
.nav-bar--over:not(.is-stuck) .nav-sep { background: rgba(255, 255, 255, .32); }
.nav-bar--over:not(.is-stuck) .btn-nav {
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
  backdrop-filter: blur(8px);
}
.nav-bar--over:not(.is-stuck) .btn-nav:hover,
.nav-bar--over:not(.is-stuck) .btn-nav:focus { background: #fff; border-color: #fff; color: var(--ink); }
.nav-bar--over:not(.is-stuck) .nav-toggle {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .32);
  color: #fff;
}

/* Kaydırınca beyaza dönen menü.
   inset: 0 — önce var(--frame-pad) kadar içeriden başlıyordu ve üstte
   sayfa zemini şerit hâlinde görünüyordu. Sabit bir başlıkta o boşluk
   çerçeve etkisi değil, hata gibi duruyor. */
.nav-bar.is-stuck {
  inset: 0 0 auto 0;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--hair);
  animation: navDrop .34s var(--ease);
}
/* DİKKAT — backdrop-filter YALNIZCA masaüstünde.
   Filtre uygulanan öğe, içindeki position:fixed öğeler için kapsayıcı blok
   oluşturur. Mobil menü çekmecesi header'ın içinde ve fixed; filtre her
   boyutta açık olsaydı çekmece ekrana değil header'ın kutusuna hapsolurdu
   (dentaris temasında birebir bu yaşandı). */
@media (min-width: 992px) {
  .nav-bar.is-stuck { backdrop-filter: saturate(150%) blur(14px); }
  .offcanvas-lg .offcanvas-body { padding: 0; }

  /* Masaüstünde offcanvas devre dışı — bunu ELLE yapmıyoruz: Bootstrap'ın
     duyarlı `.offcanvas-lg` sınıfı lg altında çekmece, üstünde sıradan
     içerik olarak davranıyor. Önce `.offcanvas`ı position:static vb. ile
     etkisizleştirmeye çalıştım; `.offcanvas-end`in kendi genişlik/transform
     kuralları devrede kaldığı için masaüstünde menü ile sağdaki butonlar
     üst üste bindi. */
}
@keyframes navDrop { from { transform: translateY(-100%); } to { transform: none; } }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.15rem;
}

/* "Tedaviler" artık tıklanınca sayfaya gidiyor; alt menü üzerine gelince
   (klavyede odaklanınca) açılır. Bootstrap'in tıklamayla açma davranışı yok. */
@media (min-width: 992px) {
  /* Dil değiştirici HARİÇ: o Bootstrap'ın kendi açılır menüsü (tıklamayla).
     İkisi birlikte çalışınca menü üzerine gelindiğinde CSS ile, tıklandığında
     Bootstrap ile konumlanıyor ve iki konum farklı çıkıyordu — menü tıklayınca
     sola sıçrıyordu. */
  .dropdown:not(.lang-switch):hover > .dropdown-menu,
  .dropdown:not(.lang-switch):focus-within > .dropdown-menu { display: block; }
}

/* Bağlantı ile menü arasındaki boşlukta imleç düşmesin */
.dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -.6rem;
  height: .6rem;
}

.dropdown-menu {
  border: 1px solid var(--hair);
  border-radius: var(--r-ctl);
  box-shadow: var(--shadow);
  padding: .4rem;
  margin-top: .5rem;
  min-width: 250px;
}
.dropdown-item {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .9375rem;
  color: var(--ink-2);
  border-radius: 8px;
  padding: .6rem .75rem;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--accent-soft); color: var(--accent-d); }


/* 6e. Dil değiştirici ------------------------------------------------------ */
/* Şimdilik yalnızca görünüm: maddeler bir yere gitmiyor. Laravel'e alınırken
   her dilin O SAYFADAKİ kendi adresi tenant_routes'tan üretilecek; tek dilli
   müşteride bu blok hiç basılmayacak. */
.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  height: 42px;
  padding: 0 .7rem;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1;
}
.lang-switch__btn:hover,
.lang-switch__btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.lang-switch__btn img { display: block; border-radius: 3px; }
.lang-switch__code { letter-spacing: .02em; }
.lang-switch__caret { font-size: .7rem; transition: transform .2s var(--ease); }
.lang-switch__btn[aria-expanded="true"] .lang-switch__caret { transform: rotate(180deg); }
.lang-switch__menu { min-width: 11rem; margin-top: .5rem !important; }
.lang-switch__menu .dropdown-item { display: flex; align-items: center; gap: .6rem; }
.lang-switch__menu .dropdown-item img { border-radius: 3px; flex-shrink: 0; }

/* Saydam header üzerinde (hero/başlık bandının üstünde) beyaz görünmeli —
   .nav-bar--over'ın diğer öğelerinde olduğu gibi. */
.nav-bar--over:not(.is-stuck) .lang-switch__btn {
  border-color: rgba(255, 255, 255, .38);
  color: #fff;
}
.nav-bar--over:not(.is-stuck) .lang-switch__btn:hover,
.nav-bar--over:not(.is-stuck) .lang-switch__btn[aria-expanded="true"] {
  border-color: #fff;
  background: rgba(255, 255, 255, .16);
}

/* 6d. İç sayfa başlığı ---------------------------------------------------- */
/* Tüm iç sayfaların ortak banner'ı — tek dosya:
   assets/img/banner.svg değiştirilince her sayfada değişir. */
.page-head {
  position: relative;
  isolation: isolate;
  /* Header saydam ve sabit; bandın üstüne biniyor, o yüzden üst boşluk
     menü yüksekliği kadar fazla. */
  padding-block: calc(var(--nav-h) + clamp(3rem, 7vw, 5.25rem)) clamp(3rem, 7vw, 5.25rem);
  background: var(--ink) url("../img/banner.svg") center / cover no-repeat;
  color: #fff;
}

/* Yazının okunması için üstüne ince bir perde */
/* Yalnızca sayfa yolu taşıyan ince bant (ekip detayı). Koyu olması görsel
   değil işlevsel bir zorunluluk: header en üstte saydam ve yazıları beyaz,
   altındaki alan açık renk olsaydı logo ve menü görünmezdi. */
.page-head--slim { padding-block: calc(var(--nav-h) + 1.25rem) 1.75rem; }

.page-head::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(92deg, rgba(10, 24, 31, .78) 0%, rgba(10, 24, 31, .55) 48%, rgba(10, 24, 31, .28) 100%);
}

.page-head h1 {
  color: #fff;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  max-width: 20ch;
  margin-bottom: .75rem;
}
.page-head p { max-width: 60ch; margin: 0; color: rgba(255, 255, 255, .82); }
.page-head .lead { color: rgba(255, 255, 255, .82); }
.page-head .kicker { color: rgba(255, 255, 255, .72); }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .68);
  margin-bottom: 1.25rem;
}
.crumbs a { color: rgba(255, 255, 255, .9); }
.crumbs a:hover { color: #fff; }
.crumbs .sep { opacity: .5; }

/* 7. Hero — tam ekran görsel --------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  border-radius: var(--r-frame) var(--r-frame) 0 0;
  overflow: hidden;
}

/* Yükseklik EKRANA DEĞİL SAYFA GENİŞLİĞİNE bağlı: oran sabit kalıyor, yani
   panelde "şu ölçüde yükleyin" demenin karşılığı var ve önizleme sitedekiyle
   aynı. (Önce 100svh idi; kırpma her ziyaretçinin ekran yüksekliğine göre
   değişiyordu.)

   `aspect-ratio` + `max-height` DENENDİ VE OLMADI: yükseklik sınırına
   takılınca tarayıcı oranı korumak için GENİŞLİĞİ kısıyor, hero sayfanın
   ortasında dar bir şerit hâline geliyordu. Yükseklik doğrudan genişlikten
   hesaplanıyor; genişlik her zaman tam. */
.hero-swiper {
  width: 100%;
  height: min(calc((100vw - 2 * var(--frame-pad)) * 0.72), 1040px);
}
.hero-slide { position: relative; height: 100%; display: flex; align-items: flex-end; }
.hero-slide__bg { position: absolute; inset: 0; z-index: 0; }
.hero-slide__bg img { width: 100%; height: 100%; object-fit: cover; }

/* Yazıyı okunur kılan perde — fotoğrafı karartmaz, soldan sağa açılır */
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(96deg, rgba(10, 24, 31, .55) 0%, rgba(10, 24, 31, .34) 40%, rgba(10, 24, 31, .08) 74%, rgba(10, 24, 31, 0) 100%),
    linear-gradient(180deg, rgba(10, 24, 31, .30) 0%, rgba(10, 24, 31, 0) 26%);
}
.hero-slide__body {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Üstte menü yüksekliği kadar pay: başlık header'ın altında kalmasın. */
  padding-top: calc(var(--nav-h) + 3rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  color: #fff;
}
.hero-slide__badge {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .35rem .75rem;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px);
  font-size: .8125rem;
  letter-spacing: .02em;
}
.hero-slide__title {
  color: #fff;
  max-width: 16ch;
  margin-bottom: 1rem;
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  line-height: 1.06;
}
.hero-slide__text {
  color: rgba(255, 255, 255, .86);
  font-size: 1.0625rem;
  line-height: 1.5;
  max-width: 42ch;
  margin-bottom: 1.75rem;
}
.hero-slide__cta { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Slayt göstergesi: sağ kenarda DİK.
   Swiper'ın yatay çubuğu hero'nun en altında duruyor ve bir sonraki
   bölüme bitişik görünüyordu. */
/* Seçici İKİ SINIFLI: Swiper'ın kendi kuralı
   `.swiper-horizontal > .swiper-pagination-bullets { left: 0; width: 100% }`
   ve özgüllüğü (0,2,0). Tek sınıflı `.hero-pagination` (0,1,0) ona
   yeniliyordu, gösterge sol kenara yapışık kalıyordu. Eşit özgüllükte
   sonra gelen kazanıyor; theme.css swiper'dan sonra yükleniyor. */
.hero-swiper .hero-pagination {
  position: absolute;
  left: auto;
  bottom: auto;
  /* Geniş ekranda hero kenarına yapışınca gösterge içerikten kopuk,
     boşlukta kalıyordu. İçerik sütunu (.wrap, en fazla 1400px) ile
     hizalanıyor: sütunun sağ kenarının hemen içinde duruyor, dar
     ekranlarda ise hero kenarından sabit boşlukla. */
  right: max(clamp(1rem, 2.5vw, 2.25rem), calc((100% - 1400px) / 2 + 1.25rem));
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: auto;
}
.hero-swiper .hero-pagination .swiper-pagination-bullet {
  width: 3px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  opacity: 1;
  margin: 0 !important;
  transition: background-color .25s var(--ease), height .25s var(--ease);
}
.hero-swiper .hero-pagination .swiper-pagination-bullet-active { background: #fff; height: 40px; }


/* Hap etiketler — bölümlere kısayol */
.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: 500;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 999px;
  padding: .5rem 1.05rem;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.pill:hover, .pill:focus {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

/* Açık zeminde kullanılan sürüm (blog kategorileri, tedavi kısayolları) */
.pill--ink {
  color: var(--ink);
  border-color: var(--hair-strong);
  background: transparent;
  cursor: pointer;
}
.pill--ink:hover, .pill--ink:focus {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* Seçili durum */
.pill--on, .pill--ink.pill--on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}


/* 8. Swiper ortak --------------------------------------------------------- */
.sw-nav {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair-strong);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.sw-nav:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.sw-nav.swiper-button-disabled { opacity: .35; cursor: default; }
.sw-nav.swiper-button-disabled:hover { background: var(--paper); color: var(--ink); border-color: var(--hair-strong); }

.sw-count {
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .04em;
  margin-left: .35rem;
}
.sw-count b { color: var(--ink); }

.swiper-pagination-bullet {
  width: 24px; height: 3px;
  border-radius: 2px;
  background: var(--hair-strong);
  opacity: 1;
}
.swiper-pagination-bullet-active { background: var(--accent); }

/* Kart gölgeleri kırpılmasın */
.sw-bleed { overflow: hidden; padding: 6px 6px 34px; margin-inline: -6px; }

/* Galeri şeridinde gölge yok; alt pay gereksiz yer kaplıyordu */
.gallery-swiper.sw-bleed { padding-bottom: 10px; }


/* 9. Form paneli ---------------------------------------------------------- */
.form-panel {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-sur);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  box-shadow: var(--shadow);
}
.form-panel h3 { margin-bottom: .25rem; }

/* 10. Form ---------------------------------------------------------------- */
.field { margin-bottom: 1rem; }
.field label, .form-label {
  display: block;
  font-family: var(--font-display);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: .45rem;
}
.form-control, .form-select {
  width: 100%;
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--ink);
  background: var(--shell);
  border: 1px solid var(--hair);
  border-radius: var(--r-ctl);
  padding: .8rem .95rem;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-control::placeholder { color: var(--muted-2); }
.form-control:focus, .form-select:focus {
  background: var(--paper);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(27, 156, 196, .18);
  outline: none;
}
textarea.form-control { min-height: 118px; resize: vertical; }

.phone-group { display: flex; gap: .5rem; }
.phone-group .form-select { width: 108px; flex: 0 0 auto; }

.form-note { font-size: .8125rem; color: var(--muted-2); }

/* 11. Hairline liste — tedaviler ----------------------------------------- */
.rowlist { border-top: 1px solid var(--hair); }
.rowlist__item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: clamp(1.35rem, 2.5vw, 1.85rem) .25rem;
  border-bottom: 1px solid var(--hair);
  transition: padding-inline-start .25s var(--ease), background-color .25s var(--ease);
}
.rowlist__item:hover { background: var(--shell); padding-inline-start: 1rem; }
.rowlist__item h3 { margin-bottom: .35rem; }
.rowlist__item p { font-size: .9375rem; margin: 0; max-width: 52ch; }
/* Satır başındaki yuvarlak görsel.

   Burada önce sabit bir ikon vardı; panelde tedavi kaydının ikon alanı yok,
   yani her müşteride aynı ikonlar görünürdü. Görsel ise kaydın kendi alanından
   (treatment.image) geliyor.

   Kare kutuya `object-fit: cover`: yüklenen görsel 4:3 ve daire içine
   ortasından kırpılıyor. Hangi bölgenin kalacağı panelden odak noktasıyla
   seçilebiliyor. */
.rowlist__thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--shell);
  margin-top: .1rem;
}
.rowlist__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rowlist__arrow {
  margin-left: auto;
  align-self: center;
  color: var(--muted-2);
  font-size: 1.1rem;
  transition: transform .25s var(--ease), color .25s var(--ease);
}
.rowlist__item:hover .rowlist__arrow { color: var(--accent); transform: translateX(5px); }

/* Sertifika kartı: görselin altında belgenin adı. Galeri hücresiyle aynı
   büyütme kutusunu kullanıyor, farkı yalnızca başlık satırı. */
.cert-cell { aspect-ratio: 4 / 3; }
.cert-cell__title {
  display: block;
  margin-top: .6rem;
  font-size: .9375rem;
  color: var(--ink-2);
}

/* Hekim kartında hover'da beliren iletişim katmanı.

   stretched-link kartın tamamını tıklanabilir yaptığı için ikonlar onun
   ÜSTÜNDE durmalı (z-index): yoksa ikona basan kullanıcı detay sayfasına
   gider, Instagram'a değil. */
.doc__media { position: relative; }
.doc__social {
  position: absolute;
  inset: auto 0 .85rem 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: .5rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.doc:hover .doc__social,
.doc:focus-within .doc__social { opacity: 1; transform: none; }
.doc__social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.doc__social a:hover { background: var(--accent); color: #fff; }

/* Dokunmatikte hover yok: ikonlar hep görünür. */
@media (hover: none) {
  .doc__social { opacity: 1; transform: none; }
}

/* Ekip üyesi detay sayfası ------------------------------------------------ */


/* 1) Profil kartı: solda portre, sağda künye.
      Kart önce üstteki koyu bandın üzerine biniyordu (negatif margin);
      portrenin bir kısmı bandın içinde kalıyor ve "yarım oturmuş" duruyordu.
      Artık bandın altında, kendi boşluğunda. */
.doc-card {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  padding: clamp(1rem, 1.6vw, 1.35rem);
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-frame);
  box-shadow: var(--shadow);
}
.doc-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-sur);
  overflow: hidden;
  background: var(--shell);
}
.doc-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* İkonlar portrenin altına, koyu bir geçişin üzerine oturuyor. Hover'a bağlı
   değil: burası zaten kişinin kendi sayfası, ikonları saklamanın anlamı yok. */
.doc-card__social {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  gap: .5rem;
  padding: 3rem .9rem .9rem;
  background: linear-gradient(to top, rgba(10, 24, 31, .7), transparent);
}
.doc-card__social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .95);
  color: var(--ink);
}
.doc-card__social a:hover { background: var(--accent); color: #fff; }

.doc-card__body { padding: clamp(.5rem, 1.5vw, 1.5rem) clamp(.5rem, 1.5vw, 1rem) .75rem 0; }
.doc-card__name { margin: .35rem 0 .2rem; font-size: clamp(1.75rem, 3vw, 2.4rem); }
.doc-card__role { color: var(--accent); font-weight: 500; margin-bottom: 1rem; }
.doc-card__lead { color: var(--ink-2); max-width: 52ch; margin-bottom: 1.5rem; }

/* Künye satırı: karttan ince bir çizgiyle ayrılıyor, üç sütun. */
.doc-card__facts {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem 1.5rem;
}
.doc-card__facts dt {
  display: flex; align-items: center; gap: .4rem;
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 500; margin-bottom: .2rem;
}
.doc-card__facts dt i { color: var(--accent); font-size: .95rem; }
.doc-card__facts dd { margin: 0; font-family: var(--font-display); font-weight: 500; }

/* 2) Hakkında kartı */
.doc-page__cta { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

.doc-about {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-frame);
}
.doc-about__head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.25rem; }
.doc-about__icon {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.15rem;
}


@media (max-width: 991.98px) {
  .doc-card { grid-template-columns: 1fr; }
  .doc-card__body { padding: 0 .5rem .5rem; }
}

/* Blog kenar çubuğu ------------------------------------------------------- */
.blog-side { position: sticky; top: calc(var(--nav-h) + 1.25rem); display: grid; gap: 1rem; }
.blog-side__box {
  padding: 1.35rem;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-sur);
}
.blog-search { position: relative; }
.blog-search i {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-2); pointer-events: none;
}
.blog-search .form-control { padding-left: 2.4rem; }

@media (max-width: 991.98px) {
  .blog-side { position: static; }
}

/* İlkelerimiz (misyon & vizyon) -------------------------------------------- */
/* Kısa yatay çizgi: hem sol sütunda başlığın hem kartlarda etiketin altında,
   ikisini görsel olarak aynı aileye bağlıyor. */
.rule {
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
  margin: 1rem 0 1.25rem;
}

.ilke-intro { position: relative; }
.kicker--mark {
  display: inline-block;
  padding: .2rem .5rem;
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent-d);
}
/* Sol sütunda başlık yok, yalnızca etiket + açıklama. Açıklama tek başına
   kaldığı için gövde punto­sundan büyük: bölümün giriş metni o. */
.ilke-intro .rule { margin-top: 1rem; }
.ilke-intro p {
  color: var(--ink-2);
  max-width: 32ch;
  font-size: 1rem;
  line-height: 1.65;
}

/* Filigran: sol sütunun boşluğunu doldurup sayfayı sakinleştiriyor.
   aria-hidden ve pointer-events yok — yalnızca dekor. */
.ilke-intro__mark {
  position: absolute;
  left: -.5rem;
  bottom: -3.5rem;
  font-size: 11rem;
  line-height: 1;
  color: var(--accent);
  opacity: .06;
  pointer-events: none;
}

.ilke-card {
  height: 100%;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-sur);
  box-shadow: var(--shadow);
}
.ilke-card__icon {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--shell);
  color: var(--accent);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}
.ilke-card__label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.ilke-card h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.25; margin-bottom: .9rem; }
.ilke-card p { color: var(--ink-2); }

@media (max-width: 991.98px) {
  .ilke-intro__mark { display: none; }
}

/* 12. İstatistik ---------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 1.75rem 1.25rem; border-left: 1px solid var(--hair); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  letter-spacing: -.04em;
  color: var(--ink);
  line-height: 1;
}
.stat__label { font-size: .875rem; color: var(--muted); margin-top: .5rem; }

/* 13. Yaklaşım ızgarası --------------------------------------------------- */
.grid-hair { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid-hair > * {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--hair);
  border-left: 1px solid var(--hair);
}
.grid-hair > *:nth-child(odd) { border-left: 0; padding-left: 0; }
.grid-hair > *:nth-child(-n + 2) { border-top: 0; padding-top: 0; }
.grid-hair h3 { margin-bottom: .5rem; }
.grid-hair p { font-size: .9375rem; margin: 0; }
.grid-hair .step-no {
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent);
  display: block;
  margin-bottom: .85rem;
}

/* 14. Hekim kartı --------------------------------------------------------- */
.doc {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-sur);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.doc:hover { border-color: transparent; box-shadow: var(--shadow); transform: translateY(-4px); }
.doc__media {
  aspect-ratio: 1 / 1;                    /* dikey portre kartı fazla uzatıyordu */
  background: var(--mist);
  margin: .65rem .65rem 0;
  border-radius: 999px 999px var(--r-ctl) var(--r-ctl) / 26% 26% var(--r-ctl) var(--r-ctl);
  overflow: hidden;
}
.doc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.doc:hover .doc__media img { transform: scale(1.03); }
.doc__body { padding: 1.1rem 1.25rem 1.35rem; flex: 1; display: flex; flex-direction: column; }
.doc__body h3 { margin-bottom: .2rem; }
.doc__spec {
  font-family: var(--font-display);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .85rem;
}
.doc__body p { font-size: .9063rem; margin-bottom: 0; }

/* 14b. Tedavi kartı ------------------------------------------------------- */
.tcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-sur);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.tcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.tcard__media {
  aspect-ratio: 4 / 3;
  background: var(--mist);
  overflow: hidden;
}
.tcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.tcard:hover .tcard__media img { transform: scale(1.04); }

.tcard__body {
  padding: 1.35rem 1.5rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tcard h3 { font-size: 1.15rem; margin-bottom: .55rem; }
.tcard:hover h3 { color: var(--accent); }
.tcard p { font-size: .9375rem; margin-bottom: 1.25rem; }

.tcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--hair);
  font-family: var(--font-display);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* Adım listesinde sıra numarası */

/* 14c. Gövde metni -------------------------------------------------------- */
.prose { max-width: 62ch; }
/* .prose = panelin zengin metin editöründen gelen içeriğin kabı (yazı gövdesi,
   tedavi açıklaması, serbest sayfalar). Editör başlık/liste/alıntı/tablo/görsel
   üretebildiği için hepsinin burada karşılığı olmak zorunda: temada elle yazılmış
   markup yalnızca <p> kullanıyordu, kural seti orada kalsaydı müşterinin girdiği
   ara başlık ve listeler biçimsiz çıkardı. */
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h2, .prose h3, .prose h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 2.25rem 0 .75rem;
}
.prose h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
.prose h3 { font-size: clamp(1.125rem, 2vw, 1.25rem); }
.prose h4 { font-size: 1.0625rem; }
.prose ul, .prose ol { margin: 0 0 1.15rem; padding-left: 1.35rem; color: var(--ink-2); }
.prose li { margin-bottom: .45rem; line-height: 1.75; }
.prose a { color: var(--accent); text-underline-offset: .2em; }
.prose a:hover { color: var(--accent-d); }
.prose strong { color: var(--ink); }
.prose img { max-width: 100%; height: auto; border-radius: var(--r-sur); margin: 1.5rem 0; }
.prose blockquote {
  margin: 1.75rem 0;
  padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--brand);
  color: var(--ink-2);
  font-size: 1.0625rem;
}
.prose hr { margin: 2rem 0; border-color: var(--hair); }
/* Tablo dar ekranda taşmasın: kabı kaydırılabilir, sayfa yatay kaymıyor. */
.prose .table-wrap, .prose figure.table { overflow-x: auto; margin: 1.5rem 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.prose th, .prose td { padding: .65rem .8rem; border: 1px solid var(--hair); text-align: left; }
.prose th { background: var(--mist); color: var(--ink); font-weight: 600; }
.prose p {
  font-size: 1.0625rem;
  line-height: 1.78;
  margin-bottom: 1.15rem;
}
.prose p:first-child { color: var(--ink-2); }
.prose p:last-child { margin-bottom: 0; }

/* 14c-b. Tıklanabilir görsel ---------------------------------------------- */
/* Görselin de bağlantı olduğunu belli etmek için hafif yakınlaşma */
.media-link { display: block; }
.media-link img { transition: transform .5s var(--ease); }
.media-link:hover img, .media-link:focus-visible img { transform: scale(1.03); }

/* 14d. Yuvarlak köşeli görsel — hero slider'ıyla aynı dil ----------------- */
.media-round {
  border-radius: var(--r-frame);
  overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--mist);
}
.media-round img { width: 100%; height: 100%; object-fit: cover; }

/* 15. Yorum kartı --------------------------------------------------------- */
.review {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-sur);
  padding: 1.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.review .stars { color: var(--star); font-size: .875rem; letter-spacing: .06em; margin-bottom: .9rem; }
/* Alıntı kabı: kısa yorumlar dikeyde ortalanır, uzunlar altı satırda kesilir.
   Böylece yan yana duran kartlar aynı ağırlıkta görünür. */
.review__quote {
  flex: 1;
  display: flex;
  align-items: center;
  margin-bottom: 1.35rem;
}
.review blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review__who { display: flex; align-items: center; gap: .75rem; }
.review__who .avatar,
.review__ava {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--accent-soft);
  object-fit: cover;
  flex: 0 0 auto;
}
.review__ava {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent);
}
.review__who strong {
  display: block;
  font-family: var(--font-display);
  font-size: .9375rem;
  color: var(--ink);
}
.review__who span { font-size: .8125rem; color: var(--muted-2); }

/* 16. Galeri -------------------------------------------------------------- */
.gal-cell {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--mist);
  border-radius: var(--r-ctl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
button.gal-cell { cursor: zoom-in; }
.gal-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gal-cell:hover img { transform: scale(1.04); }

/* 16b. Fotoğraf büyütme (ışık kutusu) ------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: none;
  place-items: center;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  background: rgba(10, 24, 31, .82);
  backdrop-filter: blur(6px);
}
.lightbox.is-open { display: grid; }

.lightbox__img {
  /* Yükseklik sınırı alt yazı ve kapatma butonu için yer bırakacak kadar;
     genişlik sınırı da geniş ekranda görselin küçük kalmamasını sağlıyor. */
  max-width: min(1500px, 100%);
  max-height: calc(100vh - 7rem);
  width: auto;
  border-radius: var(--r-sur);
  box-shadow: var(--shadow-lg);
  background: var(--mist);
}

.lightbox__cap {
  margin-top: 1rem;
  text-align: center;
  color: rgba(255, 255, 255, .82);
  font-size: .9375rem;
}
.lightbox__cap b { color: #fff; font-family: var(--font-display); font-weight: 600; }

.lightbox__btn {
  position: absolute;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.lightbox__btn:hover { background: #fff; color: var(--ink); }
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__prev  { left: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }

body.lightbox-open,
body.nav-open { overflow: hidden; }

/* 16c. Galeri mozaiği ------------------------------------------------------ */
.gal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  grid-auto-flow: dense;          /* süzgeçle boşluk kalmasın */
  gap: 14px;
}

.gal-item {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: var(--r-ctl);
  background: var(--mist);
}
button.gal-item { cursor: zoom-in; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gal-item:hover img, .gal-item:focus-visible img { transform: scale(1.05); }

/* Farklı boyutlar — düz ızgaradan çıkarıp ritim veriyor */
.gal-item--w2 { grid-column: span 2; }
.gal-item--h2 { grid-row: span 2; }

/* Üzerine gelince büyüteç */
.gal-item__zoom {
  position: absolute;
  top: .7rem; right: .7rem;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  font-size: .875rem;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.gal-item:hover .gal-item__zoom,
.gal-item:focus-visible .gal-item__zoom { opacity: 1; transform: none; }

.gal-item[hidden] { display: none; }

@media (max-width: 991.98px) {
  .gal-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 170px; }
}
@media (max-width: 575.98px) {
  .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; gap: 10px; }
  .gal-item--w2 { grid-column: span 2; }
  .gal-item--h2 { grid-row: span 1; }
}

/* Başlığı saran bağlantı — rengi başlıktan alır, üzerine gelince marka rengi */
.link-plain { color: inherit; display: inline-block; }
.link-plain h2, .link-plain h3 { transition: color .2s var(--ease); }
.link-plain:hover h2, .link-plain:hover h3 { color: var(--accent); }

/* 16d. Albüm kartı --------------------------------------------------------- */
.album {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-ctl);
  background: var(--mist);
  aspect-ratio: 3 / 2;
  box-shadow: var(--shadow-sm);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.album:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.album img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.album:hover img { transform: scale(1.05); }

/* Görseli okunur kılan alt perde */
.album::after {
  content: "";
  position: absolute;
  inset: 45% 0 0 0;
  background: linear-gradient(to top, rgba(10, 24, 31, .80), rgba(10, 24, 31, .26) 50%, transparent);
  pointer-events: none;
}

.album__tag {
  position: absolute;
  top: .75rem; left: .75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  font-family: var(--font-display);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink);
}

.album__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 1rem 1.1rem 1.05rem;
  color: #fff;
  text-align: left;
}
.album__body h3 {
  color: #fff;
  font-size: 1.0625rem;
  margin-bottom: .2rem;
}
.album__count {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .78);
}

/* Albüm sayfalarındaki uyarı/bilgi kutusu */
.notice {
  display: flex;
  gap: .85rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--hair);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-ctl);
  background: var(--shell);
  font-size: .9375rem;
  color: var(--muted);
}
.notice .bi { color: var(--accent); font-size: 1.1rem; line-height: 1.5; }

/* 17. Akordiyon ----------------------------------------------------------- */
.accordion-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair);
}
.accordion-item:first-of-type { border-top: 1px solid var(--hair); }
.accordion-button {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -.015em;
  color: var(--ink);
  background: transparent;
  padding: 1.35rem .25rem;
  box-shadow: none;
}
.accordion-button:not(.collapsed) { background: transparent; color: var(--accent-d); box-shadow: none; }
.accordion-button:focus { box-shadow: none; }
.accordion-button::after {
  content: "";
  width: 12px; height: 12px;
  background: none;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--ease);
}
.accordion-button:not(.collapsed)::after {
  transform: rotate(-135deg) translate(-2px, -2px);
  border-color: var(--accent);
}
.accordion-body { padding: 0 .25rem 1.5rem; color: var(--muted); font-size: .9688rem; max-width: 66ch; }

/* 18. Yazı kartı ---------------------------------------------------------- */
.post {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.post__media {
  aspect-ratio: 3 / 2;
  background: var(--mist);
  border-radius: var(--r-ctl);
  overflow: hidden;
  margin-bottom: 1.15rem;
}
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post:hover .post__media img { transform: scale(1.04); }
.post__meta {
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: .6rem;
}
.post h3 { font-size: 1.15rem; line-height: 1.35; margin-bottom: .5rem; }
.post:hover h3 { color: var(--accent-d); }
.post p { font-size: .9063rem; }

/* 19. İletişim ------------------------------------------------------------ */
.info-row {
  display: flex;
  gap: 1rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--hair);
}
.info-row:first-child { border-top: 1px solid var(--hair); }
.info-row .k {
  flex: 0 0 128px;
  font-family: var(--font-display);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding-top: .2rem;
}
.info-row .v { color: var(--ink-2); font-size: .9688rem; }
.info-row .v a:hover { color: var(--accent); }

.map-frame {
  border: 1px solid var(--hair);
  border-radius: var(--r-sur);
  overflow: hidden;
  background: var(--mist);
  aspect-ratio: 16 / 9;
}

/* Tam genişlikte duran harita: alçak ve enine */
.map-frame--wide {
  aspect-ratio: 3 / 1;
  max-height: 380px;
}

/* Dar ekranda bu kadar basık olmasın */
@media (max-width: 767.98px) {
  .map-frame--wide { aspect-ratio: 4 / 3; max-height: none; }
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* 19b. Randevu bandı ------------------------------------------------------ */
.cta-panel {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-sur);
  padding: clamp(1.75rem, 4vw, 3rem);
}

/* Kemer motifinin sessiz bir yankısı — sağ alttan yükselen yay */
.cta-panel::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -58%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--accent-soft), transparent 68%);
  pointer-events: none;
}

.cta-panel > * { position: relative; z-index: 1; }

.cta-panel h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  margin-bottom: .65rem;
}
.cta-panel p { max-width: 46ch; margin-bottom: 0; }

/* Telefon bloğu — numarayı okunur bir başlık gibi göster */
.cta-phone {
  display: inline-flex;
  flex-direction: column;
  gap: .15rem;
  padding: .9rem 1.25rem;
  border: 1px solid var(--hair);
  border-radius: var(--r-ctl);
  background: var(--shell);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.cta-phone:hover { border-color: var(--accent); background: var(--paper); }
.cta-phone .k {
  font-family: var(--font-display);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.cta-phone .v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  color: var(--ink);
}
.cta-phone:hover .v { color: var(--accent); }

/* Alt şerit — söz verdiğimiz üç şey */
.cta-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair);
}
.cta-notes div {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .9063rem;
  color: var(--muted);
}
.cta-notes .bi { color: var(--accent); font-size: 1.05rem; line-height: 1.5; }
/* Aynı ızgara, ama maddeler panelin zengin metin editöründen geliyor: editör
   <ul><li> üretiyor, temanın elle yazdığı <div><i class="bi">…</i> değil.
   İşaret ikonu bu yüzden CSS'ten (::before), madde sayısı da serbest —
   grid-template-columns sabit üç sütun olamaz. */
.cta-notes--prose ul { display: contents; list-style: none; margin: 0; padding: 0; }
.cta-notes--prose { grid-auto-rows: min-content; }
.cta-notes--prose li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .9063rem;
  color: var(--muted);
}
/* Tik ikon fontundan DEĞİL, iki kenarlıktan çiziliyor — temanın .ticklist'i
   de aynısını yapıyor. İkon fontu bu sitede alt küme olarak gömülü olduğu
   için, CSS'ten basılan bir glif sınıf adı olarak hiçbir HTML'de geçmiyor ve
   alt kümeye girmiyordu: madde işareti boş kutu çıkıyordu. */
.cta-notes--prose li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 5px;
  margin-top: .45rem;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.cta-notes--prose p { margin: 0; font-size: .9063rem; color: var(--muted); }

@media (max-width: 767.98px) {
  .cta-notes { grid-template-columns: 1fr; gap: .85rem; }
}

/* 20. Alt bilgi — açık ---------------------------------------------------- */
.site-footer {
  background: var(--shell);
  border-top: 1px solid var(--hair);
  border-radius: 0 0 var(--r-frame) var(--r-frame);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}
.site-footer .brand-logo { height: 72px; }
.site-footer h4 {
  font-family: var(--font-display);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 1.15rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .6rem; }
.site-footer a { color: var(--ink-2); font-size: .9375rem; }
.site-footer a:hover { color: var(--accent); }
.footer-note { font-size: .9063rem; color: var(--muted); max-width: 34ch; }
.footer-bottom {
  border-top: 1px solid var(--hair);
  margin-top: 3rem;
  padding-block: 1.5rem;
  font-size: .8125rem;
  color: var(--muted-2);
}
.soc {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--hair);
  border-radius: 50%;
  color: var(--ink-2);
  background: var(--paper);
}
.soc:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.soc--wa:hover { background: var(--wa); border-color: var(--wa); }

/* 21. Yüzen düğmeler ------------------------------------------------------ */
.floats {
  position: fixed;
  bottom: 1.15rem;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
/* İletişim solda, "başa dön" sağda. */
.floats--left  { left: 1.15rem; }
.floats--right { right: 1.15rem; }

.float-btn {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.25rem;
  box-shadow: var(--shadow);
  transition: transform .2s var(--ease);
}
.float-btn:hover { transform: translateY(-3px); }
.float-btn--wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.float-btn--wa:hover { color: #fff; }
/* Telefon: marka rengiyle, WhatsApp'ın yeşiliyle karışmasın. */
.float-btn--tel { background: var(--accent); border-color: var(--accent); color: #fff; }
.float-btn--tel:hover { color: #fff; }
.float-btn--top { opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s var(--ease), transform .2s var(--ease); }
.float-btn--top.is-on { opacity: 1; visibility: visible; }

/* 22. Görsel yükleme ------------------------------------------------------ */
.ph { background: var(--mist); position: relative; }
.ph img { opacity: 0; transition: opacity .5s var(--ease); }
.ph img.is-loaded { opacity: 1; }

/* 23. Reveal -------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* 24. Yardımcılar --------------------------------------------------------- */
.text-accent { color: var(--accent) !important; }
.bg-shell    { background: var(--shell) !important; }
.hair-top    { border-top: 1px solid var(--hair); }
.hair-bottom { border-bottom: 1px solid var(--hair); }
.fw-display  { font-family: var(--font-display); font-weight: 600; }
.measure     { max-width: 58ch; }

.ticklist { list-style: none; margin: 0; padding: 0; }
.ticklist li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: .7rem;
  color: var(--muted);
  font-size: .9688rem;
}
.ticklist li::before {
  content: "";
  position: absolute;
  left: 0; top: .55rem;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}

/* Panelin zengin metin editöründen gelen <ul>, temanın elle yazılmış
   .ticklist'iyle aynı görünsün: müşteri madde eklerken sınıf adı yazamaz,
   editör düz <ul><li> üretir. Yalnızca bu kabın içindeki listeler etkilenir. */
.ticklist-prose ul { list-style: none; margin: 0 0 1.15rem; padding: 0; }
.ticklist-prose ul li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: .7rem;
  color: var(--muted);
  font-size: .9688rem;
}
.ticklist-prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .55rem;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
/* İlk paragraf temadaki .lead ölçüsünde: markup'ta o sınıf vardı, artık
   metnin şeklini müşteri belirlediği için sınıf yazacak kimse yok. */
.ticklist-prose > p:first-child { font-size: 1.0625rem; color: var(--ink-2); }

.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 2000;
  background: var(--ink);
  color: #fff;
  padding: .8rem 1.25rem;
  border-radius: 0 0 var(--r-ctl) 0;
}
.skip-link:focus { left: 0; color: #fff; }

@keyframes menuAc {
  from { opacity: 0; transform: translateY(-10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes altMenuAc {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes menuOgeAc {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* 25. Duyarlılık ---------------------------------------------------------- */
/* Ortalanan menüyle yan blokların çakışmaması için kademeli sadeleşme */
@media (max-width: 1149.98px) {
  .icon-btn--ig { display: none; }   /* Instagram footer'da zaten var */
}

@media (max-width: 1049.98px) {
  .nav-phone, .nav-sep { display: none; }
  .nav-list .nav-link { padding-inline: .8rem; }
}

@media (max-width: 991.98px) {
  .nav-bar__inner { grid-template-columns: auto 1fr; column-gap: 1rem; }
  .nav-bar__inner > nav { justify-self: end; grid-column: 2; }
  .nav-bar__inner > .nav-actions { grid-column: 2; }
  .nav-list { margin: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--hair); }

  .nav-toggle { display: inline-flex; }
  .nav-phone, .nav-sep, .icon-btn--ig { display: none; }
  .btn-nav { padding: .6rem 1rem; font-size: .875rem; }
  /* Mobil menü Bootstrap Offcanvas ile; liste dikey akıyor. */
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
  }
  .nav-list .nav-link { padding: .75rem .85rem; }

  /* Dar ekranda alt başlıklar kapalı gelir; "Tedaviler"e dokununca açılır. */
  .dropdown-menu {
    display: none;
    position: static;
    border: 0;
    border-left: 1px solid var(--hair);
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
    margin: .1rem 0 .4rem .9rem;
    padding: .15rem 0 .15rem .9rem;
    background: transparent;
  }
  .dropdown-menu::before { display: none; }
  .dropdown.alt-acik > .dropdown-menu {
    display: block;
    animation: altMenuAc .26s var(--ease);
  }
  .dropdown-item { padding: .5rem .5rem; font-size: .875rem; }

  /* Ok işareti: kapalıyken aşağı, açıkken yukarı */
  .nav-list .dropdown-toggle::after {
    display: inline-block;
    margin-left: .45rem;
    transition: transform .25s var(--ease);
  }
  .dropdown.alt-acik > .dropdown-toggle::after { transform: rotate(180deg); }

  /* Açılan panel beyaz; hero üzerindeki beyaz yazı kuralını geri al */
  .nav-bar--over:not(.is-stuck) .nav-list .nav-link { color: var(--ink-2); }
  .nav-bar--over:not(.is-stuck) .nav-list .nav-link:hover,
  .nav-bar--over:not(.is-stuck) .nav-list .nav-link.is-active { color: var(--accent); background: var(--accent-soft); }


}

@media (max-width: 767.98px) {
  .grid-hair { grid-template-columns: 1fr; }
  .grid-hair > * { border-left: 0; padding-left: 0; padding-right: 0; }
  .grid-hair > *:nth-child(2) { border-top: 1px solid var(--hair); padding-top: clamp(1.5rem, 3vw, 2.25rem); }
  .info-row { flex-direction: column; gap: .35rem; }
  .info-row .k { flex: none; }
  .rowlist__item:hover { padding-inline-start: .25rem; }
}

@media (max-width: 575.98px) {
  :root { --frame-pad: 6px; --r-frame: 18px; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-left: 0; padding-left: 0; }
  .stat:nth-child(n + 2) { border-top: 1px solid var(--hair); }
  .phone-group { flex-wrap: wrap; }
  .phone-group .form-select { width: 100%; }
}

/* 26. Hareket azaltma ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}


/* 27. Mobil hero — fotoğraf üstte tam görünür, yazı altında ------------------
   Dikey ekranda 16:9 fotoğrafı kırpmadan göstermenin tek yolu onu akışa almak.
   Yazılar fotoğrafın üstünden inip kendi zeminine oturur; perdeye gerek kalmaz. */
@media (max-width: 767.98px) {
  :root { --nav-h: 68px; }

  /* Telefonda hero ekranın tamamını kaplamıyor: kısaltıldı ki altındaki
     bölümün başladığı görülsün ve kullanıcı kaydırılacak bir şey olduğunu
     anlasın. Gösterge de dik durduğu yerden alta yatay alınmıyor —
     dar ekranda sağ kenarda kalması yeterli, yalnızca küçülüyor. */
  /* Telefonda 16:9 çok basık kalıyor; dikey bir oran hem fotoğrafa hem
     yazıya yer bırakıyor. */
  .hero-swiper { height: calc((100vw - 2 * var(--frame-pad)) * 1.6); }

  /* Telefonda hero'da BUTON YOK: dar ekranda yazı + buton birlikte
     fotoğrafın yarısını kaplıyordu. Harekete geçirici görevi, ekranda
     zaten sabit duran WhatsApp ve telefon butonlarında.

     Slaydın tamamını tıklanabilir yapmadık: burası kaydırılan bir alan,
     parmak kaydırırken tıklama tetiklenir ve kullanıcı istemediği sayfaya
     gider. */
  .hero-slide__cta { display: none; }

  /* Yazılar küçülüp alta yaslanıyor: fotoğrafın üst kısmı (yüzler) açıkta
     kalsın. */
  .hero-slide__body { padding-bottom: 2.75rem; }
  .hero-slide__badge { margin-bottom: .6rem; padding: .25rem .6rem; font-size: .75rem; }
  .hero-slide__title { font-size: clamp(1.75rem, 7.5vw, 2.25rem); margin-bottom: .6rem; }
  .hero-slide__text { font-size: .9375rem; margin-bottom: 0; max-width: 34ch; }

  /* Sabit butonlar da küçülüyor: dar ekranda içeriğin üstünü daha az
     kapatsınlar. */
  .float-btn { width: 44px; height: 44px; }
  .rowlist__thumb { width: 52px; height: 52px; }
  /* Çekmecedeki dil değiştirici: menü maddelerinden ayrılsın diye üstte
     ince bir çizgi ve boşluk. */
  .lang-switch-mobile {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--hair);
  }
  /* Seçici header sınıfını da içeriyor: saydam header'ın
     `.nav-bar--over:not(.is-stuck) .lang-switch__btn { color: #fff }` kuralı
     (özgüllük 0,3,0 — :not içindeki sınıf da sayılıyor) çekmecedeki kopyayı
     da yakalıyordu. Beyaz zeminde beyaz yazı: yalnızca bayrak görünüyordu. */
  .nav-bar--over .lang-switch-mobile .lang-switch__btn,
  .nav-bar--over:not(.is-stuck) .lang-switch-mobile .lang-switch__btn {
    width: 100%;
    justify-content: flex-start;
    height: 46px;
    color: var(--ink);
    background: transparent;
    border-color: var(--hair);
  }
  .nav-bar--over:not(.is-stuck) .lang-switch-mobile .lang-switch__btn:hover,
  .nav-bar--over:not(.is-stuck) .lang-switch-mobile .lang-switch__btn[aria-expanded="true"] {
    color: var(--accent);
    border-color: var(--accent);
    background: transparent;
  }

  /* Telefonda gösterge dikey değil: yazının ALTINDA, yatay ve ortalı.
     Dik hâlde fotoğrafın sağ kenarında kalıyor; dar ekranda hem fark
     edilmiyor hem parmakla erişmesi zor. */
  .hero-swiper .hero-pagination {
    top: auto;
    bottom: .9rem;
    left: 0;
    right: 0;
    transform: none;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    gap: .4rem;
  }
  .hero-swiper .hero-pagination .swiper-pagination-bullet { width: 22px; height: 3px; }
  .hero-swiper .hero-pagination .swiper-pagination-bullet-active { width: 34px; height: 3px; }

  /* Telefonda da menü saydam: kullanıcı isteği, header her sayfada ve her
     boyutta üstteyken saydam olsun. (Önce burada beyaz şeride dönüyordu.)

     DİKKAT — buradaki backdrop-filter KALDIRILDI, sadece görünüm değil
     davranış meselesi: filtre uygulanan öğe, içindeki position:fixed öğeler
     için kapsayıcı blok oluşturur. Mobil menü çekmecesi (Bootstrap
     Offcanvas) header'ın içinde ve fixed; bu kural yüzünden ekrana değil
     header'ın kutusuna hapsoluyor, ekranın sol üstünde küçük bir panel gibi
     görünüyordu. Aynı tuzağa .is-stuck kuralında da düşülmüştü, orası
     ≥992px'e kısıtlanarak çözüldü. */
  .nav-bar--over:not(.is-stuck) .icon-btn,
  .nav-bar--over:not(.is-stuck) .nav-toggle {
    backdrop-filter: none;
  }
  /* Randevu butonu logonun rengiyle dolu */
  .btn-nav,
  .nav-bar--over:not(.is-stuck) .btn-nav {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    backdrop-filter: none;
  }
  .btn-nav:hover, .btn-nav:focus,
  .nav-bar--over:not(.is-stuck) .btn-nav:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }

  /* Menü ögeleri sığsın */
  .brand-logo { height: 46px; }
  .icon-btn { width: 36px; height: 36px; font-size: .95rem; }
  .nav-toggle { width: 36px; height: 36px; font-size: 1rem; }
  .btn-nav { padding: .5rem .85rem; font-size: .8125rem; border-radius: 10px; }
  .nav-actions { gap: .4rem; }
          /* yazı fotoğrafın üstünde değil */



  /* Yazı bloğu kendi zemininde, koyu metinle */
  /* Slogan, fotoğrafın altındaki bulanık banda taşınıyor; kalan metin
     aşağıda açık zeminde devam ediyor. */


  /* Kısayol etiketleri: tek satır, kaydırmalı, küçük */
  /* Kısayol etiketleri mobilde gizli: hepsi zaten menüde var,
     iki satır kaplayıp hero'yu uzatıyorlardı. */
  .hero .pills { display: none; }
  .hero .pill:hover, .hero .pill:focus { background: var(--ink); border-color: var(--ink); color: #fff; }

}

/* 28. Mobil tipografi ölçeği ------------------------------------------------
   Masaüstü için kurulan punto aralığı dar ekranda iri kalıyordu; iç sayfaların
   başlıkları ve giriş metinleri burada bir kademe küçültülür. */
@media (max-width: 767.98px) {
  /* Üst boşluk header payını KORUMAK ZORUNDA. Bu kural önce yalnızca
     `clamp(2.25rem, 8vw, 3.25rem)` yazıyordu ve `var(--nav-h)` terimini
     düşürüyordu — header saydam ve `position: fixed` olduğu için bandın
     içeriği (sayfa yolu, üst etiket, başlık) telefonda logonun ve menü
     düğmesinin ALTINA giriyordu. Dikey ritim yine küçültülüyor, sadece
     menü yüksekliği kadar pay ekleniyor. */
  .page-head { padding-block: calc(var(--nav-h) + clamp(1.25rem, 5vw, 2rem)) clamp(2.25rem, 8vw, 3.25rem); }
  /* İnce bant (hekim detayı) da aynı sebeple; yukarıdaki kural onu da
     eziyordu çünkü ikisi de tek sınıf özgüllüğünde ve bu blok sonra geliyor. */
  .page-head--slim { padding-block: calc(var(--nav-h) + .85rem) 1.25rem; }
  .page-head h1 {
    font-size: clamp(1.65rem, 7vw, 2.05rem);
    letter-spacing: -.03em;
    line-height: 1.12;
    max-width: 100%;
    margin-bottom: .6rem;
  }
  .page-head .lead,
  .page-head p {
    font-size: .9375rem;
    line-height: 1.6;
  }
  .crumbs { font-size: .75rem; margin-bottom: .9rem; }

  h2 { font-size: clamp(1.5rem, 6.2vw, 1.95rem); letter-spacing: -.03em; }
  h3 { font-size: 1.0625rem; }
  .lead { font-size: .9375rem; line-height: 1.6; }
  .sec-head { margin-bottom: 1.35rem; }
  .kicker { font-size: .625rem; margin-bottom: .7rem; }
}