/* ==========================================================================
   elvinaalmuradova.com — ana stil dosyası
   --------------------------------------------------------------------------
   Sıra:  1) Renk ve ölçü değişkenleri   2) Temel   3) Header
          4) Footer   5) Sözlük butonu   6) Sayfa iskeleti   7) 404

   RENK DEĞİŞTİRMEK İÇİN: sadece aşağıdaki (1) bölümüne dokunun.
   Tüm site oradaki değişkenlerden beslenir.
   ========================================================================== */


/* ==========================================================================
   1) DEĞİŞKENLER
   ========================================================================== */

:root {
  /* --- Marka renkleri --- */
  --brand:        #0E5F58;   /* koyu çam yeşili-teal — ana renk */
  --brand-hover:  #0A4A45;
  --brand-ink:    #0A4A45;   /* yazı üzerinde okunur ton */
  --brand-soft:   #E2EFEC;   /* açık zemin */
  --on-brand:     #FFFFFF;   /* marka rengi üzerindeki yazı */

  /* --- İkincil vurgu (az kullanılır: rozet, alıntı, uyarı) --- */
  --rose:         #B2617A;
  --rose-soft:    #F7E9ED;

  /* --- Yüzeyler ve yazı --- */
  --bg:           #FAFBFA;
  --surface:      #FFFFFF;
  --surface-2:    #F0F4F2;
  --ink:          #12201D;
  --ink-2:        #3D4F4B;
  /* Açık temada soluk yazı rengi. 4.5:1 kontrast eşiğini hem beyaz hem
     --surface-2 zemininde geçsin diye bir tık koyulaştırıldı (eskiden
     #6B7C78 idi; Lighthouse 20 öğede kontrast uyarısı veriyordu). */
  --muted:        #63726F;
  --line:         #DFE7E4;
  --line-strong:  #C7D5D0;

  /* --- Footer (her iki temada da koyu) --- */
  --footer-bg:    #0F2320;
  --footer-ink:   #DFEAE7;
  --footer-muted: #93A8A2;
  --footer-line:  #21403A;

  /* --- Gölgeler --- */
  --shadow-sm: 0 1px 2px rgba(18, 32, 29, .06);
  --shadow-md: 0 4px 16px rgba(18, 32, 29, .08);
  --shadow-lg: 0 12px 32px rgba(18, 32, 29, .12);

  /* Kanser Sözlüğü butonunun parıltı rengi (R G B) */
  --fab-glow: 14 95 88;

  /* Bilgi kartı tonları — Erken Tanı sayfasındaki risk kartları */
  --tone-danger:      #B03A38;
  --tone-danger-soft: #FBF1F0;
  --tone-info:        #2A5EA8;
  --tone-info-soft:   #EEF3FB;

  /* --- Tipografi --- */
  /* Başlıklar ve gövde metni aynı yazı tipini kullanıyor (Outfit).
     Başlıklara ayrı bir yazı tipi vermek isterseniz yalnızca bu
     satırı değiştirin; başlıkların tamamı buradan besleniyor. */
  --font-display: "Outfit", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-body:    "Outfit", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;

  /* --- Ölçüler --- */
  --shell:        1240px;   /* içerik genişliği */
  --gutter:       24px;     /* kenar boşluğu */
  --header-h:     76px;
  --radius:       10px;
  --radius-lg:    18px;
  --radius-pill:  999px;

  --step: 200ms cubic-bezier(.2, .7, .3, 1);

  color-scheme: light;
}

/* Koyu tema — sistem tercihi (kullanıcı açıkça 'light' seçmediyse) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand:        #5CBDB2;
    --brand-hover:  #7FD3C9;
    --brand-ink:    #7FD3C9;
    --brand-soft:   #12312E;
    --on-brand:     #08211E;

    --rose:         #E19BAE;
    --rose-soft:    #2C1B21;

    --bg:           #0D1614;
    --surface:      #14201D;
    --surface-2:    #1A2725;
    --ink:          #E7EFEC;
    --ink-2:        #B9C8C4;
    --muted:        #879994;
    --line:         #253430;
    --line-strong:  #354744;

    --footer-bg:    #0A1211;
    --footer-line:  #1E302C;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
    --fab-glow: 92 189 178;

    --tone-danger:      #EE9C97;
    --tone-danger-soft: #2E1A18;
    --tone-info:        #93B9EF;
    --tone-info-soft:   #16223A;

    color-scheme: dark;
  }
}

/* Koyu tema — kullanıcı butonla seçtiyse (sistem ne derse desin) */
:root[data-theme="dark"] {
  --brand:        #5CBDB2;
  --brand-hover:  #7FD3C9;
  --brand-ink:    #7FD3C9;
  --brand-soft:   #12312E;
  --on-brand:     #08211E;

  --rose:         #E19BAE;
  --rose-soft:    #2C1B21;

  --bg:           #0D1614;
  --surface:      #14201D;
  --surface-2:    #1A2725;
  --ink:          #E7EFEC;
  --ink-2:        #B9C8C4;
  --muted:        #879994;
  --line:         #253430;
  --line-strong:  #354744;

  --footer-bg:    #0A1211;
  --footer-line:  #1E302C;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
  --fab-glow: 92 189 178;

  --tone-danger:      #EE9C97;
  --tone-danger-soft: #2E1A18;
  --tone-info:        #93B9EF;
  --tone-info-soft:   #16223A;

  color-scheme: dark;
}

/* Geniş ekranlar: içerik şeridi (--shell) ortada küçük bir ada gibi
   kalmasın. Yalnızca genişlik değişiyor; renkler ve diğer ölçüler
   aynı kalıyor, bu yüzden tüm sayfalar birlikte ferahlıyor. */
@media (min-width: 1620px) {
  :root { --shell: 1480px; --gutter: 32px; }
}
@media (min-width: 2100px) {
  :root { --shell: 1680px; --gutter: 40px; }
}


/* ==========================================================================
   2) TEMEL
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

body.nav-open { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.012em;
  text-wrap: balance;
  margin: 0 0 .5em;
  color: var(--ink);
}

h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.15rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-hover); }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }

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

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  background: var(--brand);
  color: var(--on-brand);
  padding: 10px 18px;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  font-weight: 600;
  transition: top var(--step);
}
.skip-link:focus { top: 0; color: var(--on-brand); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}


/* ==========================================================================
   3) HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--step);
}
.site-header.is-stuck { box-shadow: var(--shadow-md); }

.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--header-h);
}

/* --- Logo --- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.brand-mark { display: block; width: 38px; height: 38px; color: var(--brand); flex: none; }

/* --- Logo dosyası konduğunda (assets/img/site/logo.svg) ---------------
   Logo yüksekliğe göre ölçeklenir, genişliği kendi oranından gelir.
   YÜKSEKLİĞİ DEĞİŞTİRMEK: aşağıdaki --logo-h değerini değiştirin. */
.brand--logo {
  --logo-h: 44px;
  gap: 0;
}
.brand-logo {
  display: block;
  height: var(--logo-h);
  width: auto;
  max-width: 260px;
  object-fit: contain;
}

/* Açık zemin / koyu zemin sürümleri.
   İki dosya da varsa site hangi zemindeyse ona uygun olanı gösterir;
   yalnızca logo.svg varsa o her yerde kullanılır. */
.brand-logo--on-dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header .brand-logo--on-light { display: none; }
  :root:not([data-theme="light"]) .site-header .brand-logo--on-dark  { display: block; }
}
:root[data-theme="dark"] .site-header .brand-logo--on-light { display: none; }
:root[data-theme="dark"] .site-header .brand-logo--on-dark  { display: block; }

/* Footer her iki temada da koyu — orada hep açık sürüm */
.brand--footer .brand-logo--on-light { display: none; }
.brand--footer .brand-logo--on-dark  { display: block; }
/* Koyu sürüm yoksa (tek dosya konmuşsa) normal logo görünsün */
.brand--footer .brand-logo--on-light:only-of-type { display: block; }

@media (max-width: 560px) {
  .brand--logo { --logo-h: 36px; }
  .brand-logo { max-width: 190px; }
}
.brand-mark svg { width: 100%; height: 100%; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.brand-text em {
  font-style: normal;
  font-size: .715rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* --- Menü --- */
.primary-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: block;
  padding: 8px 11px;
  border-radius: var(--radius);
  color: var(--ink-2);
  text-decoration: none;
  font-size: .905rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--step), background var(--step);
}
.nav-link:hover { color: var(--brand-ink); background: var(--surface-2); }
.nav-link.is-active { color: var(--brand-ink); font-weight: 600; }

/* --- Üst menüdeki açılır başlık ("Tedaviler") ---------------------------
   Masaüstünde fareyle üzerine gelince ya da klavyeyle odaklanınca açılır;
   JavaScript bunun için gerekli değil (bkz. main.js 2b bölümü: orası
   telefon, klavye ve Esc içindir). */
.nav-item, .nav-item--sub { display: block; }
.nav-item--sub { position: relative; }

.nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: .905rem;
  font-weight: 500;
}
.nav-sub-chevron {
  width: 15px; height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--step);
}

.sub-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 250px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--step), transform var(--step), visibility var(--step);
}

.sub-menu a {
  display: block;
  padding: 9px 11px;
  border-radius: 7px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: .89rem;
  font-weight: 500;
  white-space: nowrap;
}
.sub-menu a:hover { background: var(--surface-2); color: var(--brand-ink); }
.sub-menu a.is-active { color: var(--brand-ink); font-weight: 600; background: var(--brand-soft); }

@media (min-width: 1121px) {
  /* Açılma: fare, klavye odağı ya da JavaScript (is-open) */
  .nav-item--sub:hover > .sub-menu,
  .nav-item--sub:focus-within > .sub-menu,
  .nav-item--sub.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-item--sub:hover > .nav-sub-toggle .nav-sub-chevron,
  .nav-item--sub.is-open > .nav-sub-toggle .nav-sub-chevron { transform: rotate(180deg); }

  /* Başlık ile menü arasındaki boşlukta fare kaybolup menü kapanmasın */
  .nav-item--sub::after {
    content: "";
    position: absolute;
    top: 100%; left: 0; right: 0;
    height: 8px;
  }

  /* Menü sağ kenardan taşarsa sola doğru açılsın */
  .nav-list > .nav-item--sub:last-child > .sub-menu { left: auto; right: 0; }
}

.nav-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

/* --- İkon butonları --- */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-2);
  cursor: pointer;
  font: inherit;
  transition: color var(--step), border-color var(--step), background var(--step);
}
.icon-btn:hover { color: var(--brand-ink); border-color: var(--line-strong); background: var(--surface-2); }
.icon-btn svg {
  width: 19px; height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tema butonu: açık temada ay, koyu temada güneş görünür */
.theme-btn .ico-moon { display: block; }
.theme-btn .ico-sun  { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .ico-moon { display: none; }
  :root:not([data-theme="light"]) .theme-btn .ico-sun  { display: block; }
}
:root[data-theme="dark"] .theme-btn .ico-moon { display: none; }
:root[data-theme="dark"] .theme-btn .ico-sun  { display: block; }
:root[data-theme="light"] .theme-btn .ico-moon { display: block; }
:root[data-theme="light"] .theme-btn .ico-sun  { display: none; }

/* --- Dil seçici --- */
.lang-switch { position: relative; }
.lang-code { font-size: .78rem; font-weight: 700; letter-spacing: .04em; }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 172px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--step), transform var(--step), visibility var(--step);
}
.lang-switch.is-open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.lang-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: .89rem;
  font-weight: 500;
}
.lang-menu a:hover { background: var(--surface-2); color: var(--brand-ink); }
.lang-menu a.is-active { color: var(--brand-ink); font-weight: 600; background: var(--brand-soft); }
.lang-flag {
  font-size: 1.15rem;
  line-height: 1;
  flex: none;
  /* Emoji bayrakları için sistem font zinciri */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* --- Hamburger --- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle-bars { display: block; width: 20px; height: 14px; position: relative; }
.nav-toggle-bars i {
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--step), opacity var(--step);
}
.nav-toggle-bars i:nth-child(1) { top: 0; }
.nav-toggle-bars i:nth-child(2) { top: 6px; }
.nav-toggle-bars i:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(9, 20, 18, .5);
  backdrop-filter: blur(2px);
}

