/*
Theme Name: Vital (Başakşehir Tıp Merkezi)
Theme URI: https://basaksehirtipmerkezi.com/
Author: Başakşehir Tıp Merkezi BT Ekibi
Description: Hastane için tasarlanmış, mobil uyumlu ve WCAG 2.2 AA erişilebilirlik standardına uygun modern WordPress teması. İmza öğesi olarak nabız (EKG) çizgisi motifini kullanır.
Version: 1.0.0
Requires PHP: 8.0
Text Domain: vital
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
  /* Color */
  --color-ink: #16302E;
  --color-paper: #F7F2EC;
  --color-teal: #2F6F6B;
  --color-teal-dark: #204F4C;
  --color-vital: #E15A4D;
  --color-vital-dark: #C6473B;
  --color-mint: #DCEAE6;
  --color-slate: #5B6B6A;
  --color-white: #FFFFFF;
  --color-border: #CBD9D6;

  /* Logo palette — the hospital's own diamond mark (green / navy /
     orange / red). Used to add color variety to repeating icon rows
     (Hızlı Erişim, Tıbbi Birimler) instead of one flat mint tone
     everywhere. Each has a soft tint for icon-circle backgrounds. */
  --color-logo-green: #1E8449;
  --color-logo-green-tint: #E3F3E9;
  --color-logo-navy: #2E4F73;
  --color-logo-navy-tint: #E5EAF0;
  --color-logo-orange: #D9713F;
  --color-logo-orange-tint: #FBEBE2;
  --color-logo-red: #C0392B;
  --color-logo-red-tint: #F8E4E1;

  /* Type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.13rem + 0.35vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.75vw, 2.1rem);
  --step-3:  clamp(2rem, 1.7rem + 1.5vw, 3.2rem);
  --step-4:  clamp(2.6rem, 2.1rem + 2.5vw, 4.4rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --focus-ring: 3px solid var(--color-vital);
  --max-width: 1200px;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--color-teal-dark); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--color-vital-dark); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0 0 var(--space-2); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-teal);
}

/* Visible, high-contrast focus for every interactive element (WCAG 2.2 §2.4.11/2.4.13) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  background: var(--color-ink);
  color: var(--color-white);
  padding: var(--space-2) var(--space-3);
  z-index: 10000;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

/* Header content spans closer to the true screen edges than the
   standard 1200px content width, so the menu has real room to
   breathe on wide screens instead of sitting in a centered island. */
.site-header .container,
.top-bar .container {
  max-width: 1800px;
  padding-inline: var(--space-4);
}
@media (max-width: 860px) {
  .site-header .container,
  .top-bar .container {
    padding-inline: var(--space-3);
  }
  .site-branding img {
    max-height: 44px !important;
    max-width: 160px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

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

/* ==========================================================================
   3. Buttons & form controls (44px+ touch targets — WCAG 2.2 §2.5.8)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.75em 1.5em;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--step-0);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--color-vital); color: var(--color-white); }
.btn-primary:hover { background: var(--color-vital-dark); color: var(--color-white); }
.btn-secondary { background: transparent; border-color: var(--color-teal); color: var(--color-teal-dark); }
.btn-secondary:hover { background: var(--color-mint); color: var(--color-teal-dark); }

label { font-weight: 600; font-size: var(--step--1); display: block; margin-bottom: 0.35em; }
input, select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.65em 0.9em;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--step-0);
  background: var(--color-white);
  color: var(--color-ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--color-teal); }

/* NOTE: do not add `overflow-x: hidden` here as a safety net — setting
   only overflow-x forces the browser to compute overflow-y as `auto`,
   which breaks position:sticky (like .site-header) on mobile browsers.
   Fix horizontal-overflow sources at the root instead. */

/* ==========================================================================
   4. Site header
   ========================================================================== */
.site-header-sticky {
  position: sticky;
  top: 0;
  z-index: 950;
}
.site-header {
  background: rgba(247, 242, 236, 0.98);
  /* NOTE: do not add backdrop-filter/filter here — it turns this
     element into a containing block for position:fixed descendants
     (like the mobile off-canvas .primary-nav panel), which then
     positions itself relative to this header instead of the full
     viewport, breaking the full-height slide-in menu on mobile. */
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-block: var(--space-2);
}
.site-branding { display: flex; align-items: center; gap: 0.5em; text-decoration: none; min-width: 0; flex-shrink: 0; margin-right: calc(var(--space-1) + 12px); }
.site-branding img {
  /* Fixed on purpose (per request) — edit this px value directly to
     resize the logo instead of using the Customizer control.
     Deliberately taller than the header strip itself: the negative
     margin pulls its MARGIN BOX (what flexbox uses to size the header
     row) back down to ~48px, while the visible image overflows past
     the strip — asymmetrically, leaning further down (onto the slider
     below) than up (into the top bar), per request. Keep
     margin-top + margin-bottom summing to roughly -(max-height-48px)
     if you change the height, and adjust the split to taste. */
  display: block !important;
  max-height: 80px !important;
  height: auto !important;
  max-width: 260px !important;
  width: auto !important;
  object-fit: contain;
  margin-top: -61px;
  margin-bottom: -4px;
  position: relative;
  z-index: 1;
  /* Soft light contour so the logo stays legible where it now
     overlaps the dark top bar. Applies to the whole flat image (the
     diamond mark AND the text below it) — CSS can't selectively
     outline just the top part of a single PNG. If you want the
     contour ONLY around the diamond, that needs to be baked into the
     PNG itself (e.g. a subtle white stroke/glow added in your image
     editor around just that shape). */
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.9)) drop-shadow(0 0 6px rgba(255,255,255,0.6));
}
@media (max-width: 860px) {
  /* The big upward overflow only makes sense on desktop, where it
     pokes into the top bar sitting above the header. On mobile the
     top bar is hidden and the header is a single compact row, so the
     same large negative margin left the logo looking cramped/clipped
     — fall back to a small, safe overflow instead. */
  .site-branding img {
    max-height: 52px !important;
    margin-top: -6px;
    margin-bottom: -6px;
  }
}
.site-title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--color-ink);
  margin: 0;
}
.site-title a, .site-title-link { color: inherit; text-decoration: none; }

.header-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.menu-toggle {
  display: none;
  min-width: 48px; min-height: 48px;
  background: transparent; border: 2px solid var(--color-border);
  border-radius: var(--radius-sm); cursor: pointer;
}

/* Nav sits inline between logo and actions, taking whatever space is
   left; priority-plus JS (main.js) measures this space and collapses
   overflowing items into a "Diğer" dropdown so it never wraps. */
