/* tokens.css */
/* ==========================================================================
   Op. Dr. Doruk Taş — ortak tasarım token'ları
   Palet: hastane yaka kartı / lanyard camgöbeği + lacivert gömlek/kravat.
   Tüm bölümler SADECE bu değişkenleri kullanır; yeni renk eklemeyin.
   ========================================================================== */
:root {
  /* Renkler */
  --navy-900: #0b1f36;   /* en koyu: footer, başlık metni */
  --navy-800: #102a47;   /* ana lacivert: başlıklar, birincil buton */
  --navy-700: #1a3a5e;   /* hover / ikincil koyu yüzey */
  --cyan-500: #3fb4d3;   /* lanyard camgöbeği: vurgu, ikonlar, çizgiler */
  --cyan-600: #1f8fb0;   /* metin üzerinde okunur camgöbeği (AA, beyaz zeminde) */
  --cyan-100: #e3f4f9;   /* çok açık camgöbeği yüzey */
  --steel-50: #f4f7fa;   /* soğuk açık gri bölüm zemini */
  --steel-200: #d9e2ea;  /* kenarlık / ayırıcı */
  --steel-500: #5f7184;  /* ikincil metin */
  --ink: #16263a;        /* gövde metni */
  --white: #ffffff;

  --color-bg: var(--white);
  --color-bg-alt: var(--steel-50);
  --color-text: var(--ink);
  --color-text-muted: var(--steel-500);
  --color-heading: var(--navy-800);
  --color-accent: var(--cyan-500);
  --color-accent-text: var(--cyan-600);
  --color-border: var(--steel-200);
  --color-focus: var(--cyan-500);

  /* Tipografi (Google Fonts, latin-ext → Türkçe karakterler tam) */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Figtree", "Segoe UI", system-ui, sans-serif;

  --fs-300: 0.875rem;                               /* 14px küçük not */
  --fs-400: 1rem;                                   /* 16px gövde */
  --fs-500: 1.125rem;                               /* 18px giriş paragrafı */
  --fs-600: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); /* kart başlığı */
  --fs-700: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); /* bölüm başlığı (h2) */
  --fs-800: clamp(2.25rem, 1.6rem + 3vw, 4rem);     /* hero başlık (h1) */

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Boşluklar (4px tabanlı) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-pad: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); /* bölüm dikey dolgu */
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);          /* yatay kenar boşluğu */

  /* Düzen */
  --container: 1180px;
  --container-narrow: 760px;
  --header-h: 68px;

  /* Köşe yarıçapı: hiyerarşiye göre, her yerde aynı değil */
  --radius-sm: 6px;    /* input, rozet */
  --radius-md: 12px;   /* kart */
  --radius-lg: 20px;   /* fotoğraf */
  --radius-pill: 999px;/* sadece birincil CTA */

  /* Gölge: yalnızca yükseltilmiş öğeler (sticky header, hero foto) */
  --shadow-1: 0 1px 2px rgba(11, 31, 54, 0.06), 0 2px 8px rgba(11, 31, 54, 0.05);
  --shadow-2: 0 12px 32px -12px rgba(11, 31, 54, 0.28);

  /* Hareket */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
  }
}

/* base.css */
/* ==========================================================================
   Temel stiller: reset, tipografi, ortak yardımcı sınıflar.
   Bölüm dosyaları bunların üzerine kurulur; burayı değiştirmeyin.
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--color-heading);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h3 { line-height: var(--lh-snug); }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--color-accent-text); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }

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

/* ---- Düzen yardımcıları ---- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-pad); }
.section--alt { background: var(--color-bg-alt); }

/* Bölüm başlığı: h2 + isteğe bağlı kısa açıklama. Büyük harfli "eyebrow" YOK. */
.section-head { max-width: var(--container-narrow); margin-bottom: var(--space-7); }
.section-head h2 { font-size: var(--fs-700); }
.section-head p {
  margin-top: var(--space-4);
  font-size: var(--fs-500);
  color: var(--color-text-muted);
}

/* ---- Butonlar ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-400);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn--primary { background: var(--navy-800); color: var(--white); }
.btn--primary:hover { background: var(--navy-700); }
.btn--ghost { background: transparent; color: var(--navy-800); border-color: var(--steel-200); }
.btn--ghost:hover { border-color: var(--cyan-500); }

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

.skip-link {
  position: absolute; left: var(--space-4); top: -100px;
  z-index: 200;
  padding: var(--space-2) var(--space-4);
  background: var(--navy-800); color: var(--white);
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: var(--space-4); }

/* ---- Bölüm başlığı altındaki ince çizgi (motion.css soldan çizer) ---- */
.section-head h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: var(--space-4);
  border-radius: 2px;
  background: var(--cyan-500);
  transform-origin: left center;
}

/* ---- Buton mikro-etkileşimleri ---- */
.btn { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
}
.btn:active { transform: translateY(0) scale(0.97); }

/* layout.css */
/* ==========================================================================
   Ortak düzen: header (sticky menü), footer, sayfa hero iskeleti, sayfa geçişleri.
   Önekler: .site-header, .nav-, .site-footer, .page-hero
   ========================================================================== */

/* ---------- Header ---------- */
/* Sayfalar arası geçişte header sabit kalır (view-transition-name).
   Kaydırınca: header 8px yukarı kayarak incelir, kenarlık + gölge katmanı belirir.
   Yalnızca transform/opacity; yükseklik değişmez → layout kayması yok. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  view-transition-name: site-header;
  transition: transform var(--dur) var(--ease);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 8px 24px -16px rgba(11, 31, 54, 0.35);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.site-header.is-scrolled::before,
.site-header.is-open::before { opacity: 1; }
.site-header.is-scrolled { transform: translateY(-8px); }
.site-header-inner,
.nav-brand { transition: transform var(--dur) var(--ease); }
.site-header.is-scrolled .site-header-inner { transform: translateY(4px); }
.site-header.is-scrolled .nav-brand { transform: scale(0.94); transform-origin: left center; }

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

.nav-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  min-width: 0;
  text-decoration: none;
  color: var(--navy-800);
}
.nav-brand-name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.125rem;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}
.nav-brand-role {
  margin-top: 2px;
  font-size: var(--fs-300);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-right: calc(-1 * var(--space-2));
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--navy-800);
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

.nav-list { list-style: none; }
.nav-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--ink);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.nav-link:hover { color: var(--navy-800); }

/* Mobil: JS varsa panel gizli, hamburger görünür.
   JS yoksa linkler header altında akar (erişilebilir kalır). */