/* --- Mobil / tablet menü --- */
@media (max-width: 1120px) {
  .nav-toggle { display: inline-flex; }

  .primary-nav {
    position: fixed;
    top: 0; right: 0;
    z-index: 99;
    width: min(340px, 86vw);
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: calc(var(--header-h) + 16px) 22px 32px;
    background: var(--surface);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 260ms cubic-bezier(.2, .7, .3, 1), visibility 260ms;
  }
  .primary-nav.is-open { transform: translateX(0); visibility: visible; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-link { padding: 12px 12px; font-size: 1rem; }

  /* Telefonda açılır menü: başlık bir satır, alt maddeler onun altında
     girintili durur. JavaScript kapalıysa alt maddeler baştan görünür —
     sayfalara yine ulaşılır. */
  .nav-sub-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 12px 12px;
    border-radius: var(--radius);
    font-size: 1rem;
    text-align: left;
  }

  .sub-menu {
    position: static;
    min-width: 0;
    margin: 2px 0 6px;
    padding: 2px 0 2px 12px;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;

    /* VARSAYILAN: AÇIK. Kapatma işini JavaScript yapıyor — böylece
       JavaScript çalışmazsa alt sayfalara yine ulaşılır. */
    display: block;
  }

  /* main.js yüklendiğinde bu sınıfı ekliyor; ancak o zaman kapanır. */
  .nav-item--sub.nav-sub--js > .sub-menu { display: none; }
  .nav-item--sub.nav-sub--js.is-open > .sub-menu { display: block; }
  .nav-item--sub.is-open > .nav-sub-toggle .nav-sub-chevron { transform: rotate(180deg); }

  .sub-menu a { padding: 10px 12px; font-size: .95rem; white-space: normal; }

  .nav-tools {
    margin-top: 22px;
    padding-top: 20px;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
    justify-content: space-between;
  }
  /* Dil menüsü: mobil menüde dil düğmesi panelin SAĞ kenarında
     duruyor. Menü soldan açılınca ekranın dışına taşıyordu —
     sağ kenara yaslanıp sola doğru açılıyor. */
  .lang-menu { left: auto; right: 0; }
}

@media (max-width: 420px) {
  .brand-text strong { font-size: .95rem; }
  .brand-text em { font-size: .66rem; }
  .brand-mark { width: 34px; height: 34px; }
}


/* ==========================================================================
   4) FOOTER
   ========================================================================== */

.site-footer {
  margin-top: 96px;
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-line);
  color: var(--footer-ink);
  padding-block: 56px 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.15fr .8fr 1.25fr;
  gap: 40px;
  padding-bottom: 40px;
}
.footer-col--wide { min-width: 0; }

.brand--footer { color: var(--footer-ink); }
.brand--footer .brand-mark { color: var(--brand); }
.brand--footer .brand-text em { color: var(--footer-muted); }

.footer-about {
  margin: 20px 0 0;
  max-width: 40ch;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--footer-muted);
}

/* Hızlı Erişim iki sütunda — footer'ın gereksiz uzamasını engeller */
.footer-links.footer-links--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 26px;
}

.social-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.social-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--footer-line);
  border-radius: var(--radius);
  color: var(--footer-ink);
  transition: color var(--step), border-color var(--step), background var(--step);
}
.social-list a:hover { color: var(--brand); border-color: var(--brand); background: rgba(92, 189, 178, .08); }
.social-list svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

.footer-title {
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--footer-muted);
  margin: 0 0 18px;
}

.footer-links,
.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links a,
.footer-contact a {
  color: var(--footer-ink);
  text-decoration: none;
  font-size: .9rem;
  transition: color var(--step);
}
.footer-links a:hover,
.footer-contact a:hover { color: var(--brand); }

.footer-contact li { display: flex; flex-direction: column; gap: 2px; }
.fc-label {
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--footer-muted);
}
.footer-contact span:not(.fc-label) { font-size: .9rem; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 20px 26px;
  border-top: 1px solid var(--footer-line);
}
.copyright { margin: 0; font-size: .82rem; color: var(--footer-muted); }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-legal a { color: var(--footer-muted); text-decoration: none; font-size: .82rem; }
.footer-legal a:hover { color: var(--brand); }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .site-footer { margin-top: 64px; }
}


/* ==========================================================================
   5) KANSER SÖZLÜĞÜ BUTONU
   ========================================================================== */

.glossary-fab {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 90;

  display: inline-flex;
  align-items: center;
  gap: 0;

  height: 56px;
  padding: 0;
  max-width: 56px;

  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius-pill);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;

  /* Dikkat çeken parıltı: dışa doğru açılan halka */
  box-shadow: var(--shadow-lg), 0 0 0 0 rgb(var(--fab-glow) / .5);
  animation: fabRing 3.2s cubic-bezier(.25, .7, .35, 1) infinite;

  transition: max-width 280ms cubic-bezier(.2, .7, .3, 1),
              gap 280ms cubic-bezier(.2, .7, .3, 1),
              background var(--step);
}

/* Butonun üzerinden geçen ışık parıltısı */
.glossary-fab::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 42%;
  height: 100%;
  background: linear-gradient(100deg,
              transparent 0%,
              rgba(255, 255, 255, .38) 50%,
              transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: fabSheen 4.6s ease-in-out infinite;
}

@keyframes fabRing {
  0%   { box-shadow: var(--shadow-lg), 0 0 0 0    rgb(var(--fab-glow) / .5); }
  70%  { box-shadow: var(--shadow-lg), 0 0 0 15px rgb(var(--fab-glow) / 0); }
  100% { box-shadow: var(--shadow-lg), 0 0 0 0    rgb(var(--fab-glow) / 0); }
}

@keyframes fabSheen {
  0%, 58%   { left: -70%; }
  88%, 100% { left: 135%; }
}

/* Üzerine gelince parıltı durur — buton zaten açılıyor, dikkat çekmeye gerek yok */
.glossary-fab:hover,
.glossary-fab:focus-visible {
  animation: none;
  box-shadow: var(--shadow-lg), 0 0 0 4px rgb(var(--fab-glow) / .22);
}
.glossary-fab:hover::after,
.glossary-fab:focus-visible::after { animation: none; opacity: 0; }

/* Hareketi azalt tercihi açıksa: parıltı yok, sabit halka kalsın */
@media (prefers-reduced-motion: reduce) {
  .glossary-fab {
    animation: none;
    box-shadow: var(--shadow-lg), 0 0 0 4px rgb(var(--fab-glow) / .28);
  }
  .glossary-fab::after { display: none; }
}
.glossary-fab:hover,
.glossary-fab:focus-visible {
  max-width: 320px;
  gap: 2px;
  background: var(--brand-hover);
  color: var(--on-brand);
}

.gf-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  flex: none;
}
.gf-icon svg {
  width: 23px; height: 23px;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.gf-label {
  white-space: nowrap;
  padding-right: 22px;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: -.005em;
  opacity: 0;
  transition: opacity 180ms ease 80ms;
}
.glossary-fab:hover .gf-label,
.glossary-fab:focus-visible .gf-label { opacity: 1; }

/* Dokunmatik cihazlarda hover yok — ikon olarak kalır, dokununca sayfaya gider */
@media (hover: none) {
  .glossary-fab { left: 16px; bottom: 16px; }
  .gf-label { display: none; }
}


/* ==========================================================================
   6) SAYFA İSKELETİ  (Faz 2 ve 4'te doldurulacak)
   ========================================================================== */

.page-head {
  padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--line);
}
.page-head h1 { margin-bottom: .35em; }
.page-lead {
  max-width: 62ch;
  font-size: 1.06rem;
  color: var(--ink-2);
  margin: 0;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  font-size: .8rem;
  color: var(--muted);
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-ink); }
.breadcrumb li + li::before { content: "/"; margin-right: 10px; color: var(--line-strong); }

.section { padding-block: clamp(44px, 6vw, 80px); }

/* Faz 1 yer tutucusu — sayfa içerikleri yazılınca silinecek */
.placeholder {
  margin-block: clamp(40px, 6vw, 72px);
  padding: 40px 28px;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--muted);
}
.placeholder strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.placeholder code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem;
  background: var(--surface-2);
  padding: 2px 7px;
  border-radius: 4px;
  color: var(--brand-ink);
}

/* Butonlar */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: .93rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--step), color var(--step), border-color var(--step);
}
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand-hover); color: var(--on-brand); }
.btn--ghost { background: transparent; color: var(--brand-ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--brand); color: var(--brand-ink); }


/* ==========================================================================
   7) 404
   ========================================================================== */

.error-page {
  padding-block: clamp(56px, 9vw, 120px);
  text-align: center;
}
.error-code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 8rem);
  line-height: 1;
  color: var(--brand-soft);
  margin: 0 0 -.15em;
  user-select: none;
}
:root[data-theme="dark"] .error-code,
:root:not([data-theme="light"]) .error-code { color: var(--brand-soft); }

.error-page h1 { margin-top: 0; }
.error-page p { max-width: 52ch; margin-inline: auto; color: var(--ink-2); }

.error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.error-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}
.error-links a {
  display: inline-block;
  padding: 8px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  text-decoration: none;
  font-size: .87rem;
  transition: border-color var(--step), color var(--step);
}
.error-links a:hover { border-color: var(--brand); color: var(--brand-ink); }


/* ==========================================================================
   8) ANASAYFA BÖLÜMLERİ
   ========================================================================== */

/* --- Bölüm başlığı (solda başlık+açıklama, sağda bağlantı) --------------- */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 28px;
  margin-bottom: clamp(24px, 3.5vw, 40px);
}
.section-head-text { max-width: 60ch; }

/* Ortalı biçim — başlık tek başına, bağlantı bölümün altına gider */
.section-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 44px);
}
/* Outfit serif'ten geniş; 30ch'de başlıklar dört satıra bölünüyordu. */
.section-head--center .section-head-text { max-width: 40ch; }

.section-link-row {
  display: flex;
  justify-content: center;
  margin-top: clamp(22px, 3vw, 32px);
}
.section-head h2 { margin: 0 0 .3em; }
.section-head h2:only-child { margin-bottom: 0; }
.section-desc { margin: 0; color: var(--ink-2); font-size: 1.01rem; }

.section-title-link { color: inherit; text-decoration: none; }
.section-title-link:hover { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 5px; }

.section-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 9px 4px;
  color: var(--brand-ink);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;
}
.section-link svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--step);
}
.section-link:hover svg { transform: translateX(3px); }

/* Bölüm altındaki bağlantı düğme olarak gösterildiğinde
   (partial('section-link', ['button' => true])).
   Görünümü konu kartlarındaki "Devamını oku" düğmesiyle aynı:
   yatay degrade, yumuşak köşe, altında kendi renginden hale. */
.section-link-row .btn {
  white-space: nowrap;
  padding: 14px 32px;
  border-radius: 10px;
  border: 0;
  font-size: .92rem;
  font-weight: 700;
  color: #FFFFFF;
  background: linear-gradient(90deg, #22A294 0%, #12776D 48%, #0B4A44 100%);
  box-shadow: 0 6px 18px -7px rgba(16, 120, 110, .75);
  transition: filter var(--step), box-shadow var(--step);
}
.section-link-row .btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 9px 24px -7px rgba(16, 120, 110, .9);
  color: #FFFFFF;
}
.section-link-row .btn svg {
  width: 17px; height: 17px;
  flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--step);
}
.section-link-row .btn:hover svg { transform: translateX(3px); }

/* --- 1) Hero ------------------------------------------------------------ */
/* Hero her iki temada da KOYU kalır. Renkleri tokenlerden değil, kendi
   değişkenlerinden alır — böylece tema değişince kontrast bozulmaz. */
.hero {
  --hero-ink:    #EDF6F3;
  --hero-ink-2:  #B7D3CC;
  --hero-accent: #7FD9CD;
  --hero-line:   rgba(190, 232, 224, .22);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--hero-ink);
  background:
    radial-gradient(120% 90% at 82% 8%,  rgba(94, 200, 186, .28) 0%, transparent 58%),
    radial-gradient(90%  80% at 10% 95%, rgba(11,  84,  78, .55) 0%, transparent 60%),
    linear-gradient(135deg, #0B403B 0%, #0E5F58 46%, #072B28 100%);
  /* Alt dolgu yok: fotoğraf bölümün tabanına oturuyor. */
  padding-block: clamp(44px, 6vw, 84px) 0;
}

/* Masaüstünde hero tam ekran: sayfa açıldığında ekranın tamamını
   kaplıyor, altındaki bölüm ancak kaydırınca görünüyor.
   100svh = tarayıcı çubukları dahil "küçük" görünür yükseklik;
   header sabit durduğu için onun yüksekliği çıkarılıyor.
   Telefonda tam ekran YAPILMIYOR — orada ekran zaten dar, hero'yu
   ekran boyuna zorlamak içeriği gereksiz aşağı itiyor. */