.primary-nav { flex: 1 1 auto; min-width: 0; }
.primary-nav ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.15em var(--space-2);
  list-style: none;
  margin: 0; padding: 0;
}
.primary-nav li { position: relative; flex-shrink: 0; }
.primary-nav a {
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--color-ink);
  text-decoration: none;
  padding: 0.5em 0.1em;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.primary-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}
.primary-nav a:hover, .primary-nav a:focus-visible { border-bottom-color: var(--color-vital); }

/* Sub-menu (dropdown) */
.primary-nav .sub-menu {
  display: none;
  flex-direction: column;
  gap: 0;
  min-width: 240px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 32px rgba(22,48,46,0.14);
  padding: 0.5em;
}
.primary-nav .sub-menu .sub-menu { box-shadow: none; }
.primary-nav .sub-menu li { width: 100%; }
.primary-nav .sub-menu a {
  display: block;
  padding: 0.6em 0.75em;
  border-bottom: none;
  border-radius: var(--radius-sm);
  white-space: normal;
}
.primary-nav .sub-menu a:hover, .primary-nav .sub-menu a:focus-visible {
  background: var(--color-mint);
}

/* Toggle button injected by JS next to items that have children */
.submenu-toggle {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  margin-left: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-ink);
}
.submenu-toggle:hover { background: var(--color-mint); }
.submenu-toggle svg { width: 14px; height: 14px; transition: transform 0.15s ease; }
@media (min-width: 861px) {
  .submenu-toggle svg { display: none; }
}
.menu-item-has-children.is-open > .submenu-toggle svg { transform: rotate(180deg); }
.menu-item-has-children.is-open > .sub-menu { display: flex; }
@media (min-width: 861px) {
  /* Hover opens the dropdown directly — no need to click the (now
     hidden) toggle arrow first. The click toggle still works too, for
     keyboard/touch users who can't hover. */
  .primary-nav > ul > .menu-item-has-children:hover > .sub-menu { display: flex; }
}

@media (min-width: 861px) {
  .primary-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 600;
    margin-top: 0;
  }
  .primary-nav .sub-menu .sub-menu {
    top: 0;
    left: 100%;
  }
  /* The "Diğer" overflow item's own dropdown should hug the right
     edge of the nav instead of overflowing the viewport. */
  .vital-more-item > .sub-menu { left: auto; right: 0; }
}

@media (max-width: 860px) {
  .primary-nav {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--color-white);
    transform: translateY(-100%);
    transition: transform 0.25s ease;
    padding: var(--space-3);
    box-shadow: 0 8px 24px rgba(22,48,46,0.15);
    overflow-y: auto;
    flex: none;
  }
  .primary-nav[data-open="true"] { transform: translateY(0); }
  .primary-nav > ul { flex-direction: column; flex-wrap: wrap; align-items: stretch; gap: var(--space-1); }
  .primary-nav .sub-menu {
    position: static;
    box-shadow: none;
    border-color: var(--color-border);
    margin: 0.15em 0 0.15em 0.75em;
  }
  .menu-toggle { display: block; margin-left: auto; }
  .header-actions { margin-left: auto; }

  /* Mobile menu covers the whole screen when open — hide the logo so
     it can't visually poke through/over the "Menü" panel header. */
  body.vital-nav-open .site-branding { display: none; }
  .primary-nav { z-index: 2; }

  /* Top bar content moves in here on mobile — see .mobile-nav-extras below. */
  .top-bar { display: none; }

  .primary-nav__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-1);
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-border);
  }
  .primary-nav__panel-head span {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-0);
    color: var(--color-ink);
  }
  .primary-nav__close {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--color-mint);
    color: var(--color-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .primary-nav > ul > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border);
  }
  .primary-nav > ul > li > .sub-menu {
    flex-basis: 100%;
    order: 3;
  }
  .primary-nav > ul > li[hidden] {
    display: none !important;
  }
  .primary-nav > ul > li > a {
    flex: 1 1 auto;
    width: auto;
    padding-block: 0.55em;
    font-size: var(--step--1);
    min-height: 40px;
  }
  .primary-nav > ul > li > .submenu-toggle {
    position: static;
    flex-shrink: 0;
  }
}
@media (min-width: 861px) {
  .primary-nav__panel-head { display: none; }
}

/* Utility links/phone/social, shown only inside the mobile off-canvas
   panel (hidden on desktop where the top bar already shows them). */
.mobile-nav-extras { display: none; }
.mobile-nav-extras__search { display: none; }
@media (max-width: 860px) {
  .mobile-nav-extras__search { display: flex; }
  .mobile-nav-extras {
    display: block;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
  }
  .mobile-nav-extras__label {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-teal);
    margin: 0 0 var(--space-1);
  }
  .mobile-nav-extras__menu {
    list-style: none;
    margin: 0 0 var(--space-1);
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.4em;
  }
  .mobile-nav-extras__menu li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .mobile-nav-extras__menu a {
    margin: 0;
    padding: 0;
  }
  .mobile-nav-extras__menu a {
    font-weight: 600;
    font-size: var(--step--1);
    color: var(--color-ink);
    text-decoration: none;
  }
  .mobile-nav-extras__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-weight: 700;
    font-size: var(--step--1);
    color: var(--color-teal-dark);
    text-decoration: none;
    margin-bottom: var(--space-1);
  }
  .mobile-nav-extras__social {
    display: flex;
    gap: 0.5em;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .mobile-nav-extras__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--color-mint);
    color: var(--color-teal-dark);
  }
}

/* ==========================================================================
   3b. Top bar — utility links, social icons, phone — all right-aligned
   ========================================================================== */
.top-bar {
  background: var(--color-ink);
  color: var(--color-mint);
  font-size: var(--step--1);
}
.top-bar__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-block: 0.5em;
}
.top-bar__menu ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  margin: 0; padding: 0;
  /* Clears the logo, which overflows up into this row, and roughly
     aligns this row's start with the main menu's first item below it.
     This is an approximation (exact logo width varies by file) — if
     it doesn't line up pixel-perfect with your logo, adjust this
     value directly. */
  /* --vital-logo-clearance is set by JS to the logo's actual rendered
     width, so this lines up exactly regardless of the logo file's own
     dimensions — the 250px is only a fallback for the instant before
     JS runs. */
  margin-left: var(--vital-logo-clearance, 250px);
}
.top-bar__menu a {
  color: var(--color-mint);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.01em;
}
.top-bar__menu a:hover { color: var(--color-white); }