.nav-panel { display: none; }
.site-header:not(.site-header--js) .site-header-inner { flex-wrap: wrap; padding-block: var(--space-2); }
.site-header:not(.site-header--js) .nav-panel { display: block; width: 100%; }

.site-header--js .nav-toggle { display: inline-flex; }
.site-header--js .nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  padding: var(--space-2) var(--gutter) var(--space-5);
  background: var(--white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-2);
}
.site-header--js.is-open .nav-panel { display: block; }

.nav-panel .nav-list li + li { border-top: 1px solid var(--color-border); }
.nav-panel .nav-link { min-height: 52px; font-size: var(--fs-500); }
.nav-cta { width: 100%; margin-top: var(--space-4); }

/* Masaüstü: yatay menü */
@media (min-width: 960px) {
  .site-header--js .nav-toggle,
  .nav-toggle { display: none; }

  .site-header .nav-panel,
  .site-header--js .nav-panel,
  .site-header--js.is-open .nav-panel,
  .site-header:not(.site-header--js) .nav-panel {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--space-5);
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .site-header:not(.site-header--js) .site-header-inner { flex-wrap: nowrap; padding-block: 0; }

  .nav-list { display: flex; align-items: center; gap: var(--space-1); }
  .nav-panel .nav-list li + li { border-top: 0; }
  .nav-panel .nav-link {
    min-height: 44px;
    padding-inline: var(--space-2);
    font-size: 0.9375rem;
    text-decoration: underline 2px transparent;
    text-underline-offset: 8px;
    transition: text-decoration-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .nav-panel .nav-link:hover { text-decoration-color: var(--cyan-500); }

  .nav-cta {
    width: auto;
    margin-top: 0;
    min-height: 44px;
    padding-inline: var(--space-5);
    font-size: 0.9375rem;
  }

  /* 960–1099px arası dar: alt satır unvanı gizle, menüye yer aç */
  .nav-brand-role { display: none; }
}
@media (min-width: 1100px) {
  .nav-brand-role { display: block; }
}

/* ---------- Footer ---------- */
.site-footer {
  padding-block: var(--space-8) var(--space-6);
  background: var(--navy-900);
  color: var(--steel-200);
  font-size: var(--fs-400);
}
.site-footer a {
  color: var(--white);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--cyan-500);
  text-decoration: underline;
}

.site-footer-grid {
  display: grid;
  gap: var(--space-7);
}
.site-footer-name {
  font-family: var(--font-display);
  font-size: var(--fs-600);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--white);
}
.site-footer-role { margin-top: var(--space-2); color: var(--white); }
.site-footer-org { margin-top: var(--space-1); color: var(--steel-200); }

.site-footer-heading {
  margin-bottom: var(--space-3);
  font-weight: var(--fw-semibold);
  color: var(--cyan-500);
}
.site-footer-list { list-style: none; }
.site-footer-nav .site-footer-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-footer-contact .site-footer-list li { padding-block: var(--space-2); }

.site-footer-bottom {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--navy-700);
  font-size: var(--fs-300);
  color: var(--steel-200);
}
.site-footer-note { max-width: 60ch; }

@media (min-width: 640px) {
  .site-footer-grid { grid-template-columns: 1fr 1fr; }
  .site-footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .site-footer-grid { grid-template-columns: 2fr 1fr 1fr; }
  .site-footer-brand { grid-column: auto; }
  .site-footer-bottom {
    grid-template-columns: auto 1fr;
    gap: var(--space-6);
    align-items: baseline;
  }
  .site-footer-note { justify-self: end; text-align: right; }
}

/* ---------- Aktif sayfa (build aria-current="page" ekler) ---------- */
.nav-link[aria-current="page"] {
  color: var(--navy-800);
  font-weight: var(--fw-semibold);
  box-shadow: inset 3px 0 0 var(--cyan-500);
  padding-left: var(--space-3);
}
@media (min-width: 960px) {
  .nav-panel .nav-link[aria-current="page"] {
    box-shadow: none;
    padding-left: var(--space-2);
    text-decoration-color: var(--cyan-500);
  }
}

/* ---------- Sayfa hero iskeleti (tüm sayfalar) ----------
   <section class="page-hero"> > .container.page-hero-inner > .page-hero-text + .page-hero-visual
   Açılış sırası data-hero="1..5" ile (motion.css). */
.page-hero {
  padding-block: var(--space-6) var(--space-8);
  background: var(--white);
  overflow-x: clip;
}
.page-hero--alt { background: var(--color-bg-alt); }
.page-hero-inner {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
.page-hero-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  color: var(--cyan-600);
}
.page-hero-label::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--cyan-500);
}
.page-hero-title {
  margin-top: var(--space-3);
  font-size: var(--fs-800);
  color: var(--navy-900);
  letter-spacing: -0.025em;
}
.page-hero-lead {
  max-width: 36rem;
  margin-top: var(--space-4);
  font-size: var(--fs-500);
  color: var(--color-text-muted);
}
.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.page-hero-visual {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  color: var(--cyan-500);
}
.page-hero-visual svg { width: 100%; height: auto; overflow: visible; }

@media (min-width: 900px) {
  .page-hero { padding-block: var(--space-8) var(--space-9); }
  .page-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: var(--space-8);
  }
  .page-hero-visual { margin-inline: 0; }
}

