@charset "UTF-8";
/* ===========================================================================
   Op. Dr. Emre Çayci — Tasarım Sistemi
   Modern Hastane · Klinik Aydınlık · Sakin Medikal Mavi

   İlkeler
   - Aydınlık zemin baskındır; koyu lacivert yalnızca çıpa bölümlerinde
     (manifesto, CTA, footer) kullanılır.
   - Formlar ovaldir: hap butonlar, dairesel ikon rozetleri, oval portre
     maskeleri. Keskin köşe ve blueprint/grid motifi kullanılmaz.
   - Vurgu rengi sakin medikal mavi ve yumuşak teal; neon kullanılmaz.
   =========================================================================== */

/* ---------------------------------------------------------------- TOKENS -- */
:root {
    /* Klinik yüzeyler — sitenin baskın rengi */
    --white:      #FFFFFF;
    --clinic-50:  #F7FBFE;
    --clinic-100: #EFF6FB;
    --clinic-200: #E2EDF6;
    --line:       #DCE8F2;
    --line-soft:  #EAF1F8;

    /* Sakin medikal mavi */
    --blue-900: #0B2545;
    --blue-800: #123A63;
    --blue-700: #0F4C81;
    --blue-600: #1565A8;
    --blue-500: #2E86C7;
    --blue-300: #8FBEE0;
    --blue-100: #DCEBF7;

    /* İkincil: yumuşak teal — bakım ve iyileşme tonu */
    --teal-600: #23807E;
    --teal-500: #2E9C9B;
    --teal-300: #8FCFCD;
    --teal-100: #DFF1F0;

    /* Koyu çıpa bölümleri */
    --navy-900: #0B2545;
    --navy-800: #12345C;

    /* Metin */
    --text-900:    #12263F;
    --text-700:    #3D5372;
    --text-500:    #6B7F99;
    --text-onDark: #C9DCEC;
    --text-light:  #F4F9FD;

    /* Bölüm bazlı devralınan vurgu rengi */
    --accent: var(--blue-600);

    /* Tipografi — Exo 2 (başlık ve gövde), Arapça için Noto Sans Arabic */
    --font-display: "Exo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body:    "Exo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-arabic:  "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;

    --fs-hero:  clamp(2.35rem, 1.5rem + 3.4vw, 4.05rem);
    --fs-h1:    clamp(2rem, 1.35rem + 2.5vw, 3.25rem);
    --fs-h2:    clamp(1.7rem, 1.25rem + 1.9vw, 2.55rem);
    --fs-h3:    clamp(1.2rem, 1.05rem + 0.75vw, 1.5rem);
    --fs-lead:  clamp(1.04rem, 0.98rem + 0.34vw, 1.2rem);
    --fs-body:  1rem;
    --fs-small: 0.885rem;
    --fs-micro: 0.765rem;

    /* Ritim */
    --shell: 1320px;
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --section-y: clamp(2.6rem, 4vw, 4.25rem);

    /* Yarıçaplar — oval / hap dili */
    --r-pill: 999px;
    --r-sm: 12px;
    --r-md: 20px;
    --r-lg: 28px;
    /* Yumuşak oval maske (portreler) ve tam daire */
    --r-oval: 46% 46% 46% 46% / 36% 36% 36% 36%;
    --r-arch: 999px 999px 40px 40px;

    /* Yumuşak, mavimsi gölgeler */
    --shadow-xs: 0 1px 2px rgba(18, 38, 63, .05);
    --shadow-sm: 0 4px 14px -6px rgba(18, 38, 63, .12);
    --shadow-md: 0 14px 34px -14px rgba(18, 38, 63, .18);
    --shadow-lg: 0 30px 60px -28px rgba(11, 37, 69, .3);
    --shadow-ring: 0 0 0 6px rgba(21, 101, 168, .09);

    --ease: cubic-bezier(.25, .8, .35, 1);
    --dur: .34s;

    --header-h: 86px;
}

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

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

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

body {
    margin: 0;
    background: var(--white);
    color: var(--text-700);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    /* Exo 2 geometrik bir yüz; uzun tıbbi metinlerde satır aralığı biraz açılır */
    line-height: 1.78;
    letter-spacing: .002em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
    margin: 0 0 .6em;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.012em;
    color: var(--text-900);
}

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

a { color: var(--blue-600); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--blue-700); }

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

ul, ol { margin: 0 0 1.2em; padding-left: 1.25em; }
li { margin-bottom: .5em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

button { font: inherit; cursor: pointer; }

:focus-visible {
    outline: 2px solid var(--blue-600);
    outline-offset: 3px;
    border-radius: var(--r-pill);
}

/* Ekran dışına itmek yerine kırpılarak gizlenir; böylece sağdan sola
   yerleşimde belge genişliğini uzatmaz. */
.skip-link {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 999;
    width: 1px; height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    background: var(--blue-700);
    color: #fff;
    border-end-end-radius: var(--r-md);
}
.skip-link:hover,
.skip-link:focus { color: #fff; }
.skip-link:focus {
    width: auto; height: auto;
    padding: .8rem 1.5rem;
    clip-path: none;
}

.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;
}

/* --------------------------------------------------------------- LAYOUT -- */
.shell {
    width: min(100% - (var(--gutter) * 2), var(--shell));
    margin-inline: auto;
}
.shell--narrow { width: min(100% - (var(--gutter) * 2), 800px); }
.shell--wide   { width: min(100% - (var(--gutter) * 2), 1480px); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(1.75rem, 2.8vw, 2.6rem); }

/* Aydınlık baskın ritim */
.section--light   { background: var(--white); }
.section--surface { background: var(--clinic-100); }

/* Koyu çıpa bölümleri — yumuşak lacivert, siyaha kaçmaz */
.section--dark    { background: var(--navy-900); color: var(--text-onDark); }
.section--darkest { background: var(--navy-800); color: var(--text-onDark); }

.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.section--darkest h1, .section--darkest h2, .section--darkest h3, .section--darkest h4 {
    color: var(--text-light);
}

.section--gradient {
    background: linear-gradient(165deg, var(--navy-800) 0%, var(--navy-900) 100%);
    color: var(--text-onDark);
}
.section--gradient h2, .section--gradient h3 { color: var(--text-light); }

/* Dekoratif doku kullanılmaz; koyu bölümler düz ve sakin kalır. */

/* --------------------------------------------------------- BÖLÜM BAŞLIĞI -- */
.sec-head { margin-bottom: clamp(1.5rem, 2.4vw, 2.25rem); max-width: 62ch; }
.sec-head--center { margin-inline: auto; text-align: center; }
/*
 * Ikiye bolunmus bolum basligi.
 *
 * Sol sutunda ust etiket ve baslik, sagda aciklama bulunur. Iki sutun ust
 * hizadan baslayinca aciklama, baslikla ayni cizgiye oturmuyordu; alt hiza
 * kullanildiginda iki blok da ayni tabana iner ve satir duzgun okunur.
 */
.sec-head--split {
    max-width: none;
    display: grid;
    gap: clamp(1rem, 2.5vw, 2.5rem);
    align-items: end;
}
@media (min-width: 900px) {
    .sec-head--split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
/* Baslik ve aciklamanin alt bosluklari sifirlanir; hizayi izgara
   bosluklari verir, yoksa kutular hizali olsa da metinler kayik durur. */
.sec-head--split .sec-title,
.sec-head--split .sec-lead { margin-bottom: 0; }
@media (min-width: 880px) {
    .sec-head--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}

/* Hap biçimli üst etiket */
.kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.1rem;
    padding: .42rem 1rem .42rem .8rem;
    border-radius: var(--r-pill);
    background: var(--blue-100);
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--blue-700);
}
.kicker::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: .75;
}
.section--dark .kicker,
.section--darkest .kicker,
.section--gradient .kicker {
    background: rgba(255, 255, 255, .12);
    color: var(--teal-300);
}

.sec-title { font-size: var(--fs-h2); }
.sec-lead {
    font-size: var(--fs-lead);
    color: var(--text-500);
    max-width: 60ch;
}
.section--dark .sec-lead,
.section--darkest .sec-lead,
.section--gradient .sec-lead { color: var(--text-onDark); }

/* -------------------------------------------------------------- BUTONLAR -- */
/* Tüm butonlar hap formunda */
.btn {
    --btn-bg: var(--blue-700);
    --btn-fg: #fff;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .95rem 1.85rem;
    border: 1.5px solid transparent;
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-display);
    font-size: .925rem;
    font-weight: 700;
    letter-spacing: -.005em;
    line-height: 1.2;
    text-align: center;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}
.btn .icon { width: 18px; height: 18px; flex: none; }

.btn:hover {
    color: var(--btn-fg);
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -14px rgba(15, 76, 129, .6);
}

.btn--primary { --btn-bg: var(--blue-700); }
.btn--primary:hover { --btn-bg: var(--blue-600); }

/* Ana randevu çağrısı — sakin teal */
.btn--accent { --btn-bg: var(--teal-600); }
.btn--accent:hover {
    --btn-bg: var(--teal-500);
    box-shadow: 0 14px 26px -14px rgba(35, 128, 126, .65);
}

.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--blue-700);
    border-color: var(--line);
}
.btn--ghost:hover {
    border-color: var(--blue-300);
    background: var(--clinic-50);
    box-shadow: var(--shadow-sm);
}

.btn--outline-light {
    --btn-bg: transparent;
    --btn-fg: var(--text-light);
    border-color: rgba(201, 220, 236, .4);
}
.btn--outline-light:hover {
    border-color: var(--teal-300);
    --btn-fg: #fff;
    background: rgba(255, 255, 255, .07);
    box-shadow: none;
}

.btn--sm { padding: .62rem 1.25rem; font-size: .82rem; }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Metin bağlantısı — dairesel ok rozeti */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-display);
    font-size: .885rem;
    font-weight: 700;
    color: var(--blue-700);
}
.link-arrow .icon {
    width: 26px; height: 26px;
    padding: 5px;
    border-radius: 50%;
    background: var(--blue-100);
    color: var(--blue-700);
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.link-arrow:hover .icon { transform: translateX(3px); background: var(--blue-300); }
.section--dark .link-arrow,
.section--darkest .link-arrow,
.section--gradient .link-arrow { color: var(--teal-300); }
.section--dark .link-arrow .icon,
.section--darkest .link-arrow .icon,
.section--gradient .link-arrow .icon {
    background: rgba(255, 255, 255, .12);
    color: var(--teal-300);
}

/* ------------------------------------------------------------------ ICON -- */
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6;
        stroke-linecap: round; stroke-linejoin: round; }