.top-bar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.top-bar__phone a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--color-white);
  text-decoration: none;
  font-weight: 600;
  min-height: 44px;
  padding-left: var(--space-3);
  border-left: 1px solid rgba(255,255,255,0.2);
}
.top-bar__phone:first-child a { border-left: none; padding-left: 0; }
.top-bar__phone a:hover { color: var(--color-mint); }
.top-bar__social {
  display: flex;
  align-items: center;
  gap: 0.35em;
  list-style: none;
  margin: 0; padding: 0;
}
.top-bar__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: var(--color-white);
  background: rgba(255,255,255,0.08);
}
.top-bar__social a:hover { background: var(--color-vital); }
.top-bar__social svg { width: 16px; height: 16px; }

.top-bar__search { position: relative; display: flex; align-items: center; }
.top-bar__search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.08);
  color: var(--color-white);
  cursor: pointer;
}
.top-bar__search-toggle:hover { background: var(--color-vital); }
.top-bar__search-form {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.3em;
  background: var(--color-white);
  border-radius: 999px;
  padding: 0.3em 0.3em 0.3em 1em;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  width: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: width 0.25s ease, opacity 0.2s ease;
}
.top-bar__search.is-open .top-bar__search-form {
  width: 260px;
  opacity: 1;
  pointer-events: auto;
}
.top-bar__search-form input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font-size: var(--step--1);
  color: var(--color-ink);
  background: transparent;
}
.top-bar__search-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--color-vital);
  color: var(--color-white);
  cursor: pointer;
  flex-shrink: 0;
}

/* Mobile search field, inside the off-canvas menu. NOTE: visibility
   (display:none by default, display:flex only under max-width:860px)
   is controlled where .mobile-nav-extras lives — do not add display
   here, or it'll override that and leak onto desktop. */
.mobile-nav-extras__search {
  align-items: center;
  gap: 0.5em;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.4em 0.4em 0.4em 1em;
  margin: var(--space-2) 0;
}
.mobile-nav-extras__search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--step--1);
  color: var(--color-ink);
}
.mobile-nav-extras__search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--color-teal);
  color: var(--color-white);
  cursor: pointer;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .top-bar__phone span { display: none; }
  .top-bar__menu { display: none; } /* keep the mobile top bar compact */
}

/* ==========================================================================
   5. Pulse-line signature divider
   ========================================================================== */
.pulse-divider { width: 100%; overflow: hidden; line-height: 0; }
.pulse-divider svg { width: 100%; height: auto; }
.pulse-divider path {
  stroke: var(--color-vital);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: vital-pulse-draw-divider 4s ease-in-out infinite;
}
@keyframes vital-pulse-draw-divider {
  0% { stroke-dashoffset: 1600; }
  65%, 100% { stroke-dashoffset: 0; }
}

/* ==========================================================================
   6. Hero — appointment-first
   ========================================================================== */
.hero {
  padding-block: var(--space-6) var(--space-5);
  background: linear-gradient(180deg, var(--color-mint) 0%, var(--color-paper) 70%);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-5);
  align-items: center;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

.hero__lede { font-size: var(--step-1); color: var(--color-slate); max-width: 46ch; }

/* ==========================================================================
   6b. Hero — "Pulse Editorial" concept
   ========================================================================== */
.hero-pulse {
  position: relative;
  overflow: hidden;
  background: var(--color-ink);
  padding-block: var(--space-6) var(--space-5);
}
.hero-pulse__bg {
  position: absolute;
  inset: 0;
}
.hero-pulse__bg svg { width: 100%; height: 100%; }
.hero-pulse__line {
  fill: none;
  stroke: var(--color-vital);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2750;
  stroke-dashoffset: 2750;
  opacity: 0.5;
  animation: vital-pulse-draw 4s ease-in-out infinite;
}
@keyframes vital-pulse-draw {
  0% { stroke-dashoffset: 2750; }
  65%, 100% { stroke-dashoffset: 0; }
}
.hero-pulse__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: var(--space-5);
  align-items: end;
}
@media (max-width: 900px) { .hero-pulse__inner { grid-template-columns: 1fr; } }

.hero-pulse--compact { padding-block: var(--space-4) var(--space-4); }
.hero-pulse--compact .hero-pulse__inner { grid-template-columns: 1fr; }
.hero-pulse--compact .hero-pulse__text h1 {
  font-size: var(--step-2);
  max-width: 28ch;
}
.hero-pulse--compact .hero-pulse__lede {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: var(--step-0);
}
@media (max-width: 700px) {
  .hero-pulse--compact .hero-pulse__lede { white-space: normal; }
}

.hero-pulse__text .eyebrow { color: var(--color-mint); }
.hero-pulse__text h1 { color: var(--color-white); max-width: 16ch; }
.hero-pulse__lede { font-size: var(--step-1); color: rgba(247,242,236,0.8); max-width: 46ch; margin-bottom: var(--space-3); }

.hero-pulse__links {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  align-items: flex-start;
}
.hero-pulse__links-label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-mint);
  margin-bottom: 0.2em;
}
.hero-pulse__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1.1em;
  border-radius: 999px;
  border: 1px solid rgba(247,242,236,0.3);
  color: var(--color-white);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--step--1);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.hero-pulse__pill:hover, .hero-pulse__pill:focus-visible {
  border-color: var(--color-vital);
  background: rgba(225,90,77,0.15);
  color: var(--color-white);
}
.hero-pulse__pill svg { flex-shrink: 0; }

/* ==========================================================================
   6c. Ana Sayfa Hızlı Erişim (admin-managed quick actions)
   ========================================================================== */
.quick-actions {
  position: relative;
  z-index: 2;
  padding-block: 0 var(--space-3);
}
.quick-actions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
  margin-top: -33px;
}
.quick-actions__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  padding: var(--space-2) var(--space-2) 0.9em;
  border-radius: 26px 8px 26px 8px;
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--color-ink);
  font-weight: 700;
  font-size: var(--step--1);
  text-align: center;
  background: var(--color-white);
  box-shadow: 0 10px 20px rgba(22,48,46,0.1);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.quick-actions__item:hover, .quick-actions__item:focus-visible {
  color: var(--color-ink);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 28px rgba(22,48,46,0.18);
}
.quick-actions__item--green   { background: var(--color-logo-green-tint);  border-color: rgba(30,132,73,0.25); }
.quick-actions__item--navy    { background: var(--color-logo-navy-tint);   border-color: rgba(46,79,115,0.25); }
.quick-actions__item--orange  { background: var(--color-logo-orange-tint); border-color: rgba(217,113,63,0.3); }
.quick-actions__item--red     { background: var(--color-logo-red-tint);    border-color: rgba(192,57,43,0.25); }
.quick-actions__item--green:hover   { border-color: var(--color-logo-green); }
.quick-actions__item--navy:hover    { border-color: var(--color-logo-navy); }
.quick-actions__item--orange:hover  { border-color: var(--color-logo-orange); }
.quick-actions__item--red:hover     { border-color: var(--color-logo-red); }