/* ---------- Sayfalar arası geçiş (cross-document View Transitions) ---------- */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 200ms var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in 320ms var(--ease) 60ms both; }
  ::view-transition-group(site-header) { animation-duration: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* Etiket iki satıra kırılırsa çizgi ilk satırda kalsın */
.page-hero-label { align-items: flex-start; }
.page-hero-label::before { flex: none; margin-top: 0.62em; }

/* motion.css */
/* ==========================================================================
   Ortak animasyon sistemi (sözleşme: brief v2 "ANİMASYON SÖZLEŞMESİ")
   - [data-hero="1..5"] + .hw : hero açılışı, saf CSS, JS beklemez
   - .section-head            : h2 alttan gelir + h2::after soldan çizilir (motion.js)
   - [data-reveal]            : kaydırınca fade-up, DOM sırasına göre stagger (motion.js)
   - [data-progress]          : motion.js --progress (0..1) yazar
   - .is-seen                 : öğe bir kez göründükten sonra kalıcı sınıf
   Yalnızca transform + opacity. Gizleyen kurallar yalnızca html.js altında ve
   yalnızca prefers-reduced-motion: no-preference içinde.
   ========================================================================== */

/* JS/IO yoksa veya reduce'da ilerleme dolu görünür */
[data-progress] { --progress: 1; }

@media (prefers-reduced-motion: no-preference) {

  /* ---------- 1. Hero açılışı ---------- */
  html.js [data-hero] {
    --hero-dur: 600ms;
    animation: mo-hero-up var(--hero-dur) var(--ease) both;
    animation-delay: var(--hero-d, 80ms);
  }
  html.js [data-hero="1"] { --hero-d: 80ms; }
  html.js [data-hero="2"] { --hero-d: 230ms; }
  html.js [data-hero="3"] { --hero-d: 380ms; }
  html.js [data-hero="4"] { --hero-d: 530ms; }
  html.js [data-hero="5"] { --hero-d: 680ms; animation-name: mo-hero-scale; }

  /* Kelime bazlı başlık: kapsayıcı sabit, kelimeler 60ms arayla */
  html.js [data-hero]:has(.hw) { animation: none; }
  html.js .hw {
    display: inline-block;
    animation: mo-hero-up var(--hero-dur, 600ms) var(--ease) both;
    animation-delay: calc(var(--hero-d, 80ms) + var(--hw-i, 0) * 60ms);
  }
  html.js .hw:nth-of-type(2) { --hw-i: 1; }
  html.js .hw:nth-of-type(3) { --hw-i: 2; }
  html.js .hw:nth-of-type(4) { --hw-i: 3; }
  html.js .hw:nth-of-type(5) { --hw-i: 4; }
  html.js .hw:nth-of-type(6) { --hw-i: 5; }
  html.js .hw:nth-of-type(7) { --hw-i: 6; }
  html.js .hw:nth-of-type(8) { --hw-i: 7; }
  html.js .hw:nth-of-type(n+9) { --hw-i: 8; }

  /* ---------- 2. Bölüm başlıkları ---------- */
  html.js .section-head.rv h2,
  html.js .section-head.rv > p {
    opacity: 0;
    transform: translateY(16px);
  }
  html.js .section-head.rv h2::after { transform: scaleX(0); }

  html.js .section-head.rv.rv-in h2,
  html.js .section-head.rv.rv-in > p {
    opacity: 1;
    transform: none;
    transition: opacity 560ms var(--ease), transform 560ms var(--ease);
    transition-delay: var(--rv-delay, 0ms);
  }
  html.js .section-head.rv.rv-in > p { transition-delay: calc(var(--rv-delay, 0ms) + 120ms); }
  html.js .section-head.rv.rv-in h2::after {
    transform: scaleX(1);
    transition: transform 640ms var(--ease) calc(var(--rv-delay, 0ms) + 220ms);
  }

  /* ---------- 3. Kaydırınca giriş ---------- */
  html.js [data-reveal].rv:not(.section-head) {
    opacity: 0;
    transform: translateY(18px);
  }
  /* Geçiş yalnızca reveal süresince geçerli; motion.js sonra rv/rv-in'i kaldırır,
     böylece kartların kendi hover transition'ı devralır. */
  html.js [data-reveal].rv.rv-in:not(.section-head) {
    opacity: 1;
    transform: none;
    transition: opacity 560ms var(--ease), transform 560ms var(--ease);
    transition-delay: var(--rv-delay, 0ms);
  }

  /* ---------- Mobil (<640px): süreler ~%25 kısa ---------- */
  @media (max-width: 639.98px) {
    html.js [data-hero] { --hero-dur: 450ms; }
    html.js [data-hero="2"] { --hero-d: 190ms; }
    html.js [data-hero="3"] { --hero-d: 300ms; }
    html.js [data-hero="4"] { --hero-d: 410ms; }
    html.js [data-hero="5"] { --hero-d: 520ms; }

    html.js .section-head.rv.rv-in h2,
    html.js .section-head.rv.rv-in > p,
    html.js [data-reveal].rv.rv-in:not(.section-head) {
      transition-duration: 420ms;
    }
    html.js .section-head.rv.rv-in h2::after { transition-duration: 480ms; }
  }
}

@keyframes mo-hero-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes mo-hero-scale {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* Yazdırırken her şey görünür */
@media print {
  html.js .rv,
  html.js .rv h2,
  html.js .rv > p,
  html.js [data-hero],
  html.js .hw {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  html.js .rv h2::after { transform: none !important; }
}

/* home.css */
/* ==========================================================================
   Ana sayfa (önek: home-)
   Hero (foto + stereotaktik çerçeve), tanıtım, öne çıkan alanlar, son sunum, randevu bandı.
   ========================================================================== */

/* ---------- Hero ---------- */
.home-hero-title {
  font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem);
  line-height: 1.04;
}
.home-hero-role {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-600);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--navy-700);
}
.home-hero-lead { margin-top: var(--space-4); max-width: 34rem; }

.home-hero-visual { max-width: 460px; }
.home-hero-figure {
  position: relative;
  width: 80%;
  margin-inline: auto;
}
.home-hero-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 8;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--steel-50);
  box-shadow: var(--shadow-2);
}

/* SVG, fotoğraf kutusunun her yanından 40/700 ve 40/800 oranında taşar */
.home-hero-visual .home-motif {
  position: absolute;
  top: -5%;
  left: -5.7143%;
  width: 111.4286%;
  max-width: none;
  height: 110%;
  overflow: visible;
  color: var(--cyan-500);
  opacity: 0.8;
  pointer-events: none;
}
.home-motif-ticks,
.home-motif-cross { opacity: 0.85; }
.home-motif-pulse { opacity: 0; }

@media (min-width: 900px) {
  .home-hero-figure { width: calc(100% - 3rem); }
}
@media (min-width: 1100px) {
  .home-hero .page-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
    gap: var(--space-9);
  }
  .home-hero-visual { max-width: 500px; }
}