@media (min-width: 1101px) {
  .hero--full {
    display: flex;
    align-items: flex-end;
    min-height: calc(100svh - var(--header-h));
  }
  .hero--full .hero-grid { width: 100%; }
  /* Ortadaki (fotoğraf) sütununa en büyük pay veriliyor. Sağdaki
     sütun piksel cinsinden en az 236px: dört ikon her ekranda tek
     sırada kalsın diye. */
  .hero--full .hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.45fr) minmax(216px, .56fr);
    gap: clamp(24px, 2vw, 40px);
  }
  .hero--full .hero-social { flex-wrap: nowrap; gap: 10px; }
  .hero--full .hero-social a { width: 46px; height: 46px; }
  .hero--full .hero-social svg { width: 20px; height: 20px; }
  /* Başlık sütuna sığsın: Outfit serif'ten geniş, aynı punto üç
     satıra bölüyordu. */
  .hero--full .hero-text h1 { font-size: clamp(2rem, 3.4vw, 3rem); }
  /* Fotoğraf hem sütun genişliğine hem ekran yüksekliğine göre
     büyür; hangisi önce dolarsa orada durur. */
  .hero--full .hero-media img {
    max-width: 860px;
    max-height: calc(100svh - var(--header-h) - 16px);
  }
}

/* Büyük ekranlarda hero'daki yazılar da büyüsün — fotoğraf
   büyürken metin aynı kalınca orantısız duruyordu. */
@media (min-width: 1500px) {
  .hero--full .hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.45fr) minmax(252px, .56fr);
  }
  .hero--full .hero-social { gap: 12px; }
  .hero--full .hero-social a { width: 54px; height: 54px; }
  .hero--full .hero-social svg { width: 23px; height: 23px; }

  .hero--full .hero-eyebrow {
    font-size: .86rem;
    letter-spacing: .16em;
    margin-bottom: 18px;
  }
  .hero--full .hero-text h1 { font-size: clamp(2.9rem, 2.3vw, 3.7rem); }
  .hero--full .hero-lead {
    font-size: clamp(1.08rem, .95vw, 1.3rem);
    max-width: 42ch;
  }
}

/* İnce doku — düz bir renk yerine derinlik hissi */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--hero-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-line) 1px, transparent 1px);
  background-size: 68px 68px;
  opacity: .16;
  mask-image: radial-gradient(120% 80% at 70% 0%, #000 0%, transparent 70%);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, .66fr);
  align-items: end;
  gap: clamp(20px, 3vw, 44px);
  position: relative;
  z-index: 1;
}
.hero-text { padding-bottom: clamp(40px, 6vw, 80px); }

/* Arka plandaki dev filigran yazı. Okunacak bir metin değil, dokusal
   bir katman; kenarlardan taşması normal. */
.hero-watermark {
  position: absolute;
  top: clamp(10px, 4vw, 54px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(5rem, 17vw, 19rem);
  line-height: .82;
  letter-spacing: -.02em;
  color: rgba(237, 246, 243, .055);
  user-select: none;
}

.hero-eyebrow {
  margin: 0 0 14px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hero-accent);
}
.hero-text h1 { margin: 0 0 .38em; color: var(--hero-ink); }
.hero-lead {
  max-width: 52ch;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  color: var(--hero-ink-2);
  margin: 0;
}

/* --- Sağdaki sütun: sosyal hesaplar (yalnızca ikon, yan yana) --- */
.hero-social-col { padding-bottom: clamp(40px, 6vw, 80px); }
.hero-social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border: 1px solid var(--hero-line);
  border-radius: 50%;
  color: var(--hero-ink);
  background: rgba(255, 255, 255, .06);
  text-decoration: none;
  transition: background var(--step), border-color var(--step),
              color var(--step), transform var(--step);
}
.hero-social a:hover,
.hero-social a:focus-visible {
  background: var(--hero-accent);
  border-color: var(--hero-accent);
  color: #06302C;
  transform: translateY(-2px);
}
.hero-social svg {
  width: 22px; height: 22px;
  flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* Fotoğrafın arka planı silinmiş; çerçeve/kutu YOK, doğrudan
   gradientin üstünde duruyor ve bölümün tabanına oturuyor. */
.hero-media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.hero-media img {
  display: block;
  width: 100%;
  max-width: 470px;
  height: auto;
  /* Gölge (drop-shadow) BİLEREK YOK — Hakkımda portresinde olduğu
     gibi burada da fotoğrafın saydam siluetini takip edip figürün
     çevresinde ince koyu bir çizgi bırakıyordu. */
  /* Fotoğraf bel hizasından kesiliyor; alt kenar sert bir çizgi olarak
     görünmesin diye zemine doğru yumuşatılıyor. */
  mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}
.hero-media::after { content: none; }

/* --- Hero giriş animasyonu ---------------------------------------------
   Metin ve fotoğraf yavaşça beliriyor (dissolve); fotoğraf aynı anda
   hafifçe aşağıdan yukarı kayıyor. Sadece CSS — JS gerekmiyor, bu yüzden
   JS kapalıyken de içerik normal görünür. Sıralama ufak gecikmelerle
   (delay) veriliyor: önce üst yazı, sonra başlık, sonra açıklama. */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(46px); }
  to   { opacity: 1; transform: none; }
}

.hero-eyebrow,
.hero-text h1,
.hero-lead,
.hero--about .breadcrumb,
.hero--about .page-lead,
.hero-social-col,
.hero-media img {
  animation: heroFadeUp .9s cubic-bezier(.22, .68, .3, 1) both;
}
.hero--about .breadcrumb { animation-delay: 0s; }
.hero-eyebrow    { animation-delay: .05s; }
.hero-text h1    { animation-delay: .18s; }
.hero-lead,
.hero--about .page-lead { animation-delay: .31s; }
.hero-social-col { animation-delay: .62s; }
/* Fotoğraf hem beliriyor hem biraz daha uzun bir yoldan yukarı kayıyor */
.hero-media img  { animation: heroRise 1.25s cubic-bezier(.22, .68, .3, 1) .12s both; }

.hero-watermark {
  animation: heroWatermark 1.6s ease-out .1s both;
}
@keyframes heroWatermark {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Hareket hassasiyeti olan kullanıcılar için animasyon tamamen kapalı */
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow,
  .hero-text h1,
  .hero-lead,
  .hero--about .breadcrumb,
  .hero--about .page-lead,
  .hero-social-col,
  .hero-media img,
  .hero-watermark {
    animation: none;
  }
}

/* --- Kaydırınca beliren bölümler ---------------------------------------
   İşaretli bölüm (data-reveal) ekrana girerken başlığı ve kartları
   sırayla belirir. JavaScript (main.js) bölüm görününce .is-visible
   ekliyor; o ana kadar gizli tutabilmek için önce sayfaya .has-js
   sınıfı veriliyor. JavaScript kapalıysa .has-js hiç eklenmez ve
   aşağıdaki kurallar devreye girmez — içerik baştan görünür kalır. */
.has-js [data-reveal] .section-head,
.has-js [data-reveal] .shorts-card,
.has-js [data-reveal] .topic-card,
.has-js [data-reveal] .section-link-row {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.22, .68, .3, 1),
              transform .7s cubic-bezier(.22, .68, .3, 1);
}
.has-js [data-reveal].is-visible .section-head,
.has-js [data-reveal].is-visible .shorts-card,
.has-js [data-reveal].is-visible .topic-card,
.has-js [data-reveal].is-visible .section-link-row {
  opacity: 1;
  transform: none;
}
/* Kartlar aynı anda değil, soldan sağa kısa gecikmelerle gelsin */
.has-js [data-reveal].is-visible .shorts-card:nth-child(2),
.has-js [data-reveal].is-visible .topic-card:nth-child(2)  { transition-delay: .09s; }
.has-js [data-reveal].is-visible .shorts-card:nth-child(3),
.has-js [data-reveal].is-visible .topic-card:nth-child(3)  { transition-delay: .18s; }
.has-js [data-reveal].is-visible .topic-card:nth-child(4)  { transition-delay: .27s; }
.has-js [data-reveal].is-visible .topic-card:nth-child(5)  { transition-delay: .36s; }
.has-js [data-reveal].is-visible .topic-card:nth-child(6)  { transition-delay: .45s; }
.has-js [data-reveal].is-visible .section-link-row         { transition-delay: .5s; }

/* Hareket hassasiyeti: efekt yok, her şey baştan görünür */
@media (prefers-reduced-motion: reduce) {
  .has-js [data-reveal] .section-head,
  .has-js [data-reveal] .shorts-card,
  .has-js [data-reveal] .topic-card,
  .has-js [data-reveal] .section-link-row {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- 2) Video blog ------------------------------------------------------ */
/* .video-grid / .video-card kuralları kaldırıldı: anasayfadaki
   videolar artık dikey Shorts kartlarını (.shorts-grid) kullanıyor. */


/* --- 3) Konu kartları --------------------------------------------------- */
/* Fotoğraf kartın tamamını kaplıyor; yazı fotoğrafın üstünde, altta.
   İki sıra var:
     .topic-row--grow   üstteki dört kart — birine gelince o genişler,
                        aynı sıradaki diğerleri daralır
     .topic-row--still  alttaki iki geniş kart — genişleme yok,
                        sadece kenar parıltısı
   Telefonda ikisi de parmakla kaydırılan yatay şeride dönüşüyor. */

.topic-row {
  display: flex;
  gap: clamp(14px, 1.6vw, 22px);
}
.topic-scroller + .topic-scroller { margin-top: clamp(14px, 1.6vw, 22px); }

/* İleri/geri okları — yalnızca dar ekranda görünür (aşağıdaki
   900px kuralında açılıyor). */
.topic-nav { display: none; }

.topic-row--grow  { height: clamp(380px, 33vw, 520px); }
.topic-row--still { height: clamp(320px, 24vw, 400px); }

.topic-card {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #0B2F2B;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--brand) 16%, transparent),
    0 10px 30px -14px color-mix(in srgb, var(--brand) 42%, transparent);
  /* Genişleme/daralma bilerek yavaş ve yumuşak: sert bir "pat" yerine
     süzülerek yerleşsin diye uzun süre + sona doğru iyice yavaşlayan
     eğri (expo-out). Kartlar arasında hızlı gezinirken de takılma
     hissi vermiyor. */
  transition: flex-grow .72s cubic-bezier(.16, 1, .3, 1),
              box-shadow .5s cubic-bezier(.16, 1, .3, 1);
}

/* Fotoğrafı henüz konmamış kart: boş görünmesin diye kartın kendi
   renginden üretilmiş yumuşak bir zemin. Dosya konduğu anda bu kural
   kendiliğinden devre dışı kalır (bkz. views/partials/topic-card.php). */
.topic-card--noimg {
  background:
    radial-gradient(120% 90% at 78% 8%,
      color-mix(in srgb, var(--card-accent) 42%, transparent) 0%,
      transparent 62%),
    linear-gradient(165deg,
      color-mix(in srgb, var(--card-accent) 16%, #0B2F2B) 0%,
      #0B2F2B 72%);
}

/* DİKKAT — bu kural silinmemeli.
   "Kaydırınca beliren bölümler" (data-reveal) kuralı da .topic-card
   üzerinde transition tanımlıyor ve seçicisi daha güçlü olduğu için
   yukarıdaki satırı tamamen eziyordu: kartlar genişlerken hiç
   yumuşama olmuyor, birden zıplıyorlardı. Burada dört geçiş tek
   listede toplanıyor — beliriş de, genişleme de çalışsın diye. */
.has-js [data-reveal] .topic-card {
  transition: opacity .7s cubic-bezier(.22, .68, .3, 1),
              transform .7s cubic-bezier(.22, .68, .3, 1),
              flex-grow .72s cubic-bezier(.16, 1, .3, 1),
              box-shadow .5s cubic-bezier(.16, 1, .3, 1);
}

/* ÜST SIRA — fare sıranın üstündeyken: tüm kartlar daralır,
   fareyle üzerine gelinen kart genişler. */
.topic-row--grow:hover .topic-card        { flex-grow: .82; }
.topic-row--grow .topic-card:hover,
.topic-row--grow .topic-card:focus-within { flex-grow: 1.72; }

/* Kenar parıltısı — her iki sırada da var */
.topic-card:hover,
.topic-card:focus-within {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--card-accent) 65%, transparent),
    0 0 0 5px color-mix(in srgb, var(--card-accent) 16%, transparent),
    0 18px 44px -16px color-mix(in srgb, var(--card-accent) 60%, transparent),
    0 0 34px -4px color-mix(in srgb, var(--card-accent) 34%, transparent);
}

.topic-card-link {
  display: block;
  position: absolute;
  inset: 0;
  text-decoration: none;
  color: #FFFFFF;
}
.topic-card-link:focus-visible { outline: 2px solid var(--card-accent); outline-offset: -4px; }

.topic-card-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}
.topic-card:hover .topic-card-img { transform: scale(1.06); }