.quick-actions__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-teal-dark);
  box-shadow: 0 8px 16px rgba(22,48,46,0.15);
  border: 3px solid var(--color-mint);
  transition: transform 0.2s ease;
}
.quick-actions__item:hover .quick-actions__icon { transform: scale(1.08) rotate(-4deg); }
.quick-actions__icon svg { width: 23px; height: 23px; }

/* ==========================================================================
   6e. Sertifikalar / Belgelerimiz gallery
   ========================================================================== */
.cert-gallery { position: relative; }
.cert-gallery__track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.cert-gallery--carousel .cert-gallery__track {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.cert-gallery--carousel .cert-gallery__track::-webkit-scrollbar { display: none; }
.cert-gallery--carousel .cert-gallery__item { flex: 0 0 calc(25% - var(--space-3) * 3 / 4); scroll-snap-align: start; }

.cert-gallery__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cert-gallery__item:hover, .cert-gallery__item:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(22,48,46,0.12);
}
.cert-gallery__item img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.cert-gallery__label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--color-ink);
  text-align: center;
}

.cert-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  box-shadow: 0 8px 16px rgba(22,48,46,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-ink);
}
.cert-gallery__arrow--prev { left: -20px; }
.cert-gallery__arrow--next { right: -20px; }

@media (max-width: 900px) {
  .cert-gallery__track { grid-template-columns: repeat(2, 1fr); }
  .cert-gallery--carousel .cert-gallery__item { flex-basis: calc(50% - var(--space-3) / 2); }
}
@media (max-width: 480px) {
  .cert-gallery__track { grid-template-columns: 1fr; }
  .cert-gallery--carousel .cert-gallery__item { flex-basis: 80%; }
}

/* Certificate lightbox modal — large image view */
.cert-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}
.cert-modal[hidden] {
  display: none;
}
.cert-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22,48,46,0.85);
}
.cert-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  min-width: 280px;
  min-height: 200px;
  max-width: min(90vw, 800px);
  max-height: 90vh;
  overflow-y: auto;
  text-align: center;
}
.cert-modal__panel img {
  max-width: 100%;
  max-height: 75vh;
  min-height: 120px;
  background: var(--color-mint);
  border-radius: var(--radius-sm);
  display: block;
  margin: 0 auto;
}
.cert-modal__panel p {
  margin-top: var(--space-2);
  font-weight: 700;
  color: var(--color-ink);
}
.cert-modal__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--color-mint);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.quick-actions__icon--green   { color: var(--color-logo-green);  border-color: var(--color-logo-green); }
.quick-actions__icon--navy    { color: var(--color-logo-navy);   border-color: var(--color-logo-navy); }
.quick-actions__icon--orange  { color: var(--color-logo-orange); border-color: var(--color-logo-orange); }
.quick-actions__icon--red     { color: var(--color-logo-red);    border-color: var(--color-logo-red); }

@media (max-width: 640px) {
  .quick-actions__grid { margin-top: -22px; }
  .quick-actions__icon { width: 46px; height: 46px; }
}

/* ==========================================================================
   6d. "Duyurular" edge panel + modal
   ========================================================================== */
.announcement-panel {
  position: fixed;
  right: 0;
  top: 40%;
  z-index: 890;
  transform: translateY(-50%) translateX(100%);
  transition: transform 0.6s ease;
}
.announcement-panel.is-visible { transform: translateY(-50%) translateX(0); }
.announcement-panel.is-collapsed { transition: transform 1s ease; }
.announcement-panel.is-visible.is-collapsed { transform: translateY(-50%) translateX(calc(100% - 48px)); }
.announcement-panel.is-collapsed .announcement-panel__close { display: none; }

.announcement-panel__close {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}
.announcement-panel__close:hover { background: var(--color-mint); }

.announcement-panel__trigger {
  display: flex;
  align-items: center;
  gap: 0.5em;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-right: none;
  padding: 0.5em 0.7em;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  box-shadow: -6px 0 20px rgba(22,48,46,0.18);
  cursor: pointer;
}
.announcement-panel__trigger:hover { background: var(--color-mint); }

.announcement-panel__bell {
  flex-shrink: 0;
  color: var(--color-vital);
  display: flex;
  animation: vital-bell-ring 6s ease infinite;
  transform-origin: top center;
}
@keyframes vital-bell-ring {
  0%, 16.67%, 100% { transform: rotate(0deg); }
  2.5% { transform: rotate(16deg); }
  5% { transform: rotate(-14deg); }
  7.5% { transform: rotate(8deg); }
  10% { transform: rotate(0deg); }
  12.5% { transform: rotate(14deg); }
  15% { transform: rotate(-10deg); }
}

.announcement-panel__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--color-ink);
  white-space: nowrap;
}

/* Modal — sized up ("daha büyük") compared to the callback forms, and
   restyled with a distinct header band for a more polished feel. */
.callback-modal__panel--large { max-width: 560px; }
.announcement-modal__panel { padding-top: 0; overflow: hidden; }
.announcement-modal__head {
  display: flex;
  align-items: center;
  gap: 0.6em;
  background: var(--color-mint);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.announcement-modal__head-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-vital);
  flex-shrink: 0;
}
.announcement-modal__head h2 { margin: 0; font-size: var(--step-1); }

.announcement-modal__viewport {
  position: relative;
  height: 258px; /* 3 rows x 86px */
  overflow: hidden;
  padding-inline: var(--space-4);
  margin-inline: calc(-1 * var(--space-4));
}
.announcement-modal__viewport.is-interactive {
  height: auto;
  max-height: 360px;
  overflow-y: auto;
}
.announcement-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.6s ease;
}
.announcement-modal__viewport.is-interactive .announcement-modal__list { transform: none !important; }

.announcement-modal__item { border-bottom: 1px solid var(--color-border); }
.announcement-modal__item:last-child { border-bottom: none; }

.announcement-modal__toggle {
  display: block;
  width: 100%;
  height: 86px;
  overflow: hidden;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.6em var(--space-4);
}
.announcement-modal__item.is-expanded .announcement-modal__toggle { height: auto; }
.announcement-modal__toggle:hover .announcement-modal__title { color: var(--color-teal-dark); }