/* Dairesel ikon rozeti */
.icon-badge {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--blue-100);
    color: var(--accent);
    flex: none;
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.section--dark .icon-badge,
.section--darkest .icon-badge,
.section--gradient .icon-badge {
    background: rgba(255, 255, 255, .1);
    color: var(--teal-300);
}

/* --------------------------------------------------------------- HEADER -- */
/* Hastane sitesi hissi: aydınlık, sakin, her zaman okunaklı başlık */
.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 200;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
                height var(--dur) var(--ease);
}
.site-header__inner {
    width: min(100% - (var(--gutter) * 2), var(--shell));
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.25rem);
    min-width: 0;
}
.site-header.is-stuck {
    height: 72px;
    border-bottom-color: var(--line-soft);
    box-shadow: var(--shadow-sm);
}

.brand { display: flex; align-items: center; gap: .85rem; flex: 0 1 auto; min-width: 0; }

/*
 * Marka portresi — hekimin yuvarlak fotoğrafı.
 * Görsel kendi lacivert zeminini taşıdığı için ayrıca dolgu, arka plan veya
 * çerçeve uygulanmaz; yalnızca ince bir halka ile zeminden ayrılır.
 */
.brand__portrait {
    width: 58px; height: 58px;
    flex: none;
    border-radius: 50%;
    box-shadow: var(--shadow-xs);
}
.section--dark .brand__portrait,
.site-footer .brand__portrait { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }

/* Koyu zeminde marka metni açık renge döner; aksi hâlde zemine karışır. */
.site-footer .brand__name,
.section--dark .brand__name,
.section--darkest .brand__name { color: var(--text-light); }
.site-footer .brand__role,
.section--dark .brand__role,
.section--darkest .brand__role { color: var(--text-onDark); }

.brand__mark {
    width: 46px; height: 46px; flex: none;
    padding: 6px;
    border-radius: 50%;
    background: var(--navy-900);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand__name {
    font-family: var(--font-display);
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brand__role {
    font-size: .68rem;
    letter-spacing: .03em;
    color: var(--text-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brand__logo { height: 44px; width: auto; }
.brand--footer { display: flex; align-items: center; gap: .85rem; }
.brand--footer .brand__portrait { width: 64px; height: 64px; }
.brand--footer .brand__logo { height: auto; width: min(215px, 70%); }

/* Navigasyon — hap sekmeler */
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(.1rem, .8vw, .45rem);
             list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }

.nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem .9rem;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-size: .885rem;
    font-weight: 600;
    color: var(--text-700);
    white-space: nowrap;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--blue-700); background: var(--clinic-100); }
.nav__link.is-active { color: var(--blue-700); background: var(--blue-100); }
.nav__link .icon { width: 14px; height: 14px; opacity: .65; }

.header__actions { display: flex; align-items: center; gap: .55rem; flex: none; }

.nav-toggle,
.search-toggle {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    color: var(--text-700);
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
                background-color var(--dur) var(--ease);
}
.nav-toggle:hover, .search-toggle:hover {
    border-color: var(--blue-300); color: var(--blue-700); background: var(--clinic-50);
}
.nav-toggle { display: none; }

/* ------------------------------------------------------------ DİL SEÇİCİ -- */
.lang { position: relative; }
.lang__toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 44px;
    padding-inline: .85rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--white);
    color: var(--text-700);
    font-family: var(--font-display);
    font-size: .82rem;
    font-weight: 700;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
                background-color var(--dur) var(--ease);
}
.lang__toggle:hover, .lang.is-open .lang__toggle {
    border-color: var(--blue-300); color: var(--blue-700); background: var(--clinic-50);
}
.lang__code { letter-spacing: .04em; }

.lang__menu {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    z-index: 20;
    min-width: 190px;
    margin: 0;
    padding: .4rem;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
                visibility var(--dur);
}
.lang.is-open .lang__menu,
.lang:focus-within .lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }

.lang__item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .85rem;
    border-radius: var(--r-pill);
    font-size: .885rem;
    color: var(--text-700);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lang__item:hover { background: var(--clinic-100); color: var(--blue-700); }
.lang__item.is-active { color: var(--blue-700); font-weight: 600; }
.lang__item .lang__code {
    display: grid;
    place-items: center;
    width: 30px; height: 24px;
    flex: none;
    border-radius: var(--r-pill);
    background: var(--clinic-100);
    font-size: .68rem;
    font-weight: 700;
}
.lang__item.is-active .lang__code { background: var(--blue-700); color: #fff; }
.lang__item .icon { margin-inline-start: auto; width: 16px; height: 16px; color: var(--blue-700); }

/* Mobil menüdeki dil satırı */
.lang-row { display: flex; gap: .5rem; margin-top: 1.5rem; }
.lang-row__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1;
    justify-content: center;
    padding: .7rem .5rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: .82rem;
    color: var(--text-700);
}
.lang-row__item.is-active { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.lang-row__code { font-weight: 700; letter-spacing: .04em; }

/* --------------------------------------------------------- MEGA MENÜ -- */
.mega {
    position: absolute;
    top: calc(100% + 16px);
    left: 50%;
    translate: -50% 0;
    width: min(94vw, 1020px);
    padding: 2rem 2.25rem;
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
                visibility var(--dur);
}
.nav__item--mega:hover .mega,
.nav__item--mega:focus-within .mega,
.mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.mega__grid {
    display: grid;
    gap: 1.75rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.mega__title {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .9rem;
    padding: .32rem .9rem;
    border-radius: var(--r-pill);
    background: var(--clinic-100);
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--blue-700);
}
.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__list li { margin-bottom: .05rem; }
.mega__link {
    display: block;
    padding: .38rem .8rem;
    border-radius: var(--r-pill);
    font-size: .885rem;
    color: var(--text-700);
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.mega__link:hover { color: var(--blue-700); background: var(--clinic-50); }

.mega__foot {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line-soft);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.mega__note { font-size: var(--fs-small); color: var(--text-500); margin: 0; }

/* ------------------------------------------------------- MOBİL MENÜ -- */
.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    background: var(--white);
    color: var(--text-700);
    /* Kapalıyken kendi genişliği kadar kaydırılır. Yön duyarlı olması için
       fiziksel translateX yerine RTL'de tersine çevrilen bir değer kullanılır. */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .45s var(--ease), visibility .45s;
    overflow-y: auto;
    overscroll-behavior: contain;
}
[dir="rtl"] .mobile-nav { transform: translateX(-100%); }
.mobile-nav.is-open,
[dir="rtl"] .mobile-nav.is-open { transform: translateX(0); visibility: visible; }

.mobile-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem var(--gutter);
    border-bottom: 1px solid var(--line-soft);
}
.mobile-nav__body { padding: 1.5rem var(--gutter) 2.5rem; flex: 1; }
.mobile-nav__list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.mobile-nav__list > li { border-bottom: 1px solid var(--line-soft); }
.mobile-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .95rem .25rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-900);
}
.mobile-nav__link:hover { color: var(--blue-700); }
.mobile-nav__link .icon {
    width: 28px; height: 28px; padding: 6px;
    border-radius: 50%; background: var(--clinic-100); color: var(--blue-700);
}
.mobile-nav__sub { list-style: none; margin: 0 0 .9rem; padding: 0;
                   display: flex; flex-wrap: wrap; gap: .4rem; }
.mobile-nav__sub a {
    display: block; padding: .45rem 1rem;
    border-radius: var(--r-pill); font-size: .875rem; color: var(--text-700);
    background: var(--clinic-100);
}
.mobile-nav__group { margin-bottom: 1.5rem; }
.mobile-nav__group-title {
    display: inline-block;
    padding: .32rem .9rem;
    margin-bottom: .7rem;
    border-radius: var(--r-pill);
    background: var(--blue-100);
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--blue-700);
}

/* --------------------------------------------------------------- HERO -- */
/* Aydınlık klinik hero: yumuşak mavi geçiş, oval portre, sakin tipografi */
.hero {
    position: relative;
    display: block;
    padding-top: calc(var(--header-h) + clamp(2rem, 4vw, 3.25rem));
    padding-bottom: clamp(2rem, 3vw, 3rem);
    background: linear-gradient(180deg, var(--clinic-100) 0%, var(--clinic-50) 55%, var(--white) 100%);
    color: var(--text-700);
    overflow: hidden;
}

/* Dekoratif katmanlar kullanılmaz. */
.hero__glow,
.hero__grid,
.hero__line { display: none; }

/*
 * Arka plan görselli hero.
 *
 * Katman sırası: görsel → degrade örtü → içerik. Figür kendi çerçevesi
 * olmadan doğrudan degradenin üstünde durur; bu yüzden ön plan görselinin
 * zeminsiz (saydam) olması gerekir.
 */
.hero--media {
    background: var(--navy-900);
    color: var(--text-onDark);
    /* Figür alt kenara oturduğu için bölümün alt dolgusu kaldırılır;
       slider kontrolleri akıştan çıkıp örtü katmanına alınır. */
    padding-bottom: 0;
}
.hero--media .hero__nav {
    position: absolute;
    left: 50%;
    bottom: clamp(1rem, 2.2vw, 1.9rem);
    transform: translateX(-50%);
    width: min(100% - (var(--gutter) * 2), var(--shell));
    margin-top: 0;
    z-index: 4;
}
/*
 * Slaytlar aynı ızgara hücresinde yığıldığı için yükseklik en uzun slayta
 * göre sabitlenir. Kısa slaytta iç kapsayıcı dikeyde ortalanınca figür alt
 * kenardan kopuyordu; kapsayıcı gerdirilir, metin kendi içinde ortalanır.
 */
