/* Otomatik üretildi — kaynak: assets/css/src/ (elle düzenlemeyin). */

/* ===== assets/css/src/01-settings/tokens.css ===== */
/* Tasarım token'ları (renk, yarıçap, gölge). Tüm dosyalar var(--x) ile buradan okur. */

/* FindMed — tek tema stil dosyası (base.css + theme-v2.css birleştirildi; body.theme-v2 öneki kaldırıldı). */
:root {
  --navy: #14417d;
  --navy-dark: #0e2c56;
  --blue: #1a56a0;
  --gold: #1e9fe0;
  --green: #128a4b;
  --text: #14233b;
  --muted: #5c6f82;
  --line: #cfe2f5;
  --soft: #f2f8fe;
  --white: #fff;
  --radius: 10px;
  --shadow: none;
  --ink: #0a1a30;
  --accent: #1e9fe0;
  --accent-dark: #0f76b8;
  --accent-soft: #e8f3fc;
  --spark: #e8573f;
  --surface: #f4f8fd;
  --card-line: #e3ebf5;
  --card-shadow: 0 2px 4px rgba(12, 38, 74, .04);
  --card-shadow-hover: 0 18px 36px -18px rgba(12, 38, 74, .28);
  --hero-gap: 28px;
}


/* ===== assets/css/src/02-base/reset.css ===== */
/* Sıfırlama ve element varsayılanları: kutu modeli, html/body, img, a, form elemanları, kaydırma çubuğu. */

* {
  box-sizing: border-box;
}

body {
  color: var(--text);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  overflow: visible;
  vertical-align: -.125em;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

h1,
h2 {
  margin: 0;
  color: var(--navy-dark);
  font-family: "Plus Jakarta Sans", sans-serif;
  line-height: 1.14;
}

h1 {
  font-size: clamp(40px, 4.5vw, 52px);
  font-weight: 600;
}

@media (max-width: 760px) {
  h1 {
    font-size: 36px;
  }
}

@media (max-width: 430px) {
  h1 {
    font-size: 32px;
  }
}

@media (max-width: 760px) {
  body {
    --hero-gap: 20px;
  }
}

/* ══════════════════════════════════════════════════════════════
12: Sayfa kaydırma çubuğu — sağdaki beyaz şerit koyu hero'nun
yanında sırıtıyordu; markanın lacivert/turkuazına çekildi.
Sadece sayfanın kendi çubuğu; iç kaydırıcılar dokunulmadı.
══════════════════════════════════════════════════════════════ */
html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(126, 208, 255, .5) #0a1a30;
}

html::-webkit-scrollbar {
  width: 11px;
}

html::-webkit-scrollbar-track {
  background: #0a1a30;
}

html::-webkit-scrollbar-thumb {
  border: 3px solid #0a1a30;
  border-radius: 999px;
  background: rgba(255, 255, 255, .32);
}

html::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* ══════════════════════════════════════════════════════════════
62: Yatay tasma kirpilir (tum sayfalar)
iOS Safari, icerik viewport'tan bir kac piksel bile tasarsa sayfayi
uzaklastirir; o durumda position: fixed ogeler ekran ortasina kayar.
overflow: clip kaydirma kutusu olusturmaz, sticky/fixed'i etkilemez.
══════════════════════════════════════════════════════════════ */
html,
body {
  overflow-x: clip;
}

/* ══════════════════════════════════════════════════════════════
63: Sayfa kabugu
body zemini lacivert; tum icerik beyaz zeminli .site-shell icinde.
Kabuga max-width verilirse sayfa ortada, kenarlarda lacivert kalir.
══════════════════════════════════════════════════════════════ */
body {
  margin: 0;
  scrollbar-color: auto;
  background: #11243b;
}


/* ===== assets/css/src/03-layout/10-container.css ===== */
/* Sayfa kabuğu ve genişlik sınırlayıcı (.container, .site-shell). */

.container {
  width: min(1360px, calc(100% - 40px));
  margin: 0 auto;
}

@media (max-width: 760px) {
  .container {
    width: min(100% - 28px, 600px);
  }
}

.site-shell {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  overflow-x: clip;
}


/* ===== assets/css/src/03-layout/20-sections.css ===== */
/* Bölüm ritmi ve bölüm başlıkları (.section, .section-heading, .sh-*, .eyebrow) + lacivert/açık bölüm sıralaması. */

.eyebrow {
  margin-bottom: 8px;
  font-weight: 800;
}

.hero .eyebrow {
  padding: 2px 5px;
  border: 0;
  border-radius: 3px;
  background: var(--navy);
  font-size: 10px;
}

.section-heading {
  display: flex;
  justify-content: space-between;
}

.section-heading .eyebrow {
  margin-bottom: 4px;
}

.section-heading h2 {
  font-size: 28px;
}

.section-heading > a {
  font-weight: 700;
}

.section-heading > a .icon {
  margin-left: 7px;
}

@media (max-width: 760px) {
  .section {
    padding: 54px 0;
  }
}

@media (max-width: 430px) {
  .eyebrow {
    font-size: 10px;
  }

  .section-heading {
    align-items: start;
  }

  .section-heading h2 {
    font-size: 24px;
  }

  .section-heading > a {
    margin-top: 14px;
    font-size: 0;
  }

  .section-heading > a .icon {
    font-size: 13px;
  }
}

.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--navy);
  background: transparent;
  font-size: 11px;
  letter-spacing: 2.4px;
}

.hero .eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.section-muted {
  background: var(--soft);
}

/* ══════════════════════════════════════════════════════════════
FindMed v3 — premium açık tema (hero altındaki tüm bölümler)
Lacivert + gök mavisi marka rengi, açık mavi yüzeyler, beyaz kartlar
══════════════════════════════════════════════════════════════ */
/* ── Bölüm ritmi ── */
.section {
  --section-pad: 78px;
  padding: var(--section-pad) 0;
}

.section-muted,
#about {
  background: var(--surface);
}

/* style.css'teki "#about { padding: 72px }" ID kuralı bölüm ritmini bozuyordu */
.section#about {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

/* ── Bölüm başlıkları ── */
.section-heading {
  align-items: flex-end;
  margin-bottom: 34px;
}

.eyebrow {
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent-dark);
  font-size: 10px;
  letter-spacing: 1.3px;
}

.eyebrow .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.section-heading h2 {
  color: var(--navy-dark);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.4px;
}

.section-heading > a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--card-line);
  border-radius: 999px;
  color: var(--navy-dark);
  background: #fff;
  font-size: 13px;
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.section-heading > a:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
  box-shadow: var(--card-shadow-hover);
}

/* ── Nasıl çalışır ── */
/* ── Neden FindMed / akordeon ── */
#about {
  padding-top: 72px;
  padding-bottom: 72px;
  background: #fff;
}

@media (max-width: 760px) {
  /* ── Alt bilgi ── */
  .section {
    --section-pad: 58px;
  }

  .section-heading h2 {
    font-size: 26px;
  }
}

/* ── Hero dikey ritmi: tüm bileşenler arası eşit boşluk ── */
.hero .eyebrow {
  margin-bottom: var(--hero-gap);
}

/* ══════════════════════════════════════════════════════════════
Açık kart listesi — yazılar kartın içinde değil bölüm zemininde (Popular Hospitals)
══════════════════════════════════════════════════════════════ */
.listing-cards .section-heading {
  align-items: flex-start;
  margin-bottom: 24px;
}

/* "View all …" butonu: başlığın sağ üstünde, ok butonlarının üstünde kalır.
Ölçü ve radius slider oklarıyla aynı (34px / 10px). */
.section-heading > a.sh-all {
  gap: 7px;
  min-height: 34px;
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 0 15px;
  border: 1px solid var(--card-line);
  border-radius: 999px;
  color: var(--navy-dark);
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease;
}

.section-heading > a.sh-all .icon {
  width: 15px;
  height: 15px;
  color: var(--accent-dark);
  transition: transform .2s ease;
}

.section-heading > a.sh-all:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: transparent;
  box-shadow: none;
}

.section-heading > a.sh-all:hover .icon {
  transform: translateX(3px);
}

@media (min-width: 901px) {
  /* Buton okların hemen ÜSTÜNDE dursun. Oklar başlığın alt kenarından 36px
  yukarıda başlıyor; 46px alt boşluk ile aralarında 10px kalır. Başlık
  yüksekliği değişse de bu mesafe sabit kalır. */
  .section-heading > a.sh-all {
    align-self: flex-end;
    margin-bottom: 46px;
  }
}

@media (max-width: 700px) {
  .section-heading > a.sh-all {
    min-height: 32px;
    padding: 0 11px;
    font-size: 12px;
  }
}

/* açıklama sağdaki ok butonlarının altına girmesin */
.sh-text {
  max-width: 620px;
}

/* h2 satır içi akmasın; eyebrow kendi satırında kalsın */
.listing-cards .section-heading .sh-text h2 {
  display: flex;
  margin: 0;
}

@media (max-width: 900px) {
  /* dar ekran: başlık dikey aksın — açıklama tam genişlik, altında "View all"
  butonu; oklar da o satırın sağında kalır */
  .listing-cards .section-heading {
    align-items: stretch;
    gap: 14px;
    flex-direction: column;
  }

  .sh-text p {
    padding-right: 0;
  }

  .section-heading > a.sh-all {
    align-self: flex-start;
  }
}

@media (min-width: 901px) {
  .sh-text p {
    min-height: 46px;
  }
}

.sh-text p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.listing-cards .section-heading h2 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  letter-spacing: -.3px;
}

/* ══════════════════════════════════════════════════════════════
Hero metni: ortalı, daha büyük başlık, %70 / mobilde %96 genişlik
══════════════════════════════════════════════════════════════ */
.hero .eyebrow {
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════
Hero sadeleştirme: yalnızca H1,
arama paneli fotoğrafın alt sınırına binsin
══════════════════════════════════════════════════════════════ */
.hero .eyebrow {
  display: none;
}

/* ── 5: eyebrow'un önünde kısa kıvılcım ── */
.eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  flex: 0 0 20px;
  border-radius: 2px;
  background: var(--spark);
}

/* ── 6: açık bölümlerde hafif ışık derinliği ── */
.section-muted,
.section#about {
  background: radial-gradient(115% 90% at 50% 0%, #f8fcff 0%, rgba(248, 252, 255, 0) 58%), var(--surface);
}

/* ilk kart bölümü de koyu — hero ile kesintisiz devam eder */
.section#hospitals {
  --arrow-lift: 26px;
  background-image: linear-gradient(180deg, var(--navy-dark) 0%, #0b2449 58%, #0a2044 100%);
  padding-top: 8px;
}

#hospitals .sh-text h2 {
  color: #fff;
}

#hospitals .sh-text p {
  color: rgba(255, 255, 255, .82);
}

#hospitals .eyebrow {
  color: var(--accent);
}

#hospitals .section-heading > a.sh-all {
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
  background: rgba(255, 255, 255, .06);
}

#hospitals .section-heading > a.sh-all .icon {
  color: var(--accent);
}

#hospitals .section-heading > a.sh-all:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255, 255, 255, .1);
}

/* ── 10: Popular Treatments bölümü lacivert zeminde ──────────
Açık gri yerine sitenin laciverti; içerideki yazılar ve
kontroller koyu zemine göre açık renge çevrilir. */
.section#treatments {
  background: radial-gradient(120% 90% at 50% 0%, rgba(30, 159, 224, .16) 0%, rgba(30, 159, 224, 0) 62%), linear-gradient(180deg, var(--navy-dark) 0%, #0b2449 62%, #0a2044 100%);
}

#treatments .sh-text h2 {
  color: #fff;
}

#treatments .sh-text p {
  color: rgba(255, 255, 255, .82);
}

#treatments .eyebrow {
  color: var(--accent);
}

#treatments .section-heading > a.sh-all {
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
  background: rgba(255, 255, 255, .06);
}

#treatments .section-heading > a.sh-all .icon {
  color: var(--accent);
}

#treatments .section-heading > a.sh-all:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255, 255, 255, .1);
}

/* ══════════════════════════════════════════════════════════════
19: Bölüm ritmi — lacivert / beyaz sıralaması
hero (lacivert) → Popular Hospitals (beyaz) → Destinations
(lacivert) → Treatments (beyaz) → Countries (lacivert)
Destinations ve Countries kartları zaten beyaz kart olduğu
için koyu zeminde okunur kalıyor; Hospitals ve Treatments'ta
yazı doğrudan zeminin üstünde durduğu için koyu renge dönüyor.
══════════════════════════════════════════════════════════════ */
/* ── açık bölümler: Hospitals + Treatments ── */
.section#hospitals,
.section#treatments {
  padding-top: 58px;
  background-color: var(--surface);
  background-image: radial-gradient(115% 90% at 50% 0%, #f8fcff 0%, rgba(248, 252, 255, 0) 58%);
}

#hospitals .sh-text h2,
#treatments .sh-text h2 {
  color: var(--navy-dark);
}

#hospitals .sh-text p,
#treatments .sh-text p {
  color: var(--muted);
}

#hospitals .eyebrow,
#treatments .eyebrow {
  color: var(--accent-dark);
}

#hospitals .section-heading > a.sh-all,
#treatments .section-heading > a.sh-all {
  border-color: #e3ebf5;
  color: var(--navy-dark);
  background: transparent;
}

#hospitals .section-heading > a.sh-all .icon,
#treatments .section-heading > a.sh-all .icon {
  color: var(--accent-dark);
}

#hospitals .section-heading > a.sh-all:hover,
#treatments .section-heading > a.sh-all:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: rgba(30, 159, 224, .06);
}

/* ── koyu bölümler: Destinations + Countries + Most Searched ── */
.section#destinations,
.section#countries {
  background-color: var(--navy-dark);
  background-image: radial-gradient(120% 90% at 50% 0%, rgba(30, 159, 224, .16) 0%, rgba(30, 159, 224, 0) 62%), linear-gradient(180deg, var(--navy-dark) 0%, #0b2449 62%, #0a2044 100%);
}

#destinations .sh-text h2,
#countries .sh-text h2,
#popular-searches .sh-text h2 {
  color: #fff;
}

#destinations .sh-text p,
#countries .sh-text p,
#popular-searches .sh-text p {
  color: rgba(255, 255, 255, .82);
}

#destinations .eyebrow,
#countries .eyebrow,
#popular-searches .eyebrow {
  color: var(--accent);
}

#destinations .section-heading > a.sh-all,
#countries .section-heading > a.sh-all,
#popular-searches .section-heading > a.sh-all {
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
  background: rgba(255, 255, 255, .06);
}

#destinations .section-heading > a.sh-all .icon,
#countries .section-heading > a.sh-all .icon,
#popular-searches .section-heading > a.sh-all .icon {
  color: var(--accent);
}

#destinations .section-heading > a.sh-all:hover,
#countries .section-heading > a.sh-all:hover,
#popular-searches .section-heading > a.sh-all:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255, 255, 255, .1);
}


/* ===== assets/css/src/04-components/10-buttons.css ===== */
/* Butonlar (.btn, .btn-primary, .btn-small). */

.btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 700;
  transition: transform .2s, background .2s;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  color: #fff;
}

.btn-small {
  min-height: 37px;
  padding: 0 16px;
  font-size: 12px;
}

.btn-primary {
  background: var(--navy);
}

.btn-primary:hover {
  background: var(--navy-dark);
}


/* ===== assets/css/src/04-components/20-top-bar.css ===== */
/* Üst şerit: iletişim satırı, dil seçici, telefon (.top-bar*, .language-*, .phone). */

.top-bar {
  position: relative;
  z-index: 30;
  font-size: 12px;
}

.top-bar::before {
  content: "";
  display: block;
}

.top-bar-inner {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.top-bar-info {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.top-bar-info > .icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  font-size: 15px;
}

.top-bar-info span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.top-bar-links {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 14px;
}

.top-bar-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .2s ease;
}

.top-bar-links a .icon {
  width: 14px;
  height: 14px;
  font-size: 14px;
  color: #8fa9cc;
  transition: color .2s ease;
}

.top-bar-links a:hover .icon {
  color: #c9d9f2;
}

.tb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2ee6a8;
  box-shadow: 0 0 8px rgba(46, 230, 168, .9);
}

/* compact language pill inside the top bar */
.top-bar .language-switcher summary {
  min-height: 26px;
  gap: 6px;
  padding: 0 10px;
  font-size: 11px;
}

.top-bar .language-switcher summary > .icon:first-child {
  font-size: 13px;
}

.phone {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 7px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  color: white;
  background: rgba(255, 255, 255, .05);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  transition: border-color .2s ease, background .2s ease;
}

.phone:hover {
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .09);
}

.phone > .icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  padding: 8px;
  border-radius: 50%;
  color: #8ecdf2;
  background: rgba(30, 159, 224, .14);
  font-size: 14px;
}

.phone small {
  display: block;
  margin-top: 2px;
  color: #9db4d6;
  font-size: 10px;
  font-weight: 500;
}

.language-switcher {
  position: relative;
}

.language-switcher summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  color: white;
  background: rgba(255, 255, 255, .05);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  transition: border-color .2s ease, background .2s ease;
}

.language-switcher summary::-webkit-details-marker {
  display: none;
}

.language-switcher summary:hover {
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .09);
}

.language-switcher summary > .icon:first-child {
  color: #a9c4ec;
  font-size: 15px;
}

.language-switcher .arrow {
  color: #8fa9cc;
  font-size: 7px;
  transition: transform .2s;
}

.language-switcher[open] .arrow {
  transform: rotate(180deg);
}

.language-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 10px);
  right: 0;
  width: 160px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: #123568;
  box-shadow: 0 22px 45px -14px rgba(0, 5, 16, .85);
}

.language-menu::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 18px;
  width: 8px;
  height: 8px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  border-left: 1px solid rgba(255, 255, 255, .18);
  background: #123568;
  transform: rotate(45deg);
}

.language-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  color: #c9d9f2;
  font-size: 12px;
  font-weight: 600;
}

.language-menu a:hover,
.language-menu a.active {
  background: rgba(255, 255, 255, .08);
}

.language-menu a .icon {
  margin-left: auto;
  color: #3aabe6;
  font-size: 9px;
}

.language-menu .flag {
  width: 17px;
  height: 12px;
  flex: 0 0 17px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}

@media (max-width: 1050px) {
  .phone {
    display: none;
  }

  .top-bar-info {
    display: none;
  }

  .top-bar-inner {
    justify-content: flex-end;
  }
}

@media (max-width: 760px) {
  .top-bar {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════
Premium katman — referans tasarımın renk dışındaki sinyalleri
1) sayfa tepesinde mercan→mavi saç teli
2) koyu utility şerit, ayraçlı
3) panellerin üst kenarında ışık çizgisi (cam hissi)
4) birincil eylemlerde mavi parıltı
5) eyebrow'larda kısa kıvılcım çizgisi
6) açık bölümlerde çok hafif ışık derinliği
══════════════════════════════════════════════════════════════ */
/* ── 1 + 2: üst şerit ── */
.top-bar {
  color: #9db2d2;
  background: var(--ink);
}

/* Üst şerit: üç renk hep görünür; renk sınırları (--tb-a/--tb-b, 08-motion) yavaşça
   gidip gelerek birbirine karışıyormuş hissi verir. */
.top-bar::before {
  --tb-a: 30%;
  --tb-b: 78%;
  height: 3px;
  background: linear-gradient(90deg, var(--spark) 0%, #c2542f 10%, var(--navy) var(--tb-a), var(--blue) 48%, var(--accent) var(--tb-b), #7acdf4 100%);
  animation: tb-blend 7s ease-in-out infinite alternate;
}

.top-bar-info > .icon {
  color: var(--accent);
}

.tb-sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .16);
}

.top-bar-links a {
  color: #c2d4ee;
}


/* ===== assets/css/src/04-components/30-header.css ===== */
/* Site başlığı: logo, ana menü, başlık aksiyonları, hamburger (.site-header, .logo*, .main-nav, .mobile-menu). */

.site-header {
  position: relative;
  z-index: 20;
  height: 78px;
  border-bottom: 0;
  background: var(--navy-dark);
}

.site-header::after {
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(31, 120, 209, 0) 0%, rgba(57, 151, 238, .42) 22%, #75c4ff 50%, rgba(57, 151, 238, .42) 78%, rgba(31, 120, 209, 0) 100%);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: white;
  font-size: 21px;
  font-weight: 700;
  line-height: .95;
  white-space: nowrap;
}

.logo small {
  display: block;
  margin-top: 5px;
  color: #b9c9de;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .45px;
}

.main-nav {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.main-nav a {
  color: white;
  font-size: 13px;
  font-weight: 600;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mobile-menu {
  color: white;
}

.mobile-menu {
  display: none;
  font-size: 21px;
}

@media (max-width: 1050px) {
  .main-nav {
    gap: 15px;
  }

  .main-nav a:nth-last-child(-n + 2) {
    display: none;
  }
}

@media (max-width: 760px) {
  .site-header {
    height: 66px;
  }

  .main-nav,
  .header-actions {
    display: none;
  }
}

.site-header {
  background: transparent;
}

.logo > span > span {
  color: var(--accent);
}

.site-header .btn-primary {
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
}

.site-header .btn-primary .icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
}

.site-header .btn-primary:hover {
  color: white;
  background: var(--accent-dark);
}

/* ── Header şeffaf; hero zemini nav’ın arkasından görünsün ── */
.site-header {
  border-radius: 0;
  overflow: visible;
}

.site-header::after {
  position: absolute;
  pointer-events: none;
  content: none;
}

.ft-brand .logo {
  margin-bottom: 18px;
  margin-left: 0;
  padding-left: 0;
}

/* ── 4: birincil eylemlerde parıltı ── */
.site-header .btn-primary {
  background: linear-gradient(135deg, #33a9e4 0%, var(--accent) 46%, #0f86c8 100%);
  box-shadow: 0 10px 26px -10px rgba(30, 159, 224, .8);
}

.site-header .btn-primary:hover {
  background: linear-gradient(135deg, #45b4ea 0%, #2aa9e8 46%, var(--accent-dark) 100%);
  box-shadow: 0 14px 32px -10px rgba(30, 159, 224, .95);
}

/* ══════════════════════════════════════════════════════════════
17: Ana menü — seçili öğe için hap (pill) vurgusu
Tüm bağlantılar aynı dolguyu alır, böylece hap eklenince
hizalama kaymaz; hover'da sönük, seçilide mavi çerçeveli.
══════════════════════════════════════════════════════════════ */
.main-nav {
  gap: 4px;
}

.main-nav a {
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}

.main-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.main-nav a.is-active {
  color: #fff;
  border-color: rgb(29 151 217 / 54%);
  background: rgba(126, 208, 255, .12);
  font-size: 12.5px;
  font-weight: 500;
}

.main-nav a.is-active:hover {
  border-color: rgba(29, 151, 217, .95);
  background: rgba(126, 208, 255, .18);
}

/* ══════════════════════════════════════════════════════════════
18: Logo — tek parça yatay kilit (koyu zemin sürümü)
══════════════════════════════════════════════════════════════ */
.logo-lockup {
  gap: 0;
  line-height: 0;
}

.logo-lockup .logo-img {
  display: block;
  width: auto;
  height: 31px;
  margin-left: 0;
  object-fit: contain;
}

/* saga yanasma yalnizca ust menude; footer'da logo metinle ayni hizada durur */
.site-header .logo-lockup .logo-img {
  margin-left: 0;
}

@media (max-width: 1050px) {
  .logo-lockup .logo-img {
    height: 28px;
  }
}

@media (max-width: 560px) {
  .logo-lockup .logo-img {
    height: 25px;
  }
}

@media (max-width: 760px) {
  /* aksiyonlar mobilde de kalsın: arama ikonu + Ask AI */
  .site-header .header-actions {
    display: flex;
    margin-left: auto;
    gap: 8px;
  }

  /* "Search Now !" hapı mobilde yalnızca ikon */
  .site-header .header-actions .phone {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: 0;
  }

  .site-header .header-actions .phone > span {
    display: none;
  }

  .site-header .header-actions .phone > .icon {
    width: 20px;
    height: 20px;
  }

  /* Ask AI: dar ekrana sığan kompakt hap */
  .site-header .header-actions .btn-primary {
    min-height: 40px;
    padding: 0 14px;
    gap: 7px;
    border-radius: 999px;
    font-size: 12px;
  }

  .site-header .header-actions .btn-primary .icon {
    width: 17px;
    height: 17px;
  }

  .header-inner {
    gap: 10px;
  }
}

@media (max-width: 380px) {
  /* 380px altında "Ask AI Agent" yazısı taşıyor: yalnızca ikon kalsın */
  .site-header .header-actions .btn-primary {
    width: 40px;
    padding: 0;
    gap: 0;
    font-size: 0;
  }

  .site-header .header-actions .btn-primary .icon {
    width: 19px;
    height: 19px;
  }
}

/* ── hamburger: üç çizgi, açıkken X ── */
.mobile-menu {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}

@media (max-width: 760px) {
  .mobile-menu {
    display: inline-flex;
  }
}

.mobile-menu:hover,
.mobile-menu[aria-expanded="true"] {
  border-color: rgba(126, 208, 255, .5);
  background: rgba(126, 208, 255, .14);
}

.mm-bars {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.mm-bars i {
  position: absolute;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform .38s cubic-bezier(.2, .7, .25, 1), width .38s cubic-bezier(.2, .7, .25, 1), opacity .2s ease;
}

.mm-bars i:nth-child(1) {
  top: 0;
  width: 20px;
}

.mm-bars i:nth-child(2) {
  top: 6px;
  width: 13px;
}

.mm-bars i:nth-child(3) {
  top: 12px;
  width: 20px;
}

.mobile-menu[aria-expanded="true"] .mm-bars i:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.mobile-menu[aria-expanded="true"] .mm-bars i:nth-child(2) {
  width: 20px;
  opacity: 0;
  transform: scaleX(.2);
}

.mobile-menu[aria-expanded="true"] .mm-bars i:nth-child(3) {
  width: 20px;
  transform: translateY(-6px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .mm-bars i {
    transition-duration: .01ms;
    transition-delay: 0s;
  }
}

/* ══════════════════════════════════════════════════════════════
53: "Ask AI Agent" beyaz hap + mobil arama ikonu beyaz
4. bölümdeki turkuaz gradyan başlıktaki butonu da boyuyordu;
buton artık beyaz zemin/lacivert yazı, üzerine gelince turkuaz.
══════════════════════════════════════════════════════════════ */
.site-header .btn-primary {
  color: var(--navy-dark);
  background: #fff;
  background-image: none;
  box-shadow: 0 8px 20px -12px rgba(4, 14, 30, .7);
  transition: color .25s ease, background-color .25s ease, transform .2s ease;
}

.site-header .btn-primary .icon {
  color: var(--navy-dark);
  transition: color .25s ease;
}

.site-header .btn-primary:hover,
.site-header .btn-primary:focus-visible {
  color: #fff;
  background: var(--accent);
  background-image: linear-gradient(135deg, #5cc0ef 0%, #33a9e4 55%, #1187ce 100%);
  box-shadow: 0 12px 26px -12px rgba(17, 135, 206, .75);
}

.site-header .btn-primary:hover .icon,
.site-header .btn-primary:focus-visible .icon {
  color: #fff;
}

@media (max-width: 760px) {
  /* mobil başlıktaki arama ikonu maviye çalmasın */
  .site-header .header-actions .phone > .icon {
    flex: 0 0 20px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
  }

  .site-header .header-actions .phone:hover > .icon {
    color: #fff;
  }

  /* ═════════════════════════════════════════════════════════════
  54: Mobil başlıkta logo — bir tık büyük ve sola dayalı
  Masaüstü için konan 18px sol boşluk mobilde logoyu alttaki arama
  şeridinden 18px içeri itıyordu; mobilde kaldırılıp aynı hizaya alındı.
  ═════════════════════════════════════════════════════════════ */
  .site-header .logo-lockup .logo-img {
    height: 29px;
    margin-left: 0;
  }
}


/* ===== assets/css/src/04-components/40-mobile-nav.css ===== */
/* Tam ekran mobil menü (.mobile-nav, .mnav-*, body.is-mnav-open). */

/* ── tam ekran menü ── */
.mobile-nav {
  position: fixed;
  z-index: 150;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s ease, visibility .32s;
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
}

.mnav-sheet {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  gap: 18px;
  padding: 16px 18px calc(26px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(120% 70% at 50% -8%, rgba(30, 159, 224, .30) 0%, rgba(30, 159, 224, 0) 62%), radial-gradient(90% 60% at 110% 105%, rgba(92, 192, 239, .16) 0%, rgba(92, 192, 239, 0) 70%), linear-gradient(180deg, #0b2144 0%, #071a34 55%, #050f22 100%);
  transform: translateY(-12px);
  transition: transform .38s cubic-bezier(.2, .7, .25, 1);
}

.mobile-nav.is-open .mnav-sheet {
  transform: none;
}

/* üstteki ince turkuaz çizgi: başlığın alt şeridiyle aynı dil */
.mnav-sheet::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(31, 120, 209, 0) 0%, rgba(57, 151, 238, .42) 22%, #75c4ff 50%, rgba(57, 151, 238, .42) 78%, rgba(31, 120, 209, 0) 100%);
  pointer-events: none;
}

.mnav-top {
  display: flex;
  height: 50px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
}

/* logo optik olarak kartlarin sol kenarindan biraz iceride dursun */
.mnav-top .logo {
  padding-left: 4px;
}

.mnav-top .logo-img {
  width: auto;
  height: 29px;
}

.mnav-close {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .85);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}

.mnav-close:hover {
  border-color: rgba(126, 208, 255, .5);
  background: rgba(126, 208, 255, .14);
  color: #fff;
}

.mnav-close .icon {
  width: 18px;
  height: 18px;
}

/* ── menü bağlantıları ── */
.mnav-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mnav-links a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  background: rgba(255, 255, 255, .05);
  color: #fff;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .42s ease, transform .42s cubic-bezier(.2, .7, .25, 1), border-color .25s ease, background .25s ease;
}

.mobile-nav.is-open .mnav-links a {
  opacity: 1;
  transform: none;
}

.mobile-nav.is-open .mnav-links a:nth-child(1) {
  transition-delay: .06s, .06s, 0s, 0s;
}

.mobile-nav.is-open .mnav-links a:nth-child(2) {
  transition-delay: .11s, .11s, 0s, 0s;
}

.mobile-nav.is-open .mnav-links a:nth-child(3) {
  transition-delay: .16s, .16s, 0s, 0s;
}

.mobile-nav.is-open .mnav-links a:nth-child(4) {
  transition-delay: .21s, .21s, 0s, 0s;
}

.mobile-nav.is-open .mnav-links a:nth-child(5) {
  transition-delay: .26s, .26s, 0s, 0s;
}

.mnav-links a:active {
  background: rgba(255, 255, 255, .1);
}

.mnav-links a.is-active {
  border-color: rgba(126, 208, 255, .42);
  background: linear-gradient(120deg, rgba(30, 159, 224, .26) 0%, rgba(30, 159, 224, .08) 100%);
}

.mnav-ico {
  display: inline-flex;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 13px;
  background: rgba(255, 255, 255, .07);
  color: #9ed6f7;
}

.mnav-links a.is-active .mnav-ico {
  border-color: rgba(126, 208, 255, .5);
  background: rgba(126, 208, 255, .18);
  color: #fff;
}

.mnav-ico .icon {
  width: 20px;
  height: 20px;
}

.mnav-txt {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
}

.mnav-txt strong {
  color: #fff;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.2px;
}

.mnav-txt small {
  color: rgba(190, 217, 245, .68);
  font-size: 11.5px;
  font-weight: 500;
}

.mnav-go {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: rgba(255, 255, 255, .34);
  transition: transform .25s ease, color .25s ease;
}

.mnav-links a.is-active .mnav-go {
  color: #7ed0ff;
  transform: translateX(2px);
}

/* ── CTA'lar ── */
.mnav-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .42s ease .3s, transform .42s cubic-bezier(.2, .7, .25, 1) .3s;
}

.mobile-nav.is-open .mnav-cta {
  opacity: 1;
  transform: none;
}

.mnav-search {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.mnav-ai {
  display: inline-flex;
  gap: 9px;
  border-radius: 16px;
  font-size: 13.5px;
}

.mnav-ai .icon {
  width: 19px;
  height: 19px;
}

/* ── üst bardan gelen ikincil bağlantılar ── */
.mnav-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  opacity: 0;
  transition: opacity .42s ease .36s;
}

.mobile-nav.is-open .mnav-extra {
  opacity: 1;
}

.mnav-extra a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  color: rgba(216, 233, 252, .86);
  background: rgba(255, 255, 255, .04);
  font-size: 12px;
  font-weight: 600;
}

.mnav-extra .icon {
  width: 15px;
  height: 15px;
}

.mnav-extra .flag {
  width: 17px;
  height: 12px;
  border-radius: 2px;
  object-fit: cover;
}

.mnav-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc97;
  box-shadow: 0 0 0 3px rgba(61, 220, 151, .18);
}

.mnav-foot {
  margin: auto 0 0;
  color: rgba(190, 217, 245, .5);
  font-size: 11px;
  line-height: 1.65;
  text-align: center;
  opacity: 0;
  transition: opacity .42s ease .42s;
}

.mobile-nav.is-open .mnav-foot {
  opacity: 1;
}

/* menü açıkken arka sayfa kaymasın */
body.is-mnav-open {
  overflow: hidden;
}

@media (min-width: 761px) {
  /* 761px ve üzeri: menü hiçbir koşulda görünmesin */
  .mobile-nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mnav-sheet,
  .mnav-links a,
  .mnav-cta,
  .mnav-extra,
  .mnav-foot {
    transition-duration: .01ms;
    transition-delay: 0s;
  }
}

/* mobil menüdeki büyük CTA da aynı dilde: beyaz zemin, lacivert yazı */
.mnav-ai {
  min-height: 50px;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--navy-dark);
  background: #fff;
  transition: color .25s ease, background-color .25s ease;
}

.mnav-ai:hover,
.mnav-ai:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, #5cc0ef 0%, #33a9e4 55%, #1187ce 100%);
}

@media (max-width: 980px) {
  /* mobil menu veya arama ortusu acikken yuzen dugme ve panel geri cekilir
  (mobil menu ile ayni z-index katmanindalar; DOM'da sonra geldikleri
  icin aksi halde ortunun ustunde kalirlar) */
  body.is-mnav-open .toc-fab {
    opacity: 0;
    pointer-events: none;
  }

  body.is-mnav-open .side-toc.is-open {
    transform: translateY(105%);
  }

  body.is-mnav-open .toc-veil.is-open {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}


/* ===== assets/css/src/04-components/50-search-panel.css ===== */
/* Arama paneli (hero'daki cam panel + arama formu): sekmeler, alanlar, öneri listesi (.hero-panel, .hero-search, .search-*, .field-*, .autosuggest-*). */

.hero-search {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  filter: drop-shadow(0 1px 2px rgba(12, 38, 74, .07)) drop-shadow(0 9px 16px rgba(12, 38, 74, .085)) drop-shadow(0 24px 38px rgba(12, 38, 74, .075));
}

/* tab lobe — attached flush to the top of the search panel */
.hero-search .search-tabs {
  position: relative;
  z-index: 3;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
  margin: 0 0 -1px;
  padding: 10px 32px 0 10px;
  border: 0;
  border-radius: 20px 20px 0 0;
  background: #fff;
  min-width: 0;
}

/* concave SVG fillet where the navy lobe meets the panel (browser-tab style);
its stroke continues the lobe's 1px outline seamlessly along the arc */
.hero-search .tabs-fillet {
  position: absolute;
  bottom: 0;
  left: 100%;
  display: block;
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.hero-search .search-tabs-indicator {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 14px;
  background: var(--navy-dark, #0e2c56);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), width .35s cubic-bezier(.22, 1, .36, 1), height .35s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.hero-search .search-tabs button {
  position: relative;
  min-width: 0;
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 14px;
  color: #40536e;
  background: transparent;
  font-size: 13px;
}

.hero-search .search-tabs button .icon {
  width: 19px;
  height: 19px;
  font-size: 19px;
  color: #7d8fa8;
}

.hero-search .search-tabs button:hover:not(.active) {
  background: #f4f8fd;
}

.hero-search .search-tabs button:hover:not(.active) .icon {
  color: var(--navy-dark);
}

.hero-search .search-tabs button.active {
  background: transparent;
}

.hero-search .search-card {
  position: relative;
  z-index: 2;
  overflow: visible;
  border: 0;
  border-radius: 0 20px 20px 20px;
  background: #fff;
  box-shadow: none;
}

.hero-search .search-form {
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  padding: 10px;
}

.hero-search .search-field {
  min-height: 52px;
  flex: 1;
  gap: 14px;
  padding: 6px 10px 6px 16px;
  border: 1px solid #dde7f4;
  border-right: 1px solid #dde7f4;
  border-radius: 14px;
  background: #f2f7fc;
  cursor: text;
}

.hero-search .search-field:focus-within {
  border-color: #1a56a0;
  background: #fff;
}

.hero-search .search-field:first-child {
  padding-left: 18px;
}

.hero-search .search-card .field-icon {
  display: block;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  color: #64748b;
  background: transparent;
  font-size: 19px;
}

.hero-search .field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hero-search .field-body {
  position: relative;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  gap: 0;
  padding-left: 16px;
}

.hero-search .field-body::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 62%;
  transform: translateY(-50%);
  background: #dfe7f1;
}

.hero-search .autosuggest-input {
  width: 100%;
  padding: 0;
  border: 0;
  color: #14233b;
  outline: none;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.hero-search .autosuggest-input::placeholder {
  color: #93a3ba;
  font-weight: 500;
}

.hero-search .autosuggest-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 10px);
  right: 0;
  left: 0;
  min-width: 220px;
  overflow: hidden;
  border: 1px solid #d5e0ea;
  border-radius: 10px;
  background: white;
  box-shadow: 0 18px 40px rgba(20, 65, 125, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.hero-search .autosuggest-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hero-search .autosuggest-list {
  max-height: 220px;
  margin: 0;
  padding: 6px;
  overflow: auto;
  list-style: none;
}

.hero-search .autosuggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 7px;
  color: var(--navy-dark, #0e2c56);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.hero-search .autosuggest-item:hover,
.hero-search .autosuggest-item.is-active {
  color: white;
  background: var(--navy, #14417d);
}

.hero-search .autosuggest-item .flag {
  width: 20px;
  height: 14px;
  flex: 0 0 20px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(20, 65, 125, .08);
}

.hero-search .autosuggest-item mark {
  background: transparent;
  color: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(30, 159, 224, .5);
  text-underline-offset: 2px;
}

.hero-search .autosuggest-empty {
  padding: 14px 12px;
  color: #8a97a8;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.hero-search .search-field.is-suggest-open {
  z-index: 25;
}

.hero-search .search-form .search-button {
  width: 170px;
  min-width: 170px;
  min-height: 0;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: var(--navy-dark, #0e2c56);
  box-shadow: 0 12px 26px -12px rgba(14, 44, 86, .5);
  font-size: 15px;
}

.hero-search .search-form .search-button:hover {
  color: #fff;
}

.search-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.search-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid #cddbe8;
  border-radius: var(--radius);
  color: var(--navy-dark);
  background: rgba(255, 255, 255, .96);
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
  transition: background .2s, color .2s, border-color .2s;
}

.search-tabs button .icon {
  width: 17px;
  height: 17px;
  font-size: 17px;
  color: var(--navy);
}

.search-tabs button:hover:not(.active) {
  border-color: var(--navy);
  color: var(--navy-dark);
  box-shadow: none;
}

.search-tabs button.active {
  border-color: var(--navy);
  color: white;
  background: var(--navy);
  box-shadow: none;
}

.search-tabs button.active .icon {
  color: white;
}

.search-card {
  overflow: visible;
  border: 1px solid #315b8f;
  border-radius: 12px;
  background: rgba(14, 44, 86, .98);
  box-shadow: none;
}

.search-form {
  display: flex;
  align-items: stretch;
  padding: 10px 10px 10px 18px;
}

.search-form[hidden] {
  display: none;
}

.search-form:not([hidden]) {
  animation: search-panel-in .22s ease;
}

.search-field {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px 20px;
  border-right: 1px solid #dfe6ee;
  cursor: pointer;
}

.search-field:first-child {
  padding-left: 6px;
}

.field-icon {
  flex-shrink: 0;
  color: var(--navy);
  font-size: 22px;
  line-height: 1;
}

.field-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.field-label {
  color: #8a97a8;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}

.search-form select {
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: var(--navy-dark);
  outline: none;
  background: transparent;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  appearance: none;
  padding-right: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23062d62' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}

.search-button {
  flex-shrink: 0;
  align-self: center;
  min-width: 148px;
  min-height: 56px;
  margin-left: 10px;
  padding: 0 26px;
  font-size: 13px;
}

@media (max-width: 1050px) {
  .hero-search {
    width: 100%;
    max-width: none;
  }

  .hero-search .search-tabs {
    gap: 10px;
    padding: 10px 22px 0 10px;
  }

  .hero-search .search-tabs button {
    min-height: 46px;
    padding: 0 18px;
    font-size: 13px;
  }

  .hero-search .search-form {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
  }

  .hero-search .search-field {
    flex: 1 1 240px;
  }

  .hero-search .search-form .search-button {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
    min-height: 54px;
    margin: 0;
  }
}

@media (max-width: 760px) {
  .hero-search .search-tabs {
    display: flex;
    width: 100%;
    gap: 10px;
    margin: 0 0 -1px;
    padding: 10px 10px 0;
    border-radius: 16px 16px 0 0;
  }

  .hero-search .tabs-fillet {
    display: none;
  }

  .hero-search .search-card {
    border-radius: 0 0 16px 16px;
  }

  .hero-search .search-tabs button {
    flex: 1;
    min-width: 0;
    min-height: 46px;
    padding: 0 8px;
    gap: 6px;
    font-size: 13px;
  }

  .hero-search .search-form {
    flex-direction: column;
    gap: 10px;
    padding: 10px;
  }

  .hero-search .search-field {
    width: 100%;
    flex: 1 1 auto;
    min-height: 52px;
  }

  .hero-search .search-form .search-button {
    width: 100%;
    min-height: 52px;
  }
}

@media (max-width: 430px) {
  .hero-search .search-tabs button {
    padding: 0 4px;
    font-size: 13px;
  }

  .search-tabs button .icon {
    font-size: 16px;
  }
}

/* ══════════════════════════════════════════════════════════════
Hero sağ sütunu: arama + güven tek parça cam panel
══════════════════════════════════════════════════════════════ */
.hero-panel {
  position: relative;
  z-index: 2;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 26px;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 1px 2px rgba(12, 38, 74, .06), 0 10px 22px -10px rgba(12, 38, 74, .16), 0 0 20px -28px rgba(12, 38, 74, .3);
}

@media (min-width: 1051px) {
  .hero-panel {
    width: 100%;
    margin: var(--hero-gap) 0 0;
  }
}

@media (max-width: 1050px) {
  .hero-panel {
    margin-top: var(--hero-gap);
  }
}

/* ── panel içindeki arama: dikey yığın, cam üzerinde ── */
.hero-panel .search-tabs {
  display: flex;
  width: 100%;
  gap: 4px;
  margin: 0 0 14px;
  padding: 4px;
  border-radius: 14px;
}

.hero-panel .tabs-fillet {
  display: none;
}

.hero-panel .search-tabs-indicator {
  border-radius: 11px;
}

.hero-panel .search-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hero-panel .search-form {
  flex-direction: column;
  gap: 10px;
  padding: 0;
}

.hero-panel .search-field {
  width: 100%;
  min-height: 52px;
  flex: 1 1 auto;
  border-color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .75);
}

.hero-panel .search-form .search-button {
  width: 100%;
  min-width: 0;
}

@media (min-width: 1051px) {
  /* ══════════════════════════════════════════════════════════════
  Geniş ekran: hero paneli yatay arama düzeni
  (dikey yığın kurallarından sonra gelmeli ki onları ezebilsin)
  ══════════════════════════════════════════════════════════════ */
  .hero-panel .search-tabs {
    display: inline-flex;
  }

  /* ══════════════════════════════════════════════════════════════
  Geniş ekran: hero paneli yatay arama düzeni
  (dikey yığın kurallarından sonra gelmeli ki onları ezebilsin)
  ══════════════════════════════════════════════════════════════ */
  .hero-panel .search-tabs button {
    min-width: 148px;
    flex: 0 0 auto;
  }

  .hero-panel .search-form {
    flex-direction: row;
    gap: 12px;
  }

  .hero-panel .search-field {
    width: auto;
    flex: 1 1 0;
  }

  .hero-search .search-field:first-child {
    flex: 1 1 0;
  }

  .hero-panel .search-field:first-child {
    flex-grow: 1.3;
  }

  .hero-panel .search-form .search-button {
    width: 200px;
    min-width: 200px;
    flex: 0 0 auto;
  }
}

/* ══════════════════════════════════════════════════════════════
Sekme şeridi: lacivert blok + turkuaz aktif sekme
══════════════════════════════════════════════════════════════ */
.hero-panel .search-tabs {
  padding: 8px;
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* ══════════════════════════════════════════════════════════════
Sekme şeridi: lacivert blok + turkuaz aktif sekme
══════════════════════════════════════════════════════════════ */
.hero-panel .search-tabs button:hover:not(.active) {
  color: #fff;
  background: rgba(255, 255, 255, .07);
}

.hero-panel .search-tabs button:hover:not(.active) .icon {
  color: #cfe0f5;
}

.hero-panel .search-tabs-indicator {
  border-radius: 13px;
}

/* ══════════════════════════════════════════════════════════════
Sekme şeridi v2 — ortalı, ikon üstte, aktif sekmede alt çizgi
══════════════════════════════════════════════════════════════ */
.hero-panel .search-tabs {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 34px;
  margin: 0 0 20px;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════
Sekme şeridi v2 — ortalı, ikon üstte, aktif sekmede alt çizgi
══════════════════════════════════════════════════════════════ */
/* JS ile konumlanan hap göstergesi bu düzende kullanılmıyor */
.hero-panel .search-tabs-indicator {
  display: none;
}

.hero-panel .search-tabs button {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 16px;
  border-radius: 0;
  color: var(--navy-dark);
  background: transparent;
  font-size: 15px;
  font-weight: 700;
}

.hero-panel .search-tabs button .icon {
  width: 21px;
  height: 21px;
  font-size: 21px;
  color: #6d8dbb;
  transition: color .2s ease;
}

@media (max-width: 760px) {
  .hero-panel .search-tabs {
    gap: 12px;
  }

  .hero-panel .search-tabs button {
    flex: 1;
    justify-content: center;
    padding: 9px 4px 13px;
    gap: 7px;
    font-size: 13px;
  }

  .hero-panel .search-tabs button .icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }
}

@media (max-width: 1050px) {
  /* Mobil: sekmeler PC’deki gibi panelin dışında, bağımsız hap */
  .hero-panel {
    position: relative;
    isolation: isolate;
    padding: 0 16px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  /* cam kart sekmelerin 5px altından başlar (48px hap + 5px boşluk) */
  .hero-panel::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 53px 0 0;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 26px;
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    box-shadow: 0 1px 2px rgba(12, 38, 74, .06), 0 10px 22px -10px rgba(12, 38, 74, .16), 0 0 20px -28px rgba(12, 38, 74, .3);
  }

  .hero-panel .hero-search {
    position: relative;
    z-index: 1;
  }

  .hero-panel .search-tabs {
    display: flex;
    width: auto;
    gap: 2px;
    margin: 0 -16px 21px;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-bottom: 1px solid rgba(255, 255, 255, .7);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    box-shadow: none;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }

  .hero-panel .search-tabs-indicator {
    display: block;
    border-radius: 999px;
    background: var(--navy-dark);
    box-shadow: 0 6px 16px -8px rgba(14, 44, 86, .45);
  }

  .hero-panel .search-tabs button {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    min-height: 42px;
    padding: 0 6px;
    gap: 6px;
    border-radius: 999px;
    color: var(--navy-dark);
    background: transparent;
    font-size: 12.5px;
    font-weight: 700;
  }

  .search-tabs button:hover:not(.active) {
    background: transparent;
  }

  .hero-search .search-tabs button:hover:not(.active) {
    background: transparent;
  }

  .hero-search .search-tabs button.active {
    color: var(--navy-dark);
  }

  .hero-panel .search-tabs button .icon {
    width: 16px;
    height: 16px;
    font-size: 16px;
    color: var(--navy-dark);
  }

  .hero-search .search-tabs button.active .icon {
    color: var(--navy-dark);
  }

  .hero-panel .search-tabs button:hover:not(.active),
  .hero-panel .search-tabs button:hover:not(.active) .icon {
    color: var(--navy-dark);
    background: transparent;
  }

  .hero-panel .search-tabs button.active,
  .hero-panel .search-tabs button.active .icon {
    color: #fff;
  }

  .hero-search .search-tabs button:hover:not(.active) .icon {
    color: #fff;
  }

  .hero-panel .search-tabs button.active::after {
    display: none;
  }
}

@media (min-width: 1051px) {
  /* ══════════════════════════════════════════════════════════════
  Sekme şeridi v3 — sola dayalı kulakçık, üstü kavisli (renkler korunur)
  ══════════════════════════════════════════════════════════════ */
  .hero-panel .search-tabs {
    display: inline-flex;
    border-radius: 26px 22px 0 0;
    background: rgba(255, 255, 255, .72);
    box-shadow: none;
  }

  /* alt çizgi yerine dolgulu aktif hap */
  .hero-panel .search-tabs button.active::after {
    display: none;
  }

  .hero-panel .search-tabs button.active,
  .hero-panel .search-tabs button.active .icon {
    color: #fff;
  }

  .hero-search .search-tabs button:hover:not(.active) .icon {
    color: #fff;
  }

  .hero-panel .search-tabs-indicator {
    display: block;
    background: linear-gradient(135deg, #5cc0ef 0%, #33a9e4 55%, #1187ce 100%);
  }

  /* ══════════════════════════════════════════════════════════════
  Panel gövdesi kulakçığın ALTINDAN başlasın —
  kulakçığın sağındaki boş cam bant kalksın
  ══════════════════════════════════════════════════════════════ */
  .hero-panel {
    position: relative;
    isolation: isolate;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 0 20px 20px;
  }

  .hero-panel .hero-search {
    position: relative;
    z-index: 1;
  }

  /* kulakçık kendi cam yüzeyini taşır */
  .hero-panel .search-tabs {
    background: rgba(255, 255, 255, .62);
  }

  /* ══════════════════════════════════════════════════════════════
  Kulakçık kavisi: SVG yerine aynı cam malzemeden maskeli köşe
  (SVG'nin düz dolgusu blur'lu yüzeyle uyuşmuyordu)
  ══════════════════════════════════════════════════════════════ */
  .hero-panel .tabs-fillet {
    bottom: 0;
    left: 100%;
    display: none;
  }

  /* ══════════════════════════════════════════════════════════════
  Kulakçık panelden ayrı bir cam yüzey — arada 5px boşluk
  ══════════════════════════════════════════════════════════════ */
  .hero-panel .search-tabs {
    border-radius: 26px;
    background: rgba(255, 255, 255, .62);
  }

  /* ══════════════════════════════════════════════════════════════
  Kulakçık panelden ayrı bir cam yüzey — arada 5px boşluk
  ══════════════════════════════════════════════════════════════ */
  /* ayrık olduğu için birleşim kavisine gerek yok */
  .hero-panel .search-tabs::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 100%;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, .62);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    -webkit-mask-image: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 0 23.5px, #000 24px);
    mask-image: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 0 23.5px, #000 24px);
    pointer-events: none;
    display: none;
  }

  /* ══════════════════════════════════════════════════════════════
  Kulakçık: daha kompakt sekmeler + tam 5px ayrım
  (kulakçık 54px içerik + 2px kenarlık = 56px; panel 61px'te başlar)
  ══════════════════════════════════════════════════════════════ */
  .hero-panel .search-tabs button {
    min-height: 42px;
    padding: 0 18px;
    gap: 8px;
    font-size: 13.5px;
    border-radius: 12px;
  }

  .hero-panel .search-tabs button .icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }

  .hero-panel .search-tabs-indicator {
    box-shadow: 0 6px 16px -8px rgba(17, 135, 206, .5);
    border-radius: 12px;
  }

  /* aktif sekme ve butonların köşesi kulakçıkla aynı yarıçapta */
  .hero-panel .search-tabs button,
  .hero-panel .search-tabs-indicator {
    border-radius: 26px;
  }
}

/* ══════════════════════════════════════════════════════════════
Renk takası: aktif sekme lacivert, Find Med butonu turkuaz
══════════════════════════════════════════════════════════════ */
.hero-panel .search-form .search-button {
  min-height: 52px;
  background: linear-gradient(135deg, #5cc0ef 0%, #33a9e4 55%, #1187ce 100%);
  box-shadow: 0 12px 26px -12px rgba(17, 135, 206, .5);
}

.hero-panel .search-form .search-button:hover {
  background: linear-gradient(135deg, #7acdf4 0%, #45b4ea 55%, #1e9fe0 100%);
  box-shadow: 0 14px 30px -12px rgba(17, 135, 206, .55);
}

@media (min-width: 1051px) {
  /* kulakçık iç boşluğu 2px — sekmeler kapsayıcıya yakın dursun
  (42px buton + 4px iç boşluk + 2px kenarlık = 48px; panel 53px'te başlar) */
  .hero-panel .search-tabs {
    width: auto;
    justify-content: flex-start;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .65);
    min-height: 0;
    padding: 2px;
    gap: 2px;
    margin: 0 0 25px -20px;
  }

  /* cam yüzey: kulakçık yüksekliği (66px) kadar aşağıdan başlar */
  .hero-panel::before {
    content: "";
    position: absolute;
    z-index: 0;
    border: 1px solid rgba(255, 255, 255, .65);
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    box-shadow: 0 1px 2px rgba(12, 38, 74, .06), 0 10px 22px -10px rgba(12, 38, 74, .16), 0 0 20px -28px rgba(12, 38, 74, .3);
    border-radius: 26px;
    inset: 53px 0 0;
  }
}

/* tab lobe — attached flush to the top of the search panel */
.hero-search .search-tabs {
  animation: fm-rise .75s cubic-bezier(.2, .7, .25, 1) .22s both;
}

.hero-search .search-card {
  animation: fm-rise-soft .85s cubic-bezier(.2, .7, .25, 1) .38s both;
}

/* alanlar dokunuşa cevap versin */
.hero-search .search-field {
  transition: transform .28s cubic-bezier(.2, .7, .25, 1), box-shadow .28s ease, background-color .28s ease;
}

.hero-search .search-field:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -14px rgba(10, 40, 80, .55);
}

.hero-search .search-field:focus-within {
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px rgba(30, 159, 224, .35), 0 12px 26px -14px rgba(10, 40, 80, .6);
}

.hero-search .search-field .field-icon {
  transition: transform .3s cubic-bezier(.2, .7, .25, 1), color .3s ease;
}

.hero-search .search-field:hover .field-icon,
.hero-search .search-field:focus-within .field-icon {
  transform: scale(1.12);
  color: var(--accent);
}

/* CTA: sakin bir nabız + üzerine gelince ışık geçişi */
.hero-search .search-form .search-button {
  align-self: stretch;
  margin: 0;
  gap: 9px;
  font-weight: 700;
  letter-spacing: .2px;
  position: relative;
  overflow: hidden;
  transition: transform .28s cubic-bezier(.2, .7, .25, 1), box-shadow .28s ease;
  animation: fm-cta-pulse 3.6s ease-in-out 1.6s infinite;
}

.hero-search .search-form .search-button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 60%);
  background-size: 240% 100%;
  background-position: 210% 0;
  background-repeat: no-repeat;
  transition: background-position .8s ease;
}

.hero-search .search-form .search-button:hover {
  transform: translateY(-2px);
  animation-play-state: paused;
}

.hero-search .search-form .search-button:hover::after {
  background-position: -110% 0;
}

.hero-search .search-form .search-button:active {
  transform: translateY(0);
}

.hero-search .search-form .search-button .icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
  transition: transform .3s cubic-bezier(.2, .7, .25, 1);
}

.hero-search .search-form .search-button:hover .icon {
  transform: scale(1.12) rotate(-8deg);
}

/* sekmeler ve güven satırı: küçük ama pahalı duran detaylar */
.hero-search .search-tabs button {
  z-index: 1;
  justify-content: center;
  transition: color .28s ease, transform .28s cubic-bezier(.2, .7, .25, 1);
}

.hero-search .search-tabs button .icon {
  transition: transform .3s cubic-bezier(.2, .7, .25, 1);
}

.hero-search .search-tabs button:hover .icon,
.hero-search .search-tabs button.active .icon {
  transform: translateY(-1px) scale(1.1);
}

/* ══════════════════════════════════════════════════════════════
13: Hero arama paneli koyu lacivert cam
Beyaz cam yüzey lacivert zemine çevrildi; içerideki her öğe
(sekmeler, alanlar, ikonlar, güven satırı, öneri listesi)
koyu zemine göre yeniden kontrastlandı.
══════════════════════════════════════════════════════════════ */
.hero-panel::before {
  background-image: linear-gradient(102deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 240% 100%;
  background-repeat: no-repeat;
  background-position: 210% 0;
  animation: fm-rise-soft .85s cubic-bezier(.2, .7, .25, 1) .3s both, fm-sheen 9s ease-in-out 1.6s 1;
  border-color: rgba(255, 255, 255, .16);
  background-color: rgba(9, 26, 50, .68);
  box-shadow: 0 1px 2px rgba(4, 14, 30, .3), 0 18px 40px -18px rgba(4, 14, 30, .75), inset 0 1px 0 rgba(255, 255, 255, .1);
}

/* ── sekme şeridi ── */
.hero-panel .search-tabs {
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(9, 26, 50, .72);
}

.hero-panel .tabs-fillet path {
  fill: rgba(9, 26, 50, .72);
}

.hero-panel .search-tabs button,
.hero-panel .search-tabs button .icon {
  color: rgba(255, 255, 255, .74);
}

.hero-panel .search-tabs button:hover:not(.active),
.hero-panel .search-tabs button:hover:not(.active) .icon {
  color: #fff;
  background: transparent;
}

/* JS ile konumlanan hap göstergesi bu düzende kullanılmıyor */
.hero-panel .search-tabs-indicator {
  background: #fff;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6);
}

.hero-panel .search-tabs button.active,
.hero-panel .search-tabs button.active .icon {
  color: var(--navy-dark);
}

/* beyaz hapın altındaki vurgu çizgisi artık gereksiz */
.hero-panel .search-tabs button.active::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: -1px;
  left: 6px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  display: none;
}

/* ── arama alanları ── */
.hero-panel .search-field {
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .07);
}

/* ── arama alanları ── */
.hero-panel .search-field:hover {
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .11);
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .8);
}

.hero-panel .search-field:focus-within {
  border-color: rgba(30, 159, 224, .65);
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 2px rgba(30, 159, 224, .3), 0 12px 26px -14px rgba(0, 0, 0, .85);
}

.hero-panel .field-label {
  color: rgba(255, 255, 255, .6);
}

.hero-panel .autosuggest-input {
  color: #fff;
}

.hero-panel .autosuggest-input::placeholder {
  color: rgba(255, 255, 255, .5);
}

.hero-panel .search-field .field-icon {
  color: rgba(255, 255, 255, .58);
}

.hero-panel .search-field:hover .field-icon,
.hero-panel .search-field:focus-within .field-icon {
  color: var(--accent);
}

.hero-panel .field-body::before {
  background: rgba(255, 255, 255, .18);
}

/* oneri listesi altindaki guven blogunun altinda kalmasin:
.hero-search ile .trust-panel ayni z-index'teydi, DOM'da sonraki kazaniyordu */
.hero-panel .hero-search {
  filter: none;
  z-index: 3;
}

/* alan static oldugu icin .is-suggest-open'daki z-index calismiyordu */
.hero-panel .search-field {
  position: relative;
}

.hero-panel .search-field.is-suggest-open {
  z-index: 25;
}

/* ── öneri listesi de koyu ── */
.hero-panel .autosuggest-panel {
  border-color: rgba(255, 255, 255, .16);
  background: #091a32;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .8);
}

.hero-panel .autosuggest-item {
  color: rgba(255, 255, 255, .86);
}

.hero-panel .autosuggest-item:hover,
.hero-panel .autosuggest-item.is-active {
  color: #fff;
  background: rgba(255, 255, 255, .09);
}

.hero-panel .autosuggest-item mark {
  color: var(--accent);
  background: transparent;
}

.hero-panel .autosuggest-item .flag {
  border-color: rgba(255, 255, 255, .28);
}

.hero-panel .autosuggest-empty {
  color: rgba(255, 255, 255, .55);
}


/* ===== assets/css/src/04-components/60-search-modal.css ===== */
/* Arama lightbox'ı (.search-modal, .sm-*, body.is-search-open). */

/* ══════════════════════════════════════════════════════════════
50: Arama lightbox'i — ust menudeki "Search Now !" ile acilir.
Sayfanin tamamini koyu lacivert bir ortu kaplar, arama karti
dikeyde ve yatayda ortalanir.
══════════════════════════════════════════════════════════════ */
.search-modal {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 28px 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}

.search-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.sm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 20, 44, .94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.sm-dialog {
  position: relative;
  z-index: 1;
  width: min(940px, 100%);
  overflow: visible;
  padding: 16px 4px;
  transform: translateY(16px) scale(.98);
  transition: transform .34s cubic-bezier(.2, .7, .25, 1);
}

.search-modal.is-open .sm-dialog {
  transform: none;
}

.sm-close {
  z-index: 2;
  top: 2px;
  right: 2px;
  display: inline-flex;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.sm-head {
  margin: 6px 0 26px;
}

.sm-head h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -.6px;
  line-height: 1.15;
}

/* aciklama satiri artik arama kartinin altinda: .sm-note */
.sm-note {
  margin: 18px 0 0;
  color: rgba(216, 233, 252, .78);
  font-size: 13.5px;
  line-height: 1.6;
}

/* hero girisindeki kademeli animasyon modalda gereksiz: kart hazir gelsin */
.sm-search .search-tabs,
.sm-search .search-card {
  animation: none;
}

/* kart hero'daki ile ayni bilesen; burada ortalanmis tek blok */
.sm-search {
  max-width: 100%;
  margin: 0 auto;
}

@media (max-width: 760px) {
  .search-modal {
    padding: 18px 14px;
  }

  .sm-head {
    margin-bottom: 16px;
  }

  .sm-search .search-form {
    flex-direction: column;
  }

  .sm-search .search-form .search-button {
    width: 100%;
    min-width: 0;
  }
}

/* modal acikken arka sayfa kaymasin */
body.is-search-open {
  overflow: hidden;
}

/* ═════════════════════════════════════════════════════════════
51: Arama lightbox'i hero'daki koyu cam panelin aynısı.
Kart .hero-panel sınıfını taşıdığı için renkler, alanlar ve
buton hero ile tek kaynaktan gelir; burada yalnızca hero'ya
özgü yerleşim (sola dayalı kulakçık, giriş animasyonu) değişir:
sekme hapı modalda ortalanır.
═════════════════════════════════════════════════════════════ */
.sm-panel {
  width: 100%;
  margin: 0;
}

@media (min-width: 1051px) {
  /* ═════════════════════════════════════════════════════════════
  51: Arama lightbox'i hero'daki koyu cam panelin aynısı.
  Kart .hero-panel sınıfını taşıdığı için renkler, alanlar ve
  buton hero ile tek kaynaktan gelir; burada yalnızca hero'ya
  özgü yerleşim (sola dayalı kulakçık, giriş animasyonu) değişir:
  sekme hapı modalda ortalanır.
  ═════════════════════════════════════════════════════════════ */
  .sm-panel .search-tabs {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto 25px;
  }
}

@media (max-width: 760px) {
  /* ═════════════════════════════════════════════════════════════
  55: Arama lightbox'i — mobil düzen rötuşu
  Sekme şeridi kartla aynı genişlikte olunca kenarlara yapışık
  duruyordu: mobilde biraz daraltıldı.
  ═════════════════════════════════════════════════════════════ */
  .sm-panel .search-tabs {
    width: calc(100% - 16px);
  }
}

/* ═════════════════════════════════════════════════════════════
56: Arama lightbox'i — kart govdesi 10px, sekme seridi 5px cerceve
Ic bosluklar mobil + masaustu icin ortak verildi; cam yuzey sabit
bir tepe degeriyle konumlandigi icin seridin yeni yuksekligine gore
(53px serit + 5px bosluk) yeniden hesaplandi — aksi halde serit
kartin uzerine biniyordu.
═════════════════════════════════════════════════════════════ */
.sm-panel {
  padding: 0 10px 10px;
}

/* ═════════════════════════════════════════════════════════════
56: Arama lightbox'i — kart govdesi 10px, sekme seridi 5px cerceve
Ic bosluklar mobil + masaustu icin ortak verildi; cam yuzey sabit
bir tepe degeriyle konumlandigi icin seridin yeni yuksekligine gore
(53px serit + 5px bosluk) yeniden hesaplandi — aksi halde serit
kartin uzerine biniyordu.
═════════════════════════════════════════════════════════════ */
/* sekme hapı ortada */
.sm-panel .search-tabs {
  justify-content: center;
  padding: 5px;
  margin-right: auto;
  margin-bottom: 15px;
  margin-left: auto;
}

/* ═════════════════════════════════════════════════════════════
57: Arama lightbox'i — kart govdesi cerceve/zemin tasimasin
Sekme seridinin altindaki cam yuzey (kenarlik + lacivert cam +
golge) kaldirildi; govde tamamen seffaf, zemin dogrudan modal
ortusunun kendisi. Yerlesim (10px ic bosluk) korundu.
═════════════════════════════════════════════════════════════ */
.sm-panel::before {
  animation: none;
  inset: 58px 0 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* ═════════════════════════════════════════════════════════════
58: Arama lightbox'i — kapatma butonu her ekranda altta, ortada
Sag ust kosedeki hap, diyalog akisa (flex kolon) alinip en alta
siralandi; boylece mobil ve masaustu ayni duzeni paylasiyor.
Renk de notr griden hafif kirmiziya cekildi ki "kapat" eylemi
ilk bakista okunsun.
═════════════════════════════════════════════════════════════ */
.sm-dialog {
  display: flex;
  flex-direction: column;
}

.sm-head {
  text-align: center;
  order: 1;
  padding-right: 0;
}

.sm-panel {
  order: 2;
}

/* aciklama satiri artik arama kartinin altinda: .sm-note */
.sm-note {
  text-align: center;
  order: 3;
}

.sm-close {
  align-items: center;
  cursor: pointer;
  position: static;
  order: 4;
  width: 52px;
  height: 52px;
  margin: 64px auto 0;
  align-self: center;
  border-color: rgba(239, 108, 108, .38);
  background: rgba(214, 62, 62, .16);
  color: rgba(255, 190, 190, .92);
}

.sm-close:hover {
  border-color: rgba(239, 108, 108, .62);
  background: rgba(214, 62, 62, .3);
  color: #fff;
}

.sm-close .icon {
  width: 21px;
  height: 21px;
}

@media (min-width: 761px) {
  /* baslik arama kartindan daha ayri dursun */
  .sm-head {
    margin-bottom: 64px;
  }

  /* icerik dikeyde 50px yukari: grid ortalamasi margin kutusunu
  ortaladigi icin alt bosluk iki katı verilir */
  .sm-dialog {
    margin-bottom: 100px;
  }

  .search-modal.is-open .sm-close {
    opacity: 1;
    transition: opacity .3s ease .36s, background .25s ease, color .25s ease, border-color .25s ease;
  }

  /* buton ekrana sabit, diyalog ise girişte kayiyor; animasyon
  bitmeden gorunurse ortadan asagi suzuluyordu — yerine oturunca
  fade-in ile gelsin */
  .sm-close {
    opacity: 0;
    transition: opacity .2s ease, background .25s ease, color .25s ease, border-color .25s ease;
    position: fixed;
    top: auto;
    right: auto;
    bottom: 104px;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
  }
}

@media (max-width: 980px) {
  body.is-search-open .toc-fab {
    opacity: 0;
    pointer-events: none;
  }

  body.is-search-open .side-toc.is-open {
    transform: translateY(105%);
  }

  body.is-search-open .toc-veil.is-open {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}


/* ===== assets/css/src/04-components/62-ai-chat.css ===== */
/* "Ask AI Agent" sohbet penceresi (.ai-chat, .aic-*, body.is-ai-open). Markup: findmed/ai-chat bloğu; davranış: home.js "AI sohbet penceresi". */

/* ══════════════════════════════════════════════════════════════
Tam ekran sohbet — arama lightbox'ıyla (60-search-modal) aynı koyu
lacivert zemin. Üstte ince başlık şeridi; sohbet ve mesaj kutusu
ortada en çok --aic-col genişliğinde tek sütun. Kullanıcı balonu
sitenin mavisi, ajan cevabı cam kart.
══════════════════════════════════════════════════════════════ */
.ai-chat {
  --aic-col: 760px;
  --aic-pad: max(20px, calc((100% - var(--aic-col)) / 2));
  --aic-online: #2fd08a;
  --aic-sky: #8fc3f2;
  --aic-glass: rgba(255, 255, 255, .06);
  --aic-glass-line: rgba(255, 255, 255, .12);
  --aic-soft: rgba(216, 233, 252, .78);

  position: fixed;
  z-index: 210;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
  font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
}

.ai-chat[hidden] {
  display: none;
}

.ai-chat.is-open {
  opacity: 1;
  visibility: visible;
}

/* koyu zemin + üstte iki yumuşak mavi ışık */
.aic-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(30, 159, 224, .22) 0%, rgba(30, 159, 224, 0) 70%),
    radial-gradient(50% 45% at 90% 10%, rgba(26, 86, 160, .35) 0%, rgba(26, 86, 160, 0) 70%),
    rgba(5, 20, 44, .97);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.aic-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  color: #fff;
  transform: translateY(14px);
  transition: transform .38s cubic-bezier(.2, .8, .25, 1);
}

.ai-chat.is-open .aic-panel {
  transform: none;
}

/* ── Başlık şeridi ── */
.aic-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.aic-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 13px;
  background: linear-gradient(140deg, var(--accent) 0%, var(--navy) 100%);
  box-shadow: 0 8px 20px -8px rgba(30, 159, 224, .7);
}

.aic-avatar .icon {
  width: 23px;
  height: 23px;
}

.aic-online {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 12px;
  height: 12px;
  border: 2px solid #071a36;
  border-radius: 999px;
  background: var(--aic-online);
}

.aic-id {
  flex-grow: 1;
  min-width: 0;
}

.aic-id h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.aic-badge {
  padding: 3px 8px;
  border: 1px solid rgba(143, 195, 242, .35);
  border-radius: 999px;
  color: var(--aic-sky);
  background: rgba(30, 159, 224, .12);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.aic-id p {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--aic-soft);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.aic-hbtn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.aic-hbtn[hidden] {
  display: none;
}

.aic-hbtn:hover {
  border-color: rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .14);
}

.aic-hbtn .icon {
  width: 19px;
  height: 19px;
}

/* ── Sohbet alanı: ortada tek sütun ── */
.aic-log {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 18px;
  min-height: 0;
  overflow-y: auto;
  padding: 36px var(--aic-pad) 24px;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
}

/* karşılama dikeyde ortada */
.aic-intro {
  margin: auto 0;
  text-align: center;
}

.aic-orb {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 22px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(140deg, var(--accent) 0%, var(--navy) 100%);
  box-shadow: 0 18px 40px -12px rgba(30, 159, 224, .65);
}

/* yavaşça nefes alan halka: ajan "hazır" */
.aic-orb::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px solid rgba(30, 159, 224, .4);
  border-radius: 30px;
  animation: aic-breathe 2.8s ease-in-out infinite;
}

.aic-orb .icon {
  width: 36px;
  height: 36px;
}

.aic-intro h3 {
  max-width: 560px;
  margin: 0 auto 12px;
  color: #fff;
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.03em;
}

.aic-intro > p {
  max-width: 520px;
  margin: 0 auto;
  color: var(--aic-soft);
  font-size: 15px;
  line-height: 1.6;
}

.aic-intro .aic-suggest-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: none;
  margin: 34px 0 14px;
  color: var(--aic-sky);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.aic-suggest-label .icon {
  width: 15px;
  height: 15px;
}

.aic-suggest {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.aic-suggest button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 104px;
  padding: 16px 44px 16px 18px;
  border: 1px solid var(--aic-glass-line);
  border-radius: 18px;
  color: #fff;
  background: var(--aic-glass);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.aic-suggest button:hover {
  border-color: rgba(143, 195, 242, .55);
  background: rgba(30, 159, 224, .14);
  transform: translateY(-2px);
}

.aic-topic {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--aic-sky);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.aic-topic .icon {
  width: 16px;
  height: 16px;
}

.aic-q {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
}

.aic-go {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, .45);
  transition: color .2s ease, transform .2s ease;
}

.aic-suggest button:hover .aic-go {
  color: #fff;
  transform: translate(2px, -2px);
}

/* ── Mesajlar ── */
.aic-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 100%;
  animation: aic-in .32s cubic-bezier(.2, .8, .25, 1) both;
}

.aic-row--user {
  justify-content: flex-end;
}

.aic-mini {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin-top: 2px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(140deg, var(--accent) 0%, var(--navy) 100%);
}

.aic-mini .icon {
  width: 18px;
  height: 18px;
}

.aic-msg {
  max-width: 85%;
  padding: 13px 18px;
  border-radius: 20px;
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* cevaptaki satır sonları korunur */
.aic-text {
  white-space: pre-wrap;
}

.aic-row--user .aic-msg {
  border-bottom-right-radius: 6px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-dark) 0%, var(--blue) 100%);
  box-shadow: 0 10px 24px -14px rgba(30, 159, 224, .8);
}

.aic-row--agent .aic-msg {
  border: 1px solid var(--aic-glass-line);
  border-top-left-radius: 6px;
  color: #eaf3fd;
  background: var(--aic-glass);
}

.aic-msg--error {
  border-color: rgba(232, 87, 63, .45);
  color: #ffd9d2;
  background: rgba(232, 87, 63, .1);
}

/* "yazıyor" noktaları */
.aic-typing {
  display: inline-flex;
  gap: 5px;
  padding: 18px 18px;
}

.aic-typing i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  animation: aic-dot 1.1s ease-in-out infinite;
}

.aic-typing i:nth-child(2) {
  animation-delay: .15s;
}

.aic-typing i:nth-child(3) {
  animation-delay: .3s;
}

/* cevabın altındaki yönlendirme butonları */
.aic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.aic-actions a,
.aic-actions button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.aic-actions a:hover,
.aic-actions button:hover {
  border-color: #fff;
  color: var(--navy-dark);
  background: #fff;
}

.aic-actions .icon {
  width: 16px;
  height: 16px;
}

/* ── Mesaj kutusu: altta, sütunla aynı genişlikte ── */
.aic-form {
  padding: 8px var(--aic-pad) 18px;
}

.aic-field {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 8px 8px 8px 20px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 22px;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.aic-field:focus-within {
  border-color: rgba(143, 195, 242, .7);
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 0 0 4px rgba(30, 159, 224, .18), 0 20px 50px -20px rgba(0, 0, 0, .6);
}

.aic-field textarea {
  flex-grow: 1;
  min-width: 0;
  max-height: 160px;
  margin: 0;
  padding: 11px 0;
  border: 0;
  outline: none;
  color: #fff;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  resize: none;
}

.aic-field textarea::placeholder {
  color: rgba(216, 233, 252, .55);
}

.aic-send {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 15px;
  color: var(--navy-dark);
  background: #fff;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.aic-send:hover:not(:disabled) {
  color: #fff;
  background: var(--accent);
  transform: translateY(-1px);
}

.aic-send:disabled {
  color: rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .1);
  cursor: default;
}

.aic-send .icon {
  width: 20px;
  height: 20px;
}

.aic-note {
  margin: 10px 0 0;
  color: rgba(216, 233, 252, .55);
  font-size: 11.5px;
  line-height: 1.4;
  text-align: center;
}

/* ── Odak ── */
.aic-hbtn:focus-visible,
.aic-send:focus-visible,
.aic-suggest button:focus-visible,
.aic-actions a:focus-visible,
.aic-actions button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* pencere açıkken arka sayfa kaymasın */
body.is-ai-open {
  overflow: hidden;
}

@keyframes aic-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes aic-dot {
  0%,
  60%,
  100% {
    opacity: .45;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

@keyframes aic-breathe {
  0%,
  100% {
    opacity: .35;
    transform: scale(1);
  }

  50% {
    opacity: .9;
    transform: scale(1.06);
  }
}

@media (max-width: 760px) {
  .aic-head {
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  }

  .aic-log {
    padding-top: 24px;
  }

  .aic-msg {
    max-width: 88%;
  }
}

/* telefonda kartlar tek sütun, kısa */
@media (max-width: 560px) {
  .aic-avatar {
    width: 38px;
    height: 38px;
  }

  .aic-orb {
    width: 60px;
    height: 60px;
    margin-bottom: 16px;
  }

  .aic-orb .icon {
    width: 30px;
    height: 30px;
  }

  .aic-intro > p {
    font-size: 14px;
  }

  .aic-intro .aic-suggest-label {
    margin-top: 24px;
  }

  .aic-suggest {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .aic-suggest button {
    min-height: 0;
    gap: 5px;
    padding: 13px 40px 13px 16px;
  }

  .aic-q {
    font-size: 14px;
  }

  .aic-go {
    top: 13px;
  }

  .aic-msg {
    font-size: 14.5px;
  }

  .aic-form {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  /* iOS odakta yakınlaştırmasın */
  .aic-field textarea {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-chat,
  .aic-panel,
  .aic-suggest button,
  .aic-go {
    transition: none;
  }

  .aic-row,
  .aic-orb::after,
  .aic-typing i {
    animation: none;
  }

  .aic-log {
    scroll-behavior: auto;
  }
}


/* ===== assets/css/src/04-components/70-trust.css ===== */
/* Güven bloğu ve doğrulama şeridi (.trust-*, .hero-verified, .hv-*). */

.trust-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #dfe7ef;
}

.trust-seal {
  display: grid;
  flex: 0 0 50px;
  place-items: center;
  font-size: 21px;
}

.trust-heading > div {
  min-width: 0;
  flex: 1;
}

.trust-kicker {
  display: block;
  margin-bottom: 2px;
}

.trust-heading h2 {
  line-height: 1.25;
}

.trust-heading p {
  margin: 3px 0 0;
}

.trust-status {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #b9d8ca;
}

.trust-status > .icon {
  font-size: 18px;
}

.trust-status > span {
  font-size: 9px;
  line-height: 1.35;
}

.trust-status strong {
  display: block;
  font-size: 11px;
}

.trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.trust-row > div {
  display: flex;
  align-items: flex-start;
  border-right: 1px solid #e1e8ef;
}

.trust-row > div:last-child {
  border-right: 0;
}

.trust-row > div:last-child {
  border-right-color: #edf2f8;
}

.trust-icon {
  display: grid;
  flex: 0 0 40px;
  place-items: center;
  border: 1px solid #c8daea;
}

.trust-icon .icon {
  font-size: 16px;
}

.trust-row strong {
  display: block;
  margin-bottom: 2px;
  line-height: 1.3;
}

.trust-row small {
  display: block;
  margin-top: 5px;
  font-size: 9px;
  font-weight: 600;
}

@media (max-width: 1050px) {
  .trust-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-row > div:nth-child(2) {
    border-right: 0;
  }

  .trust-row > div:nth-child(2) {
    border-right-color: #edf2f8;
  }

  .trust-row > div:nth-child(-n + 2) {
    border-bottom: 1px solid #e1e8ef;
  }
}

@media (max-width: 760px) {
  .trust-heading {
    align-items: flex-start;
    padding: 18px;
  }

  .trust-status {
    display: none;
  }

  .trust-heading h2 {
    font-size: 18px;
  }

  .trust-row {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
  }

  .trust-row > div {
    justify-content: flex-start;
    padding: 17px;
  }
}

@media (max-width: 430px) {
  .trust-seal {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .trust-heading p {
    display: none;
  }

  .trust-row {
    grid-template-columns: 1fr;
  }

  .trust-row > div {
    border-right: 0;
    border-bottom: 1px solid #e1e8ef;
  }

  .trust-row > div:last-child {
    border-bottom: 0;
  }
}

.trust-row {
  box-shadow: none;
}

.trust-panel {
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(12, 38, 74, .07)) drop-shadow(0 9px 16px rgba(12, 38, 74, .085)) drop-shadow(0 24px 38px rgba(12, 38, 74, .075));
}

.trust-heading {
  padding: 24px 28px;
  border-bottom-color: #edf2f8;
  background: linear-gradient(180deg, #fbfdff 0%, #fff 100%);
}

.trust-seal {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(140deg, #1a56a0 0%, var(--navy-dark) 100%);
  box-shadow: none;
}

.trust-kicker {
  font-weight: 800;
  text-transform: uppercase;
  color: var(--accent-dark);
  font-size: 10px;
  letter-spacing: 1.6px;
}

.trust-heading h2 {
  color: var(--navy-dark);
  font-size: 21px;
  letter-spacing: -.2px;
}

.trust-heading p {
  color: var(--muted);
  font-size: 12px;
}

.trust-status {
  padding: 10px 14px;
  border-color: #cbe9db;
  border-radius: 999px;
  color: #12694a;
  background: #f4fbf7;
}

.trust-status > span {
  white-space: nowrap;
  color: #6b8f7f;
}

.trust-status strong {
  color: #12694a;
}

.trust-row {
  border-color: transparent;
  background: #fff;
}

.trust-row > div {
  min-width: 0;
  gap: 12px;
  padding: 22px;
  border-right-color: #edf2f8;
  transition: background .2s ease;
}

.trust-row > div:hover {
  background: #fafcff;
}

.trust-icon {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-color: #dde7f4;
  border-radius: 12px;
  color: var(--navy-dark);
  background: #f2f7fc;
}

.trust-row .icon {
  color: var(--navy-dark);
}

.trust-row strong {
  color: var(--navy-dark);
  font-size: 13px;
}

.trust-row > div > span:last-child {
  line-height: 1.45;
  color: #64748b;
  font-size: 11px;
}

.trust-row small {
  color: #94a3b8;
}

@media (max-width: 1050px) {
  .trust-row > div:nth-child(-n + 2) {
    border-bottom-color: #edf2f8;
  }
}

@media (max-width: 430px) {
  .trust-row > div {
    border-bottom-color: #edf2f8;
  }

  .trust-row > div:last-child {
    border-bottom-color: #edf2f8;
  }
}

/* ── panel içindeki güven bloğu ── */
.hero-panel .trust-panel {
  margin-top: 16px;
  padding-top: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* ── panel içindeki güven bloğu ── */
.hero-panel .trust-heading {
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid rgba(12, 38, 74, .1);
  border-bottom: 1px solid rgba(12, 38, 74, .1);
  background: transparent;
}

.hero-panel .trust-seal {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  border-radius: 11px;
  font-size: 17px;
}

.hero-panel .trust-heading h2 {
  font-size: 15px;
  line-height: 1.3;
}

.hero-panel .trust-heading p {
  display: none;
}

/* "Verified Network" rozeti başlığın sağında */
.hero-panel .trust-heading > div {
  flex: 1 1 auto;
  min-width: 0;
}

.hero-panel .trust-status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 11px;
  border: 1px solid rgba(18, 105, 74, .22);
  border-radius: 999px;
  background: rgba(244, 251, 247, .85);
}

.hero-panel .trust-status > .icon {
  font-size: 14px;
}

/* çıplak "Continuously reviewed" metnini gizle, başlığı bırak */
.hero-panel .trust-status > span {
  font-size: 0;
  line-height: 0;
}

.hero-panel .trust-status strong {
  display: block;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.hero-panel .trust-kicker {
  font-size: 9px;
  letter-spacing: 1.4px;
}

.hero-panel .trust-row {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
  background: transparent;
}

.hero-panel .trust-row > div {
  gap: 10px;
  padding: 0;
  border: 0;
}

.hero-panel .trust-row > div:hover {
  background: transparent;
}

.hero-panel .trust-icon {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border-radius: 9px;
}

.hero-panel .trust-icon .icon {
  font-size: 14px;
}

.hero-panel .trust-row strong {
  margin-bottom: 1px;
  font-size: 12px;
}

.hero-panel .trust-row small {
  display: none;
}

@media (min-width: 1051px) {
  .hero-panel .trust-heading {
    padding: 16px 0;
  }

  .hero-panel .trust-heading h2 {
    font-size: 17px;
  }

  .hero-panel .trust-row {
    grid-template-columns: repeat(4, 1fr);
    gap: 0 26px;
    margin-top: 16px;
  }
}

@media (max-width: 1050px) {
  .hero-panel .trust-panel {
    position: relative;
    z-index: 1;
  }
}

/* Panelde güven başlığı satırını kaldır — yalnızca 4 kutucuk kalsın */
.hero-panel .trust-heading {
  display: none;
}

.hero-panel .trust-panel {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(12, 38, 74, .1);
}

.hero-panel .trust-row {
  margin-top: 0;
}

@media (min-width: 1051px) {
  .hero-panel .trust-panel {
    position: relative;
    z-index: 1;
  }
}

.hero-panel .trust-row > div:nth-child(1) {
  animation-delay: .62s;
}

.hero-panel .trust-row > div:nth-child(2) {
  animation-delay: .70s;
}

.hero-panel .trust-row > div:nth-child(3) {
  animation-delay: .78s;
}

.hero-panel .trust-row > div:nth-child(4) {
  animation-delay: .86s;
}

.hero-panel .trust-row > div {
  animation: fm-rise .6s cubic-bezier(.2, .7, .25, 1) both;
  transition: transform .3s cubic-bezier(.2, .7, .25, 1);
}

.hero-panel .trust-row > div:hover {
  transform: translateY(-2px);
}

/* ── güven satırı ── */
.hero-panel .trust-panel {
  border-top-color: rgba(255, 255, 255, .14);
}

/* ── güven satırı ── */
.hero-panel .trust-icon {
  transition: transform .32s cubic-bezier(.2, .7, .25, 1), background-color .32s ease, box-shadow .32s ease;
  border: 1px solid rgba(232, 87, 63, .62);
  background: rgba(255, 255, 255, .1);
}

.hero-panel .trust-icon .icon {
  color: rgba(255, 255, 255, .88);
}

.hero-panel .trust-row strong {
  color: #fff;
}

.hero-panel .trust-row > div > span:last-child {
  font-size: 10.5px;
  line-height: 1.35;
  color: rgba(126, 208, 255, .88);
}

.hero-panel .trust-row > div:hover .trust-icon {
  transform: none;
  border-color: rgba(232, 87, 63, .9);
  background: rgba(255, 255, 255, .2);
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .8);
}

.hero-panel .trust-row > div:hover .trust-icon .icon {
  color: var(--accent);
}

.hero-panel .trust-panel {
  filter: none;
  animation: fm-rise .7s cubic-bezier(.2, .7, .25, 1) .55s both;
  z-index: 1;
}

.hero-verified {
  margin-top: 14px;
  animation: fm-rise .7s cubic-bezier(.2, .7, .25, 1) .95s both;
}

/* üstteki arama paneliyle aynı genişlik */
.hv-badge {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(9, 26, 50, .5);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 4px 14px -12px rgba(0, 0, 0, .55);
  transition: border-color .3s ease, background-color .3s ease;
}

.hv-badge:hover {
  border-color: rgba(255, 255, 255, .24);
  background: rgba(9, 26, 50, .62);
}

.hv-badge > .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: #2fd08a;
}

.hv-badge strong {
  flex: 0 0 auto;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
}

.hv-sep {
  width: 1px;
  height: 14px;
  flex: 0 0 1px;
  background: rgba(255, 255, 255, .2);
}

/* kayan metin: kalan alanı doldurur, iki uçta yumuşak biter */
.hv-ticker {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}

.hv-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: fm-ticker 34s linear infinite;
}

.hv-item {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, .62);
  font-size: 11.5px;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* ayrac: tipografik nokta yerine yuvarlak baloncuk */
.hv-bullet {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  margin: 0 11px;
  border-radius: 50%;
  background: #1D97D9;
}

@media (max-width: 560px) {
  .hv-badge {
    padding: 8px 14px;
    gap: 8px;
  }

  .hv-badge strong {
    font-size: 11.5px;
  }
}

@media (max-width: 1050px) {
  .hero-verified {
    margin-bottom: 0;
  }
}


/* ===== assets/css/src/04-components/85-cine-card.css ===== */
/* Sinematik kart (.h-card: hastane + tedavi, .h-card--tabs: destinasyon + ülke) + kart slider'ı (.hs). Onaylı referanslar: popular-hospitals-cinematic.html, destination-cards.html. */

/* ══════════════════════════════════════════════════════════════
Kart — fotoğraf kartın tamamını kaplar, altta koyu lacivert geçiş.
Ölçü/renk/gölge referanstakiyle birebir; değiştirmeden önce referansa bakın.
Kullanım: findmed/home-hospitals ve findmed/home-treatments (slider).
══════════════════════════════════════════════════════════════ */
.h-card {
  --h-card-height: 400px;
  --h-card-radius: 22px;
  --h-card-scrim: 10, 20, 40;
  --h-card-navy: #162B53;
  --h-card-star: #F2C46B;
  --h-card-heart: #FF5A64;
  --h-card-focus: #3D8BD0;

  position: relative;
  height: var(--h-card-height);
  border-radius: var(--h-card-radius);
  overflow: hidden;
  background: #1A2638;
  box-shadow: 0 10px 22px rgba(22, 43, 83, .14);
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
}

.h-card__img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.h-card:hover .h-card__img {
  transform: scale(1.04);
}

/* okunabilirlik için alt karartma — açıklığını azaltmayın (kontrast ≥ 4.5:1) */
.h-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0 0;
  height: 72%;
  background: linear-gradient(to top, rgba(var(--h-card-scrim), .96) 0%, rgba(var(--h-card-scrim), .8) 42%, rgba(var(--h-card-scrim), 0) 100%);
}

.h-card__top {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  left: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* şerit ve rozet tıklamayı karttaki linke geçirir; yalnızca kalp yakalar */
  pointer-events: none;
}

.h-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
}

.h-card__badge--top {
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  background: rgba(var(--h-card-scrim), .6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* tek yıldız FMR mavisi: altın yalnız Exceptional bant rozetinde */
.h-card__badge--top svg {
  flex-shrink: 0;
  fill: #7ed0ff;
}

.h-card__badge--ad {
  color: var(--h-card-navy);
  background: rgba(255, 255, 255, .92);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.h-card__fav {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: #fff;
  background: rgba(var(--h-card-scrim), .5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  pointer-events: auto;
}

.h-card__fav svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  transition: transform .2s ease;
}

.h-card__fav[aria-pressed="true"] {
  color: var(--h-card-heart);
}

.h-card__fav[aria-pressed="true"] svg {
  fill: currentColor;
}

.h-card__fav:active svg {
  transform: scale(.85);
}

/* Gövde akışta kalır (kart altına yaslanır), böylece isim linkinin ::before
katmanı gövdeyi değil kartın TAMAMINI kaplar: kartın her yeri tıklanabilir. */
.h-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.h-card__loc {
  margin: 0 0 6px;
  color: #CAD5E3;
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.h-card__name {
  margin: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}

/* Kartın tamamı tıklanabilir: isim linki kartı kaplar */
.h-card__name a {
  color: inherit;
  text-decoration: none;
}

.h-card__name a::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
}

.h-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.h-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.h-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .13);
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

.h-card__chip--strong {
  font-weight: 700;
}

.h-card__chip--strong svg {
  flex-shrink: 0;
  fill: var(--h-card-star);
}

/* Verified çipi: yalnız yeşil kalkan (hero'daki .hv-badge ikonuyla aynı renk) */
.h-card__chip--verified {
  gap: 0;
  padding: 6px 7px;
}

.h-card__chip--verified .h-card__shield {
  fill: none;
  stroke: #2fd08a;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* FMR çipi: marka (yay + nokta) açık mavi, puan beyaz */
.h-card__chip--fmr {
  gap: 5px;
  font-variant-numeric: tabular-nums;
}

.h-card__chip--strong .h-card__fmr {
  width: 14px;
  height: 14px;
  fill: none;
  color: #7ed0ff;
}

.h-card__go {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 999px;
  color: var(--h-card-navy);
  background: #fff;
  transition: transform .25s ease;
}

.h-card__go svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.h-card:hover .h-card__go {
  transform: rotate(45deg);
}

/* Klavye odağı: isim linki odaklanınca çerçeve kartın etrafında */
.h-card__fav:focus-visible {
  outline: 3px solid var(--h-card-focus);
  outline-offset: 3px;
}

.h-card:has(.h-card__name a:focus-visible) {
  outline: 3px solid var(--h-card-focus);
  outline-offset: 3px;
}

.h-card__name a:focus-visible {
  outline: none;
}

@media (max-width: 860px) {
  .h-card {
    --h-card-height: 380px;
  }
}

@media (max-width: 560px) {
  .h-card {
    --h-card-height: 360px;
  }
}

/* ══════════════════════════════════════════════════════════════
Sekmeli kart (.h-card--tabs) — aynı fotoğraf/geçiş, kalp, konum satırı ve
↗ butonu; üstüne iki sekme ("Treatments | Culture" / "Treatments |
Destinations") ve listeler. Referans: destination-cards.html.
Kullanım: findmed/home-destinations, findmed/home-countries.
Liste alanı sabit yükseklikte: sekme değişince kart boyu değişmez.
══════════════════════════════════════════════════════════════ */
.h-card--tabs {
  --h-card-height: 500px;
  --h-card-ink: #0E2C56;
  --h-card-sky: #3D9BE0;
  --h-card-sky-soft: #8FC3F2;
  --h-card-gold: #F2C46B;

  box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
  /* kartta sekme ve bağlantılar var; kartın tamamı tek bağlantı değil */
  cursor: auto;
}

.h-card--tabs::after {
  height: 78%;
  background: linear-gradient(to top, rgba(var(--h-card-scrim), .96) 0%, rgba(var(--h-card-scrim), .88) 48%, rgba(var(--h-card-scrim), 0) 100%);
}

.h-card--tabs .h-card__fav {
  background: rgba(var(--h-card-scrim), .45);
}

.h-card--tabs .h-card__loc {
  display: flex;
  align-items: center;
  gap: 8px;
}

.d-card__flag {
  width: 24px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 3px;
  object-fit: cover;
}

.h-card--tabs .h-card__name {
  font-size: 24px;
  line-height: 1.2;
}

/* sekmeler: seçili olmayan, hastane kartındaki cam etiketlerle aynı */
.d-card__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.d-card__tab {
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .13);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.d-card__tab[aria-selected="true"] {
  border-color: #fff;
  color: var(--h-card-ink);
  background: #fff;
}

.d-card__list {
  display: flex;
  flex-direction: column;
  height: 120px;
  margin: -4px 0 0;
  padding: 0;
  list-style: none;
}

.d-card__list[hidden] {
  display: none;
}

.d-card__list li {
  display: flex;
  margin: 0;
}

.d-card__list a,
.d-card__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
}

.d-card__ic,
.d-card__chev {
  display: flex;
}

.d-card__ic {
  color: var(--h-card-sky-soft);
}

.d-card__list--places .d-card__ic {
  color: var(--h-card-gold);
}

.d-card__chev {
  color: rgba(255, 255, 255, .6);
}

.d-card__ic svg,
.d-card__chev svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* uzun adlar "…" ile kısalır */
.d-card__txt {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.d-card__list a:hover .d-card__txt {
  text-decoration: underline;
}

.d-card__guide {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.d-card__guide:hover {
  color: #fff;
  text-decoration: underline;
}

.h-card--tabs .h-card__go {
  color: var(--h-card-ink);
}

.d-card__tab:focus-visible,
.d-card__list a:focus-visible,
.d-card__guide:focus-visible {
  outline: 3px solid var(--h-card-sky);
  outline-offset: 3px;
}

/* Hover slaytı (data-hcard-photos, home.js): ek fotoğraflar kartın kendi fotoğrafının
üstünde yumuşak geçişle sırayla belirir. Üstteki ince şerit sırayı ve süreyi gösterir;
yalnız slayt çalışırken görünür. Geçiş süresi home.js'teki STEP ile uyumlu. */
.h-card__slide {
  opacity: 0;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}

.h-card__slide.is-on {
  opacity: 1;
}

.h-card__prog {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 16px;
  left: 16px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.h-card.is-sliding .h-card__prog {
  opacity: 1;
}

.h-card__prog i {
  flex: 1;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .32);
}

.h-card__prog i::after {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #fff;
}

.h-card__prog i.is-done::after {
  width: 100%;
}

.h-card__prog i.is-now::after {
  animation: h-card-prog var(--h-card-step, 1.4s) linear forwards;
}

@keyframes h-card-prog {
  to {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .h-card--tabs {
    --h-card-height: 480px;
    padding: 18px;
  }

  .h-card--tabs .h-card__name {
    font-size: 26px;
  }
}

/* ══════════════════════════════════════════════════════════════
Kart slider'ı — CSS scroll-snap; oklar/noktalar home.js'te.
Görünen kart sayısı, sağdaki "peek" ve boşluk tek yerden:
--visible, --peek, --gap. Başlıktaki oklar .slider-arrow
kurallarından (90-slider.css) gelir.
══════════════════════════════════════════════════════════════ */
/* --bleed: kaydırma alanı (overflow-x) içeriği her yönde kendi kutusunda kırpar;
kart gölgesi (en büyüğü .h-card--tabs: 0 14px 32px) kesilmesin diye alan solda ve
üstte bu kadar genişletilir, negatif margin ile kartların yeri değişmez.
--bleed-r: sağda ek pay. Görünür alan container'ın sağ kenarında biter (max-width
dışına taşmaz); "peek" kartı container'ın İÇİNDE görünür. Sonraki kartın
görünmediği düzende (peek 0) gap kadar verilir: son kartın gölgesi kesilmez,
sıradaki kart görünür hale gelmez. */
.hs {
  --visible: 4;
  --peek: 64px;
  --gap: 24px;
  --bleed: 32px;
  --bleed-r: 20px;
  /* kenar geçişi (mask): sol kenarda --bleed, sağda "peek" boyunca yumuşak solma.
     Görünür içerik container'ın sağ kenarında biter; son karta gelince (data-hs-end)
     sağ geçiş yalnız gölge payına (--bleed-r) iner, son kart soluklaşmaz. */
  --mask-a: calc(100% - var(--bleed-r) - var(--peek));
  --mask-b: calc(100% - var(--bleed-r));
}

.hs[data-hs-end] {
  --mask-a: calc(100% - var(--bleed-r));
  --mask-b: 100%;
}

/* flow-root: içteki kaydırma alanının negatif üst margin'i dışarı taşıp başlığın
alt boşluğunu yemesin (yoksa slider 24px yukarı kayar, başlıktaki oklar
"View all" butonunun altına girer). Kartların yeri değişmez. */
.hs__viewport {
  display: flow-root;
  margin-right: calc(-1 * var(--bleed-r));
  margin-left: calc(-1 * var(--bleed));
}

.hs__track {
  --card-w: calc((100% - var(--peek) - (var(--visible) - 1) * var(--gap)) / var(--visible));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--card-w);
  gap: var(--gap);
  /* üstte eskisi gibi 8px boşluk; gölge payı negatif margin ile dengelenir */
  margin: calc(8px - var(--bleed)) 0 0;
  padding: var(--bleed) var(--bleed-r) 48px var(--bleed);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--bleed);
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  /* kaydırma alanının kenarında kart ve gölgesi sert bir dikey çizgiyle kesilmesin;
     solda önceki kartın gölge payına düşen ucu (bleed - gap) tamamen gizli */
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--bleed) - var(--gap)), #000 var(--bleed), #000 var(--mask-a), transparent var(--mask-b));
  mask-image: linear-gradient(90deg, transparent calc(var(--bleed) - var(--gap)), #000 var(--bleed), #000 var(--mask-a), transparent var(--mask-b));
}

.hs__track::-webkit-scrollbar {
  display: none;
}

.hs__track > li {
  margin: 0;
  scroll-snap-align: start;
}

.hs__dots {
  display: flex;
  justify-content: center;
  margin-top: -16px;
}

.hs__dots[hidden] {
  display: none;
}

.hs__dot {
  display: grid;
  place-items: center;
  width: 36px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.hs__dot span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #CFDAE8;
  transition: width .3s ease, background-color .3s ease;
}

.hs__dot[aria-current="true"] span {
  width: 28px;
  background: #3D8BD0;
}

.hs__dot:focus-visible {
  outline: 3px solid #3D8BD0;
  outline-offset: -3px;
  border-radius: 12px;
}

@media (max-width: 1100px) {
  .hs {
    --visible: 3;
  }
}

@media (max-width: 860px) {
  .hs {
    --visible: 2;
    --peek: 40px;
  }
}

@media (max-width: 560px) {
  .hs {
    --visible: 1;
    --peek: 56px;
    --gap: 16px;
  }

  /* mobilde kaydırma + noktalar yeterli */
  .hs .slider-arrow {
    display: none;
  }
}

/* Sekmeli kart slider'ı (destinasyon + ülke): referanstaki kırılımlar (4 / 3 / 2 + 48px / 1 + 64px) */
.hs--tabs {
  --peek: 0px;
}

/* sıradaki kart görünmediğinde (peek 0) sağ geçiş yalnız gölge payında */
@media (min-width: 961px) {
  .hs--tabs {
    --mask-a: calc(100% - var(--bleed-r));
    --mask-b: 100%;
  }
}

@media (max-width: 1180px) {
  .hs--tabs {
    --visible: 3;
  }
}

@media (max-width: 960px) {
  .hs--tabs {
    --visible: 2;
    --peek: 48px;
  }
}

@media (max-width: 640px) {
  .hs--tabs {
    --visible: 1;
    --peek: 64px;
    --gap: 14px;
  }
}

/* dar ekranda sağ pay sayfa kenar boşluğunu geçmesin (container: 100% - 28px) */
@media (max-width: 760px) {
  .hs {
    --bleed-r: 14px;
  }
}

/* telefonda sıradaki kart ekran kenarına kadar görünür: sağda geçiş yok */
@media (max-width: 560px) {
  .hs,
  .hs[data-hs-end] {
    --mask-a: 100%;
    --mask-b: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs__track {
    scroll-behavior: auto;
  }

  .h-card__img,
  .h-card__go,
  .h-card__fav svg,
  .hs__dot span,
  .d-card__tab {
    transition: none;
  }
}


/* ===== assets/css/src/04-components/90-slider.css ===== */
/* Anasayfa slider'larının ok butonları (.slider-arrow); kaydırma alanı ve noktalar 85-cine-card.css (.hs). */

.treatment-slider {
  position: relative;
}

/* Ok butonlarının slider üstündeki yüksekliği. Değişkenle tanımlı ki
aşağıdaki .slider-arrow kuralıyla kaynak sırası çakışmasın. */
.listing-cards {
  --arrow-lift: 23px;
}

@media (min-width: 901px) {
  /* geniş ekranda oklar slidera yakın ama başlık bloğunun içinde kalacak
  kadar yukarıda (başlığın alt kenarı slider'ın 24px üstünde). */
  .listing-cards {
    --arrow-lift: 26px;
  }
}

/* Renkler değişkenle: açık zeminde (Hospitals, Treatments) beyaz buton +
belirgin mavi çerçeve, lacivert bölümlerde (Destinations, Countries) yarı
saydam beyaz. Hover rengi .btn-primary ile aynı lacivert (--navy); lacivert
bölümlerde lacivert buton zeminde kaybolacağı için tersi: beyaz zemin, lacivert ok. */
.slider-arrow {
  --arrow-bg: #fff;
  --arrow-line: #bcd3ec;
  --arrow-ink: var(--navy);
  --arrow-hover-bg: var(--navy);
  --arrow-hover-ink: #fff;
  --arrow-active-bg: var(--navy-dark);
  position: absolute;
  z-index: 3;
  top: 50%;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--arrow-line);
  border-radius: var(--radius);
  color: var(--arrow-ink);
  background: var(--arrow-bg);
  box-shadow: 0 2px 6px rgba(12, 38, 74, .08);
  cursor: pointer;
  transform: translateY(-50%);
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.slider-arrow svg {
  width: 18px;
  height: 18px;
}

.slider-arrow:hover:not(:disabled) {
  border-color: var(--arrow-hover-bg);
  color: var(--arrow-hover-ink);
  background: var(--arrow-hover-bg);
  box-shadow: 0 8px 18px -8px rgba(12, 38, 74, .55);
}

.slider-arrow:active:not(:disabled) {
  border-color: var(--arrow-active-bg);
  background: var(--arrow-active-bg);
}

.slider-arrow:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.slider-arrow:disabled {
  opacity: .35;
  box-shadow: none;
  cursor: default;
}

/* lacivert zeminli bölümler */
:is(#destinations, #countries) .slider-arrow {
  --arrow-bg: rgba(255, 255, 255, .1);
  --arrow-line: rgba(255, 255, 255, .3);
  --arrow-ink: #fff;
  --arrow-hover-bg: #fff;
  --arrow-hover-ink: var(--navy);
  --arrow-active-bg: var(--accent-soft);
  box-shadow: none;
}

:is(#destinations, #countries) .slider-arrow:focus-visible {
  outline-color: #fff;
}

.slider-prev {
  left: -56px;
}

.slider-next {
  right: -56px;
}

@media (max-width: 1480px) {
  .slider-prev {
    left: 10px;
  }

  .slider-next {
    right: 10px;
  }
}

@media (max-width: 760px) {
  .slider-arrow {
    width: 34px;
    height: 34px;
  }
}

/* ok butonları başlık hizasına */
.listing-cards .treatment-slider .slider-arrow {
  top: auto;
  bottom: calc(100% + var(--arrow-lift));
  width: 34px;
  height: 34px;
  transform: none;
}

.listing-cards .treatment-slider .slider-prev {
  right: 42px;
  left: auto;
}

.listing-cards .treatment-slider .slider-next {
  right: 0;
}


/* ===== assets/css/src/04-components/95-accordion.css ===== */
/* Akordeon (.accordion). */

.accordion {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
}

.accordion details {
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  transition: background-color .4s ease;
}

.accordion details[open] {
  background: var(--soft);
}

.accordion details:last-child {
  border-bottom: 0;
}

.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary .icon {
  font-size: 10px;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.accordion details[open] summary .icon {
  transform: rotate(180deg) scale(1.08);
}

.accordion details p {
  margin: 0;
  padding: 0 20px 15px 0;
  color: var(--muted);
  font-size: 12px;
}


/* ===== assets/css/src/04-components/96-breadcrumbs.css ===== */
/* Ekmek kırıntısı (.crumbs). */

/* ── breadcrumb: meta chip ──
Liste tek bir cam hapin icinde durur; hero sinyal seridiyle
ayni malzeme (blur + ince kenarlik), bir tik daha kucuk. */
.crumbs {
  margin: 0;
  text-align: center;
}

/* liste yalnizca hizalayici: her ogenin kendi hapi var */
.crumbs ol {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* cerceve yok: yalin metin + aradaki ok */
.crumbs li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .66);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .3px;
  transition: color .3s ease;
}

/* ayrac: haplarin ARASINDA duran ok (chip disinda konumlanir) */
.crumbs li + li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -14px;
  width: 5px;
  height: 5px;
  border-top: 1.6px solid rgba(126, 208, 255, .65);
  border-right: 1.6px solid rgba(126, 208, 255, .65);
  transform: translateY(-50%) rotate(45deg);
}

.crumbs li:has(a):hover {
  color: #fff;
}

.crumbs a {
  display: inline-flex;
  align-items: center;
  color: inherit;
  transition: color .25s ease;
}

.crumbs li:hover a {
  color: #fff;
}

/* bulunulan sayfa: metin beyaz */
.crumbs li[aria-current="page"] {
  color: #fff;
}

@media (max-width: 760px) {
  .crumbs ol {
    gap: 19px;
  }

  .crumbs li {
    font-size: 11px;
  }

  .crumbs li + li::before {
    left: -12px;
  }
}


/* ===== assets/css/src/04-components/97-location-prompt.css ===== */
/* Konum izni kartı (.loc-prompt): siteye girince sol altta açılan küçük kart; mobilde alt sayfa. */

.loc-prompt {
  position: fixed;
  z-index: 9000;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: min(400px, calc(100vw - 40px));
  padding: 18px 44px 18px 18px;
  border: 1px solid var(--card-line);
  border-radius: 16px;
  color: var(--text);
  background: #fff;
  box-shadow: 0 18px 40px -12px rgba(12, 38, 74, .28), 0 2px 6px rgba(12, 38, 74, .06);
  font-family: "Plus Jakarta Sans", sans-serif;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
}

.loc-prompt[hidden] {
  display: none;
}

.loc-prompt.is-in {
  opacity: 1;
  transform: none;
}

.loc-prompt__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  color: var(--accent-dark);
  background: var(--accent-soft);
}

.loc-prompt__icon svg,
.loc-prompt__close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.loc-prompt__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.loc-prompt__title {
  margin: 0;
  color: var(--navy-dark);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.loc-prompt__text {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.loc-prompt__text a {
  color: var(--accent-dark);
  text-decoration: underline;
}

.loc-prompt__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.loc-prompt__actions button {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.loc-prompt__allow {
  border: 1px solid var(--accent);
  color: #fff;
  background: var(--accent);
}

.loc-prompt__allow:hover {
  border-color: var(--accent-dark);
  background: var(--accent-dark);
}

.loc-prompt__deny {
  border: 1px solid var(--card-line);
  color: var(--navy-dark);
  background: #fff;
}

.loc-prompt__deny:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.loc-prompt__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.loc-prompt__close:hover {
  color: var(--navy-dark);
  background: var(--surface);
}

.loc-prompt :focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* telefon: ekranın altında tam genişlik, dokunma alanları 44px */
@media (max-width: 560px) {
  .loc-prompt {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    padding: 16px 44px 16px 16px;
  }

  .loc-prompt__actions button {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 0 12px;
    white-space: nowrap;
  }

  .loc-prompt__close {
    width: 44px;
    height: 44px;
    top: 4px;
    right: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loc-prompt {
    transition: none;
  }
}


/* ===== assets/css/src/05-home/10-hero.css ===== */
/* Anasayfa hero: sahne, metin, puan satırı, cam panel, sinyal şeridi, hareketler (.hero*, .hs-*). */

.hero-stage {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.hero-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("https://findmed.odopreview.com/wp-content/themes/findmed/assets/img/hp-2.webp") center center / cover no-repeat;
  pointer-events: none;
}

.hero-stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
}

.hero {
  position: relative;
  z-index: 2;
  min-height: 350px;
  overflow: visible;
  background: transparent;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: transparent;
}

.hero::after {
  content: none;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-copy {
  width: 50%;
  max-width: 680px;
}

.hero-copy h1 {
  color: var(--navy-dark);
}

.hero-copy > p {
  margin: 14px 0 16px;
  color: #40536e;
  font-size: 15px;
}

.hero-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.avatars {
  display: flex;
  margin-right: 5px;
}

.avatars img {
  width: 30px;
  height: 30px;
  margin-left: -7px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(20, 65, 125, .12);
  object-fit: cover;
}

.avatars img:first-child {
  margin-left: 0;
}

.hero-rating strong {
  color: var(--navy-dark);
}

.stars {
  font-size: 12px;
  letter-spacing: 1px;
}

.hero-rating .stars {
  font-weight: 800;
  letter-spacing: 1.5px;
  line-height: 1;
}

.hero-rating small {
  color: #40536e;
}

@media (max-width: 1050px) {
  .hero-copy {
    max-width: 560px;
  }
}

@media (max-width: 760px) {
  .hero {
    min-height: 320px;
    padding-bottom: 60px;
    background-position: 63% 42%;
  }

  .hero-content {
    padding-top: 38px;
  }

  .hero-copy {
    width: min(100%, 450px);
  }
}

@media (max-width: 430px) {
  .hero {
    min-height: 300px;
    padding-bottom: 50px;
  }

  .hero-copy > p {
    font-size: 14px;
  }

  .hero-rating {
    flex-wrap: wrap;
  }

  .hero-rating small {
    width: 100%;
    margin-left: 100px;
  }
}

.hero {
  background-color: transparent;
  background-image: none;
}

.hero::before {
  background: transparent;
}

h1 em {
  font-style: normal;
  color: var(--accent);
}

.stars {
  color: #ffc107;
}

@media (max-width: 760px) {
  .hero::before {
    background: transparent;
  }
}

/* ── Hero başlığı: daha büyük ve kalın ── */
.hero-copy h1 {
  color: #fff;
  font-size: clamp(36px, 4.2vw, 50px);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.08;
}

/* ── Hero başlığı: daha büyük ve kalın ── */
.hero-copy h1 em {
  color: #fff;
}

.hero-copy > p {
  margin: var(--hero-gap) 0 0;
}

.hero-rating {
  margin: var(--hero-gap) 0 0;
}

.hero-stage {
  margin-top: -78px;
  padding-top: 78px;
}

@media (max-width: 760px) {
  .hero-stage {
    margin-top: -66px;
    padding-top: 66px;
  }
}

@media (min-width: 1051px) {
  /* metin üstte, arama paneli altta tam genişlikte */
  .hero-content {
    display: block;
  }

  .hero-copy {
    width: auto;
    max-width: 760px;
  }
}

/* ── Hero puan satırı: bir tık büyük ── */
.hero-rating .avatars img {
  width: 36px;
  height: 36px;
  margin-left: -9px;
}

.hero-rating strong {
  font-size: 21px;
}

.hero-rating .stars {
  font-size: 18px;
}

.hero-rating small {
  font-size: 14.5px;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
Hero metni: ortalı, daha büyük başlık, %70 / mobilde %96 genişlik
══════════════════════════════════════════════════════════════ */
.hero-copy {
  width: 96%;
  max-width: none;
  margin: 0 auto;
  text-align: center;
}

.hero-rating {
  justify-content: center;
}

@media (min-width: 1051px) {
  .hero-copy {
    width: 70%;
    max-width: none;
  }
}

/* hero metni: başlık bir tık küçük ama daha geniş, açıklama daha da geniş */
.hero-copy > p {
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
}

@media (min-width: 1051px) {
  .hero-copy {
    width: 82%;
  }
}

.hero-copy > p,
.hero-rating {
  display: none;
}

/* panel taşabilsin */
.hero-stage {
  overflow: visible;
}

.hero-content {
  display: flex;
}

.hero-copy {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-height: clamp(100px, 12vh, 160px);
}

.hero {
  padding-bottom: 0;
}

@media (min-width: 1051px) {
  /* fotoğraf panelin arkasında kalsın, kutucuk çizgisinde bitsin */
  .hero-stage::before,
  .hero-stage::after {
    inset: 0 0 112px;
  }
}

@media (max-width: 1050px) {
  .hero-content {
    padding-top: 24px;
  }

  .hero-stage::before,
  .hero-stage::after {
    inset: 0 0 166px;
  }
}

/* ── 7: hero bandı + ilk bölüm tek parça koyu blok ────────────
Arama paneli beyaz boşlukta değil, lacivert üzerinde dursun.
Fotoğraf ve örtü sahnenin tamamını kaplar; örtü alta doğru
yeniden koyulaşıp bir sonraki bölümün lacivertine bağlanır. */
.hero-stage {
  padding-bottom: 56px;
  background: var(--navy-dark);
}

/* ── 7: hero bandı + ilk bölüm tek parça koyu blok ────────────
Arama paneli beyaz boşlukta değil, lacivert üzerinde dursun.
Fotoğraf ve örtü sahnenin tamamını kaplar; örtü alta doğru
yeniden koyulaşıp bir sonraki bölümün lacivertine bağlanır. */
.hero-stage::before,
.hero-stage::after {
  inset: 0;
}

.hero-stage::after {
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 26, 48, .94) 0%, rgba(14, 44, 86, .72) 22%, rgba(14, 44, 86, .58) 44%, rgba(11, 35, 68, .88) 70%, var(--navy-dark) 93%);
}

/* ── 9: hero dikeyde nefes alsın ────────────────────────────
Başlık header'a, arama alanı da başlığa yapışık duruyordu. */
.hero-stage {
  padding-bottom: 64px;
}

/* ── 9: hero dikeyde nefes alsın ────────────────────────────
Başlık header'a, arama alanı da başlığa yapışık duruyordu. */
.hero-content {
  flex-direction: column;
  padding-top: 44px;
}

.hero-copy {
  flex-direction: column;
  margin-bottom: 18px;
}

@media (min-width: 1051px) {
  .hero {
    padding-bottom: 20px;
  }
}

/* fotoğraf çok yavaşça yaklaşır — sahne donuk kalmasın */
/* Hareketli fotoğraf kendi kutusunda kirpilan bir katmanda durur.
.hero-stage'in overflow'u bilerek visible (panel taşabilsin) olduğu
için, zoom doğrudan ::before'a verilince sayfa genişliyordu. */
.hero-stage:has(.hero-bg)::before {
  display: none;
}

.hero-bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("https://findmed.odopreview.com/wp-content/themes/findmed/assets/img/hero-bg.webp") center center / cover no-repeat;
  transform-origin: 50% 45%;
  will-change: transform;
  animation: fm-kenburns 26s ease-in-out infinite alternate;
}

/* örtünün üstünde gezinen yumuşak ışık */
.hero::before {
  background-image: radial-gradient(closest-side, rgba(56, 178, 235, .34) 0%, rgba(56, 178, 235, 0) 100%), radial-gradient(closest-side, rgba(126, 208, 255, .26) 0%, rgba(126, 208, 255, 0) 100%);
  background-repeat: no-repeat;
  background-size: 64% 82%, 54% 70%;
  background-position: 18% 12%, 82% 4%;
  will-change: background-position, opacity;
  animation: fm-aurora 18s ease-in-out infinite;
}

/* içerik kademeli girer */
.hero-copy h1 {
  animation: fm-title-in .9s cubic-bezier(.2, .7, .25, 1) both;
}

@media (max-width: 1050px) {
  /* Telefonlarda alt kenarda guvenli alan: arama paneli/serit
  ekranin en altina yapismasin, sistem cubugu ustune gelmesin.
  env() destegi yoksa 0px'e duser, sabit 52px yine kalir. */
  .hero-stage {
    padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  }

  .hero {
    padding-bottom: 0;
  }
}

@media (min-width: 1051px) {
  /* metin üstte, arama paneli altta tam genişlikte */
  .hero-content {
    --hero-gap: 48px;
    padding-top: 104px;
  }

  .hero-copy {
    min-width: 0;
    min-height: clamp(170px, 21vh, 280px);
    margin-bottom: 34px;
  }

  /* baslik masaustunde bir tik daha buyuk, satirlar biraz daha ferah */
  .hero-copy h1 {
    font-size: clamp(44px, 4.2vw, 62px);
    letter-spacing: -1.4px;
    line-height: 1.18;
  }
}

/* ══════════════════════════════════════════════════════════════
20: Hero tam ekran yüksekliği
Sahne, üst şeridin altından ekranın altına kadar uzanır.
Üst şerit ≤760px'te gizlendiği için orada çıkarma yapılmaz.
svh kullanılıyor: mobil tarayıcı çubuğu açılıp kapanınca
yükseklik zıplamaz.
══════════════════════════════════════════════════════════════ */
.hero-stage {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 37px);
}

.hero-stage > .hero {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.hero-stage .hero-content {
  flex: 1 1 auto;
}

@media (max-width: 760px) {
  .hero-stage {
    min-height: 100svh;
  }

  /* ══════════════════════════════════════════════════════════════
  26: Mobilde hero başlığı daha büyük (hero artık tam ekran,
  başlığın etrafında yeterli alan var)
  ══════════════════════════════════════════════════════════════ */
  .hero-copy h1 {
    line-height: 1.12;
  }
}

@media (max-width: 760px) {
  /* ════════════════════════════════════════════════════════════
  59: Hero basligi mobilde bir tik kucuk
  46px'te baslik dort satira tasip arama panelini asagi itiyordu.
  ════════════════════════════════════════════════════════════ */
  .hero-copy h1 {
    font-size: 43px;
    letter-spacing: -1.1px;
  }
}

@media (max-width: 430px) {
  .hero-copy h1 {
    font-size: 40px;
    letter-spacing: -1px;
  }
}


/* ===== assets/css/src/05-home/25-featured-partner.css ===== */
/* Öne çıkan partner (sponsorlu hastane alanı, .fp*): "Popular Hospitals" altındaki sinematik banner. Onaylı referans: featured-partner.html. HTML: includes/featured-partner.php. */

/* ══════════════════════════════════════════════════════════════
Reklam engelleyiciler "ad", "ads", "advert", "banner", "sponsor"
geçen sınıf/ID/dosya adlarını gizler; bu yüzden adlar nötr (.fp*).
Sinematik kartlarla aynı dil: lacivert geçiş (10,20,40), cam
istatistik kutuları, beyaz buton. Ölçü/renkleri değiştirmeden önce
referansa bakın.
══════════════════════════════════════════════════════════════ */
.fp-slot {
  display: block;
  margin-top: var(--section-pad, 78px);
}

.fp {
  --fp-scrim: 10, 20, 40;
  --fp-ink: #0E2C56;
  --fp-navy: #0E2447;
  --fp-muted: #C9D6EA;
  --fp-eyebrow: #CAD5E3;
  --fp-gold: #F2C46B;
  --fp-sky: #3D9BE0;

  position: relative;
  min-height: 460px;
  border-radius: 28px;
  overflow: hidden;
  color: #fff;
  background: var(--fp-navy);
  box-shadow: 0 24px 50px rgba(14, 44, 86, .18);
  isolation: isolate;
  font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
}

.fp__img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

/* yazıların altındaki koyu geçiş — hafifletmeyin (kontrast ≥ 4.5:1) */
.fp::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--fp-scrim), .96) 0%, rgba(var(--fp-scrim), .86) 40%, rgba(var(--fp-scrim), .15) 72%, rgba(var(--fp-scrim), 0) 100%);
}

/* "Sponsored" etiketi: her ekranda görünür, panelden kaldırılamaz */
.fp__label {
  position: absolute;
  z-index: 2;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fp__tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--fp-ink);
  background: rgba(255, 255, 255, .92);
  font-size: 11px;
  font-weight: 800;
  line-height: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* görünen daire 26px, tıklama alanı 44px */
.fp__why {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -8px -8px -8px 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  color: #fff;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.fp__why span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(var(--fp-scrim), .55);
}

.fp__ic {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fp__pop {
  position: absolute;
  z-index: 3;
  top: 64px;
  right: 24px;
  width: min(320px, calc(100% - 48px));
  padding: 16px 18px;
  border-radius: 16px;
  color: var(--fp-ink);
  background: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
  font-size: 14px;
  line-height: 1.5;
}

.fp__pop[hidden] {
  display: none;
}

.fp__pop b {
  display: block;
  margin-bottom: 4px;
}

/* sağ alt rozet: Verified by FindMed + iki haneli FMR (hero'daki .hv-badge dili) */
.fp__badge {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px 9px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(9, 26, 50, .55);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 4px 14px -12px rgba(0, 0, 0, .55);
  font-size: 12.5px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}

.fp__verified {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.fp__verified .icon {
  width: 15px;
  height: 15px;
  color: #2fd08a;
}

.fp__sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .22);
}

.fp__fmr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fp__fmr .icon {
  width: 15px;
  height: 15px;
  color: #7ed0ff;
}

.fp__fmr b {
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.fp__body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  width: min(600px, 58%);
  min-height: 460px;
  padding: 52px 0 52px 56px;
}

.fp__group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #8fd0f7;
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.fp__group::before {
  content: "";
  width: 22px;
  height: 2px;
  flex: 0 0 22px;
  border-radius: 2px;
  background: var(--spark);
}

.fp__logo {
  display: block;
  width: auto;
  max-width: 220px;
  height: 36px;
  object-fit: contain;
  object-position: left center;
}

.fp__name {
  margin: -2px 0 0;
  color: #fff;
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.fp__desc {
  margin: 0;
  max-width: 50ch;
  color: var(--fp-muted);
  font-size: 15.5px;
  line-height: 1.65;
}

.fp__cta {
  display: flex;
  padding-top: 6px;
}

/* tek buton: beyaz, okla; ikinci (teklif) buton kaldırıldı */
.fp__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  color: var(--fp-ink);
  background: #fff;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease;
}

.fp__btn .icon {
  width: 17px;
  height: 17px;
  transition: transform .2s ease;
}

.fp__btn:hover {
  color: var(--fp-ink);
  background: #EAF2FB;
}

.fp__btn:hover .icon {
  transform: translateX(3px);
}

.fp__why:focus-visible,
.fp__btn:focus-visible {
  outline: 3px solid var(--fp-sky);
  outline-offset: 3px;
}

/* ── Tablet (701–1100px): daha geniş geçiş, yazı alanı %78, istatistikler 2×2 ── */
@media (max-width: 1100px) {
  .fp::before {
    background: linear-gradient(90deg, rgba(var(--fp-scrim), .96) 0%, rgba(var(--fp-scrim), .9) 55%, rgba(var(--fp-scrim), .35) 85%, rgba(var(--fp-scrim), .2) 100%);
  }

  .fp__body {
    width: min(640px, 78%);
    padding: 44px 0 44px 44px;
  }
}

/* ── Telefon (≤ 700px): fotoğraf üstte (240px), içerik altta lacivert zeminde ── */
@media (max-width: 700px) {
  .fp {
    min-height: 0;
    border-radius: 24px;
  }

  .fp__img {
    position: relative;
    inset: auto;
    display: block;
    height: 240px;
  }

  .fp::before {
    inset: 0 0 auto 0;
    height: 240px;
    background: linear-gradient(to top, rgba(var(--fp-scrim), 1) 0%, rgba(var(--fp-scrim), .35) 45%, rgba(var(--fp-scrim), 0) 75%);
  }

  .fp__label {
    top: 16px;
    right: 16px;
  }

  .fp__pop {
    top: 56px;
    right: 16px;
    width: min(320px, calc(100% - 32px));
  }

  .fp__badge {
    top: 190px;
    right: auto;
    bottom: auto;
    left: 16px;
    gap: 10px;
    padding: 8px 14px 8px 11px;
    font-size: 12px;
  }

  .fp__body {
    width: auto;
    min-height: 0;
    padding: 20px 20px 24px;
    gap: 14px;
  }

  .fp__name {
    margin: 0;
    font-size: 30px;
  }

  .fp__desc {
    font-size: 14.5px;
  }

  .fp__btn {
    width: 100%;
  }
}


/* ===== assets/css/src/05-home/30-most-preferred.css ===== */
/* Most Searched · What Patients Look For (.ms): kategori listesi + fotoğraflı panel. Tasarım: most-searched-E.html, site ölçeğine uyarlandı. */

/* ══════════════════════════════════════════════════════════════
Bölüm kabuğu sitenin ortak yapısıdır: .section boşlukları, .container
genişliği, .section-heading başlığı ve "View all" butonu; koyu zemin ve
başlık renkleri 03-layout/20-sections.css'te Destinations/Countries ile
birlikte. Burada yalnızca gövde (liste + panel) durur.

En önemli kural: masaüstünde iki sütun AYNI yükseklikte (--ms-height);
sol satırlar ve sağdaki 2×2 ülke kutuları bu yüksekliği eşit paylaşır.
══════════════════════════════════════════════════════════════ */
.ms {
  --ms-panel: #13305A;
  --ms-ink: #0E2C56;
  --ms-soft: #8FC3F2;
  --ms-muted: #9FB3D1;
  --ms-dim: #7F96B8;
  --ms-line: rgba(255, 255, 255, .08);
  --ms-line-2: rgba(255, 255, 255, .1);
  --ms-height: 600px;
}

.ms__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ms__body :focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Zemin: eski "What Patients Look For" deseni (dünya haritası çizimi) +
lacivert katmanlar; alttaki hasta hikâyeleri bölümüyle aynı görsel. */
.section#popular-searches {
  background-color: var(--navy-dark);
  background-image: radial-gradient(120% 90% at 15% 0%, rgba(30, 159, 224, .16), transparent 55%), linear-gradient(100deg, rgba(14, 44, 86, .74) 0%, rgba(14, 44, 86, .54) 40%, rgba(14, 44, 86, .4) 100%), url("https://findmed.odopreview.com/wp-content/themes/findmed/assets/img/whats-bg-2.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* "View all" okların üstüne değil başlığın altına hizalı (bu bölümde başlık oku yok) */
@media (min-width: 901px) {
  #popular-searches .section-heading > a.sh-all {
    margin-bottom: 0;
  }
}

/* ── Gövde: iki sütun da --ms-height ──
Yükseklik --ms-height'tan başlar; bir kategorinin içeriği sığmazsa (dar
masaüstü, uzun adlar) satır büyür ve iki sütun grid ile BİRLİKTE uzar.
Paneller aynı hücrede üst üste durduğu için yüksekliği en uzun kategori
belirler: kategori değişince sütunlar hizada kalır, sayfa zıplamaz. */
.ms__body {
  display: grid;
  color: #fff;
  grid-template-columns: 480px minmax(0, 1fr);
  gap: 24px;
  min-height: var(--ms-height);
}

.ms__tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ms__tab {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 0;
  padding: 0 18px;
  border: 1px solid var(--ms-line);
  border-radius: 16px;
  color: #fff;
  background: rgba(255, 255, 255, .03);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.ms__tab:hover {
  background: rgba(255, 255, 255, .06);
}

/* Sıra numaraları için Plus Jakarta Sans ExtraBold'un yalnızca 0–9 kesiti; üst üste
binen konturları birleştirilmiş. Google'ın dosyasında rakamlar üst üste binen parçalardan
oluştuğu için text-stroke bu iç birleşim yerlerini de çiziyordu (ör. 4 ve 5'in içinde çizgi).
Üretim: fontTools subset (text=0123456789, özellikler tnum+lnum) + removeOverlaps. */
@font-face {
  font-family: "FM Num";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("https://findmed.odopreview.com/wp-content/themes/findmed/assets/fonts/pjs-num-800.woff2") format("woff2");
  unicode-range: U+0030-0039;
}

/* Sıra numarası: içi boş (yalnızca çizgi), üstüne gelince mavi çizgi,
seçilince maviyle dolar. Önceki "What Patients Look For" tasarımındaki gibi. */
.ms__tab-num {
  width: 48px;
  flex-shrink: 0;
  color: transparent;
  font-family: "FM Num", "Plus Jakarta Sans", sans-serif;
  font-size: 34px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px; /* içi boş rakamlar birbirine değmesin */
  line-height: 1;
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, .28);
  transition: color .25s ease, -webkit-text-stroke-color .25s ease;
}

.ms__tab:hover .ms__tab-num {
  -webkit-text-stroke-color: rgba(30, 159, 224, .7);
}

.ms__tab-txt {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 4px;
  min-width: 0;
}

.ms__tab-title {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.ms__tab-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.ms__tab-preview {
  overflow: hidden;
  color: var(--ms-muted);
  font-size: 12.5px;
  line-height: 1.45;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ms__tab-go {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 999px;
  color: #B9C9E0;
  background: rgba(255, 255, 255, .07);
}

.ms__tab-go .ms__icon {
  width: 16px;
  height: 16px;
}

.ms__tab[aria-selected="true"] {
  border-color: var(--accent);
  background: rgba(30, 159, 224, .14);
}

.ms__tab[aria-selected="true"] .ms__tab-num {
  color: var(--accent);
  -webkit-text-stroke-width: 0;
}

.ms__tab[aria-selected="true"] .ms__tab-go {
  color: var(--ms-ink);
  background: #fff;
}

/* ── Panel ── */
.ms__panels {
  display: grid;
  min-width: 0;
}

.ms__panel {
  display: flex;
  flex-direction: column;
  grid-area: 1 / 1;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ms-line-2);
  border-radius: 22px;
  background: var(--ms-panel);
}

/* gizli paneller yer kaplar ama görünmez (ekran okuyucu ve odak da atlar) */
.ms__panel[hidden] {
  display: flex;
  visibility: hidden;
}

.ms__hero {
  position: relative;
  height: 220px;
  flex-shrink: 0;
  overflow: hidden;
  background: #15335E;
}

.ms__hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  transition: opacity .35s ease;
}

/* başlığın okunabilirliği bu geçişe bağlı — açıklığını azaltmayın */
.ms__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(19, 48, 90, .97) 0%, rgba(19, 48, 90, .78) 42%, rgba(19, 48, 90, .05) 100%);
}

.ms__title {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  width: min(420px, calc(100% - 56px));
}

.ms__stat {
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 999px;
  color: #BFE0FA;
  background: rgba(255, 255, 255, .12);
  font-size: 11.5px;
  font-weight: 700;
  line-height: normal;
}

.ms h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.3px;
}

.ms__blocks {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(min-content, 1fr));
  gap: 12px;
  padding: 18px;
}

.ms__block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 16px;
  color: #fff;
  background: rgba(255, 255, 255, .05);
  text-decoration: none;
  transition: background .2s ease;
}

.ms__block:hover {
  color: #fff;
  background: rgba(255, 255, 255, .09);
}

.ms__block-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.ms__block-head b {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
}

.ms__block-head .ms__icon {
  width: 15px;
  height: 15px;
  color: var(--ms-soft);
}

.ms__flag {
  width: 22px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 3px;
  object-fit: cover;
}

.ms__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ms__chips span {
  padding: 4px 10px;
  border-radius: 999px;
  color: #D5E6F7;
  background: rgba(30, 159, 224, .16);
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
}

.ms__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  height: 62px;
  flex-shrink: 0;
  padding: 0 18px 0 24px;
  border-top: 1px solid var(--ms-line);
}

.ms__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  color: var(--ms-soft);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s ease;
}

.ms__more:hover {
  color: #fff;
}

.ms__more .ms__icon {
  width: 15px;
  height: 15px;
}

.ms__pager {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ms__pos {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ms__pos i {
  color: var(--ms-dim);
  font-style: normal;
}

.ms__btns {
  display: flex;
  gap: 8px;
}

/* sitenin slider okları: 34px, 10px köşe */
.ms__btns button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px;
  color: #fff;
  background: rgba(255, 255, 255, .07);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.ms__btns button:hover {
  border-color: var(--accent);
  background: var(--accent);
}

.ms__btns .ms__next {
  border-color: #fff;
  color: var(--ms-ink);
  background: #fff;
}

.ms__btns .ms__next:hover {
  color: #fff;
}

.ms__hint {
  display: none;
  color: var(--ms-dim);
  font-size: 11.5px;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
Tablet ve mobil: kategoriler panelin üstünde yatay kaydırılan hap
sekmeler. Eşit yükseklik kuralı yalnızca masaüstü içindir.
══════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .ms__body {
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 0;
  }

  /* Satır sayfanın kenar boşluğu içinde kalır (sekmeler ekran kenarına
  yapışmaz). Taşan tarafta yumuşak solma, devamı olduğunu gösterir;
  .is-more-start / .is-more-end sınıflarını home.js kaydırmaya göre verir. */
  .ms__tabs {
    --ms-fade-start: 0px;
    --ms-fade-end: 0px;
    flex-direction: row;
    gap: 8px;
    padding: 2px 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ms-fade-start), #000 calc(100% - var(--ms-fade-end)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--ms-fade-start), #000 calc(100% - var(--ms-fade-end)), transparent 100%);
  }

  .ms__tabs.is-more-start {
    --ms-fade-start: 28px;
  }

  .ms__tabs.is-more-end {
    --ms-fade-end: 28px;
  }

  .ms__tabs::-webkit-scrollbar {
    display: none;
  }

  .ms__tab {
    flex: 0 0 auto;
    gap: 8px;
    width: auto;
    height: 42px;
    min-height: 42px;
    padding: 0 15px 0 13px;
    border-color: rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    scroll-snap-align: start;
  }

  .ms__tab-num {
    width: auto;
    font-size: 17px;
    letter-spacing: .5px;
    -webkit-text-stroke-width: 1.1px;
    -webkit-text-stroke-color: rgba(255, 255, 255, .45);
  }

  .ms__tab-txt {
    gap: 0;
  }

  .ms__tab-preview,
  .ms__tab-go {
    display: none;
  }

  .ms__tab-label {
    font-size: 13.5px;
    white-space: nowrap;
  }

  .ms__tab[aria-selected="true"] {
    border-color: #fff;
    color: var(--ms-ink);
    background: #fff;
  }

  .ms__tab[aria-selected="true"] .ms__tab-num {
    color: var(--accent-dark);
  }

  .ms__panels {
    display: block;
  }

  .ms__panel[hidden] {
    display: none;
  }

  .ms__blocks {
    flex: none;
    grid-template-rows: none;
  }

  .ms__block {
    padding: 16px 18px;
  }
}

@media (max-width: 820px) {
  .ms__panel {
    border-radius: 18px;
  }

  .ms__hero {
    height: 200px;
  }

  /* mobilde geçiş alttan yukarı */
  .ms__hero::after {
    background: linear-gradient(to top, rgba(19, 48, 90, 1) 0%, rgba(19, 48, 90, .6) 50%, rgba(19, 48, 90, .05) 100%);
  }

  .ms__title {
    top: auto;
    right: 18px;
    bottom: 16px;
    left: 18px;
    gap: 8px;
    width: auto;
  }

  .ms__stat {
    color: #fff;
    background: rgba(255, 255, 255, .14);
  }

  .ms h3 {
    font-size: 20px;
  }

  /* kutu içinde kutu yok: tek sütun, ince çizgili satırlar */
  .ms__blocks {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 2px 18px;
  }

  .ms__block {
    padding: 14px 0;
    border-bottom: 1px solid var(--ms-line);
    border-radius: 0;
    background: none;
  }

  .ms__block:hover {
    background: none;
  }

  .ms__block-head b {
    font-size: 14px;
  }

  .ms__foot {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
    height: auto;
    padding: 14px 18px 18px;
    border-top: none;
  }

  .ms__more {
    justify-content: center;
    min-height: 44px;
    border-radius: 12px;
    color: #fff;
    background: rgba(255, 255, 255, .08);
  }

  .ms__pager {
    justify-content: space-between;
  }

  /* dokunmatik: en az 44×44 */
  .ms__btns button {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .ms__hint {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ms__tab,
  .ms__tab-num,
  .ms__hero img,
  .ms__block,
  .ms__more,
  .ms__btns button {
    transition: none;
  }
}


/* ===== assets/css/src/05-home/40-why-choose.css ===== */
/* Why Choose FindMed: akordeon + görsel panel (.wc-*, .why-*). */

.why-copy h2 {
  font-size: 28px;
}

.why-copy > p {
  margin: 10px 0 20px;
  color: var(--muted);
  font-size: 14px;
}

.why-image {
  position: relative;
  height: 520px;
  overflow: hidden;
  border-radius: var(--radius);
}

.why-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2, 26, 57, .9), rgba(2, 26, 57, .42) 53%, transparent);
}

@media (max-width: 760px) {
  .why-image {
    height: 380px;
  }
}

@media (max-width: 430px) {
  .why-copy h2 {
    font-size: 24px;
  }
}

.wc-copy h2 {
  color: var(--navy-dark);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.4px;
}

@media (max-width: 760px) {
  .wc-copy h2 {
    font-size: 26px;
  }
}

/* ══════════════════════════════════════════════════════════════
Why Choose FindMed — solda akordeon, sağda görsel panel
══════════════════════════════════════════════════════════════ */
.wc-grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 48px;
  align-items: start;
}

/* slider bölümlerinin başlıklarıyla aynı ölçek (24px) */
.wc-copy h2 {
  margin: 6px 0 8px;
  font-size: 24px;
  letter-spacing: -.3px;
  line-height: 1.2;
}

.wc-sub {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ── Akordeon ── */
.wc-accordion {
  display: grid;
  gap: 8px;
}

.wc-accordion details {
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: 12px;
  background: #fff;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.wc-accordion summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  cursor: pointer;
  list-style: none;
}

.wc-accordion summary::-webkit-details-marker {
  display: none;
}

.wc-ico {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 999px;
  color: var(--navy-dark);
  background: #eef3fa;
  transition: color .2s ease, background .2s ease;
}

.wc-ico .icon {
  width: 16px;
  height: 16px;
}

.wc-title {
  color: var(--navy-dark);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.1px;
  line-height: 1.3;
}

.wc-chev {
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: transform .25s ease, color .2s ease;
}

.wc-accordion details:hover {
  border-color: rgba(30, 159, 224, .45);
}

/* açık durum */
.wc-accordion details[open] {
  border-color: var(--accent);
  background: #f4f9fd;
}

.wc-accordion details[open] .wc-ico {
  color: #fff;
  background: var(--accent-dark);
}

.wc-accordion details[open] .wc-title {
  color: var(--accent-dark);
}

.wc-accordion details[open] .wc-chev {
  color: var(--accent-dark);
  transform: rotate(180deg);
}

.wc-panel {
  padding: 0 15px 13px 59px;
}

/* FMR metodoloji listesi */
.wc-list {
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}

.wc-list li {
  position: relative;
  padding-left: 16px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.wc-list li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.wc-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

/* ── Sağ görsel panel ── */
.wc-panel-visual {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  border-radius: 20px;
  background: var(--navy-dark);
  isolation: isolate;
}

.wc-panel-visual img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}

/* metnin okunması için sola doğru koyulaşan örtü */
.wc-panel-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(14, 44, 86, .92) 0%, rgba(14, 44, 86, .76) 40%, rgba(14, 44, 86, .36) 72%, rgba(14, 44, 86, .1) 100%);
}

.wc-visual-body {
  display: flex;
  height: 100%;
  min-height: inherit;
  flex-direction: column;
  align-items: flex-start;
  padding: 34px 32px 28px;
}

.wc-visual-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.wc-visual-eyebrow .icon {
  width: 15px;
  height: 15px;
}

.wc-panel-visual h3 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.4px;
  line-height: 1.2;
}

.wc-panel-visual > .wc-visual-body > p {
  max-width: 400px;
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: 14px;
  line-height: 1.6;
}

.wc-rule {
  display: block;
  width: 30px;
  height: 3px;
  margin: 20px 0;
  border-radius: 3px;
  background: var(--accent);
}

.wc-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 20px;
  border-radius: 10px;
  color: #fff;
  background: var(--accent-dark);
  font-size: 13.5px;
  font-weight: 700;
  transition: background .2s ease;
}

.wc-cta .icon {
  width: 17px;
  height: 17px;
  transition: transform .2s ease;
}

.wc-cta:hover {
  background: var(--accent);
}

.wc-cta:hover .icon {
  transform: translateX(3px);
}

/* ── Alt cam kartlar ── */
.wc-cards {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 34px 0 0;
  margin-top: auto;
  padding: 34px 0 0;
  list-style: none;
}

.wc-cards li {
  padding: 13px 14px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .09);
  backdrop-filter: blur(6px);
}

.wc-card-ico {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  margin-bottom: 9px;
  border-radius: 10px;
  color: #fff;
  background: var(--accent-dark);
}

.wc-card-ico .icon {
  width: 15px;
  height: 15px;
}

.wc-cards strong {
  display: block;
  margin-bottom: 3px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.wc-cards p {
  margin: 0;
  color: rgba(255, 255, 255, .76);
  font-size: 11.5px;
  line-height: 1.45;
}

@media (max-width: 1150px) {
  /* ── Duyarlı düzen ── */
  .wc-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* tek sütuna inince daha kısa ama yine de görselin nefes alacağı bir yükseklik */
  .wc-panel-visual {
    min-height: 580px;
  }

  .wc-panel-visual img {
    object-position: center;
  }

  .wc-panel-visual::before {
    background: linear-gradient(160deg, rgba(14, 44, 86, .9) 0%, rgba(14, 44, 86, .74) 45%, rgba(14, 44, 86, .42) 100%);
  }
}

@media (max-width: 760px) {
  .wc-accordion summary {
    gap: 12px;
    padding: 13px 14px;
  }

  .wc-panel {
    padding: 0 14px 14px 14px;
  }

  .wc-visual-body {
    padding: 30px 22px 26px;
  }

  .wc-panel-visual h3 {
    font-size: 23px;
  }

  /* mobilde de yan yana */
  .wc-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-top: 26px;
  }

  .wc-cards li {
    padding: 12px 12px 13px;
  }

  .wc-card-ico {
    margin-bottom: 10px;
  }
}

.wc-cards li {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.wc-cta {
  background: linear-gradient(135deg, #33a9e4 0%, var(--accent) 46%, #0f86c8 100%);
  box-shadow: 0 10px 26px -10px rgba(30, 159, 224, .8);
}

.wc-cta:hover {
  background: linear-gradient(135deg, #45b4ea 0%, #2aa9e8 46%, var(--accent-dark) 100%);
  box-shadow: 0 14px 32px -10px rgba(30, 159, 224, .95);
}

.wc-visual-eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  flex: 0 0 20px;
  border-radius: 2px;
  background: var(--spark);
}


/* ===== assets/css/src/05-home/50-stories.css ===== */
/* Hasta video hikâyeleri (.pd): tam genişlikte yatay (16:9) oynatıcı + "Up next" kartları. */

/* ══════════════════════════════════════════════════════════════
Bölüm kabuğu sitenin ortak yapısıdır (.section, .container,
.section-heading, .sh-all); zemin açık bölümlerle aynı.

Sahne: oynatıcı, kart kutusu, her kart ve kart görseli
position:absolute; home.js ekran genişliğine göre konum/boyut hesaplar
(.pd-m geçişi pencere boyutu değişince yumuşatır). Oynatıcı hiçbir
ekranda dikeye dönmez: masaüstü ve tablette 16:9, telefonda 16:9
fotoğraf + altında yazı alanı (--pd-media-h).
══════════════════════════════════════════════════════════════ */
.section#stories {
  background-color: var(--surface);
}

.pd {
  --pd-ease: cubic-bezier(.2, .8, .2, 1);
  --pd-dur: .65s;
  --pd-ink: #0E2C56;
  --pd-blue: #1F6FB8;
  --pd-muted: #52627A;
  --pd-line: #DCE4EE;
  --pd-card-line: #E1E8F1;
  --pd-green-bg: #E6F4EE;
  --pd-green: #11643F;
}

/* "View all" okların üstüne değil başlığın altına hizalı (bu bölümde başlık oku yok) */
@media (min-width: 901px) {
  #stories .section-heading > a.sh-all {
    margin-bottom: 0;
  }
}

.pd__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pd__glyph {
  fill: currentColor;
}

.pd__stage :focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.pd__stage button {
  font-family: inherit;
}

/* ── Sahne ── */
.pd__stage {
  position: relative;
  width: 100%;
  transition: height var(--pd-dur) var(--pd-ease);
}

.pd-m {
  transition: left var(--pd-dur) var(--pd-ease), top var(--pd-dur) var(--pd-ease), width var(--pd-dur) var(--pd-ease), height var(--pd-dur) var(--pd-ease), border-radius var(--pd-dur) var(--pd-ease), background-color var(--pd-dur) var(--pd-ease), border-color var(--pd-dur) var(--pd-ease), box-shadow var(--pd-dur) var(--pd-ease);
}

.pd-fade {
  transition: opacity .3s ease;
}

/* JS çalışmadan önce (ya da hiç çalışmazsa): 16:9 oynatıcı, altında kartlar akışta */
.pd__stage:not(.is-ready) .pd__player {
  position: relative;
  aspect-ratio: 16 / 9;
}

.pd__stage:not(.is-ready) .pd__panel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding-top: 28px;
}

.pd__stage:not(.is-ready) .pd__row {
  position: relative;
  height: 120px;
}

.pd__stage:not(.is-ready) .pd__thumb {
  inset: 0;
}

.pd__stage:not(.is-ready) .pd__chrome {
  display: none;
}

/* ── Oynatıcı kartı ── */
.pd__player {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  border-radius: 24px;
  background: #15335E;
  box-shadow: 0 30px 70px rgba(8, 18, 36, .3);
}

.pd__video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #15335E;
}

.pd__media {
  position: absolute;
  inset: 0;
}

/* oynarken kapak yavaşça yakınlaşır */
.pd__stage.is-playing .pd__poster {
  animation: pd-kb 16s ease-in-out infinite alternate;
}

@keyframes pd-kb {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08);
  }
}

.pd__poster {
  position: absolute;
  inset: 0;
}

.pd__poster[hidden] {
  display: none;
}

.pd__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

/* HD kapağı olmayan hikâye: bulanık arka plan + ortada net görsel (yedek) */
.pd__poster .pd__amb-bg {
  inset: -60px;
  width: calc(100% + 120px);
  height: calc(100% + 120px);
  filter: blur(30px) saturate(1.15);
}

.pd__poster .pd__amb-fg {
  inset: auto;
  top: 34%;
  left: 50%;
  width: 26%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  transform: translate(-50%, -50%);
}

/* gerçek video: büyütülünce yüklenir, kapak üstünde */
.pd__vid {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .4s ease;
}

.pd__stage.has-started .pd__vid {
  opacity: 1;
}

.pd__vid video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  background: #000;
}

/* Masaüstü/tablet: video sahneyi kapak gibi doldurur (YouTube kendi içinde
siyah şerit bırakmasın). Telefonda sahne dik: video tam görünür. */
.pd__stage:not(.is-compact) .pd__vid {
  container-type: size;
}

.pd__vid iframe,
.pd__vid video {
  /* kontroller bizim: fare/dokunma olayları iframe'e değil sahneye gitsin
  (arayüz uyansın, tıklama oynat/duraklat olsun) */
  pointer-events: none;
}

.pd__vid iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pd__stage:not(.is-compact) .pd__vid iframe {
  inset: auto;
  top: 50%;
  left: 50%;
  width: max(100cqw, 177.78cqh);
  height: max(100cqh, 56.25cqw);
  transform: translate(-50%, -50%);
}

.pd__stage.is-compact .pd__vid video {
  object-fit: contain;
}

/* video üzerindeki koyu geçiş — hafifletmeyin (kontrast) */
.pd__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 18, 36, .92) 0%, rgba(8, 18, 36, .35) 40%, rgba(8, 18, 36, 0) 66%);
  pointer-events: none;
  transition: opacity .3s ease;
}

.pd__verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--pd-green);
  background: var(--pd-green-bg);
  font-size: 11.5px;
  font-weight: 800;
  line-height: normal;
  white-space: nowrap;
}

.pd__verified .pd__icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

.pd__bigplay {
  position: absolute;
  top: 34%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  padding: 0;
  border: none;
  border-radius: 999px;
  color: var(--pd-blue);
  background: #fff;
  box-shadow: 0 0 0 14px rgba(255, 255, 255, .22), 0 18px 40px rgba(0, 0, 0, .3);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: opacity .3s ease;
}

.pd__bigplay .pd__glyph {
  width: 28px;
  height: 28px;
  margin-left: 4px;
}

.pd__stage.is-playing .pd__bigplay,
.pd__stage.sel-no-video .pd__bigplay {
  opacity: 0;
  pointer-events: none;
}

/* ── Oynatıcı arayüzü ── */
.pd__uis {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pd__ui {
  position: absolute;
  right: 32px;
  bottom: 22px;
  left: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #fff;
  pointer-events: auto;
  transition: opacity .3s ease;
}

.pd__ui[hidden] {
  display: none;
}

.pd__ui-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
}

.pd__ui-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 680px;
}

.pd__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pd__chip {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  font-size: 11.5px;
  font-weight: 700;
  line-height: normal;
}

.pd__ui h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
}

.pd__meta {
  color: #C9D6EA;
  font-size: 13.5px;
}

.pd__cta {
  display: flex;
  flex-shrink: 0;
  gap: 10px;
}

.pd__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.pd__btn .pd__icon {
  width: 16px;
  height: 16px;
}

.pd__btn--ghost {
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}

.pd__btn--ghost:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, .1);
}

.pd__btn--white {
  color: var(--pd-ink);
  background: #fff;
}

.pd__btn--white:hover {
  color: #fff;
  background: var(--accent);
}

.pd__bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pd__bar button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  color: #fff;
  background: transparent;
  cursor: pointer;
}

.pd__bar button:hover {
  background: rgba(255, 255, 255, .12);
}

.pd__bar .pd__pp {
  background: rgba(255, 255, 255, .16);
}

.pd__bar .pd__pp .pd__glyph {
  width: 17px;
  height: 17px;
}

.pd__bar [aria-pressed="true"] {
  color: var(--accent);
}

.pd__track {
  position: relative;
  flex-grow: 1;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .25);
  cursor: pointer;
}

.pd__track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
}

.pd__time {
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── "Up next" kartları ── */
.pd__panel {
  position: absolute;
  z-index: 2;
}

.pd__upnext {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--pd-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pd__row {
  position: absolute;
  overflow: hidden;
  border-radius: 16px;
}

.pd__row.is-sel {
  box-shadow: 0 0 0 3px var(--accent);
}

.pd__thumb {
  position: absolute;
  overflow: hidden;
  border-radius: 12px;
  background: #15335E;
}

.pd__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

.pd__tsh {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 18, 36, .85), rgba(8, 18, 36, 0) 60%);
}

.pd__d {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 1px 6px;
  border-radius: 5px;
  color: #fff;
  background: rgba(0, 0, 0, .6);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pd__card {
  position: absolute;
  right: 52px;
  bottom: 10px;
  left: 12px;
  min-width: 0;
  color: #fff;
}

.pd__card b,
.pd__card small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pd__card b {
  font-size: 13.5px;
  font-weight: 700;
}

.pd__card small {
  color: #CFDCEE;
  font-size: 12px;
}

.pd__playing {
  position: absolute;
  top: 8px;
  left: 8px;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* "Playing" rozeti yalnızca video gerçekten oynarken; seçili kart çerçeveyle belli */
.pd__stage.is-playing .pd__row.is-sel .pd__playing {
  display: flex;
}

.pd__hit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

/* ── Sahne başlığı: sayaç ve oklar ── */
.pd__chrome {
  position: absolute;
  z-index: 10;
  top: 18px;
  right: 18px;
  left: 18px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  pointer-events: none;
}

.pd__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.pd__count {
  padding: 6px 12px;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, .5);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pd__nav button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 999px;
  color: var(--pd-ink);
  background: #fff;
  cursor: pointer;
}

/* ── Oynarken arayüz YouTube gibi gizlenir ──
home.js: video oynarken fare 2.5 sn durursa ya da videodan çıkarsa sahneye
.is-idle ekler; fare/dokunma/klavye ile kalkar. Duraklatılınca hep görünür. */
.pd__stage.is-idle .pd__ui,
.pd__stage.is-idle .pd__shade,
.pd__stage.is-idle .pd__chrome {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s;
}

/* videonun boş alanına tıklamak oynat/duraklat */
.pd__stage:not(.sel-no-video) .pd__video {
  cursor: pointer;
}

.pd__stage.is-idle .pd__video {
  cursor: none;
}

/* tam ekran: oynatıcı ekranı kaplar, arayüz yerinde kalır */
.pd__player:fullscreen {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
Tablet / telefon: JS sahne genişliğine göre .is-stacked (< 1024px)
ve .is-compact (< 640px) ekler
══════════════════════════════════════════════════════════════ */
/* telefon: fotoğraf/video üstte 16:9; başlık ve düğmeler altındaki koyu alanda */
.pd__stage.is-compact .pd__media {
  inset: 0 0 auto;
  height: var(--pd-media-h);
}

.pd__stage.is-compact .pd__shade {
  background: linear-gradient(to top, #15335E 0%, #15335E calc(100% - var(--pd-media-h)), rgba(21, 51, 94, 0) calc(100% - var(--pd-media-h) * .55));
}

.pd__stage.is-compact .pd__bigplay {
  top: calc(var(--pd-media-h) / 2);
  width: 66px;
  height: 66px;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .22), 0 14px 32px rgba(0, 0, 0, .3);
}

.pd__stage.is-compact .pd__poster .pd__amb-fg {
  top: 50%;
  width: 52%;
}

.pd__stage.is-compact .pd__ui {
  right: 18px;
  bottom: 18px;
  left: 18px;
  gap: 12px;
}

.pd__stage.is-compact .pd__ui-top {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.pd__stage.is-compact .pd__ui h3 {
  font-size: 20px;
}

.pd__stage.is-compact .pd__meta {
  font-size: 12.5px;
}

.pd__stage.is-compact .pd__chip--treat,
.pd__stage.is-compact .pd__btn--ghost,
.pd__stage.is-compact .pd__opt,
.pd__stage.is-compact .pd__count {
  display: none;
}

.pd__stage.is-compact .pd__cta .pd__btn {
  flex: 1;
  white-space: normal;
  text-align: center;
}

.pd__stage.is-compact .pd__bar {
  gap: 8px;
}

.pd__stage.is-compact .pd__chrome {
  top: 14px;
  right: 14px;
  left: 14px;
}

.pd__stage.is-compact .pd__upnext {
  font-size: 11.5px;
}

@media (prefers-reduced-motion: reduce) {
  .pd__stage,
  .pd__stage *,
  .pd__stage *::before,
  .pd__stage *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ===== assets/css/src/05-home/60-numbers.css ===== */
/* FindMed in Numbers bandı (.nm-*, .numbers). */

.numbers {
  padding: 32px 0 0;
  background: #f0f5fa;
}

/* ── Hasta hikâyeleri ── */
/* ══════════════════════════════════════════════════════════════
Rakamlar — kart değil, ince çizgili editoryal bant
══════════════════════════════════════════════════════════════ */
.numbers {
  padding: var(--section-pad, 78px) 0 20px;
  background: #fff;
}

/* ══════════════════════════════════════════════════════════════
Rakamlar — kart değil, ince çizgili editoryal bant
══════════════════════════════════════════════════════════════ */
.nm-band {
  padding: 10px 0 38px;
  text-align: center;
}

.nm-eyebrow {
  margin-bottom: 34px;
  font-weight: 800;
  text-transform: uppercase;
}

/* ── Rakam satırı ── */
.nm-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nm-item {
  padding: 0 18px;
}

.nm-item + .nm-item {
  border-left: 1px solid var(--card-line);
}

.nm-value {
  display: block;
  color: var(--navy-dark);
  font-size: 54px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -2.4px;
  line-height: 1;
}

/* sonek turkuaz ve daha küçük */
.nm-value em {
  margin-left: 2px;
  color: var(--accent-dark);
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -1px;
  vertical-align: 6px;
}

.nm-label {
  display: block;
  margin-top: 14px;
  color: var(--navy-dark);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.nm-note {
  display: block;
  max-width: 210px;
  margin: 7px auto 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ── Güven satırı ── */
.nm-trust {
  display: flex;
  gap: 14px 44px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 36px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--card-line);
  list-style: none;
}

.nm-trust li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--navy-dark);
  font-size: 13px;
  font-weight: 600;
}

.nm-trust .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--accent-dark);
}

@media (max-width: 900px) {
  /* ── Duyarlı ── */
  .nm-band {
    padding: 10px 0 30px;
  }

  .nm-eyebrow {
    margin-bottom: 26px;
  }

  .nm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 30px;
  }

  /* 2 sütunda yalnızca sağdakiler çizgi alsın */
  .nm-item + .nm-item {
    border-left: 0;
  }

  .nm-item:nth-child(even) {
    border-left: 1px solid var(--card-line);
  }

  .nm-value {
    font-size: 42px;
    letter-spacing: -1.8px;
  }

  .nm-value em {
    font-size: 24px;
    vertical-align: 5px;
  }

  .nm-trust {
    gap: 12px 26px;
    margin-top: 28px;
    padding-top: 22px;
  }
}

@media (max-width: 560px) {
  .nm-value {
    font-size: 34px;
    letter-spacing: -1.4px;
  }

  .nm-value em {
    font-size: 20px;
    vertical-align: 4px;
  }

  .nm-label {
    margin-top: 11px;
    font-size: 11px;
    letter-spacing: 1.2px;
  }

  .nm-note {
    font-size: 11.5px;
  }

  .nm-trust {
    gap: 11px;
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 760px) {
  .numbers {
    padding-top: 58px;
  }
}

/* ══════════════════════════════════════════════════════════════
23: FindMed in Numbers — Stories ile aynı açık zemin
(beyaz değil, #F4F8FD). Ayrıca liste kaydırıcısı: html'e
verilen koyu scrollbar rengi kalıtımla iç panellere de
sızıyordu, açık panellerde sırıtmasın diye kesiliyor.
══════════════════════════════════════════════════════════════ */
.numbers {
  padding-bottom: 100px;
  background-color: #F4F8FD;
  background-image: none;
}


/* ===== assets/css/src/05-home/70-travel-cards.css ===== */
/* Anasayfa "Popular Destinations" (#destinations) ve "Popular Countries" (#countries): lacivert zemin üstünde slider noktaları ve telefondaki başlık düzeni. Kart: 04-components/85-cine-card.css (.h-card--tabs). */

:is(#destinations, #countries) .hs__dot span {
  background: rgba(255, 255, 255, .25);
}

:is(#destinations, #countries) .hs__dot[aria-current="true"] span {
  background: #3D9BE0;
}

/* "View all destinations / countries" telefonda kısalır: "View all" */
:is(#destinations, #countries) .sh-all__short {
  display: none;
}

/* ══════════════════════════════════════════════════════════════
Telefon (≤ 640px): yan boşluk 20px; üst satırda solda eyebrow, sağda
çerçevesiz "View all" (44px dokunma alanı); oklar gizli, kaydırma ve
noktalar yeterli. Kart satırı sağ kenara kadar taşar, sayfa kaymaz.
══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  :is(#destinations, #countries) .container {
    width: calc(100% - 40px);
  }

  :is(#destinations, #countries) .section-heading {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px 16px;
  }

  :is(#destinations, #countries) .sh-text {
    display: contents;
  }

  :is(#destinations, #countries) .sh-text .eyebrow {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: 12px;
    white-space: nowrap;
  }

  :is(#destinations, #countries) .section-heading > a.sh-all {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    color: #8FC3F2;
    background: none;
    font-size: 14px;
    font-weight: 700;
  }

  :is(#destinations, #countries) .section-heading > a.sh-all .icon {
    font-size: 14px;
  }

  :is(#destinations, #countries) .sh-all__long {
    display: none;
  }

  :is(#destinations, #countries) .sh-all__short {
    display: inline;
  }

  :is(#destinations, #countries) .sh-text h2,
  :is(#destinations, #countries) .sh-text p {
    grid-column: 1 / -1;
    margin: 0;
  }

  :is(#destinations, #countries) .sh-text h2 {
    font-size: 30px;
    line-height: 1.15;
  }

  :is(#destinations, #countries) .sh-text p {
    font-size: 15px;
  }

  :is(#destinations, #countries) .hs__viewport {
    margin-right: -20px;
  }

  :is(#destinations, #countries) .hs__track {
    padding-right: 20px;
  }

  :is(#destinations, #countries) .hs .slider-arrow {
    display: none;
  }
}


/* ===== assets/css/src/06-pages/10-page-hero.css ===== */
/* Alt sayfa hero'su ve gövdesi (.page-hero, .page-body). */

/* alt sayfa hero gorseli */
.page-hero .hero-bg::before {
  background-image: url("https://findmed.odopreview.com/wp-content/themes/findmed/assets/img/page-hospital-bg.webp");
}

/* doktorlar sayfasi kendi hero gorselini kullanir */
.page-hero--doctors .hero-bg::before {
  background-image: url("https://findmed.odopreview.com/wp-content/themes/findmed/assets/img/page-doctor-bg-.webp");
}

/* tedaviler sayfasi kendi hero gorselini kullanir */
.page-hero--treatments .hero-bg::before {
  background-image: url("https://findmed.odopreview.com/wp-content/themes/findmed/assets/img/pag-treatment-bg.webp");
}

/* destinasyonlar sayfasi kendi hero gorselini kullanir */
.page-hero--destinations .hero-bg::before {
  background-image: url("https://findmed.odopreview.com/wp-content/themes/findmed/assets/img/page-destination-bg.webp");
}

/* ══════════════════════════════════════════════════════════════
29: Alt sayfa gövdesi (sayfa.html şablonu)
İçerik boşken bile bölüm bir yükseklik tutsun, footer hero'ya
yapışmasın.
══════════════════════════════════════════════════════════════ */
.page-body {
  min-height: 40vh;
  padding-top: 34px;
  background-color: #F4F8FD;
}

@media (max-width: 760px) {
  .page-body {
    padding-top: 24px;
  }
}

/* ══════════════════════════════════════════════════════════════
30: Alt sayfa hero'su (.page-hero)
Arama paneli yok; breadcrumb + "featured title" düzeni.
Sahne tam ekran değil, başlık için ölçülü bir bant.
══════════════════════════════════════════════════════════════ */
.hero-stage.page-hero {
  min-height: clamp(420px, 52vh, 580px);
  padding-bottom: 37px;
}

/* ana sayfanin 350px'lik hero tabani alt sayfada bandi gereksiz uzatiyordu */
.page-hero .hero {
  min-height: 0;
  padding-bottom: 0;
}

@media (max-width: 1050px) {
  .hero-stage.page-hero {
    min-height: clamp(340px, 52vh, 470px);
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 760px) {
  /* telefonda bant daha da kisa: yukseklik artik icerik kadar */
  .hero-stage.page-hero {
    min-height: clamp(360px, 50vh, 450px);
    padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  }
}

/* Dört hub (hastane, doktor, tedavi, destinasyon): veri kartı (.hero-facts)
   kalktı (kullanıcı isteği, 6 Ekim 2026), bant da ona göre kısa. Makale ve
   tekil sayfa hero'ları etkilenmez. */
.hero-stage.page-hero--hospitals,
.hero-stage.page-hero--doctors,
.hero-stage.page-hero--treatments,
.hero-stage.page-hero--destinations {
  min-height: clamp(340px, 40vh, 460px);
}

@media (max-width: 1050px) {
  .hero-stage.page-hero--hospitals,
  .hero-stage.page-hero--doctors,
  .hero-stage.page-hero--treatments,
  .hero-stage.page-hero--destinations {
    min-height: clamp(300px, 42vh, 400px);
  }
}

@media (max-width: 760px) {
  .hero-stage.page-hero--hospitals,
  .hero-stage.page-hero--doctors,
  .hero-stage.page-hero--treatments,
  .hero-stage.page-hero--destinations {
    min-height: clamp(300px, 42vh, 380px);
  }
}

/* ana sayfada gizlenen aciklama burada geri gelir */
.page-hero .hero-copy > p {
  color: rgba(226, 240, 255, .92);
  font-size: 13.5px;
  line-height: 1.65;
}

/* tum blok sahnenin dikey ortasinda durur.
flex-shrink 0: dar ekranda serit uc satira cikinca blok sikismasin */
.page-hero .hero-copy {
  min-height: 0;
  margin-bottom: 0;
  flex: 1 0 auto;
  justify-content: center;
}

.page-hero .hero-content {
  justify-content: center;
  padding-top: 40px;
}

@media (max-width: 1050px) {
  .page-hero .hero-content {
    padding-top: 20px;
  }
}

.page-hero .hero-copy h1 {
  font-size: clamp(34px, 3.5vw, 50px);
  letter-spacing: -1.1px;
}

@media (max-width: 760px) {
  .page-hero .hero-copy h1 {
    font-size: clamp(32px, 9.5vw, 46px);
    letter-spacing: -.9px;
  }

  .page-hero .hero-copy > p {
    font-size: 12.5px;
  }
}

/* ── premium giriş: kademeli ── */
.page-hero .crumbs {
  margin-top: 22px;
  animation: fm-rise .7s cubic-bezier(.2, .7, .25, 1) .4s backwards;
}

/* kırıntı bloğun başındaysa (hub ve hastane hero'su) başlığın üstünde durur */
.page-hero .hero-copy > .crumbs:first-child {
  margin: 0 0 18px;
  animation-delay: .05s;
}

.page-hero .hero-copy h1 {
  line-height: 1.08;
  animation: fm-title-in .9s cubic-bezier(.2, .7, .25, 1) .16s both;
}

/* ana sayfada gizlenen aciklama burada geri gelir */
.page-hero .hero-copy > p {
  display: block;
  max-width: 860px;
  margin: 16px auto 0;
  text-shadow: 0 1px 12px rgba(6, 26, 48, .45);
  animation: fm-rise .8s cubic-bezier(.2, .7, .25, 1) .3s both;
}

/* ── makale hero'su: metin solda, gorsel sagda ── */
.hero-stage.page-hero--article {
  min-height: clamp(420px, 54vh, 600px);
}


/* ===== assets/css/src/06-pages/20-list-groups.css ===== */
/* Alt sayfa liste grupları, filtre ve kapanış bandı (.lg-*, .lgf-*, .lgc-*). */

/* ══════════════════════════════════════════════════════════════
32: Liste gruplari (.lgroup) — alt sayfa govdesi
Her kart bir "list view group": basligi, on siralamali hastane
listesi ve altinda Read More baglantisi olan koyu bir panel.
Bazilarinin solunda gorsel var (.lgroup--media), onlar izgarada
tum satiri kaplar; gorselsiz kartlar iki sutuna dizilir.
══════════════════════════════════════════════════════════════ */
.lg-grid {
  --lg-line: #e2ecf7;
  --lg-dim: var(--muted);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 26px;
}

.lgroup {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--lg-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 40px -34px rgba(20, 60, 110, .5);
  transition: border-color .35s ease, box-shadow .35s ease;
}

/* uzerine gelince kart ne buyur ne kalkar: yalnizca golge derinlesir */
.lgroup:hover {
  border-color: #c8ddf2;
  box-shadow: 0 26px 52px -28px rgba(20, 60, 110, .35);
}

/* gorselli kartta kareler ustte durur; kart yine tek sutun */
/* listedeki 10 hastanenin kareleri: yatayda kaydirilan serit.
Ok/pagination yok; masaustunde 4, dar ekranda 2 kare gorunur. */
.lg-media {
  display: flex;
  gap: 8px;
  cursor: grab;
  margin: 0 24px;
  padding: 18px 0 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.lg-media::-webkit-scrollbar {
  display: none;
}

/* fare ile surukleme sirasinda */
.lg-media.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.lg-media.is-dragging .lg-thumb {
  pointer-events: none;
}

.lg-thumb {
  position: relative;
  flex: 0 0 calc((100% - 16px) / 3);
  aspect-ratio: 4 / 3;
  scroll-snap-align: start;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--lg-line);
  border-radius: 12px;
  background: var(--soft);
}

.lg-thumb img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lg-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: 16px 24px 18px;
}

/* baslik blogu: serit gorsellerin USTUNDE.
Kartin sol ust kosesinde cok hafif bir isik, basligin uzerinde
kisa accent cizgi; kart hover'inda cizgi uzar. */
.lg-head {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 0;
}

.lg-head::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -30px -20px auto -30px;
  height: 170px;
  background: radial-gradient(58% 100% at 14% 0%, rgba(30, 159, 224, .1) 0%, rgba(30, 159, 224, 0) 70%);
  pointer-events: none;
}

.lg-head > * {
  position: relative;
  z-index: 1;
}

/* basligin ALTINDAKI kisa accent cizgi */
/* baslik sonundaki destinasyon bayragi */
.lg-flag {
  display: inline-block;
  width: 22px;
  height: 15px;
  margin-left: 7px;
  vertical-align: -1px;
  border: 1px solid rgba(20, 60, 110, .14);
  border-radius: 3px;
  object-fit: cover;
}

.lg-head h2::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(30, 159, 224, .12) 100%);
  transition: width .4s cubic-bezier(.2, .7, .25, 1);
}

.lgroup:hover .lg-head h2::after {
  width: 56px;
}

.lg-head h2 {
  margin: 0;
  color: var(--navy-dark);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.45px;
  line-height: 1.22;
}

.lg-head p {
  margin: 11px 0 0;
  color: var(--lg-dim);
  font-size: 12.5px;
  line-height: 1.55;
}

.lg-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lg-list li + li {
  border-top: 1px solid var(--lg-line);
}

.lg-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  margin: 0 -10px;
  border-radius: 10px;
  transition: background-color .25s ease;
}

/* siralama numarasi yok: her satirin basinda yildiz */
.lg-rank {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: rgba(30, 159, 224, .5);
  transition: color .25s ease;
}

.lg-star {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.lg-list a:hover .lg-rank {
  color: var(--accent-dark);
}

.lg-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lg-text strong {
  color: var(--navy-dark);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  transition: color .25s ease;
}

.lg-text small {
  color: var(--lg-dim);
  font-size: 11.5px;
  line-height: 1.4;
}

.lg-list a > .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--accent);
  opacity: .5;
  transition: opacity .25s ease, transform .25s ease;
}

.lg-list a:hover {
  background: var(--accent-soft);
}

.lg-list a:hover .lg-text strong {
  color: var(--accent-dark);
}

.lg-list a:hover > .icon {
  opacity: 1;
  transform: translateX(3px);
}

/* her kartin altinda Read More */
.lg-more {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--lg-line);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

.lg-more .icon {
  width: 15px;
  height: 15px;
  transition: transform .25s ease;
}

.lg-more:hover {
  color: var(--accent);
}

.lg-more:hover .icon {
  transform: translate(2px, -2px);
}

@media (max-width: 900px) {
  .lg-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  /* dar ekranda tam 2 kare gorunur */
  .lg-thumb {
    flex: 0 0 calc((100% - 8px) / 2);
  }
}

@media (max-width: 620px) {
  .lg-body {
    padding: 14px 18px 16px;
  }

  .lg-head {
    padding: 20px 18px 0;
  }

  .lg-media {
    margin: 0 18px;
  }

  .lg-head h2 {
    font-size: 19px;
  }

  .lg-text strong {
    font-size: 13.5px;
  }
}

/* ══════════════════════════════════════════════════════════════
33: Liste filtresi (.lg-filter)
Baslik altinda tek parca acik cam bar: destinasyon + tedavi
alanlari, her ikisi de oneri panelli. Secim yapildiginda
asagidaki liste gruplari aninda suzulur.
══════════════════════════════════════════════════════════════ */
.lg-filter {
  display: flex;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 7px 7px 7px 8px;
  border: 1px solid var(--line);
  /* Köşe alttaki kartlarla (.lgroup, 18px) aynı (kullanıcı isteği, 6 Ekim
     2026; 999px haptı). İç alan ve düğme 7px dolgu payıyla 12px. Dört hub
     sayfası da bu çubuğu kullanır. */
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 44px -34px rgba(14, 44, 86, .55), 0 1px 2px rgba(14, 44, 86, .05);
  transition: box-shadow .35s ease, border-color .35s ease;
}

.lg-filter:focus-within {
  border-color: rgba(30, 159, 224, .5);
  box-shadow: 0 26px 52px -32px rgba(14, 44, 86, .6), 0 0 0 4px rgba(30, 159, 224, .1);
}

.lgf-field {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 12px;
  transition: background-color .3s ease;
}

.lgf-field:hover,
.lgf-field:focus-within {
  background: var(--soft);
}

.lgf-field > .icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  color: var(--accent);
}

.lgf-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.lgf-label {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.lgf-input {
  width: 100%;
  padding: 1px 0 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  outline: none;
}

.lgf-input::placeholder {
  color: #9db3c8;
  font-weight: 500;
}

/* alani temizleyen kucuk dugme */
.lgf-clear {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: rgba(20, 65, 125, .08);
  cursor: pointer;
  transition: color .25s ease, background-color .25s ease;
}

.lgf-clear .icon {
  width: 11px;
  height: 11px;
}

.lgf-clear:hover {
  color: #fff;
  background: var(--accent);
}

.lgf-sep {
  width: 1px;
  margin: 10px 0;
  flex: 0 0 1px;
  background: var(--line);
}

.lgf-go {
  flex: 0 0 auto;
  gap: 8px;
  padding: 0 22px;
  border-radius: 12px;
  white-space: nowrap;
}

/* ── oneri paneli ── */
.lgf-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  max-width: 360px;
  max-height: 268px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 26px 52px -26px rgba(14, 44, 86, .45);
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.lgf-panel.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
}

.lgf-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 11px;
  color: var(--text);
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.lgf-option .icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--accent);
  opacity: .55;
}

.lgf-option mark {
  color: var(--accent-dark);
  background: none;
  font-weight: 800;
}

.lgf-option:hover,
.lgf-option.is-active {
  color: var(--accent-dark);
  background: var(--accent-soft);
}

.lgf-empty {
  padding: 12px 11px;
  color: var(--muted);
  font-size: 13px;
}

/* ── durum satiri ── */
/* bilgilendirme satiri: ortada duran meta chip */
.lgf-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  width: fit-content;
  max-width: 100%;
  margin: 16px auto 0;
  padding: 7px 16px 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}

/* basindaki kucuk accent noktasi */
.lgf-status::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--accent);
}

.lgf-count strong {
  color: var(--navy-dark);
  font-weight: 800;
}

@media (max-width: 620px) {
  .lgf-status {
    padding: 8px 14px;
    font-size: 12px;
    line-height: 1.45;
  }
}

.lgf-reset {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-dark);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.lgf-reset:hover {
  color: var(--accent);
}

/* display'i biz verdigimiz icin [hidden] elle kapatilir */
.lgroup[hidden],
.lgf-clear[hidden],
.lg-empty[hidden] {
  display: none !important;
}

/* ── sonuc yok ── */
.lg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 26px;
  padding: 44px 24px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  background: #fff;
  text-align: center;
}

.lg-empty .icon {
  width: 26px;
  height: 26px;
  color: var(--accent);
  opacity: .6;
}

.lg-empty strong {
  color: var(--navy-dark);
  font-size: 16px;
  font-weight: 800;
}

.lg-empty span {
  color: var(--muted);
  font-size: 13.5px;
}

@media (max-width: 860px) {
  .lg-filter {
    flex-direction: column;
    gap: 4px;
    max-width: none;
    padding: 8px;
    border-radius: 18px;
  }

  .lgf-field {
    border-radius: 12px;
  }

  .lgf-sep {
    width: auto;
    height: 1px;
    margin: 0 12px;
    flex: 0 0 1px;
  }

  .lgf-go {
    justify-content: center;
    padding: 12px 22px;
    border-radius: 12px;
  }

  .lgf-panel {
    top: calc(100% + 6px);
  }
}

/* ══════════════════════════════════════════════════════════════
34: Kapanis bandi (.lg-cta)
Listelerin altinda koyu bir davet paneli. Arkada cok yavas
suzulen aurora isigi, altinda kayan destinasyon seridi,
birincil butonda yumusak nabiz.
══════════════════════════════════════════════════════════════ */
.lg-cta {
  position: relative;
  margin-top: 34px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  background: linear-gradient(135deg, #0e2c56 0%, #0a1f3f 55%, #0b2b52 100%);
  box-shadow: 0 34px 70px -46px rgba(10, 26, 48, .9);
  isolation: isolate;
}

/* arkada gezinen isik */
.lgc-aurora {
  position: absolute;
  z-index: -1;
  inset: -30%;
  background: radial-gradient(closest-side, rgba(56, 178, 235, .38) 0%, rgba(56, 178, 235, 0) 100%), radial-gradient(closest-side, rgba(126, 208, 255, .26) 0%, rgba(126, 208, 255, 0) 100%);
  background-repeat: no-repeat;
  background-size: 52% 62%, 46% 56%;
  animation: fm-aurora 18s ease-in-out infinite;
  pointer-events: none;
}

.lgc-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 620px;
  margin: 0 auto;
  padding: 38px 26px 32px;
  text-align: center;
}

/* cercevesiz, kucuk etiket */
.lgc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .55);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.lgc-eyebrow .icon {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.lg-cta h2 {
  margin: 10px 0 0;
  color: #fff;
  font-size: clamp(22px, 2.3vw, 29px);
  font-weight: 800;
  letter-spacing: -.6px;
  line-height: 1.2;
}

.lg-cta p {
  margin: 9px 0 0;
  max-width: 470px;
  color: rgba(255, 255, 255, .64);
  font-size: 13.5px;
  line-height: 1.55;
}

.lgc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.lgc-go {
  gap: 9px;
  padding: 11px 22px;
  border-radius: 999px;
  animation: fm-cta-pulse 3.6s ease-in-out infinite;
}

.lgc-go .icon {
  width: 19px;
  height: 19px;
  transition: transform .3s cubic-bezier(.2, .7, .25, 1);
}

.lgc-go:hover .icon {
  transform: scale(1.08);
}

/* ghost baglantidaki ok saga kayar */
.lgc-arrow {
  transition: transform .3s cubic-bezier(.2, .7, .25, 1);
}

.lgc-ghost:hover .lgc-arrow {
  transform: translateX(3px);
}

.lgc-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .06);
  font-size: 14px;
  font-weight: 700;
  transition: border-color .3s ease, background-color .3s ease;
}

.lgc-ghost .icon {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.lgc-ghost:hover {
  border-color: rgba(126, 208, 255, .45);
  background: rgba(255, 255, 255, .12);
}

/* ── kapanis bandinin altindaki serit ── */
.lgc-ticker {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: rgba(6, 20, 40, .45);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.lgc-track {
  display: flex;
  align-items: center;
  width: max-content;
  padding: 13px 0;
  animation: fm-ticker 72s linear infinite;
}

.lgc-ticker:hover .lgc-track {
  animation-play-state: paused;
}

.lgc-item {
  color: rgba(255, 255, 255, .74);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .3px;
  white-space: nowrap;
}

.lgc-dot {
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  margin: 0 16px;
  border-radius: 50%;
  background: rgba(126, 208, 255, .55);
}

@media (max-width: 620px) {
  .lgc-inner {
    padding: 32px 20px 26px;
  }

  .lgc-actions {
    width: 100%;
    flex-direction: column;
  }

  .lgc-go,
  .lgc-ghost {
    width: 100%;
    justify-content: center;
  }
}

/* ── serit sayfalama noktalari (JS ile eklenir) ── */
.lg-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px 24px 0;
}

.lg-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d3e1f1;
  cursor: pointer;
  transition: width .3s cubic-bezier(.2, .7, .25, 1), background-color .3s ease;
}

.lg-dot:hover {
  background: #b6cfe8;
}

.lg-dot.is-active {
  width: 28px;
  background: var(--accent);
}

@media (max-width: 620px) {
  .lg-dots {
    margin: 10px 18px 0;
  }
}

/* ══════════════════════════════════════════════════════════════
36: Kart tarzlari — sayfada yalnizca dort tarz kullanilir
.lgroup--media   : ustte kaydirilan 10 gorsel + tek sutunlu liste
.lgroup--feature : listenin ilk hastanesi buyuk gorselle one cikar
.lgroup--split   : liste iki sutuna bolunur (20 hastane)
.lgroup--tint    : hafif mavi zeminli tek sutunlu liste
══════════════════════════════════════════════════════════════ */
/* ── 2) ilk hastanesi one cikan kart ── */
.lg-feature {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  gap: 16px;
  margin: 18px 24px 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--lg-line);
}

.lg-feature-media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--lg-line);
  border-radius: 14px;
}

.lg-feature-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .25, 1);
}

.lgroup--feature:hover .lg-feature-media img {
  transform: scale(1.04);
}

.lg-feature-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

.lg-feature-kicker {
  color: var(--accent-dark);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.lg-feature-body strong {
  color: var(--navy-dark);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.2px;
  line-height: 1.25;
  transition: color .25s ease;
}

.lg-feature-body small {
  color: var(--lg-dim);
  font-size: 12px;
  line-height: 1.4;
}

.lg-feature-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--accent-dark);
  font-size: 12.5px;
  font-weight: 700;
}

.lg-feature-go .icon {
  width: 15px;
  height: 15px;
  transition: transform .25s ease;
}

.lg-feature-body:hover strong {
  color: var(--accent-dark);
}

.lg-feature-body:hover .lg-feature-go .icon {
  transform: translateX(3px);
}

/* ── satir basinda yuvarlak fotograf ── */
/* Once yalnizca destinasyonlarda (sehrin simgesel yapisi); 6 Ekim 2026'dan
   beri gorseli olan her ogede: tedavi, hastane, doktor. Kucuk, yuvarlak,
   kirpilmis. Gorseli olmayan ogede yildiz (.lg-star) durur. */
.lg-rank--photo {
  width: 38px;
  height: 38px;
  overflow: hidden;
  border: 1px solid var(--lg-line);
  border-radius: 999px;
  background: #eef5fc;
}

.lg-rank--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.2, .7, .25, 1);
}

.lg-list a:hover .lg-rank--photo img {
  transform: scale(1.08);
}

.lg-list a:hover .lg-rank--photo {
  border-color: #b7d6f1;
}

/* iki sutunlu listede bir tik kucuk durur */
.lg-list--split .lg-rank--photo {
  width: 32px;
  height: 32px;
}

/* doktor yuzu: kirpma yukaridan, yuz kesilmesin */
.lg-rank--face img {
  object-position: 50% 18%;
}

/* gorseli olmayan oge: ayni boyda yuvarlak, lacivert zeminde beyaz "fm"
   (kullanici istegi, 6 Ekim 2026: kucuk harf; once acik mavi zeminde arti
   simgesiydi). Logo yazisi gibi: kalin, sikisik, hafif yukari. */
.lg-rank--ph {
  display: grid;
  border-color: transparent;
  background: var(--navy-dark, #0b2a4a);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  padding-bottom: 2px;
  place-items: center;
}

.lg-list--split .lg-rank--ph {
  font-size: 10px;
}

/* ── liste kartinda tedavi gorseli ── */
/* baslik blogunun solunda kare kapak; yalnizca gorseli olan kartlar izgaraya doner */
.lg-head:has(.lg-tcover) {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 18px;
  align-items: start;
}

.lg-tcover {
  grid-row: 1 / span 2;
  margin: 3px 0 0;
  overflow: hidden;
  border: 1px solid var(--lg-line);
  border-radius: 14px;
  background: #eef5fc;
}

.lg-tcover img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .25, 1);
}

.lgroup:hover .lg-tcover img {
  transform: scale(1.05);
}

@media (max-width: 760px) {
  .lg-head:has(.lg-tcover) {
    grid-template-columns: 68px minmax(0, 1fr);
    column-gap: 14px;
  }
}

/* ── 3) hafif mavi zeminli kart ── */
/* cok hafif: neredeyse beyaz, ustte sadece bir tik mavi */
.lgroup--tint {
  border-color: #e2ecf7;
  background: linear-gradient(180deg, #f7fbff 0%, #fff 38%);
}

/* ── 4) iki sutunlu liste ── */
/* sutun sirali: 1-10 solda, 11-20 sagda (okuma yonu dikey) */
.lg-list--split {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(10, auto);
  column-gap: 20px;
}

.lg-list--split li + li {
  border-top: 0;
}

.lg-list--split li {
  border-top: 1px solid var(--lg-line);
}

/* her sutunun ilk ogesi cizgisiz (20 oge: 1. ve 11.) */
.lg-list--split li:first-child,
.lg-list--split li:nth-child(11) {
  border-top: 0;
}

.lg-list--split a {
  gap: 9px;
  padding: 8px 8px;
  margin: 0 -8px;
}

.lg-list--split .lg-text strong {
  font-size: 13px;
}

.lg-list--split .lg-text small {
  font-size: 11px;
}

/* dar sutunda ok isareti yer kaplamasin */
.lg-list--split a > .icon {
  display: none;
}

@media (max-width: 700px) {
  .lg-list--split {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .lg-list--split li:nth-child(11) {
    border-top: 1px solid var(--lg-line);
  }

  .lg-list--split a > .icon {
    display: block;
  }
}

@media (max-width: 620px) {
  .lg-feature {
    margin: 16px 18px 0;
  }
}

/* hekim kartlarinda kareler portre: yuz ustte kalsin */
.lg-thumb--face img {
  object-position: center 22%;
}


/* ===== assets/css/src/06-pages/30-dest-ticker.css ===== */
/* Destinasyon şeridi (.dest-ticker, .dt-*). */

/* ══════════════════════════════════════════════════════════════
35: Destinasyon seridi (.dest-ticker)
Hero'nun hemen altinda, kenardan kenara, radius'suz bir bant.
Hero ile ayni lacivert zemin: iki blok bitisik gorunur.
══════════════════════════════════════════════════════════════ */
.dest-ticker {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgb(255 255 255 / 3%);
  background: #0e2c56;
}

/* kenarlarda bulut gibi solma: seffaflik degil, bandin KENDI rengi
(mask kullanilinca altindaki beyaz sayfa siziyordu) */
.dest-ticker::before,
.dest-ticker::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: clamp(70px, 12%, 190px);
  pointer-events: none;
}

.dest-ticker::before {
  left: 0;
  background: linear-gradient(90deg, #0e2c56 12%, rgba(14, 44, 86, 0) 100%);
}

.dest-ticker::after {
  right: 0;
  background: linear-gradient(270deg, #0e2c56 12%, rgba(14, 44, 86, 0) 100%);
}

.dt-track {
  display: flex;
  align-items: center;
  width: max-content;
  padding: 13px 0;
  animation: fm-ticker 78s linear infinite;
}

/* hero altindaki serit uzerine gelince durmasin: kesintisiz aksin */
.dest-ticker:hover .dt-track {
  animation-play-state: running;
}

.dt-item {
  color: rgba(255, 255, 255, .74);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3px;
  white-space: nowrap;
}

.dt-dot {
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  margin: 0 16px;
  border-radius: 50%;
  background: rgba(126, 208, 255, .55);
}

@media (max-width: 620px) {
  .dt-track {
    padding: 11px 0;
    animation-duration: 56s;
  }

  .dt-item {
    font-size: 12px;
  }

  .dt-dot {
    margin: 0 12px;
  }
}


/* ===== assets/css/src/06-pages/40-article.css ===== */
/* Makale / blog sayfası: okuma ilerlemesi, makale hero'su, gövde, kenar sütunu, içindekiler, kenar formu (.post-*, .pr-*, .side-*, .toc-*, .sf-*). */

/* ══════════════════════════════════════════════════════════════
61: Blog / makale sayfasi (hospital.html)
Koyu hero (metin solda, gorsel sagda) + beyaz zeminde iki sutun:
solda cercevesiz makale, sagda yapiskan kenar sutunu — okudukca
dolan icindekiler ve lacivert form. Mobilde icindekiler alttan
acilan panele, yuzen bir dugmeye baglanir. Renkler ve olculer
tema degiskenlerinden gelir; sayfaya ozel yeni bir palet yok.
══════════════════════════════════════════════════════════════ */
/* ── okuma ilerlemesi ── */
.post-progress {
  position: fixed;
  z-index: 120;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  pointer-events: none;
}

.post-progress .pp-bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #5cc0ef 0%, #33a9e4 55%, #1187ce 100%);
  box-shadow: 0 0 14px -2px rgba(30, 159, 224, .7);
  transition: width .1s linear;
}

.post-hero {
  display: grid;
  width: 100%;
  max-width: none;
  align-items: center;
  gap: 44px;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  text-align: left;
}

.post-hero-copy {
  display: grid;
  justify-items: start;
}

/* hero ortalamasi bu sayfada sola cekilir */
.post-hero .crumbs {
  margin: 0 0 16px;
  text-align: left;
}

.post-hero .crumbs ol {
  justify-content: flex-start;
}

.post-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(28px, 2.9vw, 44px);
  letter-spacing: -1.1px;
  line-height: 1.14;
}

/* spot: bir tik kucuk, daha sakin */
.post-lead {
  max-width: 560px;
  margin: 0 0 22px;
  color: rgba(216, 233, 252, .78);
  font-size: 14.5px;
  line-height: 1.7;
}

/* tarih / sure / kontrol: yatay hap seridi */
.post-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pm-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 11px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgba(226, 239, 252, .9);
  font-size: 12.5px;
  font-weight: 600;
  transition: border-color .2s ease, background .2s ease;
}

.pm-item:hover {
  border-color: rgba(126, 208, 255, .4);
  background: rgba(255, 255, 255, .11);
}

.pm-item .icon {
  width: 14px;
  height: 14px;
  color: #7ed0ff;
}

/* hero gorseli: cam cerceveli kart */
.post-hero-media {
  margin: 0;
}

.post-hero-media img {
  display: block;
  width: 100%;
  height: clamp(220px, 26vw, 330px);
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 20px;
  background: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 34px 70px -40px rgba(0, 0, 0, .9);
  object-fit: cover;
}

.post-hero-media figcaption {
  margin-top: 11px;
  padding-left: 12px;
  border-left: 2px solid var(--accent);
  color: rgba(216, 233, 252, .6);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ── iki sutunlu govde ── */
.post-body {
  padding-top: 38px;
  padding-bottom: 66px;
  background-color: #fff;
}

.post-layout {
  display: grid;
  align-items: start;
  gap: 34px;
  grid-template-columns: minmax(0, 1fr) 344px;
}

/* ── makale: cerceve yok, yazi dogrudan beyaz zeminin uzerinde ── */
.post-article {
  min-width: 0;
  padding: 15px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
}

.post-article > p {
  margin: 0 0 20px;
  color: #38495f;
  font-size: 16.5px;
  line-height: 1.78;
}

/* giris paragrafi: daha buyuk, ilk harfi dusuk */
.post-intro {
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: var(--navy-dark) !important;
}

.post-intro::first-letter {
  float: left;
  margin: 6px 12px 0 0;
  color: var(--accent-dark);
  font-size: 58px;
  font-weight: 800;
  line-height: .8;
}

.post-article > p > a,
.post-faq p a {
  border-bottom: 1px solid rgba(30, 159, 224, .4);
  color: var(--accent-dark);
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}

.post-article > p > a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* bolum basliklari: numarali, altinda kisa vurgu cizgisi */
.post-article h2 {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 46px 0 18px;
  padding: 0 0 14px;
  border: 0;
  color: var(--navy-dark);
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -.6px;
  line-height: 1.25;
  scroll-margin-top: 96px;
}

.post-article h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 52px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), rgba(30, 159, 224, .15));
}

.post-article h2 .h-no {
  flex: 0 0 auto;
  color: rgba(30, 159, 224, .55);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
}

/* kisa cevap kutusu */
.post-quick {
  position: relative;
  margin: 0 0 22px;
  padding: 22px 24px 22px 26px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0e2c56 0%, #14417d 100%);
  color: #fff;
  overflow: hidden;
}

.post-quick::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(56, 178, 235, .45), rgba(56, 178, 235, 0));
  pointer-events: none;
}

.pq-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: #7ed0ff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pq-eyebrow .icon {
  width: 15px;
  height: 15px;
}

.post-quick p {
  position: relative;
  margin: 0;
  color: rgba(226, 239, 252, .9);
  font-size: 15.5px;
  line-height: 1.7;
}

/* sayi seridi */
.post-stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.post-stats li {
  display: grid;
  gap: 4px;
  padding: 16px 16px 15px;
  border: 1px solid #e3ecf7;
  border-radius: 14px;
  background: #fbfdff;
}

.post-stats strong {
  color: var(--navy-dark);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
}

.post-stats em {
  color: var(--accent);
  font-style: normal;
}

.post-stats span {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

/* ozet kutusu */
.post-keys {
  margin: 0 0 30px;
  padding: 22px 24px 24px;
  border: 1px solid #d9e9f8;
  border-radius: 16px;
  background: linear-gradient(180deg, #f3f9ff 0%, #fbfdff 100%);
}

.pk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pk-eyebrow .icon {
  width: 15px;
  height: 15px;
}

.post-keys ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-keys li {
  position: relative;
  padding-left: 24px;
  color: #33455c;
  font-size: 15px;
  line-height: 1.6;
}

.post-keys li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(30, 159, 224, .16);
}

/* uyari / ipucu kutusu */
.post-callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 26px 0;
  padding: 18px 20px;
  border: 1px solid #e3ecf7;
  border-left: 3px solid var(--accent);
  border-radius: 0 14px 14px 0;
  background: #f7fbff;
}

.post-callout .pc-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 10px;
  background: rgba(30, 159, 224, .12);
  color: var(--accent-dark);
}

.post-callout .icon {
  width: 18px;
  height: 18px;
}

.post-callout p {
  margin: 0;
  color: #33455c;
  font-size: 15px;
  line-height: 1.65;
}

.post-callout strong {
  color: var(--navy-dark);
}

.post-callout--tip {
  border-left-color: #f0b429;
  background: #fffbf2;
}

.post-callout--tip .pc-icon {
  background: rgba(240, 180, 41, .16);
  color: #b07a00;
}

/* inceleme akisi: dort adimli yatay serit */
.post-steps {
  position: relative;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.post-steps li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 18px 16px 16px;
  border: 1px solid #e3ecf7;
  border-radius: 14px;
  background: #fff;
}

.post-steps li::after {
  content: "";
  position: absolute;
  top: 30px;
  right: -13px;
  width: 14px;
  height: 2px;
  background: #cfe2f5;
}

.post-steps li:last-child::after {
  display: none;
}

.ps-no {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  margin-bottom: 4px;
  border-radius: 9px;
  background: var(--navy-dark);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
}

.post-steps strong {
  color: var(--navy-dark);
  font-size: 14.5px;
  letter-spacing: -.2px;
}

.post-steps small {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* olcut listesi: agirlik rozeti + agirlik cubugu */
.post-criteria {
  display: grid;
  gap: 10px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.post-criteria li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 15px 18px 16px;
  border: 1px solid #e8eff8;
  border-radius: 14px;
  background: #fbfdff;
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.post-criteria li:hover {
  border-color: #cfe4f7;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -20px rgba(12, 38, 74, .5);
}

.pcr-weight {
  display: grid;
  width: 54px;
  height: 40px;
  flex: 0 0 54px;
  place-items: center;
  border-radius: 10px;
  background: var(--navy-dark);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.3px;
}

.pcr-body {
  display: grid;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.pcr-body strong {
  color: var(--navy-dark);
  font-size: 15.5px;
}

.pcr-body small {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.pcr-bar {
  display: block;
  height: 4px;
  margin-top: 6px;
  border-radius: 4px;
  background: #e6eef8;
  overflow: hidden;
}

.pcr-bar::after {
  content: "";
  display: block;
  width: calc(var(--w, 0) * 1%);
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #5cc0ef, #1187ce);
  transform-origin: left;
  transition: transform .8s cubic-bezier(.2, .7, .25, 1);
}

/* alinti */
.post-quote {
  position: relative;
  margin: 30px 0;
  padding: 28px 30px 26px 34px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #0e2c56 0%, #14417d 100%);
  color: #fff;
  overflow: hidden;
}

.post-quote .pq-mark {
  position: absolute;
  top: -26px;
  left: 18px;
  color: rgba(126, 208, 255, .18);
  font-size: 150px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.post-quote p {
  position: relative;
  margin: 0 0 12px;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 600;
  letter-spacing: -.3px;
  line-height: 1.5;
}

.post-quote cite {
  position: relative;
  color: rgba(216, 233, 252, .7);
  font-size: 13px;
  font-style: normal;
}

/* siralama listesi: numara + kucuk gorsel + govde */
.post-rank {
  display: grid;
  gap: 12px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.post-rank li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid #e8eff8;
  border-radius: 16px;
  background: #fff;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.post-rank li:hover {
  border-color: #cfe4f7;
  transform: translateY(-1px);
  box-shadow: 0 16px 34px -26px rgba(12, 38, 74, .55);
}

.pr-no {
  flex: 0 0 auto;
  min-width: 34px;
  color: #cddcec;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
}

.post-rank li:nth-child(-n + 3) .pr-no {
  background: linear-gradient(135deg, #5cc0ef, #1187ce);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pr-thumb {
  width: 92px;
  height: 72px;
  flex: 0 0 92px;
  border-radius: 12px;
  background: #eef4fb;
  object-fit: cover;
}

.pr-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.pr-body > strong {
  color: var(--navy-dark);
  font-size: 16.5px;
  letter-spacing: -.2px;
}

.pr-body > small {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}

.pr-body > small .flag,
.post-table .flag {
  width: 18px;
  height: 13px;
  border: 1px solid #e3ecf7;
  border-radius: 3px;
  object-fit: cover;
}

.pr-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0 2px;
}

.pr-chips span {
  padding: 4px 10px;
  border: 1px solid #dceaf7;
  border-radius: 999px;
  background: #f4f9ff;
  color: var(--accent-dark);
  font-size: 11.5px;
  font-weight: 600;
}

.pr-body p {
  margin: 4px 0 0;
  color: #4a5c72;
  font-size: 14.5px;
  line-height: 1.6;
}

/* tablo */
.post-table-wrap {
  max-width: 100%;
  margin: 0 0 8px;
  overflow-x: auto;
  border: 1px solid #e8eff8;
  border-radius: 14px;
}

.post-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.post-table th,
.post-table td {
  padding: 13px 16px;
  border-bottom: 1px solid #eef4fb;
  text-align: left;
  white-space: nowrap;
}

.post-table td:last-child,
.post-table th:last-child {
  min-width: 150px;
  white-space: normal;
}

.post-table thead th {
  background: #f7fbff;
  color: var(--navy-dark);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.post-table tbody th {
  color: var(--navy-dark);
  font-weight: 700;
}

.post-table tbody th .flag {
  display: inline-block;
  margin-right: 8px;
  vertical-align: -2px;
}

.post-table tbody td {
  color: #4a5c72;
}

.post-table tbody td b {
  color: var(--accent-dark);
  font-weight: 700;
}

.post-table tbody tr:hover td,
.post-table tbody tr:hover th {
  background: #fbfdff;
}

.post-table tbody tr:last-child th,
.post-table tbody tr:last-child td {
  border-bottom: 0;
}

/* kontrol listesi */
.post-check {
  display: grid;
  gap: 9px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  counter-reset: check;
}

.post-check li {
  position: relative;
  padding: 12px 16px 12px 52px;
  border: 1px solid #e8eff8;
  border-radius: 12px;
  background: #fbfdff;
  color: #33455c;
  font-size: 15px;
  line-height: 1.55;
  counter-increment: check;
  transition: border-color .2s ease, background .2s ease;
}

.post-check li:hover {
  border-color: #cfe4f7;
  background: #fff;
}

.post-check li::before {
  content: counter(check, decimal-leading-zero);
  position: absolute;
  top: 11px;
  left: 14px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 8px;
  background: rgba(30, 159, 224, .12);
  color: var(--accent-dark);
  font-size: 11.5px;
  font-weight: 800;
}

/* sss */
.post-faq {
  display: grid;
  gap: 10px;
  margin-bottom: 30px;
}

.post-faq details {
  border: 1px solid #e8eff8;
  border-radius: 14px;
  background: #fbfdff;
  transition: border-color .2s ease, background .2s ease;
}

.post-faq details[open] {
  border-color: #cfe4f7;
  background: #fff;
}

.post-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  color: var(--navy-dark);
  cursor: pointer;
  font-size: 15.5px;
  font-weight: 700;
  list-style: none;
}

.post-faq summary::-webkit-details-marker {
  display: none;
}

.post-faq summary::after {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f76b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s ease;
}

.post-faq details[open] summary::after {
  transform: rotate(45deg);
}

.post-faq p {
  margin: 0;
  padding: 0 18px 17px;
  color: #4a5c72;
  font-size: 15px;
  line-height: 1.7;
}

/* paylasim + yazar */
.post-foot {
  display: grid;
  gap: 16px;
  margin: 34px 0 0;
  padding-top: 24px;
  border-top: 1px solid #eaf1f9;
}

.post-share {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ps-label {
  margin-right: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ps-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid #dfe9f5;
  border-radius: 999px;
  background: #fff;
  color: var(--navy-dark);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.ps-btn:hover {
  border-color: var(--accent);
  background: rgba(30, 159, 224, .08);
  color: var(--accent-dark);
  transform: translateY(-1px);
}

.ps-btn .icon {
  width: 15px;
  height: 15px;
}

.ps-btn.is-copied {
  border-color: #bfe6cf;
  background: #f0fbf5;
  color: #1c7a4a;
}

.post-author {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 24px;
  border: 1px solid #e3ecf7;
  border-radius: 18px;
  background: #f7fbff;
}

.post-author img {
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  border: 1px solid #dceaf7;
  border-radius: 999px;
  background: #fff;
  object-fit: cover;
}

.pa-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--accent-dark);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.post-author strong {
  display: block;
  margin-bottom: 6px;
  color: var(--navy-dark);
  font-size: 16.5px;
}

.post-author p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
}

/* makale sonu cagri bandi */
.post-cta {
  position: relative;
  display: grid;
  align-items: center;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 34px 0 0;
  padding: 30px 32px;
  border-radius: 20px;
  background: linear-gradient(140deg, #0e2c56 0%, #123a70 55%, #0b2244 100%);
  color: #fff;
  overflow: hidden;
}

.pcta-glow {
  position: absolute;
  top: -120px;
  right: -60px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(56, 178, 235, .42), rgba(56, 178, 235, 0));
  pointer-events: none;
}

.pcta-body {
  position: relative;
}

.pcta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: #7ed0ff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pcta-eyebrow .icon {
  width: 16px;
  height: 16px;
}

.post-cta h2 {
  margin: 0 0 8px;
  padding: 0;
  color: #fff;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -.5px;
}

.post-cta h2::after {
  display: none;
}

.post-cta p {
  max-width: 560px;
  margin: 0;
  color: rgba(216, 233, 252, .78);
  font-size: 14.5px;
  line-height: 1.65;
}

.pcta-actions {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.pcta-go {
  min-width: 190px;
  justify-content: center;
  border: 0;
  background: linear-gradient(135deg, #5cc0ef 0%, #33a9e4 55%, #1187ce 100%);
  box-shadow: 0 14px 30px -14px rgba(17, 135, 206, .8);
}

.pcta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(216, 233, 252, .8);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

.pcta-ghost .icon {
  width: 15px;
  height: 15px;
  transition: transform .2s ease;
}

.pcta-ghost:hover {
  color: #fff;
}

.pcta-ghost:hover .icon {
  transform: translateX(3px);
}

/* ilgili yazilar */
.post-related {
  margin-top: 36px;
}

.post-related h2 {
  margin: 0 0 16px;
}

.pr-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pr-card {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 18px;
  border: 1px solid #e8eff8;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.pr-card:hover {
  border-color: #cfe4f7;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -26px rgba(12, 38, 74, .55);
}

.prc-tag {
  color: var(--accent-dark);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.pr-card strong {
  color: var(--navy-dark);
  font-size: 15.5px;
  letter-spacing: -.2px;
  line-height: 1.35;
}

.pr-card small {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

/* ── kenar sutunu ──
Sutun makale boyunca uzar; icindekiler tepede yapisir.
- Ikisi birlikte ekrana sigiyorsa (JS .is-fit verir): icindekiler
ustte, form onun altinda; ikisi de yapisik.
- Sigmiyorsa: form ustte akista kalir (kaydirinca gider),
icindekiler onun altindan gelip tepede yapisir.
Boylece ne ic kaydirma ne kesilme ne ust uste binme olur. */
.post-side {
  display: grid;
  align-self: stretch;
  align-content: start;
  gap: 16px;
  min-width: 0;
}

@media (min-width: 981px) {
  /* sigmayan mod: form ustte akista, icindekiler tek basina yapisik */
  .side-toc {
    position: sticky;
    z-index: 2;
    top: 24px;
  }

  .post-side:not(.is-fit) .side-form {
    order: -1;
  }

  /* sigan mod: sutunun tamami tek parca yapisir; icte ayri sticky yok,
  boylece makale sonunda iki kart birbirine binmez */
  .post-side.is-fit {
    position: sticky;
    top: 24px;
    align-self: start;
  }

  .post-side.is-fit .side-toc,
  .post-side.is-fit .side-form {
    position: static;
  }
}

.side-card {
  padding: 20px 22px;
  border: 1px solid #e3ecf7;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(12, 38, 74, .04), 0 18px 40px -34px rgba(12, 38, 74, .4);
}

.sc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--navy-dark);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.sc-title .icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

/* ── icindekiler ── */
.side-toc {
  padding: 16px 16px 12px;
  background: radial-gradient(180px 120px at 100% 0%, rgba(30, 159, 224, .1), rgba(30, 159, 224, 0) 70%), #fff;
}

.toc-close {
  display: none;
}

.toc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eaf1f9;
}

/* halka: okunan yuzde */
.toc-ring {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
}

/* yalniz halka svg'si doner; icindeki liste ikonu (.icon) degil */
.toc-ring svg:not(.icon),
.toc-fab-ring svg:not(.icon) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.toc-ring-track {
  fill: none;
  stroke: #e6eef8;
  stroke-width: 3.5;
}

.toc-ring-fill {
  fill: none;
  stroke: url(#toc-grad);
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 125.66;
  stroke-dashoffset: 125.66;
  transition: stroke-dashoffset .35s cubic-bezier(.2, .7, .25, 1);
}

.toc-ring-pct {
  position: relative;
  color: var(--navy-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -.2px;
}

.toc-head-text {
  display: grid;
  gap: 2px;
}

.toc-head-text strong {
  color: var(--navy-dark);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.toc-head-text small {
  color: var(--muted);
  font-size: 12.5px;
}

/* govde: sol ray + liste */
.toc-body {
  position: relative;
  padding-left: 4px;
}

.toc-rail {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 15px;
  width: 2px;
  border-radius: 2px;
  background: #e6eef8;
}

.toc-rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, #5cc0ef, #1187ce);
  box-shadow: 0 0 10px -2px rgba(30, 159, 224, .7);
  transition: height .35s cubic-bezier(.2, .7, .25, 1);
}

.toc-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* girişte kademeli belirir */
.toc-list li {
  animation: fm-toc-in .5s cubic-bezier(.2, .7, .25, 1) calc(.08s + var(--i, 0) * .06s) both;
}

.toc-list a {
  position: relative;
  display: grid;
  align-items: center;
  gap: 12px;
  grid-template-columns: 24px minmax(0, 1fr);
  padding: 6px 10px 6px 0;
  border-radius: 10px;
  color: #4a5c72;
  font-size: 13.5px;
  line-height: 1.4;
  text-decoration: none;
  transition: color .2s ease, background .2s ease;
}

.toc-list a:hover {
  color: var(--navy-dark);
}

.toc-list a:hover .toc-text {
  transform: translateX(2px);
}

/* dugum: ray uzerindeki daire */
.toc-node {
  position: relative;
  z-index: 1;
  display: block;
  width: 22px;
  height: 22px;
  border: 2px solid #d5e2f0;
  border-radius: 50%;
  background: #fff;
  color: #fff;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

/* tik (okunmus) ve ic nokta (okunan) ayni merkezde ust uste durur */
.toc-node .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.4);
  transition: opacity .25s ease, transform .25s ease;
}

.toc-node::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .25s ease, transform .25s ease;
}

.toc-text {
  display: block;
  transition: transform .2s ease;
}

/* okunmus */
.toc-list li.is-done a {
  color: #8a9bb0;
}

.toc-list li.is-done .toc-node {
  border-color: var(--accent);
  background: var(--accent);
}

.toc-list li.is-done .toc-node .icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* okunmakta olan */
.toc-list li.is-active a {
  color: var(--navy-dark);
  font-weight: 700;
}

.toc-list li.is-active .toc-node {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(30, 159, 224, .14);
}

.toc-list li.is-active .toc-node::after {
  opacity: 1;
  transform: scale(1);
}

.toc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eaf1f9;
}

.toc-top {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease;
}

.toc-top:hover {
  color: var(--accent-dark);
}

.toc-top .icon {
  width: 14px;
  height: 14px;
}

/* mobil: yuzen dugme ve ortu — masaustunde yok */
.toc-fab,
.toc-veil {
  display: none;
}

/* ── kenar formu: lacivert cam kart ── */
.side-form {
  position: relative;
  overflow: hidden;
  padding: 20px 20px 18px;
  border-color: transparent;
  background: radial-gradient(120% 90% at 100% 0%, rgba(56, 178, 235, .28) 0%, rgba(56, 178, 235, 0) 55%), linear-gradient(160deg, #0e2c56 0%, #123a70 52%, #0b2244 100%);
  box-shadow: 0 1px 2px rgba(4, 14, 30, .3), 0 30px 60px -38px rgba(4, 14, 30, .95);
}

/* ust kenarda ince vurgu cizgisi */
.side-form::before {
  content: "";
  position: absolute;
  top: 0;
  right: 22px;
  left: 22px;
  height: 1px;
  background: linear-gradient(90deg, rgba(126, 208, 255, 0), rgba(126, 208, 255, .7), rgba(126, 208, 255, 0));
}

.side-form .sc-title {
  position: relative;
  z-index: 1;
  margin-bottom: 8px;
  color: #fff;
}

.side-form .sc-title .icon {
  color: #7ed0ff;
}

.side-form .sf-note {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  color: rgba(216, 233, 252, .76);
  font-size: 13px;
  line-height: 1.55;
}

.sf-field {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
  margin-bottom: 9px;
}

.sf-field > span {
  color: rgba(216, 233, 252, .72);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sf-field input,
.sf-field select {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font: inherit;
  font-size: 14.5px;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.sf-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ed0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 13px center / 15px 15px no-repeat, rgba(255, 255, 255, .07);
  cursor: pointer;
}

.sf-field select option {
  color: #14233b;
  background: #fff;
}

.sf-field input::placeholder {
  color: rgba(216, 233, 252, .42);
}

.sf-field input:hover,
.sf-field select:hover {
  border-color: rgba(255, 255, 255, .3);
  background-color: rgba(255, 255, 255, .1);
}

.sf-field input:focus,
.sf-field select:focus {
  border-color: rgba(126, 208, 255, .8);
  outline: 0;
  background-color: rgba(255, 255, 255, .12);
  box-shadow: 0 0 0 3px rgba(30, 159, 224, .22);
}

.sf-go {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 4px;
  justify-content: center;
  border: 0;
  background: linear-gradient(135deg, #5cc0ef 0%, #33a9e4 55%, #1187ce 100%);
  box-shadow: 0 14px 30px -14px rgba(17, 135, 206, .8);
}

.sf-go:hover {
  background: linear-gradient(135deg, #7acdf4 0%, #45b4ea 55%, #1e9fe0 100%);
}

.sf-legal {
  position: relative;
  z-index: 1;
  margin: 10px 0 0;
  color: rgba(216, 233, 252, .5);
  font-size: 11.5px;
  line-height: 1.55;
}

.sf-legal a {
  color: rgba(126, 208, 255, .95);
}

/* onay mesaji gonderilene kadar gizli: hidden ozniteligi kazanmali */
.sf-done[hidden] {
  display: none;
}

.sf-done {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(88, 214, 154, .4);
  border-radius: 12px;
  background: rgba(47, 208, 138, .14);
  color: #a6f0cd;
  font-size: 13.5px;
  line-height: 1.5;
}

.sf-done .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-top: 1px;
}

@media (max-width: 1100px) {
  /* ── duyarli davranis ── */
  .post-layout {
    grid-template-columns: minmax(0, 1fr) 306px;
  }

  .post-hero {
    gap: 30px;
  }

  .post-stats,
  .post-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .post-steps li::after {
    display: none;
  }
}

@media (max-width: 980px) {
  /* hero tek sutun: gorsel metnin altina */
  .post-hero {
    gap: 26px;
    grid-template-columns: minmax(0, 1fr);
  }

  .post-hero-media img {
    height: clamp(200px, 34vw, 280px);
  }

  /* tek sutun: form makalenin altina */
  .post-layout {
    display: flex;
    gap: 18px;
    flex-direction: column;
  }

  .post-article,
  .side-form {
    width: 100%;
    min-width: 0;
  }

  .post-side {
    display: contents;
  }

  /* tek sutunda form daima makalenin altinda, yapiskan degil */
  .post-side .side-form {
    position: static;
    order: 0;
  }

  /* icindekiler: alttan acilan panel */
  .side-toc {
    position: fixed;
    z-index: 160;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: min(78vh, 560px);
    padding: 22px 20px 20px;
    border: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: none;
    overflow-y: auto;
    visibility: hidden;
    transform: translateY(105%);
    transition: transform .38s cubic-bezier(.2, .7, .25, 1), visibility 0s .38s;
  }

  .side-toc.is-open {
    visibility: visible;
    box-shadow: 0 -30px 60px -30px rgba(4, 14, 30, .5);
    transform: none;
    transition: transform .38s cubic-bezier(.2, .7, .25, 1), visibility 0s;
  }

  /* panelin ustunde tutamac */
  .side-toc::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 40px;
    height: 4px;
    border-radius: 4px;
    background: #d5e2f0;
    transform: translateX(-50%);
  }

  .toc-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 1px solid #e3ecf7;
    border-radius: 999px;
    background: #f7fbff;
    color: var(--navy-dark);
    cursor: pointer;
  }

  .toc-close .icon {
    width: 15px;
    height: 15px;
  }

  .toc-head {
    padding-right: 44px;
  }

  .toc-list li {
    animation: none;
  }

  .toc-list a {
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 14.5px;
  }

  /* yuzen dugme */
  .toc-fab {
    position: fixed;
    z-index: 150;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 8px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: #0b1f3a;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 18px 40px -16px rgba(4, 14, 30, .8);
    font: inherit;
    text-align: left;
    transition: transform .25s ease, opacity .25s ease;
  }

  .toc-fab:active {
    transform: scale(.97);
  }

  .toc-fab.is-hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
  }

  .toc-fab-ring {
    position: relative;
    display: grid;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    place-items: center;
  }

  .toc-fab-ring .toc-ring-track {
    stroke: rgba(255, 255, 255, .18);
    stroke-width: 5;
  }

  .toc-fab-ring .toc-ring-fill {
    stroke: #7ed0ff;
    stroke-width: 5;
    stroke-dasharray: 94.25;
    stroke-dashoffset: 94.25;
  }

  .toc-fab-text {
    display: grid;
    gap: 1px;
  }

  .toc-fab-text strong {
    font-size: 13px;
    font-weight: 700;
  }

  .toc-veil {
    position: fixed;
    z-index: 155;
    inset: 0;
    display: block;
    background: rgba(5, 20, 44, .6);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s .3s;
    pointer-events: none;
  }

  .toc-veil.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease, visibility 0s;
    pointer-events: auto;
  }

  body.is-toc-open {
    overflow: hidden;
  }

  .pr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .post-cta {
    grid-template-columns: minmax(0, 1fr);
  }

  .pcta-actions {
    justify-items: start;
  }
}

@media (max-width: 760px) {
  .post-body {
    padding-bottom: 44px;
  }

  .post-article > p {
    font-size: 15.5px;
  }

  .post-intro {
    font-size: 16.5px !important;
  }

  .post-intro::first-letter {
    font-size: 48px;
  }

  .post-hero h1 {
    letter-spacing: -.8px;
  }

  .post-lead {
    font-size: 14px;
  }

  .pm-item {
    padding: 7px 12px 7px 10px;
    font-size: 12px;
  }

  .post-quick,
  .post-keys,
  .post-callout,
  .post-author,
  .post-cta {
    padding: 18px;
  }

  .post-stats {
    gap: 8px;
  }

  .post-stats li {
    padding: 13px 12px;
  }

  .post-stats strong {
    font-size: 22px;
  }

  .post-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .post-author {
    flex-direction: column;
    gap: 12px;
  }

  .post-quote {
    padding: 22px 20px 20px 24px;
  }

  .post-rank li {
    flex-wrap: wrap;
    gap: 12px;
  }

  .pr-thumb {
    width: 74px;
    height: 58px;
    flex-basis: 74px;
  }

  .pr-body {
    flex: 1 1 100%;
  }

  .pr-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .side-card {
    padding: 18px;
  }

  .side-toc {
    padding: 22px 16px 18px;
  }

  .toc-fab {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    left: 12px;
  }
}


/* ===== assets/css/src/06-pages/50-treatment.css ===== */
/* Tekil tedavi sayfası (.treatment-*, .tx-*).
   Hastane sayfasının düzenini kullanır (06-pages/60-hospital.css): ortalı
   hero ve içindeki koyu cam veri kartı (.hd-hero--inset .hd-dash), yapışkan
   bölüm rayı (.hd-nav), açık / tonlu bantlar (.hd-sec, .hd-head), kısa cevap
   (.hd-short), SSS akordeonu (.hd-faq) ve kapanış çağrısı (.hd-close).
   İşaretleme blocks/treatment-hero ve blocks/treatment-body'de. Burada yalnız
   tedaviye özgü farklar var: hero zemini, veri kartındaki fiyat karosu ve
   etiketli künye, bantların üstünde sağda duran başvuru formu, sıralama
   kartları, ülkelere göre fiyat karşılaştırması, makale metni, kaynakça ve
   telefondaki içindekiler paneli. */

/* ── hero arka planı ── */
/* Kayıt kendi görselini taşıyorsa hero zemini o olur (blok, --fm-hero-img'i
   satır içi yazar); taşımıyorsa genel tedavi zeminine düşer. */

.page-hero--treatment .hero-bg::before {
  background-image: var(--fm-hero-img, url("https://findmed.odopreview.com/wp-content/themes/findmed/assets/img/pag-treatment-bg.webp"));
}

/* Hub görselleri açık ve soluk mavidir (ortalama rgb(152,193,223)); sahnedeki
   lacivert gradyan (.hero-stage::after) rengi onların üzerinde üretir. Kayıt
   fotoğrafları ise koyu ve sıcaktır (bu sayfada rgb(136,128,123)), aynı
   gradyanın altında çok daha koyu bir sonuç veriyordu. Fotoğraf hub tonuna
   yaklaştırılır; ikinci bir örtü eklenmez, yoksa renk düzleşir. */

.page-hero--treatment.has-hero-photo .hero-bg::before {
  /* inset: bulanıklık kenarlarda saydamlığı emip soluk bir çerçeve
     bırakıyordu; katman kadrajın dışına taşırılarak kırpılır. */
  inset: -40px;
  filter: grayscale(1) brightness(1.18) contrast(.88) sepia(1) hue-rotate(178deg) saturate(2) blur(5px);
}

/* ══════════════════════════════════════════════════════════════
   Hero veri kartı: üstte üç ülke karosu, altta etiketli künye
   ──────────────────────────────────────────────────────────────
   Fiyat karosu 5 Ekim 2026'da kalktı; yerine en çok tercih edilen üç ülke
   karosu girdi (aynı cam malzeme): etiket, bayrak + ülke adı, altında
   ziyaretçinin konumuna tahmini uçuş mesafesi (treatment-distance.js). Künye
   beş maddedir ve her maddenin üstünde küçük etiketi vardır.
   ══════════════════════════════════════════════════════════════ */

/* kart: yalnız "Top destinations" — solda şehir/ülke satırları, sağda küre; dar ve ortalı
   (kullanıcı isteği, 7 Ekim 2026: künye kalktı, kart kompakt ve tek amaçlı) */
.hd-dash.tx-dash {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  width: min(100%, 560px);
  margin-inline: auto;
  padding: 16px 20px 16px 22px;
}

.tx-dash-dests {
  display: grid;
  gap: 8px;
  align-content: center;
  min-width: 0;
}

/* küre: hastane hero'sundaki .hd-orb-globe ölçüsü; tuval ışık payı için 12px taşar */
.tx-globe {
  position: relative;
  display: block;
  width: 112px;
  height: 112px;
}

.tx-globe canvas {
  position: absolute;
  top: -12px;
  left: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  opacity: 0;
  transition: opacity .9s ease;
}

.tx-globe.is-on canvas {
  opacity: 1;
}

/* satırlar: bayrak + şehir, ülke solda; süre sağda; satır şehir sayfasına gider */
.tx-dash-dest {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tx-dest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
}

.tx-dest + .tx-dest {
  border-top: 1px solid rgba(255, 255, 255, .1);
}

/* .hd-dash-v kuralı sonra yüklenen 60-hospital.css'te display:block diyor; özgüllük artırıldı. */
.hd-dash-v.tx-dest-v {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition: color .2s;
}

a.hd-dash-v.tx-dest-v:hover b {
  color: #7ed0ff;
}

.hd-dash-v.tx-dest-v b {
  font-weight: 800;
  transition: color .2s;
}

/* "Istanbul, Turkey": şehir beyaz kalın, ülke soluk; tek öğe (flex boşluğu araya girmesin) */
.tx-dest-name {
  min-width: 0;
  overflow: hidden;
  color: rgba(198, 220, 239, .78);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tx-dest-name b {
  color: #fff;
}

.tx-dest-flag {
  flex: 0 0 auto;
  width: 22px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

/* sağda sayan uçuş süresi; ülke gelene kadar boş (treatment-distance.js).
   Sabit genişlik şart: sayaç her karede uzayıp kısalırken satır yeniden
   dizilince ad ve bayrak titriyordu ("blink"). */
.tx-dest-note {
  flex: 0 0 86px;
  width: 86px;
  text-align: right;
}

.tx-dest-time {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* rakamlar sabit kutuda (2 karakter), birimler küçük ve soluk; sayarken hiçbir şey kaymaz */
.tx-dest-time i {
  display: inline-block;
  min-width: 2ch;
  font-style: normal;
  text-align: right;
}

.tx-dest-time small {
  margin: 0 5px 0 2px;
  color: #9fd8ff;
  font-size: .78em;
  font-weight: 700;
}

.tx-dest-time small:last-child {
  margin-right: 0;
}

.tx-dest-time [hidden] {
  display: none;
}

/* ziyaretçinin kendi ülkesi: süre yerine "You are here" */
.tx-dest-time.is-here {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #9fe0ff;
  font-size: 11px;
  font-weight: 700;
}

.tx-dest-time.is-here::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2ee6a8;
  box-shadow: 0 0 6px rgba(46, 230, 168, .9);
}

/* km satırı her ekranda gizli (kullanıcı isteği, 6 Ekim 2026) */
.tx-dest-km {
  display: none;
}

/* telefon: satırlar ve küre yan yana kalır (küre 88px), kart tam genişlik */
@media (max-width: 760px) {
  .hd-dash.tx-dash {
    gap: 14px;
    padding: 12px 14px 12px 16px;
  }

  .tx-globe {
    width: 88px;
    height: 88px;
  }

  .hd-dash-v.tx-dest-v {
    gap: 7px;
    font-size: 14px;
  }

  .tx-dest-name {
    font-size: 0; /* dar ekranda yalnız şehir */
  }

  .tx-dest-name b {
    font-size: 14px;
  }

  .tx-dest {
    gap: 10px;
    padding: 6px 0;
  }

  .tx-dest-note {
    flex-basis: 78px;
    width: 78px;
  }

  .tx-dest-time {
    font-size: 12.5px;
  }
}

/* ══════════════════════════════════════════════════════════════
   Gövde: beyaz bantlar + sağda form sütunu
   ──────────────────────────────────────────────────────────────
   Bölümler bant (.hd-sec), hepsi beyaz. Geniş ekranda form sağda yapışkan,
   kabın sağ kenarına dayalı; içerik solda formun yanına kadar uzanır, arada
   yalnız --tx-side-gap kadar boşluk kalır (kullanıcı içeriği dar buldu,
   önceki 780px sınırı kaldırıldı). Formun ayrı zemini ve ayracı yok.
   Form bantların üstünde ayrı bir katmandır (.tx-bands-side); dar ekranda
   akışa döner, kaynakçanın altına iner.
   ══════════════════════════════════════════════════════════════ */

.tx-bands {
  /* formun eni ve içerikle arasındaki boşluk; içeriğin eni ikisinden çıkar */
  --tx-side-w: 344px;
  --tx-side-gap: 48px;
  position: relative;
  /* içerik zemini beyaz; sayfa kabuğunun rengine bırakılmaz */
  background: #fff;
}

@media (max-width: 1180px) {
  .tx-bands {
    --tx-side-w: 306px;
    --tx-side-gap: 36px;
  }
}

@media (min-width: 981px) {
  .tx-sec-main {
    max-width: calc(100% - var(--tx-side-w) - var(--tx-side-gap));
  }

  .tx-bands-side {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
  }

  .tx-bands-side .container {
    display: flex;
    height: 100%;
    justify-content: flex-end;
    /* ilk bandın üst dolgusu (.hd-sec:first-of-type) ve son bandın alt dolgusu */
    padding: 40px 0 66px;
  }

  /* sağ sütun: üstte video (varsa), altında form; sütun bantlar boyunca uzar
     ki form içinde yapışkan kalabilsin */
  .tx-bands-side .tx-side-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: var(--tx-side-w);
    pointer-events: auto;
  }

  .tx-bands-side .tx-form {
    width: 100%;
  }
}

/* Form rayın 24px altına sabitlenir. Yalnızca ekran formu kırpmadan
   taşıyacak kadar yüksekse: form ~550px, üstünde ray + pay ~82px, altta
   24px. Daha kısa ekranda form sütunun başında kalır, yoksa altı
   erişilmez olurdu. */
@media (min-width: 981px) and (min-height: 700px) {
  .tx-bands-side .tx-form {
    position: sticky;
    top: calc(var(--hd-nav-h) + 24px);
  }
}

@media (max-width: 980px) {
  .tx-bands-side {
    padding: 0 0 52px;
  }
}

/* ── kenar videosu (YouTube Shorts) ──
   Kapak + kırmızı oynat düğmesi; tıklayınca video lightbox'ta açılır
   (hospital.js). Masaüstünde dikey kapak (9:16); telefon ve tablette geniş
   afiş (3:1, .has-wide) tam genişlikte. */
.tx-video {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  background: #0b2347;
  box-shadow: 0 24px 48px -28px rgba(12, 38, 74, .55);
}

.tx-video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.tx-video-play picture,
.tx-video-play img {
  display: block;
  width: 100%;
  height: 100%;
}

.tx-video-play img {
  object-fit: cover;
  transition: transform .5s ease;
}

.tx-video-play:hover img {
  transform: scale(1.03);
}

/* oynat: belirgin kırmızı daire, içinde beyaz üçgen, çevresinde nabız halkası */
.tx-video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #ff0000;
  color: #fff;
  box-shadow: 0 12px 30px rgba(180, 0, 0, .45), 0 0 0 6px rgba(255, 255, 255, .25);
  transform: translate(-50%, -50%);
  transition: transform .2s ease, background-color .2s ease;
}

.tx-video-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 0, 0, .7);
  animation: tx-play-pulse 2s ease-out infinite;
}

@keyframes tx-play-pulse {
  0% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}

.tx-video-icon svg {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  margin-left: 5px;
}

.tx-video-play:hover .tx-video-icon,
.tx-video-play:focus-visible .tx-video-icon {
  background: #e00000;
  transform: translate(-50%, -50%) scale(1.08);
}

@media (max-width: 980px) {
  .tx-video {
    max-width: 360px;
    margin: 0 auto 20px;
  }

  /* geniş afiş kapağı: tam genişlik, 3:1 */
  .tx-video.has-wide {
    max-width: none;
    aspect-ratio: 3 / 1;
  }

  .tx-video.has-wide .tx-video-icon {
    width: 58px;
    height: 58px;
  }

  .tx-video.has-wide .tx-video-icon svg {
    width: 26px;
    height: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tx-video-icon::after {
    animation: none;
  }
}

/* video iki yerde basılır: geniş ekranda sağ sütunda (formun üstü),
   telefon/tablette içeriğin başında (Quick answer altında); form altta kalır */
.tx-video-slot--top {
  display: none;
}

@media (max-width: 980px) {
  .tx-video-slot--side {
    display: none;
  }

  .tx-video-slot--top {
    display: block;
    margin: 22px 0 6px;
  }

  .tx-video-slot--top .tx-video {
    margin-bottom: 0;
  }
}

/* ── video penceresi (lightbox) ── */
.tx-vlb {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 14, 30, .86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .25s ease;
}

.tx-vlb.is-in {
  opacity: 1;
}

.tx-vlb-box {
  position: relative;
  /* Shorts dikey: ekran yüksekliğine sığan 9:16 kutu */
  height: min(86vh, 860px);
  aspect-ratio: 9 / 16;
  max-width: 92vw;
  overflow: hidden;
  border-radius: 18px;
  background: #000;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .55);
  transform: scale(.96);
  transition: transform .25s ease;
}

.tx-vlb.is-in .tx-vlb-box {
  transform: none;
}

.tx-vlb-box iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.tx-vlb-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease;
}

.tx-vlb-close:hover,
.tx-vlb-close:focus-visible {
  background: rgba(255, 255, 255, .28);
}

.tx-vlb-close svg {
  width: 22px;
  height: 22px;
}

/* telefonda kutu genişliğe göre: dikey video ekranın çoğunu kaplar */
@media (max-width: 620px) {
  .tx-vlb {
    padding: 12px;
  }

  .tx-vlb-box {
    width: min(92vw, calc(86vh * 9 / 16));
    height: auto;
  }

  .tx-vlb-close {
    top: 10px;
    right: 10px;
  }
}

html.tx-vlb-open {
  overflow: hidden;
}

/* Kapanıştaki "Ask about this treatment" forma iner: form rayın altında
   kalmasın, telefonda ekranın kenarına yapışmasın. */
.tx-form {
  scroll-margin-top: 16px;
}

@media (min-width: 981px) {
  .tx-form {
    scroll-margin-top: calc(var(--hd-nav-h) + 24px);
  }
}

/* ── kısa cevap + tıbbi uyarı (ilk bölüm) ── */

.tx-short {
  margin: 0 0 16px;
}

.tx-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 34px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.tx-note .icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--accent-dark);
}

.tx-note strong {
  color: var(--ink);
}

/* ══════════════════════════════════════════════════════════════
   Sıralamalar: hub'ın liste kartları (.lgroup), alt alta
   ──────────────────────────────────────────────────────────────
   Kart, başlık, satırlar ve iki sütunlu liste 06-pages/20-list-groups.css'ten
   gelir; kart başlığı burada h3 (görünümü .hd-page .lg-head h3 kuralından).
   Hub'da renk değişkenleri .lg-grid'de tanımlı, burada kapsayıcıda. Hub'ın
   iki sütunlu listesi 20 öğe için yazılmış (10 satır); burada satır sayısı
   öğe sayısından gelir (--tx-rows), ikinci sütunun ilk öğesi .tx-col2.
   ══════════════════════════════════════════════════════════════ */

.tx-ranks {
  --lg-line: #e2ecf7;
  --lg-dim: var(--muted);
  display: grid;
  gap: 22px;
}

.tx-rank .lg-list--split {
  grid-template-rows: repeat(var(--tx-rows, 5), auto);
}

.tx-rank .lg-list--split li.tx-col2 {
  border-top: 0;
}

/* bağlantısı olmayan satır: bağlantılı satırla aynı ölçü, tepkisiz */
.tx-lg-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}

.lg-list--split .tx-lg-row {
  gap: 9px;
  padding: 8px 0;
}

/* ülke satırının başında yıldız yerine bayrak */
.tx-rank-flag img {
  display: block;
  width: 22px;
  height: 16px;
  border: 1px solid rgba(20, 60, 110, .14);
  border-radius: 3px;
  object-fit: cover;
}

@media (max-width: 700px) {
  .tx-rank .lg-list--split {
    grid-template-rows: none;
  }

  .tx-rank .lg-list--split li.tx-col2 {
    border-top: 1px solid var(--lg-line);
  }
}

/* ══════════════════════════════════════════════════════════════
   Fiyat karşılaştırması (5 Ekim 2026 düzeni)
   ──────────────────────────────────────────────────────────────
   Beyaz kutu. Üst şerit: tedavi adı (seçilemez), "yaşadığın ülke" alanı
   (bayraklı, yazdıkça öneren) ve para birimi anahtarı. Altında ülke çipleri
   (seçilen ülke + 10 ülke; tıklanınca satır gizlenir / döner), sonra liste:
   bayrak, ad, seçilen ülkeye göre fark rozeti (yeşil ucuz, kırmızı pahalı),
   fiyatla orantılı çubuk (--w, en pahalı %100; seçilen ülkenin çubuğu açık
   mavi, diğerleri lacivert) ve fiyat. En altta isteğe bağlı "evden teklif"
   kutusu, dipnot ve teklif düğmesi.
   ══════════════════════════════════════════════════════════════ */

/* ── ortak premium zemin (fiyat karşılaştırması + hesap makinesi) ──
   Sol üstte açık, sağ altta çok koyu lacivert geçiş; sağ üstte yumuşak mavi
   parıltı, sol altta hafif ikinci ışık, üst kenarda uçları sönen ışık
   çizgisi. Kullanıcı isteği, 5 Ekim 2026. */
.tx-premium {
  position: relative;
  border: 1px solid rgba(126, 208, 255, .22);
  background:
    radial-gradient(760px 360px at 90% -12%, rgba(126, 208, 255, .3), transparent 70%),
    radial-gradient(560px 340px at 0% 102%, rgba(30, 159, 224, .18), transparent 70%),
    linear-gradient(160deg, #2160ad 0%, #163f7a 36%, #0d2a52 66%, #061833 100%);
  color: #fff;
}

.tx-premium::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 2;
  width: 100%;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(126, 208, 255, .85) 30%, rgba(126, 208, 255, .85) 70%, transparent);
  pointer-events: none;
}

.tx-save {
  --tx-save-green: #7be0a9;
  --tx-save-red: #ffb3ad;
  /* taşma gizlenmez: öneri listesi kutunun dışına da uzanabilir */
  border-radius: var(--hd-radius);
}

/* ── üst şerit ── */
.tx-save-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 24px;
  align-items: end;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--hd-radius) var(--hd-radius) 0 0;
  background: rgba(255, 255, 255, .04);
}

.tx-save-k {
  position: relative;
  min-width: 0;
}

.tx-save-k label,
.tx-save-lbl {
  display: block;
  margin-bottom: 8px;
  color: rgba(169, 225, 255, .85);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* tedavi adı: kartın tepesinde küçük yeşil etiket, iki sütunu kaplar */
.tx-save-tag {
  grid-column: 1 / -1;
  justify-self: start;
  margin-bottom: -4px;
  color: #7be0a9;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.tx-save-k small {
  display: block;
  margin-top: 8px;
  color: rgba(198, 220, 239, .75);
  font-size: 12.5px;
}

/* para birimi anahtarı */
.tx-cur {
  display: inline-flex;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
}

.tx-cur button {
  padding: 10px 16px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: #e3f1fb;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.tx-cur button:hover {
  color: #fff;
}

.tx-cur button.is-on {
  background: #fff;
  color: var(--navy-dark);
}

/* ── yaşadığın ülke: bayraklı, yazdıkça öneren alan ── */
.tx-home {
  position: relative;
  display: block;
  width: 100%;
  max-width: 420px;
}

.tx-home select,
.tx-home-input {
  width: 100%;
  height: 52px;
  padding: 0 44px 0 54px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px;
  /* seçim alanı da koyu zemine göre (kullanıcı isteği, 5 Ekim 2026) */
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  appearance: none;
  cursor: pointer;
}

.tx-home select:hover,
.tx-home-input:hover {
  border-color: rgba(255, 255, 255, .45);
}

.tx-home select:focus-visible,
.tx-home-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(30, 159, 224, .3);
}

.tx-home-input {
  cursor: text;
}

.tx-home-input::placeholder {
  color: rgba(198, 220, 239, .6);
  font-weight: 600;
}

.tx-home-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 300px;
  margin: 0;
  padding: 6px;
  overflow: auto;
  border: 1px solid var(--card-line, #dbe5f0);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 50px -20px rgba(12, 38, 74, .35);
  list-style: none;
}

.tx-home-list [role="option"] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}

.tx-home-list [role="option"][hidden],
.tx-home-empty[hidden] {
  display: none;
}

.tx-home-list [role="option"].is-active {
  background: #eef4fb;
}

.tx-home-list [role="option"] img {
  flex: 0 0 auto;
  width: 22px;
  height: 16px;
  border: 1px solid rgba(20, 60, 110, .14);
  border-radius: 3px;
  object-fit: cover;
}

.tx-home-list [role="option"] span {
  flex: 1 1 auto;
  min-width: 0;
}

.tx-home-list mark {
  background: none;
  color: var(--accent-dark, #0f76b8);
}

.tx-home-list .is-selected {
  color: var(--navy-dark);
}

.tx-home-list .is-selected::after {
  content: "✓";
  color: var(--accent);
  font-weight: 800;
}

/* önerilen ülke etiketi */
.tx-home-list em {
  padding: 2px 8px;
  border-radius: 999px;
  background: #e5f5ec;
  color: #128a4b;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.tx-home-empty {
  padding: 10px;
  color: var(--muted);
  font-size: 13.5px;
}

.tx-home-flag {
  position: absolute;
  top: 50%;
  left: 16px;
  z-index: 1;
  width: 26px;
  height: 19px;
  border: 1px solid rgba(20, 60, 110, .14);
  border-radius: 3px;
  object-fit: cover;
  transform: translateY(-50%);
  pointer-events: none;
}

.tx-home::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.tx-home.is-open::after {
  transform: translateY(-30%) rotate(-135deg);
}

/* ── ülke çipleri ── */
.tx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 16px 24px 4px;
  list-style: none;
}

.tx-chips li[hidden] {
  display: none;
}

.tx-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #e3f1fb;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.tx-chip img {
  width: 16px;
  height: 12px;
  border-radius: 2px;
  object-fit: cover;
  opacity: .55;
}

.tx-chip:hover {
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}

.tx-chip.is-on {
  border-color: var(--accent);
  background: rgba(30, 159, 224, .24);
  color: #fff;
}

.tx-chip.is-on img {
  opacity: 1;
}

.tx-chip.is-home {
  cursor: default;
  border-color: #fff;
  background: #fff;
  color: var(--navy-dark);
}

/* "+ Add country" çipi: kesikli çerçeve; altında arama kutulu küçük açılır liste */
.tx-chip-add {
  position: relative;
}

.tx-chip--add {
  border-style: dashed;
  border-color: rgba(255, 255, 255, .4);
  color: #9fdcff;
}

.tx-chip--add span {
  font-size: 17px;
  line-height: 1;
}

.tx-chip--add:hover,
.tx-chip--add[aria-expanded="true"] {
  border-style: solid;
  border-color: var(--accent);
  background: rgba(30, 159, 224, .24);
  color: #fff;
}

.tx-add-pop {
  position: absolute;
  z-index: 25;
  top: calc(100% + 8px);
  left: 0;
  width: 280px;
  padding: 10px;
  border: 1px solid var(--card-line, #dbe5f0);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 50px -20px rgba(12, 38, 74, .35);
}

.tx-add-pop[hidden] {
  display: none;
}

.tx-add-q {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--card-line, #dbe5f0);
  border-radius: 10px;
  background: #fff;
  color: var(--navy-dark);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}

.tx-add-q:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(30, 144, 255, .18));
}

.tx-add-list {
  max-height: 220px;
  margin: 8px 0 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.tx-add-list button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.tx-add-list button:hover,
.tx-add-list button:focus-visible {
  outline: none;
  background: #eef4fb;
}

.tx-add-list img {
  width: 18px;
  height: 13px;
  border: 1px solid rgba(20, 60, 110, .14);
  border-radius: 2px;
  object-fit: cover;
}

.tx-add-empty {
  padding: 8px 10px;
  color: var(--muted);
  font-size: 13px;
}

/* ── liste ── */
.tx-save-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 10px 12px 4px;
  list-style: none;
}

.tx-srow {
  display: grid;
  grid-template-columns: 22px minmax(0, 290px) minmax(0, 1fr) 110px;
  gap: 14px 16px;
  align-items: center;
  padding: 11px 16px;
  border-radius: 12px;
}

.tx-srow[hidden] {
  display: none;
}

.tx-srow.is-home {
  background: rgba(255, 255, 255, .09);
}

/* "+ Add country" ile gelen satır seçilen ülkenin hemen altına girer ve bir kez parlar */
.tx-srow.is-new {
  animation: tx-row-new 1.8s ease-out;
}

@keyframes tx-row-new {
  0% {
    background: #fff4c2;
    box-shadow: 0 0 0 2px #f2c94c;
  }

  100% {
    background: transparent;
    box-shadow: none;
  }
}

.tx-sflag {
  display: block;
  width: 22px;
  height: 16px;
  border: 1px solid rgba(20, 60, 110, .14);
  border-radius: 3px;
  object-fit: cover;
}

.tx-sname {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
}

/* fark rozeti: adın yanında */
.tx-sval {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #e3f1fb;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tx-srow.is-less .tx-sval {
  background: rgba(18, 138, 75, .32);
  color: var(--tx-save-green);
}

.tx-srow.is-more .tx-sval {
  background: rgba(200, 55, 45, .32);
  color: var(--tx-save-red);
}

.tx-srow.is-home .tx-sval {
  background: #fff;
  color: var(--navy-dark);
}

/* çubuk: fiyatla orantılı (--w); seçilen ülke açık mavi, diğerleri lacivert */
.tx-sbar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
}

.tx-sbar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #9fd3ff;
  transition: width .9s cubic-bezier(.22, .61, .36, 1) calc(var(--i, 0) * 50ms), background-color .3s ease;
}

.tx-save.is-in .tx-sbar i {
  width: var(--w);
}

.tx-srow.is-home .tx-sbar i {
  background: linear-gradient(90deg, #7ed0ff, var(--accent));
}

.tx-sprice {
  justify-self: end;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── evden teklif ── */
.tx-quote {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 6px 20px;
  align-items: center;
  margin: 12px 24px 0;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
}

.tx-quote label {
  grid-column: 1 / -1;
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
}

.tx-quote input {
  height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
}

.tx-quote input::placeholder {
  color: rgba(198, 220, 239, .55);
}

.tx-quote input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(30, 159, 224, .3);
}

.tx-quote p {
  margin: 0;
  color: rgba(198, 220, 239, .85);
  font-size: 14px;
  line-height: 1.5;
}

.tx-quote p.is-more {
  color: var(--tx-save-green);
  font-weight: 700;
}

.tx-quote p.is-less {
  color: var(--tx-save-red);
  font-weight: 700;
}

/* ── dipnot + düğme ── */
.tx-save-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 22px;
}

.tx-save-foot .tx-save-note {
  flex: 1 1 420px;
  max-width: 640px;
  margin: 0;
  color: rgba(198, 220, 239, .8);
}

.tx-save-foot .tx-save-note .icon {
  color: #9fdcff;
}

.tx-save-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}

.tx-save-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -12px rgba(30, 144, 255, .7);
}

.tx-save-cta .icon {
  width: 18px;
  height: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .tx-sbar i {
    transition: none;
  }
}

/* tablet: üst şerit iki satır */
@media (max-width: 980px) {
  .tx-cur {
    justify-self: end;
  }

  .tx-srow {
    grid-template-columns: 22px minmax(0, 230px) minmax(0, 1fr) 96px;
  }
}

/* telefon: her şey tek sütun, çubuk satırın altına iner */
@media (max-width: 620px) {
  .tx-save-top {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px;
  }

  .tx-cur {
    justify-self: start;
  }

  .tx-chips {
    padding: 14px 12px 2px;
  }

  .tx-add-pop {
    width: min(280px, calc(100vw - 48px));
  }

  .tx-save-list {
    padding: 8px;
  }

  .tx-srow {
    grid-template-areas:
      "flag name price"
      "bar bar bar";
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 9px 12px;
    padding: 11px 12px 13px;
  }

  .tx-sflag {
    grid-area: flag;
  }

  .tx-sname {
    grid-area: name;
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  .tx-sprice {
    grid-area: price;
  }

  .tx-sbar {
    grid-area: bar;
    height: 8px;
  }

  .tx-quote {
    grid-template-columns: minmax(0, 1fr);
    margin: 10px 12px 0;
  }

  .tx-save-foot {
    padding: 16px 12px 18px;
  }

  .tx-save-cta {
    width: 100%;
    justify-content: center;
  }
}

/* ── kısa cevap: tedavi sayfasında zemine çok hafif yeşil gradyan (kullanıcı isteği, 5 Ekim 2026) ── */
/* .hd-short kuralı sonra yüklenen 60-hospital.css'te; aynı özgüllükte kalmasın */
.hd-short.tx-short {
  border-color: #d7ecdf;
  background: linear-gradient(135deg, #f2faf5 0%, #fff 62%);
}

/* ── makale ── */
/* Ara başlıklar bölümün başına (.hd-head) taşındığı için burada yalnız
   metin, alt başlıklar (h3) ve listeler kalır. */

.tx-content {
  color: var(--text);
  font-size: 16px;
  line-height: 1.78;
}

.tx-content> :first-child {
  margin-top: 0;
}

.tx-content> :last-child {
  margin-bottom: 0;
}

.tx-content h3 {
  margin: 26px 0 10px;
  color: var(--navy-dark);
  font-size: 17px;
  line-height: 1.35;
}

.tx-content p {
  margin: 0 0 16px;
}

.tx-content ul,
.tx-content ol {
  margin: 0 0 18px;
  padding-left: 22px;
}

.tx-content li {
  margin: 0 0 8px;
}

.tx-content a {
  color: var(--accent-dark, #0f76b8);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── makale içindeki çizimler (.tx-fig) ──
   Satır içi SVG'ler içerikte <!-- wp:html --> bloğunda durur. Paneller
   yan yana dizilir, sığmayınca alt satıra geçer (esneklik satır içi stilde,
   eski şablonda da çalışsın diye); burada yalnız boşluk ve alt yazı. */

.tx-content .tx-fig {
  margin: 30px 0 34px;
}

.tx-content .tx-fig figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

/* geniş sütunda çizim doğal boyunu çok aşmasın: etiketler başlık kadar irileşiyordu */
.tx-content .tx-fig--wide {
  max-width: 760px;
}

.tx-content .tx-fig--pair {
  max-width: 860px;
}

/* ── kaynakça ── */

.treatment-source-list {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.treatment-source-list li {
  margin: 0 0 12px;
}

.treatment-source-list a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.treatment-source-list small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
}

/* ══════════════════════════════════════════════════════════════
   Yan form: koyu lacivert kart
   ══════════════════════════════════════════════════════════════ */

/* .side-card beyaz zeminlidir; tedavi formu koyu sürümüdür. */
.tx-form.side-card {
  padding: 24px 22px;
  border: 1px solid rgba(126, 208, 255, .18);
  background: linear-gradient(170deg, #143a68 0%, #0e2c56 55%, #0a1f3f 100%);
  box-shadow: 0 26px 60px -34px rgba(8, 24, 48, .85);
}

.txf-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #7ed0ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* etiketin solundaki kısa çizgi */
.txf-eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--spark, #e8573f);
}

.txf-title {
  display: block;
  margin: 10px 0 6px;
  color: #fff;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.4px;
  line-height: 1.25;
}

.txf-subject {
  margin: 0 0 18px;
  color: rgba(216, 233, 252, .72);
  font-size: 13px;
}

.txf-subject b {
  color: #fff;
}

/* ── alanlar ── */

.txf-field {
  position: relative;
  display: block;
  margin-bottom: 11px;
}

.txf-field .icon {
  position: absolute;
  top: 15px;
  left: 14px;
  width: 17px;
  height: 17px;
  color: rgba(216, 233, 252, .55);
  pointer-events: none;
}

.txf-field--area .icon {
  top: 15px;
}

.txf-field input,
.txf-field textarea,
.txf-phone input,
.txf-dial {
  width: 100%;
  padding: 14px 14px 14px 40px;
  border: 1px solid rgba(126, 208, 255, .22);
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  transition: border-color .2s ease, background .2s ease;
}

.txf-field textarea {
  min-height: 92px;
  resize: vertical;
}

.txf-field input::placeholder,
.txf-field textarea::placeholder,
.txf-phone input::placeholder {
  color: rgba(216, 233, 252, .5);
}

.txf-field input:focus,
.txf-field textarea:focus,
.txf-phone input:focus,
.txf-dial:focus {
  border-color: rgba(126, 208, 255, .6);
  background: rgba(255, 255, 255, .1);
  outline: none;
}

/* ── telefon: ülke kodu + numara ── */

.txf-phone {
  display: grid;
  gap: 8px;
  grid-template-columns: 92px minmax(0, 1fr);
}

.txf-dial {
  padding: 14px 8px 14px 12px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(216, 233, 252, .6) 50%), linear-gradient(135deg, rgba(216, 233, 252, .6) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  cursor: pointer;
}

.txf-dial option {
  color: #14233b;
  background: #fff;
}

.txf-phone input {
  padding-left: 14px;
}

/* ── onay ── */

.txf-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 16px;
  color: rgba(216, 233, 252, .78);
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
}

.txf-consent input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-top: 1px;
  accent-color: var(--accent, #1e9fe0);
  cursor: pointer;
}

.txf-consent a {
  color: #7ed0ff;
  text-decoration: underline;
}

/* ── gönder ── */

.tx-form .txf-go {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #5cc0ef 0%, #33a9e4 55%, #1187ce 100%);
  color: #fff;
  font-size: 14px;
}

.tx-form .txf-go:hover {
  background: linear-gradient(135deg, #6ecbf5 0%, #3fb4ec 55%, #1a93d8 100%);
}

.tx-form .sf-done:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  color: #8ce0b4;
  font-size: 13px;
}

.tx-form .sf-done .icon {
  width: 17px;
  height: 17px;
}

/* ── içindekiler ── */
/* Geniş ekranda bölüm rayı (.hd-nav) var; eski içindekiler paneli, yüzen
   düğme ve örtüsü gizlidir. Dar ekranda tersi: ray gizli, panel temanın
   alttan açılan paneli olarak çalışır (home.js). Kullanıcı telefondaki
   görünümün değişmesini istemedi. Panelin görünümü .side-toc bileşeninden
   gelir (06-pages/40-article.css). */

@media (min-width: 981px) {
  .tx-toc,
  .toc-fab,
  .toc-veil {
    display: none;
  }
}

@media (max-width: 980px) {
  .tx-nav {
    display: none;
  }

  /* ray yok: başlığa atlarken panelin kaydırması (home.js, 88px) yeter */
  .tx-sec {
    scroll-margin-top: 24px;
  }
}

/* Mobil alt panel: başlık ve "başa dön" sabit kalır, yalnızca bölüm listesi
   kayar. Temanın kuralında panelin tamamı kayıyordu. Yatay dolgu panelden
   alınıp alt öğelere verilir, yoksa kayan liste kenarlara yapışır. */

@media (max-width: 980px) {
  .tx-toc {
    display: flex;
    flex-direction: column;
    padding: 22px 0 0;
    overflow: hidden;
  }

  .tx-toc .toc-head {
    flex: 0 0 auto;
    padding: 0 20px 14px;
  }

  .tx-toc .toc-body {
    min-height: 0;
    flex: 1 1 auto;
    padding: 2px 20px 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .tx-toc .toc-foot {
    flex: 0 0 auto;
    padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #eef3f9;
    background: #fff;
  }
}

/* İlerleme rayı yuvarlakların tam ortasından geçer. .toc-body dolgusu makale
   sayfasındakinden farklı olduğu için ray da ona göre kaydırılır; değer iki
   kırılımda da aynı çıktığından tek kural yeterli. */

.tx-toc .toc-rail {
  left: 30px;
}

/* ── makale tabloları (telefon) ──
   .post-table hücreleri tek satırda tutar ve son sütuna en az 150px ayırır
   (40-article.css); uzun açıklama sütunlu makale tabloları için yazılmış.
   Tedavi makalesindeki kısa, üç sütunlu tablo bile bu yüzden telefonda
   kabından taşıyor ve son sütun yana kaydırmadan görünmüyordu. Dar ekranda
   hücreler kırılır, tablo kaba sığar. */
@media (max-width: 620px) {
  .treatment-page .post-table th,
  .treatment-page .post-table td {
    padding: 12px;
    white-space: normal;
  }

  .treatment-page .post-table td:last-child,
  .treatment-page .post-table th:last-child {
    min-width: 0;
  }

  /* vurgulu değerler (fiyat aralığı gibi) bölünmez; "€900–" / "1,400"
     diye kırılıyordu. Kırılma metin sütunlarında olur. */
  .treatment-page .post-table td b {
    white-space: nowrap;
  }
}


/* ===== assets/css/src/06-pages/55-dental-calc.css ===== */
/* Diş tedavisi hesap makinesi (.dcalc-*): tedavi sayfasında, diş
   kategorisindeki tedavilerin "Costs" bölümünde. Şema ve sonuç
   assets/js/dental-calculator.js'te kurulur.
   Zemin kahraman ve alt bilgiyle aynı lacivert (kullanıcı isteği, 5 Ekim
   2026; önce açık maviydi); üstündeki her öğe koyu zemine göre. */

.dcalc {
  margin: 34px 0 0;
  padding: 26px;
  border-radius: 20px;
  /* zemin: 50-treatment.css'teki ortak .tx-premium (koyu/açık lacivert geçiş,
     parıltı, üst ışık çizgisi); fiyat karşılaştırmasıyla aynı */
}

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

.dcalc-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dcalc-title {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: -.4px;
}

.dcalc-intro {
  max-width: 640px;
  margin: 0 0 18px;
  color: rgba(198, 220, 239, .85);
  font-size: 14.5px;
  line-height: 1.65;
}

/* ── araçlar ── */

.dcalc-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.dcalc-tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #e3f1fb;
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.dcalc-tool:hover {
  border-color: rgba(255, 255, 255, .4);
}

/* seçili araç: koyu zeminde beyaz hap */
.dcalc-tool.is-on {
  border-color: #fff;
  background: #fff;
  color: var(--navy-dark);
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .7);
}

.dcalc-swatch {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 4px;
}

.dcalc-tool--missing .dcalc-swatch {
  border: 2px dashed #fff;
  background: #9e3f4d;
}

.dcalc-tool.is-on.dcalc-tool--missing .dcalc-swatch {
  border-color: #9e3f4d;
}

.dcalc-tool--decayed .dcalc-swatch {
  background: radial-gradient(circle at 55% 45%, #6b3d14 0 38%, #f6c35e 42%);
  box-shadow: inset 0 0 0 1.5px #ffd98a;
}

.dcalc-tool--broken .dcalc-swatch {
  background: linear-gradient(135deg, #e8625a 44%, #fff 44% 56%, #e8625a 56%);
  box-shadow: inset 0 0 0 1.5px #ffb3ad;
}

.dcalc-tool--healthy .dcalc-swatch {
  background: #fff;
  box-shadow: inset 0 0 0 1.5px #c9d8e8;
}

/* ── şema + sonuç ── */

/* Şema | seçenekler + sonuç: iki eşit yarı (kullanıcı isteği, 5 Ekim 2026).
   Araç satırının altında kartı boydan boya kesen ince ışık çizgisi, iki
   yarının arasında dikey çizgi; şema kendi yarısında ortada. Telefonda alt
   alta, çizgiler kalkar. */
.dcalc-grid {
  --dcalc-line: rgba(126, 208, 255, .18);
  display: grid;
  align-items: start;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin: 0 -26px;
  padding: 0 26px;
  border-top: 1px solid var(--dcalc-line);
}

.dcalc-chart {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: 26px 26px 14px 0;
  border-right: 1px solid var(--dcalc-line);
}

.dcalc-side-panel {
  padding: 26px 0 0 26px;
}

@media (max-width: 760px) {
  .dcalc {
    padding: 20px 16px;
  }

  .dcalc-grid {
    grid-template-columns: minmax(0, 1fr);
    margin: 0 -16px;
    padding: 0 16px;
  }

  .dcalc-chart {
    padding: 20px 0 4px;
    border-right: 0;
  }

  .dcalc-side-panel {
    padding: 16px 0 0;
  }
}

.dcalc-chart svg {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

/* diş eti: dişlerin arkasında canlı pembe bant (5 Ekim 2026: daha diş eti rengi) */
.dcalc-gum {
  fill: none;
  stroke: #e8808c;
  stroke-width: 38;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dcalc-tooth {
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* görünmez dokunma alanı */
.dcalc-hit {
  fill: transparent;
}

.dcalc-tooth-body {
  fill: #fff;
  stroke: #b9c9db;
  stroke-width: 1.4;
  transition: fill .2s ease, stroke .2s ease;
}

.dcalc-tooth-fissure {
  fill: none;
  stroke: #dde7f2;
  stroke-width: 1.2;
  stroke-linecap: round;
}

.dcalc-mark-decay,
.dcalc-mark-crack {
  opacity: 0;
  transition: opacity .2s ease;
}

.dcalc-mark-decay {
  fill: #8a5a2b;
}

.dcalc-mark-crack {
  fill: none;
  stroke: #e0564b;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dcalc-tooth:hover .dcalc-tooth-body {
  stroke: var(--accent);
}

.dcalc-tooth:focus-visible .dcalc-tooth-body {
  stroke: var(--accent);
  stroke-width: 2.4;
}

/* İşaretli dişler koyu zeminde uzaktan belli olsun (kullanıcı isteği, 5 Ekim
   2026): dolgu rengi belirgin, kontur kalın ve parlak, çevresinde ışık. */

/* eksik: boş yuva (pembe diş etinin üstünde koyu boşluk, beyaz kesikli kontur) */
.dcalc-tooth[data-state="missing"] .dcalc-tooth-body {
  fill: #9e3f4d;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-dasharray: 4 3;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, .55));
}

.dcalc-tooth[data-state="missing"] .dcalc-tooth-fissure {
  opacity: 0;
}

/* çürük: kehribar dolgu, kahverengi leke */
.dcalc-tooth[data-state="decayed"] .dcalc-tooth-body {
  fill: #f6c35e;
  stroke: #ffd98a;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 6px rgba(246, 195, 94, .75));
}

.dcalc-tooth[data-state="decayed"] .dcalc-mark-decay {
  opacity: 1;
}

/* kırık: kırmızı dolgu, beyaz çatlak */
.dcalc-tooth[data-state="broken"] .dcalc-tooth-body {
  fill: #e8625a;
  stroke: #ffb3ad;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 6px rgba(232, 98, 90, .75));
}

.dcalc-tooth[data-state="broken"] .dcalc-mark-crack {
  stroke: #fff;
}

.dcalc-tooth[data-state="decayed"] .dcalc-mark-decay {
  fill: #6b3d14;
}

/* işaretli dişte fissür çizgisi kaybolsun: dolgu renkli */
.dcalc-tooth[data-state="decayed"] .dcalc-tooth-fissure,
.dcalc-tooth[data-state="broken"] .dcalc-tooth-fissure {
  opacity: 0;
}

.dcalc-tooth[data-state="broken"] .dcalc-mark-crack {
  opacity: 1;
}

.dcalc-num {
  fill: rgba(198, 220, 239, .8);
  font-size: 9.5px;
  font-weight: 600;
  pointer-events: none;
}

.dcalc-side,
.dcalc-jaw {
  fill: rgba(169, 225, 255, .7);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}

/* ── seçenekler + sonuç ── */

.dcalc-side-panel {
  display: grid;
  gap: 16px;
}

.dcalc-label {
  display: block;
  margin-bottom: 8px;
  color: rgba(169, 225, 255, .8);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dcalc-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
}

.dcalc-seg button {
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #e3f1fb;
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
}

.dcalc-seg button.is-on {
  background: #fff;
  color: var(--navy-dark);
}

.dcalc-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 12px;
  color: #e3f1fb;
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.45;
}

.dcalc-check input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-top: 1px;
  accent-color: var(--accent);
}

/* ── estetik: beyazlatma + Hollywood smile ──
   Izgaranın altında ayrı bir bant: solda seçimler, sağda tedavi fiyatına
   binen ek. Ek kartı açık renkli; sağ üstteki koyu tedavi kartıyla
   karışmasın. Sütunlar üstteki ızgarayla aynı (şema | 300px). */

/* estetik bandı da aynı iki yarı: solda seçimler (ortada), sağda ek kartı */
.dcalc-cos {
  display: grid;
  align-items: start;
  gap: 0;
  margin: 0 -26px;
  padding: 0 26px;
  border-top: 1px solid rgba(126, 208, 255, .18);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* sol yarının içi şemayla aynı genişlikte ortalanır */
.dcalc-cosmetic > * {
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

/* sol yarı: dikey çizgi, ortalı içerik */
.dcalc-cos > :first-child {
  align-self: stretch;
  padding: 26px 26px 22px 0;
  border-right: 1px solid rgba(126, 208, 255, .18);
}

/* sağ yarıdaki öğe ek kartının kendisi: iç boşluğu bozmadan çizgilerden
   üstteki kutuyla aynı mesafede (26px) durur */
.dcalc-cos > :last-child {
  margin: 26px 0 0 26px;
}

@media (max-width: 760px) {
  .dcalc-cos {
    grid-template-columns: minmax(0, 1fr);
    margin: 0 -16px;
    padding: 0 16px;
  }

  .dcalc-cos > :first-child {
    padding: 18px 0 0;
    border-right: 0;
  }

  .dcalc-cos > :last-child {
    margin: 16px 0 0;
  }
}

/* ek kartı: "Mark at least one tooth" kutusuyla aynı dil — saydam zemin,
   kesikli açık çerçeve, açık yazı (kullanıcı isteği, 5 Ekim 2026) */
.dcalc-addon {
  padding: 18px;
  border: 1px dashed rgba(255, 255, 255, .3);
  border-radius: 16px;
  background: transparent;
  color: #fff;
}

.dcalc-addon .dcalc-label {
  color: rgba(169, 225, 255, .8);
}

.dcalc-addon-total {
  display: block;
  margin-bottom: 12px;
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1.1;
}

.dcalc-addon .dcalc-lines {
  border-top-color: rgba(126, 208, 255, .16);
}

.dcalc-addon .dcalc-line-name {
  color: rgba(226, 240, 255, .9);
}

.dcalc-addon .dcalc-line-count,
.dcalc-addon .dcalc-line-hint {
  color: rgba(169, 225, 255, .7);
}

.dcalc-addon .dcalc-line-price {
  color: #fff;
}

.dcalc-addon .dcalc-extra:not(:empty) {
  border-top-color: rgba(126, 208, 255, .16);
}

.dcalc-addon .dcalc-extra p {
  color: rgba(226, 240, 255, .82);
}

.dcalc-addon-none {
  margin: 0;
  color: rgba(198, 220, 239, .85);
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
}

/* genel toplam: tedavi + ek */
.dcalc-grand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--accent-dark);
  color: rgba(226, 240, 255, .9);
  font-size: 12.5px;
  font-weight: 700;
}

.dcalc-grand strong {
  color: #fff;
  font-size: 17px;
  white-space: nowrap;
}

.dcalc-cosmetic .dcalc-check {
  margin: 0 0 14px;
}

.dcalc-sublabel {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}

.dcalc-seg--4 {
  grid-template-columns: repeat(4, 1fr);
}

.dcalc-seg--mat {
  margin-top: 8px;
}

/* Hollywood smile'da kaplanacak dişler: mor dolgu ve kontur, hale yok
   (kullanıcı isteği, 5 Ekim 2026) */
.dcalc-tooth[data-smile] .dcalc-hit {
  fill: transparent;
}

.dcalc-tooth[data-smile]:not([data-state]) .dcalc-tooth-body,
.dcalc-tooth[data-smile][data-state="healthy"] .dcalc-tooth-body {
  fill: #e6d3ff;
  stroke: #a55cf6;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 6px rgba(165, 92, 246, .7));
}

.dcalc-tooth[data-smile] .dcalc-tooth-fissure {
  stroke: #c3a1f2;
}

/* sonuç kartı: zeminden bir ton açık, ince ışıklı kenar */
.dcalc-result {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  color: #fff;
}

.dcalc-result .dcalc-label {
  color: rgba(169, 225, 255, .75);
}

.dcalc-total {
  display: block;
  margin-bottom: 14px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.6px;
  line-height: 1.1;
}

.dcalc-lines {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(126, 208, 255, .16);
  list-style: none;
}

.dcalc-lines li {
  display: grid;
  gap: 2px 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  font-size: 13px;
  line-height: 1.4;
}

.dcalc-line-name {
  color: rgba(226, 240, 255, .9);
}

.dcalc-line-count {
  margin-left: 6px;
  color: rgba(169, 225, 255, .7);
  font-size: 12px;
}

.dcalc-line-price {
  font-weight: 700;
  white-space: nowrap;
}

.dcalc-line-hint {
  grid-column: 1 / -1;
  color: rgba(169, 225, 255, .62);
  font-size: 11.5px;
}

.dcalc-extra:not(:empty) {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(126, 208, 255, .16);
}

.dcalc-extra p {
  margin: 0;
  color: rgba(226, 240, 255, .82);
  font-size: 12.5px;
  line-height: 1.5;
}

.dcalc-alt {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(126, 208, 255, .1);
}

.dcalc-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed rgba(255, 255, 255, .3);
  border-radius: 16px;
  color: rgba(198, 220, 239, .85);
  font-size: 14px;
  text-align: center;
}

/* not: şema ve sonuç sütunlarının altında, tam genişlikte */
.dcalc-note {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(126, 208, 255, .16);
  color: rgba(198, 220, 239, .75);
  font-size: 12.5px;
  line-height: 1.6;
}

.dcalc [hidden] {
  display: none !important;
}


/* ===== assets/css/src/06-pages/60-hospital.css ===== */
/* Tekil hastane sayfası: blocks/hospital-hero + blocks/hospital-body.
   Ortalı hero: açıklamanın altında bilgi satırı (konum, havalimanı, çalışma
   saati), veri kartı hero'nun İÇİNDE (koyu cam: puan + yolculuk, dünya küresiyle),
   altında yapışkan bölüm rayı; sonra hakkında, fotoğraflar ve
   video, FMR puan kartı, yer aldığı FindMed sıralamaları, tedaviler, teknoloji,
   konum (harita), ziyaret, SSS ve kapanış. Sayfada başka hastanelerle kıyas da
   ülkelerle fiyat karşılaştırması da yoktur.
   İki önek var: "hd-" sayfanın kabuğu (hero, ray, bölüm kabuğu, ziyaret, SSS,
   kapanış), "hx-" veri bölümleri (hakkında, galeri, FMR puan kartı, sıralamalar,
   konum). Tokenlar 01-settings/tokens.css'ten, hero kabuğu
   06-pages/10-page-hero.css'ten, liste kartları (.lgroup)
   06-pages/20-list-groups.css'ten gelir. Tedavi (50-treatment.css) ve doktor
   (65-doctor.css) sayfaları da buradaki kabuğu ve kart parçalarını kullanır. */

.hd-page {
  --hd-gap: 26px;
  --hd-radius: 18px;
  --hd-radius-sm: 12px;
  --hd-nav-h: 58px;
  /* Bölüm başlıklarının yapışkan ray altında kalmaması için çapa payı */
  --hd-anchor: 104px;
}

/* ══════════════════════════════════════════════════════════════
   1) HERO
   ──────────────────────────────────────────────────────────────
   Kendi hero'su YOK: hub sayfalarının (hospitals.html) kabuğunu
   olduğu gibi kullanır — .hero-stage.page-hero + .hero-bg +
   .hero-signals. Böylece renk, örtü, Ken Burns hareketi ve cam
   şerit style2.css'ten gelir; burada yalnız bu sayfaya ait olan
   üç şey var: arka plan fotoğrafı, üst etiket ve konum satırı.
   ══════════════════════════════════════════════════════════════ */

/* Hub'larda sayfa başına bir hero görseli var; bu sayfanınki hastanenin
   kendi fotoğrafı (blok, --fm-hero-img'i .hero-bg'ye satır içi yazar);
   fotoğraf yoksa genel hastane zeminine düşer. */
.page-hero--hospital .hero-bg::before {
  background-image: var(--fm-hero-img, url("https://findmed.odopreview.com/wp-content/themes/findmed/assets/img/page-hospital-bg.webp"));
}

/* Başlığın üstündeki tanım etiketi */
.hd-kicker {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  padding: 6px 14px 6px 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(9, 26, 50, .38);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  color: #cfe6f8;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  animation: fm-rise-soft .8s cubic-bezier(.2, .7, .25, 1) .2s backwards;
}

.hd-kicker .icon {
  width: 15px;
  height: 15px;
  color: var(--accent);
}

/* "Verified by FindMed" kicker'ı: yeşil kalkan, sitenin her yerindeki verified rengi */
.hd-kicker .hd-kicker-verified {
  color: #2fd08a;
}

/* Konum satırı — tek satır, başlığın altında ortalı (tedavi ve doktor hero'su;
   hastane hero'sunda yerini bilgi satırı .hd-meta aldı) */
.hd-where {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  color: rgba(226, 240, 255, .82);
  font-size: 12.5px;
  font-weight: 600;
  text-shadow: 0 1px 12px rgba(6, 26, 48, .45);
  animation: fm-rise-soft .8s cubic-bezier(.2, .7, .25, 1) .4s backwards;
}

.hd-where li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hd-where .icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--accent);
}

.hd-where .hd-flag {
  flex: 0 0 auto;
  width: 18px;
  height: 13px;
  border-radius: 3px;
  object-fit: cover;
}

/* Cam şeritteki FMR yıldızları */
.hs-item .hd-stars {
  margin-top: 3px;
}

/* Yıldızlar: FMR puanı kadar dolu, FMR mavisi (altın yalnız Exceptional rozetinde). --n 0-5. */
.hd-stars {
  position: relative;
  display: inline-block;
  color: rgba(255, 255, 255, .28);
  line-height: 1;
  letter-spacing: 1.5px;
  font-size: 12px;
}

.hd-stars::before {
  content: "★★★★★";
}

.hd-stars i {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  width: calc(var(--n, 0) / 5 * 100%);
  color: #7ed0ff;
  font-style: normal;
}

.hd-stars i::before {
  content: "★★★★★";
}

/* ══════════════════════════════════════════════════════════════
   3) BÖLÜM RAYI — yapışkan, sayaçlı, ölçerli
   Tasarım kararı: makale sayfasındaki halka + ray dili burada
   YATAY bir raya dönüşüyor. Aynı aile, farklı sayfa tipi.
   ══════════════════════════════════════════════════════════════ */
.hd-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  /* hero'nun bittigi yerde baslar; arada beyaz bosluk kalmaz */
  margin-top: 0;
  border-top: 1px solid var(--card-line, #e3ebf5);
  border-bottom: 1px solid var(--card-line, #e3ebf5);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}

.hd-nav::before {
  /* rayın kendi ilerleme ölçeri */
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  width: var(--p, 0%);
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  transition: width .15s linear;
}

.hd-nav-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  height: var(--hd-nav-h);
}

.hd-rail {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.hd-rail::-webkit-scrollbar {
  display: none;
}

.hd-rail a {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  scroll-snap-align: center;
  transition: color .2s ease;
}

.hd-rail a i {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 6px;
  background: var(--soft);
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  transition: background .22s ease, color .22s ease;
}

.hd-rail a:hover {
  color: var(--ink);
}

.hd-rail a.is-active {
  color: #fff;
}

.hd-rail a.is-active i {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

/* kayan gösterge — aktif sekmenin altına değil, ARKASINA kayar */
.hd-rail-pill {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0;
  height: 34px;
  border-radius: 9px;
  background: var(--navy);
  transform: translate3d(var(--x, 0), -50%, 0);
  width: var(--w, 0);
  opacity: 0;
  transition: transform .38s cubic-bezier(.22, .61, .36, 1), width .38s cubic-bezier(.22, .61, .36, 1), opacity .2s ease;
  pointer-events: none;
}

.hd-rail-pill.is-on {
  opacity: 1;
}

.hd-nav-count {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}

.hd-nav-count b {
  color: var(--ink);
}

/* ══════════════════════════════════════════════════════════════
   4) ORTAK BÖLÜM KABUĞU
   ══════════════════════════════════════════════════════════════ */
.hd-sec {
  scroll-margin-top: var(--hd-anchor);
  padding: 66px 0;
}

/* Raydan hemen sonraki bolum: ustunde 66px daha bosluk sayfayi bos
   gosteriyordu. */
.hd-sec:first-of-type {
  padding-top: 40px;
}

.hd-sec--tint {
  background: var(--soft);
}

.hd-head {
  max-width: 62ch;
  margin: 0 0 34px;
}

.hd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--accent-dark);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hd-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.hd-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(26px, 2.7vw, 36px);
  line-height: 1.16;
  letter-spacing: -.02em;
}

.hd-head p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.7;
}

/* ══════════════════════════════════════════════════════════════
   5) KISACA — kısa cevap + akreditasyon kartları
   ══════════════════════════════════════════════════════════════ */

.hd-short {
  position: relative;
  padding: 26px 28px 26px 30px;
  border: 1px solid var(--card-line, #e3ebf5);
  border-radius: var(--hd-radius);
  background: #fff;
}

.hd-short::before {
  content: "";
  position: absolute;
  inset: 18px auto 18px 0;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), var(--navy));
}

.hd-short-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--accent-dark);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hd-short-tag .icon {
  width: 15px;
  height: 15px;
}

.hd-short p {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.72;
}

.hd-short p + p {
  margin-top: 14px;
}

/* ══════════════════════════════════════════════════════════════
   6) FMR PUAN KARTI
   ──────────────────────────────────────────────────────────────
   "106.000 m²" hastaya bir şey söylemiyordu. Onun yerine FindMed'in
   kendi ölçüsü: 5 üzerinden tek puan ve puanı oluşturan kalemler.
   ══════════════════════════════════════════════════════════════ */

.hd-score-foot {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.hd-score-foot .icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--accent-dark);
}

/* ══════════════════════════════════════════════════════════════
   9) MALİYET — FindMed'in kendi bölümü, referans sitede yok
   ══════════════════════════════════════════════════════════════ */

.hd-cost-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.hd-cost-note .icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--accent-dark);
}

/* ══════════════════════════════════════════════════════════════
   12) OLANAKLAR & ZİYARET
   ══════════════════════════════════════════════════════════════ */
.hd-visit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* Olanaklar: düz kutular yerine ikon levhası + kısa açıklama satırı.
   Her kartın solunda ince bir vurgu çubuğu var; fareyle dolar. */
.hd-amen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hd-amen li {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px 18px 16px 20px;
  border: 1px solid var(--card-line, #e3ebf5);
  border-radius: var(--hd-radius-sm);
  background: #fff;
  overflow: hidden;
  transition: border-color .24s ease, transform .24s ease, box-shadow .24s ease;
}

.hd-amen li::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.hd-amen li:hover {
  border-color: rgba(30, 159, 224, .45);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -20px rgba(12, 38, 74, .4);
}

.hd-amen li:hover::before {
  transform: scaleY(1);
}

.hd-amen-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  transition: background .26s ease, color .26s ease;
}

.hd-amen li:hover .hd-amen-ico {
  background: var(--navy);
  color: #fff;
}

.hd-amen-ico .icon {
  width: 22px;
  height: 22px;
}

.hd-amen strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
}

.hd-amen small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.hd-rules {
  margin: 0;
  border: 1px solid var(--card-line, #e3ebf5);
  border-radius: var(--hd-radius);
  background: #fff;
  overflow: hidden;
}

.hd-rule {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--card-line, #e3ebf5);
}

.hd-rule:last-child {
  border-bottom: 0;
}

.hd-rule dt {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.hd-rule dt .icon {
  width: 16px;
  height: 16px;
  color: var(--accent-dark);
}

.hd-rule dd {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════
   14) SSS — akordeon
   ══════════════════════════════════════════════════════════════ */
.hd-faq {
  border: 1px solid var(--card-line, #e3ebf5);
  border-radius: var(--hd-radius);
  background: #fff;
  overflow: hidden;
}

.hd-q {
  border-bottom: 1px solid var(--card-line, #e3ebf5);
}

.hd-q:last-child {
  border-bottom: 0;
}

.hd-q-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 26px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.hd-q-btn:hover {
  background: var(--soft);
}

/* Yalniz soru metni esnesin: .hd-q-sign de bir span ve bu kural onu da
   yakaladiginda isaret kutusu satirin yarisina yayiliyordu. */
.hd-q-btn > span:not(.hd-q-sign) {
  flex: 1;
  min-width: 0;
}

.hd-q-sign {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--accent-soft);
  transition: background .24s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}

.hd-q-sign::before,
.hd-q-sign::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-dark);
  transform: translate(-50%, -50%);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), background .24s ease;
}

.hd-q-sign::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.hd-q-btn[aria-expanded="true"] .hd-q-sign {
  background: var(--navy);
  transform: rotate(180deg);
}

.hd-q-btn[aria-expanded="true"] .hd-q-sign::before,
.hd-q-btn[aria-expanded="true"] .hd-q-sign::after {
  background: #fff;
}

.hd-q-btn[aria-expanded="true"] .hd-q-sign::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.hd-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s cubic-bezier(.22, .61, .36, 1);
}

.hd-a.is-open {
  grid-template-rows: 1fr;
}

.hd-a > div {
  overflow: hidden;
}

.hd-a p {
  margin: 0;
  /* Soru metni 26px'ten basliyor; cevap da oradan bassin. Onceki 68px
     girinti cevabi sagda asili birakiyordu. */
  padding: 0 70px 22px 26px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.72;
}

/* ══════════════════════════════════════════════════════════════
   15) KAPANIŞ ÇAĞRISI
   ══════════════════════════════════════════════════════════════ */
.hd-close {
  position: relative;
  padding: 66px 0;
  background: var(--ink);
  overflow: hidden;
}

.hd-close::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 120% at 82% 20%, rgba(30, 159, 224, .32), transparent 62%);
}

.hd-close-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 40px;
  align-items: center;
}

.hd-close h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.16;
  letter-spacing: -.02em;
}

.hd-close p {
  margin: 14px 0 0;
  max-width: 56ch;
  color: #c6dcef;
  font-size: 15.5px;
  line-height: 1.7;
}

.hd-close-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hd-close-actions .btn {
  min-height: 52px;
  font-size: 13px;
}

/* Koyu zemin uzerindeki ikincil buton. .btn kendi rengini tanimlamaz,
   miras alir; lacivert bolumde metin lacivert kaliyordu. */
.hd-btn-ghost {
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.hd-btn-ghost:hover {
  border-color: var(--accent);
  background: rgba(30, 159, 224, .22);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   16) GİRİŞ HAREKETLERİ
   Kural: hareket sadece dikkat yönlendirir. Kullanıcı sistemde
   "hareketi azalt" diyorsa hepsi kapanır.
   ══════════════════════════════════════════════════════════════ */

.hd-rise {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.hd-rise.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {

  .hd-rise,
  .hd-rise.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

}

/* ══════════════════════════════════════════════════════════════
   17) DUYARLI DAVRANIŞ
   ══════════════════════════════════════════════════════════════ */

/* ─── Yolculuk: dar ekranda yatay çizgi dikeye döner ──────────────────
   Beş adımı yan yana sıkıştırmak yerine sol tarafta bir ray ve her
   adımın kendi noktası; okunuşu telefonda doğal olan yön bu. */

@media (max-width: 980px) {
  .hd-visit,
  .hd-close-inner {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

@media (max-width: 760px) {
  .hd-sec {
    padding: 52px 0;
  }

  .hd-amen {
    grid-template-columns: 1fr;
  }

  .hd-rule {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .hd-nav-count {
    display: none;
  }

  .hd-rail {
    margin: 0 -20px;
    padding: 0 20px;
  }

  .hd-a p {
    padding-left: 26px;
  }
}

/* ══════════════════════════════════════════════════════════════
   HERO VERİ KARTI — HERO İÇİNDE (.hd-hero--inset .hd-dash)
   ──────────────────────────────────────────────────────────────
   v3'te kart hero'nun alt kenarından sarkıyordu; yapışkan ray onun
   altına itilince ikisi üst üste sıkışık görünüyordu. v4: kart yine
   açık malzeme (beyaz, gövde kartlarıyla aynı çizgi/köşe/gölge) ama
   hero'nun İÇİNDE, alt kenara yakın; ray hero'ya yapışık kalır
   (hospital-detail-2'deki düzen). Buradaki kurallar kartın ortak
   parçalarıdır: puan karosu, büyük rakam (.hd-dash-v), küçük çubuklar
   (.hd-mini), künye (.hd-dash-marks). Hastane kartında puanın yanında yolculuk
   durur (aşağıda "HASTANE HERO'SU"); fiyat karosunu tedavi, vaka sayılarını
   doktor sayfası kullanır.
   ══════════════════════════════════════════════════════════════ */
.hd-hero--inset .hero-copy {
  padding-bottom: 0;
}

/* kırıntı en üstte, başlığın önünde girer */
.hd-hero--inset .crumbs {
  margin: 0 0 18px;
  animation-delay: .05s;
}

.hd-hero--inset .hd-kicker {
  margin-bottom: 14px;
}

.hd-hero--inset .hero-copy>p {
  margin-top: 14px;
}

.hd-hero--inset .hd-where {
  margin-top: 16px;
}

/* ── kart ─────────────────────────────────────────────────────── */
/* Veri yoksa parça basılmaz; ızgara kalan parçalara göre daralır. */
.hd-dash--no-cost {
  grid-template-columns: auto minmax(0, 1fr);
}

.hd-dash--no-cost .hd-dash-marks {
  justify-self: end;
}

.hd-dash--no-score {
  grid-template-columns: minmax(0, 1fr) auto;
}

.hd-dash {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 22px 40px;
  align-items: center;
  width: min(100%, 1120px);
  margin: 30px auto 0;
  padding: 18px 30px 18px 18px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 22px;
  background: #fff;
  /* lacivert zeminde duran beyaz kart: gölge biraz daha derin */
  box-shadow:
    0 34px 70px -30px rgba(0, 0, 0, .65),
    0 2px 6px rgba(12, 38, 74, .12);
  text-align: left;
  animation: fm-rise-soft .8s cubic-bezier(.2, .7, .25, 1) .5s backwards;
}

.hd-dash>* {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.hd-dash-k {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* yıldız + bant rozeti aynı satırda (hastane ve doktor hero'su) */
.hd-dash-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

/* FMR markası: skor etiketinin önünde (kartlardaki çiple aynı işaret) */
.hd-dash-k .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: #7ed0ff;
}

/* ── puan karosu ─────────────────────────────────────────────── */
.hd-dash-score {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px 12px 12px;
  border-radius: 16px;
  background: var(--soft);
}

.hd-dash-score-txt {
  display: grid;
  gap: 6px;
  justify-items: start;
}

.hd-gauge-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 104px;
  height: 104px;
}

.hd-gauge {
  width: 104px;
  height: 104px;
  /* 270°'lik yay alt-soldan başlar, alt-sağda biter */
  transform: rotate(135deg);
}

.hd-gauge circle {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  /* r=48 → çevre 301.6; 270° = 226.2 */
  stroke-dasharray: 226.2 301.6;
}

.hd-gauge-track {
  stroke: #d9e6f3;
}

.hd-gauge-fill {
  stroke: url(#hd-gauge-grad);
  stroke-dashoffset: 226.2;
  transition: stroke-dashoffset 1.5s cubic-bezier(.22, .61, .36, 1) .7s;
}

.hd-dash.is-in .hd-gauge-fill {
  stroke-dashoffset: calc(226.2 - 226.2 * var(--n, 0) / 5);
}

.hd-gauge-mid {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1px;
  padding-bottom: 5px;
  text-align: center;
}

.hd-gauge-mid b {
  color: var(--navy-dark);
  font-size: 29px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hd-gauge-mid small {
  color: var(--accent-dark);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* yıldızlar açık zeminde: boş yıldız gri, dolu turuncu */
.hd-dash-score .hd-stars {
  color: #d3dfec;
  font-size: 13px;
  letter-spacing: 2px;
}

/* doğrulama satırı: üst bardaki canlı nokta ile aynı dil */
.hd-dash-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.hd-dash-verified::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2ee6a8;
  box-shadow: 0 0 0 3px rgba(46, 230, 168, .2);
}

/* ── büyük rakam + küçük çubuklar (tedavi: fiyat, doktor: yıllık vaka) ── */
.hd-dash-v {
  display: block;
  margin-top: 5px;
  color: var(--navy-dark);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hd-dash-v em {
  font-size: .46em;
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0;
}

/* küçük çubuklar (doktor kartındaki vaka sayıları): etiket sütunu en uzun ada göre, çubuklar hizalı */
.hd-mini {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  gap: 7px 10px;
  margin-top: 12px;
}

.hd-mini-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
}

.hd-mini-row i {
  position: relative;
  display: block;
  height: 6px;
  border-radius: 999px;
  background: #e9f0f8;
  overflow: hidden;
}

.hd-mini-row i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  transition: width 1.1s cubic-bezier(.22, .61, .36, 1) .9s;
}

.hd-mini-row+.hd-mini-row i::after {
  transition-delay: 1.05s;
}

.hd-dash.is-in .hd-mini-row i::after {
  width: var(--w, 0);
}

.hd-mini-row b {
  color: var(--navy-dark);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.hd-dash-note {
  display: block;
  margin-top: 9px;
  color: #6b7d90;
  font-size: 11px;
}

/* dipnot bağlantı olduğunda (doktor kartı: tedavi dökümüne iner) */
a.hd-dash-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  transition: color .2s ease;
}

a.hd-dash-note span {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a.hd-dash-note .icon {
  width: 12px;
  height: 12px;
  transform: rotate(90deg);
}

a.hd-dash-note:hover,
a.hd-dash-note:focus-visible {
  color: var(--accent-dark);
}

/* ── künye 2×2 ──────────────────────────────────────────────── */
.hd-dash-marks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: 14px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hd-dash-marks li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--navy-dark);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.hd-dash-marks .icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.hd-dash-marks b {
  font-weight: 800;
}

/* ── duyarlı ────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .hd-dash {
    gap: 20px 28px;
    padding: 16px 24px 16px 16px;
  }

  .hd-dash-marks {
    gap: 12px 18px;
  }

  .hd-dash-marks li {
    font-size: 12.5px;
  }
}

/* tablet: puan karosu + fiyat üstte, künye altta tek satır */
@media (max-width: 980px) {
  .hd-dash {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .hd-dash-marks {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 14px;
    padding-top: 16px;
    border-top: 1px solid var(--card-line, #e3ebf5);
  }

  .hd-dash-marks li {
    white-space: normal;
  }
}

@media (max-width: 760px) {
  .hd-dash-marks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* telefon: her şey tek sütun, karo yatay, dipnot yok */
@media (max-width: 620px) {
  .hd-dash {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 16px;
    padding: 12px 14px 14px;
    border-radius: 18px;
  }

  .hd-dash-score {
    justify-content: center;
    gap: 14px;
    padding: 10px 14px 10px 10px;
  }

  .hd-gauge-wrap,
  .hd-gauge {
    width: 84px;
    height: 84px;
  }

  .hd-gauge-mid b {
    font-size: 24px;
  }

  /* fiyat: rakam ve çubuklar yan yana, dar bir blok */
  .hd-dash-cost {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "k    k"
      "v    mini";
    align-items: center;
    column-gap: 16px;
  }

  .hd-dash-cost>.hd-dash-k { grid-area: k; }
  .hd-dash-cost>.hd-dash-v { grid-area: v; margin-top: 2px; font-size: 32px; }
  .hd-dash-cost>.hd-mini { grid-area: mini; margin-top: 4px; }
  /* telefonda dipnot yok: aynı açıklama Costs bölümünde */
  .hd-dash-cost>.hd-dash-note { display: none; }

  .hd-dash-marks {
    gap: 8px 10px;
    padding-top: 12px;
  }

  .hd-dash-marks li {
    font-size: 11.5px;
    gap: 8px;
  }

  .hd-dash-marks .icon {
    width: 24px;
    height: 24px;
    padding: 5px;
  }

  .hd-hide-sm {
    display: none;
  }

  /* konum satırı iki satırda kalsın */
  .hd-where {
    gap: 4px 12px;
    margin-top: 10px;
    font-size: 11.5px;
  }

  /* dar ekranda kırıntının son halkası H1'i tekrar ediyor ve ikinci satıra taşıyor */
  .page-hero--hospital .crumbs li[aria-current] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .hd-gauge-fill,
  .hd-mini-row i::after {
    transition: none;
  }

  /* giriş animasyonları kapalı: her şey son halinde, görünür */
  .hd-dash,
  .hd-kicker,
  .hd-where,
  .hd-hero--inset .crumbs {
    animation: none !important;
  }
}

/* ── Listeleme bölümleri ────────────────────────────────────────
   "Centres of excellence" ve "Technology" artık sitenin kendi
   liste kartı (.lgroup) kalıbını kullanıyor; bu sayfaya özel tek
   ekleme, listedeki sıra numarasının yıldız yerine geçmesi. */
.hd-page .lg-rank-no {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 10.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: background .25s ease, color .25s ease;
}

.hd-page .lg-list a:hover .lg-rank-no {
  background: var(--navy);
  color: #fff;
}

/* Hub'da .lg-grid filtre formunun altinda durur ve kendi ust boslugu var;
   burada bolum basligi zaten bosluk biraktigi icin sifirlaniyor. */
.hd-page .lg-grid {
  margin-top: 0;
}

/* ══════════════════════════════════════════════════════════════
   v5: KOYU KART — -4 düzeni, hospital-detail-2'nin cam malzemesi
   Beyaz kart yerine lacivert cam levha: yarı saydam lacivert + blur,
   üst kenarda uçları sönen ince ışık, göstergenin arkasında yumuşak
   mavi ışık. Renkler sitenin hero paleti: beyaz rakam, açık mavi
   vurgu (--accent), soluk mavi etiket. Yalnız renk/malzeme ezilir;
   ölçüler -4 ile aynı.
   ══════════════════════════════════════════════════════════════ */
.hd-hero--inset .hd-dash {
  border: 1px solid rgba(255, 255, 255, .13);
  background: linear-gradient(160deg, rgba(8, 22, 44, .68), rgba(8, 22, 44, .48));
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .7);
  overflow: hidden;
}

/* imza: üst kenarda uçları sönen ışık çizgisi */
.hd-hero--inset .hd-dash::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(126, 208, 255, .85) 28%, rgba(126, 208, 255, .85) 72%, transparent);
}

/* göstergenin arkasındaki yumuşak ışık */
.hd-hero--inset .hd-dash::after {
  content: "";
  position: absolute;
  left: -40px;
  top: 50%;
  width: 280px;
  height: 280px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(30, 159, 224, .28), transparent 64%);
  pointer-events: none;
}

/* puan karosu: koyu zeminde bir ton açık cam */
.hd-hero--inset .hd-dash-score {
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .06);
}

.hd-hero--inset .hd-dash-k {
  color: rgba(158, 194, 228, .9);
}

.hd-hero--inset .hd-gauge-track {
  stroke: rgba(255, 255, 255, .13);
}

.hd-hero--inset .hd-gauge-mid b {
  color: #fff;
}

.hd-hero--inset .hd-gauge-mid small {
  color: var(--accent);
}

.hd-hero--inset .hd-dash-score .hd-stars {
  color: rgba(255, 255, 255, .28);
}

.hd-hero--inset .hd-dash-verified {
  color: rgba(198, 220, 239, .85);
}

.hd-hero--inset .hd-dash-v {
  color: #fff;
}

.hd-hero--inset .hd-mini-row {
  color: rgba(198, 220, 239, .85);
}

.hd-hero--inset .hd-mini-row i {
  background: rgba(255, 255, 255, .13);
}

.hd-hero--inset .hd-mini-row b {
  color: #fff;
}

.hd-hero--inset .hd-dash-note {
  color: rgba(198, 220, 239, .7);
}

.hd-hero--inset a.hd-dash-note:hover,
.hd-hero--inset a.hd-dash-note:focus-visible {
  color: #fff;
}

.hd-hero--inset .hd-dash-marks li {
  color: #e3f1fb;
}

.hd-hero--inset .hd-dash-marks .icon {
  background: rgba(126, 208, 255, .12);
  color: var(--accent);
}

@media (max-width: 980px) {
  .hd-hero--inset .hd-dash-marks {
    border-top-color: rgba(255, 255, 255, .1);
  }
}

/* ══════════════════════════════════════════════════════════════
   HASTANE HERO'SU: bilgi satırı + kart (puan | yolculuk)
   Bilgi satırı (.hd-meta) açıklamanın hemen altında durur: konum, havalimanı,
   çalışma saati. Kart iki bölgedir: FindMed puanı ve yolculuk ("How far are
   you?": ülke seçimi + "to" + varış şehri → uçuş süresi ve mesafe → dünya
   küresi). Kartta iç kutu yoktur; iki bölgeyi uçları sönen ince bir çizgi
   ayırır. Yolculuk kuralları bölge gösterildiğinde (.has-orb; hospital-globe.js
   ekler) devreye girer; betik çalışmazsa kart yalnız puanla kalır. Fiyat ya da
   başka hastanelerle kıyas kartta yer almaz.
   ══════════════════════════════════════════════════════════════ */

/* ── bilgi satırı: konum | havalimanı | çalışma saati ──
   Her bilgi küçük cam bir ikon, kalın beyaz değer ve soluk ekten oluşur; aralarında
   ince çizgi durur. Kart değil, başlığın parçası: açıklamanın hemen altında, ortada. */
.hd-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 0;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  text-shadow: 0 1px 12px rgba(6, 26, 48, .5);
  animation: fm-rise-soft .8s cubic-bezier(.2, .7, .25, 1) .4s backwards;
}

.hd-meta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
}

.hd-meta li + li {
  border-left: 1px solid rgba(255, 255, 255, .2);
}

.hd-meta-ico {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: rgba(9, 26, 50, .42);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: #7ed0ff;
}

.hd-meta-ico .icon {
  width: 15px;
  height: 15px;
}

/* konum: iğne ikonu yerine ülke bayrağı. Arkasında cam yuvarlak yok; bayrak tek başına
   durur, kenarı ince bir çizgiyle belirir (açık renkli bayraklar fotoğrafta kaybolmasın). */
.hd-meta-ico--flag {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hd-meta-ico--flag .hd-flag {
  display: block;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 2px 8px rgba(6, 26, 48, .35);
}

.hd-meta-txt {
  color: rgba(214, 232, 247, .9);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
}

.hd-meta-v {
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.005em;
}

/* konum, sayfadaki haritaya iner */
a.hd-meta-v {
  text-decoration: none;
  transition: color .2s ease;
}

a.hd-meta-v:hover,
a.hd-meta-v:focus-visible {
  color: #9fd8ff;
}

/* bilgi satırı varken kart ona biraz daha yakın durur */
.hd-hero--inset .hd-meta + .hd-dash {
  margin-top: 26px;
}

/* ── kart ──
   Yolculuk yokken (betik çalışmadı ya da hastanenin koordinatı yok) kart puan karosunun
   boyundadır. */
.hd-dash.hd-dash--hospital {
  grid-template-columns: auto;
  width: fit-content;
  padding-right: 18px;
}

/* yolculuk gösterilince: içeriği kadar geniş, ortada; iki bölge yan yana */
.hd-dash--orb.has-orb {
  grid-template-columns: auto auto;
  gap: 0;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  padding: 20px 30px 20px 26px;
}

.hd-dash--orb.has-orb.hd-dash--no-score {
  grid-template-columns: auto;
  padding-left: 30px;
}

/* puan da yoksa ve betik çalışmadıysa kartta gösterilecek bir şey kalmaz */
.hd-dash--orb.hd-dash--no-score:not(.has-orb) {
  display: none;
}

/* bölgeler arasında çizgi: üstte ve altta sönen ince ışık */
.hd-dash--orb.has-orb > * + * {
  margin-left: 32px;
  padding-left: 32px;
  border-left: 1px solid rgba(255, 255, 255, .14);
  border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .18) 24%, rgba(255, 255, 255, .18) 76%, rgba(255, 255, 255, 0)) 1;
}

/* puan: karo yok, gösterge doğrudan kartın üstünde */
.hd-hero--inset .hd-dash--orb.has-orb .hd-dash-score {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* ── yolculuk: ülke seçimi + varış | süre ve mesafe | küre ── */
.hd-orb {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-areas: "route txt globe";
  align-items: center;
  column-gap: 28px;
  min-width: 0;
}

.hd-orb[hidden] {
  display: none;
}

/* genişlikler sabit: ülke değişince kart oynamaz (en uzun ülke adı sığar) */
.hd-orb-route {
  display: grid;
  grid-area: route;
  justify-items: start;
  width: 202px;
  min-width: 0;
}

/* ülke seçimi: bayrak, ülke adı, ok; sütunu boydan boya kaplar */
.hd-orb-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 6px 11px 6px 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: rgba(235, 245, 253, .98);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}

.hd-orb-chip:hover,
.hd-orb-chip:focus-within {
  border-color: rgba(126, 208, 255, .6);
  background: rgba(255, 255, 255, .11);
}

.hd-orb-chip:has(select:focus-visible) {
  outline: 2px solid #7ed0ff;
  outline-offset: 2px;
}

.hd-orb .hd-flag {
  flex: 0 0 auto;
  width: 17px;
  height: 12.5px;
  border-radius: 2.5px;
  object-fit: cover;
}

.hd-orb-lbl {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hd-orb-caret {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* yerel seçim alanı çipin tamamını kaplar ama görünmez: tıklanan her yer listeyi açar */
.hd-orb-chip select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* "to" ve varış şehri: çipin içindeki bayrakla aynı hizada, alt alta */
.hd-orb-end {
  display: grid;
  justify-items: start;
  gap: 7px;
  margin: 9px 0 0 11px;
}

.hd-orb-to {
  color: rgba(158, 194, 228, .9);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.hd-orb-dest {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.005em;
  line-height: 1.1;
  white-space: nowrap;
}

.hd-orb-txt {
  display: grid;
  grid-area: txt;
  justify-items: start;
  align-content: center;
  width: 138px;
  min-width: 0;
}

.hd-orb-v {
  margin-top: 8px;
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* birimler (h, min) rakamdan küçük */
.hd-orb-v small {
  margin: 0 6px 0 2px;
  color: #9fd8ff;
  font-size: .5em;
  font-weight: 700;
  letter-spacing: 0;
}

.hd-orb-v small:last-child {
  margin-right: 0;
}

.hd-orb.is-near .hd-orb-v {
  font-size: 20px;
  letter-spacing: -.02em;
}

.hd-orb-sub {
  margin-top: 7px;
  color: rgba(198, 220, 239, .85);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* küre puan göstergesiyle aynı boyda; tuval çevresindeki ışık için 12px taşar */
.hd-orb-globe {
  position: relative;
  grid-area: globe;
  width: 108px;
  height: 108px;
}

.hd-orb-globe canvas {
  position: absolute;
  top: -12px;
  left: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  opacity: 0;
  transition: opacity .9s ease;
}

.hd-orb.is-on .hd-orb-globe canvas {
  opacity: 1;
}

/* ── duyarlı ── */
@media (max-width: 1180px) {
  .hd-meta li {
    padding: 0 18px;
  }

  .hd-dash--orb.has-orb {
    padding: 18px 26px 18px 22px;
  }

  .hd-dash--orb.has-orb > * + * {
    margin-left: 26px;
    padding-left: 26px;
  }

  .hd-orb {
    column-gap: 22px;
  }

  .hd-orb-globe {
    width: 100px;
    height: 100px;
  }

  .hd-orb-v {
    font-size: 26px;
  }
}

/* tablet: yolculuk iki satır (üstte ülke → varış, altında süre ve küre) */
@media (max-width: 980px) {
  .hd-meta {
    gap: 10px 26px;
  }

  .hd-meta li {
    padding: 0;
  }

  .hd-meta li + li {
    border-left: 0;
  }

  .hd-orb {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "route route"
      "txt globe";
    gap: 14px 20px;
  }

  /* ülke → "to" → varış tek satırda; sığmazsa "to Istanbul" birlikte alta iner */
  .hd-orb-route {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    width: auto;
  }

  .hd-orb-chip {
    width: auto;
    max-width: 100%;
  }

  .hd-orb-end {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
  }

  .hd-orb-txt {
    width: auto;
    min-width: 138px;
  }

  .hd-orb-globe {
    width: 96px;
    height: 96px;
  }
}

/* telefon: bilgi satırı sığdığı kadar yan yana (sığmayan alta iner); kartta iki bölge alt alta; küre solda */
@media (max-width: 620px) {
  /* bilgiler sığdığı kadar yan yana durur, sığmayan alt satıra iner; her satır ortalı.
     (Zorla alt alta dizilmez: geniş telefonda ikisi aynı satıra sığar.) */
  .hd-meta {
    gap: 9px 16px;
    margin-top: 16px;
  }

  .hd-meta li {
    gap: 8px;
  }

  /* hiçbiri yan yana sığmıyorsa (hospital.js .is-stacked ekler): ortalı bir blokta alt alta,
     ikonlar aynı hizada. Bayrak kutusu ikonlarla aynı genişlikte ki yazılar aynı yerden başlasın. */
  .hd-meta.is-stacked {
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }

  .hd-meta.is-stacked .hd-meta-ico--flag {
    width: 24px;
  }

  .hd-meta-ico {
    width: 24px;
    height: 24px;
  }

  .hd-meta-ico .icon {
    width: 12.5px;
    height: 12.5px;
  }

  .hd-meta-ico--flag .hd-flag {
    width: 20px;
    height: 14.5px;
  }

  .hd-meta-txt {
    font-size: 12.5px;
  }

  .hd-meta-v {
    font-size: 13.5px;
  }

  .hd-hero--inset .hd-meta + .hd-dash {
    margin-top: 18px;
  }

  .hd-dash--orb.has-orb,
  .hd-dash--orb.has-orb.hd-dash--no-score {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    padding: 14px 16px 16px;
  }

  .hd-dash--orb.has-orb > .hd-orb {
    margin: 13px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    border-left: 0;
    border-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .18) 18%, rgba(255, 255, 255, .18) 82%, rgba(255, 255, 255, 0)) 1;
  }

  /* telefonda küre solda, süre ve mesafe yanında; blok ve rota satırı ortalı */
  .hd-orb {
    grid-template-columns: auto auto;
    grid-template-areas:
      "route route"
      "globe txt";
    justify-content: center;
    gap: 12px 18px;
  }

  .hd-orb-route {
    justify-content: center;
    gap: 8px 9px;
  }

  .hd-orb-end {
    gap: 9px;
  }

  .hd-orb-chip {
    padding: 5px 10px 5px 9px;
  }

  .hd-orb-dest {
    font-size: 13.5px;
  }

  .hd-orb-txt {
    min-width: 0;
  }

  .hd-orb-v {
    margin-top: 6px;
    font-size: 24px;
  }

  .hd-orb-sub {
    margin-top: 5px;
  }

  .hd-orb-globe {
    width: 84px;
    height: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hd-meta {
    animation: none !important;
  }

  .hd-orb-globe canvas {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   VERİ BÖLÜMLERİ (hx-)
   Bölüm kabuğu (.hd-sec, .hd-head), belirme (.hd-rise) ve özet kartı
   (.hd-short) yukarıdan gelir; buradan sonrası veri bölümleridir.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   1) HAKKINDA: metin + künye
   Solda hastaneyi anlatan metin (editör içeriği: paragraf, ara başlık,
   liste, bağlantı). Sağda künye, akreditasyon şeridi ve başlıca tedavilerin
   bağlantıları.
   ══════════════════════════════════════════════════════════════ */
.hx-over {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr);
  gap: 22px;
  align-items: start;
}

.hx-over--solo {
  grid-template-columns: minmax(0, 1fr);
}

.hx-about {
  display: flex;
  flex-direction: column;
  padding: 30px 34px 28px;
  border: 1px solid var(--card-line, #e3ebf5);
  border-radius: var(--hd-radius);
  background: #fff;
}

/* editör içeriği */
.hx-prose {
  color: #2b3d52;
  font-size: 16px;
  line-height: 1.75;
}

.hx-prose > :first-child {
  margin-top: 0;
}

.hx-prose > :last-child {
  margin-bottom: 0;
}

.hx-prose p {
  margin: 0 0 14px;
}

.hx-prose h3,
.hx-prose h4 {
  margin: 24px 0 8px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.3;
}

.hx-prose h4 {
  font-size: 16px;
}

.hx-prose ul,
.hx-prose ol {
  margin: 0 0 14px;
  padding-left: 20px;
}

.hx-prose li + li {
  margin-top: 6px;
}

.hx-prose a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-decoration-color: rgba(15, 118, 184, .3);
  text-underline-offset: 3px;
}

.hx-prose a:hover {
  text-decoration-color: currentColor;
}

.hx-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* telefonda uzun metin kısalır (hospital.js); geniş ekranda düğme hiç görünmez */
.hx-prose.is-clamped {
  max-height: 318px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
  mask-image: linear-gradient(#000 60%, transparent);
}

.hx-about-more {
  align-self: flex-start;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-dark);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(15, 118, 184, .35);
  text-underline-offset: 3px;
  cursor: pointer;
}

.hx-about-more[hidden] {
  display: none;
}

/* başlıca tedaviler: künye kartının dibinde, her biri tedavi sayfasına gider */
.hx-known {
  padding: 18px 0 14px;
  border-top: 1px solid var(--card-line, #e3ebf5);
}

.hx-facts > .hx-known:first-child {
  padding-top: 0;
  border-top: 0;
}

.hx-known h3 {
  margin-bottom: 12px;
}

.hx-known ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hx-known a {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--card-line, #e3ebf5);
  border-radius: 999px;
  background: #fff;
  color: var(--navy-dark);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  transition: border-color .25s ease, color .25s ease;
}

.hx-known a:hover {
  border-color: rgba(30, 159, 224, .6);
  color: var(--accent-dark);
}

/* şerit: künye kartının dibinde, üstünde ince bir ayraç */
.hx-seals {
  margin-top: 6px;
  padding: 18px 0 14px;
  border-top: 1px solid var(--card-line, #e3ebf5);
}

.hx-facts > .hx-seals:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.hx-seals h3 {
  margin-bottom: 12px;
}

.hx-seals ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hx-seals li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px 5px 6px;
  border: 1px solid var(--card-line, #e3ebf5);
  border-radius: 999px;
  background: var(--soft);
  color: var(--navy-dark);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
}

.hx-seals img,
.hx-seals .icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
}

.hx-seals .icon {
  padding: 5px;
  color: var(--accent-dark);
}

/* künye kartı */
.hx-facts {
  padding: 24px 26px 12px;
  border: 1px solid var(--card-line, #e3ebf5);
  border-radius: var(--hd-radius);
  background: #fff;
}

.hx-facts h3 {
  margin: 0 0 6px;
  color: var(--accent-dark);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hx-facts dl {
  margin: 0;
}

.hx-facts dl > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
}

.hx-facts dl > div + div {
  border-top: 1px solid var(--card-line, #e3ebf5);
}

.hx-facts dt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.hx-facts dt .icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--accent);
  transform: translateY(2px);
}

.hx-facts dd {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  /* uzun alan adı kartın dışına taşmasın */
  overflow-wrap: anywhere;
}

.hx-facts dd a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-decoration-color: rgba(15, 118, 184, .3);
  text-underline-offset: 3px;
}

.hx-facts dd a:hover {
  text-decoration-color: currentColor;
}

/* ══════════════════════════════════════════════════════════════
   2) FMR EKRANI (doktor sayfası)
   Koyu bir "ekran": solda kadran (puan, kademe), ortada puanın
   bileşenleri, sağda puanın geçmişi. Ekran görününce (.is-in) kadran
   döner, çubuklar uzar, çizgi çizilir; sonra hiçbir şey kıpırdamaz
   (yalnız "canlı" noktası nefes alır). Hastane sayfası bu ekranı
   kullanmaz; orada 2a'daki sade puan kartı durur.
   ══════════════════════════════════════════════════════════════ */
.hx-screen {
  position: relative;
  padding: 22px 34px 30px;
  border-radius: 26px;
  background:
    radial-gradient(560px 280px at 10% 0%, rgba(30, 159, 224, .24), transparent 70%),
    radial-gradient(460px 260px at 100% 100%, rgba(126, 208, 255, .1), transparent 70%),
    linear-gradient(165deg, #123767 0%, #0c2549 52%, #081a36 100%);
  color: #e3f1fb;
  box-shadow:
    0 44px 80px -42px rgba(8, 26, 54, .8),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  overflow: hidden;
  isolation: isolate;
}

/* imza: üst kenarda uçları sönen ışık çizgisi (hero kartıyla aynı) */
.hx-screen::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(126, 208, 255, .85) 28%, rgba(126, 208, 255, .85) 72%, transparent);
}

.hx-screen h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  color: rgba(158, 194, 228, .92);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hx-screen h3 small {
  margin-left: auto;
  color: rgba(198, 220, 239, .85);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: none;
}

.hx-screen h3 .icon {
  width: 14px;
  height: 14px;
  color: #7ed0ff;
}

/* üst satır: durum + not */
.hx-screen-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 20px;
  margin-bottom: 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.hx-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hx-live i {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2ee6a8;
}

.hx-live i::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(46, 230, 168, .6);
  animation: hx-pulse 2.4s ease-out infinite;
}

.hx-screen-meta {
  color: rgba(198, 220, 239, .7);
  font-size: 11.5px;
  font-weight: 600;
}

/* üç bölge */
.hx-screen-grid {
  display: grid;
  grid-template-columns: 236px minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 34px 48px;
  align-items: start;
}

.hx-screen-grid--no-parts,
.hx-screen-grid--no-field {
  grid-template-columns: 236px minmax(0, 1fr);
}

.hx-screen-grid--no-parts.hx-screen-grid--no-field {
  grid-template-columns: minmax(0, 1fr);
}

/* ── kadran ── */
.hx-dial {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.hx-dial-ring {
  position: relative;
  display: block;
  width: 212px;
  height: 212px;
}

.hx-dial-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

.hx-dial-ring circle {
  fill: none;
  stroke-width: 13;
  stroke-linecap: round;
}

.hx-dial-track {
  stroke: rgba(255, 255, 255, .09);
}

/* r=85 → çevre 534 */
.hx-dial-fill {
  stroke: url(#hx-dial-grad);
  stroke-dasharray: 534;
  stroke-dashoffset: 534;
  filter: drop-shadow(0 0 9px rgba(30, 159, 224, .6));
  transition: stroke-dashoffset 1.6s cubic-bezier(.22, .61, .36, 1) .15s;
}

.hx-screen.is-in .hx-dial-fill {
  stroke-dashoffset: calc(534px - (var(--n, 0) / 5) * 534px);
}

.hx-dial-mid {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
}

.hx-dial-mid b {
  display: inline-flex;
  align-items: baseline;
  color: #fff;
  font-size: 62px;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hx-dial-mid em {
  margin-left: 3px;
  color: #7ed0ff;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.hx-dial-mid small {
  color: rgba(158, 194, 228, .92);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hx-tier {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border: 1px solid rgba(126, 208, 255, .28);
  border-radius: 999px;
  background: rgba(126, 208, 255, .1);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
}

.hx-tier .hd-stars {
  font-size: 11.5px;
  letter-spacing: 1.5px;
}

.hx-rankline {
  max-width: 230px;
  color: rgba(198, 220, 239, .8);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

/* ── puanın bileşenleri ── */
.hx-brow {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-areas:
    "ico name val"
    "ico track track";
  column-gap: 13px;
  row-gap: 8px;
  align-items: center;
}

.hx-brow + .hx-brow {
  margin-top: 17px;
}

.hx-brow-ico {
  grid-area: ico;
  display: grid;
  place-items: center;
  align-self: start;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(126, 208, 255, .11);
  color: var(--accent);
}

.hx-brow-ico .icon {
  width: 17px;
  height: 17px;
}

.hx-brow-name {
  grid-area: name;
  min-width: 0;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
}

.hx-brow-name small {
  display: block;
  margin-top: 2px;
  color: rgba(198, 220, 239, .66);
  font-size: 11.5px;
  font-weight: 500;
}

.hx-brow-val {
  grid-area: val;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ağırlık: alt puanın toplamdaki payı */
.hx-brow-val em {
  min-width: 42px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(126, 208, 255, .13);
  color: #bfe6ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}

.hx-brow-track {
  grid-area: track;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}

.hx-brow-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-dark), #7ed0ff);
  transition: width 1.1s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(.35s + var(--i, 0) * 90ms);
}

.hx-screen.is-in .hx-brow-track i {
  width: var(--w, 50%);
}

/* ── puan geçmişi: üçüncü sütun; çizgi sütunun boyuna uzar ── */
.hx-screen-grid {
  align-items: stretch;
}

.hx-dial,
.hx-break {
  align-self: start;
}

.hx-trend {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hx-trend h3 {
  margin-bottom: 10px;
}

/* çizgi esner (preserveAspectRatio: none); noktalar bu yüzden HTML'de, yüzdeyle durur */
.hx-spark-wrap {
  position: relative;
  flex: 1;
  min-height: 140px;
}

.hx-spark {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hx-spark-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border: 2px solid #7ed0ff;
  border-radius: 50%;
  background: #0c2549;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, .7, .25, 1);
  transition-delay: calc(.9s + var(--i, 0) * 180ms);
}

.hx-spark-dot.is-now {
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-color: #fff;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(30, 159, 224, .22);
}

.hx-screen.is-in .hx-spark-dot {
  opacity: 1;
  transform: none;
}

.hx-spark-area {
  fill: url(#hx-spark-grad);
  opacity: 0;
  transition: opacity .9s ease 1.3s;
}

.hx-spark-line {
  fill: none;
  stroke: #7ed0ff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* çizgi soldan sağa açılır. (dasharray ile çizim, non-scaling-stroke altında
   ekran ölçüsüyle hesaplandığı için son parça eksik kalıyordu.) */
.hx-spark {
  clip-path: inset(-10px 100% -10px -10px);
  transition: clip-path 1.5s cubic-bezier(.22, .61, .36, 1) .6s;
}

.hx-screen.is-in .hx-spark {
  clip-path: inset(-10px -10px -10px -10px);
}

.hx-screen.is-in .hx-spark-area {
  opacity: 1;
}

.hx-trend-pts {
  display: flex;
  justify-content: space-between;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.hx-trend-pts li {
  display: grid;
  gap: 1px;
  color: rgba(198, 220, 239, .66);
  font-size: 10.5px;
  font-weight: 600;
}

.hx-trend-pts li:not(:first-child):not(:last-child) {
  text-align: center;
}

.hx-trend-pts li:last-child {
  text-align: right;
}

.hx-trend-pts b {
  color: rgba(227, 241, 251, .85);
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.hx-trend-pts .is-now b {
  color: #fff;
}

.hx-trend-pts .is-now span {
  color: #7ed0ff;
}

.hx-foot {
  max-width: 880px;
}

/* ══════════════════════════════════════════════════════════════
   2a) FMR PUAN KARTI (hastane sayfası)
   Sade tek kart: solda koyu lacivert zeminde puan (rakam, yıldızlar,
   kademe, doğrulama tarihi), sağda açık zeminde puanın bileşenleri (ad,
   ince çubuk, alt puan, ağırlık). Sayfanın bu kısmı çok açık kaldığı için
   yalnız puan özeti koyu; hero kartıyla aynı lacivert.
   Koyu ekran, kadran, puan geçmişi ve kapasite karoları bu sayfadan
   kaldırıldı; kapasite Hakkında bölümündeki künyede tek satırdır.
   Çubuklar kart görününce bir kez uzar, başka hareket yoktur.
   ══════════════════════════════════════════════════════════════ */
.hx-rate {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  border-radius: 18px;
  background: #fff;
}

/* bileşen girilmemişse yalnız puan özeti */
.hx-rate--solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 420px;
}

/* ── puan özeti: koyu lacivert; kartın çerçevesi yalnız açık kısımdadır ── */
.hx-rate-sum {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 12px;
  padding: 30px 32px;
  border-radius: 18px 0 0 18px;
  background:
    radial-gradient(300px 200px at 0% 0%, rgba(30, 159, 224, .3), transparent 72%),
    linear-gradient(165deg, #123767 0%, #0c2549 55%, #081a36 100%);
  color: #e3f1fb;
}

.hx-rate--solo .hx-rate-sum {
  border-radius: 18px;
}

.hx-rate-sum p {
  margin: 0;
}

.hx-rate-num {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.hx-rate-num b {
  color: #fff;
  font-size: 60px;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .95;
  font-variant-numeric: tabular-nums;
}

.hx-rate-num span {
  color: #9fd8ff;
  font-size: 13.5px;
  font-weight: 700;
}

.hx-rate-tier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.hx-rate-tier .hd-stars {
  font-size: 15px;
  letter-spacing: 2px;
}

.hx-rate-ver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(198, 220, 239, .88);
  font-size: 12.5px;
  font-weight: 600;
}

.hx-rate-ver::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2ee6a8;
}

/* ── puanın bileşenleri ── */
.hx-rate-parts {
  min-width: 0;
  padding: 26px 32px 14px;
  border: 1px solid var(--card-line);
  border-left: 0;
  border-radius: 0 18px 18px 0;
}

.hx-rate-parts h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 0 0 6px;
  color: var(--accent-dark);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hx-rate-parts h3 small {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.hx-rate-parts ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hx-rate-parts li {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(110px, 1fr) auto;
  grid-template-areas: "name bar val";
  align-items: center;
  column-gap: 26px;
  padding: 13px 0;
}

.hx-rate-parts li + li {
  border-top: 1px solid #eef3f9;
}

.hx-rate-name {
  grid-area: name;
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.hx-rate-name small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
}

.hx-rate-bar {
  grid-area: bar;
  height: 6px;
  border-radius: 999px;
  background: #e8eff7;
  overflow: hidden;
}

/* genişlik hep son hâlindedir; betik çalışmasa da çubuk dolu görünür */
.hx-rate-bar i {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.hx-rate.is-in .hx-rate-bar i {
  animation: hx-grow .9s cubic-bezier(.22, .61, .36, 1) .15s backwards;
}

.hx-rate-val {
  grid-area: val;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  min-width: 84px;
  white-space: nowrap;
}

.hx-rate-val b {
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ağırlık: alt puanın toplamdaki payı */
.hx-rate-val em {
  min-width: 34px;
  color: var(--muted);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════
   2b) LİSTE KARTLARI (uzmanlık alanları, teknoloji)
   Hub'ın .lgroup kalıbı; kart başlığı burada h3 (bölüm başlığı h2) ve
   bağlantısı olmayan öğe ok taşımayan düz satırdır.
   ══════════════════════════════════════════════════════════════ */
.hd-page .lg-head h3 {
  margin: 0;
  color: var(--navy-dark);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.45px;
  line-height: 1.22;
}

.hd-page .lg-head h3::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(30, 159, 224, .12) 100%);
}

.hx-lg-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}

/* ══════════════════════════════════════════════════════════════
   3) FINDMED SIRALAMALARI
   Hastanenin yer aldığı listeler ve tedavi sıralamaları. Sıra numarası
   yok: her kart bir bağlantıdır (ikon + ad + alt satır + ok).
   ══════════════════════════════════════════════════════════════ */
.hx-ranks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hx-ranks a {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 18px;
  gap: 14px;
  align-items: center;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--card-line, #e3ebf5);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.hx-ranks a:hover {
  border-color: rgba(30, 159, 224, .55);
  box-shadow: 0 18px 36px -28px rgba(14, 44, 86, .45);
}

.hx-rank-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  transition: background-color .25s ease, color .25s ease;
}

.hx-rank-ico .icon {
  width: 22px;
  height: 22px;
}

.hx-ranks a:hover .hx-rank-ico {
  background: var(--navy);
  color: #fff;
}

.hx-rank-txt {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.hx-rank-txt strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.3;
}

.hx-rank-txt small {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.hx-rank-flag {
  width: 18px;
  height: 13px;
  border-radius: 3px;
  object-fit: cover;
}

.hx-rank-go {
  width: 17px;
  height: 17px;
  color: #9fb2c6;
  transition: color .2s ease, transform .25s cubic-bezier(.2, .7, .25, 1);
}

.hx-ranks a:hover .hx-rank-go {
  color: var(--accent-dark);
  transform: translateX(3px);
}

/* ══════════════════════════════════════════════════════════════
   5) FOTOĞRAFLAR VE VİDEO
   Beş karoluk mozaik: solda büyük karo (video varsa o), sağda dört
   küçük. Köşeler karolarda değil kapta yuvarlanır. Kalan fotoğraflar
   son karonun üstündeki "+N" ile görüntüleyicide açılır.
   ══════════════════════════════════════════════════════════════ */
.hx-gal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 214px;
  gap: 10px;
  border-radius: 22px;
  overflow: hidden;
}

/* küçük karoların sarmalayıcısı: geniş ekranda ızgaraya karışır, telefonda yatay şerit olur */
.hx-gal-rest {
  display: contents;
}

.hx-gal-tile {
  position: relative;
  min-width: 0;
  background: #dfe9f4;
}

.hx-gal-main {
  grid-column: span 2;
  grid-row: span 2;
}

.hx-gal-btn {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.hx-gal-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .25, 1);
}

.hx-gal-btn:hover img,
.hx-gal-btn:focus-visible img {
  transform: scale(1.04);
}

.hx-gal-btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

/* alt yazı: karonun dibinde; fareyle ya da odakla belirir */
.hx-gal-cap {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  display: grid;
  gap: 3px;
  padding: 36px 16px 13px;
  background: linear-gradient(180deg, rgba(8, 22, 44, 0), rgba(8, 22, 44, .8));
  opacity: 0;
  transition: opacity .3s ease;
}

.hx-gal-cap small {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

.hx-gal-btn:hover .hx-gal-cap,
.hx-gal-btn:focus-visible .hx-gal-cap {
  opacity: 1;
}

/* video karosu: alt yazı hep görünür, ortada oynat düğmesi */
.hx-gal-video .hx-gal-btn::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(8, 22, 44, .2);
  pointer-events: none;
}

.hx-gal-video .hx-gal-cap {
  padding: 70px 24px 20px;
  opacity: 1;
}

.hx-gal-video .hx-gal-cap b {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.hx-gal-video .hx-gal-cap small {
  color: rgba(227, 241, 251, .88);
}

.hx-gal-play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--navy);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6);
  transform: translate(-50%, -50%);
  transition: transform .3s cubic-bezier(.2, .7, .25, 1), background-color .3s ease;
}

.hx-gal-play svg {
  width: 30px;
  height: 30px;
  margin-left: 4px;
  fill: currentColor;
}

.hx-gal-btn:hover .hx-gal-play {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.07);
}

/* oynatıcı karonun yerine geçer */
.hx-gal-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

/* "+N photos": son karonun üstünde */
.hx-gal-more {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: rgba(8, 22, 44, .62);
  font-size: 15px;
  font-weight: 800;
  transition: background-color .3s ease;
}

.hx-gal-more .icon {
  width: 20px;
  height: 20px;
}

.hx-gal-btn:hover .hx-gal-more {
  background: rgba(8, 22, 44, .48);
}

/* karo sayısına göre yerleşim (beşten az fotoğraf) */
.hx-gal--n1 {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
  max-width: 920px;
}

.hx-gal--n1 .hx-gal-main {
  grid-column: auto;
  grid-row: auto;
  aspect-ratio: 16 / 9;
}

.hx-gal--n2 .hx-gal-rest .hx-gal-tile {
  grid-column: span 2;
  grid-row: span 2;
}

.hx-gal--n3 .hx-gal-rest .hx-gal-tile {
  grid-column: span 2;
}

.hx-gal--n4 .hx-gal-rest .hx-gal-tile:first-child {
  grid-column: span 2;
}

/* ── görüntüleyici (dialog) ── */
.hx-lb {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(6, 16, 32, .97);
  color: #fff;
}

.hx-lb::backdrop {
  background: rgba(6, 16, 32, .97);
}

.hx-lb[open] {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 84px;
  align-items: center;
}

.hx-lb-fig {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  justify-items: center;
  gap: 14px;
  min-width: 0;
  margin: 0;
}

.hx-lb-fig img {
  max-width: 100%;
  max-height: calc(100vh - 130px);
  max-height: calc(100dvh - 130px);
  border-radius: 10px;
  object-fit: contain;
}

.hx-lb-fig figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 14px;
  color: rgba(227, 241, 251, .92);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.hx-lb-fig figcaption b {
  color: rgba(198, 220, 239, .7);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.hx-lb-nav,
.hx-lb-close {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease;
}

.hx-lb-nav:hover,
.hx-lb-close:hover {
  background: rgba(255, 255, 255, .22);
}

.hx-lb-nav:focus-visible,
.hx-lb-close:focus-visible {
  outline: 2px solid #7ed0ff;
  outline-offset: 2px;
}

.hx-lb .icon {
  width: 22px;
  height: 22px;
}

.hx-lb-nav {
  grid-row: 1;
  justify-self: center;
}

.hx-lb-prev {
  grid-column: 1;
}

.hx-lb-next {
  grid-column: 3;
}

.hx-lb-close {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
}

/* tek fotoğraf: oklar yok */
.hx-lb.is-single .hx-lb-nav {
  visibility: hidden;
}

/* ══════════════════════════════════════════════════════════════
   5b) TEDAVİ KARTLARI: üç sütun
   Hub'ın .lgroup kartı; satırlar sitedeki tedavi sayfalarına gider.
   ══════════════════════════════════════════════════════════════ */
.hd-page .lg-grid.hx-lg3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.hd-page .hx-lg3 .lg-head h3 {
  font-size: 19px;
}

/* ══════════════════════════════════════════════════════════════
   5c) KONUM: harita + adres + ulaşım
   Solda harita, sağda adres, yol tarifi ve ulaşım satırları.
   ══════════════════════════════════════════════════════════════ */
.hx-loc {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, 1fr);
  gap: 22px;
  align-items: stretch;
}

.hx-loc-map {
  position: relative;
  min-height: 430px;
  border: 1px solid var(--card-line, #e3ebf5);
  border-radius: var(--hd-radius);
  background: #e9f0f8;
  overflow: hidden;
}

.hx-loc-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hx-loc-side {
  display: flex;
  flex-direction: column;
  padding: 26px 28px;
  border: 1px solid var(--card-line, #e3ebf5);
  border-radius: var(--hd-radius);
  background: #fff;
}

.hx-loc-addr h3 {
  margin: 0 0 10px;
  color: var(--accent-dark);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hx-loc-addr address {
  display: grid;
  gap: 5px;
  font-style: normal;
}

.hx-loc-addr address strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.hx-loc-addr address span {
  color: #3c4f63;
  font-size: 14.5px;
  line-height: 1.55;
}

.hx-loc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 18px;
}

.hx-loc-actions .btn {
  font-size: 13px;
}

.hx-loc-actions .btn .icon {
  width: 17px;
  height: 17px;
}

.hx-loc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-dark);
  font-size: 13.5px;
  font-weight: 700;
}

.hx-loc-link .icon {
  width: 14px;
  height: 14px;
}

.hx-loc-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hx-loc-ways {
  display: grid;
  gap: 15px;
  margin: 24px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--card-line, #e3ebf5);
  list-style: none;
}

.hx-loc-ways li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.hx-loc-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.hx-loc-ico .icon {
  width: 20px;
  height: 20px;
}

.hx-loc-ways strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.hx-loc-ways small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

/* ══════════════════════════════════════════════════════════════
   6) DUYARLI
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .hx-screen {
    padding: 20px 26px 26px;
  }

  .hx-screen-grid {
    grid-template-columns: 212px minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 30px 34px;
  }

  .hx-dial-ring {
    width: 196px;
    height: 196px;
  }

  .hx-dial-mid b {
    font-size: 56px;
  }

}

@media (max-width: 1100px) {
  .hx-over,
  .hx-loc {
    grid-template-columns: minmax(0, 1fr);
  }

  .hx-loc-map {
    min-height: 360px;
  }

  /* ulaşım satırları haritanın altında iki sütun */
  .hx-loc-ways {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 22px;
  }

  .hd-page .lg-grid.hx-lg3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hx-gal {
    grid-auto-rows: 176px;
  }
}

@media (max-width: 980px) {

  .hx-rate {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .hx-rate-sum {
    padding: 26px 24px;
  }

  .hx-rate-parts {
    padding: 22px 24px 10px;
  }

  /* satır: ad ve puan üstte, çubuk altta tam genişlik (dar sütunda ad kırılmasın) */
  .hx-rate-parts li {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name val"
      "bar bar";
    align-items: start;
    gap: 10px 14px;
    padding: 14px 0;
  }

  .hx-rate-val {
    min-width: 0;
  }

  /* kadran + bileşenler üstte, puan geçmişi altta tam genişlik */
  .hx-screen-grid,
  .hx-screen-grid--no-parts,
  .hx-screen-grid--no-field {
    grid-template-columns: 212px minmax(0, 1fr);
  }

  .hx-trend {
    grid-column: 1 / -1;
  }

  .hx-spark-wrap {
    flex: none;
    min-height: 0;
    height: 84px;
  }

  .hx-ranks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .hx-facts {
    padding: 20px 20px 8px;
  }

  .hx-facts dl > div {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .hx-screen {
    padding: 18px 18px 20px;
    border-radius: 20px;
  }

  .hx-screen-top {
    margin-bottom: 20px;
    padding-bottom: 14px;
  }

  .hx-screen-grid,
  .hx-screen-grid--no-parts,
  .hx-screen-grid--no-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .hx-dial-ring {
    width: 184px;
    height: 184px;
  }

  .hx-dial-mid b {
    font-size: 52px;
  }

  /* başlıktaki birim notu alt satıra iner */
  .hx-screen h3 {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .hx-break h3 small {
    flex-basis: 100%;
    margin-left: 0;
  }

  /* puan kartı: özet üstte tek sütun (rakam, yıldız + bant, edisyon, güven çipleri,
     bağlantı alt alta; iki sütunlu düzen yıldız ve rozeti kartın dışına taşırıyordu), bileşenler altta */
  .hx-rate {
    grid-template-columns: minmax(0, 1fr);
  }

  .hx-rate-sum {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 10px;
    padding: 22px 20px 20px;
    border-radius: 18px 18px 0 0;
  }

  .hx-rate--solo .hx-rate-sum {
    border-radius: 18px;
  }

  .hx-rate-num b {
    font-size: 52px;
  }

  .hx-rate-tier {
    gap: 6px 8px;
  }

  .hx-rate-tier .fmr-tier {
    margin-left: 0;
  }

  .hx-rate-trust {
    margin-top: 6px;
  }

  .hx-rate-method {
    margin-top: 4px;
  }

  .hx-rate-parts {
    padding: 20px 20px 6px;
    border: 1px solid var(--card-line);
    border-top: 0;
    border-radius: 0 0 18px 18px;
  }

  .hx-ranks {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .hx-ranks a {
    grid-template-columns: 40px minmax(0, 1fr) 16px;
    gap: 12px;
    padding: 13px 14px;
  }

  .hx-rank-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .hx-rank-txt strong {
    font-size: 14.5px;
  }

  .hx-about {
    padding: 22px 20px 20px;
  }

  .hx-prose {
    font-size: 15.5px;
    line-height: 1.7;
  }

  .hx-prose h3,
  .hx-prose h4 {
    margin-top: 20px;
    font-size: 17px;
  }

  /* fotoğraflar: büyük karo üstte, kalanlar altında yatay kayan şerit */
  .hx-gal {
    display: block;
    border-radius: 0;
    overflow: visible;
  }

  .hx-gal-main {
    aspect-ratio: 16 / 10;
    border-radius: 18px;
    overflow: hidden;
  }

  .hx-gal-rest {
    display: flex;
    gap: 8px;
    margin: 8px -14px 0 0;
    padding-right: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .hx-gal-rest::-webkit-scrollbar {
    display: none;
  }

  .hx-gal-rest .hx-gal-tile {
    flex: 0 0 42%;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    scroll-snap-align: start;
  }

  .hx-gal--n2 .hx-gal-rest .hx-gal-tile {
    flex-basis: 100%;
    aspect-ratio: 16 / 10;
  }

  .hx-gal-play {
    width: 60px;
    height: 60px;
  }

  .hx-gal-play svg {
    width: 24px;
    height: 24px;
  }

  .hx-gal-video .hx-gal-cap {
    padding: 50px 16px 14px;
  }

  .hx-gal-video .hx-gal-cap b {
    font-size: 16px;
  }

  .hx-gal-more {
    font-size: 13px;
  }

  /* görüntüleyici: oklar altta, fotoğraf tam genişlik */
  .hx-lb[open] {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 12px;
  }

  .hx-lb-fig {
    grid-column: 1;
  }

  .hx-lb-fig img {
    max-height: calc(100vh - 210px);
    max-height: calc(100dvh - 210px);
  }

  .hx-lb-nav {
    position: absolute;
    bottom: 22px;
  }

  .hx-lb-prev {
    left: calc(50% - 60px);
  }

  .hx-lb-next {
    right: calc(50% - 60px);
  }

  /* tedavi kartları: yatay kayan şerit (altı kart alt alta sayfayı uzatıyordu) */
  .hd-page .lg-grid.hx-lg3 {
    display: flex;
    gap: 12px;
    margin-right: -14px;
    padding: 0 14px 6px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .hd-page .lg-grid.hx-lg3::-webkit-scrollbar {
    display: none;
  }

  .hx-lg3 .lgroup {
    flex: 0 0 84%;
    scroll-snap-align: start;
  }

  .hx-loc-map {
    min-height: 280px;
  }

  .hx-loc-side {
    padding: 20px 18px;
  }

  .hx-loc-ways {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 20px;
    padding-top: 20px;
  }

  /* sayfa boyu: olanak kartları ikili ve notsuz */
  .hd-page .hd-amen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .hd-page .hd-amen li {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 11px 12px;
  }

  .hd-page .hd-amen-ico {
    width: 34px;
    height: 34px;
  }

  .hd-page .hd-amen small {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   7) HAREKET
   ══════════════════════════════════════════════════════════════ */
/* puan kartındaki çubuk: sıfırdan kendi genişliğine */
@keyframes hx-grow {
  from {
    width: 0;
  }
}

@keyframes hx-pulse {
  0% {
    transform: scale(.6);
    opacity: .9;
  }

  70%,
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-live i::after {
    animation: none;
    opacity: 0;
  }

  .hx-rate.is-in .hx-rate-bar i {
    animation: none;
  }

  .hx-dial-fill,
  .hx-brow-track i,
  .hx-spark,
  .hx-spark-area,
  .hx-spark-dot,
  .hx-gal-btn img,
  .hx-gal-play {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   FMR v1.4 gösterimi: güven satırı (confidence/coverage/sources),
   metodoloji bağlantısı ve bant rozeti yerleşimi. Rozet stilleri
   70-fmr.css'tedir (demet global); buradakiler yalnız yerleşim.
   ══════════════════════════════════════════════════════════════ */
.hx-rate-tier .fmr-tier {
  margin-left: 9px;
  vertical-align: 2px;
}

.hx-rate-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.hx-rate-trust li {
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.hx-rate-trust b {
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.hx-rate-method {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  color: #9fd3f3;
  font-size: 12.5px;
  font-weight: 700;
}

.hx-rate-method:hover {
  color: #cde9fb;
}

.hx-rate-method .icon {
  width: 13px;
  height: 13px;
}


/* ===== assets/css/src/06-pages/65-doctor.css ===== */
/* Tekil doktor sayfası: blocks/doctor-hero + blocks/doctor-body.
   Hastane sayfasının kabuğunu ve veri bileşenlerini olduğu gibi kullanır
   (60-hospital.css: hd- hero/ray/bölüm/SSS/kapanış, hx- hakkında kartı/künye/FMR
   ekranı/sıralama kartları/harita). Burada yalnız doktora özgü parçalar var,
   "dr-" önekli: hero'daki portre halkası, tedavi çubukları, kariyer adımları ve
   hastane kartı + harita. Sayfada başka doktorlarla ya da ülkelerle kıyas
   yoktur. Hero zemini doktorlar hub'ının görseli (.page-hero--doctors,
   10-page-hero.css). */

/* ══════════════════════════════════════════════════════════════
   1) HERO METNİ
   Ad tek satır; unvan aynı satırda, daha ince. Altında uzmanlık
   satırı (açık mavi), sonra spot ve konum satırı.
   ══════════════════════════════════════════════════════════════ */
/* Hub görselinde arka planda yürüyen doktorlar var; hafif bulanıklık onları
   zemine çeker, göz karttaki portreye gider. inset: bulanıklığın kenarda
   bıraktığı soluk çerçeve kadrajın dışında kalsın. */
.page-hero--doctor .hero-bg::before {
  inset: -24px;
  filter: blur(3px);
}

.dr-prefix {
  color: rgba(214, 233, 250, .78);
  font-weight: 500;
}

.hd-hero--inset .hero-copy>p.dr-role {
  margin: 10px auto 0;
  color: #9fd8ff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  animation: fm-rise-soft .8s cubic-bezier(.2, .7, .25, 1) .3s backwards;
}

.hd-hero--inset .hero-copy>p.dr-lead {
  margin-top: 12px;
}

/* ══════════════════════════════════════════════════════════════
   2) VERİ KARTI: portre puan halkasının içinde
   270°'lik halka hastane kartındaki göstergeyle aynı dil; ortası
   rakam yerine portre, puan halkanın alt açıklığında hap olarak.
   ══════════════════════════════════════════════════════════════ */
.dr-dash--no-marks {
  grid-template-columns: auto minmax(0, 1fr);
}

/* yalnız portre karosu kaldıysa kart karonun boyuna iner, ortada durur */
.dr-dash.hd-dash--no-cost.dr-dash--no-marks {
  grid-template-columns: auto;
  width: fit-content;
  padding-right: 18px;
}

.dr-dash-score {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 26px 12px 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
}

.dr-ring {
  position: relative;
  flex: 0 0 auto;
  width: 128px;
  height: 128px;
}

.dr-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* yay alt-soldan başlar, alt-sağda biter; açıklık altta */
  transform: rotate(135deg);
}

.dr-ring-svg circle {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  /* r=60 → çevre 376.99; 270° = 282.74 */
  stroke-dasharray: 282.74 376.99;
}

.dr-ring-track {
  stroke: rgba(255, 255, 255, .13);
}

.dr-ring-fill {
  stroke: url(#dr-ring-grad);
  stroke-dashoffset: 282.74;
  transition: stroke-dashoffset 1.5s cubic-bezier(.22, .61, .36, 1) .7s;
}

.hd-dash.is-in .dr-ring-fill {
  stroke-dashoffset: calc(282.74 - 282.74 * var(--n, 0) / 5);
}

.dr-ring.is-unrated .dr-ring-fill {
  display: none;
}

.dr-ring-img {
  position: absolute;
  inset: 12px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--navy-dark);
  object-fit: cover;
  object-position: 50% 18%;
}

.dr-ring-score {
  position: absolute;
  left: 50%;
  bottom: 1px;
  min-width: 46px;
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow:
    0 0 0 3px rgba(9, 24, 46, .92),
    0 8px 18px -8px rgba(0, 0, 0, .7);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transform: translateX(-50%);
}

.dr-dash-score .hd-stars {
  color: rgba(255, 255, 255, .28);
  font-size: 13px;
  letter-spacing: 2px;
}

/* yıllık vaka çubukları sırayla uzar */
.dr-dash-vol .hd-mini-row:nth-child(2) i::after {
  transition-delay: 1s;
}

.dr-dash-vol .hd-mini-row:nth-child(3) i::after {
  transition-delay: 1.1s;
}

/* ══════════════════════════════════════════════════════════════
   3) TEDAVİLER: yıllık vaka sayısına göre
   Tek kart: üstte toplam, altında sıralı satırlar. Her satır sitedeki
   tedavi sayfasına gider. Çubuk en çok yapılan tedaviye göre ölçeklenir;
   ilk satırın numarası lacivert.
   ══════════════════════════════════════════════════════════════ */
.dr-vol {
  border: 1px solid var(--card-line, #e3ebf5);
  border-radius: var(--hd-radius);
  background: #fff;
  overflow: hidden;
}

.dr-vol-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--card-line, #e3ebf5);
  background: var(--soft);
}

.dr-vol-total {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
}

.dr-vol-total b {
  color: var(--navy-dark);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dr-vol-total span {
  color: var(--accent-dark);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dr-vol-basis {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.dr-vol-list {
  margin: 0;
  padding: 4px 28px 6px;
  list-style: none;
}

.dr-vol-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1.1fr) minmax(0, 1.3fr) 136px;
  gap: 20px;
  align-items: center;
  padding: 17px 0;
  border-bottom: 1px solid var(--card-line, #e3ebf5);
}

.dr-vol-row:last-child {
  border-bottom: 0;
}

.dr-vol-no {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 10.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.dr-vol-row:first-child .dr-vol-no {
  background: var(--navy);
  color: #fff;
}

.dr-vol-name strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}

.dr-vol-name a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  transition: color .2s ease;
}

.dr-vol-name a .icon {
  width: 14px;
  height: 14px;
  color: #9fb2c6;
  transition: color .2s ease, transform .25s cubic-bezier(.2, .7, .25, 1);
}

.dr-vol-name a:hover {
  color: var(--accent-dark);
}

.dr-vol-name a:hover .icon {
  color: var(--accent-dark);
  transform: translateX(3px);
}

.dr-vol-name small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.dr-vol-track {
  height: 10px;
  border-radius: 999px;
  background: #e9f0f8;
  overflow: hidden;
}

.dr-vol-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--navy), var(--accent));
  transition: width 1.1s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(.25s + var(--i, 0) * 90ms);
}

.dr-vol.is-in .dr-vol-track i {
  width: var(--w, 0%);
}

.dr-vol-val {
  text-align: right;
}

.dr-vol-val b {
  display: block;
  color: var(--navy-dark);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dr-vol-val small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   4) KARİYER: soldan sağa adımlar, altında üyelik kartları
   Her adımın üstünde kısa bir şerit; en son adımınki vurgulu. Şeritler
   aralıklı durur, sayfaya uzanan süs çizgisi olmasın.
   ══════════════════════════════════════════════════════════════ */
.dr-career {
  display: grid;
  gap: 30px;
}

.dr-time {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 26px 28px 28px;
  border: 1px solid var(--card-line, #e3ebf5);
  border-radius: var(--hd-radius);
  background: #fff;
  list-style: none;
}

.dr-time li {
  display: grid;
  align-content: start;
  gap: 8px;
  padding-top: 16px;
  border-top: 3px solid #dbe7f3;
}

.dr-time li.is-now {
  border-top-color: var(--accent);
}

.dr-time-year {
  color: var(--accent-dark);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dr-time li.is-now .dr-time-year {
  color: var(--navy);
}

.dr-time-txt strong {
  display: block;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.3;
}

.dr-time-txt small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.dr-member h3 {
  margin: 0 0 14px;
  color: var(--accent-dark);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dr-member ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dr-member li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--card-line, #e3ebf5);
  border-radius: var(--hd-radius-sm);
  background: #fff;
}

.dr-member-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.dr-member-ico .icon {
  width: 20px;
  height: 20px;
}

.dr-member strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.dr-member small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
}

/* ══════════════════════════════════════════════════════════════
   5) HASTANE: kart + harita
   Solda çalıştığı hastanenin kartı (tamamı hastane sayfasına gider):
   üstte fotoğraf, altında ad, konum, spot ve sayılar. Sağda hastanenin
   haritası, altında adres ve yol tarifi. Harita verisi yoksa kart tek
   başına, fotoğraf solda olacak şekilde yatay durur.
   ══════════════════════════════════════════════════════════════ */
.dr-place {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 22px;
  align-items: stretch;
}

.dr-place--solo {
  grid-template-columns: minmax(0, 1fr);
}

.dr-map {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--card-line, #e3ebf5);
  border-radius: var(--hd-radius);
  background: #fff;
  overflow: hidden;
}

.dr-map .hx-loc-map {
  flex: 1;
  min-height: 300px;
  border: 0;
  border-radius: 0;
}

.dr-map-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 16px 20px;
  border-top: 1px solid var(--card-line, #e3ebf5);
}

.dr-map-foot address {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #3c4f63;
  font-size: 13.5px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.45;
}

.dr-map-foot address .icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--accent);
}

.dr-map-foot .btn {
  font-size: 13px;
}

.dr-map-foot .btn .icon {
  width: 17px;
  height: 17px;
}

.dr-hosp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  border: 1px solid var(--card-line, #e3ebf5);
  border-radius: var(--hd-radius);
  background: #fff;
  color: inherit;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.dr-hosp:hover {
  border-color: rgba(30, 159, 224, .55);
  box-shadow: 0 26px 50px -32px rgba(14, 44, 86, .5);
}

.dr-hosp-photo {
  min-height: 210px;
  background: var(--navy-dark) center / cover no-repeat;
}

/* harita yoksa: fotoğraf solda, bilgiler sağda */
.dr-place--solo .dr-hosp {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  grid-template-rows: auto;
}

.dr-place--solo .dr-hosp-photo {
  min-height: 280px;
}

.dr-hosp-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 28px 32px 26px;
}

.dr-hosp-k {
  color: var(--accent-dark);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dr-hosp-name {
  color: var(--ink);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.dr-hosp-where {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.dr-hosp-where .icon {
  width: 15px;
  height: 15px;
  color: var(--accent);
}

.dr-hosp-lead {
  margin-top: 4px;
  color: #3c4f63;
  font-size: 14.5px;
  line-height: 1.6;
}

.dr-hosp-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--card-line, #e3ebf5);
}

.dr-hosp-stats>span {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

.dr-hosp-stats b {
  color: var(--navy-dark);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.dr-hosp-stats small {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
}

.dr-hosp-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  color: var(--accent-dark);
  font-size: 13.5px;
  font-weight: 700;
}

.dr-hosp-go .icon {
  width: 15px;
  height: 15px;
  transition: transform .25s cubic-bezier(.2, .7, .25, 1);
}

.dr-hosp:hover .dr-hosp-go .icon {
  transform: translateX(3px);
}

/* ══════════════════════════════════════════════════════════════
   6) DUYARLI DAVRANIŞ
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .dr-time {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 18px;
  }

  .dr-place,
  .dr-place--solo .dr-hosp {
    grid-template-columns: minmax(0, 1fr);
  }

  .dr-place--solo .dr-hosp-photo {
    min-height: 220px;
  }
}

@media (max-width: 760px) {
  .dr-vol-head {
    padding: 18px 18px;
  }

  .dr-vol-total b {
    font-size: 30px;
  }

  .dr-vol-list {
    padding: 2px 18px 4px;
  }

  /* telefon: numara + ad + sayı tek satır, çubuk altta tam genişlik; notlar yok (sayfa boyu) */
  .dr-vol-row {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    grid-template-areas:
      "no name val"
      "track track track";
    gap: 10px 12px;
    padding: 14px 0;
  }

  .dr-vol-no { grid-area: no; }
  .dr-vol-name { grid-area: name; }
  .dr-vol-track { grid-area: track; height: 8px; }
  .dr-vol-val { grid-area: val; }

  .dr-vol-name strong {
    font-size: 14px;
  }

  .dr-vol-name small {
    display: none;
  }

  .dr-vol-val b {
    font-size: 19px;
  }

  .dr-vol-val small {
    font-size: 10.5px;
  }

  /* telefon: adımlar alt alta, yıl solda; şerit yerine satır çizgisi */
  .dr-time {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 4px 18px;
  }

  .dr-time li {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    padding: 13px 0;
    border-top: 0;
    border-bottom: 1px solid var(--card-line, #e3ebf5);
  }

  .dr-time li:last-child {
    border-bottom: 0;
  }

  .dr-time-year {
    font-size: 15px;
  }

  .dr-time-txt strong {
    font-size: 14px;
  }

  .dr-member li {
    padding: 14px 16px;
  }

  .dr-hosp-photo,
  .dr-place--solo .dr-hosp-photo {
    min-height: 170px;
  }

  .dr-hosp-body {
    padding: 20px 18px 18px;
  }

  .dr-hosp-name {
    font-size: 20px;
  }

  .dr-hosp-stats {
    gap: 14px 12px;
  }

  .dr-map .hx-loc-map {
    min-height: 240px;
  }

  .dr-map-foot {
    padding: 14px 16px;
  }
}

/* telefon: portre halkası küçülür, kart tek sütun (hastane kartının kuralı) */
@media (max-width: 620px) {
  .dr-dash-score {
    gap: 14px;
    padding: 10px 14px 10px 10px;
  }

  .dr-ring {
    width: 96px;
    height: 96px;
  }

  .dr-ring-img {
    inset: 9px;
    width: 78px;
    height: 78px;
  }

  .dr-ring-score {
    min-width: 38px;
    padding: 4px 8px;
    font-size: 13px;
  }

  .hd-hero--inset .hero-copy>p.dr-role {
    font-size: 13.5px;
  }

  .page-hero--doctor .crumbs li[aria-current] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .dr-ring-fill,
  .dr-vol-track i,
  .hd-hero--inset .hero-copy>p.dr-role {
    transition: none;
    animation: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   YAKA KARTLI TASARIM ("drx-" önekli)
   Yukarıdaki ortak parçaların üstüne biner; bilgi satırının (.hd-meta) ve puan
   kartının (.hx-rate) kuralları hastane stilinden gelir (60-hospital.css).
     1) hero düzeni: metin solda, yaka kartı sağda
     2) yaka kartı: askı, klips, ön yüz, arka yüz, mühür
     3) puan kartı: gösterge | rakamlar
     4) gövde: hakkında, tedaviler, ziyaret adımları, yayınlar
     5) duyarlı
   Sayfada çizim ya da tedaviye özel animasyon yoktur; hareket eden tek şey karttır.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   1) HERO DÜZENİ
   Masaüstünde iki sütun: solda ad, açıklama, bilgi satırı ve puan
   kartı; sağda yaka kartı. Dar ekranda tek sütun ve ortalı: ad,
   kart, ayrıntılar.
   ══════════════════════════════════════════════════════════════ */
.drx-hero .hero-copy {
  width: 100%;
  text-align: left;
}

.drx-hero .crumbs {
  text-align: left;
}

.drx-hero .crumbs ol {
  justify-content: flex-start;
}

/* kart sallanırken sayfa yana kaymasın; askı yukarı taşabilsin */
.drx-hero .hero {
  overflow-x: clip;
}

.drx-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  grid-template-areas:
    "head stage"
    "more stage";
  column-gap: clamp(40px, 5vw, 96px);
  align-content: center;
}

.drx-head {
  grid-area: head;
  align-self: end;
  min-width: 0;
}

.drx-more {
  grid-area: more;
  align-self: start;
  min-width: 0;
}

.drx-hero .hero-copy h1 {
  font-size: clamp(36px, 3.9vw, 56px);
}

.drx-role {
  margin: 12px 0 0;
  color: #9fd8ff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.4;
  text-shadow: 0 1px 12px rgba(6, 26, 48, .45);
  animation: fm-rise-soft .8s cubic-bezier(.2, .7, .25, 1) .3s backwards;
}

.drx-lead {
  max-width: 60ch;
  margin: 14px 0 0;
  color: rgba(226, 240, 255, .92);
  font-size: 14.5px;
  line-height: 1.7;
  text-shadow: 0 1px 12px rgba(6, 26, 48, .45);
  animation: fm-rise .8s cubic-bezier(.2, .7, .25, 1) .3s both;
}

.drx-hero .hd-meta {
  justify-content: flex-start;
}

/* metin sütunu dar: hastane kendi satırında, deneyim ve diller altında yan yana */
.drx-hero .hd-meta li:first-child {
  flex: 1 0 100%;
  padding-left: 0;
}

.drx-hero .hd-meta li:nth-child(2) {
  padding-left: 0;
  border-left: 0;
}

/* ══════════════════════════════════════════════════════════════
   2) YAKA KARTI
   Askı + klips + kart. Kart askının bağlandığı noktadan sallanır
   (.drx-rig, açıyı betik yazar), kendi içinde eğilir ve döner
   (.drx-badge). İlk hâller ".is-js" altında durur: betik
   çalışmazsa kart ön yüzüyle, doğrulanmış hâlde görünür.
   ══════════════════════════════════════════════════════════════ */
.drx-stage {
  --bw: 304px;
  /* askının kartın üstünde görünen boyu ve sahnenin üstüne taşan payı */
  --strap: 62px;
  --strap-over: 44px;
  grid-area: stage;
  align-self: start;
  position: relative;
  display: grid;
  justify-items: center;
  padding-top: var(--strap);
  user-select: none;
  -webkit-user-select: none;
}

.drx-rig {
  position: relative;
  width: var(--bw);
  /* askının bağlandığı nokta: kartın çok üstünde, kadrajın dışında */
  transform-origin: 50% -170px;
  will-change: transform;
}

.drx-stage.is-js .drx-rig {
  opacity: 0;
  translate: 0 -34px;
}

.drx-stage.is-js.is-in .drx-rig {
  opacity: 1;
  translate: 0 0;
  transition: opacity .45s ease, translate .9s cubic-bezier(.2, .8, .25, 1);
}

/* ── askı: marka mavisi dokuma şerit; yukarı doğru sönerek kadrajdan çıkar ── */
.drx-strap {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  width: 24px;
  /* menünün altında biter: yukarı doğru sönerek kadrajdan çıkar */
  height: calc(var(--strap) + var(--strap-over) - 12px);
  margin-left: -12px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 2px, rgba(255, 255, 255, 0) 2px 5px),
    linear-gradient(90deg, #1273b8, #1e9fe0 45%, #1684cc);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, .24),
    inset -1px 0 0 rgba(4, 20, 40, .28);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 72%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 72%);
  overflow: hidden;
}

.drx-strap i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center end;
  padding-bottom: 6px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: rgba(255, 255, 255, .92);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .16em;
  white-space: nowrap;
}

/* ── klips: askının ucundaki metal toka ve kartın deliğine inen kanca ── */
.drx-clip {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(100% - 29px);
  width: 30px;
  height: 47px;
  margin-left: -15px;
  pointer-events: none;
}

.drx-clip::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 13px;
  border: 3px solid;
  border-color: #e3e9f0 #b3bfcc #98a6b6 #d2dae4;
  border-radius: 5px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .35);
}

.drx-clip i {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 10px;
  height: 37px;
  margin-left: -5px;
  border-radius: 3px 3px 5px 5px;
  background: linear-gradient(90deg, #8f9dae, #f1f4f8 45%, #a5b2c1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
}

/* ── kart ── */
.drx-badge {
  position: relative;
  /* iki yüz aynı hücrede üst üste durur: kartın boyu uzun olan yüz kadar */
  display: grid;
  width: var(--bw);
  transform-style: preserve-3d;
  cursor: grab;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.drx-badge.is-drag {
  cursor: grabbing;
}

.drx-face {
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: #fff;
  box-shadow:
    0 44px 70px -34px rgba(0, 0, 0, .85),
    0 0 0 1px rgba(255, 255, 255, .55);
  color: var(--ink);
  text-align: left;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.drx-back {
  transform: rotateY(180deg);
}

/* ışık: kart eğildikçe yüzeyde gezinen yumuşak parlama (konumu betik yazar) */
.drx-face::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  background: radial-gradient(110% 80% at var(--gx, 30%) var(--gy, 0%), rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 58%);
  opacity: var(--go, 0);
  pointer-events: none;
  transition: opacity .35s ease;
}

/* üst şerit: logo, askı deliği, kartın türü */
.drx-band {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 0 16px;
  background: linear-gradient(120deg, #123c78 0%, #1a6fc0 55%, #1e9fe0 100%);
  color: #fff;
}

.drx-logo {
  display: block;
  width: auto;
  height: 17px;
  pointer-events: none;
}

.drx-kind {
  color: rgba(255, 255, 255, .94);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.drx-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 11px;
  margin: -5.5px 0 0 -23px;
  border-radius: 999px;
  background: #071a33;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, .7),
    0 1px 0 rgba(255, 255, 255, .28);
}

/* fotoğraf: kartın tam genişliğinde */
.drx-photo {
  position: relative;
  /* arka yüz daha uzunsa fark fotoğrafa eklenir */
  flex: 1 0 172px;
  min-height: 172px;
  background: #dfeaf5;
  overflow: hidden;
}

.drx-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 14%;
  pointer-events: none;
}

/* kontrol ışığı: fotoğrafın üstünden bir kez geçer */
.drx-scan {
  position: absolute;
  inset: 0 0 auto;
  height: 46%;
  background: linear-gradient(to bottom, rgba(126, 208, 255, 0), rgba(126, 208, 255, .26) 76%, rgba(255, 255, 255, .92) 97%, rgba(126, 208, 255, 0));
  opacity: 0;
  transform: translateY(-110%);
  pointer-events: none;
}

.drx-stage.is-scan .drx-scan {
  opacity: 1;
  animation: drx-scan 1s cubic-bezier(.45, .05, .3, 1) both;
}

@keyframes drx-scan {
  from {
    transform: translateY(-110%);
  }

  to {
    transform: translateY(230%);
  }
}

/* doğrulama etiketi: fotoğrafın sol alt köşesinde */
.drx-ok {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 8px 18px -8px rgba(8, 30, 60, .55);
  color: #0d5a34;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
}

.drx-ok svg {
  width: 17px;
  height: 17px;
  padding: 3.5px;
  border-radius: 50%;
  background: var(--green);
  fill: none;
  stroke: #fff;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drx-stage.is-js .drx-ok {
  opacity: 0;
  transform: translateY(6px) scale(.9);
  transition: opacity .3s ease, transform .5s cubic-bezier(.2, 1.5, .4, 1);
}

.drx-stage.is-js.is-verified .drx-ok {
  opacity: 1;
  transform: none;
}

/* ad, uzmanlık, hastane, yıl */
.drx-info {
  display: grid;
  flex: 0 0 auto;
  align-content: start;
  padding: 14px 18px 15px;
}

.drx-name {
  margin: 0;
  color: var(--navy-dark);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.drx-name small {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.drx-spec {
  margin: 5px 0 0;
  color: var(--accent-dark);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
}

.drx-cells {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px dashed #cbd9e8;
}

.drx-cells div {
  min-width: 0;
}

.drx-cells dt {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.drx-cells dd {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
}

.drx-flag {
  flex: 0 0 auto;
  width: 18px;
  height: 13px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(12, 38, 74, .14);
  object-fit: cover;
}

/* alt satır: çizgi kod + kayıt numarası, sağda hologram mühür */
.drx-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 13px;
}

.drx-code {
  display: grid;
  gap: 5px;
  color: var(--navy-dark);
}

.drx-bars {
  display: block;
  width: 132px;
  height: 20px;
  background-repeat: no-repeat;
}

.drx-code b {
  color: #3c4f63;
  font: 700 10px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .14em;
}

/* hologram mühür: gökkuşağı zemin kart eğildikçe döner (--ha, betik yazar) */
.drx-holo {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: conic-gradient(from var(--ha, 120deg), #8fd8ff, #c9b8ff, #8ff3d6, #fff3bd, #ffc2de, #8fd8ff);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .8),
    0 1px 3px rgba(12, 38, 74, .32);
  transition: filter .6s ease;
}

.drx-holo svg {
  display: block;
  width: 100%;
  height: 100%;
}

.drx-holo-rose ellipse {
  fill: none;
  stroke: rgba(255, 255, 255, .88);
  stroke-width: .55;
}

.drx-holo-core {
  fill: rgba(255, 255, 255, .84);
}

.drx-holo-check {
  fill: none;
  stroke: var(--navy-dark);
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drx-stage.is-js:not(.is-verified) .drx-holo {
  filter: grayscale(1) opacity(.5);
}

/* ── arka yüz: eğitim ve kariyer adımları ── */
.drx-rec {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 13px 18px 12px;
}

.drx-rec-h {
  display: grid;
  gap: 3px;
  margin: 0;
}

.drx-rec-h b {
  color: var(--navy-dark);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.drx-rec-h span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.drx-creds {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  margin: 10px 0 0;
  padding: 0;
  border-top: 1px dashed #cbd9e8;
  list-style: none;
}

.drx-creds li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  gap: 8px;
  align-items: center;
  padding: 5.5px 0;
  border-bottom: 1px solid #edf2f8;
}

.drx-creds--plain li {
  grid-template-columns: 34px minmax(0, 1fr);
}

.drx-cred-y {
  color: var(--accent-dark);
  font: 700 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.drx-cred-y i {
  display: block;
  width: 6px;
  height: 6px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.drx-cred-t {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.drx-cred-t b,
.drx-cred-t small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drx-cred-t b {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.drx-cred-t small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
}

.drx-cred-ok {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
}

.drx-cred-ok svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: #fff;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* adımlar sırayla işaretlenir (kart ilk kez döndüğünde, betik .is-checked ekler) */
.drx-stage.is-js .drx-creds li {
  opacity: .36;
  transition: opacity .35s ease calc(var(--i) * 230ms + 380ms);
}

.drx-stage.is-js .drx-cred-ok {
  transform: scale(0);
  transition: transform .42s cubic-bezier(.2, 1.6, .4, 1) calc(var(--i) * 230ms + 380ms);
}

.drx-stage.is-js.is-checked .drx-creds li {
  opacity: 1;
}

.drx-stage.is-js.is-checked .drx-cred-ok {
  transform: none;
}

.drx-rec-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  margin-top: 4px;
}

.drx-rec-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 800;
  transition: color .2s ease;
}

.drx-rec-more:hover {
  color: var(--navy);
}

.drx-rec-more .icon {
  width: 13px;
  height: 13px;
}

/* mühür: mavi mürekkep; kenarı ve dolgusu pürüzlü (SVG süzgeci) */
.drx-stamp {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  margin: -6px -4px -4px auto;
  color: #1558a8;
  opacity: .92;
  transform: rotate(-13deg);
  overflow: visible;
}

.drx-stamp-ring,
.drx-stamp-thin,
.drx-stamp-check {
  fill: none;
  stroke: currentColor;
}

.drx-stamp-ring {
  stroke-width: 3;
}

.drx-stamp-thin {
  stroke-width: 1.1;
}

.drx-stamp-check {
  stroke-width: 4.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drx-stamp-arc,
.drx-stamp-date {
  fill: currentColor;
  font-weight: 800;
}

.drx-stamp-arc {
  font-size: 9.6px;
}

.drx-stamp-date {
  font-size: 8.4px;
  letter-spacing: 1.1px;
}

.drx-stage.is-js .drx-stamp {
  opacity: 0;
  transform: rotate(-13deg) scale(1.9);
}

.drx-stage.is-js.is-checked .drx-stamp {
  opacity: .92;
  transform: rotate(-13deg) scale(1);
  transition:
    opacity .12s linear calc(var(--n) * 230ms + 640ms),
    transform .3s cubic-bezier(.3, 0, .2, 1.4) calc(var(--n) * 230ms + 640ms);
}

/* ── kartı döndüren düğme ── */
.drx-flip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 7px 15px 7px 11px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(9, 26, 50, .42);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: #d6e9fa;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.drx-flip:hover {
  border-color: rgba(126, 208, 255, .6);
  background: rgba(9, 26, 50, .58);
  color: #fff;
}

.drx-flip:focus-visible {
  outline: 2px solid #7ed0ff;
  outline-offset: 2px;
}

.drx-flip svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .5s cubic-bezier(.2, .7, .25, 1);
}

.drx-flip[aria-pressed="true"] svg {
  transform: rotate(180deg);
}

/* ══════════════════════════════════════════════════════════════
   3) PUAN KARTI: gösterge
   Metnin altında, içeriği kadar geniş. İç kutu yok.
   ══════════════════════════════════════════════════════════════ */
.drx-hero .drx-dash {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: fit-content;
  max-width: 100%;
  margin: 26px 0 0;
  padding: 16px 30px 16px 20px;
}

.hd-hero--inset .drx-dash .hd-dash-score {
  gap: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.drx-dash .hd-gauge-wrap,
.drx-dash .hd-gauge {
  width: 92px;
  height: 92px;
}

.drx-dash .hd-gauge-mid b {
  font-size: 26px;
}

/* ══════════════════════════════════════════════════════════════
   4) GÖVDE
   Hakkında: solda uzun yazı, sağda pratik bilgiler ve başlıca
   tedaviler. Tedaviler: temanın listesi (.dr-vol), sıra numarası
   sütunu olmadan.
   ══════════════════════════════════════════════════════════════ */
.drx-side {
  display: grid;
  gap: 22px;
  align-content: start;
  min-width: 0;
}

/* ══════════════════════════════════════════════════════════════
   4a) TEDAVİLER
   Doktorun yaptığı tedaviler düz liste: her kart tedavinin adı ve
   kısa notu; sitede sayfası olan tedavinin kartı o sayfaya gider.
   Sayı, çubuk ya da sıra numarası yok.
   ══════════════════════════════════════════════════════════════ */
.drx-tx {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.drx-tx li {
  display: flex;
  min-width: 0;
}

.drx-tx-item {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 16px 16px 16px 18px;
  border: 1px solid var(--card-line, #e3ebf5);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

a.drx-tx-item:hover,
a.drx-tx-item:focus-visible {
  border-color: rgba(30, 159, 224, .55);
  box-shadow: 0 14px 30px -18px rgba(12, 38, 74, .35);
  transform: translateY(-2px);
}

.drx-tx-txt {
  display: grid;
  flex: 1 1 auto;
  gap: 4px;
  min-width: 0;
}

.drx-tx-txt strong {
  color: var(--navy-dark);
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.drx-tx-txt small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.drx-tx-go {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  transition: background-color .2s ease, color .2s ease;
}

.drx-tx-go .icon {
  width: 14px;
  height: 14px;
}

a.drx-tx-item:hover .drx-tx-go,
a.drx-tx-item:focus-visible .drx-tx-go {
  background: var(--navy);
  color: #fff;
}

@media (max-width: 980px) {
  .drx-tx {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .drx-tx {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .drx-tx-item {
    padding: 14px 14px 14px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drx-tx-item {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   4c) YAYINLAR VE ÜYELİKLER
   Kariyer adımlarının altında iki kart: solda araştırma konuları ve
   seçilmiş yayınlar, sağda üyelikler (alt alta).
   ══════════════════════════════════════════════════════════════ */
.drx-acad {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.drx-acad--solo {
  grid-template-columns: minmax(0, 1fr);
}

.drx-papers {
  min-width: 0;
  padding: 24px 28px 12px;
  border: 1px solid var(--card-line, #e3ebf5);
  border-radius: var(--hd-radius);
  background: #fff;
}

.drx-papers h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 0 0 16px;
  color: var(--accent-dark);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.drx-papers h3 small {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.drx-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.drx-topics li {
  padding: 8px 13px;
  border: 1px solid var(--card-line, #e3ebf5);
  border-radius: 999px;
  background: var(--soft);
  color: var(--navy-dark);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
}

.drx-papers h4 {
  margin: 20px 0 2px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
}

.drx-paper-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.drx-paper-list li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 13px 0;
}

.drx-paper-list li + li {
  border-top: 1px solid #eef3f9;
}

.drx-paper-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.drx-paper-ico .icon {
  width: 18px;
  height: 18px;
}

.drx-paper-list strong {
  display: block;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
}

.drx-paper-list small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

/* üyelikler yayın kartının yanında alt alta */
.drx-acad:not(.drx-acad--solo) .dr-member ul {
  grid-template-columns: minmax(0, 1fr);
}

/* ══════════════════════════════════════════════════════════════
   5) DUYARLI
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1240px) {
  .drx-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: 40px;
  }

  .drx-stage {
    --bw: 292px;
  }

  .drx-hero .drx-dash {
    padding: 16px 24px 16px 18px;
  }

}

/* dar masaüstü ve yatay tablet: iki sütun kalır; puan kartında gösterge üstte, rakamlar altında */
@media (max-width: 1160px) {
  .drx-grid {
    grid-template-columns: minmax(0, 1fr) 316px;
    column-gap: 32px;
  }

  .drx-stage {
    --bw: 284px;
  }
}

@media (min-width: 941px) and (max-width: 1160px), (max-width: 620px) {
  .drx-hero .drx-dash {
    flex-direction: column;
    padding: 14px 18px 16px;
  }

}

/* tek sütun, ortalı: ad, kart, ayrıntılar */
@media (max-width: 940px) {
  .drx-hero .hero-copy,
  .drx-hero .crumbs {
    text-align: center;
  }

  .drx-hero .crumbs ol,
  .drx-hero .hd-meta {
    justify-content: center;
  }

  .drx-hero .hd-meta li:first-child {
    flex: 0 1 auto;
    padding-left: 24px;
  }

  .drx-hero .hd-meta li:nth-child(2) {
    padding-left: 24px;
    border-left: 1px solid rgba(255, 255, 255, .2);
  }

  .drx-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "stage"
      "more";
  }

  /* askı üstteki yazıya taşmaz: sahnenin içinde başlar ve söner */
  .drx-stage {
    --bw: 288px;
    --strap: 64px;
    --strap-over: 0px;
    margin-top: 6px;
  }

  .drx-more {
    margin-top: 22px;
  }

  .drx-lead {
    margin-top: 0;
    margin-inline: auto;
  }

  .drx-hero .drx-dash {
    margin-inline: auto;
  }
}

/* tablet: adımlar alt alta, çizgi solda, nokta her adımın başında */
@media (max-width: 980px) {
  .drx-hero .hd-meta li:first-child,
  .drx-hero .hd-meta li:nth-child(2) {
    padding-left: 0;
    border-left: 0;
  }







  .drx-acad {
    grid-template-columns: minmax(0, 1fr);
  }

  .drx-acad:not(.drx-acad--solo) .dr-member ul {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

@media (max-width: 760px) {

  .drx-papers {
    padding: 20px 20px 8px;
  }

  .drx-paper-list strong {
    font-size: 14px;
  }
}

/* telefon: kart biraz küçülür; puan kartında gösterge üstte, rakamlar altında yan yana */
@media (max-width: 620px) {
  .drx-stage {
    --bw: 272px;
    --strap: 58px;
  }

  .drx-role {
    font-size: 14.5px;
  }

  .drx-lead {
    font-size: 13.5px;
  }

  .drx-hero .hd-meta-txt {
    white-space: normal;
  }

  .drx-hero .drx-dash {
    width: 100%;
    padding: 14px 16px 16px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .drx-role,
  .drx-lead {
    animation: none;
  }

  .drx-stage.is-js .drx-rig,
  .drx-stage.is-js .drx-ok,
  .drx-stage.is-js .drx-creds li,
  .drx-stage.is-js .drx-cred-ok,
  .drx-stage.is-js .drx-stamp,
  .drx-holo,
  .drx-flip svg {
    transition: none !important;
  }

  .drx-stage.is-scan .drx-scan {
    animation: none;
    opacity: 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   6) DOLGU (6 Eki 2026)
   a) Hero kartı: puanın yanında doktorun yer aldığı FindMed listeleri
      (listede değilse başlıca tedaviler). Bölgeler hastane kartındaki
      gibi uçları sönen ince çizgiyle ayrılır.
   b) Hakkında yan sütunu: pratik bilgilerin altında eğitim ve kariyer,
      üyelikler.
   c) Listeler bölümü: doktorun listeleri büyük kartlar; yanında
      hastanesinin listeleri ve alanındaki diğer listeler.
   d) Araştırma: geniş tek kart, yayınlar iki sütun.
   ══════════════════════════════════════════════════════════════ */

/* a) hero kartı */
.drx-hero .drx-dash--two > * + * {
  margin-left: 30px;
  padding-left: 30px;
  border-left: 1px solid rgba(255, 255, 255, .14);
  border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .2) 22%, rgba(255, 255, 255, .2) 78%, rgba(255, 255, 255, 0)) 1;
}

.drx-dash-lists {
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
  max-width: 330px;
}

.drx-dash-lists ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.drx-dash-lists li a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e3f1fb;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  transition: color .2s ease;
}

.drx-dash-lists li a:hover,
.drx-dash-lists li a:focus-visible {
  color: #fff;
}

.drx-dash-li-ico {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
  color: var(--accent);
}

.drx-dash-li-ico .icon {
  width: 14px;
  height: 14px;
}

.drx-dash-flag {
  width: 16px;
  height: 11.5px;
  border-radius: 2px;
  object-fit: cover;
}

.drx-dash-li-txt {
  min-width: 0;
}

.drx-dash-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  color: #7ed0ff;
  font-size: 12px;
  font-weight: 700;
}

.drx-dash-all .icon {
  width: 13px;
  height: 13px;
  transition: transform .25s cubic-bezier(.2, .7, .25, 1);
}

.drx-dash-all:hover .icon {
  transform: translateX(3px);
}

/* b) yan sütun uzadığında yazı kartı da aynı boyda biter (iki sütunun alt kenarı hizalı) */
#overview .hx-over:not(.hx-over--solo) {
  align-items: stretch;
}

/* b) hakkında yan sütunu: eğitim ve kariyer */
.drx-cv ol {
  position: relative;
  margin: 8px 0 0;
  padding: 0 0 4px;
  list-style: none;
}

.drx-cv li {
  position: relative;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 14px;
  padding: 0 0 16px 20px;
}

/* çizgi ve nokta: yıllar boyunca ince bir çizgi */
.drx-cv li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 14px;
  bottom: -4px;
  width: 1px;
  background: var(--card-line, #e3ebf5);
}

.drx-cv li:last-child::before {
  display: none;
}

.drx-cv li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c4d6ea;
}

.drx-cv li.is-now::after {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(30, 159, 224, .18);
}

.drx-cv-year {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

.drx-cv li.is-now .drx-cv-year {
  color: var(--accent-dark);
}

.drx-cv-txt strong {
  display: block;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
}

.drx-cv-txt small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}

/* b) hakkında yan sütunu: üyelikler */
.drx-mem ul {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.drx-mem li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 11px 0;
}

.drx-mem li + li {
  border-top: 1px solid var(--card-line, #e3ebf5);
}

.drx-mem-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.drx-mem-ico .icon {
  width: 17px;
  height: 17px;
}

.drx-mem strong {
  display: block;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
}

.drx-mem small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
}

/* c) listeler bölümü */
.drx-lists {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
  gap: 22px;
  align-items: start;
}

.drx-lists--solo {
  grid-template-columns: minmax(0, 1fr);
}

.drx-lists-main {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.drx-lists-main a {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 20px 24px 20px 20px;
  border: 1px solid var(--card-line, #e3ebf5);
  border-radius: var(--hd-radius);
  background: #fff;
  color: inherit;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.drx-lists-main a:hover {
  border-color: rgba(30, 159, 224, .55);
  box-shadow: 0 22px 44px -32px rgba(14, 44, 86, .5);
}

/* rozet: lacivert zeminde ödül ikonu, köşesinde listenin bayrağı */
.drx-lists-ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: linear-gradient(150deg, var(--navy), var(--navy-dark));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  color: #7ed0ff;
}

.drx-lists-ico .icon {
  width: 27px;
  height: 27px;
}

.drx-lists-ico .drx-lists-flag {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 22px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 5px;
  box-sizing: content-box;
}

.drx-lists-txt {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.drx-lists-k {
  color: var(--accent-dark);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.drx-lists-txt strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.3;
}

.drx-lists-txt small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.drx-lists-go {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.drx-lists-go em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

.drx-lists-go .icon {
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  padding: 8px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.2, .7, .25, 1);
}

.drx-lists-main a:hover .drx-lists-go .icon {
  background: var(--navy);
  color: #fff;
  transform: translateX(3px);
}

.drx-lists-flag {
  flex: 0 0 auto;
  width: 18px;
  height: 13px;
  border-radius: 3px;
  object-fit: cover;
}

.drx-lists-side h3 + .drx-lists-links {
  margin-top: 4px;
}

.drx-lists-links + h3 {
  margin-top: 18px;
}

.drx-lists-links {
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}

.drx-lists-links li + li {
  border-top: 1px solid var(--card-line, #e3ebf5);
}

.drx-lists-links a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  transition: color .2s ease;
}

.drx-lists-links a span {
  flex: 1 1 auto;
  min-width: 0;
}

.drx-lists-links a .icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: #9fb2c6;
  transition: color .2s ease, transform .25s cubic-bezier(.2, .7, .25, 1);
}

.drx-lists-links a:hover {
  color: var(--accent-dark);
}

.drx-lists-links a:hover .icon {
  color: var(--accent-dark);
  transform: translateX(3px);
}

/* d) araştırma: geniş kart, yayınlar iki sütun */
.drx-papers--wide .drx-paper-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 36px;
}

.drx-papers--wide .drx-paper-list li:nth-child(2) {
  border-top: 0;
}

.drx-papers--wide .drx-paper-list li:nth-child(n + 3) {
  border-top: 1px solid #eef3f9;
}

@media (max-width: 980px) {
  .drx-lists {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .drx-papers--wide .drx-paper-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .drx-papers--wide .drx-paper-list li:nth-child(2) {
    border-top: 1px solid #eef3f9;
  }

  .drx-lists-main a {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
  }

  .drx-lists-ico {
    width: 52px;
    height: 52px;
    border-radius: 15px;
  }

  .drx-lists-go {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* tarih yoksa ok sağda */
  .drx-lists-go:not(:has(em)) {
    justify-content: flex-end;
  }
}

/* kart dikey dizildiğinde (dar masaüstü, telefon): ayraç üstte */
@media (min-width: 941px) and (max-width: 1160px), (max-width: 620px) {
  .drx-hero .drx-dash--two > * + * {
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    border-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .2) 22%, rgba(255, 255, 255, .2) 78%, rgba(255, 255, 255, 0)) 1;
  }

  .drx-dash-lists {
    max-width: none;
  }
}

/* About tek sütuna indiğinde (≤1100) yan kartlar iki sütun: solda pratik bilgiler ve
   üyelikler, sağda eğitim ve kariyer; telefonda yine alt alta */
@media (min-width: 721px) and (max-width: 1100px) {
  #overview .drx-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  #overview .drx-side > .drx-cv {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  #overview .drx-side > .hx-facts:not(.drx-cv) {
    grid-column: 1;
  }
}


/* ===== assets/css/src/06-pages/70-fmr.css ===== */
/* "What is FMR?" sayfası (findmed/fmr-page). Hastane sayfasının dilini devralır
   (hd-dash, hd-gauge, hd-sec, hd-head, hd-rise); buradaki fmr-* bileşenlerden
   .fmr-tier rozetleri ve .fmr-chip kaynak çipleri başka sayfalarda da kullanılır. */

/* ── hero ─────────────────────────────────────────────────────── */

.page-hero--fmr .hero-bg {
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(30, 159, 224, .35), transparent 60%),
    radial-gradient(700px 380px at -10% 110%, rgba(30, 159, 224, .22), transparent 55%),
    linear-gradient(160deg, #0e2c56 0%, #14417d 55%, #0e2c56 100%);
}

.fmr-hero-copy {
  max-width: 760px;
}

.fmr-hero-copy h1 {
  letter-spacing: -.02em;
}

/* vurgu: yalnız renk (eski eğik şerit kaldırıldı, 7 Ekim 2026) */
.fmr-hl {
  font-style: normal;
  color: #7ed0ff;
  white-space: nowrap;
}

/* ── hero: üç animasyonlu sahne + doğrulama şeridi ────────────── */

.fmr-verified {
  margin-top: 18px;
}

/* hero bandı kompakt (7 Ekim 2026): başlık bloğu ortada, üç sahne tek sırada
   yatay kart olarak (sahne solda 88px kare, metin sağda). 140px'lik dairesel
   sahneler mutlak merkezle oturtulup ölçeklenir; kutu ölçüsü değişmediği için
   kırpılma olmaz. */
.page-hero--fmr .hero-content {
  padding-top: 28px;
}

.hero-stage.page-hero--fmr {
  padding-bottom: 24px;
}

.fmr-hero-copy > p {
  max-width: 680px;
  margin-inline: auto;
}

.fmr-feats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: min(100%, 1120px);
  margin: 22px auto 0;
  text-align: left;
}

.fmr-feat {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 2px 14px;
  align-items: center;
  padding: 14px 18px 14px 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  background: linear-gradient(170deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  backdrop-filter: blur(6px);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .6);
}

.fmr-feat h3 {
  align-self: end;
  margin: 0;
  color: #fff;
  font-size: 15px;
  letter-spacing: -.01em;
}

.fmr-feat h3 b {
  color: #7ed0ff;
  font-variant-numeric: tabular-nums;
}

.fmr-feat p {
  align-self: start;
  margin: 0;
  color: rgba(255, 255, 255, .68);
  font-size: 12.5px;
  line-height: 1.5;
}

.fmr-feat-stage {
  grid-row: 1 / span 2;
  position: relative;
  width: 88px;
  height: 88px;
  overflow: hidden;
}

/* 1 — nokta küre (çizim fmr.js'te; tuval 150px çizilir, CSS ölçekler) */
.fmr-globe {
  display: block;
  width: 88px;
  height: 88px;
}

/* 2 ve 3: 140px'lik sahneler kareye mutlak merkezle oturur */
.fmr-feat-stage .fmr-orbit,
.fmr-feat-stage .fmr-year {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) scale(.6);
  transform-origin: center;
}

/* sahne rayı gezgini yalnız mobilde */
.fmr-feat-dots {
  display: none;
}

/* 2 — FMR çekirdeğine akan kaynak yörüngeleri */
.fmr-orbit {
  position: relative;
  width: 140px;
  height: 140px;
}

.fmr-orbit-core {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(145deg, #1e9fe0, #0f76b8);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 0 0 7px rgba(30, 159, 224, .16), 0 0 26px rgba(30, 159, 224, .5);
  animation: fmr-core-pulse 2.6s ease-in-out infinite;
}

.fmr-orbit-ring {
  position: absolute;
  inset: 50% auto auto 50%;
  border: 1px dashed rgba(126, 208, 255, .28);
  border-radius: 50%;
  translate: -50% -50%;
  animation: fmr-spin linear infinite;
}

.fmr-orbit-ring--a { width: 74px; height: 74px; animation-duration: 9s; }
.fmr-orbit-ring--b { width: 106px; height: 106px; animation-duration: 15s; animation-direction: reverse; }
.fmr-orbit-ring--c { width: 138px; height: 138px; animation-duration: 22s; }

/* uydu noktaları: her halka üzerinde eşit aralıklarla */
.fmr-orbit-ring i {
  position: absolute;
  top: -3.5px;
  left: calc(50% - 3.5px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7ed0ff;
  box-shadow: 0 0 10px rgba(126, 208, 255, .9);
  transform-origin: 3.5px calc(3.5px + var(--r));
}

/* --r = halkanın iç (padding kutusu) yarıçapı: border-box genişlik eksi 2px
   kenarlık, bölü iki. Nokta üstü -3.5px'te durduğundan dönme merkezi tam
   halka merkezine düşer; eski 33.5/49.5/65.5 değerleri merkezi 2.5px yukarı
   kaydırıp döndürülmüş noktaları halkanın içine çekiyordu. */
.fmr-orbit-ring--a { --r: 36px; }
.fmr-orbit-ring--b { --r: 52px; }
.fmr-orbit-ring--c { --r: 68px; }

.fmr-orbit-ring i:nth-child(2) { transform: rotate(120deg); }
.fmr-orbit-ring i:nth-child(3) { transform: rotate(240deg); }
.fmr-orbit-ring--b i:nth-child(2) { transform: rotate(90deg); }
.fmr-orbit-ring--b i:nth-child(3) { transform: rotate(180deg); }
.fmr-orbit-ring--b i:nth-child(4) { transform: rotate(270deg); }
.fmr-orbit-ring--c i:nth-child(2) { transform: rotate(72deg); }
.fmr-orbit-ring--c i:nth-child(3) { transform: rotate(144deg); }
.fmr-orbit-ring--c i:nth-child(4) { transform: rotate(216deg); }
.fmr-orbit-ring--c i:nth-child(5) { transform: rotate(288deg); }

/* 3 — çeyrek-edisyon halkası: süpüren kuyruklu yıldız + Q düğümleri */
.fmr-year {
  position: relative;
  width: 140px;
  height: 140px;
}

.fmr-year svg {
  width: 100%;
  height: 100%;
}

.fmr-year-track {
  fill: none;
  stroke: rgba(126, 208, 255, .22);
  stroke-width: 2;
}

.fmr-year-comet {
  fill: none;
  stroke: #7ed0ff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 46 255.6;
  filter: drop-shadow(0 0 6px rgba(126, 208, 255, .9));
  transform-origin: 50% 50%;
  animation: fmr-spin 6s linear infinite;
}

.fmr-year-node {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--a, 0deg));
}

.fmr-year-node b {
  position: absolute;
  top: -57px;
  left: 0;
  display: grid;
  place-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  translate: -50% -50%;
  rotate: calc(var(--a, 0deg) * -1);
  background: #0e2c56;
  border: 1.5px solid rgba(126, 208, 255, .55);
  color: #cfe8fb;
  font-size: 8.5px;
  font-weight: 800;
}

.fmr-year-mid {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  color: rgba(255, 255, 255, .55);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ── tier rozetleri — sayfalar arası ortak bileşen ────────────── */

.fmr-tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--navy);
}

.fmr-tier .icon {
  width: 12px;
  height: 12px;
}

.fmr-tier--fair { background: #8795a8; }
.fmr-tier--good { background: #5c7ca6; }
.fmr-tier--vgood { background: var(--blue); }
.fmr-tier--excellent { background: var(--green); }

/* Exceptional: altın, üzerinde yavaş bir ışık süpürmesi — kıtlığın rozeti */
.fmr-tier--exceptional {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #b97f1f, #f2a63b 55%, #c98f28);
  box-shadow: 0 8px 18px -8px rgba(242, 166, 59, .65);
}

.fmr-tier--exceptional::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  animation: fmr-shine 3.4s cubic-bezier(.4, 0, .2, 1) 1.2s infinite;
}

/* ── 30/30/40 karoları ────────────────────────────────────────── */

.fmr-mix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.fmr-mix-card {
  padding: 26px 26px 24px;
  border: 1px solid var(--card-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--card-shadow);
  transition: transform .35s cubic-bezier(.2, .7, .25, 1), box-shadow .35s;
}

.fmr-mix-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}

.fmr-mix-n {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 800;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.fmr-mix-card--lead {
  border-color: rgba(30, 159, 224, .45);
  background: linear-gradient(170deg, #fff 30%, var(--accent-soft));
}

.fmr-mix-card--lead .fmr-mix-n {
  color: var(--accent-dark);
}

.fmr-mix-card h3 {
  margin: 0 0 6px;
  font-size: 16.5px;
  color: var(--ink);
}

.fmr-mix-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.65;
}

/* ── 4 adım ───────────────────────────────────────────────────── */

.fmr-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.fmr-steps li {
  position: relative;
  padding: 22px 22px 20px;
  border: 1px solid var(--card-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--card-shadow);
}

.fmr-step-no {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--accent-dark);
}

.fmr-steps h3 {
  margin: 0 0 6px;
  font-size: 15.5px;
  color: var(--ink);
}

.fmr-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

/* ── 4 adımın mini sahneleri: hero sahnelerinin gündüz hali ───── */

.fh-stage {
  position: relative;
  display: grid;
  place-items: center;
  height: 112px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: radial-gradient(200px 110px at 50% 115%, rgba(30, 159, 224, .14), transparent 70%), var(--soft);
  overflow: hidden;
}

/* 01 — toplama: köşelerden merkeze akan sinyaller */
.fh-ray {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 62px;
  height: 0;
  border-top: 1px dashed rgba(30, 159, 224, .3);
  transform-origin: 0 0;
  transform: rotate(var(--rot, 0deg));
}

.fh-fly {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(30, 159, 224, .7);
  animation: fh-fly-in 2.8s ease-in var(--t, 0s) infinite;
}

.fh-core {
  position: relative;
  width: 30px;
  height: 30px;
  border: 2.5px solid var(--accent-dark);
  border-radius: 50%;
  background: #fff;
  animation: fh-core-pulse 2.8s ease-in-out infinite;
}

/* 02 — adil kıyas: kohort çubukları, seninki parlak; yüzdelik çizgisi tarar */
.fh-compare {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  padding: 18px 0 16px;
}

.fh-compare i {
  width: 11px;
  height: var(--h, 40%);
  border-radius: 4px 4px 2px 2px;
  background: #d4e2f1;
}

.fh-compare .fh-you {
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  box-shadow: 0 6px 14px -6px rgba(15, 118, 184, .8);
  animation: fh-you-glow 3.2s ease-in-out infinite;
}

.fh-pline {
  position: absolute;
  left: 14px;
  right: 14px;
  border-top: 1.5px dashed var(--accent-dark);
  opacity: .65;
  animation: fh-pline-scan 3.2s cubic-bezier(.45, 0, .25, 1) infinite;
}

/* 03 — tartı: salınan terazi */
.fh-weigh {
  place-items: end center;
  padding-bottom: 18px;
}

.fh-post {
  position: absolute;
  bottom: 22px;
  left: 50%;
  width: 3px;
  height: 52px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--navy);
}

.fh-post::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -3.5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-dark);
}

.fh-base {
  position: absolute;
  bottom: 16px;
  left: 50%;
  width: 46px;
  height: 5px;
  translate: -50%;
  border-radius: 3px;
  background: var(--navy);
}

.fh-beam {
  position: absolute;
  bottom: 70px;
  left: 50%;
  width: 92px;
  height: 3px;
  margin-left: -46px;
  border-radius: 2px;
  background: var(--navy);
  transform-origin: center;
  animation: fh-weigh-tilt 3.8s ease-in-out infinite alternate;
}

.fh-pan {
  position: absolute;
  top: 3px;
  left: -2px;
  width: 16px;
  height: 16px;
  border-radius: 2px 2px 8px 8px;
  background: var(--accent);
}

.fh-pan::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 1.5px;
  height: 7px;
  translate: -50%;
  background: var(--muted);
}

.fh-pan--r {
  left: auto;
  right: -2px;
  background: var(--accent-dark);
}

/* 04 — mühürlü kart: satırlar parıldar, onay mührü basılır */
.fh-doc {
  position: relative;
  display: grid;
  align-content: start;
  gap: 7px;
  width: 58px;
  height: 72px;
  padding: 10px 9px;
  border: 1.5px solid var(--card-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px -14px rgba(12, 38, 74, .4);
}

.fh-doc i {
  position: relative;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #dbe7f3 25%, #c2d8ec 50%, #dbe7f3 75%);
  background-size: 200% 100%;
  animation: fh-doc-shimmer 2.6s linear infinite;
}

.fh-doc i:nth-child(2) { width: 75%; animation-delay: .2s; }
.fh-doc i:nth-child(3) { width: 88%; animation-delay: .4s; }

.fh-doc-score {
  width: 46%;
  height: 9px !important;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark)) !important;
  animation: none !important;
}

.fh-seal {
  position: absolute;
  bottom: 16px;
  left: calc(50% + 14px);
  display: grid;
  place-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  box-shadow: 0 0 0 3px #fff, 0 8px 18px -8px rgba(18, 138, 75, .8);
  animation: fh-seal-stamp 4.5s cubic-bezier(.34, 1.56, .64, 1) infinite;
}

.fh-seal .icon {
  width: 13px;
  height: 13px;
}

/* ── sütunlar ve ağırlık çubukları ────────────────────────────── */

.fmr-pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.fmr-pillar-col {
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--card-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--card-shadow);
}

/* kısa kartın fazlası dipte birikmez, satır aralarına eşit dağılır */
.fmr-pillar-track {
  display: grid;
  flex: 1;
  align-content: space-between;
}

.fmr-pillar-t {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  font-size: 17px;
  color: var(--navy);
}

.fmr-pillar-t .icon {
  width: 19px;
  height: 19px;
  color: var(--accent-dark);
}

.fmr-pillar {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--card-line);
}

.fmr-pillar-ico {
  display: grid;
  place-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.fmr-pillar-ico .icon {
  width: 16px;
  height: 16px;
}

.fmr-pillar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.fmr-pillar-head b {
  font-size: 14px;
  color: var(--ink);
}

.fmr-pillar-head em {
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
}

.fmr-pillar-bar {
  display: block;
  height: 6px;
  margin: 7px 0 6px;
  border-radius: 4px;
  background: var(--soft);
  overflow: hidden;
}

.fmr-pillar-bar i {
  display: block;
  height: 100%;
  width: calc(var(--w, 0) * 1% * 2.5);
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(.22, .61, .36, 1) calc(var(--i, 0) * 60ms + .25s);
}

.hd-rise.is-in .fmr-pillar-bar i {
  transform: scaleX(1);
}

.fmr-pillar small {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.fmr-foot-note {
  margin: 22px 0 0;
  max-width: none;
  padding: 14px 20px;
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: var(--accent-soft);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.65;
}

.fmr-pillar-dots {
  display: none;
}

/* ── bant merdiveni: "çıtanın nerede durduğu" kelimenin tam anlamıyla ── */

.fmr-stair {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.fmr-step {
  position: relative;
  display: grid;
  align-content: end;
  gap: 2px;
  min-width: 0;
  height: var(--h);
  padding: 0 16px 14px;
  border-radius: 12px 12px 6px 6px;
  color: #fff;
  transform-origin: bottom;
}

/* yükseklik kademesi + görsel ağırlık: alt bant dar ve kısa, zirve geniş ve uzun */
.fmr-step--limited     { --h: 64px;  flex: .9;  background: #a7b2c2; }
.fmr-step--fair        { --h: 86px;  flex: 1;   background: #8795a8; }
.fmr-step--good        { --h: 110px; flex: 1;   background: #5c7ca6; }
.fmr-step--vgood       { --h: 136px; flex: 1.05; background: var(--blue); }
.fmr-step--excellent   { --h: 164px; flex: 1.05; background: var(--green); }
.fmr-step--exceptional { --h: 196px; flex: 1.2; background: linear-gradient(160deg, #e3b254, #b97f1f 85%); }

.fmr-step b {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fmr-step span {
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* zirve basamağı: altın parlama + yumuşak hale */
.fmr-step--exceptional {
  box-shadow: 0 18px 40px -18px rgba(242, 166, 59, .75);
  overflow: hidden;
}

.fmr-step--exceptional::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-18deg);
  animation: fmr-shine 3.8s cubic-bezier(.4, 0, .2, 1) 1.6s infinite;
}

/* basamaklar sırayla yerden yükselir */
.hd-rise.is-in .fmr-step {
  animation: fmr-step-up .65s cubic-bezier(.22, .61, .36, 1) calc(var(--i, 0) * 110ms) backwards;
}

.fmr-tiers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

.fmr-tiers p {
  flex: 1 1 280px;
  margin: 0 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

/* ── guard kartları ───────────────────────────────────────────── */

.fmr-guards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.fmr-guard {
  padding: 24px;
  border: 1px solid var(--card-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--card-shadow);
  transition: transform .35s cubic-bezier(.2, .7, .25, 1), box-shadow .35s, border-color .35s;
}

.fmr-guard:hover {
  transform: translateY(-4px);
  border-color: rgba(30, 159, 224, .45);
  box-shadow: var(--card-shadow-hover);
}

.fmr-guard-ico {
  display: grid;
  place-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--navy);
  color: #fff;
}

.fmr-guard-ico .icon {
  width: 18px;
  height: 18px;
}

.fmr-guard h3 {
  margin: 0 0 7px;
  font-size: 15.5px;
  color: var(--ink);
}

.fmr-guard p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.65;
}

/* ── doğrulanmış profil rozeti bandı ──────────────────────────── */

.fmr-vbadge {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  margin-top: 26px;
  padding: 30px 34px;
  border: 1px solid var(--card-line);
  border-radius: 20px;
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 58%, #1a5a9e 100%);
  color: #fff;
  overflow: hidden;
  position: relative;
}

.fmr-vbadge-seal {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 150px;
}

/* yeşil parlama rozetin tam arkasında, halkanın merkezinde */
.fmr-vbadge-seal::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 208, 138, .26), transparent 62%);
  pointer-events: none;
}

.fmr-vbadge-ring {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .28);
  animation: fmr-spin 48s linear infinite;
}

.fmr-vbadge-ring::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
}

.fmr-vbadge-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(9, 26, 50, .55);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.fmr-vbadge-pill .icon {
  width: 17px;
  height: 17px;
  color: #2fd08a;
}

.fmr-vbadge-pill strong {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
}

.fmr-vbadge-body h3 {
  margin: 0 0 8px;
  font-size: 20px;
  color: #fff;
}

.fmr-vbadge-body > p {
  margin: 0 0 16px;
  max-width: 60ch;
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
  line-height: 1.7;
}

.fmr-vbadge-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fmr-vbadge-rules li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
}

.fmr-vbadge-rules b {
  display: grid;
  place-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2fd08a;
  color: var(--navy-dark);
  font-size: 11.5px;
  font-weight: 800;
}

@keyframes fmr-spin {
  to { transform: rotate(360deg); }
}

/* ── kaynaklar: ana anlatı + kayıt defteri paneli ─────────────── */

.fmr-evidence {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 40px;
  align-items: start;
}

.fmr-prose {
  max-width: 62ch;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.7;
}

.fmr-prose--dim {
  color: var(--muted);
  font-size: 13px;
}

.fmr-grades {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0;
}

.fmr-grade {
  padding: 16px 16px 15px;
  border: 1px solid var(--card-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--card-shadow);
}

.fmr-grade b {
  display: grid;
  place-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
  border-radius: 9px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.fmr-grade--a b { background: var(--green); }
.fmr-grade--b b { background: var(--blue); }
.fmr-grade--c b { background: #8795a8; }

.fmr-grade h4 {
  margin: 0 0 5px;
  font-size: 13.5px;
  color: var(--ink);
}

.fmr-grade p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.fmr-registry {
  padding: 24px 26px;
  border: 1px solid var(--card-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--card-shadow);
}

.fmr-registry-t {
  margin: 0 0 16px;
  font-size: 15.5px;
  color: var(--navy);
}

.fmr-src-group {
  padding: 11px 0;
  border-top: 1px solid var(--card-line);
}

.fmr-src-group small {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.fmr-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* kaynak/sinyal çipi — sayfalar arası ortak bileşen */
.fmr-chip {
  padding: 5px 12px;
  border: 1px solid var(--card-line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  transition: border-color .25s, transform .25s;
}

.fmr-chip:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.fmr-registry > p {
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--card-line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

/* ── edisyon ritmi: solda taahhüt listesi, sağda açık-tema halka ─ */

.fmr-rhythm {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 44px;
  align-items: center;
}

.fmr-rhythm-visual {
  display: grid;
  place-items: center;
  min-height: 380px;
  border-radius: 20px;
  background: radial-gradient(72% 62% at 50% 50%, var(--accent-soft), transparent 75%);
}

/* edisyon kadranı: ay tikleri + çeyrek yayları + madalyon çekirdek */
.fmr-year--dial {
  width: 340px;
  height: 340px;
}

.fmr-dial-ticks line {
  stroke: #c3d7ea;
  stroke-width: 1;
  stroke-linecap: round;
}

.fmr-q-arc {
  fill: none;
  stroke: #d9e6f3;
  stroke-width: 2.5;
  stroke-linecap: round;
  /* çevre 301.6: çeyrek yay ~57.4, kalanı boşluk */
  stroke-dasharray: 57.4 244.2;
}

.fmr-q-arc.is-now {
  stroke: var(--accent);
  stroke-width: 3.5;
  filter: drop-shadow(0 0 5px rgba(30, 159, 224, .55));
  animation: fmr-arc-breathe 3.2s ease-in-out infinite;
}

.fmr-year--dial .fmr-year-comet {
  stroke: rgba(30, 159, 224, .55);
  stroke-width: 2;
  stroke-dasharray: 30 271.6;
  filter: none;
}

.fmr-year--dial .fmr-year-node b {
  top: -136px;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--navy);
  font-size: 12px;
  box-shadow: var(--card-shadow);
}

.fmr-year--dial .fmr-year-node.is-now b {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 6px var(--accent-soft), 0 10px 20px -10px rgba(15, 118, 184, .8);
}

.fmr-year-core {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  display: grid;
  gap: 2px;
  place-content: center;
  justify-items: center;
  text-align: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 24px 50px -24px rgba(12, 38, 74, .4), 0 0 0 1px var(--card-line);
}

.fmr-year-core small {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.fmr-year-core b {
  color: var(--navy);
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
}

.fmr-year-core em {
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.fmr-rhythm-facts {
  display: grid;
  gap: 22px;
  margin-top: 26px;
}

/* kutu değil, sade başlıklar: üstlerinde eyebrow diliyle ince accent çizgisi */
.fmr-rfact {
  padding: 0;
}

.fmr-rfact h4 {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--ink);
}

.fmr-rfact p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

/* ── kapanış ──────────────────────────────────────────────────── */

.fmr-cta .fmr-cta-in {
  padding: 52px 30px;
  border-radius: 22px;
  background:
    radial-gradient(640px 300px at 90% -20%, rgba(30, 159, 224, .4), transparent 60%),
    linear-gradient(160deg, #0e2c56, #14417d);
  color: #fff;
  text-align: center;
}

.fmr-cta h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -.02em;
}

.fmr-cta p {
  margin: 0 auto;
  max-width: 54ch;
  color: rgba(255, 255, 255, .78);
  font-size: 14.5px;
}

.fmr-cta-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 24px 0 18px;
}

.fmr-btn-ghost {
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
  background: transparent;
}

.fmr-btn-ghost:hover {
  background: rgba(255, 255, 255, .12);
}

.fmr-cta small {
  display: block;
  color: rgba(255, 255, 255, .55);
  font-size: 11.5px;
}

/* ── hareket ──────────────────────────────────────────────────── */

@keyframes fmr-shine {
  0% { left: -60%; }
  60%, 100% { left: 120%; }
}

@keyframes fmr-spin {
  to { transform: rotate(360deg); }
}

@keyframes fmr-core-pulse {
  0%, 100% { box-shadow: 0 0 0 7px rgba(30, 159, 224, .16), 0 0 26px rgba(30, 159, 224, .5); }
  50% { box-shadow: 0 0 0 12px rgba(30, 159, 224, .08), 0 0 34px rgba(30, 159, 224, .7); }
}

@keyframes fh-fly-in {
  0% { transform: translate(var(--dx), var(--dy)) scale(.6); opacity: 0; }
  12% { opacity: 1; }
  38% { transform: translate(0, 0) scale(1); opacity: 1; }
  46%, 100% { transform: translate(0, 0) scale(.2); opacity: 0; }
}

@keyframes fh-core-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30, 159, 224, .35); }
  45% { box-shadow: 0 0 0 9px rgba(30, 159, 224, 0); }
}

@keyframes fh-you-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.22); }
}

@keyframes fh-pline-scan {
  0%, 12% { top: 72%; opacity: 0; }
  22% { opacity: .65; }
  55%, 78% { top: 26%; opacity: .65; }
  92%, 100% { top: 26%; opacity: 0; }
}

@keyframes fh-weigh-tilt {
  from { transform: rotate(-8deg); }
  to { transform: rotate(8deg); }
}

@keyframes fh-doc-shimmer {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}

@keyframes fh-seal-stamp {
  0% { transform: scale(0) rotate(-14deg); opacity: 0; }
  9% { transform: scale(1.18) rotate(3deg); opacity: 1; }
  14% { transform: scale(1) rotate(0); }
  78% { transform: scale(1); opacity: 1; }
  92%, 100% { transform: scale(1); opacity: 0; }
}

@keyframes fmr-arc-breathe {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(30, 159, 224, .4)); }
  50% { filter: drop-shadow(0 0 9px rgba(30, 159, 224, .8)); }
}

@keyframes fmr-step-up {
  from {
    opacity: 0;
    transform: scaleY(.1);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fmr-tier--exceptional::after {
    animation: none;
  }

  .fmr-orbit-ring,
  .fmr-orbit-core,
  .fmr-year-comet,
  .fh-fly,
  .fh-core,
  .fh-you,
  .fh-beam,
  .fh-doc i,
  .fh-seal {
    animation: none;
  }

  .fh-pline {
    animation: none;
    top: 26%;
  }

  .fmr-q-arc.is-now {
    animation: none;
  }

  .fmr-pillar-bar i {
    transform: none;
    transition: none;
  }

  .hd-rise.is-in .fmr-step {
    animation: none;
  }

  .fmr-step--exceptional::after {
    animation: none;
  }

  .fmr-mix-card,
  .fmr-guard,
  .fmr-chip {
    transition: none;
  }

  .fmr-vbadge-ring {
    animation: none;
  }
}

/* ── daralan ekranlar ─────────────────────────────────────────── */

@media (max-width: 980px) {
  .fmr-feats {
    grid-template-columns: 1fr;
    max-width: 600px;
    gap: 10px;
  }

  .fmr-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fmr-pillars,
  .fmr-evidence,
  .fmr-rhythm {
    grid-template-columns: 1fr;
  }

  /* iki sütun kartı mobilde yan yana kayar: her kart masaüstündeki gibi
     dikey listedir, sağa çekince diğeri gelir; komşu kartın ucu görünür. */
  .fmr-pillars {
    position: relative;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .fmr-pillars::-webkit-scrollbar {
    display: none;
  }

  .fmr-pillar-col {
    scroll-snap-align: start;
  }

  .fmr-pillar-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
  }

  .fmr-pillar-dots i {
    width: 7px;
    height: 7px;
    border-radius: 4px;
    background: #c3d7ea;
    transition: width .3s cubic-bezier(.2, .7, .25, 1), background .3s;
    cursor: pointer;
  }

  .fmr-pillar-dots .is-on {
    width: 20px;
    background: var(--accent);
  }

  .fmr-rhythm-visual {
    min-height: 230px;
  }

  .fmr-year--dial {
    width: 230px;
    height: 230px;
  }

  .fmr-year--dial .fmr-year-node b {
    top: -92px;
    width: 30px;
    height: 30px;
    font-size: 10px;
  }

  .fmr-year-core {
    width: 104px;
    height: 104px;
  }

  .fmr-year-core b {
    font-size: 28px;
  }

  .fmr-evidence {
    gap: 26px;
  }
}

@media (max-width: 760px) {
  .fmr-vbadge {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 24px 20px;
    text-align: center;
  }

  .fmr-vbadge-seal {
    min-height: 120px;
  }

  .fmr-vbadge-ring {
    width: 120px;
    height: 120px;
  }

  .fmr-vbadge-body > p {
    margin-inline: auto;
  }

  .fmr-vbadge-rules {
    justify-content: center;
  }

  .fmr-mix,
  .fmr-grades {
    grid-template-columns: 1fr;
  }

  .fmr-editions2 span {
    font-size: 9px;
  }

  .fmr-guards {
    grid-template-columns: none;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .fmr-guards::-webkit-scrollbar {
    display: none;
  }

  .fmr-guards .fmr-guard {
    scroll-snap-align: start;
  }

  /* sahneler mobilde yatay kompakt satıra döner: küçük sahne solda, metin sağda */
  /* üç sahne alt alta 480px tutuyordu; mobilde kart kart kaydırılan ray + nokta gezgini */
  .fmr-feats {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-top: 18px;
  }

  .fmr-feats::-webkit-scrollbar {
    display: none;
  }

  .fmr-feat {
    scroll-snap-align: start;
  }

  .fmr-feat-dots {
    display: flex;
    margin-top: 10px;
  }

  .page-hero--fmr .fmr-feat-dots i {
    background: rgba(255, 255, 255, .32);
  }

  .page-hero--fmr .fmr-feat-dots .is-on {
    background: #7ed0ff;
  }

  .fmr-verified {
    margin-top: 14px;
  }

  .fmr-feats {
    max-width: none;
  }

  .fmr-feat p {
    font-size: 12px;
  }

  .fmr-tiers {
    max-width: 350px;
    margin-inline: auto;
    justify-content: center;
    gap: 8px;
  }

  .fmr-tiers p {
    flex: 1 1 100%;
    margin: 12px 0 0;
    text-align: center;
  }

  .fmr-step {
    padding: 0 10px 10px;
  }

  .fmr-step b {
    font-size: 10.5px;
  }

  .fmr-step span {
    font-size: 9px;
  }
}

@media (max-width: 500px) {
  .fmr-steps {
    grid-template-columns: 1fr;
  }

  /* dar ekranda merdiven dikey kademeye döner: zirve en üstte ve en geniş */
  .fmr-stair {
    flex-direction: column;
    align-items: flex-start;
  }

  .fmr-step {
    width: calc(100% - var(--i, 0) * 9.6%);
    height: 54px;
    flex: none;
    border-radius: 10px;
  }

}

/* ── ana sayfa bandı (includes/home-fmr.php): Popular Treatments container'ında,
   slider'ın altında; hero sahneleri lacivert kartta ── */

.hf-slot {
  display: block;
  margin-top: var(--section-pad, 78px);
}

.hf {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 26px 52px;
  padding: 42px 46px;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(30, 159, 224, .35), transparent 60%),
    radial-gradient(700px 380px at -10% 110%, rgba(30, 159, 224, .22), transparent 55%),
    linear-gradient(160deg, #0e2c56 0%, #14417d 55%, #0e2c56 100%);
  box-shadow: 0 24px 50px rgba(14, 44, 86, .18);
  overflow: hidden;
  isolation: isolate;
}

.hf-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.hf-copy .hd-kicker {
  align-self: flex-start;
  margin-bottom: 18px;
}

.hf-copy h2 {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(28px, 2.9vw, 40px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.08;
  text-wrap: balance;
}

.hf-copy p {
  margin: 0 0 24px;
  max-width: 44ch;
  color: rgba(226, 240, 255, .84);
  font-size: 14.5px;
  line-height: 1.7;
}

/* CTA: "Why Use FindMed" panelindeki Learn More butonuyla aynı bileşen (.wc-cta) */
/* sağ sütun: üç sahne alt alta (temel .fmr-feat zaten yatay kart) */
.hf-feats {
  display: grid;
  gap: 12px;
  align-content: center;
}

.hf-feats .fmr-feat {
  box-shadow: none;
}

@media (max-width: 980px) {
  /* minmax(0): kaynak şeridinin tek satırlık içeriği sütunu kartın dışına genişletmesin */
  .hf {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 32px 28px 26px;
  }

  .hf-copy p {
    max-width: 60ch;
  }
}

@media (max-width: 760px) {
  .hf-slot {
    margin-top: 44px;
  }

  .hf {
    padding: 26px 18px 20px;
    border-radius: 22px;
  }

  .hf-copy h2 {
    font-size: 27px;
  }

  .hf-copy p {
    font-size: 13.5px;
    margin-bottom: 18px;
  }

  .hf-cta {
    align-self: stretch;
    justify-content: center;
  }

  .hf-feats .fmr-feat {
    padding: 10px 14px 10px 10px;
  }

  .hf-feats .fmr-feat h3 {
    font-size: 14px;
  }
}


/* ===== assets/css/src/06-pages/75-destination.css ===== */
/* Tekil şehir sayfası (findmed/destination-page). Hastane sayfasının kabuğunu
   (page-hero, hd-dash, hd-nav, hd-sec, hd-head, hd-faq, hd-close) devralır;
   buradakiler yalnız şehre özel parçalar (dd-*). */

/* ── hero ─────────────────────────────────────────────────────── */

.page-hero--destination .hero-bg::before {
  background-image: var(--fm-hero-img, url("https://findmed.odopreview.com/wp-content/themes/findmed/assets/img/page-destination-bg.webp"));
}

.dd-kicker .hd-flag {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  object-fit: cover;
}

/* veri kartı: "şu an" | yolculuk küresi (hastane kartındaki puan | yolculuk düzeni;
   ayraçlar .hd-dash--orb.has-orb kurallarından gelir) */
.hd-dash--dest {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

/* havalimanı panosu: iki satır (saat, hava), beşer kanatlı hücre, eşit genişlik */
.dd-now {
  display: grid;
  align-content: center;
  gap: 14px;
}

.dd-board {
  display: grid;
  gap: 7px;
}

.dd-board .hd-dash-k em {
  margin-left: 6px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, .18);
  color: #cfe6f8;
  font-style: normal;
  letter-spacing: .04em;
  text-transform: none;
}

.dd-flaps {
  display: inline-flex;
  gap: 4px;
}

.dd-flap {
  position: relative;
  width: 34px;
  height: 44px;
  perspective: 240px;
}

/* hücre: koyu kanat, ortada menteşe çizgisi, hafif üst parıltı */
.dd-flap-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  background: linear-gradient(180deg, #16305a 0%, #0f254a 49%, #0b1d3c 51%, #0d2246 100%);
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .08);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

.dd-flap-face::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: rgba(0, 0, 0, .55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05);
}

.dd-flap--ico .dd-flap-face {
  color: #7ed0ff;
}

.dd-flap--ico .icon {
  width: 18px;
  height: 18px;
}

/* çevirme: kanat öne kapanır, yeni harf açılırken gelir */
.dd-flap.is-flip .dd-flap-face {
  animation: dd-flip .36s cubic-bezier(.4, 0, .2, 1);
}

@keyframes dd-flip {
  0% { transform: rotateX(0deg); }
  50% { transform: rotateX(-88deg); filter: brightness(.7); }
  100% { transform: rotateX(0deg); }
}

/* ── bölüm başlığı + "tümü" bağlantısı aynı satırda ───────────── */

.dd-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.dd-head-row .hd-head {
  margin-bottom: 0;
}

.dd-head-row + .treatment-slider {
  margin-top: 28px;
}

/* ── neden bu şehir: 4 kart ───────────────────────────────────── */

.dd-reasons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.dd-reason {
  padding: 24px;
  border: 1px solid var(--card-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--card-shadow);
  transition: transform .35s cubic-bezier(.2, .7, .25, 1), box-shadow .35s, border-color .35s;
}

.dd-reason:hover {
  transform: translateY(-4px);
  border-color: rgba(30, 159, 224, .45);
  box-shadow: var(--card-shadow-hover);
}

.dd-reason-ico,
.dd-info-ico,
.dd-place-ico {
  display: grid;
  place-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--navy);
  color: #fff;
}

.dd-reason-ico .icon,
.dd-info-ico .icon,
.dd-place-ico .icon {
  width: 18px;
  height: 18px;
}

.dd-reason h3 {
  margin: 14px 0 6px;
  font-size: 15.5px;
  color: var(--ink);
}

.dd-reason p,
.dd-info-card p,
.dd-place p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.65;
}

/* ── harita: 76-destination-map.css ─────────────────────────── */

/* ── tedaviler ────────────────────────────────────────────────── */

.dd-cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.dd-cat {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 24px;
  border: 1px solid var(--card-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--card-shadow);
  color: inherit;
  text-decoration: none;
  transition: transform .35s cubic-bezier(.2, .7, .25, 1), box-shadow .35s, border-color .35s;
}

.dd-cat:hover {
  transform: translateY(-4px);
  border-color: rgba(30, 159, 224, .45);
  box-shadow: var(--card-shadow-hover);
}

.dd-cat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.dd-cat-top .hd-eyebrow {
  margin: 0;
}

.dd-cat-top .icon {
  width: 18px;
  height: 18px;
  color: var(--accent);
  transition: transform .2s;
}

.dd-cat:hover .dd-cat-top .icon {
  transform: translate(2px, -2px);
}

.dd-cat-stay {
  color: var(--navy-dark);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.dd-cat small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dd-cat p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.65;
}

.dd-also {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
}

.dd-also-k {
  margin-right: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

a.fmr-chip {
  text-decoration: none;
}

/* ── listeler: hub kartları ───────────────────────────────────── */

.dd-lists {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ── plan: ince rota çizgisi + duraklar, açıklamalar başlıkların altında (kutusuz) ── */

.dd-route {
  padding: 10px 0 0;
}

.dd-stops {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* çizgi: durak noktalarının hizasında; dolu kısım aktif durağa kadar */
.dd-stops-line {
  position: absolute;
  top: 9px;
  right: calc(100% / var(--n, 5) / 2);
  left: calc(100% / var(--n, 5) / 2);
  height: 2px;
  border-radius: 2px;
  background: var(--card-line);
}

.dd-stops-line i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 0%);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), #7ed0ff);
  transition: width .9s cubic-bezier(.4, 0, .2, 1);
}

.dd-stop {
  position: relative;
  min-width: 0;
}

.dd-stop-hit {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.dd-stop-dot {
  position: relative;
  z-index: 1;
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--card-line);
  border-radius: 50%;
  background: #fff;
  transition: border-color .3s, background .3s, box-shadow .3s;
}

.dd-stop.is-done .dd-stop-dot {
  border-color: var(--accent);
}

.dd-stop.is-on .dd-stop-dot {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(30, 159, 224, .16);
}

.dd-stop-n {
  margin-top: 4px;
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.dd-stop-t {
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  transition: color .3s;
}

.dd-stop:hover .dd-stop-t,
.dd-stop.is-on .dd-stop-t {
  color: var(--navy-dark);
}

/* açıklama: her durağın altında; aktif olanınki koyulaşır */
.dd-stop-text {
  margin: 10px 8px 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
  text-align: center;
  text-wrap: pretty;
  opacity: .78;
  transition: opacity .3s, color .3s;
}

.dd-stop.is-on .dd-stop-text {
  color: var(--ink);
  opacity: 1;
}

.dd-sub {
  margin: 36px 0 14px;
  color: var(--navy-dark);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.dd-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.dd-info-card {
  display: flex;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--card-line);
  border-radius: 14px;
  background: #fff;
}

.dd-info-ico {
  flex: 0 0 40px;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.dd-info-card h4 {
  margin: 2px 0 4px;
  font-size: 14px;
  color: var(--ink);
}

/* ── dinlenme günleri ─────────────────────────────────────────── */

.dd-places {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.dd-place {
  display: flex;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--card-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--card-shadow);
}

.dd-place-ico {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  background: linear-gradient(145deg, var(--navy), var(--navy-dark));
}

.dd-place-body {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.dd-place-effort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-self: start;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.dd-place-effort .icon {
  width: 12px;
  height: 12px;
}

.dd-place h3 {
  margin: 0;
  font-size: 16px;
  color: var(--ink);
}

.dd-place-map {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-self: start;
  margin-top: 4px;
  color: var(--accent-dark);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}

.dd-place-map .icon {
  width: 13px;
  height: 13px;
}

/* ── tablet ───────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .dd-reasons,
  .dd-info,
  .dd-lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

/* ── telefon ──────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .hd-dash--dest {
    grid-template-columns: minmax(0, 1fr);
  }

  .hd-dash--dest > * + * {
    margin-left: 0;
    margin-top: 14px;
    padding-left: 0;
    padding-top: 14px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }

  .dd-now {
    justify-items: center;
  }

  .dd-board {
    justify-items: center;
  }

  .dd-flap {
    width: 30px;
    height: 40px;
  }

  .dd-flap-face {
    font-size: 23px;
  }

  .dd-head-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .dd-reasons,
  .dd-cats,
  .dd-info,
  .dd-places,
  .dd-lists,
  .dd-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  /* telefon: duraklar dikey; çizgiyi her durak kendi parçasıyla çizer, son durakta noktada biter;
     açıklama yalnız aktif durağın altında açılır */
  .dd-route {
    padding: 0;
  }

  .dd-stops {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-left: 2px;
  }

  .dd-stops-line {
    display: none;
  }

  /* nokta 20px, merkezi 10px: çizgi 9px'ten başlayıp 2px genişlikle tam ortadan geçer */
  .dd-stop:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 22px;
    bottom: -22px;
    left: 9px;
    width: 2px;
    background: var(--card-line);
    transition: background .4s;
  }

  .dd-stop.is-done:not(:last-child)::before {
    background: var(--accent);
  }

  .dd-stop-hit {
    grid-template-columns: 20px auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 14px;
    padding: 12px 0;
    text-align: left;
  }

  .dd-stop-n {
    margin: 0;
  }

  .dd-stop-t {
    font-size: 16px;
  }

  .dd-stop-text {
    max-height: 0;
    margin: 0 0 0 34px;
    overflow: hidden;
    opacity: 0;
    text-align: left;
    transition: max-height .45s cubic-bezier(.4, 0, .2, 1), opacity .3s, padding .3s;
  }

  .dd-stop.is-on .dd-stop-text {
    max-height: 160px;
    padding-bottom: 12px;
    opacity: 1;
  }

  /* "Also in …": etiket kendi satırında ortalı, çipler ortalı akar */
  .dd-also {
    justify-content: center;
  }

  .dd-also-k {
    flex: 0 0 100%;
    margin: 0 0 2px;
    text-align: center;
  }



  .dd-place {
    gap: 14px;
    padding: 18px;
  }
}


/* ===== assets/css/src/06-pages/76-destination-map.css ===== */
/* Şehir sayfası "Where the hospitals are" (#map, .dd-map-*): koyu kontrol paneli — koyu harita, cam liste, seçili hastane kartı. Davranış: destination.js "harita". */

/* ══════════════════════════════════════════════════════════════
Bölüm, hero'daki cam paneli (hd-dash) ile aynı dili konuşur: gece
lacivert zemin, koyu harita, üstünde yüzen cam yüzeyler. Masaüstünde
liste solda, seçili hastanenin kartı sağ altta haritanın üstündedir;
1100px altında harita üstte, kart haritaya biner, liste altta akar.
══════════════════════════════════════════════════════════════ */
.dd-map-sec {
  --dm-bg: #071a33;
  --dm-glass: rgba(8, 24, 48, .78);
  --dm-line: rgba(255, 255, 255, .1);
  --dm-soft: rgba(216, 233, 252, .72);
  --dm-sky: #8fc3f2;
  --dm-beacon: #1e9fe0;

  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(55% 60% at 0% 0%, rgba(30, 159, 224, .18) 0%, rgba(30, 159, 224, 0) 70%),
    radial-gradient(45% 55% at 100% 100%, rgba(26, 86, 160, .3) 0%, rgba(26, 86, 160, 0) 70%),
    var(--dm-bg);
}

.dd-map-sec .hd-eyebrow {
  color: var(--dm-sky);
}

.dd-map-sec .hd-eyebrow::before {
  background: var(--dm-sky);
}

.dd-map-sec .hd-head h2 {
  color: #fff;
}

.dd-map-sec .hd-head p {
  color: var(--dm-soft);
}

/* ── çerçeve ── */
.dd-map {
  position: relative;
  z-index: 0;
  isolation: isolate;
  height: 640px;
  overflow: hidden;
  border: 1px solid var(--dm-line);
  border-radius: 28px;
  background: #10141a;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* kenarlarda koyulaşma: cam yüzeyler haritadan ayrışsın */
.dd-map::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(120% 90% at 60% 45%, rgba(7, 26, 51, 0) 55%, rgba(7, 26, 51, .55) 100%);
  pointer-events: none;
}

/* z-index: Leaflet katmanları (400–700) kendi bağlamında kalsın; liste ve kart üstte */
.dd-map-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #10141a;
}

/* gri koyu karolar sitenin lacivertine boyanır (karolar ile iğneler arasında; filtre yerine
   karışım: filter karo aralarında ince çizgiler bırakıyordu) */
.dd-map-canvas::after {
  content: "";
  position: absolute;
  z-index: 450;
  inset: 0;
  background: #123a73;
  mix-blend-mode: color;
  opacity: .75;
  pointer-events: none;
}

/* tuvalin kendisi Leaflet kabı olur; leaflet.css'in açık gri zemini (#ddd) karo aralarında
   ince çizgi gibi görünüyordu: koyu zemin kesin olarak burada */
.dd-map-canvas.leaflet-container {
  background: #10141a;
  font-family: inherit;
}

.dd-map-canvas .leaflet-overlay-pane {
  z-index: 410;
}

.dd-map-fallback {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  padding: 24px;
  color: var(--dm-soft);
  font-size: 14px;
  text-align: center;
}

.dd-map.is-live .dd-map-fallback {
  display: none;
}

/* yakınlaştırma: cam düğmeler, sağ üstte */
.dd-map-canvas .leaflet-control-zoom {
  margin: 20px 20px 0 0;
  overflow: hidden;
  border: 1px solid var(--dm-line);
  border-radius: 12px;
  box-shadow: none;
}

.dd-map-canvas .leaflet-control-zoom a {
  width: 36px;
  height: 36px;
  border: 0;
  color: #fff;
  background: var(--dm-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 18px;
  line-height: 36px;
}

.dd-map-canvas .leaflet-control-zoom a + a {
  border-top: 1px solid var(--dm-line);
}

.dd-map-canvas .leaflet-control-zoom a:hover {
  background: rgba(30, 159, 224, .35);
}

.dd-map-canvas .leaflet-control-attribution {
  margin: 0 8px 6px 0;
  padding: 2px 8px;
  border-radius: 999px;
  color: rgba(255, 255, 255, .5);
  background: rgba(8, 24, 48, .6);
  font-size: 10px;
}

.dd-map-canvas .leaflet-control-attribution a {
  color: rgba(255, 255, 255, .7);
}

/* ── seçili hastanenin iğnesi: nabız atan ışık ── */
.dd-beacon {
  position: relative;
  display: block;
  width: 0;
  height: 0;
}

.dd-beacon b,
.dd-beacon i {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.dd-beacon b {
  border: 3px solid #fff;
  background: var(--dm-beacon);
  box-shadow: 0 0 0 6px rgba(30, 159, 224, .28), 0 0 28px 6px rgba(30, 159, 224, .75);
}

.dd-beacon i {
  border: 2px solid rgba(143, 195, 242, .9);
  animation: dd-beacon 2.4s cubic-bezier(.2, .6, .3, 1) infinite;
}

.dd-beacon i + i {
  animation-delay: 1.2s;
}

@keyframes dd-beacon {
  from {
    opacity: .9;
    transform: translate(-50%, -50%) scale(1);
  }

  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4);
  }
}

/* iğneden en yakın havalimanına akan kesikli çizgi */
.dd-route {
  stroke: var(--dm-sky);
  stroke-opacity: .85;
  stroke-linecap: round;
  animation: dd-flow 1.2s linear infinite;
}

@keyframes dd-flow {
  to {
    stroke-dashoffset: -28;
  }
}

/* havalimanı etiketi */
.dd-air {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border: 1px solid rgba(143, 195, 242, .4);
  border-radius: 999px;
  color: #fff;
  background: rgba(8, 24, 48, .88);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.dd-air-ico {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--dm-beacon);
}

.dd-air-ico svg {
  width: 12px;
  height: 12px;
  fill: #fff;
}

/* ── varış havalimanı seçici (sağ üstte, yakınlaştırmanın solunda) ── */
.dd-map-air-pick {
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 70px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--dm-line);
  border-radius: 999px;
  background: var(--dm-glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .7);
}

.dd-map-air-pick-k {
  padding: 0 8px 0 10px;
  color: var(--dm-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dd-map-air-pick button {
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.dd-map-air-pick button:hover {
  background: rgba(255, 255, 255, .08);
}

.dd-map-air-pick button[aria-checked="true"] {
  color: var(--navy-dark);
  background: #fff;
}

.dd-map-air-pick button:focus-visible {
  outline: 2px solid var(--dm-sky);
  outline-offset: 2px;
}

/* ── cam liste (solda) ── */
.dd-map-side {
  position: absolute;
  z-index: 2;
  top: 20px;
  bottom: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  width: 360px;
  overflow: hidden;
  border: 1px solid var(--dm-line);
  border-radius: 20px;
  background: var(--dm-glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .7);
}

.dd-map-side-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--dm-line);
}

.dd-map-count {
  color: var(--dm-soft);
  font-size: 13px;
}

.dd-map-count b {
  margin-right: 4px;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.dd-map-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--dm-line);
  border-radius: 999px;
  color: var(--dm-sky);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.dd-map-sort .icon {
  width: 13px;
  height: 13px;
}

.dd-map-list {
  flex-grow: 1;
  min-height: 0;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
  scrollbar-width: thin;
}

.dd-map-list li {
  margin: 0;
}

.dd-map-list li + li {
  margin-top: 2px;
}

.dd-map-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: #fff;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.dd-map-item:not(:disabled):hover {
  background: rgba(255, 255, 255, .06);
}

.dd-map-list li.is-on .dd-map-item {
  border-color: rgba(143, 195, 242, .35);
  background: linear-gradient(90deg, rgba(30, 159, 224, .26) 0%, rgba(30, 159, 224, .06) 100%);
}

.dd-map-item:disabled {
  cursor: default;
  opacity: .42;
}

.dd-map-rank {
  color: rgba(255, 255, 255, .4);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: color .2s ease;
}

.dd-map-list li.is-on .dd-map-rank {
  color: var(--dm-sky);
}

.dd-map-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dd-map-item-main strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dd-map-item-main small {
  overflow: hidden;
  color: var(--dm-soft);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dd-map-item-fmr {
  padding: 3px 8px;
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.dd-map-list li.is-on .dd-map-item-fmr {
  color: var(--navy-dark);
  background: #fff;
}

.dd-map-item:focus-visible {
  outline: 2px solid var(--dm-sky);
  outline-offset: -2px;
}

/* ── seçili hastanenin kartı (sağ altta) ── */
.dd-map-card {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 20px;
  width: 340px;
  overflow: hidden;
  border: 1px solid var(--dm-line);
  border-radius: 22px;
  background: var(--dm-glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .75);
}

.dd-map-card[hidden] {
  display: none;
}

.dd-map-card.is-in {
  animation: dd-card-in .45s cubic-bezier(.2, .8, .25, 1) both;
}

@keyframes dd-card-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.dd-map-card-photos {
  position: relative;
  display: none;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0d2240;
}

.dd-map-card.has-photo .dd-map-card-photos {
  display: block;
}

/* fotoğrafın altı kartın camına yumuşakça karışır */
.dd-map-card-photos::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(8, 24, 48, .85), rgba(8, 24, 48, 0));
}

.dd-map-card-photos img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1s ease, transform 4s ease-out;
}

.dd-map-card-photos img.is-on {
  opacity: 1;
  transform: scale(1);
}

.dd-map-card-dots {
  position: absolute;
  z-index: 1;
  right: 14px;
  bottom: 12px;
  display: flex;
  gap: 5px;
}

.dd-map-card-dots i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  transition: width .3s ease, background-color .3s ease;
}

.dd-map-card-dots i.is-on {
  width: 18px;
  background: #fff;
}

.dd-map-card-body {
  padding: 16px 18px 18px;
}

.dd-map-card.has-photo .dd-map-card-body {
  margin-top: -26px;
  position: relative;
}

.dd-map-card-k {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--dm-sky);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dd-map-card-k .icon {
  width: 14px;
  height: 14px;
}

.dd-map-card h3 {
  margin: 6px 0 14px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.dd-map-card-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.dd-map-card-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--dm-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
}

.dd-map-card-stat[hidden] {
  display: none;
}

.dd-map-card-stat .icon {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  color: var(--dm-sky);
}

.dd-map-card-stat b {
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.dd-map-card-stat small {
  color: var(--dm-soft);
  font-size: 11px;
  line-height: 1.3;
}

.dd-map-card-go {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 46px;
  border-radius: 14px;
  color: var(--navy-dark);
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.dd-map-card-go:hover {
  color: #fff;
  background: var(--dm-beacon);
}

.dd-map-card-go .icon {
  width: 16px;
  height: 16px;
}

.dd-map-card-go:focus-visible {
  outline: 3px solid var(--dm-sky);
  outline-offset: 3px;
}

/* ── tablet: harita üstte, kart haritaya biner, liste altta ── */
@media (max-width: 1100px) {
  .dd-map {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .dd-map::after {
    display: none;
  }

  .dd-map-air-pick {
    top: 12px;
    right: auto;
    left: 12px;
  }

  .dd-map-canvas {
    position: relative;
    order: 1;
    z-index: 0;
    height: 460px;
    overflow: hidden;
    border: 1px solid var(--dm-line);
    border-radius: 24px;
  }

  .dd-map-card {
    position: relative;
    order: 2;
    right: auto;
    bottom: auto;
    width: calc(100% - 32px);
    max-width: 560px;
    margin: -84px auto 0;
  }

  /* geniş kartta fotoğraf yatay şerit olsun */
  .dd-map-card-photos {
    aspect-ratio: 2 / 1;
  }

  .dd-map-side {
    position: relative;
    order: 3;
    top: auto;
    bottom: auto;
    left: auto;
    width: auto;
    margin-top: 16px;
  }

  .dd-map-list {
    max-height: 360px;
  }
}

@media (max-width: 560px) {
  .dd-map-air-pick-k {
    display: none;
  }

  .dd-map-canvas {
    height: 380px;
    border-radius: 20px;
  }

  .dd-map-card {
    width: calc(100% - 20px);
    margin-top: -64px;
  }

  .dd-map-card-photos {
    aspect-ratio: 16 / 10;
  }

  .dd-map-card h3 {
    font-size: 18px;
  }

  .dd-map-canvas .leaflet-control-zoom {
    margin: 12px 12px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dd-beacon i,
  .dd-route,
  .dd-map-card.is-in {
    animation: none;
  }

  .dd-map-card-photos img,
  .dd-map-card-dots i,
  .dd-map-item {
    transition: none;
  }
}


/* ===== assets/css/src/07-footer/footer.css ===== */
/* Alt bilgi (.site-footer, .ft-*). */

.socials {
  display: flex;
  gap: 8px;
}

.socials a {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--radius);
  font-size: 10px;
}

/* ══════════════════════════════════════════════════════════════
Alt bilgi (footer) — kurumsal düzen
Header lacivertiyle aynı zemin, accent turkuaz vurgular
══════════════════════════════════════════════════════════════ */
.site-footer {
  --ft-line: rgba(255, 255, 255, .12);
  --ft-card: rgba(255, 255, 255, .05);
  --ft-link: #8eb8dc;
  padding-top: 0;
  color: #c5daf2;
  background: var(--navy-dark);
}

/* üst kenarda ince ışık — header'dan devam eden his */
.site-footer::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(30, 159, 224, .45), transparent);
}

/* ── Üst blok: marka + bağlantı sütunları + iletişim ── */
.ft-main {
  display: grid;
  grid-template-columns: 1.55fr .9fr .9fr .9fr 1.25fr;
  gap: 40px;
  padding-top: 64px;
  padding-bottom: 52px;
}

.ft-brand > p {
  max-width: 380px;
  margin: 0 0 22px;
  color: var(--ft-link);
  font-size: 13px;
  line-height: 1.75;
}

/* ── Marka altındaki kurumsal kısayol kartları ── */
.ft-promos {
  display: grid;
  gap: 10px;
  max-width: 420px;
}

.ft-promo {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--ft-line);
  border-radius: 12px;
  background: var(--ft-card);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.ft-promo-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, .14);
}

.ft-promo-icon .icon {
  width: 19px;
  height: 19px;
}

.ft-promo-text {
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.45;
}

.ft-promo-text strong {
  display: block;
  margin-bottom: 2px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}

.ft-promo-arrow {
  width: 17px;
  height: 17px;
  opacity: .6;
  transition: transform .2s ease, opacity .2s ease;
}

.ft-promo:hover {
  transform: translateY(-1px);
}

.ft-promo:hover .ft-promo-arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* üç kart da aynı saydam stil */
.ft-promo-soft {
  color: #fff;
}

.ft-promo-soft .ft-promo-text {
  color: var(--ft-link);
}

.ft-promo-soft:hover {
  border-color: rgba(30, 159, 224, .55);
  background: rgba(255, 255, 255, .09);
}

/* ── Bağlantı sütunları ── */
.ft-col h3 {
  position: relative;
  margin: 3px 0 22px;
  padding-bottom: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.ft-col h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* iletişim kartları bu listeleme kuralının dışında kalmalı */
.ft-col > a:not(.ft-contact-card),
.ft-acc-panel a {
  display: block;
  margin: 9px 0;
  color: var(--ft-link);
  font-size: 12.5px;
  line-height: 1.5;
  transition: color .18s ease, transform .18s ease;
}

.ft-col > a:not(.ft-contact-card):hover,
.ft-acc-panel a:hover {
  color: var(--accent);
  transform: translateX(3px);
}

/* ── Footer sütunları: masaüstünde düz liste, mobilde accordion ── */
.ft-acc-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
}

.ft-acc-btn:disabled {
  cursor: default;
  opacity: 1;
}

.ft-acc-btn .icon {
  display: none;
  width: 18px;
  height: 18px;
  color: var(--accent);
  transition: transform .25s ease;
}

/* ── Kurumsal iletişim sütunu ── */
.ft-contact-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
  padding: 11px 13px;
  border: 1px solid var(--ft-line);
  border-radius: 11px;
  background: var(--ft-card);
  transition: border-color .2s ease, background .2s ease;
}

.ft-contact-card:hover {
  border-color: rgba(30, 159, 224, .5);
  background: rgba(255, 255, 255, .09);
}

.ft-contact-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 9px;
  color: #fff;
}

.ft-contact-icon .icon {
  width: 18px;
  height: 18px;
}

.ft-ic-blue {
  background: #1e6fd9;
}

.ft-ic-accent {
  color: #082744;
  background: var(--accent);
}

.ft-ic-teal {
  background: var(--accent-dark);
}

.ft-ic-navy {
  background: rgba(255, 255, 255, .17);
}

.ft-contact-text {
  min-width: 0;
  color: var(--ft-link);
  font-size: 11px;
  line-height: 1.4;
}

.ft-contact-text strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
}

.ft-follow-title {
  margin-top: 26px !important;
}

.ft-follow-title::after {
  display: none;
}

.ft-socials {
  display: flex;
  gap: 8px;
}

.ft-socials a {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--ft-line);
  border-radius: 10px;
  color: #cfe6f7;
  background: var(--ft-card);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.ft-socials .icon {
  width: 17px;
  height: 17px;
}

.ft-socials a:hover {
  border-color: var(--accent);
  color: #082744;
  background: var(--accent);
}

/* ── Güvence şeridi ── */
/* ── Ayırıcı ── */
.ft-split {
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(30, 159, 224, .5), transparent);
}

/* ── Akreditasyon & yayın politikası ── */
/* ── Yasal uyarı ── */
/* ── Alt çubuk ── */
.ft-bottom-wrap {
  position: relative;
  border-top: 1px solid var(--ft-line);
  background: rgba(0, 0, 0, .14);
}

.ft-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 18px;
  padding-bottom: 18px;
  color: #7fa6cc;
  font-size: 11.5px;
}

.ft-bottom p {
  margin: 0;
}

.ft-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-right: 56px;
}

.ft-legal a {
  color: #7fa6cc;
  font-size: 11.5px;
  transition: color .18s ease;
}

.ft-legal a:hover {
  color: var(--accent);
}

/* başa dön */
.ft-top {
  position: absolute;
  top: 50%;
  right: 24px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(30, 159, 224, .45);
  border-radius: 999px;
  color: var(--accent);
  background: rgba(30, 159, 224, .12);
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.ft-top .icon {
  width: 19px;
  height: 19px;
}

.ft-top:hover {
  border-color: var(--accent);
  color: #082744;
  background: var(--accent);
}

@media (max-width: 1280px) {
  /* ── Duyarlı düzen ── */
  .ft-main {
    grid-template-columns: 1.4fr .9fr .9fr 1.2fr;
    gap: 34px;
  }

  /* iletişim sütunu alt satıra geçince kartlar 2'li dizilsin */
  .ft-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-content: flex-start;
    grid-column: 2 / -1;
  }

  .ft-contact h3,
  .ft-socials {
    flex: 0 0 100%;
  }

  .ft-contact-card {
    width: calc(50% - 4.5px);
    margin-bottom: 0;
  }
}

@media (max-width: 1050px) {
  .ft-main {
    grid-template-columns: 1fr 1fr;
    gap: 34px 28px;
  }

  .ft-brand {
    grid-column: 1 / -1;
  }

  .ft-brand > p,
  .ft-promos {
    max-width: none;
  }

  .ft-promos {
    grid-template-columns: repeat(3, 1fr);
  }

  /* CORPORATE tek başına satır kaplamasın — iletişimle yan yana */
  .ft-contact {
    grid-column: auto;
  }

  .ft-contact-card {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .ft-main {
    grid-template-columns: 1fr;
    padding-top: 46px;
    padding-bottom: 36px;
  }

  /* Treatments / Destinations / Corporate → accordion.
  Görünüm yukarıdaki kısayol kartlarıyla aynı (aynı zemin/çerçeve/radius). */
  .ft-acc {
    overflow: hidden;
    border: 1px solid var(--ft-line);
    border-radius: 12px;
    background: var(--ft-card);
  }

  /* kartlar kısayol kartlarıyla aynı sıklıkta dizilsin */
  .ft-acc + .ft-acc {
    margin-top: -24px;
  }

  .ft-acc h3 {
    margin: 0;
    padding: 0;
  }

  .ft-acc h3::after {
    display: none;
  }

  .ft-acc-btn {
    padding: 14px 16px;
    cursor: pointer;
  }

  .ft-acc-btn .icon {
    display: block;
  }

  .ft-acc-btn[aria-expanded="true"] .icon {
    transform: rotate(180deg);
  }

  .ft-acc-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }

  .ft-acc-panel a {
    margin: 0 0 13px;
    padding: 0 16px;
  }

  .ft-acc-panel a:first-child {
    margin-top: 2px;
  }

  .ft-acc-panel a:last-child {
    margin-bottom: 15px;
  }

  .ft-promos {
    grid-template-columns: 1fr;
  }

  .ft-contact {
    display: block;
  }

  .ft-contact-card {
    width: auto;
    margin-bottom: 9px;
  }

  .ft-bottom {
    align-items: flex-start;
    gap: 14px;
    flex-direction: column;
    padding-bottom: 68px;
  }

  .ft-legal {
    padding-right: 0;
  }

  .ft-top {
    top: auto;
    right: auto;
    bottom: 18px;
  }
}

.ft-promo,
.ft-contact-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* ══════════════════════════════════════════════════════════════
25: Rakamlar şeridi footer'da — güvence kartlarının boşalttığı
yerde. Sayı bloğu açık zemin için yazılmıştı, koyu footer'a
göre renkler ve ölçek yeniden ayarlanıyor.
══════════════════════════════════════════════════════════════ */
.ft-numbers {
  padding: 34px 0 40px;
  border-top: 1px solid var(--ft-line);
}

.ft-numbers .nm-eyebrow {
  margin-bottom: 26px;
  color: var(--accent);
}

.ft-numbers .nm-item + .nm-item {
  border-left-color: var(--ft-line);
}

.ft-numbers .nm-value {
  color: #fff;
  font-size: 40px;
  letter-spacing: -1.6px;
}

.ft-numbers .nm-value em {
  color: var(--accent);
  font-size: 23px;
  vertical-align: 5px;
}

.ft-numbers .nm-label {
  margin-top: 11px;
  color: #fff;
  font-size: 11.5px;
}

.ft-numbers .nm-note {
  color: var(--ft-link);
  font-size: 11.5px;
}

@media (max-width: 900px) {
  .ft-numbers {
    padding: 28px 0 32px;
  }

  .ft-numbers .nm-value {
    font-size: 32px;
  }
}

@media (max-width: 760px) {
  /* ════════════════════════════════════════════════════════════
  60: Mobil rotuslar
  - Yukari cik butonu footer'in solunda degil, ortasinda.
  - "Verified Network" rozetindeki yanip sonen yesil nokta
  kaldirildi (isaretlemesi de silindi; stil artik olu kod
  olmasin diye burada kapatiliyor).
  ════════════════════════════════════════════════════════════ */
  .ft-top {
    left: 50%;
    transform: translateX(-50%);
  }
}


/* ===== assets/css/src/08-motion/animations.css ===== */
/* @keyframes, giriş animasyonları (.fm-*) ve prefers-reduced-motion kapatmaları. */

@keyframes search-panel-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-search .search-tabs-indicator {
    transition: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* ══════════════════════════════════════════════════════════════
  findMedAnimate — nesneler yerine otururken hafif hareket

  Saf opaklık geçişi yok: her nesne kendi yerine doğru küçük bir
  yol alarak yerleşir. Yatay hareketler her zaman İÇERİDEN dışarı
  doğrudur — böylece animasyon sırasında yatay taşma oluşmaz.
  Kurumsal ton için mesafe 10px, eğri yaylanmayan cinsten.

  Geçiş (transition) değil animasyon kullanılır: böylece
  bileşenlerin kendi transition'ları ezilmez. Animasyon bitince
  JS sınıfları kaldırır, öğe tamamen doğal stiline döner.
  Sınıfları yalnızca JS ekler; script çalışmazsa hiçbir şey
  gizlenmez. Azaltılmış hareket tercihinde tamamen devre dışı.
  ══════════════════════════════════════════════════════════════ */
  .fm-anim {
    opacity: 0;
  }

  .fm-in {
    animation: .72s cubic-bezier(.25, .46, .45, .94) var(--fm-delay, 0ms) both fm-up;
  }

  /* sola doğru yerleşir — sayfanın sol tarafındaki bloklar için */
  .fm-left.fm-in {
    animation-name: fm-left;
  }

  /* sağa doğru yerleşir — sağ taraftaki bloklar için */
  .fm-right.fm-in {
    animation-name: fm-right;
  }
}

@keyframes fm-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fm-left {
  from {
    opacity: 0;
    transform: translateX(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fm-right {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════
11: Hero "premium" hareketler — sahne canlansın
Fotoğrafta çok yavaş bir ken-burns, örtünün üstünde gezinen
ışık, içerik için kademeli giriş ve panelde nefes alan
mikro etkileşimler. Hepsi reduce-motion ile kapanır.
══════════════════════════════════════════════════════════════ */
@keyframes fm-kenburns {
  0% {
    transform: scale(1.03) translate3d(0, 0, 0);
  }

  100% {
    transform: scale(1.14) translate3d(-1.8%, -1.4%, 0);
  }
}

@keyframes fm-aurora {

  0%,
  100% {
    background-position: 18% 12%, 82% 4%;
    opacity: .6;
  }

  50% {
    background-position: 31% 24%, 69% 16%;
    opacity: .95;
  }
}

@keyframes fm-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fm-rise-soft {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, 0) scale(.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fm-title-in {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    filter: blur(10px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

@keyframes fm-sheen {
  0% {
    background-position: 210% 0;
  }

  55%,
  100% {
    background-position: -110% 0;
  }
}

@keyframes fm-cta-pulse {

  0%,
  100% {
    box-shadow: 0 12px 26px -12px rgba(17, 135, 206, .5), 0 0 0 0 rgba(30, 159, 224, .34);
  }

  50% {
    box-shadow: 0 16px 32px -12px rgba(17, 135, 206, .62), 0 0 0 9px rgba(30, 159, 224, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg::before,
  .hero::before,
  .hero-copy h1,
  .hero-search .search-tabs,
  .hero-panel::before,
  .hero-search .search-card,
  .hero-panel .trust-panel,
  .hero-panel .trust-row > div,
  .hero-search .search-form .search-button {
    animation: none !important;
  }
}

@keyframes fm-ticker {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-verified,
  .hv-track {
    animation: none !important;
  }

  .page-hero .crumbs,
  .page-hero .hero-copy h1,
  .page-hero .hero-copy > p {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dt-track {
    animation: none !important;
  }

  .lgc-aurora,
  .lgc-go,
  .lgc-track {
    animation: none !important;
  }
}

@keyframes fm-toc-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toc-list li {
    animation: none !important;
  }
}

/* Üst şerit (.top-bar::before): gradient durakları kayıtlı özel özellik olarak animasyonlanır,
   renkler yerinde kalır, sınırları birbirine doğru nefes alır. @property desteklemeyen
   tarayıcıda şerit sabit kalır. */
@property --tb-a {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 30%;
}

@property --tb-b {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 78%;
}

@keyframes tb-blend {
  0% {
    --tb-a: 14%;
    --tb-b: 90%;
  }

  50% {
    --tb-a: 46%;
    --tb-b: 60%;
  }

  100% {
    --tb-a: 20%;
    --tb-b: 94%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-bar::before {
    animation: none !important;
  }
}