.announcement-modal__date {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-teal);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.15em;
}
.announcement-modal__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--color-ink);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1.25;
}
.announcement-modal__excerpt {
  display: block;
  margin-top: 0.2em;
  color: var(--color-slate);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.announcement-modal__item.is-expanded .announcement-modal__excerpt { display: none; }
.announcement-modal__full {
  padding: 0 var(--space-4) var(--space-3);
  font-size: var(--step--1);
  color: var(--color-ink);
  line-height: 1.6;
}
.announcement-modal__full > * + * { margin-top: 0.6em; }

/* Fade the top/bottom edges of the 3-row window so items don't feel
   like they're cut off abruptly mid-scroll. Hidden once the user
   switches to the scrollable "is-interactive" reading mode. */
.announcement-modal__viewport::before,
.announcement-modal__viewport::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 16px;
  pointer-events: none;
  z-index: 1;
}
.announcement-modal__viewport::before { top: 0; background: linear-gradient(var(--color-white), transparent); }
.announcement-modal__viewport::after { bottom: 0; background: linear-gradient(transparent, var(--color-white)); }
.announcement-modal__viewport.is-interactive::before,
.announcement-modal__viewport.is-interactive::after { display: none; }

.appointment-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: 0 20px 40px rgba(22,48,46,0.08);
}
.appointment-card h2 { font-size: var(--step-1); margin-bottom: 0.25em; }
.appointment-card__sub { color: var(--color-slate); font-size: var(--step--1); margin-bottom: var(--space-3); }
.appointment-form { display: grid; gap: var(--space-2); }
.appointment-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 480px) { .appointment-form__row { grid-template-columns: 1fr; } }

.quick-access-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: 0 20px 40px rgba(22,48,46,0.08);
}
.quick-access-card h2 { font-size: var(--step-1); margin-bottom: 0.25em; }
.quick-access-card__sub { color: var(--color-slate); font-size: var(--step--1); margin-bottom: var(--space-3); }
.quick-access-card__list { display: grid; gap: 0.6em; }
.quick-access-card__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
  padding: 0.9em 1.1em;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-paper);
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 600;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.quick-access-card__item:hover, .quick-access-card__item:focus-visible {
  border-color: var(--color-teal);
  background: var(--color-mint);
  color: var(--color-ink);
}
.quick-access-card__item svg { flex-shrink: 0; color: var(--color-vital); }

/* ==========================================================================
   7. Sections: services, doctors, testimonials
   ========================================================================== */
.section { padding-block: var(--space-6); }
.section + .section { padding-top: var(--space-2); }
.section:has(+ .section) { padding-bottom: var(--space-2); }
.page-hero + .section { padding-top: var(--space-2); }
.quick-actions + .section { padding-top: var(--space-2); }
.section--tint { background: var(--color-mint); }
.section__head {
  max-width: 60ch;
  margin-bottom: var(--space-4);
}
.section__head h2 {
  font-size: var(--vital-section-heading-size, 32px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 600px) {
  .section__head h2 { white-space: normal; } /* let it wrap on very small screens rather than truncate */
}

.grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.archive-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) {
  .archive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .archive-grid { grid-template-columns: 1fr; }
}

.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  height: 100%;
}
.card__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--color-mint);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-2);
  color: var(--color-teal-dark);
}
.card--service:hover { border-color: var(--color-teal); }
.card--service { display: block; text-decoration: none; color: inherit; }

.archive-card__link { text-decoration: none; color: inherit; display: block; }
.archive-card__image {
  aspect-ratio: 4/3.4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-2);
}
.archive-card__image img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.archive-card h3 {
  font-size: var(--step-0);
  overflow-wrap: break-word;
  word-break: break-word;
  margin-bottom: 0.4em;
}

.doctor-card {
  text-align: left;
  display: block;
  text-decoration: none;
  color: inherit;
}
.doctor-card h4 { color: var(--color-ink); }
.doctor-card__name {
  font-size: var(--step-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0.2em;
}
.doctor-card__photo {
  aspect-ratio: 4/5;
  border-radius: var(--radius-md);
  background: var(--color-mint);
  overflow: hidden;
  margin-bottom: var(--space-2);
}
.doctor-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.doctor-card__branch {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-teal);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.35;
}

blockquote.testimonial {
  margin: 0;
  padding: var(--space-3);
  background: var(--color-white);
  border-left: 4px solid var(--color-vital);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--step-1);
}
blockquote.testimonial footer {
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--color-slate);
}

/* CTA band */
.cta-band {
  background: var(--color-ink);
  color: var(--color-paper);
  padding-block: var(--space-5);
  text-align: center;
}
.cta-band h2 { color: var(--color-white); }
.cta-band .btn-primary { background: var(--color-vital); }

/* ==========================================================================
   8. Footer
   ========================================================================== */
.footer-videos {
  background: var(--color-teal-dark);
  padding-block: var(--space-4);
}
.footer-videos__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.footer-video { display: flex; flex-direction: column; gap: 0.5em; }
.footer-video__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: var(--color-ink);
}
.footer-video__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.footer-video__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(225,90,77,0.92);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-video__thumb:hover .footer-video__play { background: var(--color-vital); }
.footer-video__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.6em 0.7em;
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  text-align: left;
}
.footer-video__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--step--1);
}
.footer-video__channel {
  display: block;
  color: rgba(255,255,255,0.75);
  font-size: 0.75rem;
  margin-top: 0.1em;
}
.footer-video iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  border-radius: var(--radius-md);
  display: block;
}
.footer-video__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: #cc0000;
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.3em 0.7em;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.footer-video__badge:hover { background: #a30000; color: var(--color-white); }

@media (max-width: 700px) {
  .footer-videos__track {
    display: flex;
    gap: 0;
    overflow-x: hidden; /* JS drives the scroll position — no manual swipe track visible */
    scroll-behavior: smooth;
  }
  .footer-video { flex: 0 0 100%; }
}

.site-footer {
  background: var(--color-ink);
  color: var(--color-mint);
  padding-block: var(--space-5) var(--space-3);
}
.footer-videos + .container { padding-top: var(--vital-footer-videos-gap, 48px); }
.site-footer a { color: var(--color-white); }
.footer-grid {
  display: grid;
  align-items: start;
  gap: var(--space-4);
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: var(--space-4);
}
.footer-grid h3 { color: var(--color-white); font-size: var(--step-0); font-weight: 600; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35em; }
.footer-col--menus ul { font-size: 0.85rem; }
.footer-col--menus li a { line-height: 1.3; }

.footer-about { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.footer-about__text { flex: 1 1 200px; min-width: 0; }
.footer-about__text p { font-size: 0.92rem; }
.footer-about__logo {
  max-width: 100%;
  width: auto;
  flex-shrink: 0;
}

.footer-meta { display: grid; gap: 0.4em; font-size: 0.85rem; }
.footer-meta li { display: flex; flex-direction: column; gap: 0.05em; }
.footer-meta span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-mint);
}
.footer-meta a { color: var(--color-white); }