.hero--media .hero__slide { align-items: stretch; }
.hero--media .hero__content { align-self: center; padding-bottom: clamp(3rem, 5vw, 4.25rem); }
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero__bg img {
    width: 100%; height: 100%;
    object-fit: cover;
}
/* Degrade örtü: metnin bulunduğu sol taraf koyulaşır, sağ taraf açılır */
.hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg,
            rgba(6, 22, 42, .94) 0%,
            rgba(8, 28, 52, .84) 38%,
            rgba(12, 40, 72, .52) 68%,
            rgba(16, 50, 88, .34) 100%),
        linear-gradient(180deg, rgba(6, 22, 42, .45) 0%, rgba(6, 22, 42, 0) 30%);
}

.hero--media .hero__title,
.hero--media .hero__subtitle { color: var(--text-light); }
.hero--media .hero__text,
.hero--media .hero__meta-item { color: var(--text-onDark); }
.hero--media .hero__kicker {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .2);
    color: var(--teal-300);
}
.hero--media .hero__meta-item .icon { color: var(--teal-300); }
.hero--media .hero__dot { background: rgba(255, 255, 255, .32); }
.hero--media .hero__dot.is-active { background: var(--teal-300); }
.hero--media .hero__arrow {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .22);
    color: var(--text-light);
}


/* Slider yerleşimi: tüm slaytlar aynı grid hücresinde yığılır.
   Böylece kapsayıcı yüksekliği en uzun slayta göre sabitlenir ve
   slaytlar arası geçişte sayfa zıplamaz. */
.hero__track { display: grid; width: 100%; }
.hero__slide {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}
.hero--slider .hero__slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s var(--ease), visibility .5s;
}
.hero--slider .hero__slide.is-active { opacity: 1; visibility: visible; }
.hero--slider .hero__slide:not(.is-active) { pointer-events: none; }

.hero__slide.is-active .hero__content > * {
    animation: heroIn .65s var(--ease) both;
}
.hero__slide.is-active .hero__content > *:nth-child(2) { animation-delay: .06s; }
.hero__slide.is-active .hero__content > *:nth-child(3) { animation-delay: .12s; }
.hero__slide.is-active .hero__content > *:nth-child(4) { animation-delay: .18s; }
.hero__slide.is-active .hero__content > *:nth-child(5) { animation-delay: .24s; }
@keyframes heroIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero__slide.is-active .hero__content > * { animation: none; }
}

/* Slider kontrolleri — hap şeritte daire düğmeler */
.hero__nav {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.hero__arrow {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    flex: none;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    color: var(--text-700);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}
.hero__arrow:hover { border-color: var(--blue-300); color: var(--blue-700); transform: scale(1.05); }

.hero__dots { display: flex; align-items: center; gap: .5rem; }
.hero__dot {
    width: 10px; height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--line);
    transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.hero__dot:hover { background: var(--blue-300); }
.hero__dot.is-active { width: 32px; border-radius: var(--r-pill); background: var(--blue-700); }

.hero__inner {
    position: relative;
    z-index: 2;
    width: min(100% - (var(--gutter) * 2), var(--shell));
    margin-inline: auto;
    display: grid;
    gap: clamp(1.5rem, 2.4vw, 2.25rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}
@media (min-width: 1000px) {
    .hero__inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        gap: clamp(1.5rem, 2.6vw, 2.5rem);
    }
    /* Ön plan figürü olmayan slaytta metin sütunu daralır, sağ taraf
       arka plan görselinin nefes alması için boş bırakılır. */
    .hero__inner:not(:has(.hero__figure)) {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
}

/* Hap biçimli üst etiket */
.hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.15rem;
    padding: .45rem 1.15rem .45rem .85rem;
    border-radius: var(--r-pill);
    background: var(--white);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-xs);
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--blue-700);
}
.hero__kicker::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--teal-500);
}

.hero__title {
    font-size: var(--fs-hero);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.028em;
    color: var(--text-900);
    margin-bottom: 1rem;
    text-wrap: balance;
}
.hero__subtitle {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
    font-weight: 600;
    line-height: 1.45;
    color: var(--blue-700);
    margin-bottom: 1rem;
    max-width: 30ch;
    text-wrap: balance;
}
.hero__rule { display: none; }
.hero__text {
    font-size: var(--fs-lead);
    color: var(--text-500);
    max-width: 46ch;
    margin-bottom: 2rem;
}
.hero__actions { margin-bottom: 2.25rem; }

/* Güven şeridi — hap kartlar */
.hero__meta { display: flex; flex-wrap: wrap; gap: .6rem; }
.hero__meta-item {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem 1.15rem .55rem .6rem;
    border-radius: var(--r-pill);
    background: var(--white);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-xs);
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--text-700);
}
.hero__meta-item .icon {
    width: 32px; height: 32px; padding: 7px; flex: none;
    border-radius: 50%;
    background: var(--clinic-100);
    color: var(--blue-600);
}

/* Oval portre */
.hero__figure { position: relative; padding: .5rem; }
.hero__figure img {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-inline: auto;
    border-radius: var(--r-oval);
    object-fit: cover;
    aspect-ratio: 4 / 5;
    max-width: 430px;
    max-height: 540px;
    box-shadow: var(--shadow-lg);
}
/* Portrenin çevresinde tek, çok ince bir oval kontur bulunur. */
.hero__figure {
    display: grid;
    place-items: center;
}

/*
 * Çerçevesiz figür.
 *
 * Zemin, kenarlık ve gölge yoktur; kesim doğrudan arka planın üstünde durur.
 * Figür hero'nun alt kenarına oturur: negatif alt boşlukla bölümün kendi
 * dolgusu aşılır, böylece havada asılı durmaz.
 */
.hero__figure--bare {
    padding: 0;
    align-items: end;
    align-self: end;
    margin-bottom: 0;
}
.hero__figure--bare img {
    display: block;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: bottom;
    width: auto;
    max-width: 100%;
    max-height: min(520px, 56svh);
    margin-inline: auto;
    margin-bottom: 0;
    align-self: end;
}

/*
 * Figürün çevresindeki eliptik kontur.
 *
 * Yalnızca kendi zemini olan (çerçeveli) görsellerde kullanılır. Zeminsiz
 * kesimde bu kontur, figürün çevresinde havada asılı ince bir elips olarak
 * göründüğü için kapatılır.
 */
.hero__figure:not(.hero__figure--bare)::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    translate: -50% 0;
    width: min(100%, 430px);
    border-radius: var(--r-oval);
    border: 1px solid var(--line);
    pointer-events: none;
}
.hero__figure--bare::after { content: none; }
.hero__frame { display: none; }

.hero__scroll {
    position: absolute;
    left: 50%; bottom: 1.4rem;
    translate: -50% 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    font-size: var(--fs-micro);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-500);
}
.hero__scroll span::after {
    content: "";
    display: block;
    width: 6px; height: 6px;
    margin: .55rem auto 0;
    border-radius: 50%;
    background: var(--blue-600);
    animation: scrollPulse 2.6s var(--ease) infinite;
}
@keyframes scrollPulse {
    0%, 100% { opacity: .5; transform: translateY(0); }
    50%      { opacity: 1;  transform: translateY(4px); }
}

/* ---------------------------------------------------------- SAYFA HERO -- */
/* İç sayfa başlığı: aydınlık klinik zemin, sağda oval madalyon görsel,
   altta yumuşak bir kavis ile içeriğe geçiş. */
.page-hero {
    position: relative;
    padding-top: calc(var(--header-h) + clamp(1.6rem, 3vw, 2.6rem));
    padding-bottom: clamp(2rem, 3.5vw, 3.2rem);
    background: linear-gradient(180deg, var(--clinic-100) 0%, var(--clinic-50) 100%);
    color: var(--text-700);
    overflow: hidden;
}

/* Alt kenarda yumuşak kavis — sayfayı beyaz içeriğe bağlar */
.page-hero::after {
    content: "";
    position: absolute;
    left: -6%; right: -6%;
    bottom: -2.25rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--white);
}

/*
 * Hero ızgarası.
 *
 * Görsel akışın içinde bir sütundur; mutlak konumlandırılmaz. Böylece
 * yüksekliği kendi en-boy oranından gelir (tam daire) ve hero'nun boyu
 * metnin uzunluğuna göre belirlenir.
 */
.page-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 2rem;
    align-items: center;
}
.page-hero__content { min-width: 0; }

/* Yuvarlak madalyon görsel */
.page-hero__media {
    position: relative;
    display: none;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: var(--shadow-md);
}
.page-hero__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
/* Madalyonu saran tek ince halka */
.page-hero__media::after {
    content: "";
    position: absolute;
    inset: -1.1rem;
    border-radius: 50%;
    border: 1px solid var(--line);
    pointer-events: none;
}

@media (min-width: 1000px) {
    .page-hero__inner {
        grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 320px);
        gap: clamp(1.75rem, 2.8vw, 2.5rem);
    }
    .page-hero__media { display: block; }
}
.page-hero__title {
    font-size: var(--fs-h1);
    color: var(--text-900);
    margin-bottom: .85rem;
    letter-spacing: -.026em;
}
.page-hero__text { font-size: var(--fs-lead); color: var(--text-500); max-width: 54ch; }

/* Sayfaya özel vurgu — başlığın altında kısa hap çizgi */
.page-hero__accent {
    position: static;
    display: block;
    width: 64px; height: 4px;
    margin-top: 1.5rem;
    border-radius: var(--r-pill);
    background: var(--accent);
}

/* ---------------------------------------------------------- BREADCRUMB -- */
.crumbs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.25rem;
          font-size: var(--fs-small); color: var(--text-500); }
.crumbs a { color: inherit; }
.crumbs a:hover { color: var(--blue-700); }
.crumbs__sep { opacity: .5; }
.crumbs [aria-current="page"] { color: var(--text-900); font-weight: 500; }
.section--dark .crumbs [aria-current="page"] { color: var(--text-light); }

/* --------------------------------------------------------------- GRID -- */
.grid { display: grid; gap: clamp(1.25rem, 2.2vw, 1.85rem); grid-template-columns: 1fr; }

/* Sütun sayıları kırılım noktalarında sabittir; geniş ekranda kartlar
   beklenmedik biçimde daralmaz. */