/* Çerçeve "çizimi": yalnızca transform/opacity. Fotoğrafın girişinden sonra (≥900ms). */
@media (prefers-reduced-motion: no-preference) {
  html.js .home-motif-h,
  html.js .home-motif-v,
  html.js .home-motif-target,
  html.js .home-motif-pulse {
    transform-box: fill-box;
  }
  html.js .home-motif-o-l { transform-origin: 0% 50%; }
  html.js .home-motif-o-r { transform-origin: 100% 50%; }
  html.js .home-motif-o-t { transform-origin: 50% 0%; }
  html.js .home-motif-o-b { transform-origin: 50% 100%; }

  html.js .home-motif-h { animation: home-draw-x 700ms var(--ease) both; }
  html.js .home-motif-v { animation: home-draw-y 700ms var(--ease) both; }
  html.js .home-motif .c1 { animation-delay: 950ms; }
  html.js .home-motif .c2 { animation-delay: 1070ms; }
  html.js .home-motif .c3 { animation-delay: 1190ms; }
  html.js .home-motif .c4 { animation-delay: 1310ms; }

  html.js .home-motif-ticks { animation: home-fade 600ms var(--ease) both; }
  html.js .home-motif-ticks.t1 { animation-delay: 1400ms; }
  html.js .home-motif-ticks.t2 { animation-delay: 1500ms; }

  html.js .home-motif-target {
    transform-origin: 50% 50%;
    animation: home-target 600ms var(--ease) 1650ms both;
  }
  html.js .home-motif-cross { animation: home-fade 500ms var(--ease) 1750ms both; }

  /* Sakin nabız: 2.4 sn genişleme + kısa dinlenme. fill-mode yok → beklerken görünmez. */
  html.js .home-motif-pulse {
    transform-origin: 50% 50%;
    animation: home-pulse 3.2s ease-out 2400ms infinite;
  }

  @media (max-width: 639.98px) {
    html.js .home-motif-h,
    html.js .home-motif-v { animation-duration: 525ms; }
    html.js .home-motif .c1 { animation-delay: 720ms; }
    html.js .home-motif .c2 { animation-delay: 810ms; }
    html.js .home-motif .c3 { animation-delay: 900ms; }
    html.js .home-motif .c4 { animation-delay: 990ms; }
    html.js .home-motif-ticks { animation-duration: 450ms; }
    html.js .home-motif-ticks.t1 { animation-delay: 1050ms; }
    html.js .home-motif-ticks.t2 { animation-delay: 1130ms; }
    html.js .home-motif-target { animation-duration: 450ms; animation-delay: 1240ms; }
    html.js .home-motif-cross { animation-duration: 380ms; animation-delay: 1320ms; }
    html.js .home-motif-pulse { animation-delay: 1900ms; }
  }
}

@keyframes home-draw-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes home-draw-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes home-fade { from { opacity: 0; } to { opacity: 0.85; } }
@keyframes home-target {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: none; }
}
@keyframes home-pulse {
  0% { opacity: 0.6; transform: scale(1); }
  75%, 100% { opacity: 0; transform: scale(2.4); }
}

/* ---------- Ortak metin linki ---------- */
.home-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: var(--fw-semibold);
  color: var(--navy-800);
  text-decoration: underline 2px var(--cyan-500);
  text-underline-offset: 6px;
  transition: color var(--dur-fast) var(--ease);
}
.home-link:hover { color: var(--cyan-600); }
.home-link--after { margin-top: var(--space-6); }

/* ---------- Tanıtım ---------- */
.home-intro {
  display: grid;
  gap: var(--space-7);
}
.home-intro .section-head { margin-bottom: var(--space-5); }
.home-intro-text { max-width: 38rem; }
.home-intro-text > p { font-size: var(--fs-500); }
.home-intro-text > p + p { margin-top: var(--space-4); }
.home-intro-text .home-link { margin-top: var(--space-5); }

.home-path {
  position: relative;
  display: grid;
  gap: var(--space-5);
  padding-left: var(--space-6);
  list-style: none;
  align-self: center;
}
.home-path::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: var(--steel-200);
}
.home-path-item {
  position: relative;
  display: grid;
  gap: var(--space-1);
}
.home-path-item::before,
.home-path-item--now::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-6));
  top: 0.3rem;
  width: 12px;
  height: 12px;
  border: 2px solid var(--cyan-500);
  z-index: 1;
  border-radius: 50%;
  background: var(--white);
}
.home-path-item--now::before { background: var(--cyan-500); }
.home-path-item--now::after { opacity: 0; background: transparent; }
.home-path-year {
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  color: var(--cyan-600);
}
.home-path-name {
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  /* Zaman çizgisi kaydırdıkça dolar (motion.js --progress) */
  html.js .home-path::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--cyan-500);
    transform: scaleY(var(--progress, 1));
    transform-origin: top;
  }
  /* "Halen" noktası: göründükten sonra bir kez halka yayar */
  html.js .home-path-item--now.is-seen::after {
    animation: home-ring 1.4s var(--ease) 300ms 1 both;
  }
}
@keyframes home-ring {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.6); }
}

@media (min-width: 900px) {
  .home-intro {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: center;
  }
}

/* ---------- Öne çıkan alan kartları ---------- */
.home-cards {
  display: grid;
  gap: var(--space-4);
  list-style: none;
}
.home-cards > li { display: flex; }
.home-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur-fast) var(--ease);
}
/* Küçük stereotaktik köşe işareti */
.home-card::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-bottom: var(--space-4);
  border-top: 2px solid var(--cyan-500);
  border-left: 2px solid var(--cyan-500);
}
.home-card-title {
  font-size: 1.1875rem;
  line-height: var(--lh-snug);
  color: var(--navy-800);
}
.home-card-text {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}
.home-card-more {
  margin-top: auto;
  padding-top: var(--space-4);
  font-weight: var(--fw-semibold);
  color: var(--navy-800);
  text-decoration: underline 2px var(--cyan-500);
  text-underline-offset: 6px;
}
.home-card:focus-visible { border-color: var(--cyan-500); }
@media (hover: hover) {
  .home-card:hover {
    transform: translateY(-3px);
    border-color: var(--cyan-500);
  }
}

@media (min-width: 640px) {
  .home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
}
@media (min-width: 1100px) {
  .home-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Son sözlü sunum ---------- */
.home-talk {
  position: relative;
  max-width: var(--container-narrow);
  padding: var(--space-6) var(--space-5);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.home-talk-mark {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 40px;
  height: 40px;
  color: var(--cyan-500);
}
.home-talk-type,
.home-talk-title { padding-right: 3.5rem; }
.home-talk-type {
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  color: var(--cyan-600);
}
.home-talk-title {
  margin-top: var(--space-2);
  font-size: var(--fs-700);
  color: var(--navy-900);
}
.home-talk-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.home-talk-facts dt {
  font-size: var(--fs-300);
  color: var(--color-text-muted);
}
.home-talk-facts dd {
  margin: var(--space-1) 0 0;
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--ink);
}
@media (min-width: 640px) {
  .home-talk { padding: var(--space-7); }
  .home-talk-mark { top: var(--space-7); right: var(--space-7); width: 48px; height: 48px; }
}
@media (min-width: 760px) {
  .home-talk-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Randevu bandı ---------- */
.home-cta {
  position: relative;
  display: grid;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-5);
  background: var(--navy-800);
  color: var(--white);
  border-radius: var(--radius-lg);
}
/* Köşe işaretleri (çerçeve motifinin tekrarı) */
.home-cta::before,
.home-cta::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--cyan-500);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
}
.home-cta::before { top: var(--space-4); left: var(--space-4); border-top-width: 2px; border-left-width: 2px; }
.home-cta::after { bottom: var(--space-4); right: var(--space-4); border-bottom-width: 2px; border-right-width: 2px; }
.home-cta-title {
  font-size: var(--fs-700);
  color: var(--white);
}
.home-cta-lead {
  max-width: 36rem;
  margin-top: var(--space-3);
  font-size: var(--fs-500);
  color: var(--steel-200);
}
.home-cta-btn {
  background: var(--white);
  color: var(--navy-800);
  justify-self: start;
}
.home-cta-btn:hover { background: var(--cyan-100); }
.home-cta-btn:focus-visible { outline-color: var(--cyan-500); }