@media (max-width: 780px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: var(--space-3);
  font-size: var(--step--1);
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  justify-content: space-between;
}

/* Info strip: optional, editable via Customizer (replaces the old hardcoded emergency message) */
.info-strip {
  background: var(--color-vital);
  color: var(--color-white);
  text-align: center;
  font-weight: 600;
  font-size: var(--step--1);
  padding: 0.5em var(--space-2);
}
.info-strip a { color: var(--color-white); text-decoration: underline; margin-left: 0.5em; }

/* ==========================================================================
 * 10. Tıbbi Birimler — icon card grid
 * ========================================================================== */
.unit-group + .unit-group { padding-top: 0; }
.unit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-2);
}
.unit-card {
  display: flex;
  align-items: center;
  gap: 0.9em;
  padding: 0.9em 1.1em;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-ink);
  font-weight: 600;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.unit-card:hover, .unit-card:focus-visible {
  border-color: var(--color-teal);
  transform: translateY(-2px);
  color: var(--color-ink);
}
.unit-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-mint);
  color: var(--color-teal-dark);
}
.unit-card__icon svg { width: 22px; height: 22px; }
.unit-card__icon--green   { background: var(--color-logo-green-tint);  color: var(--color-logo-green); }
.unit-card__icon--navy    { background: var(--color-logo-navy-tint);   color: var(--color-logo-navy); }
.unit-card__icon--orange  { background: var(--color-logo-orange-tint); color: var(--color-logo-orange); }
.unit-card__icon--red     { background: var(--color-logo-red-tint);    color: var(--color-logo-red); }
.unit-card__label { font-size: var(--step--1); line-height: 1.3; }
/* Generic content pages */
/* entry-content elements already carry the .container class in markup,
   so they inherit its max-width + centering automatically — no
   override needed here. (A "max-width: none" override used to live
   here; it broke that inheritance and made the text stretch to the
   viewport edge on wide screens instead of matching the cards above
   it, which stay capped and centered via .container.) */
.entry-content.section { padding-block: var(--space-3); }
.entry-content > * + * { margin-top: var(--space-2); }
.entry-content p, .entry-content ul, .entry-content ol, .entry-content blockquote {
  max-width: none;
}
.entry-content img {
  border-radius: var(--radius-md);
  margin-block: var(--space-2);
}
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 {
  margin-top: var(--space-4);
}
.page-hero { padding-block: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border); }
.page-hero h1 { font-size: var(--step-3); }

/* WordPress's classic image-alignment classes (set from the image
   toolbar in the editor: left/center/right/none). WordPress does not
   style these for you — themes are expected to. Scoped broadly (not
   just .entry-content) since they can appear in any post content. */
.alignleft {
  float: left;
  margin: 0.3em var(--space-3) var(--space-2) 0;
}
.alignright {
  float: right;
  margin: 0.3em 0 var(--space-2) var(--space-3);
}
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.alignnone {
  margin-block: var(--space-2);
}
img.alignleft, img.alignright, img.aligncenter, img.alignnone {
  height: auto;
  max-width: 100%;
  border-radius: var(--radius-md);
}
.wp-caption {
  max-width: 100%;
}
.wp-caption img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.wp-caption .wp-caption-text,
.wp-caption-text {
  font-size: var(--step--1);
  color: var(--color-slate);
  text-align: center;
  padding-block: 0.5em;
  margin: 0;
}
/* Two images placed directly back-to-back (a common cause of one
   floated image overlapping the next) always stack cleanly instead. */
img + img {
  clear: both;
  margin-top: var(--space-2);
}

/* Clear floats at the end of content so trailing elements (like the
   Check-Up package cards) don't ride up alongside a floated image. */
.entry-content::after {
  content: "";
  display: table;
  clear: both;
}

/* Legacy content tables (e.g. Check-Up comparison tables): full-width,
   readable, and horizontally scrollable on narrow screens instead of
   squeezing columns or breaking the page layout. */
.table-scroll {
  overflow-x: auto;
  margin-block: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  -webkit-overflow-scrolling: touch;
}
.entry-content table {
  width: 100%;
  max-width: none;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.entry-content table th,
.entry-content table td {
  padding: 0.65em 1em;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.entry-content table th {
  background: var(--color-mint);
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: var(--step--1);
  color: var(--color-teal-dark);
}
.entry-content table tr:nth-child(even) td { background: rgba(220, 234, 230, 0.25); }
.entry-content table tr:last-child td { border-bottom: none; }

/* ==========================================================================
 * 12. Check-Up packages
 * ========================================================================== */
.checkup-explore {
  background: linear-gradient(180deg, var(--color-mint) 0%, var(--color-paper) 100%);
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.checkup-explore h1, .checkup-explore h2 { margin-top: 0.2em; }
.checkup-explore--hero { padding-block: var(--space-5) var(--space-3); }
.checkup-explore__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.checkup-explore__card {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  padding: 1.25em 1.4em;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-ink);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.checkup-explore__card:hover, .checkup-explore__card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--color-vital);
}
.checkup-explore__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
}
.checkup-explore__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-vital-dark);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.checkup-package-hero { border-bottom: 1px solid var(--color-border); }
.checkup-package-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: var(--space-2);
}
.checkup-package-switch__item {
  padding: 0.5em 1em;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--step--1);
}
.checkup-package-switch__item.is-active {
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: var(--color-white);
}
.checkup-package-switch__item:hover:not(.is-active) { border-color: var(--color-teal); }

.checkup-category { padding-block: var(--space-3); }
.checkup-category + .checkup-category { border-top: 1px solid var(--color-border); }

/* ==========================================================================
   Anlaşmalı Kurumlar — pill-tag institution lists
   ========================================================================== */
.kurumlar-notice {
  background: var(--color-logo-red-tint);
  border: 1px solid rgba(192,57,43,0.3);
  color: var(--color-logo-red);
  font-weight: 700;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}