@media (min-width: 600px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------- UZMANLIK KART -- */
.spec-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.spec-card:hover {
    transform: translateY(-5px);
    border-color: var(--blue-100);
    box-shadow: var(--shadow-md);
}
.spec-card__media {
    position: relative;
    margin: .75rem .75rem 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--clinic-100);
}
.spec-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease);
}
.spec-card:hover .spec-card__media img { transform: scale(1.05); }

.spec-card__body { padding: 1.3rem 1.5rem 1.65rem; display: flex; flex-direction: column; flex: 1; }
/* Hap biçimli kategori etiketi */
.spec-card__cat {
    display: inline-block;
    align-self: flex-start;
    padding: .3rem .85rem;
    margin-bottom: .7rem;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--accent);
}
.spec-card__title { font-size: 1.1rem; margin-bottom: .55rem; }
.spec-card__title a { color: inherit; }
.spec-card:hover .spec-card__title a { color: var(--blue-700); }
.spec-card__text { font-size: var(--fs-small); color: var(--text-500); margin-bottom: 1.15rem; }
.spec-card__foot { margin-top: auto; }

.stretch::after { content: ""; position: absolute; inset: 0; }

/* Koyu bölümdeki kart varyantı */
.section--dark .spec-card,
.section--darkest .spec-card,
.section--gradient .spec-card {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .1);
    box-shadow: none;
}
.section--dark .spec-card__title,
.section--darkest .spec-card__title,
.section--gradient .spec-card__title { color: var(--text-light); }
.section--dark .spec-card__text,
.section--darkest .spec-card__text,
.section--gradient .spec-card__text { color: var(--text-onDark); }
.section--dark .spec-card__cat,
.section--darkest .spec-card__cat,
.section--gradient .spec-card__cat {
    background: rgba(255, 255, 255, .12); color: var(--teal-300);
}
.section--dark .spec-card:hover,
.section--darkest .spec-card:hover {
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 22px 46px -24px rgba(0, 0, 0, .5);
}

/* ------------------------------------------------------- KATEGORİ KUTUSU -- */
/* Görsel odaklı, oval köşeli kutucuk. İkon çipi görselin üzerinde durur;
   başlık ve açıklama altta, ok rozeti sağ altta sabitlenir. */
.cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.cat-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--line-soft));
    box-shadow: var(--shadow-md);
}

/* Kırpma çerçevededir; böylece taşan ikon çipi kesilmez. */
.cat-card__media {
    position: relative;
    overflow: visible;
}
.cat-card__frame {
    display: block;
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: var(--clinic-100);
}
.cat-card__frame img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease);
}
.cat-card:hover .cat-card__frame img { transform: scale(1.05); }

/* Görselin altında yalnızca ince bir ayırıcı; görsel yıkanmaz. */
.cat-card__frame::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: var(--line-soft);
}

/* İkon çipi — kart gövdesine taşan daire */
.cat-card__chip {
    position: absolute;
    right: 1.25rem; bottom: -26px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--line-soft);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
                color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cat-card:hover .cat-card__chip {
    transform: scale(1.06);
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.cat-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 2.1rem 1.6rem 1.7rem;
}
.cat-card__title { font-size: 1.12rem; margin: 0 0 .5rem; }
.cat-card__title a { color: inherit; }
.cat-card:hover .cat-card__title a { color: var(--blue-700); }
.cat-card__text { font-size: var(--fs-small); color: var(--text-500); margin-bottom: 1.15rem; }

/* Alt kategori/işlem kısayolları — hap etiketler */
.cat-card__list { list-style: none; margin: 0 0 1.2rem; padding: 0;
                  display: flex; flex-wrap: wrap; gap: .35rem; }
.cat-card__list li { margin: 0; }
.cat-card__list a {
    display: inline-block;
    padding: .28rem .75rem;
    border-radius: var(--r-pill);
    background: var(--clinic-100);
    font-size: var(--fs-micro);
    color: var(--text-700);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cat-card__list a:hover { background: var(--blue-100); color: var(--blue-700); }

.cat-card__foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.cat-card__count {
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-500);
}
/* Ok rozeti — daire, hover'da vurgu rengine döner */
.cat-card__go {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--blue-700);
    transition: all var(--dur) var(--ease);
}
.cat-card:hover .cat-card__go {
    background: var(--blue-700);
    border-color: var(--blue-700);
    color: #fff;
    transform: translateX(2px);
}

/* Koyu bölümdeki varyant */
.section--dark .cat-card, .section--darkest .cat-card {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .1);
    box-shadow: none;
}
.section--dark .cat-card__title, .section--darkest .cat-card__title { color: var(--text-light); }
.section--dark .cat-card__text, .section--darkest .cat-card__text { color: var(--text-onDark); }
.section--dark .cat-card__frame::after, .section--darkest .cat-card__frame::after {
    background: linear-gradient(0deg, var(--navy-900) 0%, transparent 100%);
}
.section--dark .cat-card__chip, .section--darkest .cat-card__chip {
    background: var(--navy-800); color: var(--teal-300);
}
.section--dark .cat-card__list a, .section--darkest .cat-card__list a {
    background: rgba(255, 255, 255, .1); color: var(--text-onDark);
}
.section--dark .cat-card__go, .section--darkest .cat-card__go {
    border-color: rgba(255, 255, 255, .2); color: var(--teal-300);
}

/* ------------------------------------------------------ ÜÇ ANA YETKİNLİK -- */
/* Hakkımda sayfasındaki sütun kartları: üstte dairesel ikon, altta
   madde listesi. Görsel içermez; okunabilirlik önceliklidir. */
.pillar {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.85rem 1.85rem;
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pillar:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.pillar__icon {
    display: grid;
    place-items: center;
    width: 58px; height: 58px;
    margin-bottom: 1.35rem;
    border-radius: 50%;
    background: var(--blue-100);
    color: var(--blue-700);
}
.pillar__title { font-size: 1.16rem; margin-bottom: .55rem; }
.pillar__text { font-size: var(--fs-small); color: var(--text-500); margin-bottom: 1.35rem; }

.pillar__list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.pillar__list li { margin-bottom: .1rem; }
.pillar__list a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .6rem;
    border-radius: var(--r-pill);
    font-size: var(--fs-small);
    color: var(--text-700);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pillar__list a:hover { background: var(--clinic-100); color: var(--blue-700); }
.pillar__list .icon {
    width: 20px; height: 20px; padding: 4px; flex: none;
    border-radius: 50%;
    background: var(--teal-100);
    color: var(--teal-600);
}
.pillar__more { margin-top: auto; }

/* ------------------------------------------------- İNTERAKTİF VİTRİN -- */
/*
 * Estetik cerrahi vitrini.
 *
 * Sekme listesi sahnenin yuksekligine gerilmiyordu; dort butonun altinda
 * bos alan kaliyordu. Liste kendi yuksekliginde birakilir, sahne ise sabit
 * bir en-boy oranina baglanir; boylece gorsel keyfi bicimde kirpilmaz.
 */
.showcase { display: grid; gap: clamp(1.75rem, 3vw, 3rem); align-items: start; }
@media (min-width: 940px) {
    .showcase { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}

/* Sekmeler gorsele gore dikeyde ortalanir; liste kisa kalinca ust hizada
   asili durmaz. */
.showcase__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: .5rem;
    align-self: stretch; justify-content: center;
}
.showcase__item { border: 0; }

.showcase__btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: clamp(.75rem, 1.3vw, .95rem) 1.25rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    text-align: left;
    color: var(--text-700);
    font-family: var(--font-display);
    font-size: clamp(1.05rem, .9rem + .65vw, 1.35rem);
    font-weight: 600;
    letter-spacing: -.015em;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.showcase__btn:hover { color: var(--blue-700); background: var(--clinic-100); }
.showcase__item.is-active .showcase__btn {
    color: var(--blue-700);
    background: var(--white);
    border-color: var(--line-soft);
    box-shadow: var(--shadow-sm);
}

.showcase__num {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    flex: none;
    border-radius: 50%;
    background: var(--clinic-100);
    font-size: var(--fs-micro);
    font-weight: 700;
    color: var(--text-500);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.showcase__item.is-active .showcase__num { background: var(--blue-700); color: #fff; }

/* Koyu zeminde vitrin */
.section--dark .showcase__btn,
.section--darkest .showcase__btn { color: var(--text-onDark); }
.section--dark .showcase__btn:hover,
.section--darkest .showcase__btn:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.section--dark .showcase__item.is-active .showcase__btn,
.section--darkest .showcase__item.is-active .showcase__btn {
    color: #fff; background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .16); box-shadow: none;
}
.section--dark .showcase__num,
.section--darkest .showcase__num { background: rgba(255, 255, 255, .12); color: var(--text-onDark); }
.section--dark .showcase__item.is-active .showcase__num,
.section--darkest .showcase__item.is-active .showcase__num {
    background: var(--teal-500); color: #06283D;
}

.showcase__stage {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--clinic-100);
    aspect-ratio: 16 / 10;
    box-shadow: var(--shadow-md);
}
.showcase__panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s var(--ease), visibility .5s;
}
.showcase__panel.is-active { opacity: 1; visibility: visible; }
.showcase__panel img { width: 100%; height: 100%; object-fit: cover; }
/* Degrade yalnizca alt bantta yogunlasir; gorselin ust bolumu acik kalir. */
.showcase__panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
        rgba(8, 28, 52, .94) 0%,
        rgba(8, 28, 52, .78) 22%,
        rgba(8, 28, 52, .10) 52%,
        rgba(8, 28, 52, 0) 70%);
}
/*
 * Basliк bloğu gorselin yarisini kapliyordu. Aciklama iki satira sinirlanir
 * ve dolgu kisilir; boylece yazi alt banda oturur, gorsel nefes alir.
 */