@media (max-width: 479.98px) {
  .home-cta-btn { justify-self: stretch; }
}
@media (min-width: 760px) {
  .home-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-7);
    padding: var(--space-8);
  }
}

/* about.css */
/* ==========================================================================
   Hakkımda sayfası (.about-) + Eğitim ve Görevler zaman çizelgesi (.edu-)
   Mobil öncelikli; yalnızca tokens.css değişkenleri. Animasyonlar yalnızca
   html.js + prefers-reduced-motion: no-preference altında.
   ========================================================================== */

/* ---------- Hero görseli: muayene fotoğrafı ---------- */
.page-hakkimda .page-hero-visual {
  max-width: 560px;
  margin-inline: 0;
}
@media (min-width: 900px) {
  .page-hakkimda .page-hero-visual { max-width: 440px; }
}

.about-hero-photo {
  position: relative;
  margin: 0;
}
.about-hero-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 35%; /* dosya yüz ortada olacak şekilde 4:3 kırpıldı */
  border-radius: var(--radius-lg);
  background: var(--steel-50);
  box-shadow: var(--shadow-1);
}
/* Stereotaktik köşe işaretleri (ince camgöbeği) */
.about-hero-photo::before,
.about-hero-photo::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid var(--cyan-500);
  pointer-events: none;
}
.about-hero-photo::before {
  top: -8px;
  left: -8px;
  border-top-width: 2px;
  border-left-width: 2px;
  border-top-left-radius: 4px;
}
.about-hero-photo::after {
  right: -8px;
  bottom: -8px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-bottom-right-radius: 4px;
}

/* ---------- Hero: Giresun → Antalya yol çizgisi ---------- */
.about-route {
  margin-top: var(--space-6);
  color: var(--cyan-500);
}
.page-hero-visual .about-route-svg {
  display: block;
  width: 100%;
  height: 24px;
  overflow: visible;
}
.about-route-base {
  stroke: var(--steel-200);
  stroke-width: 2;
  stroke-linecap: round;
}
.about-route-fill {
  stroke: var(--cyan-500);
  stroke-width: 2;
  stroke-linecap: round;
}
.about-route-dot {
  fill: var(--white);
  stroke: var(--cyan-500);
  stroke-width: 2;
}
.about-route-dot--4 { fill: var(--cyan-500); }
.about-route-ring {
  fill: var(--cyan-500);
  opacity: 0;
}

.about-route-stops {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--space-2);
  list-style: none;
  text-align: center;
}
.about-route-city,
.about-route-year {
  display: block;
  line-height: var(--lh-snug);
}
.about-route-city {
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  color: var(--navy-800);
  overflow-wrap: anywhere;
}
.about-route-year {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.about-route-stop--4 .about-route-year { color: var(--cyan-600); }

@media (min-width: 640px) {
  .about-route-city,
  .about-route-year { font-size: var(--fs-300); }
}

/* Çizgi soldan dolar, duraklar sırayla belirir, Antalya sakin nabız atar.
   Görselin girişinden sonra başlar (≥900ms; mobilde ≥700ms). */
@media (prefers-reduced-motion: no-preference) {
  html.js .about-route {
    --route-delay: 1000ms;
    --route-dur: 2400ms;
  }
  html.js .about-route-fill,
  html.js .about-route-dot,
  html.js .about-route-ring {
    transform-box: fill-box;
  }
  html.js .about-route-fill {
    transform-origin: left center;
    animation: about-route-draw var(--route-dur) linear var(--route-delay) both;
  }
  html.js .about-route-dot {
    transform-origin: center;
    animation: about-route-pop 420ms var(--ease) both;
  }
  html.js .about-route-stop {
    animation: about-route-label 480ms var(--ease) both;
  }
  html.js .about-route-dot--1,
  html.js .about-route-stop--1 { animation-delay: var(--route-delay); }
  html.js .about-route-dot--2,
  html.js .about-route-stop--2 { animation-delay: calc(var(--route-delay) + var(--route-dur) / 3); }
  html.js .about-route-dot--3,
  html.js .about-route-stop--3 { animation-delay: calc(var(--route-delay) + var(--route-dur) * 2 / 3); }
  html.js .about-route-dot--4,
  html.js .about-route-stop--4 { animation-delay: calc(var(--route-delay) + var(--route-dur)); }

  html.js .about-route-ring {
    transform-origin: center;
    animation: about-route-pulse 3.6s ease-out calc(var(--route-delay) + var(--route-dur) + 500ms) infinite;
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 639px) {
  html.js .about-route {
    --route-delay: 750ms;
    --route-dur: 1800ms;
  }
}

@keyframes about-route-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes about-route-pop {
  from { opacity: 0; transform: scale(0.3); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes about-route-label {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes about-route-pulse {
  0% { opacity: 0.45; transform: scale(1); }
  60%, 100% { opacity: 0; transform: scale(2.6); }
}

/* ---------- Özgeçmiş ---------- */
.about-body {
  display: grid;
  gap: var(--space-6);
}

.about-text { max-width: 66ch; }
.about-text p { font-size: var(--fs-500); }
.about-text p + p { margin-top: var(--space-4); }

.about-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
}
.about-text .about-links { font-size: var(--fs-400); }
.about-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: var(--fw-semibold);
}

.about-facts {
  margin: 0;
  border-top: 2px solid var(--cyan-500);
}
.about-fact {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.about-fact dt {
  font-size: var(--fs-300);
  color: var(--color-text-muted);
}
.about-fact dd {
  margin: var(--space-1) 0 0;
  font-weight: var(--fw-semibold);
  color: var(--navy-800);
  line-height: var(--lh-snug);
}

@media (min-width: 52rem) {
  .about-body {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--space-8);
    align-items: start;
  }
}

/* ---------- Eğitim ve Görevler: dikey zaman çizelgesi ---------- */
.edu-track {
  --edu-dot: 16px;
  --edu-dot-top: 0.3rem;   /* noktanın öğe üstünden uzaklığı */
  --edu-rail: 0px;         /* çizginin soldan konumu (desktop'ta yıl sütunu genişliği) */
  --edu-x: calc(var(--edu-rail) + var(--edu-dot) / 2); /* çizgi merkezi */
  position: relative;
  max-width: var(--container-narrow);
}

/* Gri temel çizgi + camgöbeği dolgu (kaydırdıkça --progress ile dolar) */
.edu-track::before,
.edu-fill {
  content: "";
  position: absolute;
  left: calc(var(--edu-x) - 1px);
  top: 0.75rem;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
}
.edu-track::before { background: var(--color-border); }
.edu-fill {
  display: block;
  background: var(--cyan-500);
  transform-origin: top;
}
html.js .edu-fill { transform: scaleY(var(--progress, 1)); }

/* Grup başlığı: çizgi üzerinde küçük yatay çentik */
.edu-group {
  position: relative;
  padding-left: calc(var(--edu-rail) + var(--edu-dot) + var(--space-5));
  margin-bottom: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-400);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--cyan-600);
}
.edu-group::before {
  content: "";
  position: absolute;
  left: calc(var(--edu-x) - 7px);
  top: 0.75rem;
  width: 14px;
  height: 2px;
  background: var(--cyan-600);
}

.edu-list { list-style: none; }
.edu-list + .edu-group { margin-top: var(--space-6); }

.edu-item {
  position: relative;
  padding-left: calc(var(--edu-rail) + var(--edu-dot) + var(--space-5));
  padding-bottom: var(--space-6);
}
.edu-item:last-child { padding-bottom: 0; }

/* Nokta */
.edu-item::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: var(--edu-rail);
  top: var(--edu-dot-top);
  width: var(--edu-dot);
  height: var(--edu-dot);
  border: 2px solid var(--cyan-500);
  border-radius: 50%;
  background: var(--white);
}
.edu-item--current::after {
  background: var(--cyan-500);
  box-shadow: 0 0 0 4px var(--cyan-100);
}
/* "2026 - Halen" noktasının arkasındaki halka (yalnızca .is-seen sonrası, 3 kez) */
.edu-item--current::before {
  content: "";
  position: absolute;
  left: var(--edu-rail);
  top: var(--edu-dot-top);
  width: var(--edu-dot);
  height: var(--edu-dot);
  border-radius: 50%;
  background: var(--cyan-500);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .edu-item--current.is-seen::before {
    animation: edu-ring 2.4s ease-out 500ms 3;
  }
}
@keyframes edu-ring {
  0% { opacity: 0.4; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(2.6); }
}