/* Fotoğrafın üstündeki perde: yazının her fotoğrafta okunur kalması
   için. Üstte hafif, altta koyu. */
.topic-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
              rgba(6, 30, 27, .30)  0%,
              rgba(6, 30, 27, .05) 32%,
              rgba(6, 30, 27, .62) 68%,
              rgba(6, 30, 27, .88) 100%);
  pointer-events: none;
}

/* Sol üstteki renk noktası */
.topic-card-dot {
  position: absolute;
  top: 18px; left: 18px;
  z-index: 2;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(3px);
  display: flex;
}
.topic-card-dot::after {
  content: "";
  margin: auto;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--card-accent);
}

.topic-card-body {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(20px, 2vw, 28px);
}
.topic-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #FFFFFF;
  text-wrap: balance;
}
.topic-card-desc {
  font-size: .9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}
/* "Devamını oku" — düğme değil, okla biten bir satır */
.topic-card-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  font-size: .9rem;
  font-weight: 600;
  color: #FFFFFF;
}
.topic-card-more svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--step);
}
.topic-card:hover .topic-card-more svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .topic-card,
  .topic-card-img,
  .topic-card-more svg { transition: none; }
  .topic-row--grow:hover .topic-card,
  .topic-row--grow .topic-card:hover { flex-grow: 1; }
  .topic-card:hover .topic-card-img { transform: none; }
}

/* --- 4) İkinci görüş + hazırlık listesi ---------------------------------- */
/* Hero ile aynı koyu yeşil aile; renkler tokenlerden değil kendi
   değişkenlerinden geliyor, böylece açık/koyu temada aynı kalıyor. */
.second-opinion {
  --so-ink:    #EDF6F3;
  --so-ink-2:  #B7D3CC;
  --so-muted:  #90B3AC;
  --so-line:   rgba(190, 232, 224, .20);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--so-ink);
  background:
    radial-gradient(110% 80% at 88% 4%,  rgba(94, 200, 186, .26) 0%, transparent 58%),
    radial-gradient(90%  85% at 6%  96%, rgba(11,  84,  78, .55) 0%, transparent 62%),
    linear-gradient(135deg, #0B403B 0%, #0E5F58 46%, #072B28 100%);
}

.so-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
}

/* Küçük üst etiket ve altındaki kısa çizgi */
.so-eyebrow {
  margin: 0 0 18px;
  padding-bottom: 14px;
  position: relative;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--so-ink-2);
}
.so-eyebrow::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 42px; height: 2px;
  background: var(--so-ink-2);
  opacity: .7;
}

.so-intro h2 {
  margin: 0 0 22px;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: #FFFFFF;
}
.so-lead {
  margin: 0 0 30px;
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--so-ink-2);
}

/* Açık yeşil düğme — koyu zeminde en okunaklı duran biçim */
.so-btn {
  gap: 14px;
  padding: 15px 26px;
  border-radius: 10px;
  background: #CDEBD9;
  color: #0A3A34;
  font-weight: 700;
  font-size: .96rem;
}
.so-btn:hover { background: #FFFFFF; color: #072B28; }
.so-btn svg {
  width: 18px; height: 18px;
  flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--step);
}
.so-btn:hover svg { transform: translateX(4px); }

/* Sağdaki hazırlık kartı */
.so-card {
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--so-line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .035);
}

.so-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.so-list li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  align-items: start;
  padding: 15px 0;
  border-top: 1px solid var(--so-line);
}
.so-list li:first-child { border-top: 0; padding-top: 0; }

.so-num {
  font-size: .95rem;
  font-weight: 600;
  color: var(--so-muted);
  font-variant-numeric: tabular-nums;
}
.so-text {
  font-size: .97rem;
  line-height: 1.6;
  color: var(--so-ink);
}

.so-note {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--so-line);
  font-size: .9rem;
  line-height: 1.7;
  color: var(--so-muted);
}

/* Hazırlık kartı <details> olduğu için başlık bir <summary>.
   Masaüstünde her zaman açık ve sıradan bir başlık gibi görünür:
   ok işareti ve tıklama imleci yok. */
.so-card > summary {
  list-style: none;
  cursor: default;
}
.so-card > summary::-webkit-details-marker { display: none; }
.so-card > summary::marker { content: ""; }

@media (max-width: 900px) {
  .so-grid { grid-template-columns: 1fr; }
  .so-btn { width: 100%; justify-content: center; }

  /* Telefonda açılır-kapanır: başlık düğme gibi, sağında ok */
  .so-card { padding-block: 0; }
  .so-card > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    margin: 0;
    padding: 20px 0;
    padding-bottom: 20px;
    -webkit-tap-highlight-color: transparent;
  }
  /* .so-eyebrow'un altındaki kısa çizgi yerine açılır-kapanır oku.
     (Aynı ::after olduğu için konum ve zemin sıfırlanıyor.) */
  .so-card > summary::after {
    content: "";
    position: static;
    flex: none;
    width: 11px; height: 11px;
    background: none;
    opacity: 1;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform var(--step);
  }
  .so-card[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
  .so-card[open] > summary { border-bottom: 1px solid var(--so-line); }
  .so-card[open] .so-list { padding-top: 6px; }
  .so-card[open] { padding-bottom: 22px; }
}
@media (max-width: 560px) {
  .so-list li { grid-template-columns: 36px 1fr; }
}

.contact-form { display: flex; flex-direction: column; gap: 14px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .01em;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color var(--step), box-shadow var(--step);
}
.field textarea { resize: vertical; min-height: 120px; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); opacity: 1; }

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--rose); }

.field-error {
  font-size: .8rem;
  color: var(--rose);
  min-height: 0;
}
.field-error:empty { display: none; }

.phone-group { display: grid; grid-template-columns: minmax(112px, 34%) 1fr; gap: 10px; }
.phone-code {
  font-size: .9rem !important;
  padding-inline: 10px !important;
}

.field--check { gap: 8px; }
.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: .85rem;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.5;
  cursor: pointer;
}
.check input[type="checkbox"] {
  width: 17px; height: 17px;
  margin: 3px 0 0;
  accent-color: var(--brand);
  cursor: pointer;
}

/* Bot tuzağı — ekranda görünmez ama ekran okuyucudan da gizli değil */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Alt satır: solda hCaptcha (varsa), sağda gönder düğmesi.
   hCaptcha kapalıyken kutu hiç basılmıyor; flex-end sayesinde
   düğme yine sağda kalıyor, boşluk oluşmuyor. */
.form-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 4px;
}
.captcha-slot { min-width: 0; margin-right: auto; }
.captcha-missing {
  margin: 0;
  font-size: .78rem;
  color: var(--muted);
  max-width: 34ch;
}
.captcha-missing code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95em;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1px 5px;
  border-radius: 4px;
}
.form-submit svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.form-status { margin: 0; font-size: .9rem; }
.form-status:empty { display: none; }
.form-status.is-ok  { color: var(--brand-ink); }
.form-status.is-err { color: var(--rose); }

/* --- 5) ve 6) Erken Tanı / Sağlıklı Yaşam -------------------------------- */

/* Blog ile Hasta yorumları arka arkaya geliyor; aynı zeminde
   oldukları için nerede birinin bitip diğerinin başladığı
   anlaşılmıyordu. Yorumlar bölümüne ayrı zemin verildi. */
.section--reviews { background: var(--surface-2); }

/* --- 7) Blog ------------------------------------------------------------ */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
}

.post-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--step), box-shadow var(--step), transform var(--step);
}
.post-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.post-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.post-card-media { display: block; aspect-ratio: 16 / 10; background: var(--surface-2); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 24px; }
.post-card-date {
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.post-card-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
}
.post-card-excerpt { font-size: .88rem; color: var(--ink-2); line-height: 1.55; }

.empty-note {
  padding: 32px;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}

/* --- Anasayfa: duyarlı düzen -------------------------------------------- */
@media (max-width: 1100px) {
  /* Üç sütun sığmıyor: metin ve sosyal hesaplar solda alt alta,
     fotoğraf sağda tek sütunda kalıyor. */
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    gap: clamp(20px, 3vw, 36px);
  }
  .hero-text       { grid-column: 1; padding-bottom: 20px; }
  .hero-social-col { grid-column: 1; padding-bottom: clamp(36px, 5vw, 64px); }
  .hero-media      { grid-column: 2; grid-row: 1 / span 2; }
  /* Tek sütunda alt alta değil, yan yana daha derli toplu duruyor */
  .hero-social { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 780px) {
  /* Telefon: fotoğraf en üstte, altında metin ve sosyal hesaplar.
     Fotoğraf yine bölümün tabanına değil, metnin üstüne oturuyor. */
  .hero-grid { grid-template-columns: 1fr; gap: 10px; }
  .hero-media { grid-column: 1; grid-row: 1; }
  .hero-media img {
    max-width: 320px;
    mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  }
  .hero-text       { grid-column: 1; grid-row: 2; padding-bottom: 0; }
  .hero-social-col { grid-column: 1; grid-row: 3; padding-bottom: clamp(36px, 8vw, 56px); }
  .hero-social-col { margin-top: 26px; }
  .hero-watermark { font-size: clamp(3.4rem, 22vw, 7rem); top: 6px; }
}

@media (max-width: 420px) {
  .hero-social a { width: 48px; height: 48px; }
  .hero-social { gap: 10px; }
}

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

/* Konu kartları: tablet ve telefonda alt alta dizilmek yerine
   parmakla kaydırılan yatay şeride dönüşüyor (hasta yorumlarındaki
   gibi). Üstteki dört ve alttaki iki kart ayrı ayrı kayar.
   Büyüme/daralma burada kapalı — dokunmatikte "üzerine gelme" yok. */
@media (max-width: 900px) {
  .topic-row {
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 4px;
  }
  .topic-row::-webkit-scrollbar { display: none; }

  /* Kartlar bilerek geniş: ekranın neredeyse tamamını kaplasın,
     yanındaki kartın yalnızca bir ucu görünsün. Hem kart büyük ve
     okunur oluyor hem de "yanda devamı var" hissi kalıyor. */
  .topic-card {
    flex: 0 0 88%;
    max-width: 420px;
    scroll-snap-align: center;
    aspect-ratio: 3 / 4;
  }
  /* Geniş kartlar telefonda da kare: 4/3'te yazı sığmıyor,
     başlık fotoğrafın üstüne biniyordu. */
  .topic-card--wide { aspect-ratio: 1 / 1; max-width: 460px; }

  /* Dokunmatikte genişleme yok */
  .topic-row--grow:hover .topic-card,
  .topic-row--grow .topic-card:hover,
  .topic-row--grow .topic-card:focus-within { flex-grow: 0; }

  /* Son kartın sağında nefes payı */
  .topic-row::after { content: ""; flex: 0 0 1px; }

  /* --- İleri/geri okları ---
     Şeridin kaydırılabildiği belli olsun ve iki sıra birbirinden
     ayrılsın diye. Üstlerindeki ince çizgi ayırıcı görevi görüyor. */
  .topic-nav {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }
  .topic-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px; height: 50px;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--brand-ink);
    cursor: pointer;
    transition: background var(--step), border-color var(--step), opacity var(--step);
  }
  .topic-nav-btn:hover { background: var(--surface-2); border-color: var(--brand); }
  .topic-nav-btn svg {
    width: 21px; height: 21px;
    fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  }
  /* Şeridin başındayken sol ok, sonundayken sağ ok soluyor */
  .topic-nav-btn[disabled] {
    opacity: .35;
    cursor: default;
    pointer-events: none;
  }
}

/* JavaScript kapalıysa oklar çalışmaz — gösterilmiyor. Şerit
   parmakla yine kaydırılıyor. */
html:not(.has-js) .topic-nav { display: none; }

@media (max-width: 660px) {
  .post-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .phone-group { grid-template-columns: 1fr; }
  .form-bottom { flex-direction: column; align-items: stretch; }
  .form-submit { justify-content: center; }
}


/* ==========================================================================
   9) TIBBİ UYARI BANDI  (footer'ın hemen üstünde, her sayfada)
   ========================================================================== */

.medical-notice {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  /* Üstte ayrıca boşluk YOK: son bölümün kendi alt dolgusu (80px'e
     kadar) zaten yetiyordu, buraya bir de margin eklenince sayfanın
     dibinde boş bir şerit kalıyordu. Ayrımı üstteki çizgi sağlıyor. */
}
.site-footer { margin-top: 0; }