.showcase__caption {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    padding: clamp(1.1rem, 2.2vw, 1.75rem);
}
.showcase__caption h3 {
    color: #fff;
    font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
    line-height: 1.25;
    margin-bottom: .35rem;
}
.showcase__caption p {
    color: var(--text-onDark);
    font-size: var(--fs-small);
    line-height: 1.5;
    max-width: 46ch;
    margin-bottom: .75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.showcase__caption .link-arrow { color: var(--teal-300); }
.showcase__caption .link-arrow .icon { background: rgba(255, 255, 255, .16); color: #fff; }

/* ------------------------------------------------------- MANİFESTO -- */
.manifesto { text-align: center; }
.manifesto__words {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(.5rem, 1.6vw, 1.1rem);
    margin-bottom: 1.75rem;
}
/* İkon çipi — hapın içinde, yarı saydam daire */
.manifesto__icon {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--teal-300);
}

/* Her kavram bir hap içinde; ikon kavramın soluna oturur */
.manifesto__word {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1.7rem .65rem 1.1rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    font-family: var(--font-display);
    font-size: clamp(1.05rem, .85rem + 1.1vw, 1.8rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
}
.manifesto__plus { color: var(--teal-300); font-size: clamp(1rem, 1.6vw, 1.5rem); opacity: .85; }
.manifesto__text {
    max-width: 62ch;
    margin-inline: auto;
    font-size: var(--fs-lead);
    color: var(--text-onDark);
}

/* --------------------------------------------------------- SÜREÇ ADIMLARI -- */
.steps { display: grid; gap: clamp(1.25rem, 2.4vw, 1.85rem); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 520px) and (max-width: 759px) { .steps { grid-template-columns: repeat(2, 1fr); } }

.step {
    position: relative;
    padding: 1.75rem 1.6rem 1.85rem;
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
}
/* Numara ve ikon aynı satırda: adım hem sırayı hem konuyu anlatır */
.step__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.1rem;
}
.step__icon {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--accent, var(--teal-600));
    background: var(--white);
}

/* Dairesel adım numarası */
.step__num {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--blue-100);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--blue-700);
}
.step__title { font-size: 1.02rem; margin-bottom: .5rem; }
.step__text { font-size: var(--fs-small); color: var(--text-500); margin: 0; }

.section--dark .step, .section--darkest .step {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .1);
    box-shadow: none;
}
.section--dark .step__num, .section--darkest .step__num {
    background: rgba(255, 255, 255, .12); color: var(--teal-300);
}
.section--dark .step__icon, .section--darkest .step__icon {
    background: transparent;
    border-color: rgba(255, 255, 255, .18);
    color: var(--teal-300);
}
.section--dark .step__text, .section--darkest .step__text { color: var(--text-onDark); }

/* -------------------------------------------------------- DOKTOR BÖLÜMÜ -- */
.doctor-intro { display: grid; gap: clamp(1.75rem, 2.8vw, 2.75rem); align-items: center; }
@media (min-width: 900px) {
    .doctor-intro { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}
/*
 * Doktor portresi her kullanıldığı yerde daire biçimindedir.
 * Çerçeve iki halkadan oluşur: içte ince beyaz bir ayırıcı, dışta daha kalın
 * ve yumuşak bir buz mavisi halka. Bu, fotoğrafı zeminden ayırır ve marka
 * portresiyle aynı dili kurar.
 */
.doctor-intro__figure {
    position: relative;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
}
.doctor-intro__figure img {
    width: min(100%, 420px);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    /* Görselin kendi lacivert zemini olduğu için beyaz halka kullanılmaz;
       yalnızca yumuşak bir gölge ile zeminden ayrılır. */
    box-shadow: var(--shadow-md);
}
.section--dark .doctor-intro__figure img,
.section--darkest .doctor-intro__figure img {
    box-shadow: none;
}

/* Hap biçimli hastane rozeti */

@media (min-width: 620px) { .doctor-intro__facts { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------ BLOG KART -- */
.post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.post-card__media {
    margin: .75rem .75rem 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--clinic-100);
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover;
                        transition: transform .8s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__body { padding: 1.3rem 1.5rem 1.65rem; display: flex; flex-direction: column; flex: 1; }
.post-card__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
    font-size: var(--fs-micro);
    color: var(--text-500);
    margin-bottom: .8rem;
}
.post-card__cat {
    padding: .28rem .8rem;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    font-weight: 700;
}
.post-card__title { font-size: 1.08rem; margin-bottom: .55rem; }
.post-card__title a { color: inherit; }
.post-card__text { font-size: var(--fs-small); color: var(--text-500); margin-bottom: 1.1rem; }
.post-card__foot { margin-top: auto; }

/* ----------------------------------------------------------- VİDEO KART -- */
.video-card {
    position: relative;
    display: block;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.video-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.video-card__media {
    position: relative;
    margin: .75rem .75rem 0;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--clinic-100);
}
.video-card__media img { width: 100%; height: 100%; object-fit: cover;
                         transition: transform .8s var(--ease); }
.video-card:hover .video-card__media img { transform: scale(1.04); }
.video-card__play { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }
.video-card__play span {
    display: grid;
    place-items: center;
    width: 62px; height: 62px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--blue-700);
    box-shadow: var(--shadow-md);
    transition: transform var(--dur) var(--ease);
}
.video-card:hover .video-card__play span { transform: scale(1.08); }
.video-card__body { padding: 1.15rem 1.4rem 1.5rem; }
.video-card__cat {
    display: inline-block;
    padding: .26rem .8rem;
    margin-bottom: .55rem;
    border-radius: var(--r-pill);
    background: var(--teal-100);
    font-size: var(--fs-micro);
    font-weight: 700;
    color: var(--teal-600);
}
.video-card__title { font-size: 1rem; color: var(--text-900); margin-bottom: .35rem; }
.video-card__dur { font-size: var(--fs-micro); color: var(--text-500); }

.section--dark .video-card, .section--darkest .video-card {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .1);
    box-shadow: none;
}
.section--dark .video-card__title, .section--darkest .video-card__title { color: var(--text-light); }
.section--dark .video-card__cat, .section--darkest .video-card__cat {
    background: rgba(255, 255, 255, .12); color: var(--teal-300);
}

/* -------------------------------------------------------------- GALERİ -- */
/*
 * Galeri — patchwork (mozaik) düzen.
 *
 * Hücreler eşit değildir: belirli sıradaki kareler iki sütun veya iki satır
 * kaplar. Desen altı karede bir tekrarlar, böylece görsel sayısı ne olursa
 * olsun düzen dengeli kalır. Satır yüksekliği sabit tutulup hücreler bu
 * yüksekliğin katları kadar yer kapladığı için boşluk oluşmaz.
 */
.gallery-grid {
    display: grid;
    gap: clamp(.6rem, 1.2vw, 1rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 160px;
    grid-auto-flow: dense;
}
@media (min-width: 760px) {
    .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 190px; }
}
@media (min-width: 1100px) {
    .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; }
}

/* Patchwork deseni: 6'lı döngüde iki büyük, bir geniş, bir uzun hücre */
.gallery-item { grid-column: span 1; grid-row: span 1; }
@media (min-width: 760px) {
    .gallery-item:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
    .gallery-item:nth-child(6n + 4) { grid-row: span 2; }
    .gallery-item:nth-child(6n + 5) { grid-column: span 2; }
}
@media (max-width: 759px) {
    .gallery-item:nth-child(5n + 1) { grid-column: span 2; grid-row: span 2; }
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--clinic-100);
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gallery-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* Portrelerde yuz kadrajin ust bolumundedir; kirpma merkezden yapilinca
   yuz disarida kalabiliyordu. Odak yukari alinir. */
.gallery-item img { width: 100%; height: 100%; object-fit: cover;
                    object-position: center 28%;
                    transition: transform .8s var(--ease); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item__cap {
    position: absolute; inset: auto .75rem .75rem;
    padding: .55rem 1rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .95);
    color: var(--text-900); font-size: var(--fs-small);
    opacity: 0; transform: translateY(6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.gallery-item:hover .gallery-item__cap { opacity: 1; transform: none; }

/* Hap filtre çipleri */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 2rem; }
.chip {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--white);
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--text-700);
    transition: all var(--dur) var(--ease);
}
.chip:hover { border-color: var(--blue-300); color: var(--blue-700); background: var(--clinic-50); }
.chip.is-active { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.chip__count {
    font-size: var(--fs-micro);
    padding: .05rem .5rem;
    border-radius: var(--r-pill);
    background: var(--clinic-100);
    color: var(--text-500);
}
.chip.is-active .chip__count { background: rgba(255, 255, 255, .22); color: #fff; }

.section--dark .chip, .section--darkest .chip {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .14);
    color: var(--text-onDark);
}
.section--dark .chip__count, .section--darkest .chip__count {
    background: rgba(255, 255, 255, .12); color: var(--text-onDark);
}
.section--dark .chip.is-active, .section--darkest .chip.is-active {
    background: var(--teal-500); border-color: var(--teal-500); color: #06283D;
}

/* ------------------------------------------------------------------ SSS -- */
.faq { display: grid; gap: .85rem; }
.faq__item {
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq__item.is-open { border-color: var(--blue-100); box-shadow: var(--shadow-sm); }
.faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.2rem 1.5rem;
    background: none;
    border: 0;
    text-align: left;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-900);
    transition: color var(--dur) var(--ease);
}
.faq__q:hover { color: var(--blue-700); }
.faq__icon {
    flex: none;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--clinic-100);
    color: var(--blue-700);
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}
.faq__q[aria-expanded="true"] .faq__icon {
    transform: rotate(45deg); background: var(--blue-700); color: #fff;
}
.faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur) var(--ease);
}
.faq__a > div { overflow: hidden; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p { padding: 0 1.5rem 1.4rem; color: var(--text-500); font-size: .95rem; margin: 0; }

.section--dark .faq__item, .section--darkest .faq__item {
    background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1);
}
.section--dark .faq__q, .section--darkest .faq__q { color: var(--text-light); }
.section--dark .faq__icon, .section--darkest .faq__icon {
    background: rgba(255, 255, 255, .12); color: var(--teal-300);
}
.section--dark .faq__a p, .section--darkest .faq__a p { color: var(--text-onDark); }

/* -------------------------------------------------------------- İÇERİK -- */
.prose { font-size: 1.02rem; color: var(--text-700); }
.prose h2 { font-size: var(--fs-h3); margin-top: 2.4rem; margin-bottom: .9rem; color: var(--text-900); }
.prose h3 { font-size: 1.1rem; margin-top: 1.9rem; margin-bottom: .7rem; }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li::marker { color: var(--accent); }
.prose blockquote {
    margin: 1.8rem 0;
    padding: 1.35rem 1.75rem;
    background: var(--clinic-50);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    font-size: 1.02rem;
    color: var(--text-900);
}
.prose img { border-radius: var(--r-md); margin: 1.5rem 0; }
.prose table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.5rem 0;
               font-size: var(--fs-small); border: 1px solid var(--line-soft);
               border-radius: var(--r-md); overflow: hidden; }