.edu-years {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-snug);
}
.edu-item--current .edu-years { color: var(--cyan-600); }

.edu-body { margin-top: var(--space-1); }
.edu-title {
  font-size: var(--fs-600);
  overflow-wrap: break-word;
}
.edu-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

.edu-tag {
  display: inline-block;
  padding: 0.125rem var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--cyan-100);
  color: var(--navy-800);
  font-size: var(--fs-300);
  font-weight: var(--fw-medium);
}
.edu-tag--duty {
  background: var(--steel-50);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

/* Desktop: yıllar solda ayrı sütun, çizgi ortada */
@media (min-width: 48rem) {
  .edu-track {
    --edu-rail: 9.5rem;
    --edu-dot-top: 0.45rem;
  }
  .edu-item { padding-bottom: var(--space-7); }
  .edu-list + .edu-group { margin-top: var(--space-7); }
  .edu-years {
    position: absolute;
    left: 0;
    top: 0.2rem;
    width: calc(var(--edu-rail) - var(--space-5));
    text-align: right;
  }
  .edu-body { margin-top: 0; }
}

/* expertise.css */
/* ==========================================================================
   Uzmanlık Alanları sayfası (/uzmanlik-alanlari) — önek: .expertise-
   Hero beyin/DBS illüstrasyonu, gruplu alan kartları, omurga illüstrasyonu, randevu çağrısı.
   Animasyonlar yalnızca html.js + prefers-reduced-motion: no-preference altında;
   sadece transform/opacity. Reduce'da her şey son hâlinde, statik.
   ========================================================================== */

/* Mobilde süreler ~%25 kısa */
.page-uzmanlik-alanlari { --expertise-k: 0.75; }
@media (min-width: 640px) {
  .page-uzmanlik-alanlari { --expertise-k: 1; }
}

/* ---------- Hero illüstrasyonu: beyin + DBS ---------- */
.expertise-hero-visual { max-width: 420px; }
.expertise-brain {
  width: 100%;
  height: auto;
  aspect-ratio: 440 / 420;
}
.expertise-brain-frame { stroke: var(--steel-200); stroke-width: 1.5; }
.expertise-brain-shape {
  stroke: var(--navy-800);
  stroke-width: 1.75;
  fill: var(--steel-50);
}
.expertise-brain-stem { stroke: var(--navy-800); stroke-width: 1.75; }
.expertise-brain-line { stroke: var(--navy-800); opacity: 0.32; stroke-width: 1.25; }
.expertise-path { stroke: var(--cyan-500); stroke-width: 1.5; opacity: 0.55; }
.expertise-target { stroke: var(--cyan-600); stroke-width: 1.25; }
.expertise-target-dot { fill: var(--cyan-500); stroke: none; }
.expertise-pulse {
  stroke: var(--cyan-500);
  stroke-width: 1.25;
  opacity: 0.5;
  transform-box: fill-box;
  transform-origin: center;
}
.expertise-electrode-hold { stroke: var(--navy-800); fill: var(--white); }
.expertise-electrode-rod { stroke: none; fill: var(--navy-800); }
.expertise-electrode-contact { stroke: none; fill: var(--cyan-500); }

@media (prefers-reduced-motion: no-preference) {
  html.js .expertise-path {
    animation: expertise-path-pulse calc(5200ms * var(--expertise-k, 1)) ease-in-out infinite both;
    animation-delay: calc((900ms + var(--i, 0) * 800ms) * var(--expertise-k, 1));
  }
  html.js .expertise-electrode {
    animation: expertise-electrode-in calc(1600ms * var(--expertise-k, 1)) cubic-bezier(0.45, 0, 0.25, 1) both;
    animation-delay: calc(1000ms * var(--expertise-k, 1));
  }
  html.js .expertise-pulse {
    animation: expertise-pulse calc(3600ms * var(--expertise-k, 1)) ease-in-out infinite both;
    animation-delay: calc(2700ms * var(--expertise-k, 1));
  }
}

@keyframes expertise-path-pulse {
  0%, 100% { opacity: 0.16; }
  50% { opacity: 0.9; }
}
@keyframes expertise-electrode-in {
  from { transform: translateY(-190px); }
  to { transform: translateY(0); }
}
@keyframes expertise-pulse {
  0% { transform: scale(0.6); opacity: 0; }
  25% { opacity: 0.75; }
  100% { transform: scale(2); opacity: 0; }
}

/* ---------- Gruplar ve kartlar ---------- */
.expertise-grid {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.expertise-card {
  min-width: 0;
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--cyan-500);
  border-radius: var(--radius-md);
  scroll-margin-top: calc(var(--header-h) + var(--space-5));
  transition: transform var(--dur) var(--ease), border-color var(--dur-fast) var(--ease);
}
.expertise-card:target { border-color: var(--cyan-500); }
@media (hover: hover) {
  .expertise-card:hover {
    transform: translateY(-3px);
    border-color: var(--cyan-500);
  }
}

.expertise-card-title {
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
  overflow-wrap: break-word;
  hyphens: auto;
}
.expertise-card-text {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

@media (min-width: 640px) {
  .expertise-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
}
@media (min-width: 1024px) {
  .expertise-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .expertise-card { padding: var(--space-6); }
}

/* ---------- Omurga grubu: başlık + omurga illüstrasyonu ---------- */
.expertise-group-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
  margin-bottom: var(--space-7);
}
.expertise-group-top .section-head { margin-bottom: 0; }
.expertise-spine {
  width: clamp(60px, 17vw, 120px);
  color: var(--navy-800);
}
.expertise-spine svg { width: 100%; height: auto; aspect-ratio: 140 / 360; }
.expertise-omur { stroke: var(--navy-800); }
.expertise-omur rect { fill: var(--white); }
.expertise-disk { stroke: none; fill: var(--cyan-500); opacity: 0.85; }
.expertise-spine-cord { stroke: var(--cyan-500); stroke-width: 2; opacity: 0.55; }

@media (min-width: 900px) {
  .expertise-group-top { gap: var(--space-8); align-items: center; }
  .expertise-spine { width: 120px; margin-right: var(--space-6); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Grup görünene kadar omurlar ve diskler gizli; .is-seen gelince yukarıdan aşağı sırayla belirir */
  html.js .expertise-spine:not(.is-seen) .expertise-omur,
  html.js .expertise-spine:not(.is-seen) .expertise-disk { opacity: 0; }

  html.js .expertise-spine.is-seen .expertise-omur {
    animation: expertise-omur-in calc(560ms * var(--expertise-k, 1)) var(--ease) both;
    animation-delay: calc((120ms + var(--i, 0) * 120ms) * var(--expertise-k, 1));
  }
  html.js .expertise-spine.is-seen .expertise-disk {
    animation:
      expertise-disk-in calc(480ms * var(--expertise-k, 1)) var(--ease) both,
      expertise-disk-breathe 6s ease-in-out infinite;
    animation-delay:
      calc((240ms + var(--i, 0) * 120ms) * var(--expertise-k, 1)),
      calc(1800ms + var(--i, 0) * 350ms);
  }
}

@keyframes expertise-omur-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes expertise-disk-in {
  from { opacity: 0; }
  to { opacity: 0.85; }
}
@keyframes expertise-disk-breathe {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.4; }
}

/* ---------- Sayfa sonu randevu çağrısı ---------- */
.expertise-cta {
  position: relative;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: var(--space-7) var(--space-5);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}
/* Stereotaktik köşe işaretleri (sitenin imzası, küçük hâli) */
.expertise-cta::before,
.expertise-cta::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--cyan-500);
  pointer-events: none;
}
.expertise-cta::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.expertise-cta::after { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }

.expertise-cta-title { font-size: var(--fs-700); }
.expertise-cta-text {
  max-width: 34rem;
  margin: var(--space-4) auto 0;
  font-size: var(--fs-500);
  color: var(--color-text-muted);
}
.expertise-cta-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

@media (min-width: 640px) {
  .expertise-cta { padding: var(--space-8) var(--space-7); }
}

/* congress.css */
/* ==========================================================================
   Sunumlar ve Kongreler sayfası (.congress-)
   Hero illüstrasyonu: sunum ekranında EEG benzeri sinyal akışı.
   ========================================================================== */

/* ---------- Hero illüstrasyonu ---------- */
.congress-signal { aspect-ratio: 440 / 340; }
.congress-sig-corners { stroke: var(--cyan-500); }
.congress-sig-frame { stroke: var(--navy-800); }
.congress-sig-grid { stroke: var(--steel-200); }
.congress-sig-ticks { stroke: var(--steel-500); }
.congress-sig-cursor { stroke: var(--cyan-500); opacity: 0.7; }
.congress-sig-target { stroke: var(--cyan-500); }

.congress-wave--1 { stroke: var(--cyan-500); }
.congress-wave--2 { stroke: var(--navy-800); opacity: 0.75; }
.congress-wave--3 { stroke: var(--cyan-600); }

/* Her dalga yolu iki ekran genişliğinde çizildi (periyot ekran genişliğini tam böler);
   fill-box ile -50% kaydırma tam bir ekran genişliği eder → kesintisiz döngü. */
@media (prefers-reduced-motion: no-preference) {
  html.js .congress-wave {
    transform-box: fill-box;
    will-change: transform;
    animation: congress-wave-slide 8s linear 1000ms infinite;
  }
  html.js .congress-wave--1 { animation-duration: 7s; }
  html.js .congress-wave--2 { animation-duration: 10s; }
  html.js .congress-wave--3 { animation-duration: 8.5s; }

  html.js .congress-sig-cursor {
    animation: congress-pulse 4s ease-in-out 1100ms infinite alternate;
  }
  html.js .congress-sig-target {
    transform-box: fill-box;
    transform-origin: center;
    animation: congress-pulse 6s ease-in-out 1300ms infinite alternate;
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 639px) {
  html.js .congress-wave { animation-delay: 700ms; }
  html.js .congress-sig-cursor { animation-delay: 800ms; }
  html.js .congress-sig-target { animation-delay: 900ms; }
}

@keyframes congress-wave-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes congress-pulse {
  from { opacity: 0.85; }
  to { opacity: 0.3; }
}

/* ---------- Sözlü sunumlar: büyük kartlar ---------- */
.congress-talks {
  list-style: none;
  display: grid;
  gap: var(--space-5);
}
.congress-talk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  column-gap: var(--space-4);
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--cyan-500);
  border-radius: var(--radius-md);
  transition: transform var(--dur) var(--ease), border-color var(--dur-fast) var(--ease);
}
.congress-talk-type {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  color: var(--color-accent-text);
}
.congress-talk-year {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--steel-200);
  font-variant-numeric: tabular-nums;
}
.congress-talk-title {
  grid-column: 1 / -1;
  margin-top: var(--space-4);
  font-size: var(--fs-600);
  line-height: var(--lh-snug);
}
.congress-talk-meta {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.congress-talk-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
}
.congress-talk-row dt {
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
}
.congress-talk-row dd {
  margin: 0;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

/* ---------- Katılım kayıtları ---------- */
.congress-list {
  list-style: none;
  display: grid;
  gap: var(--space-4);
}
.congress-item {
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform var(--dur) var(--ease), border-color var(--dur-fast) var(--ease);
}
.congress-item-role {
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  color: var(--color-accent-text);
}
.congress-item-name {
  margin-top: var(--space-2);
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
}
.congress-item-meta {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-3);
}
.congress-years {
  font-weight: var(--fw-semibold);
  color: var(--navy-800);
  font-variant-numeric: tabular-nums;
}
.congress-place {
  font-size: var(--fs-300);
  color: var(--color-text-muted);
}