.medical-notice-inner {
  display: flex;
  /* Metin üç satıra çıktı; ikon dikeyde ortalanınca ortada asılı
     kalıyordu, ilk satıra hizalandı. */
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding-block: 18px;
  text-align: center;
}
.medical-notice-inner .mn-icon { margin-top: 2px; }
.medical-notice p { max-width: 86ch; }
.mn-icon { flex: none; color: var(--brand); display: flex; }
.mn-icon svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.medical-notice p {
  margin: 0;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 78ch;
}

@media (max-width: 560px) {
  /* Telefonda ikon metnin ÜSTÜNE geçiyor. align-items üstteki
     kuralda flex-start; sütun düzeninde bu yatay eksene geçtiği
     için ikon sola yapışıyordu — burada ortalanıyor. */
  .medical-notice-inner {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .medical-notice-inner .mn-icon { margin-top: 0; }
}


/* ==========================================================================
   10) HAKKIMDA SAYFASI
   ========================================================================== */

/* Hakkımda hero'su anasayfadakinin aynısı (.hero sınıfını paylaşır):
   koyu yeşil zemin, filigran, zemini silinmiş portre, aynı animasyon.
   Tek farkı ekranı kaplamaması — bu sayfada asıl içerik aşağıda. */
.hero--about { padding-block: clamp(36px, 5vw, 64px) 0; }

.about-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(32px, 5vw, 60px);
  align-items: end;
  position: relative;
  z-index: 1;
}
.about-eyebrow { margin-top: 4px; }
.about-head-text { padding-bottom: clamp(32px, 4.5vw, 60px); }
.about-head-text h1 { margin: 0 0 .35em; color: var(--hero-ink); }
/* Koyu zeminde okunur renkler */
.hero--about .page-lead { color: var(--hero-ink-2); max-width: 54ch; }
.hero--about .breadcrumb { color: rgba(190, 232, 224, .7); }
.hero--about .breadcrumb a { color: rgba(190, 232, 224, .7); }
.hero--about .breadcrumb a:hover { color: var(--hero-accent); }
.hero--about .breadcrumb li + li::before { color: rgba(190, 232, 224, .4); }
.hero--about .hero-social-col { margin-top: 28px; padding-bottom: 0; }

.about-portrait {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
/* Kaynak fotoğraf sol kenarından ve altından kesik geliyordu; o
   kenarlarda ekranda düz bir çizgi oluşuyordu. Yumuşatma artık
   görselin kendi saydamlığında (assets/img/hakkimda-doktor.webp),
   bu yüzden burada ayrıca maske YOK — iki kez solmasın. */
/* Gölge (drop-shadow) BİLEREK YOK: fotoğrafın saydam siluetini
   takip ettiği için koyu yeşil zeminde figürün çevresinde ince,
   koyu bir çizgi/hale bırakıyordu — fotoğraf kesilmiş gibi
   görünüyordu. Zemin zaten koyu, gölgeye de gerek yok. */
.about-portrait img {
  width: 100%;
  max-width: 360px;
  height: auto;
}

/* Profil rozetleri (LinkedIn, ResearchGate) */
.profile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
.profile-chips a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 13px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  text-decoration: none;
  font-size: .87rem;
  font-weight: 600;
  transition: border-color var(--step), color var(--step);
}
.profile-chips a:hover { border-color: var(--brand); color: var(--brand-ink); }
.profile-chips svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* Biyografi — sayfanın geri kalanıyla aynı hizada, okunabilir satır boyu */
.prose-block h2 { margin-bottom: .6em; }
.prose-block p {
  margin: 0 0 1em;
  color: var(--ink-2);
  font-size: 1.02rem;
}
.prose-block p:last-child { margin-bottom: 0; }

/* Biyografi: solda paragraflar alt alta, sağda fotoğraf.
   (Paragraflar bir dönem iki sütuna akıyordu; artık tek sütunda
   alt alta, boşalan yeri fotoğraf dolduruyor.) */
/* Solda biyografi, sağda fotoğraf.
   align-items:center → metin fotoğrafa göre dikey ortalanıyor.
   Önceden ikisi de yukarı yaslıydı; fotoğraf metinden uzun olduğu
   için metnin altında boş bir alan kalıyordu.
   Fotoğraf sütunu da daraltıldı — biyografi asıl içerik, fotoğraf
   ona eşlik ediyor. */
/* Hakkımda > "Yaklaşımım" bölümü.
   Fotoğraflar metnin İÇİNDE duruyor ve dönüşümlü olarak sağa, sola,
   sağa yaslanıyor; yazı etraflarından akıyor. Hangi paragrafın yanına
   düşecekleri views/pages/about.php içinde hesaplanıyor.
   Sayfa boyunca bir hareket oluşsun diye bu düzen seçildi; alt alta
   tek sütunda duran üç fotoğraf durağan görünüyordu. */
/* HAKKIMDA SAYFASININ OKUMA GENİŞLİĞİ
   Sayfadaki bütün bölümler aynı sütuna hizalansın diye tek bir ölçü
   kullanılıyor. Genişliği değiştirmek isterseniz yalnızca aşağıdaki
   sayıyı değiştirin; "Yaklaşımım", Eğitim/Deneyim, Klinik alanlar ve
   alttaki iletişim kutusu birlikte kayar.

   Sitenin geri kalanı daha geniş (--shell) kalıyor: burada metin uzun
   olduğu için satırların okunabilir boyda kalması gerekiyor. */
:root { --about-olcu: 1040px; }

.bio-wrap {
  max-width: var(--about-olcu);
  margin-inline: auto;
}

/* Yaklaşımım'ın altındaki bölümler de aynı sütuna hizalanıyor.
   section--cv ve section--focus yalnızca Hakkımda sayfasında
   kullanılıyor; alttaki iletişim kutusu (topic-cta) başka
   sayfalarda da var, o yüzden sadece bu sayfaya sınırlandırıldı. */
.section--cv .shell,
.section--focus .shell,
[data-page="about"] .section--about-cta .shell {
  max-width: var(--about-olcu);
}

.bio-photo {
  width: min(36%, 320px);
  margin: 6px 0 22px clamp(22px, 2.6vw, 34px);
  float: right;
}
.bio-photo--sol {
  float: left;
  margin: 6px clamp(22px, 2.6vw, 34px) 22px 0;
}

.bio-photo img {
  display: block;
  width: 100%;
  height: auto;
  /* Hangi ölçüde dosya konursa konsun kare görünür:
     fotoğraf ortasından kırpılır, ezilmez. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Yaslanan fotoğraflar bölümün dışına taşmasın */
.bio-clear { clear: both; }

@media (max-width: 860px) {
  /* Telefon: fotoğraf paragrafların ALTINA geçiyor */
  /* Telefonda yaslama kalkıyor: dar ekranda fotoğrafın yanında
     okunabilir bir metin sütunu kalmıyor. Fotoğraflar paragrafların
     arasında, tam genişlikte sırayla görünüyor. */
  .bio-photo,
  .bio-photo--sol {
    float: none;
    width: 100%;
    max-width: 420px;
    margin: 26px auto;
  }
}

/* Eğitim / deneyim — yan yana iki zaman çizelgesi */
.cv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px);
}
.cv-title {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  padding-bottom: 12px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line-strong);
}

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 0 20px;
  padding: 0 0 26px 0;
}
.timeline-item:last-child { padding-bottom: 0; }

/* Yıl sütununun sağında ince bir çizgi ve nokta */
.timeline-item::before {
  content: "";
  position: absolute;
  left: 108px; top: 9px; bottom: -9px;
  width: 1px;
  background: var(--line);
}
.timeline-item:last-child::before { display: none; }
.timeline-item::after {
  content: "";
  position: absolute;
  left: 105px; top: 7px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand);
}

.timeline-years {
  font-size: .8rem;
  font-weight: 600;
  color: var(--brand-ink);
  padding-top: 1px;
  font-variant-numeric: tabular-nums;
}
.timeline-body { padding-left: 12px; }
.timeline-body h3 {
  font-family: var(--font-body);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 3px;
}
.timeline-org { margin: 0; font-size: .89rem; color: var(--ink-2); }
.timeline-note {
  margin: 6px 0 0;
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.55;
}

/* Klinik deneyim alanları */
.section--focus { background: var(--surface-2); }
.focus-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.focus-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  font-size: .93rem;
  color: var(--ink-2);
  margin: 0;
}
.focus-list svg {
  width: 18px; height: 18px;
  margin-top: 4px;
  fill: none; stroke: var(--brand);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* Alt çağrı */
.about-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 36px;
  padding: clamp(24px, 3.2vw, 36px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-lg);
}
.about-cta h2 { margin: 0 0 .35em; font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
.about-cta p { margin: 0; color: var(--ink-2); max-width: 58ch; }
.about-cta .btn svg {
  width: 17px; height: 17px;
  flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 900px) {
  /* Telefonda anasayfa hero'suyla aynı sıra: önce fotoğraf, altında
     metin. Fotoğrafın alt kenarı metne doğru yumuşatılıyor. */
  .about-head-grid { grid-template-columns: 1fr; gap: 10px; }
  .about-portrait  { grid-row: 1; }
  .about-head-text { grid-row: 2; padding-bottom: clamp(32px, 8vw, 52px); }
  /* Portre dikey ve uzun; telefonda ekranın yarısından fazlasını
     kaplamasın diye yüksekliği sınırlanıyor.

     DİKKAT: sınır doğrudan <img>'in max-height'ine verilirse
     tarayıcı genişliği buna göre KÜÇÜLTMÜYOR ve fotoğraf basık
     görünüyor. Bu yüzden yükseklik SARMALAYICIYA veriliyor,
     fotoğraf da object-fit: contain ile içine oturuyor — oran
     her koşulda korunuyor. */
  .about-portrait {
    height: min(46svh, 420px);
    max-width: 320px;
    margin-inline: auto;
  }
  .about-portrait img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: bottom center;
  }
  .cv-grid { grid-template-columns: 1fr; }
  .focus-list { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .timeline-item { grid-template-columns: 1fr; gap: 4px; padding-bottom: 22px; }
  .timeline-item::before,
  .timeline-item::after { display: none; }
  .timeline-body { padding-left: 0; }
  .about-cta .btn { width: 100%; justify-content: center; }
}


/* ==========================================================================
   11) KONU SAYFALARI  (Meme Kanseri, Jinekolojik, Tedavi, Genetik)
   ========================================================================== */

/* --- Sayfa üstü: koyu gradient ------------------------------------------ */
.page-hero {
  --hero-ink:    #EDF6F3;
  --hero-ink-2:  #B7D3CC;
  --hero-accent: #7FD9CD;
  --hero-line:   rgba(190, 232, 224, .22);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--hero-ink);
  background:
    radial-gradient(110% 90% at 85% 0%,  rgba(94, 200, 186, .26) 0%, transparent 58%),
    linear-gradient(135deg, #0B403B 0%, #0E5F58 48%, #072B28 100%);
  padding-block: clamp(30px, 4vw, 46px) clamp(40px, 5.5vw, 72px);
}
.page-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--hero-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-line) 1px, transparent 1px);
  background-size: 68px 68px;
  opacity: .14;
  mask-image: radial-gradient(120% 80% at 75% 0%, #000 0%, transparent 70%);
}
.page-hero h1 { color: var(--hero-ink); margin: 0 0 .35em; }
.page-hero-lead {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  color: var(--hero-ink-2);
}
.breadcrumb--onDark { color: rgba(237, 246, 243, .6); margin-bottom: 22px; }
.breadcrumb--onDark a { color: rgba(237, 246, 243, .75); }
.breadcrumb--onDark a:hover { color: var(--hero-accent); }
.breadcrumb--onDark li + li::before { color: rgba(237, 246, 243, .35); }

/* Ortalı biçim — kutu yokken başlık ve açıklama sayfada ortalanır */
.page-hero-inner--center { text-align: center; }
.page-hero-inner--center .breadcrumb { justify-content: center; }
.page-hero-inner--center .page-hero-lead { margin-inline: auto; }

.page-hero-inner--split {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: end;
}

/* Sayfa üstündeki küçük bilgi kutuları */
.fact-row {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fact-card {
  padding: 16px 18px;
  border: 1px solid var(--hero-line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .06);
  margin: 0;
}
.fact-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--hero-accent);
  font-variant-numeric: tabular-nums;
}
.fact-label {
  display: block;
  margin-top: 4px;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--hero-ink-2);
}