.prose th, .prose td { padding: .85rem 1.1rem; border-bottom: 1px solid var(--line-soft);
                       text-align: left; }
.prose th { background: var(--clinic-50); font-family: var(--font-display); color: var(--text-900); }
.prose tr:last-child td { border-bottom: 0; }

.table-wrap { overflow-x: auto; }

/* Uzmanlık detay içerik blokları */
.block { padding-block: clamp(1.75rem, 3vw, 2.75rem); }
.block + .block { border-top: 1px solid var(--line-soft); }
.block__title { font-size: var(--fs-h3); margin-bottom: 1.1rem; }

.block--text_image, .block--image_text {
    display: grid;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
}
@media (min-width: 860px) {
    .block--text_image { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
    .block--image_text { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
    .block--image_text .block__media { order: -1; }
}
.block__media img {
    width: 100%;
    border-radius: var(--r-lg);
    object-fit: cover;
    aspect-ratio: 4 / 3;
    box-shadow: var(--shadow-sm);
}

/*
 * Olcut listesi.
 *
 * Bu bloklar "kimler icin uygundur", "ameliyat oncesi hazirlik" gibi
 * maddeleri tasir; her madde karsilanmasi beklenen bir olcuttur. Bu yuzden
 * madde imi bos bir daire degil, onay isaretidir: anlami gorsellestirir.
 *
 * Yerlesim izgaradir; im ve metin ayri sutunlardadir. Uzun bir madde ikinci
 * satira kaydiginda metin kendi sutununda hizali kalir, imin altina dusmez.
 * Sutun sayisi icerik genisligine gore kendiliginden belirlenir.
 */
.block--list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 390px), 1fr));
}
.block--list li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: .7rem;
    margin: 0;
    padding: .8rem 1.05rem;
    /* Sayfa zemini beyaz oldugu icin kart da beyaz olursa yalnizca kenarlik
       gorunur ve liste dagilmis durur; hafif tonlu zemin kartlari birbirine
       bagli bir kume olarak okutur. */
    background: var(--clinic-50);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    font-size: .92rem;
    line-height: 1.55;
    color: var(--text-700);
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.block--list li:hover {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line-soft));
    background: var(--clinic-100);
}
/* Onay isareti — maskelendigi icin vurgu rengini devralir */
.block--list li::before {
    content: "";
    width: 18px;
    height: 18px;
    margin-top: .22em;
    background: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
.section--dark .block--list li,
.section--darkest .block--list li {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
    color: var(--text-onDark);
}

/* Vurgu kutusu — yumuşak klinik mavisi */
.block--highlight {
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--clinic-100);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    color: var(--text-700);
}
.block + .block--highlight { border-top: 1px solid var(--line-soft); }
.block--highlight .block__title { color: var(--text-900); }
.block--highlight .prose, .block--highlight .prose p { color: var(--text-700); }

/*
 * Bilgilendirme kutusu.
 *
 * Saglik iceriginde zorunlu olan uyari metni. Sayfanin geri kalanindan
 * ayrismali ama dikkat calmamali: solda ince bir vurgu seridi ve bir bilgi
 * ikonu kullanilir, govde metni okunabilir bir olcude tutulur.
 */
.block--note {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 1rem;
    padding: 1.4rem 1.6rem 1.4rem 1.35rem;
    background: var(--clinic-50);
    border: 1px solid var(--line-soft);
    border-inline-start: 3px solid color-mix(in srgb, var(--blue-500) 55%, var(--line));
    border-radius: var(--r-md);
    font-size: var(--fs-small);
    line-height: 1.7;
    color: var(--text-500);
}
.block--note::before {
    content: "";
    width: 26px;
    height: 26px;
    margin-top: -.1em;
    background: var(--blue-600);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}
.block--note .prose { max-width: 74ch; }
.block--note .prose p:last-child { margin-bottom: 0; }
.block + .block--note { border-top: 0; margin-top: .5rem; }
.block--note .block__title {
    grid-column: 2;
    font-size: var(--fs-micro);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--blue-700);
    margin-bottom: .45rem;
}

.block--quote {
    padding: 1.5rem 1.75rem;
    background: var(--clinic-50);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    font-size: 1.08rem;
    color: var(--text-900);
}

/* İçindekiler */
.toc {
    padding: 1.5rem 1.6rem;
    background: var(--clinic-50);
    border-radius: var(--r-lg);
    border: 1px solid var(--line-soft);
}
.toc__title {
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--blue-700);
    margin-bottom: .85rem;
}
.toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 0; }
.toc li { counter-increment: toc; margin-bottom: .3rem; }
.toc a {
    display: flex; align-items: center; gap: .7rem;
    padding: .35rem .6rem;
    border-radius: var(--r-pill);
    font-size: var(--fs-small); color: var(--text-700);
}
.toc a::before {
    content: counter(toc, decimal-leading-zero);
    display: grid; place-items: center;
    width: 26px; height: 26px; flex: none;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--line-soft);
    color: var(--blue-700);
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 700;
}
.toc a:hover { color: var(--blue-700); background: var(--white); }

/* Yan sütun düzeni */
.with-aside { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 1000px) {
    .with-aside { grid-template-columns: minmax(0, 1fr) 330px; }
    .with-aside__aside { position: sticky; top: calc(var(--header-h) + 24px); }
}

.aside-card {
    padding: 1.6rem;
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    margin-bottom: 1.25rem;
}
.aside-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--blue-700);
    margin-bottom: 1rem;
}

/* Doktor kartı — dairesel portre */
.doctor-card { text-align: center; }
.doctor-card img {
    width: 132px; height: 132px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto .9rem;
    box-shadow: var(--shadow-ring);
}
.doctor-card__name { font-size: 1rem; margin-bottom: .2rem; }
.doctor-card__role { font-size: var(--fs-small); color: var(--text-500); margin-bottom: 1.15rem; }

/* ------------------------------------------------------------- CTA BAND -- */
.cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, var(--navy-800) 0%, var(--navy-900) 100%);
    color: var(--text-onDark);
}
.cta__inner { position: relative; z-index: 2; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .cta__inner { grid-template-columns: minmax(0, 1.15fr) auto; } }
.cta__title { font-size: var(--fs-h2); color: var(--text-light); margin-bottom: .8rem; }
.cta__text { color: var(--text-onDark); max-width: 56ch; margin: 0; }
.cta__note { font-size: var(--fs-small); color: rgba(201, 220, 236, .72); margin-top: .9rem; }

/* --------------------------------------------------------- BİLGİ NOTU -- */
.notice {
    display: flex;
    gap: 1rem;
    padding: 1.2rem 1.5rem;
    background: var(--clinic-50);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    font-size: var(--fs-small);
    color: var(--text-500);
}
.notice .icon {
    flex: none; width: 36px; height: 36px; padding: 8px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--line-soft);
    color: var(--blue-600);
}
.notice--dark {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .1);
    color: var(--text-onDark);
}
.notice--dark .icon {
    background: rgba(255, 255, 255, .1); border-color: transparent; color: var(--teal-300);
}

/* ------------------------------------------------------------- FORMLAR -- */
.field { margin-bottom: 1.15rem; }
.field__label {
    display: block;
    margin-bottom: .45rem;
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--text-900);
}
.field__req { color: var(--blue-600); }
.input, .textarea, .select {
    width: 100%;
    padding: .88rem 1.25rem;
    background: var(--white);
    border: 1.5px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--text-900);
    font: inherit;
    font-size: .95rem;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.textarea { border-radius: var(--r-md); min-height: 150px; resize: vertical; }
.input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--blue-600);
    box-shadow: var(--shadow-ring);
}
.field__error { display: block; margin-top: .35rem; font-size: var(--fs-small); color: #C0392B; }

.check { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--fs-small);
         color: var(--text-500); }
.check input { margin-top: .28rem; accent-color: var(--blue-700); }

.alert {
    padding: 1rem 1.35rem;
    border-radius: var(--r-md);
    font-size: var(--fs-small);
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
}
.alert--success { background: #E9F6EF; border-color: #BEE3CE; color: #17603C; }
.alert--error   { background: #FCECEA; border-color: #F3C8C2; color: #9A2B21; }

/* ------------------------------------------------------------- İLETİŞİM -- */
.contact-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 940px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.contact-list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .75rem; }
.contact-list li {
    display: flex; gap: 1rem; margin: 0;
    padding: .95rem 1.25rem;
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
}
.contact-list .icon {
    width: 38px; height: 38px; padding: 9px; flex: none;
    border-radius: 50%;
    background: var(--clinic-100);
    color: var(--blue-600);
}
.contact-list__label {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-500);
    margin-bottom: .12rem;
}
.contact-list__value { font-size: .95rem; color: var(--text-900); }
.contact-list a { color: inherit; }
.contact-list a:hover { color: var(--blue-700); }

.section--dark .contact-list li, .section--darkest .contact-list li {
    background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1);
}
.section--dark .contact-list .icon, .section--darkest .contact-list .icon {
    background: rgba(255, 255, 255, .1); color: var(--teal-300);
}
.section--dark .contact-list__value, .section--darkest .contact-list__value { color: var(--text-light); }
.section--dark .contact-list__label, .section--darkest .contact-list__label {
    color: rgba(201, 220, 236, .7);
}

.map-frame {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line-soft);
    background: var(--clinic-100);
    aspect-ratio: 16 / 10;
    box-shadow: var(--shadow-sm);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --------------------------------------------------------------- FOOTER -- */
.site-footer {
    position: relative;
    background: var(--navy-900);
    color: var(--text-onDark);
    padding-top: clamp(3.5rem, 6vw, 5rem);
}
.footer__grid {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr;
    padding-bottom: 3rem;
}
.footer__brand { grid-column: 1 / -1; }
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
    .footer__grid { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); }
    .footer__brand { grid-column: auto; max-width: 320px; }
}
.footer__about { font-size: var(--fs-small); color: rgba(201, 220, 236, .78);
                 margin: 1.15rem 0 1.5rem; }