.kurumlar-group {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  box-shadow: 0 10px 20px rgba(22,48,46,0.06);
}
.kurumlar-group + .kurumlar-group { margin-top: var(--space-3); }
.kurumlar-group h2 { font-size: var(--vital-section-heading-size, 28px); margin-bottom: var(--space-2); }
.kurumlar-pills { display: flex; flex-wrap: wrap; gap: 0.6em; }
.kurumlar-pill {
  display: inline-flex;
  align-items: center;
  background: var(--color-mint);
  color: var(--color-teal-dark);
  font-weight: 600;
  font-size: var(--step--1);
  padding: 0.5em 1.1em;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.kurumlar-closing-note {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-slate);
  font-style: italic;
  font-size: var(--step--1);
}
.checkup-category__head {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: var(--space-2);
}
.checkup-category__head h2 { margin: 0; font-size: var(--step-2); }
.checkup-category__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-mint);
  color: var(--color-teal-dark);
  flex-shrink: 0;
}
.checkup-category__icon svg { width: 22px; height: 22px; }

.checkup-item-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.5em 1.5em;
}
.checkup-item-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  font-size: var(--step--1);
  line-height: 1.4;
}
.checkup-item-list li svg {
  flex-shrink: 0;
  margin-top: 0.2em;
  color: var(--color-teal);
}

/* ==========================================================================
 * 13. Homepage hero slider
 * ========================================================================== */
.hero-slider {
  position: relative;
  overflow: hidden;
  background: var(--color-ink);
}
.hero-slider__track { position: relative; min-height: var(--slider-height, 380px); }
.hero-slider__slide {
  position: absolute;
  inset: 0;
  min-height: var(--slider-height, 380px);
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transition: opacity 0.9s ease, transform 0.9s ease;
  pointer-events: none;
}
.hero-slider__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: none !important;
}
/* Each variant defines the slide's OFF-STAGE starting position; the
   transition above animates it (and opacity) into is-active's
   transform:none + opacity:1 — giving each slide its own selectable
   entrance effect (Görünüm > "Anasayfa Slaytları" > her slaytın kendi
   "Bu Slayta Geçiş Efekti" alanı). */
.hero-slider__slide--slide-right:not(.is-active) { transform: translateX(6%); }
.hero-slider__slide--slide-left:not(.is-active)  { transform: translateX(-6%); }
.hero-slider__slide--slide-up:not(.is-active)    { transform: translateY(8%); }
.hero-slider__slide--zoom:not(.is-active)        { transform: scale(1.1); }
.hero-slider__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
@media (max-width: 860px) {
  .hero-slider__image { object-position: right center; }
}
.hero-slider__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(22,48,46,0.85) 0%, rgba(22,48,46,0.15) 60%);
  z-index: 1;
}
.hero-slider__caption {
  position: relative;
  z-index: 2;
  color: var(--color-white);
  padding: var(--space-5) var(--space-3);
  max-width: 640px;
}
.hero-slider__caption h2 { color: var(--color-white); margin-bottom: 0.35em; }
.hero-slider__caption p { color: rgba(255,255,255,0.9); max-width: 50ch; }

.hero-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.35);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.hero-slider__arrow:hover { background: rgba(255,255,255,0.9); opacity: 1; }
.hero-slider__arrow--prev { left: var(--space-2); }
.hero-slider__arrow--next { right: var(--space-2); }

.hero-slider__dots {
  position: absolute;
  bottom: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 0.5em;
}
.hero-slider__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.hero-slider__dot.is-active { background: var(--color-white); }

@media (max-width: 600px) {
  .hero-slider__slide { min-height: min(var(--slider-height, 380px), 320px); }
  .hero-slider__arrow { width: 36px; height: 36px; }
}

/* ==========================================================================
 * 14. Doctors carousel
 * ========================================================================== */
.doctor-carousel { position: relative; }
.doctor-carousel__track {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.doctor-carousel__track::-webkit-scrollbar { display: none; }
.doctor-carousel__item {
  flex: 0 0 calc((100% - 3 * var(--space-2)) / 4);
  min-width: 0;
  scroll-snap-align: start;
}
@media (max-width: 900px) {
  .doctor-carousel__item { flex: 0 0 calc((100% - var(--space-2)) / 2); }
}
@media (max-width: 600px) {
  .doctor-carousel__item { flex: 0 0 100%; }
}
.doctor-carousel__arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(22,48,46,0.12);
}
.doctor-carousel__arrow:hover { border-color: var(--color-teal); }
.doctor-carousel__arrow--prev { left: -18px; }
.doctor-carousel__arrow--next { right: -18px; }
@media (max-width: 600px) {
  .doctor-carousel__arrow { display: none; } /* rely on swipe on small screens */
}

/* ==========================================================================
 * 15. Sticky CTA buttons + callback-request modal
 * ========================================================================== */
.sticky-cta {
  position: fixed;
  z-index: 900;
  right: var(--space-2);
  bottom: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}
.sticky-cta__item { position: relative; }
.sticky-cta__item[hidden] { display: none; }
.sticky-cta__close {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}
.sticky-cta__close:hover { background: var(--color-mint); }
.sticky-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 1.1em;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--step--1);
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(22,48,46,0.2);
  white-space: nowrap;
}
.sticky-cta__btn--primary { background: var(--color-vital); color: var(--color-white); }
.sticky-cta__btn--primary:hover { background: var(--color-vital-dark); color: var(--color-white); }
.sticky-cta__btn--secondary { background: var(--color-logo-orange); color: var(--color-white); border: 1px solid var(--color-logo-orange); }
.sticky-cta__btn--secondary:hover { background: #c4623a; border-color: #c4623a; }

@media (max-width: 600px) {
  .sticky-cta__item--desktop-only { display: none; }
}
@media (min-width: 601px) {
  .sticky-cta__item--mobile-only { display: none; }
}

@media (max-width: 600px) {
  .sticky-cta__btn { font-size: 0.8rem; padding: 0.65em 0.9em; }
}

.callback-modal[hidden] { display: none; }
.callback-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
}
.callback-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22,48,46,0.55);
}
.callback-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  max-width: 420px;
  width: 100%;
  box-shadow: 0 24px 48px rgba(22,48,46,0.25);
}
.callback-modal__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--color-mint);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.callback-modal__panel h2 {
  font-size: var(--step-1);
  margin-right: var(--space-4); /* keep clear of the close button */
}
.callback-modal__form { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.callback-modal__hint {
  margin: 0.6em 0 0;
  font-size: 0.78rem;
  color: var(--color-slate);
}
.callback-modal__notice {
  margin: 0.5em 0 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--color-slate);
}
.callback-modal__subject-hint {
  margin: 0.5em 0 0;
  font-size: 0.82rem;
  min-height: 1.2em;
}
.callback-modal__subject-hint a {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--color-teal-dark);
  font-weight: 600;
  background: var(--color-mint);
  padding: 0.35em 0.7em;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.callback-modal__subject-hint a:hover { background: var(--color-teal); color: var(--color-white); }