/* --- Koyu bölüm (açık/koyu dönüşümlü akış için) ------------------------- */
.section--dark {
  --ink: #EDF6F3;
  --ink-2: #B7D3CC;
  --muted: #93B6AE;
  --line: rgba(190, 232, 224, .16);
  --line-strong: rgba(190, 232, 224, .3);
  --surface: rgba(255, 255, 255, .05);
  --brand-ink: #7FD9CD;
  --brand: #7FD9CD;

  color: #EDF6F3;
  background:
    radial-gradient(100% 80% at 15% 0%, rgba(94, 200, 186, .18) 0%, transparent 60%),
    linear-gradient(160deg, #0B403B 0%, #0C4F49 55%, #072B28 100%);
}
.section--dark h2,
.section--dark h3 { color: #EDF6F3; }

/* --- Bölüm başlığı (ortalı, kart ızgaralarının üstünde) ----------------- */
.block-head {
  max-width: 62ch;
  margin: 0 0 clamp(26px, 3.5vw, 40px);
}
.block-head h2 { margin: 0 0 .4em; }
.block-head p { margin: 0; color: var(--ink-2); font-size: 1.01rem; }

/* --- Metin + yan bilgi kartı düzeni ------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.split-main h2 { margin-bottom: .55em; }
.split-main p { color: var(--ink-2); font-size: 1.01rem; max-width: 66ch; }

.split-aside { display: flex; flex-direction: column; gap: 16px; }

/* Ortalı düzen: başlık ve açıklama ortada, kartlar altta yan yana */
.stack-center { display: block; }
.block-head--center {
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: clamp(26px, 3.5vw, 40px);
  text-align: center;
}
.block-head--center p { max-width: none; }

.aside-row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 24px);
}
.aside-row > .info-card { flex: 1 1 320px; }

/* Renk tonları — kırmızı: değiştirilemeyen, mavi: değiştirilebilen */
.info-card.info-card--danger {
  border-color: color-mix(in srgb, var(--tone-danger) 35%, transparent);
  border-left-color: var(--tone-danger);
  background: var(--tone-danger-soft);
}
.info-card.info-card--danger h3 { color: var(--tone-danger); }
.info-card.info-card--danger .check-list svg { stroke: var(--tone-danger); }

.info-card.info-card--info {
  border-color: color-mix(in srgb, var(--tone-info) 35%, transparent);
  border-left-color: var(--tone-info);
  background: var(--tone-info-soft);
}
.info-card.info-card--info h3 { color: var(--tone-info); }
.info-card.info-card--info .check-list svg { stroke: var(--tone-info); }

.info-card {
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-lg);
}
.info-card h3 {
  font-family: var(--font-body);
  font-size: .93rem;
  font-weight: 700;
  letter-spacing: .01em;
  margin: 0 0 12px;
}
.info-card p { margin: 0 0 12px; font-size: .89rem; color: var(--ink-2); }
.info-card p:last-child { margin-bottom: 0; }

.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.check-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 9px;
  align-items: start;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}
.check-list svg {
  width: 16px; height: 16px;
  margin-top: 3px;
  fill: none; stroke: var(--brand);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

/* --- Kavram kartları (evreler, alt tipler, tedaviler) ------------------- */
.concept-grid {
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: c;
}
.concept-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.concept-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.concept-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.concept-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Beş kart yan yanayken daha sıkı bir ölçek */
.concept-grid--5 .concept-card { padding: 18px 16px 20px; gap: 6px; }
.concept-grid--5 .concept-card h3 { font-size: .93rem; }
.concept-grid--5 .concept-card p { font-size: .83rem; line-height: 1.55; }
.concept-grid--5 .concept-tag { font-size: .69rem; padding: 2px 8px; }

.concept-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin: 0;
}
.concept-card h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}
.concept-card p { margin: 0; font-size: .89rem; line-height: 1.6; color: var(--ink-2); }

.concept-tag {
  align-self: flex-start;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--brand-ink);
}
.concept-num {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
}

/* Kartların yanında fotoğraf alanı (ör. alt tipler bölümü) */
.cards-with-media {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: stretch;
}
.cards-media { display: flex; }
.cards-media img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

/* Uzman bölümündeki fotoğraf alanı */
.expert-media { margin-top: 26px; }
.expert-media img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--surface);
}

/* --- Geniş görsel bandı -------------------------------------------------- */
.media-band { padding-block: clamp(28px, 4vw, 44px); }
.media-band img {
  width: 100%;
  aspect-ratio: 10 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

/* --- Uzman kartı --------------------------------------------------------- */
.section--expert { background: var(--surface-2); }
.split--expert { grid-template-columns: 1.25fr .75fr; align-items: center; }
.split--expert .btn { margin-top: 22px; }
.split--expert .btn svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.doctor-card {
  text-align: center;
  padding: clamp(26px, 3vw, 36px) clamp(22px, 2.6vw, 32px);
  border-radius: var(--radius-lg);
  color: #EDF6F3;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(94, 200, 186, .2) 0%, transparent 60%),
    linear-gradient(165deg, #0B403B 0%, #0A302C 100%);
  border: 1px solid rgba(190, 232, 224, .18);
  box-shadow: var(--shadow-lg);
}
.dc-eyebrow {
  margin: 0 0 20px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8FC4BB;
}
.dc-photo {
  display: block;
  width: 132px; height: 132px;
  margin: 0 auto 18px;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(140deg, #7FD9CD 0%, #2E8F84 60%, #7FD9CD 100%);
}
.dc-photo img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.dc-name {
  margin: 0 0 16px;
  font-size: 1.32rem;
  color: #FFFFFF;
  line-height: 1.25;
}
.dc-role { margin: 0 0 18px; font-size: .9rem; color: #A9C9C2; }

.dc-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; }
.dc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: .87rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--step), filter var(--step);
}
.dc-link svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.dc-link--linkedin { background: #0A66C2; color: #FFFFFF; }
.dc-link--researchgate { background: #00CCBB; color: #04302C; }
.dc-link:hover { transform: translateY(-1px); filter: brightness(1.08); }
.dc-link:hover, .dc-link:focus-visible { color: inherit; }
.dc-link--linkedin:hover { color: #FFFFFF; }

.dc-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.dc-tags li {
  padding: 6px 14px;
  border: 1px solid rgba(127, 217, 205, .4);
  border-radius: var(--radius-pill);
  font-size: .8rem;
  font-weight: 600;
  color: #7FD9CD;
  margin: 0;
}
.dc-note { margin: 0; font-size: .87rem; line-height: 1.6; color: #A9C9C2; }

/* --- Sık sorulan sorular ------------------------------------------------- */
.faq-layout {
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}
.faq-main { min-width: 0; }

.faq-cta {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  padding: clamp(24px, 3vw, 32px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.faq-cta h2 { margin: 0 0 .45em; font-size: clamp(1.15rem, 2vw, 1.35rem); }
.faq-cta p { margin: 0 0 20px; font-size: .92rem; color: var(--ink-2); }
.faq-cta .btn { width: 100%; justify-content: center; }
.faq-cta .btn svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.faq-cta-links {
  list-style: none;
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 7px;
}
.faq-cta-links a {
  font-size: .88rem;
  color: var(--ink-2);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.faq-cta-links a:hover { color: var(--brand-ink); }

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: .97rem;
  list-style: none;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--brand-ink); }
.faq-item summary svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--step);
}
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-item[open] summary { color: var(--brand-ink); }
.faq-answer {
  padding: 0 20px 18px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.faq-answer p { margin: 0; font-size: .93rem; color: var(--ink-2); max-width: 72ch; }

/* --- Konu sayfaları: duyarlı düzen -------------------------------------- */
@media (max-width: 1100px) {
  .concept-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .concept-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards-with-media { grid-template-columns: 1fr; }
  .cards-media img { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 900px) {
  .page-hero-inner--split { grid-template-columns: 1fr; align-items: start; }
  .split,
  .split--expert { grid-template-columns: 1fr; }
  .concept-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-layout { grid-template-columns: 1fr; }
  .faq-cta { position: static; }
}
@media (max-width: 620px) {
  .concept-grid--2,
  .concept-grid--3,
  .concept-grid--4 { grid-template-columns: 1fr; }
  .concept-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-band img { aspect-ratio: 16 / 9; }
  .dc-links { flex-direction: column; }
  .dc-link { justify-content: center; }
}

/* Mobilde sayfa üstündeki üç bilgi kutusu yan yana kalsın */
@media (max-width: 900px) {
  .fact-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 26px;
  }
  .fact-card { padding: 12px 12px 14px; }
  .fact-value { font-size: 1.1rem; }
  .fact-label { font-size: .72rem; line-height: 1.35; }
}
@media (max-width: 420px) {
  .fact-value { font-size: .98rem; }
  .fact-label { font-size: .66rem; }
  .fact-card { padding: 10px 9px 12px; }
}


/* ==========================================================================
   12) FOTOĞRAFLI BÖLÜMLER  (Erken Tanı, Sağlıklı Yaşam)
   ========================================================================== */

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4.5vw, 60px);
  align-items: center;
}
/* Görsel sola geçsin — bölümleri sağlı sollu dizmek için */
.feature--reverse .feature-text { order: 2; }
.feature--reverse .feature-media { order: 1; }

.feature-eyebrow {
  margin: 0 0 12px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.feature-text h2 { margin: 0 0 .5em; font-size: clamp(1.35rem, 2.6vw, 1.85rem); }
.feature-text p { color: var(--ink-2); font-size: 1.01rem; max-width: 56ch; }
.feature-items { margin-top: 20px; }

.feature-media img {
  width: 100%;
  aspect-ratio: 45 / 32;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.section--dark .feature-media img { background: rgba(255, 255, 255, .05); }

@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; gap: 26px; }
  /* Mobilde her bölümde görsel metnin üstünde dursun — sıra bozulmasın */
  .feature-text { order: 2 !important; }
  .feature-media { order: 1 !important; }
}


/* ==========================================================================
   13) KANSER SÖZLÜĞÜ
   ========================================================================== */

/* Arama + harf çubuğu — header'ın altına yapışır */
.glossary-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 80;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.glossary-bar .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding-block: 14px;
}

/* Arama kutusu */
.gl-search {
  position: relative;
  flex: 1 1 300px;
  max-width: 420px;
  display: flex;
  align-items: center;
}
.gl-search-icon {
  position: absolute;
  left: 14px;
  width: 18px; height: 18px;
  fill: none; stroke: var(--muted);
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.gl-search input {
  width: 100%;
  padding: 11px 40px 11px 42px;
  font: inherit;
  font-size: .94rem;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  transition: border-color var(--step), box-shadow var(--step), background var(--step);
}
.gl-search input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.gl-search input::-webkit-search-cancel-button { display: none; }

.gl-clear {
  position: absolute;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.gl-clear:hover { color: var(--ink); background: var(--surface-2); }
.gl-clear svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round;
}

/* A'dan Z'ye harf çubuğu */
.gl-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-left: auto;
}
.gl-letters a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding-inline: 3px;
  border-radius: 6px;
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--step), color var(--step);
}
.gl-letters a { color: var(--brand-ink); }
.gl-letters a:hover,
.gl-letters a.is-active { background: var(--brand); color: var(--on-brand); }

.gl-count {
  flex-basis: 100%;
  margin: 0;
  font-size: .84rem;
  color: var(--muted);
}
.gl-count:empty { display: none; }

/* Terim listesi */
.section--glossary { padding-block: clamp(32px, 4.5vw, 60px); }

.gl-group {
  margin-bottom: clamp(32px, 4vw, 52px);
  scroll-margin-top: calc(var(--header-h) + 86px);
}
.gl-group:last-of-type { margin-bottom: 0; }

.gl-letter {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--brand-ink);
  margin: 0 0 20px;
}
.gl-letter::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.gl-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
  margin: 0;
}
.gl-item {
  padding: 18px 20px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--step);
}
.gl-item:hover { border-color: var(--line-strong); }
.gl-item dt {
  font-weight: 700;
  font-size: .96rem;
  color: var(--ink);
  margin-bottom: 6px;
}
.gl-item dd {
  margin: 0;
  font-size: .89rem;
  line-height: 1.6;
  color: var(--ink-2);
}
/* Aramada eşleşen kısım */
.gl-item mark {
  background: var(--brand-soft);
  color: var(--brand-ink);
  padding: 0 2px;
  border-radius: 3px;
}

.gl-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  margin: 0;
}

@media (max-width: 780px) {
  .gl-list { grid-template-columns: 1fr; }
  .gl-letters { margin-left: 0; flex-basis: 100%; }
  .gl-search { max-width: none; }
}


/* ==========================================================================
   14) İLETİŞİM SAYFASI
   ========================================================================== */

/* Solda bilgiler, sağda harita */
.contact-split {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: stretch;
}

.contact-info h2 { margin: 0 0 24px; font-size: clamp(1.3rem, 2.4vw, 1.6rem); }