.footer__title {
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 1.15rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: .55rem; }
.footer__list a { font-size: var(--fs-small); color: var(--text-onDark); }
.footer__list a:hover { color: var(--teal-300); }

.socials { display: flex; gap: .55rem; }
.socials a {
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    color: var(--text-onDark);
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
                background-color var(--dur) var(--ease);
}
.socials a:hover { border-color: transparent; color: #06283D; background: var(--teal-300); }

.footer__bottom {
    padding-block: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    font-size: var(--fs-micro);
    color: rgba(201, 220, 236, .7);
}
.footer__disclaimer {
    padding-block: 1.35rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: var(--fs-micro);
    color: rgba(201, 220, 236, .65);
    max-width: 90ch;
}

/* ---------------------------------------------------- HIZLI ERİŞİM (FAB) -- */
/* WhatsApp · Ara · Online Randevu — sağ alt köşede dairesel yığın */
.fab {
    position: fixed;
    inset-inline-end: clamp(.9rem, 2vw, 1.5rem);
    bottom: calc(clamp(.9rem, 2vw, 1.5rem) + env(safe-area-inset-bottom));
    z-index: 330;              /* çerez barının (320) üstünde kalır */
    display: flex;
    flex-direction: column;
    gap: .6rem;
    align-items: flex-end;
}
.fab__btn {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 54px;
    padding: 0;
    border-radius: var(--r-pill);
    background: var(--white);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-md);
    color: var(--text-700);
    overflow: hidden;
    transition: gap var(--dur) var(--ease), padding var(--dur) var(--ease),
                background-color var(--dur) var(--ease), color var(--dur) var(--ease),
                transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fab__icon { display: grid; place-items: center; width: 54px; height: 54px; flex: none; }
.fab__label {
    max-width: 0;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: .875rem;
    font-weight: 700;
    opacity: 0;
    transition: max-width var(--dur) var(--ease), opacity var(--dur) var(--ease),
                padding var(--dur) var(--ease);
}
.fab__btn:hover, .fab__btn:focus-visible {
    transform: translateX(-2px);
    box-shadow: var(--shadow-lg);
}
.fab__btn:hover .fab__label, .fab__btn:focus-visible .fab__label {
    max-width: 220px;
    opacity: 1;
    padding-right: 1.35rem;
}

/* Renk, hover ve focus durumlarında da açıkça yazılır; aksi hâlde global
   `a:hover` kuralı daha yüksek özgüllükle metni koyulaştırıp zemine karıştırır. */
.fab__btn--whatsapp,
.fab__btn--whatsapp:hover,
.fab__btn--whatsapp:focus-visible { background: #25D366; border-color: #25D366; color: #fff; }
.fab__btn--whatsapp:hover { background: #1FBE5A; border-color: #1FBE5A; }

.fab__btn--phone,
.fab__btn--phone:hover,
.fab__btn--phone:focus-visible { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.fab__btn--phone:hover { background: var(--blue-600); border-color: var(--blue-600); }

.fab__btn--appointment,
.fab__btn--appointment:hover,
.fab__btn--appointment:focus-visible { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }
.fab__btn--appointment:hover { background: var(--teal-500); border-color: var(--teal-500); }

.fab__btn--contact,
.fab__btn--contact:hover,
.fab__btn--contact:focus-visible { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.fab__btn--contact:hover { background: var(--blue-600); border-color: var(--blue-600); }

/* Dokunmatik cihazlarda hover çalışmadığından etiketler açık gösterilir. */
@media (hover: none) {
    .fab__label { max-width: 220px; opacity: 1; padding-inline-end: 1.25rem; }
}

/* ------------------------------------------------------ MOBİL ALT BAR -- */
.mobile-bar {
    position: fixed;
    inset: auto .75rem calc(.75rem + env(safe-area-inset-bottom));
    z-index: 180;
    display: none;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-md);
}
.mobile-bar__inner { display: grid; grid-template-columns: repeat(3, 1fr); padding: .35rem; }
.mobile-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: .55rem .4rem;
    border-radius: var(--r-pill);
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-700);
}
.mobile-bar a.is-accent,
.mobile-bar a.is-accent:hover,
.mobile-bar a.is-accent:focus-visible { background: var(--teal-600); color: #fff; }
.mobile-bar a .icon { width: 20px; height: 20px; }

/* ------------------------------------------------------------ INSTAGRAM -- */
.instagram .kicker .icon { width: 14px; height: 14px; }

/*
 * Instagram sayfası — tüm videolar üçlü ızgarada, alt alta.
 * Ana sayfada ray kullanılır (yer kısıtlı); bu sayfada içeriğin tamamı
 * görünür olsun diye kaydırma yerine ızgara tercih edilir.
 */
.ig-page-grid {
    display: grid;
    gap: clamp(.85rem, 1.6vw, 1.3rem);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) { .ig-page-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .ig-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .ig-page-grid { grid-template-columns: minmax(0, 1fr); } }

/* Son videolar — yatay kaydırmalı dikey (9:16) reel rayı */
.ig-reels { position: relative; margin-bottom: 1.75rem; }

.ig-reels__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * .85rem) / 4);
    gap: .85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: .35rem;
    -webkit-overflow-scrolling: touch;
}
.ig-reels__track::-webkit-scrollbar { display: none; }

/* Ray okları — kartların dışına taşan yuvarlak düğmeler */
.ig-reels__nav {
    position: absolute;
    top: 32%;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--blue-700);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.ig-reels__nav:hover,
.ig-reels__nav:focus-visible {
    background: var(--blue-700);
    border-color: var(--blue-700);
    color: #fff;
}
.ig-reels__nav--prev { left: -18px; }
.ig-reels__nav--next { right: -18px; }
.ig-reels__nav[disabled] { opacity: 0; pointer-events: none; }

@media (max-width: 900px) { .ig-reels__nav { display: none; } }
.ig-reel {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    text-decoration: none;
    color: inherit;
}
.ig-reel__frame {
    position: relative;
    display: block;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--clinic-100);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ig-reel__frame img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease);
}
.ig-reel:hover .ig-reel__frame { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.ig-reel:hover .ig-reel__frame img { transform: scale(1.05); }

.ig-reel__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 54px; height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--blue-700);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}
.ig-reel:hover .ig-reel__play {
    transform: scale(1.08);
    background: var(--blue-700);
    color: #fff;
}

.ig-reel__meta { display: flex; flex-direction: column; gap: .35rem; }
.ig-reel__tag {
    display: inline-flex; align-items: center; gap: .4rem;
    align-self: flex-start;
    padding: .3rem .75rem;
    border-radius: var(--r-pill);
    background: var(--blue-100);
    color: var(--blue-700);
    font-size: .78rem;
    font-weight: 600;
}
.ig-reel__cap { font-size: var(--fs-small); color: var(--text-500); line-height: 1.55; }

.ig-reel { scroll-snap-align: start; }

@media (max-width: 1200px) {
    .ig-reels__track { grid-auto-columns: calc((100% - 2 * .85rem) / 3); }
}
@media (max-width: 1000px) {
    .ig-reels__track { grid-auto-columns: calc((100% - 3 * .85rem) / 4); }
}
@media (max-width: 820px) {
    .ig-reels__track { grid-auto-columns: calc((100% - 2 * .85rem) / 3); }
}
@media (max-width: 620px) {
    .ig-reels__track { grid-auto-columns: 58%; }
    .ig-reel__play { width: 48px; height: 48px; }
}

.section--dark .ig-reel__cap, .section--darkest .ig-reel__cap { color: var(--text-onDark); }

.ig-grid { display: grid; gap: .85rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px)  { .ig-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ig-item {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--clinic-100);
    box-shadow: var(--shadow-xs);
}
.ig-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ig-item:hover img { transform: scale(1.06); }
.ig-item__badge {
    position: absolute;
    top: .65rem; right: .65rem;
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--text-900);
    box-shadow: var(--shadow-xs);
}
.ig-item__cap {
    position: absolute;
    inset: auto .6rem .6rem;
    padding: .5rem .9rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .95);
    color: var(--text-900);
    font-size: var(--fs-micro);
    line-height: 1.4;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ig-item:hover .ig-item__cap { opacity: 1; transform: none; }

.ig-empty {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    background: var(--clinic-50);
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    color: var(--text-500);
}
.ig-empty strong { display: block; font-family: var(--font-display); color: var(--text-900); }
.ig-empty span span { font-size: var(--fs-small); }
.ig-empty > .icon { margin-left: auto; color: var(--blue-700); }
.ig-empty:hover { border-color: var(--blue-300); background: var(--white); }