.callback-modal__char-count {
  margin: 0.25em 0 0;
  font-size: 0.72rem;
  color: var(--color-slate);
  text-align: right;
}
.callback-modal__char-count.is-near-limit { color: var(--color-vital); font-weight: 600; }
.callback-modal__form button[type="submit"] { margin-top: var(--space-1); }
.callback-modal__status {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 600;
  min-height: 1.2em;
}
.callback-modal__status[data-state="success"] { color: var(--color-teal-dark); }
.callback-modal__status[data-state="error"] { color: var(--color-vital-dark); }

/* ==========================================================================
 * 11. Doctor profile (single doctor post)
 * ========================================================================== */
.doctor-profile {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 720px) {
  .doctor-profile { grid-template-columns: 1fr; }
}
.doctor-profile__photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-mint);
  aspect-ratio: 4/5;
}
.doctor-profile__photo img { width: 100%; height: 100%; object-fit: cover; }

.doctor-profile__facts { margin: 0; }
.doctor-profile__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
@media (max-width: 560px) {
  .doctor-profile__row { grid-template-columns: 1fr; gap: 0.35em; }
}
.doctor-profile__row dt {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-teal);
  font-weight: 600;
}
.doctor-profile__row dd { margin: 0; }
.doctor-profile__row dd p { margin: 0 0 0.4em; }
.doctor-profile__row dd p:last-child { margin-bottom: 0; }

/* ==========================================================================
 * 9. Plugin module compatibility layer
 *
 * The appointment (e-randevu), HR application, and lab price-quote
 * plugins render their own markup with their own classes. Rather than
 * fight three separate class systems, this section re-skins the common,
 * predictable bits (buttons, inputs, accordion headers) using attribute
 * selectors so each plugin's form reads as part of Vital without
 * touching the plugins' own code. Tighten the selectors once you know
 * each plugin's exact class names.
 * ========================================================================== */
.vital-module-page input[type="submit"],
.vital-module-page button,
.vital-module-page [class*="btn"],
.vital-module-page [class*="button"] {
	min-height: 48px;
	border-radius: var(--radius-md);
	font-weight: 600;
	background: var(--color-teal);
	color: var(--color-white);
	border: 2px solid transparent;
	padding: 0.65em 1.4em;
	cursor: pointer;
}
.vital-module-page input[type="submit"]:hover,
.vital-module-page button:hover {
	background: var(--color-teal-dark);
}
.vital-module-page form { max-width: 640px; }
.vital-module-page input:not([type="submit"]),
.vital-module-page select,
.vital-module-page textarea {
	border: 2px solid var(--color-border);
	border-radius: var(--radius-sm);
	min-height: 48px;
	font-family: var(--font-body);
	width: 100%;
	max-width: 640px;
	padding: 0.6em 0.9em;
	margin-bottom: var(--space-2);
}
.vital-module-page textarea { min-height: 120px; }
.vital-module-page input:not([type="submit"]):focus,
.vital-module-page select:focus,
.vital-module-page textarea:focus {
	outline: none;
	border-color: var(--color-teal);
}
.vital-module-page label {
	display: block;
	font-weight: 600;
	color: var(--color-ink);
	margin-bottom: 0.4em;
}
.vital-module-page [class*="accordion"] > * {
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	margin-bottom: var(--space-1);
}
.vital-module-page [class*="accordion"] [class*="header"],
.vital-module-page [class*="accordion"] [class*="title"] {
	font-family: var(--font-display);
	color: var(--color-ink);
	background: var(--color-mint);
}
.vital-module-page table {
	width: 100%;
	border-collapse: collapse;
}
.vital-module-page table th,
.vital-module-page table td {
	padding: 0.6em 0.8em;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
}

/* ==========================================================================
   İletişim (Form + Bilgi Paneli) — two-column contact layout
   ========================================================================== */
.iletisim-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-5);
  align-items: start;
}
.iletisim-layout--full { grid-template-columns: 1fr; }
.iletisim-layout__form form { max-width: 640px; }

.iletisim-card {
  background: var(--color-mint);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  position: sticky;
  top: var(--space-3);
}
.iletisim-card h3 { font-size: var(--step-0); margin-bottom: var(--space-3); }
.iletisim-card__row {
  display: flex;
  align-items: center;
  gap: 0.7em;
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.iletisim-card__row:hover { color: var(--color-teal-dark); }
.iletisim-card__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-teal-dark);
  margin-bottom: 0.6em;
}
.iletisim-card__social { display: flex; gap: 0.5em; list-style: none; margin: 0; padding: 0; }
.iletisim-card__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-teal-dark);
}
.iletisim-card__social a:hover { background: var(--color-teal); color: var(--color-white); }
.iletisim-card__menu {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(22,48,46,0.12);
  display: grid;
  gap: 0.6em;
}
.iletisim-card__menu a {
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
}
.iletisim-card__menu a:hover { color: var(--color-teal-dark); }

/* ==========================================================================
   SSS (FAQ) accordion — native <details>/<summary>, no JS needed
   ========================================================================== */
.faq-list { display: grid; gap: var(--space-2); max-width: 760px; }
.faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-weight: 700;
  color: var(--color-ink);
  list-style: none;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question svg { flex-shrink: 0; color: var(--color-teal); transition: transform 0.2s ease; }
.faq-item[open] .faq-item__question svg { transform: rotate(180deg); }
.faq-item__answer {
  padding: 0 var(--space-3) var(--space-3);
  color: var(--color-slate);
}
.faq-item__answer p { margin: 0; }
.faq-item__answer p + p { margin-top: 0.6em; }

.faq-list--compact { max-width: none; gap: 0; }
.faq-list--compact .faq-item {
  border: none;
  border-bottom: 1px solid rgba(22,48,46,0.12);
  border-radius: 0;
  background: transparent;
}
.faq-list--compact .faq-item:last-child { border-bottom: none; }
.faq-list--compact .faq-item__question {
  padding: 0.7em 0;
  font-size: var(--step--1);
}
.faq-list--compact .faq-item__answer {
  padding: 0 0 0.9em;
  font-size: 0.85rem;
}

@media (max-width: 860px) {
  .iletisim-layout { grid-template-columns: 1fr; }
  .iletisim-card { position: static; }
}