.ci-list { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 20px; }
.ci-list li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; margin: 0; }

.ci-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius);
  background: var(--brand-soft);
  color: var(--brand-ink);
}
.ci-icon svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.ci-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ci-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.ci-value {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
a.ci-value:hover { color: var(--brand-ink); }
.ci-value--text { font-weight: 500; font-size: .97rem; line-height: 1.5; }
.ci-sub { margin-top: 6px; font-size: .85rem; color: var(--brand-ink); }

.ci-social h3 {
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.ci-social ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ci-social li { margin: 0; }
.ci-social-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-2);
  text-decoration: none;
  font-size: .87rem;
  font-weight: 600;
  transition: border-color var(--step), color var(--step), background var(--step);
}
.ci-social-btn:hover { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); }
.ci-social-btn svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* Harita */
.contact-map {
  min-height: 380px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.contact-map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }

/* Randevu bandı */
.section--appointment { padding-block: clamp(28px, 3.5vw, 44px); }
.appointment-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 36px;
  padding: clamp(24px, 3.2vw, 38px);
  border-radius: var(--radius-lg);
  color: #EDF6F3;
  background:
    radial-gradient(100% 90% at 85% 0%, rgba(94, 200, 186, .24) 0%, transparent 60%),
    linear-gradient(135deg, #0B403B 0%, #0E5F58 50%, #072B28 100%);
  border: 1px solid rgba(190, 232, 224, .18);
}
.appointment-band h2 { margin: 0 0 .4em; color: #FFFFFF; font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
.appointment-band p { margin: 0; color: #B7D3CC; max-width: 56ch; font-size: .96rem; }

/* Dar sütunda (anasayfa) alt alta dizilir */
.appointment-band--stacked {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 18px;
}
.appointment-band--stacked .btn--appointment {
  align-self: flex-start;
}

.btn--appointment {
  flex: none;
  background: #FFFFFF;
  color: #08322D;
  padding: 14px 26px;
  font-size: .97rem;
}
.btn--appointment:hover { background: #7FD9CD; color: #06302C; }
.btn--appointment svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Form bölümü */
.section--contact-form { background: var(--surface-2); }
.contact-form-wrap { max-width: 720px; }
.contact-form-wrap .block-head--center { margin-inline: auto; }

/* Hasta yorumları */
.reviews-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 32px;
  margin-bottom: clamp(24px, 3.2vw, 36px);
}
.reviews-head h2 { margin: 0 0 .35em; }
.reviews-source { margin: 0; font-size: .87rem; color: var(--muted); max-width: 52ch; }

.reviews-score { display: flex; align-items: center; gap: 10px; flex: none; }
.rs-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rs-stars { display: inline-flex; gap: 2px; }
.rs-stars svg { width: 17px; height: 17px; fill: #E0A32E; stroke: none; }
.rs-count { font-size: .86rem; color: var(--muted); }

/* Flex + wrap: yorum sayısı 3'ün katı olmayınca son satırdaki
   kart(lar) ortalanır, tek başına sola yapışmaz. */
.review-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 2vw, 22px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.review-card {
  /* Masaüstünde dört yorum yan yana — alta kaymaz. */
  flex: 0 1 calc(25% - 17px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 22px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin: 0;
}
.rc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rc-stars { display: inline-flex; gap: 2px; }
.rc-stars svg { width: 15px; height: 15px; fill: var(--line-strong); stroke: none; }
.rc-stars svg.is-on { fill: #E0A32E; }
.rc-top time { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.review-card blockquote {
  margin: 0;
  flex: 1;
  font-size: .93rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.rc-foot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.rc-name { font-size: .88rem; font-weight: 700; color: var(--ink); letter-spacing: .02em; }
.rc-meta { font-size: .8rem; color: var(--muted); }

.reviews-link { margin: clamp(22px, 3vw, 32px) 0 0; }
.reviews-link a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--brand-ink);
  text-decoration: none;
}
.reviews-link svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--step);
}
.reviews-link a:hover svg { transform: translateX(3px); }

@media (max-width: 1100px) {
  .review-card { flex-basis: calc(50% - 16px); }
}
@media (max-width: 960px) {
  .contact-split { grid-template-columns: 1fr; }
  .contact-map { min-height: 320px; }
}
@media (max-width: 620px) {
  /* Telefonda yorumlar alt alta dizilince sayfa çok uzuyordu:
     yan yana, parmakla kaydırılan bir şerit haline geliyorlar.
     scroll-snap sayesinde her kart tam ortaya oturuyor.
     Şerit sayfanın kenarlarına kadar uzasın diye negatif kenar
     boşluğu veriliyor; kaydırma çubuğu gizli. */
  .review-grid {
    flex-wrap: nowrap;
    justify-content: flex-start;
    /* Yan yana dizilince kartlar en uzununun boyuna uzuyordu;
       her kart kendi içeriği kadar yer kaplasın. */
    align-items: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 4px;
  }
  .review-grid::-webkit-scrollbar { display: none; }
  .review-card {
    flex: 0 0 85%;
    scroll-snap-align: center;
  }
  /* Son kartın sağında da nefes payı kalsın */
  .review-grid::after {
    content: "";
    flex: 0 0 1px;
  }

  .btn--appointment { width: 100%; justify-content: center; }

  /* Mobilde sosyal hesaplar yan yana dört ikon — yazılar gizleniyor,
     erişilebilirlik için aria-label ile isim korunuyor. */
  .ci-social ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .ci-social-btn {
    justify-content: center;
    padding: 13px 0;
    font-size: 0;
  }
  .ci-social-btn svg { width: 20px; height: 20px; }
}

/* ============================================================
   15) SSS SAYFASI
   Konu başlığına göre gruplanmış, iki sütunlu açılır soru listesi.
   ============================================================ */

/* Bölüm başlığının üstündeki küçük etiket */
.block-label {
  display: block;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

/* --- Konu çubuğu (sayfa içi bağlantılar) --- */
.faq-topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 clamp(38px, 5vw, 56px);
}
.faq-topics a {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: .87rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--step), border-color var(--step), color var(--step);
}
.faq-topics a:hover,
.faq-topics a:focus-visible {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

/* --- Konu grubu --- */
.faq-group {
  /* Konu çubuğundan gelince başlık header'ın altında kalmasın */
  scroll-margin-top: 90px;
}
.faq-group + .faq-group { margin-top: clamp(44px, 5vw, 64px); }

.faq-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-bottom: 6px;
}
.faq-group-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  letter-spacing: -.01em;
}
.faq-group-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .87rem;
  font-weight: 600;
  color: var(--brand-ink);
  text-decoration: none;
}
.faq-group-link svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--step);
}
.faq-group-link:hover svg { transform: translateX(3px); }

/* --- İki sütunlu soru listesi --- */
/* Sütunlar bağımsız: soldaki bir soruyu açmak sağdakini kaydırmıyor. */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(24px, 3vw, 44px);
}
.faq-col { display: flex; flex-direction: column; }

.faq-row {
  border-top: 1px solid var(--line);
}
.faq-col > .faq-row:last-child { border-bottom: 1px solid var(--line); }

.faq-row > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: .97rem;
  line-height: 1.5;
  color: var(--ink);
  transition: color var(--step);
}
.faq-row > summary::-webkit-details-marker { display: none; }
.faq-row > summary:hover { color: var(--brand-ink); }

.faq-plus {
  flex: none;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--muted);
  transition: background var(--step), border-color var(--step),
              color var(--step), transform var(--step);
}
.faq-plus svg {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round;
}
/* Açıkken artı işareti çarpıya dönüyor */
.faq-row[open] .faq-plus {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  transform: rotate(45deg);
}

.faq-row-body { padding-bottom: 20px; }
.faq-row-body p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.8;
  color: var(--ink-2);
}

/* --- Destek kartları --- */
.support-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
}
.support-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--step), background var(--step), transform var(--step);
}
.support-card:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  transform: translateY(-2px);
}
.support-icon {
  flex: none;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  border-radius: 12px;
  color: var(--brand-ink);
}
.support-card:hover .support-icon { background: var(--surface); }
.support-icon svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.support-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.support-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.support-value {
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .support-cards { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* Dar ekranda iki sütun sığmıyor — sorular tek sütuna iniyor.
     Alt sınırın kaybolmaması için kural son çocuğa taşınıyor. */
  .faq-grid { grid-template-columns: 1fr; gap: 0; }
  .faq-col > .faq-row:last-child { border-bottom: none; }
  .faq-col:last-child > .faq-row:last-child { border-bottom: 1px solid var(--line); }
  .faq-row > summary { font-size: .93rem; padding: 17px 0; gap: 12px; }
}

/* ============================================================
   16) VİDEO BLOG SAYFASI
   Shorts videoları dikey (9:16), masaüstünde üçerli ızgara.
   ============================================================ */

.video-note {
  max-width: 640px;
  margin: 0 auto clamp(26px, 3vw, 38px);
  text-align: center;
  font-size: .9rem;
  color: var(--muted);
}

.shorts-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
}

/* ANASAYFA ŞERİDİ — masaüstünde BEŞ video yan yana.
   Dikey (Shorts) videolar üçerli dizildiğinde çok büyük duruyor ve
   anasayfayı gereksiz uzatıyordu. Beşe çıkınca hem kartlar küçülüyor
   hem ziyaretçi ilk bakışta daha fazla konu görüyor.
   Video Blog SAYFASI üçerli kalıyor — orada videolar asıl içerik. */
@media (min-width: 901px) {
  .shorts-grid--teaser {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
  }
}

.shorts-card { margin: 0; display: flex; flex-direction: column; gap: 14px; }

/* Kart çerçevesi 9:16 — Shorts'un kendi oranı. İçine gelen kapak
   görseli de, tıklandıktan sonra gelen iframe de bu oranı doldurur. */
.shorts-frame,
.shorts-card iframe {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
}

.shorts-frame {
  position: relative;
  padding: 0;
  cursor: pointer;
  transition: border-color var(--step), transform var(--step), box-shadow var(--step);
}
.shorts-frame:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(14, 95, 88, .16);
}

.shorts-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* dikey kapak yoksa yatay kapağı ortadan kırpar */
  display: block;
}

/* Oynat düğmesi */
.shorts-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58px; height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--brand);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  transition: transform var(--step), background var(--step);
}
.shorts-frame:hover .shorts-play {
  transform: scale(1.08);
  background: #fff;
}
.shorts-play svg { width: 26px; height: 26px; fill: currentColor; margin-left: 3px; }

.shorts-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
}

/* Anasayfadaki tanıtım şeridinde video başlıkları görünmüyor; kartlar
   yalnız kapak görseliyle duruyor. Başlık HTML'de duruyor (ekran
   okuyucular ve düğmenin aria-label'ı için), sadece ekranda gizli.
   Video Blog sayfasında başlıklar görünmeye devam ediyor. */
.shorts-grid--teaser .shorts-title {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Kanal bağlantısı */
.shorts-more {
  margin-top: clamp(38px, 5vw, 56px);
  text-align: center;
}
.shorts-more p {
  margin: 0 0 16px;
  font-size: .95rem;
  color: var(--ink-2);
}
.shorts-more .btn svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 900px) {
  .shorts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Tablette şerit üçerli: beşi iki satıra bölününce ikinci satır
     yarım kalıyor, kırık duruyordu. Üçü tek satırda tam oturuyor. */
  .shorts-grid--teaser { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shorts-grid--teaser .shorts-card:nth-child(n + 4) { display: none; }
}
@media (max-width: 560px) {
  /* Video Blog sayfasında telefonda tek sütun: videolar sayfanın asıl
     içeriği, büyük görünmeleri doğru. */
  .shorts-grid { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
  .shorts-more .btn { width: 100%; justify-content: center; }

  /* Anasayfadaki tanıtım şeridi telefonda YAN YANA İKİ video gösterir.
     Kalanlar gizlenir — telefonda anasayfa gereksiz uzamasın diye.
     Tamamını görmek isteyen "Tüm Video Blogu Keşfet" düğmesiyle
     Video Blog sayfasına gidiyor. */
  .shorts-grid--teaser {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    gap: 14px;
  }
  .shorts-grid--teaser .shorts-card:nth-child(n + 3) { display: none; }
}

/* ============================================================
   17) BLOG LİSTESİ — sayfalama
   Kart ızgarası anasayfadakiyle aynı (.post-grid); burada yalnızca
   satırlar arası boşluk ve sayfa numarası çubuğu tanımlı.
   ============================================================ */

.post-grid--list { row-gap: clamp(26px, 3vw, 40px); }

.pager {
  margin-top: clamp(38px, 5vw, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 18px;
}
.pager-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--step), border-color var(--step), color var(--step);
}
.pager-btn:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
.pager-btn svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.pager-state {
  font-size: .88rem;
  color: var(--muted);
}

/* ============================================================
   18) HUKUKİ METİNLER (Gizlilik, KVKK)
   Tek sütun, okunaklı satır genişliği; üstte içindekiler.
   ============================================================ */

.legal-doc {
  max-width: 820px;
}

/* Taslak uyarısı — metin onaylanınca lang dosyasından kaldırılır */
.legal-draft {
  margin: 0 0 22px;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--rose);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.legal-updated {
  margin: 0 0 6px;
  font-size: .82rem;
  color: var(--muted);
}
.legal-intro {
  margin: 0 0 30px;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink-2);
}