/* -------------------------------------------------------- ARA BANT (PROMO) -- */
.promo-wrap { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.promo {
    position: relative;
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: center;
    padding: clamp(1.75rem, 3.5vw, 2.75rem);
    border-radius: var(--r-lg);
    overflow: hidden;
}
@media (min-width: 860px) {
    .promo { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
    .promo__media { order: 2; }
}
.promo__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); margin-bottom: .7rem; }
.promo__text { font-size: var(--fs-lead); margin-bottom: 1.5rem; max-width: 54ch; }
.promo__media img {
    width: 100%;
    border-radius: var(--r-md);
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

.promo--light  { background: var(--white); border: 1px solid var(--line-soft); box-shadow: var(--shadow-xs); }
.promo--tinted { background: var(--clinic-100); border: 1px solid var(--line-soft); }
.promo--light .promo__text, .promo--tinted .promo__text { color: var(--text-500); }

.promo--dark {
    background: linear-gradient(150deg, var(--navy-800) 0%, var(--navy-900) 100%);
    color: var(--text-onDark);
}
.promo--dark .promo__title { color: var(--text-light); }
.promo--dark .promo__text { color: var(--text-onDark); }
.promo--dark .kicker { background: rgba(255, 255, 255, .12); color: var(--teal-300); }

/* Vurgu rengi ince bir şerit olarak solda durur */
.promo::before {
    content: "";
    position: absolute;
    inset: clamp(1.75rem, 3.5vw, 2.75rem) auto clamp(1.75rem, 3.5vw, 2.75rem) 0;
    width: 4px;
    border-radius: var(--r-pill);
    background: var(--accent);
    opacity: .9;
}
.promo--dark::before { background: var(--teal-300); }

/* --------------------------------------------------------- SAYFALAMA -- */
.pagination { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin-top: 3rem; }
.pagination__item {
    display: grid; place-items: center;
    min-width: 44px; height: 44px;
    padding-inline: .7rem;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: var(--fs-small);
    color: var(--text-700);
    transition: all var(--dur) var(--ease);
}
.pagination__item:hover { border-color: var(--blue-300); color: var(--blue-700);
                          background: var(--clinic-50); }
.pagination__item.is-current { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.pagination__gap { display: grid; place-items: center; min-width: 28px; color: var(--text-500); }

/* ---------------------------------------------------------- YARDIMCILAR -- */
.img-placeholder {
    background: linear-gradient(140deg, var(--clinic-100) 0%, var(--clinic-200) 100%);
    border-radius: var(--r-md);
    aspect-ratio: 4 / 3;
}
.empty-state {
    padding: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
    background: var(--clinic-50);
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    color: var(--text-500);
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; }
.center-actions { display: flex; justify-content: center; margin-top: clamp(1.35rem, 2.4vw, 2rem); }

.scroll-progress {
    position: fixed;
    inset: 0 0 auto;
    z-index: 400;
    height: 3px;
    width: 0;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--blue-600), var(--teal-500));
    transition: width .12s linear;
}

/* Çerez barı */
.cookie-bar {
    position: fixed;
    /* Sol alta sabitlenir; sağ alttaki hızlı erişim düğmeleriyle çakışmaz. */
    inset: auto auto 1rem 1rem;
    z-index: 320;
    width: min(460px, calc(100vw - 2rem));
    padding: 1.35rem 1.6rem;
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    color: var(--text-500);
    font-size: var(--fs-small);
    transform: translateY(150%);
    transition: transform .5s var(--ease);
}
.cookie-bar.is-visible { transform: translateY(0); }
.cookie-bar__actions { display: flex; gap: .6rem; margin-top: 1rem; }

/* ------------------------------------------------------ REVEAL ANİMASYON -- */
[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; }
}

.counter { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- GENİŞ EKRAN -- */
/* 1600px üzerinde içerik alanı ve tipografi bir kademe büyür; sayfa
   geniş monitörlerde seyrek görünmez. */
@media (min-width: 1600px) {
    :root {
        --shell: 1420px;
        --section-y: clamp(3.25rem, 3.6vw, 5rem);
        --fs-body: 1.045rem;
    }
    .hero__figure img { max-width: 470px; max-height: 590px; }
    .hero__figure--bare img { max-width: 100%; max-height: min(560px, 58svh); }
    .hero__figure:not(.hero__figure--bare)::after { width: min(100%, 470px); }
}

/* ----------------------------------------------------------- RESPONSIVE -- */
@media (max-width: 1140px) {
    .nav { display: none; }
    .nav-toggle { display: grid; }
}

/* Dar ekranda başlık çubuğu kalabalıklaşmasın: dil seçici mobil menüde kalır. */
@media (max-width: 620px) {
    .header__actions .lang { display: none; }
}
@media (max-width: 400px) {
    .header__actions .search-toggle { display: none; }
}

/* Tek sütuna düşen hero'da portre aşırı uzamamalı */
@media (max-width: 999px) {
    .hero__figure:not(.hero__figure--bare) { max-width: 460px; margin-inline: auto; }
    .hero__figure img { aspect-ratio: 4 / 5; max-height: 52svh; }
    .hero__figure--bare img { aspect-ratio: auto; max-height: 62svh; }
}

@media (max-width: 720px) {
    :root { --header-h: 72px; }

    .brand__role { display: none; }
    .brand__name { font-size: .92rem; }
    .brand__mark { width: 40px; height: 40px; }
    .brand__portrait { width: 46px; height: 46px; }
    .brand__name { font-size: .98rem; }
    .header__actions .btn { display: none; }

    body.has-mobile-bar { padding-bottom: 82px; }
    .mobile-bar { display: block; }

    /* Alt bar aynı üç eylemi sunduğundan FAB gizlenir; ikisi üst üste binmez.
       Alt bar panelden kapatılırsa FAB mobilde de görünmeye devam eder. */
    body.has-mobile-bar .fab { display: none; }

    /* Çerez barı alt barın üzerine oturur */
    body.has-mobile-bar .cookie-bar {
        inset: auto .75rem calc(84px + env(safe-area-inset-bottom)) .75rem;
        width: auto;
    }

    /* Arka plan gorselli hero'da figur alt kenara oturur; dolgu
       yalnizca gorselsiz surumde uygulanir. */
    .hero:not(.hero--media) { padding-bottom: 2.5rem; }
    .hero__scroll { display: none; }
    .hero__figure:not(.hero__figure--bare) { max-width: 320px; padding: .75rem; }
    .hero__figure img { aspect-ratio: 4 / 5; max-height: 46svh; }
    .hero__figure--bare img { aspect-ratio: auto; max-height: 58svh; }
    .hero__meta { gap: .5rem; }
    .hero__nav { justify-content: center; }

    .btn { width: 100%; }
    .btn-row .btn { width: auto; flex: 1 1 auto; min-width: 170px; }

    .showcase__stage { min-height: 280px; }
    .doctor-intro__figure { max-width: 480px; margin-inline: auto; }
}

@media (max-width: 430px) {
    :root { --gutter: 1.15rem; }
    .btn-row .btn { width: 100%; flex: 1 1 100%; }
    .hero__meta-item { width: 100%; }
}

/* ------------------------------------------------------------------ RTL -- */
/* Arapça sağdan sola yazılır. Yerleşimin büyük bölümü mantıksal
   özelliklerle (margin-inline, inset-inline) kurulduğu için otomatik
   aynalanır; aşağıda yalnızca yönü sabit kalan öğeler düzeltilir. */
[dir="rtl"] .kicker::before,
[dir="rtl"] .hero__kicker::before { order: 1; }

[dir="rtl"] .link-arrow .icon,
[dir="rtl"] .btn .icon,
[dir="rtl"] .mobile-nav__link .icon,
[dir="rtl"] .cat-card__go .icon { transform: scaleX(-1); }
[dir="rtl"] .link-arrow:hover .icon { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .cat-card:hover .cat-card__go { transform: translateX(-2px); }

/* Sola/sağa sabitlenmiş öğeler aynalanır */
[dir="rtl"] .fab { right: auto; left: clamp(.9rem, 2vw, 1.5rem); }
[dir="rtl"] .fab { align-items: flex-start; }
[dir="rtl"] .fab__btn:hover { transform: translateX(2px); }
[dir="rtl"] .fab__btn:hover .fab__label,
[dir="rtl"] .fab__btn:focus-visible .fab__label { padding-right: 0; padding-left: 1.35rem; }

[dir="rtl"] .cat-card__chip { right: auto; left: 1.25rem; }
/* Degrade örtü, metnin bulunduğu tarafa göre yön değiştirir */
[dir="rtl"] .hero__scrim {
    background:
        linear-gradient(255deg,
            rgba(6, 22, 42, .94) 0%,
            rgba(8, 28, 52, .84) 38%,
            rgba(12, 40, 72, .52) 68%,
            rgba(16, 50, 88, .34) 100%),
        linear-gradient(180deg, rgba(6, 22, 42, .45) 0%, rgba(6, 22, 42, 0) 30%);
}
[dir="rtl"] .ig-reels__nav--prev { left: auto; right: -18px; }
[dir="rtl"] .ig-reels__nav--next { right: auto; left: -18px; }
[dir="rtl"] .ig-reels__nav .icon { transform: scaleX(-1); }
/* Izgara yönü otomatik döner; madalyona ek kural gerekmez. */
[dir="rtl"] .promo::before { inset-inline: 0 auto; }
[dir="rtl"] .ig-item__badge { right: auto; left: .65rem; }
[dir="rtl"] .toc a::before { order: -1; }

/* Metin hizası */
[dir="rtl"] .hero__content,
[dir="rtl"] .page-hero__inner,
[dir="rtl"] .sec-head,
[dir="rtl"] .prose { text-align: right; }
[dir="rtl"] .sec-head--center { text-align: center; }

/* Liste ızgarası yön duyarlıdır; ek kural gerekmez. */

/* Arapça için ayrı yazı ailesi (Exo 2'de Arapça glif yoktur) */
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5,
[dir="rtl"] .btn, [dir="rtl"] .nav__link, [dir="rtl"] .kicker,
[dir="rtl"] .input, [dir="rtl"] .textarea, [dir="rtl"] .select {
    font-family: var(--font-arabic);
}
/* Arapça metin daha yüksek satır aralığı ister */
[dir="rtl"] body { line-height: 1.9; }
[dir="rtl"] .hero__title,
[dir="rtl"] .sec-title,
[dir="rtl"] .page-hero__title { letter-spacing: 0; }

/* --------------------------------------------------------------- PRINT -- */
@media print {
    .site-header, .site-footer, .mobile-bar, .cookie-bar, .scroll-progress,
    .hero__bg, .cta { display: none !important; }
    body { color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
}

/* ---------------------------------------------------------------------------
 *  Hero figürü — mobil son ayar
 *
 *  Bu blok bilinçli olarak dosyanın sonundadır. Figürün boyutu ve konumu
 *  daha önce tanımlanmış birkaç kırılım kuralı tarafından kademeli olarak
 *  daraltılıyordu; burada tek bir yerde kesinleştirilir:
 *    - figür sütunun tamamını kaplar
 *    - görsel alt kenara sıfırlanır, altında boşluk kalmaz
 * ------------------------------------------------------------------------ */
@media (max-width: 1000px) {
    .hero--media .hero__figure--bare {
        display: block;
        width: 100%;
        max-width: none;
        padding: 0;
        margin: 0;
        line-height: 0;
        align-self: end;
    }
    .hero--media .hero__figure--bare img {
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
        max-height: 62svh;
        object-fit: contain;
        object-position: bottom;
        margin: 0 auto;
    }
}