@media (hover: hover) {
  .congress-talk:hover,
  .congress-item:hover {
    transform: translateY(-3px);
    border-color: var(--cyan-500);
  }
}

/* ---------- Randevu çağrısı ---------- */
.congress-cta { padding-block: var(--space-8); }
.congress-cta-inner {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  padding: var(--space-6) var(--space-5);
  background: var(--cyan-100);
  border-radius: var(--radius-md);
}
.congress-cta-title { font-size: var(--fs-600); }
.congress-cta-text {
  max-width: 40rem;
  margin-top: var(--space-2);
  color: var(--color-text);
}

@media (min-width: 720px) {
  .congress-list { grid-template-columns: 1fr 1fr; }
  .congress-cta-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--space-6) var(--space-7);
  }
}
@media (min-width: 900px) {
  .congress-talks {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
  .congress-talk { padding: var(--space-6); }
}

/* contact.css */
/* ==========================================================================
   İletişim sayfası (.contact-): hero sinyal illüstrasyonu + randevu (DEMO form)
   Mobil öncelikli; yalnızca tokens.css değişkenleri.
   ========================================================================== */

/* ---------- Hero: sakin sinyal çizgisi ---------- */
.contact-signal {
  aspect-ratio: 440 / 240;
  color: var(--cyan-500);
}
.contact-signal-frame,
.contact-signal-target { stroke: var(--cyan-500); }
.contact-signal-ticks { stroke: var(--steel-200); }
.contact-signal-base {
  stroke: var(--steel-200);
  stroke-width: 1.25;
  stroke-dasharray: 2 6;
}
.contact-signal-wave { stroke: var(--cyan-500); }
.contact-signal-dot { fill: var(--navy-800); }

@media (prefers-reduced-motion: no-preference) {
  html.js .contact-signal-wave {
    animation: contact-signal-scroll 6s linear 900ms infinite;
  }
  html.js .contact-signal-dot {
    animation: contact-signal-blink 3.2s ease-in-out 1200ms infinite;
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 639px) {
  html.js .contact-signal-wave { animation-delay: 700ms; }
  html.js .contact-signal-dot { animation-delay: 900ms; }
}
@keyframes contact-signal-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-440px); }
}
@keyframes contact-signal-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* ---------- Randevu bölümü ---------- */
.contact-grid {
  display: grid;
  gap: var(--space-7);
}

.contact-info-title {
  font-size: var(--fs-600);
  line-height: var(--lh-snug);
}
.contact-info-sub {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}
.contact-list {
  margin: var(--space-5) 0 0;
}
.contact-row {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.contact-row:last-child { border-bottom: 1px solid var(--color-border); }
.contact-row dt {
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
}
.contact-row dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.contact-placeholder {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  background: var(--cyan-100);
  border: 1px dashed var(--cyan-600);
  border-radius: var(--radius-sm);
  color: var(--navy-800);
  font-weight: var(--fw-medium);
}

.contact-form-wrap {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.contact-form {
  display: grid;
  gap: var(--space-5);
}
.contact-form[hidden] { display: none; }
.contact-form-title { font-size: var(--fs-600); }

.contact-field {
  display: grid;
  gap: var(--space-2);
}
.contact-field label {
  font-weight: var(--fw-semibold);
  color: var(--navy-800);
}
.contact-optional {
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}
.contact-field input,
.contact-field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  font-size: 16px; /* iOS odak yakınlaştırmasını engeller */
  line-height: var(--lh-snug);
  background: var(--white);
  border: 1px solid var(--steel-200);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease);
}
.contact-field input[type="date"] { appearance: none; -webkit-appearance: none; }
.contact-field textarea {
  min-height: 120px;
  resize: vertical;
}
.contact-field input:hover,
.contact-field textarea:hover { border-color: var(--steel-500); }
.contact-field input:focus,
.contact-field textarea:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 1px;
  border-color: var(--navy-800);
}

.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.contact-consent input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  margin-top: 2px;
  accent-color: var(--navy-800);
  cursor: pointer;
}
.contact-consent label {
  font-size: 16px;
  line-height: var(--lh-snug);
  cursor: pointer;
  padding-block: var(--space-1);
}

.contact-submit { width: 100%; }

.contact-note {
  font-size: var(--fs-300);
  color: var(--color-text-muted);
}

/* Durum mesajı (form.js doldurur) */
.contact-status:empty { display: none; }
.contact-status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--cyan-100);
  border-left: 4px solid var(--cyan-500);
  border-radius: var(--radius-sm);
  color: var(--navy-800);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
}
.contact-status-check {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--cyan-600);
}

/* Gönderim mikro-etkileşimi: form kısa solar, mesaj yumuşakça gelir */
@media (prefers-reduced-motion: no-preference) {
  .contact-form {
    transition: opacity 250ms var(--ease), transform 250ms var(--ease);
  }
  .contact-form.is-leaving {
    opacity: 0;
    transform: translateY(-8px);
  }
  .contact-status.is-visible {
    animation: contact-status-in 360ms var(--ease) both;
  }
  .contact-status.is-visible .contact-status-check {
    animation: contact-check-in 420ms var(--ease) 160ms both;
  }
}
@keyframes contact-status-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes contact-check-in {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}

@media (min-width: 560px) {
  .contact-submit { width: auto; justify-self: start; }
}

@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-8);
    align-items: start;
  }
  .contact-form-wrap { padding: var(--space-6); }
}