.legal-toc {
  margin: 0 0 clamp(34px, 4vw, 48px);
  padding: 20px 24px;
  background: var(--surface-2);
  border-radius: var(--radius-lg);
}
.legal-toc ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  font-size: .9rem;
}
.legal-toc a { color: var(--brand-ink); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }

.legal-block {
  scroll-margin-top: 90px;
}
.legal-block + .legal-block { margin-top: clamp(28px, 3.4vw, 40px); }

.legal-block h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  letter-spacing: -.01em;
}
.legal-num { color: var(--brand); margin-right: 6px; }

.legal-block p {
  margin: 0 0 12px;
  font-size: .95rem;
  line-height: 1.8;
  color: var(--ink-2);
}

.legal-list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.legal-list li {
  position: relative;
  padding-left: 20px;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--ink-2);
}
.legal-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
}

.legal-contact {
  margin-top: clamp(38px, 5vw, 54px);
  padding: 26px;
  background: var(--brand-soft);
  border-radius: var(--radius-lg);
}
.legal-contact h2 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.15rem;
}
.legal-contact p { margin: 0 0 12px; font-size: .93rem; color: var(--ink-2); }
.legal-contact ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 5px;
  font-size: .93rem; color: var(--ink-2);
}
.legal-contact a { color: var(--brand-ink); font-weight: 600; }

@media (max-width: 620px) {
  .legal-toc ol { grid-template-columns: 1fr; }
}


/* ==========================================================================
   18) KANSER TÜRLERİ ŞERİDİ  (anasayfa, konu kartlarından hemen önce)
   --------------------------------------------------------------------------
   Yuvarlak ikonlar ve altlarında isimleri; şerit sağdan sola
   kendiliğinden kayıyor — işbirliği/logo bantlarındaki gibi.

   Nasıl çalışıyor: liste HTML'de iki kez yazılı, ikisi birden
   soldan sağa dizili. Şeridi genişliğinin yarısı kadar sola
   kaydırıyoruz; o anda ikinci kopya tam olarak ilkinin başladığı
   yerde oluyor, bu yüzden dönüş anı görünmüyor.

   HIZI DEĞİŞTİRMEK: .cancer-track içindeki animation süresini
   büyütün (yavaşlar) veya küçültün (hızlanır).
   YÖNÜ DEĞİŞTİRMEK: animation-direction: reverse; ekleyin.
   ========================================================================== */

.cancer-strip {
  padding-block: clamp(34px, 4.5vw, 56px);
  background: var(--surface-2);
  border-block: 1px solid var(--line);
  overflow: hidden;
}

.cancer-eyebrow {
  margin: 0 0 clamp(22px, 3vw, 34px);
  text-align: center;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Şeridin iki yanı zemine doğru soluyor — maddeler ekran kenarında
   birden kesilmesin, akıp gidiyormuş gibi dursun. */
/* Üstteki başlıkla arasına boşluk ve yuvarlakların gölgesine /
   üzerine gelince yükselmesine yer: bu dolgu olmadan daireler
   bandın üst kenarında kesik görünüyordu. */
.cancer-viewport {
  margin-top: clamp(24px, 3vw, 36px);
  padding-block: 14px 10px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.cancer-track {
  display: flex;
  width: max-content;
  animation: cancerScroll 64s linear infinite;
}
/* Üzerine gelince duruyor — isimleri okumak isteyen için */
.cancer-strip:hover .cancer-track { animation-play-state: paused; }

@keyframes cancerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.cancer-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 2.6vw, 38px);
  list-style: none;
  margin: 0;
  padding: 0 clamp(10px, 1.3vw, 19px);
}

.cancer-item {
  flex: none;
  width: 124px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.cancer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86px; height: 86px;
  flex: none;
  border-radius: 50%;
  color: var(--brand-ink);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent),
    0 8px 20px -12px color-mix(in srgb, var(--brand) 45%, transparent);
  transition: color var(--step), border-color var(--step), transform var(--step);
}
.cancer-item:hover .cancer-icon {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  transform: translateY(-3px);
}
.cancer-icon svg {
  width: 36px; height: 36px;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
/* assets/img/kanser/ içine konan hazır ikon dosyaları */
.cancer-icon img { width: 44px; height: 44px; object-fit: contain; }

/* SVG ikonlar maske olarak kullanılıyor: dosyadan yalnızca şekil
   alınıyor, rengi siteden geliyor (currentColor). Açık temada koyu
   yeşil, koyu temada açık yeşil görünüyor; üzerine gelince de
   yuvarlakla birlikte renk değiştiriyor. */
.ci-mask {
  display: block;
  width: 42px; height: 42px;
  background-color: currentColor;
  -webkit-mask: var(--ci-src) center / contain no-repeat;
          mask: var(--ci-src) center / contain no-repeat;
}

.cancer-name {
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-2);
  text-wrap: balance;
}

@media (max-width: 620px) {
  .cancer-item { width: 104px; }
  .cancer-icon { width: 72px; height: 72px; }
  .cancer-icon svg { width: 31px; height: 31px; }
  .cancer-icon img,
  .ci-mask { width: 36px; height: 36px; }
  .cancer-name { font-size: .76rem; }
}

/* Hareket hassasiyeti: kayma yok. Şerit duruyor, isteyen parmakla
   veya fareyle yatay kaydırıyor. */
@media (prefers-reduced-motion: reduce) {
  .cancer-track { animation: none; }
  .cancer-viewport {
    overflow-x: auto;
    scrollbar-width: thin;
  }
  /* Duran şeritte ikinci kopya gereksiz */
  .cancer-track .cancer-row + .cancer-row { display: none; }
}

/* ==========================================================
   BLOG YAZISI DETAYI  (/blog/<adres>)
   Okunabilirlik önce gelir: tek sütun, dar satır genişliği,
   bol satır aralığı. Metin genişliği 68 karakterde tutuluyor —
   göz satır sonundan başına rahat dönsün diye.
   ========================================================== */

.section--post { padding-top: clamp(32px, 5vw, 56px); }

.post-shell { max-width: 760px; }

.post-head { margin-bottom: clamp(24px, 4vw, 36px); }

.post-head h1 {
  font-size: clamp(1.85rem, 4vw, 2.7rem);
  line-height: 1.18;
  margin: 14px 0 0;
}

.post-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-soft);
  margin: 16px 0 0;
}

.post-meta {
  margin: 18px 0 0;
  color: var(--text-soft);
  font-size: .92rem;
}

.post-kapak {
  margin: 0 0 clamp(26px, 4vw, 40px);
  border-radius: var(--radius-lg, 18px);
  overflow: hidden;
}
.post-kapak img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Yazının gövdesi — panelden gelen metnin HTML karşılığı */
.post-govde { font-size: clamp(1rem, 1.3vw, 1.08rem); line-height: 1.8; }
.post-govde > *:first-child { margin-top: 0; }
.post-govde p { margin: 0 0 1.15em; }

.post-govde h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.3;
  margin: 2em 0 .6em;
}
.post-govde h3 {
  font-size: clamp(1.1rem, 1.7vw, 1.25rem);
  margin: 1.7em 0 .5em;
}

.post-govde ul,
.post-govde ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.post-govde li { margin-bottom: .5em; }

.post-govde a { color: var(--brand-strong, currentColor); text-underline-offset: 3px; }

.post-govde blockquote {
  margin: 1.6em 0;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--brand);
  color: var(--text-soft);
  font-style: italic;
}
.post-govde blockquote p:last-child { margin-bottom: 0; }

.post-govde strong { font-weight: 600; }

@media (max-width: 600px) {
  .post-kapak img { aspect-ratio: 4 / 3; }
}

/* Form gönderi sonucu — formun hemen üstünde çıkar */
.form-sonuc {
  margin: 0 auto clamp(20px, 3vw, 28px);
  max-width: 640px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2, var(--surface));
  font-size: .98rem;
  text-align: center;
}
.form-sonuc--ok {
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
}
.form-sonuc--hata {
  border-color: color-mix(in srgb, #D14343 45%, transparent);
  background: color-mix(in srgb, #D14343 8%, var(--surface));
}

/* ==========================================================
   HERO — sağ sütundaki randevu düğmesi
   Sosyal ikonların altında, YALNIZCA MASAÜSTÜNDE.
   Telefonda bu sütun metnin altına iniyor; oradaki "Randevu &
   İletişim" düğmesiyle aynı işi iki kez yapmasın diye gizli.
   ========================================================== */

.hero-randevu { display: none; }

@media (min-width: 1101px) {
  /* Sütun iki parçalı: ikonlar üstte, düğme altta.
     width:fit-content + align-items:stretch → sütunun genişliğini
     ikon sırası belirliyor, düğme de tam o genişliğe uzuyor.
     Böylece düğmenin sol ve sağ kenarı ikonlarla hizalı kalıyor;
     ikon sayısı config.php'den değiştirilse bile hizа bozulmuyor. */
  .hero-social-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    width: fit-content;
    gap: clamp(18px, 2vw, 26px);
  }

  .hero-randevu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-width: 0;          /* ikon sırasından geniş olmasın; metin sarsın */
    padding: 13px 18px;
    border-radius: 12px;
    border: 0;
    background: linear-gradient(135deg,
                var(--brand) 0%,
                color-mix(in srgb, var(--brand) 55%, #3FB8A4) 100%);
    color: var(--on-brand);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 6px 18px color-mix(in srgb, #000 22%, transparent);
    transition: filter .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .hero-randevu svg {
    flex: 0 0 19px;
    width: 19px; height: 19px;
    fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  }
  .hero-randevu:hover,
  .hero-randevu:focus-visible {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px color-mix(in srgb, #000 28%, transparent);
  }

  /* Giriş animasyonunda ikonlarla birlikte belirsin */
  .has-js .hero-randevu { animation: heroFadeUp .8s cubic-bezier(.22,.68,.3,1) .72s both; }
}

@media (prefers-reduced-motion: reduce) {
  .has-js .hero-randevu { animation: none; }
}

/* Yorumlar Türkçe yazıldı; diğer dillerde çeviri olduğu söyleniyor.
   Kaynak satırının altında, ondan biraz daha küçük punto ile.
   (Eskiden opacity: .8 vardı; zaten soluk olan yazıyı okunamaz hâle
   getiriyordu — Lighthouse kontrast uyarısı veriyordu. Ayrım artık
   punto farkıyla sağlanıyor.) */
.reviews-translated {
  display: block;
  margin-top: 4px;
  font-size: .86em;
}


/* ==========================================================================
   ÇEREZ BİLDİRİMİ
   --------------------------------------------------------------------------
   Sayfanın altında duran küçük kutu. Ekranı kaplamıyor, içeriği
   engellemiyor: ziyaretçi okumaya devam edebilir, istediğinde kapatır.
   Tercih tarayıcının kendi hafızasında saklanıyor (bkz. main.js).
   Kutu HTML'de hidden olarak başlar, JavaScript açar.
   ========================================================================== */
.cookie-notice {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom));
  pointer-events: none;      /* kutunun dışındaki şerit tıklamayı yutmasın */
}
.cookie-notice[hidden] { display: none; }

.cookie-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  /* Açılırken aşağıdan süzülerek gelsin */
  animation: cookieIn .32s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes cookieIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cookie-text {
  margin: 0;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.cookie-text a {
  color: var(--brand-ink);
  font-weight: 600;
  text-underline-offset: 3px;
}

.cookie-ok { flex: none; white-space: nowrap; }

@media (max-width: 640px) {
  .cookie-inner { flex-direction: column; align-items: stretch; text-align: left; }
  .cookie-ok { width: 100%; }
}

/* Hareketi azaltılmış tercihinde kutu animasyonsuz gelir */
@media (prefers-reduced-motion: reduce) {
  .cookie-inner { animation: none; }
}

/* Çerez kutusu açıkken sözlük düğmesi onun altında kalmasın */
body.has-cookie-notice .glossary-fab { bottom: calc(96px + env(safe-area-inset-bottom)); }