/* =========================================================================
   Akça Diş - visual layer
   Design reference: 98_info/Akca_Dis_Web_Dentalkit_Tasarim_Referansi.md
   - Premium / minimal / dark / elegant. Alternating anthracite & off-white
     sections. Pantone 340 C green is an ACCENT only (buttons, thin lines,
     icons, active menu, stats) - never a dominant fill.
   - Brand hexes below are taken from the swatch definitions inside
     98_info/"akca dis final pantone colored.ai":
       PANTONE 340 C          Lab(51.76, -65, 15)  -> sRGB #00945E
       PANTONE Cool Gray 9 C  Lab(50.20,   0, -2)  -> sRGB #76777B
     (the artwork's own path fills are #00945E and #767880 - same to <=2/255).
   ---------------------------------------------------------------------------
   Typography (self-hosted, variable, custom-subset — see tools/subset_fonts.py
   and README "Fonts"). Each family ships as two files: "latin" (Basic Latin +
   Latin-1 Supplement + the punctuation/currency the site emits) and "latinext"
   (only the six Turkish Latin Extended-A letters — ı İ ş Ş ğ Ğ; ç Ç ö Ö ü Ü sit
   in Latin-1 and come from the "latin" file). The two unicode-ranges below are
   disjoint, so a Turkish page fetches both and an English page fetches only
   "latin". Keep them in step with UNICODES in tools/subset_fonts.py.
     Fraunces  - display serif for headings (Undercase Type, SIL OFL).
     Inter     - body / UI sans (SIL OFL).
   ========================================================================= */

@font-face {
    font-family: "Inter var";
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    src: url("../fonts/inter-latin.0942ac763b04.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0152-0153, U+2013-2014, U+2018-201E,
        U+2020-2022, U+2026, U+2032-2033, U+2039-203A, U+2212, U+20AC, U+20BA,
        U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter var";
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    src: url("../fonts/inter-latinext.dbb5fb09779d.woff2") format("woff2");
    unicode-range: U+011E-011F, U+0130-0131, U+015E-015F;
}
@font-face {
    font-family: "Fraunces var";
    font-weight: 300 700;
    font-display: swap;
    font-style: normal;
    src: url("../fonts/fraunces-latin.6542776f46f6.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0152-0153, U+2013-2014, U+2018-201E,
        U+2020-2022, U+2026, U+2032-2033, U+2039-203A, U+2212, U+20AC, U+20BA,
        U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Fraunces var";
    font-weight: 300 700;
    font-display: swap;
    font-style: normal;
    src: url("../fonts/fraunces-latinext.c57284e33550.woff2") format("woff2");
    unicode-range: U+011E-011F, U+0130-0131, U+015E-015F;
}

:root {
    --green: #00945e;          /* PANTONE 340 C */
    --green-strong: #007a4d;   /* darker, for hover/pressed */
    --green-tint: #e3f1ea;     /* pale wash for icon chips / light fills */
    --green-glow: rgba(0, 148, 94, 0.10);  /* decorative dot-grid / accents only */

    --gray: #76777b;           /* PANTONE Cool Gray 9 C */
    --gray-soft: #9a9b9e;

    --anthracite: #16191b;
    --anthracite-2: #1e2224;
    --anthracite-line: rgba(255, 255, 255, 0.12);

    --paper: #f7f6f3;          /* kırık beyaz */
    --paper-2: #ffffff;
    --paper-line: #e4e2dc;

    --ink: #1b1e20;
    --ink-soft: #4c4f51;

    --maxw: 1180px;
    --gutter: clamp(1.15rem, 4vw, 2.5rem);
    /* one vertical-rhythm token: identical breathing room above and below every
       section / content block, everywhere. The floor is high enough that a run
       of stacked sections still reads as separate bands on a 390px screen. */
    --pad-block: clamp(5.25rem, 2.5rem + 10vw, 7.5rem);

    /* one radius token, used on every card + image container */
    --radius: 18px;
    --radius-sm: 12px;

    --shadow-card: 0 1px 2px rgba(20, 22, 24, 0.04), 0 12px 32px -20px rgba(20, 22, 24, 0.28);
    --shadow-lift: 0 2px 6px rgba(20, 22, 24, 0.06), 0 28px 60px -28px rgba(20, 22, 24, 0.40);

    --font: "Inter var", "Inter", -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --font-head: "Fraunces var", Georgia, "Times New Roman", serif;

    /* type scale (1.28 ratio, fluid) */
    --step-hero: clamp(2.6rem, 1.7rem + 4.4vw, 4.4rem);
    --step-h2: clamp(1.9rem, 1.35rem + 2.6vw, 2.9rem);
    --step-h3: 1.18rem;                 /* card titles */
    --step-body: 1.02rem;
    --step-lead: clamp(1.12rem, 1.02rem + 0.4vw, 1.28rem);

    --reveal-distance: 26px;
    --reveal-duration: 720ms;
    --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);

    --bottombar-h: 0px;
}

* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    /* the off-canvas mobile nav is parked off-screen right; clip so it never
       creates a horizontal scrollbar. `clip` (not `hidden`) keeps position:
       sticky on the header working. */
    overflow-x: clip;
}
body { overflow-x: clip; }

body {
    margin: 0;
    font-family: var(--font);
    font-feature-settings: "cv05", "ss01";  /* Inter: friendlier l, single-storey a */
    color: var(--ink);
    background: var(--paper);
    line-height: 1.68;
    font-size: var(--step-body);
    padding-bottom: var(--bottombar-h);
    -webkit-font-smoothing: antialiased;
}

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

p { max-width: 68ch; }

a { color: var(--green-strong); text-underline-offset: 2px; }

h1, h2, h3, h4 {
    font-family: var(--font-head);
    line-height: 1.12;
    letter-spacing: -0.015em;
    font-weight: 460;
    font-optical-sizing: auto;
    text-wrap: balance;
    color: var(--ink);
}
h1 { font-size: var(--step-hero); font-weight: 460; }
h2 { font-size: var(--step-h2); font-weight: 460; margin: 0 0 0.6em; }
h3 {
    font-family: var(--font);           /* card titles stay sans - closer to body */
    font-size: var(--step-h3);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.skip-link {
    position: absolute;
    left: -9999px;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
    z-index: 1000;
    background: var(--paper-2);
    color: var(--ink);
    padding: 0.6rem 1rem;
    border: 2px solid var(--green-strong);
    border-radius: var(--radius);
}
main:focus { outline: none; }   /* the skip target only needs programmatic focus */

/* ------------------------------------------------------------------ *
 *  Focus visibility - one consistent, high-contrast ring on every
 *  interactive element (WCAG 2.4.7 / 2.4.11). :where() keeps it at
 *  zero specificity so component styles can still refine it.
 * ------------------------------------------------------------------ */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--green-strong);
    outline-offset: 2px;
    border-radius: 4px;
}
/* against near-black surfaces the green ring is low-contrast; use white */
:where(.hero, .section--dark, .site-footer, .action-bar)
    :where(a, button, summary, input, [tabindex]):focus-visible {
    outline-color: #fff;
}

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

/* ------------------------------------------------------------------ *
 *  Language switcher (TR / EN)
 * ------------------------------------------------------------------ */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}
.lang-switch__item {
    font-family: var(--font);
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--ink-soft);
    padding: 0.32rem 0.42rem;
    border-radius: 7px;
    transition: color 140ms ease, background 140ms ease;
}
.lang-switch__item:hover { color: var(--ink); background: var(--paper); }
.lang-switch__item--active { color: var(--green-strong); }
/* the compact TR/EN pair lives in the desktop header actions bar */
.lang-switch--inline { margin-right: 0.15rem; }
.lang-switch--inline .lang-switch__item + .lang-switch__item { border-left: 1px solid var(--paper-line); border-radius: 0 7px 7px 0; }
.lang-switch--inline .lang-switch__item:first-child { border-radius: 7px 0 0 7px; }
/* the full-label switcher only appears inside the mobile drawer */
.lang-switch--drawer { display: none; }

@media (max-width: 1100px) {
    .lang-switch--drawer {
        display: flex;
        gap: 0.5rem;
        margin-top: 1.5rem;
        padding-top: 1.25rem;
        border-top: 1px solid var(--anthracite-line);
    }
    .lang-switch--drawer .lang-switch__item {
        font-size: 0.95rem;
        color: rgba(255, 255, 255, 0.7);
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--anthracite-line);
        border-radius: 999px;
    }
    .lang-switch--drawer .lang-switch__item:hover { color: #fff; background: rgba(255,255,255,0.06); }
    .lang-switch--drawer .lang-switch__item--active {
        color: #fff;
        border-color: var(--green);
        background: rgba(0, 148, 94, 0.15);
    }
}

/* ------------------------------------------------------------------ *
 *  Search page
 * ------------------------------------------------------------------ */
.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    max-width: 34rem;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.search-form input[type="search"] {
    flex: 1 1 12rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-sm);
    font: inherit;
    color: var(--ink);
    background: var(--paper-2);
    -webkit-appearance: none;
    appearance: none;
}
.search-form input[type="search"]:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.search-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.search-results h2 { font-size: 1.15rem; margin: 0 0 0.25rem; }
.search-results a { color: var(--ink); text-decoration: none; }
.search-results a:hover { color: var(--green-strong); }
.search-results p { margin: 0; color: var(--ink-soft); }
.pagination { display: flex; gap: 1.5rem; justify-content: center; margin-top: 2.5rem; }
.pagination a { color: var(--green-strong); text-decoration: none; font-weight: 600; }
.search-empty { text-align: center; color: var(--ink-soft); }

/* ------------------------------------------------------------------ *
 *  Buttons
 * ------------------------------------------------------------------ */
.btn {
    /* Brand decision: the exact Pantone 340 C (--green #00945E) is the fill,
       with anthracite (#16191B) text — 4.54:1, passes WCAG AA. White text on
       this green is only 3.8:1, so the label is dark, not white. */
    --btn-bg: var(--green);
    /* Tema özel bir ana renk kullanıyorsa yazı rengi ona göre seçilir
       (home/tema.py: buton_yazi_rengi). Değişken tanımsızken antrasit. */
    --btn-fg: var(--btn-fg-tema, var(--anthracite));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    min-height: 44px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1;
    text-decoration: none;
    border: 1.5px solid transparent;
    background: var(--btn-bg);
    color: var(--btn-fg);
    cursor: pointer;
    transition: transform 180ms var(--reveal-ease), background 180ms ease,
        border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
/* hover: lift only — the fill must stay exactly --green (a darker green
   would drop the dark label below AA), so feedback comes from the raise +
   a soft green cast. */
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(0, 148, 94, 0.55); }
.btn--secondary {
    --btn-bg: transparent;
    --btn-fg: currentColor;
    border-color: currentColor;
}
.btn--secondary:hover { background: transparent; border-color: var(--green); color: var(--green-strong); }
.btn--whatsapp { --btn-bg: transparent; --btn-fg: currentColor; border-color: var(--anthracite-line); }
.btn--ghost { --btn-bg: transparent; --btn-fg: currentColor; border-color: transparent; }
/* <button class="btn"> (formların gönder düğmeleri): tarayıcı form düğmelerine
   sayfanın yazı tipini DEVRETMEZ, kendi yazı tipini verir (Windows'ta Arial).
   <a class="btn"> ise devralıyor; aynı sınıfı taşıyan iki buton farklı yazı
   tipiyle çiziliyordu. Düğme de sitenin yazı ailesine bağlanıyor. */
button.btn { font-family: var(--font); }

/* ------------------------------------------------------------------ *
 *  Header + navigation
 * ------------------------------------------------------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(247, 246, 243, 0.9);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--paper-line);
}
.site-header__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0.85rem var(--gutter);
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.1vw, 1rem);
    flex-wrap: nowrap;
}
.site-header__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--ink);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    margin-right: auto;
    flex: 0 0 auto;
}
.site-header__logo-text { white-space: nowrap; font-family: var(--font); }
.site-header__logo-mark {
    height: 1.45em;              /* matches the "Akça Diş" text height */
    width: auto;
    display: block;
    flex: 0 0 auto;
}
@media (max-width: 480px) {
    .site-header__logo { font-size: 0.98rem; }
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--paper-line);
    border-radius: 10px;
    background: var(--paper-2);
    position: relative;
    cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 18px;
    height: 2px;
    background: var(--ink);
    transform: translateX(-50%);
    transition: transform 220ms var(--reveal-ease), opacity 160ms ease;
}
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateX(-50%) translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span::after { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

/* The nav takes exactly its content width and never shrinks below it, so its
   links can never be squeezed under the action buttons. The logo's
   margin-right:auto absorbs the slack. Everything is sized to fit the 1180px
   content box down to the 1100px mobile breakpoint (see the compact tier). */
.site-nav { display: flex; min-width: 0; flex: 0 0 auto; }
.nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(0.5rem, 1vw, 0.95rem);
}
.nav__item { position: relative; }
.nav__item > a,
.nav__parent-link {
    display: inline-block;
    text-decoration: none;
    color: var(--ink-soft);
    font-family: var(--font);
    font-weight: 500;
    font-size: 0.82rem;
    white-space: nowrap;
    padding: 0.35rem 0;
    border-bottom: 2px solid transparent;
    transition: color 160ms ease, border-color 160ms ease;
}
.nav__item > a:hover,
.nav__parent-link:hover { color: var(--ink); }
.nav__item--active > a,
.nav__item--active .nav__parent-link { color: var(--ink); border-bottom-color: var(--green); }

/* Parent row: the page link plus a chevron disclosure button. */
.nav__parent { display: flex; align-items: center; gap: 0.1rem; }
.nav__disclosure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-soft);
    border-radius: 6px;
    cursor: pointer;
}
.nav__disclosure svg { width: 13px; height: 13px; transition: transform 200ms var(--reveal-ease); }
.nav__item--has-children:hover .nav__disclosure,
.nav__item--has-children:focus-within .nav__disclosure { color: var(--ink); }
.nav__item--has-children:hover .nav__disclosure svg,
.nav__item--has-children:focus-within .nav__disclosure svg,
.nav__item--has-children.is-open .nav__disclosure svg { transform: rotate(180deg); }

/* Desktop fly-out panel (dropdown + mega share this shell). */
.nav__panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 120;
    margin-top: 0.55rem;
    padding: 0.9rem;
    min-width: 15rem;
    background: var(--paper-2);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 160ms ease, transform 160ms var(--reveal-ease), visibility 160ms;
}
.nav__panel::before {
    /* invisible bridge so the pointer can cross the gap to the panel */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.6rem;
    height: 0.6rem;
}
.nav__item--has-children:hover > .nav__panel,
.nav__item--has-children:focus-within > .nav__panel,
.nav__item--has-children.is-open > .nav__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* The mega-menu breaks out of its narrow <li>: with the item set to
   position:static the panel is positioned against the sticky .site-header,
   so it can be centred on the viewport and capped to the content width
   without ever spilling past a screen edge. */
.nav__item--mega { position: static; }
.nav__panel--mega {
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: min(var(--maxw), calc(100vw - 2 * var(--gutter)));
    padding: 1.4rem;
}
.nav__item--has-children:hover > .nav__panel--mega,
.nav__item--has-children:focus-within > .nav__panel--mega,
.nav__item--has-children.is-open > .nav__panel--mega {
    transform: translateX(-50%) translateY(0);
}
.nav__mega {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.75rem;
}
.nav__mega-title {
    margin: 0 0 0.45rem;
    font-family: var(--font);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);   /* --gray is only 4.4:1 on white at this size */
}
.nav__sublist { list-style: none; margin: 0; padding: 0; }
.nav__sublist li + li { margin-top: 0.1rem; }
.nav__sublist a {
    display: block;
    text-decoration: none;
    font-family: var(--font);
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--ink-soft);
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    transition: background 140ms ease, color 140ms ease;
}
.nav__sublist a:hover { background: var(--green-tint); color: var(--green-strong); }
.nav__sublist a[aria-current="page"] { color: var(--green-strong); font-weight: 600; }

.site-header__actions { display: flex; align-items: center; gap: 0.3rem; flex: 0 0 auto; }
.site-header__actions .btn {
    padding: 0.48rem 0.7rem;
    min-height: 36px;
    font-size: 0.78rem;
    white-space: nowrap;
}
.site-header__actions .btn--ghost { color: var(--ink-soft); padding-inline: 0.35rem; }
.site-header__patient-login { font-size: 0.78rem; }
/* the phone shows its full number at wide widths; the icon only appears when
   the compact tier collapses the button (below) */
.site-header__phone-icon { display: none; width: 16px; height: 16px; }

/* Compact tier: between the 1180px content box and the mobile drawer the
   header is tight. Trim the nav type, and collapse the phone button to its
   icon so the language switcher keeps clear air around it. Randevu Al and
   WhatsApp stay as labelled buttons. */
@media (min-width: 1101px) and (max-width: 1320px) {
    .site-header__inner { gap: 1rem; }
    .nav__list { gap: 0.5rem; }
    .nav__item > a,
    .nav__parent-link { font-size: 0.79rem; }
    .site-header__actions .btn { padding-inline: 0.65rem; font-size: 0.76rem; }
    .site-header__phone { padding-inline: 0.55rem; }
    .site-header__phone-label { display: none; }
    .site-header__phone-icon { display: block; }
}

@media (max-width: 1100px) {
    .nav-toggle { display: block; }
    .site-header__actions { display: none; }
    /* Drop the header's backdrop-filter at mobile widths: it would otherwise
       become the containing block for the fixed drawer below and clip it to
       the header's height. The frosted effect is barely visible on the
       compact mobile bar anyway. */
    .site-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--paper);
    }
    .site-nav {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(86vw, 360px);
        background: var(--anthracite);
        color: #fff;
        padding: 5rem 1.5rem 2.5rem;
        transform: translateX(100%);
        transition: transform 300ms var(--reveal-ease);
        box-shadow: -20px 0 60px rgba(0, 0, 0, 0.35);
        overflow-y: auto;
        overscroll-behavior: contain;
        /* DİKEY (2026-09-11): .site-nav temelde yan yana dizilen bir flex;
           çekmecede yön verilmemişti ve dil seçici menü listesinin YANINA
           düşüyordu: liste daralıyor, 320px'de "English" ekrandan taşıyordu.
           Seçicinin kendi kuralı (üst çizgi + üst boşluk) zaten altta durmak
           için yazılmıştı. */
        flex-direction: column;
    }
    body.nav-open .site-nav { transform: translateX(0); }
    /* Kapalı çekmece ekranın hemen sağında bekliyor; gölgesi (60px) sağ
       kenardan içeri taşıyor ve HER mobil sayfada sağda koyu bir şerit
       görünüyordu. Gölge yalnızca çekmece açıkken. */
    body:not(.nav-open) .site-nav { box-shadow: none; }
    /* Dil seçici menünün en altında; menü kısa olsa bile çekmecenin dibine
       iner (margin-top: auto), uzunsa listenin hemen altında kalır. */
    .site-nav .lang-switch--drawer { margin-top: auto; }
    .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav__item { position: static; border-bottom: 1px solid var(--anthracite-line); }
    .nav__item > a,
    .nav__parent-link {
        display: block;
        color: rgba(255, 255, 255, 0.82);
        font-size: 1.02rem;
        padding: 0.95rem 0;
        border-bottom: 0;
    }
    .nav__item > a:hover,
    .nav__parent-link:hover { color: #fff; }
    .nav__item--active > a,
    .nav__item--active .nav__parent-link { border-bottom: 0; color: #fff; }

    .nav__parent { justify-content: space-between; gap: 0.5rem; }
    .nav__parent-link { flex: 1 1 auto; }
    .nav__disclosure {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        color: rgba(255, 255, 255, 0.7);
    }
    .nav__disclosure svg { width: 16px; height: 16px; }
    /* Masaüstünün fare/odak kuralı (yukarıda: oku koyu yapar ve çevirir)
       çekmecede geçerli değil. Menü açılınca odak ilk bağlantıya —
       Hakkımızda — gidiyor; o kural devreye girip Hakkımızda'nın okunu koyu
       zeminde koyu ve ters yapıyordu ("Hakkımızda'da ok yok"). Tedaviler'e
       odak gitmediği için orada sorun yoktu. Ok yalnızca açılınca döner. */
    .nav__item--has-children:hover .nav__disclosure,
    .nav__item--has-children:focus-within .nav__disclosure { color: rgba(255, 255, 255, 0.7); }
    .nav__item--has-children:hover .nav__disclosure svg,
    .nav__item--has-children:focus-within .nav__disclosure svg { transform: none; }
    .nav__item--has-children.is-open .nav__disclosure svg { transform: rotate(180deg); }

    /* Accordion: panel is in flow, hidden until the row is expanded. */
    .nav__panel,
    .nav__panel--mega,
    .nav__item--has-children.is-open > .nav__panel,
    .nav__item--has-children.is-open > .nav__panel--mega {
        position: static;
        left: auto;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }
    .nav__panel::before { display: none; }
    /* Hover / focus must not open the accordion on touch - only .is-open. */
    .nav__item--has-children:hover > .nav__panel,
    .nav__item--has-children:focus-within > .nav__panel { display: none; }
    .nav__item--has-children.is-open > .nav__panel,
    .nav__item--has-children.is-open > .nav__panel--mega { display: block; }

    .nav__mega { grid-template-columns: 1fr; gap: 0.75rem; }
    .nav__mega-title { color: rgba(255, 255, 255, 0.5); margin-top: 0.5rem; }
    .nav__sublist { padding: 0 0 0.6rem; }
    .nav__sublist a {
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.98rem;
        padding: 0.6rem 0 0.6rem 0.9rem;
    }
    .nav__sublist a:hover,
    .nav__sublist a[aria-current="page"] { background: none; color: #fff; }

    .nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 220ms ease;
        z-index: 90;
    }
    body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

    /* -------------------------------------------------------------- *
     *  No-JS fallback: the hamburger cannot open anything without the
     *  script, so drop the off-canvas drawer and show the top-level
     *  links in flow under the header. Every parent link points at its
     *  own section index page, so the sub-panels can stay collapsed
     *  and the navigation is still complete, not a dead end.
     * -------------------------------------------------------------- */
    html:not(.js) .nav-toggle { display: none; }
    html:not(.js) .site-nav {
        position: static;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        transform: none;
        background: none;
        color: inherit;
        padding: 0.25rem 0 0.5rem;
        box-shadow: none;
        overflow: visible;
    }
    html:not(.js) .site-header__inner { flex-wrap: wrap; }
    html:not(.js) .nav__list { gap: 0.1rem; }
    html:not(.js) .nav__item { border-bottom: 0; }
    html:not(.js) .nav__item > a,
    html:not(.js) .nav__parent-link {
        color: var(--ink-soft);
        font-size: 0.95rem;
        padding: 0.5rem 0;
    }
    html:not(.js) .nav__item--active > a,
    html:not(.js) .nav__item--active .nav__parent-link { color: var(--ink); }
    html:not(.js) .nav__disclosure { display: none; }
    html:not(.js) .lang-switch--drawer .lang-switch__item {
        color: var(--ink-soft);
        border-color: var(--paper-line);
    }
    html:not(.js) .lang-switch--drawer .lang-switch__item--active {
        color: var(--green-strong);
        border-color: var(--green);
        background: var(--green-tint);
    }
}

/* ------------------------------------------------------------------ *
 *  Breadcrumbs - hierarchy-aware trail, flat URLs (sitemap V2 §4)
 * ------------------------------------------------------------------ */
.breadcrumbs {
    border-bottom: 1px solid var(--paper-line);
    background: var(--paper);
}
.breadcrumbs__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0.75rem var(--gutter);
}
.breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.1rem;
    font-family: var(--font);
    font-size: 0.78rem;
    color: var(--gray);
}
.breadcrumbs__item { display: inline-flex; align-items: center; }
.breadcrumbs__item + .breadcrumbs__item::before {
    content: "›";
    margin: 0 0.5rem;
    color: var(--gray);            /* was --gray-soft, 2.5:1 - below 3:1 */
}
.breadcrumbs__item a {
    color: var(--ink-soft);
    text-decoration: none;
    transition: color 140ms ease;
}
.breadcrumbs__item a:hover { color: var(--green-strong); }
/* non-link crumbs (e.g. the category) - was inheriting --gray (4:1) */
.breadcrumbs__item span { color: var(--ink-soft); }
.breadcrumbs__item [aria-current="page"] { color: var(--ink); }

/* ------------------------------------------------------------------ *
 *  Sticky mobile action bar - Ara / WhatsApp / Randevu
 * ------------------------------------------------------------------ */
.action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    display: none;
    grid-template-columns: repeat(3, 1fr);
    background: var(--anthracite);
    border-top: 1px solid var(--anthracite-line);
}
.action-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.6rem 0.25rem;
    min-height: 56px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
}
.action-bar a + a { border-left: 1px solid var(--anthracite-line); }
.action-bar a[data-variant="randevu"] { color: var(--green-on-dark, var(--green)); }
.action-bar svg { width: 20px; height: 20px; }

@media (max-width: 1100px) {
    .action-bar { display: grid; }
    body { --bottombar-h: 56px; }
}

/* ------------------------------------------------------------------ *
 *  Section rhythm  (design ref §3, §8) - the page should breathe, and
 *  every section gets the SAME padding top and bottom. Depth comes from
 *  element-level overlap (hero image overhang, split images breaking to
 *  the edge, the dot-grid) - never from eating a section's padding.
 * ------------------------------------------------------------------ */
.section {
    position: relative;
    padding-block: var(--pad-block);
}
.section + .section { margin-top: 0; }
/* lede: same rhythm as any other section, only a narrower measure */
.section--lede .section__inner { max-width: 46rem; }
.section--expertise_cards .card-grid { position: relative; z-index: 2; }
.section__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
    position: relative;
    z-index: 1;
}
/* collapse the first/last child's own margins so the section's padding is the
   only vertical spacing - keeps top and bottom breathing room equal. */
.section__inner > :first-child,
.section__head > :first-child,
.split__body > :first-child,
.page-prose > :first-child,
.cta-band__inner > :first-child { margin-top: 0; }
.section__inner > :last-child,
.split__body > :last-child,
.page-prose > :last-child,
.faq > :last-child,
.cta-band__inner > :last-child { margin-bottom: 0; }
/* spacing above a call-to-action button that closes a content block */
.block-cta { margin-top: 2rem; }
.section--light { background: var(--paper); color: var(--ink); }
.section--white { background: var(--paper-2); color: var(--ink); }
.section--dark { background: var(--anthracite); color: #e9e9e7; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark a { color: #fff; }
/* the generic dark-section link colour must not override a filled button's
   own dark label (kept anthracite for AA on --green); transparent button
   variants still take the light link colour via currentColor. */
.section--dark a.btn { color: var(--btn-fg); }
.section--accent { background: var(--green); color: var(--accent-fg-tema, #031c15); }   /* 4.7:1 on --green */
.section--accent h2 { color: var(--accent-fg-tema, #031c15); }

/* ------------------------------------------------------------------ *
 *  Section dividers (home page). A hairline at every section seam so
 *  the alternating light / white / dark bands read as distinct blocks
 *  instead of one field - most needed where several dark sections sit
 *  close together and on narrow screens. Same 1px token language as the
 *  header and breadcrumb rules. Never on the hero or the last section.
 * ------------------------------------------------------------------ */
/* 2026-09-20: blog sayfaları da bant düzenine geçti, aynı dikiş kuralları
   onlara da uygulanıyor. Ana sayfaya özel bir şey değildi; kapsam o gün
   yalnızca ana sayfa bantlı olduğu için dardı. */
.template-homepage .section + .section,
.template-blogindexpage .section + .section,
.template-blogpage .section + .section {
    border-top: 1px solid var(--paper-line);
}
.template-homepage .section + .section--dark,
.template-blogindexpage .section + .section--dark,
.template-blogpage .section + .section--dark {
    border-top-color: var(--anthracite-line);
}
.template-homepage .section--dark + .section,
.template-blogindexpage .section--dark + .section,
.template-blogpage .section--dark + .section {
    border-top-color: rgba(20, 22, 24, 0.10);
}
/* a short brand-green tick at the seam of each dark section, echoing the
   eyebrow rule - gives the dark bands a defined start, especially on mobile */
.template-homepage .section + .section--dark::before,
.template-blogindexpage .section + .section--dark::before,
.template-blogpage .section + .section--dark::before {
    content: "";
    position: absolute;
    top: -1px;
    left: var(--gutter);
    width: 2.25rem;
    height: 2px;
    background: var(--green);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--green-strong);
    margin-bottom: 1.1rem;
}
.eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 2px;
    background: currentColor;
    display: inline-block;
}
.section--dark .eyebrow { color: var(--green-on-dark, var(--green)); }
.section__head { max-width: 44rem; margin-bottom: clamp(2.5rem, 5.5vw, 4rem); }
.section__head p { font-size: var(--step-lead); color: var(--ink-soft); line-height: 1.6; }
.section--dark .section__head p { color: rgba(255, 255, 255, 0.74); }

/* ------------------------------------------------------------------ *
 *  Decorative dot-grid  - the single restrained ornament (design ref §8).
 *  Brand green at very low opacity, near key images only. Never a fill.
 * ------------------------------------------------------------------ */
.dot-grid {
    position: absolute;
    width: 9rem;
    height: 9rem;
    background-image: radial-gradient(var(--green) 1.4px, transparent 1.6px);
    background-size: 1.15rem 1.15rem;
    opacity: 0.5;                       /* dots themselves are already --green-glow-ish */
    color: var(--green-glow);
    pointer-events: none;
    z-index: 0;
}
.dot-grid { background-image: radial-gradient(rgba(0,148,94,0.22) 1.4px, transparent 1.6px); opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
    [data-reveal] .dot-grid { transition: none; }
}

/* split: text one side, media the other; alternates via --reverse.
   The media can break slightly out of the grid column for depth. */
.split {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    grid-template-columns: 1fr 1fr;
}
.split--reverse .split__media { order: -1; }
.split__body > :first-child { margin-top: 0; }
.split__media {
    position: relative;
    isolation: isolate;
}
.split__media img,
.split__media--placeholder {
    border-radius: var(--radius);
    width: 100%;
    object-fit: cover;
    box-shadow: var(--shadow-card);
}
/* image breaks out toward the page edge a touch */
.split:not(.split--reverse) .split__media { margin-right: clamp(-2.5rem, -3vw, 0rem); }
.split--reverse .split__media { margin-left: clamp(-2.5rem, -3vw, 0rem); }
.split__media--placeholder {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--green-tint), #e4e7e6);
    border: 1px solid var(--paper-line);
}
.split__media .dot-grid { right: -2.2rem; bottom: -2.2rem; }
.split--reverse .split__media .dot-grid { right: auto; left: -2.2rem; }
.split ul { padding-left: 1.15rem; }
.split li { margin: 0.45rem 0; }
.split li::marker { color: var(--green); }

@media (max-width: 820px) {
    .split { grid-template-columns: 1fr; gap: 2rem; }
    .split--reverse .split__media { order: 0; }
    .split__media,
    .split:not(.split--reverse) .split__media,
    .split--reverse .split__media { margin: 0; }
    .split__media .dot-grid { display: none; }
}

/* ------------------------------------------------------------------ *
 *  Hero  (design ref §9)
 * ------------------------------------------------------------------ */
.hero {
    position: relative;
    background: var(--anthracite);
    color: #fff;
    /* extra bottom room so the first section's card can overlap up into it */
    padding-bottom: clamp(5rem, 9vw, 8rem);
}
.hero::before {                          /* dot-grid, top-right, low opacity */
    content: "";
    position: absolute;
    top: clamp(1.5rem, 4vw, 3.5rem);
    right: clamp(1rem, 5vw, 5rem);
    width: 11rem;
    height: 11rem;
    background-image: radial-gradient(rgba(0, 148, 94, 0.35) 1.5px, transparent 1.7px);
    background-size: 1.3rem 1.3rem;
    opacity: 0.6;
    pointer-events: none;
}
.hero__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(4rem, 10vw, 8rem) var(--gutter) 0;
    display: grid;
    grid-template-columns: 1.06fr 0.94fr;
    gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: center;
    position: relative;
    z-index: 1;
}
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--green);
    font-weight: 700;
}
.hero__eyebrow::before {
    content: ""; width: 1.75rem; height: 2px; background: currentColor;
}
.hero h1, .hero__title { color: #fff; }
.hero__title { margin: 1.1rem 0 1.25rem; max-width: 16ch; }
.hero__text {
    font-size: var(--step-lead);
    color: rgba(255, 255, 255, 0.80);
    max-width: 46ch;
    line-height: 1.6;
}
.hero__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero__media {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: linear-gradient(160deg, #2b2f31, #191c1e);
    border: 1px solid var(--anthracite-line);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6);
    /* break downward past the hero's own padding, into the next section */
    margin-bottom: clamp(-4rem, -4.5vw, -2rem);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
    content: "";
    position: absolute;
    left: 1.25rem;
    bottom: 1.25rem;
    width: 46px;
    height: 3px;
    background: var(--green);
}
@media (max-width: 900px) {
    .hero__inner { grid-template-columns: 1fr; padding-bottom: 0; }
    .hero__media { aspect-ratio: 16 / 11; order: -1; margin-bottom: 2rem; }
    /* Hekim portresi telefonda da 4:5: yatay kutu portrenin ortasından
       (göğüs hizası) bir şerit kesip başı dışarıda bırakıyordu. Tedavi
       hero'su yatay kalır; onun mobil görseli şablonda ayrıca 16:11
       kesiliyor (treatment_page.html). */
    .hero--doctor .hero__media { aspect-ratio: 4 / 5; }
    .hero__title { max-width: none; }
    .hero { padding-bottom: clamp(3rem, 8vw, 4rem); }
}

/* ------------------------------------------------------------------ *
 *  Cards  (design ref §7) - generous padding, tinted circular icon,
 *  clear border, a real lift on hover.
 * ------------------------------------------------------------------ */
.card-grid {
    display: grid;
    gap: clamp(1.15rem, 2vw, 1.75rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr));
}

.card {
    background: var(--paper-2);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius);
    padding: clamp(1.75rem, 2.4vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-card);
    transition: transform 260ms var(--reveal-ease), border-color 200ms ease,
        box-shadow 260ms ease;
}
a.card:hover {
    transform: translateY(-8px);
    border-color: var(--green);
    box-shadow: var(--shadow-lift);
}
.section--dark .card {
    background: var(--anthracite-2);
    border-color: var(--anthracite-line);
    box-shadow: none;
}
.card__icon {
    width: 52px;
    height: 52px;
    border-radius: 999px;                /* soft tinted circle, not a bare dot */
    display: grid;
    place-items: center;
    background: var(--green-tint);
    color: var(--green-strong);
    box-shadow: 0 0 0 8px rgba(0, 148, 94, 0.06);
    margin-bottom: 0.4rem;
}
.card__icon svg, .card__icon img { width: 24px; height: 24px; }
.section--dark .card__icon {
    background: rgba(0, 148, 94, 0.16);
    color: var(--green);
    box-shadow: 0 0 0 8px rgba(0, 148, 94, 0.08);
}
.card__title { font-weight: 600; font-size: var(--step-h3); line-height: 1.3; }
.card__text { color: var(--ink-soft); font-size: 0.97rem; line-height: 1.6; }
.section--dark .card__text { color: rgba(255, 255, 255, 0.70); }
.card__more {
    margin-top: auto;
    padding-top: 0.4rem;
    font-weight: 600;
    color: var(--green-strong);
    font-size: 0.88rem;
    letter-spacing: 0.01em;
}
.section--dark .card__more { color: var(--green-on-dark, var(--green)); }
a.card:hover .card__more { color: var(--green); }
/* blog card publish date - low-emphasis, pinned to the bottom of the card
   alongside "more" instead of sharing the top meta line with the category */
.card__date { margin-top: auto; padding-top: 0.4rem; font-size: 0.75rem; color: var(--ink-soft); }
.card__date + .card__more { margin-top: 0; padding-top: 0.15rem; }

/* blog card thumbnail - bleeds to the card's top edge (negative margin
   cancels the card's own padding) so the rounded corners line up flush */
.card__media {
    display: block;
    aspect-ratio: 3 / 2;
    margin: calc(-1 * clamp(1.75rem, 2.4vw, 2.5rem)) calc(-1 * clamp(1.75rem, 2.4vw, 2.5rem)) 0;
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
    background: var(--paper);
}
.card__media-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* WebP + JPEG yedek için <picture> sarmalayıcısı (2026-09-19). Düzene
   katılmasın: img eskisi gibi .card__media'nın doğrudan çocuğu gibi davranır. */
.card__media picture,
.ht-cert__media picture { display: contents; }
.card__media--placeholder { background: linear-gradient(135deg, var(--green-tint), #e4e7e6); }

/* ------------------------------------------------------------------ *
 *  Process  (numbered steps)
 * ------------------------------------------------------------------ */
.process {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    counter-reset: step;
}
.process__step {
    border-top: 2px solid var(--green);
    padding-top: 1rem;
}
.process__step::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    font-weight: 700;
    color: var(--green-strong);
    font-size: 0.95rem;
}
.section--dark .process__step::before { color: var(--green-on-dark, var(--green)); }
.process__step h3 { margin: 0.35rem 0 0.3rem; }
.process__step p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }
.section--dark .process__step p { color: rgba(255, 255, 255, 0.68); }

/* ------------------------------------------------------------------ *
 *  Stats  (number-counter, design ref §12)
 * ------------------------------------------------------------------ */
.stats {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}
.stat__value {
    display: block;
    font-size: clamp(2.25rem, 6vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--green-strong);   /* 5:1 on light; brighter --green on dark below */
    line-height: 1;
}
.section--dark .stat__value { color: var(--green-on-dark, var(--green)); }
.stat__label { display: block; margin-top: 0.5rem; color: var(--ink-soft); font-size: 0.95rem; }
.section--dark .stat__label { color: rgba(255, 255, 255, 0.7); }

/* Uluslararası Hastalar: içeriği bol (14 bölüm) bir tanıtım sayfası, KVKK
   metinleri gibi dar bir okuma sütununa sıkışmamalı. Yasal sayfalar dar
   kalsın diye yalnızca bu sayfaya genişlik veriliyor. */
.page-uluslararasi-hastalar main > .prose-card {
    max-width: min(66rem, 100% - 2 * var(--gutter));
}

/* ------------------------------------------------------------------ *
 *  Hekim sayfası — tedavi sayfasının hero + bant düzenini kullanır.
 *  Tipografi hiyerarşisi burada bilinçli olarak sitenin varsayılan
 *  ölçülerinden daha ölçülü: isim biraz küçültüldü, unvan büyütüldü,
 *  bölüm başlıkları (Özgeçmiş / Eğitim …) belirgin ama abartısız.
 * ------------------------------------------------------------------ */
.hero__title--doctor {
    /* varsayılan hero 4.4rem'e kadar çıkıyordu — kişi adı için fazla iri */
    font-size: clamp(1.9rem, 1.45rem + 2vw, 2.9rem);
    max-width: 20ch;
    margin-bottom: 0.5rem;
}
.doctor-role {
    margin: 0 0 1.1rem;
    font-size: clamp(1.02rem, 0.94rem + 0.45vw, 1.28rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--green);
}
.hero--doctor .hero__media { max-width: 420px; }

.doctor-card {
    max-width: 60rem;
    margin-inline: auto;
    background: var(--paper-2);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: clamp(1.5rem, 1rem + 3vw, 3rem);
}
.doctor-card > :first-child { margin-top: 0; }
.doctor-card > :last-child { margin-bottom: 0; }

.doctor-heading {
    /* bölüm başlıkları: gövde metninden net ayrışsın ama sayfayı ezmesin */
    font-size: clamp(1.18rem, 1.02rem + 0.75vw, 1.5rem);
    margin: 2.1rem 0 0.7rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--paper-line);
    color: var(--ink);
}
.doctor-card > .doctor-heading:first-child { margin-top: 0; }
.doctor-heading--band {
    border-bottom: 0;
    margin: 0 0 1.4rem;
    text-align: center;
}
.doctor-prose { line-height: 1.75; color: var(--ink-soft); }
.doctor-prose p { margin: 0 0 0.9rem; max-width: 68ch; }
.doctor-prose > :last-child { margin-bottom: 0; }
.doctor-prose ul { margin: 0 0 0.9rem; padding-left: 1.15rem; }
.doctor-prose li { margin: 0.35rem 0; }
.doctor-prose li::marker { color: var(--green); }

/* klinik ilgi alanları: madde listesi yerine etiket dizisi */
.doctor-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.doctor-tags li {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--paper-line);
    border-radius: 999px;
    background: var(--green-tint);
    color: var(--green-strong);
    font-size: 0.88rem;
    line-height: 1.35;
}

/* ------------------------------------------------------------------ *
 *  Kısa video (YouTube Shorts) — sayfada oynar, dikey 9:16.
 *  Hem .section içinde (tedavi sayfaları) hem .prose-card içinde
 *  (standart sayfalar) çalışacak şekilde kendi genişliğini yönetir.
 * ------------------------------------------------------------------ */
.shorts {
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.9rem;
}
/* .prose-card zaten kendi iç boşluğunu veriyor — üstüne gutter ekleme */
.prose-card .shorts { padding-inline: 0; margin-block: 2rem; }
.shorts__heading { margin: 0; font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); }
.shorts__frame {
    width: 100%;
    max-width: 360px;              /* dikey video sayfayı bölmesin */
    aspect-ratio: 9 / 16;          /* Shorts oranı, responsive korunur */
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--anthracite);
    box-shadow: var(--shadow-card);
}
.shorts__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.shorts__text {
    margin: 0;
    max-width: 46ch;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-soft);
}
.shorts__link { margin: 0; }
.shorts__link a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--green-strong);
}
.shorts__link a:hover { color: var(--green); }
.section--dark .shorts__heading { color: #fff; }
.section--dark .shorts__text { color: rgba(255, 255, 255, 0.72); }
.section--dark .shorts__link a { color: var(--green-on-dark, var(--green)); }

/* ------------------------------------------------------------------ *
 *  Video strip
 * ------------------------------------------------------------------ */
.video-grid {
    display: grid;
    gap: 1.15rem;
    /* auto-FILL, auto-fit değil: boş sütunlar ayakta kalsın. auto-fit ile tek
       video kaldığında kart bütün satırı kaplıyor ve 640x360 kapak görseli
       bulanık büyüyordu (dil süzgecinden sonra her dilde tek video kalabilir).
       Kart genişliği video sayısından bağımsız: sitedeki diğer kartlarla aynı
       ölçü. Telefonda min(100%, 260px) yine tek sütun demek. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.video-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--paper-line);
    background: var(--paper-2);
    box-shadow: var(--shadow-card);
    transition: transform 260ms var(--reveal-ease), box-shadow 260ms ease;
}
a.video-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.section--dark .video-card { background: var(--anthracite-2); border-color: var(--anthracite-line); box-shadow: none; }
.video-card__thumb {
    aspect-ratio: 16 / 9;
    background: #d9dcdc center/cover no-repeat;
    position: relative;
}
.video-card__thumb::after {
    content: "▶";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.4rem;
    background: rgba(0, 0, 0, 0.28);
}
.video-card__body { padding: 1rem 1.15rem 1.25rem; }
.video-card__title { font-weight: 650; font-weight: 600; }
.video-card__text { color: var(--ink-soft); font-size: 0.92rem; margin-top: 0.35rem; }
.section--dark .video-card__text { color: rgba(255, 255, 255, 0.66); }

/* "İlgili videolar" link listesi — hekim / tedavi / blog sayfasının altında.
 * Kart değil, düz liste: sayfayı kapatan küçük bir yönlendirme. Başlık sınıfı
 * dışarıdan verilebilir (hekim sayfası kendi başlık kalıbını kullanır). */
.video-links__title {
    font-size: clamp(1.18rem, 1.02rem + 0.75vw, 1.5rem);
    margin: 0 0 1rem;
}
.video-links__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 48rem;
}
.video-links__list li + li { margin-top: 0.55rem; }
.video-links__list a {
    display: inline-block;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--paper-line);
    padding-bottom: 0.15rem;
    overflow-wrap: anywhere;
}
.video-links__list a::before { content: "▶"; color: var(--green); margin-right: 0.5rem; font-size: 0.8em; }
.video-links__list a:hover { border-bottom-color: var(--green); }

/* ------------------------------------------------------------------ *
 *  Team
 * ------------------------------------------------------------------ */
.team-grid {
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2.2vw, 1.75rem);
    /* Fixed column count, NOT auto-fit: a group with one member (Klinik
       Müdürü, Klinik Destek) must show a normal-width card, not a card
       stretched to fill the whole row. align-items:start stops row-stretch. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
}
@media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.team-member { text-decoration: none; color: inherit; display: block; }
.team-member img,
.team-member__ph {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 22%;   /* head-and-shoulders: keep the face high in frame */
    border-radius: var(--radius);
    background: linear-gradient(160deg, var(--green-tint), #dfe3e3);
    box-shadow: var(--shadow-card);
    transition: transform 240ms var(--reveal-ease), box-shadow 240ms ease;
}
a.team-member:hover img,
a.team-member:hover .team-member__ph { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.team-member__name { font-weight: 600; margin-top: 0.9rem; }
.team-member__role { color: var(--ink-soft); font-size: 0.9rem; }
.team-member__bio { color: var(--ink-soft); font-size: 0.9rem; margin: 0.4rem 0 0; }
.section--dark .team-member__role { color: rgba(255, 255, 255, 0.66); }
div.team-member { cursor: default; }

/* grouped roster (Hekimler / Klinik Müdürü / Banko / Asistanlar / Destek) */
.team-group { margin-top: clamp(2rem, 5vw, 3.25rem); }
.team-group:first-of-type { margin-top: 1.5rem; }
.team-group__title {
    margin: 0 0 1.25rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green-strong);
}

/* ------------------------------------------------------------------ *
 *  FAQ accordion  (design ref - subtle, no bounce)
 * ------------------------------------------------------------------ */
.faq { max-width: 46rem; }
.faq__q { list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__item { border-bottom: 1px solid var(--paper-line); }
.section--dark .faq__item { border-color: var(--anthracite-line); }
.faq__q {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 1.15rem 2.5rem 1.15rem 0;
    font: inherit;
    font-weight: 600;
    font-size: 1.02rem;
    color: inherit;
    cursor: pointer;
    position: relative;
}
.faq__q::after {
    content: "";
    position: absolute;
    right: 0.35rem;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 260ms var(--reveal-ease);
}
.faq__item[open] .faq__q::after { transform: translateY(-30%) rotate(225deg); }
.faq__a { padding: 0 0 1.25rem; color: var(--ink-soft); }
.section--dark .faq__a { color: rgba(255, 255, 255, 0.72); }
.faq__a > :first-child { margin-top: 0; }

/* ------------------------------------------------------------------ *
 *  CTA band
 * ------------------------------------------------------------------ */
.cta-band { text-align: center; }
.cta-band__inner {
    max-width: 40rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.cta-band__buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* two column compare */
.compare {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: 1fr 1fr;
}
.compare__col {
    background: var(--paper-2);
    border: 1px solid var(--paper-line);
    border-top: 3px solid var(--green);
    border-radius: var(--radius);
    padding: 1.4rem;
}
.section--dark .compare__col { background: var(--anthracite-2); border-color: var(--anthracite-line); border-top-color: var(--green-on-dark, var(--green)); }
@media (max-width: 640px) { .compare { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ *
 *  Footer
 *
 *  Three labelled regions on a soft anthracite-2 surface (brand /
 *  site map / contact), then two full-width strips below: the m.5/1-(ı)
 *  site-editor disclosure and the baseline copyright line. The site-map
 *  region splits its list into two balanced columns so no region runs
 *  several times longer than its neighbours.
 * ------------------------------------------------------------------ */
.site-footer { background: var(--anthracite); color: rgba(255, 255, 255, 0.72); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--green-on-dark, var(--green)); }
.site-footer__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(2.25rem, 5vw, 3.5rem) var(--gutter) clamp(1.75rem, 4vw, 2.5rem);
    display: grid;
    gap: clamp(1rem, 2.4vw, 1.6rem);
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr) minmax(0, 1.1fr);
    align-items: start;
}

.footer-region {
    background: var(--anthracite-2);
    border: 1px solid var(--anthracite-line);
    border-radius: var(--radius-sm);
    padding: clamp(1.1rem, 1.8vw, 1.5rem) clamp(1.15rem, 1.8vw, 1.5rem);
    height: 100%;
}
.footer-region__label {
    margin: 0 0 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.site-footer__logo { display: inline-flex; align-items: center; gap: 0.6rem; }
.site-footer__logo img { height: 34px; width: auto; display: block; }
.footer-region--brand .site-header__logo-text { color: #fff; font-weight: 800; font-size: 1.1rem; }
.site-footer__text { margin: 0.85rem 0 0; font-size: 0.92rem; line-height: 1.6; max-width: 34ch; }
.site-footer__text p { margin: 0 0 0.4rem; }
.site-footer__text :last-child { margin-bottom: 0; }

/* Calisma saatleri - marka blogunun altinda, unvandan ince bir cizgiyle
   ayrilir. Yedi satir oldugu icin punto ve satir araligi kisilarak sutun
   dengesi korunuyor; 600px altinda marka blogu zaten tam genislige gectigi
   icin iki sutuna acilarak yukseklik yariya iniyor. */
.footer-hours {
    margin-top: 1.05rem;
    padding-top: 0.95rem;
    border-top: 1px solid var(--anthracite-line);
    max-width: 34ch;
}
.footer-hours__label {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.footer-hours__body { font-size: 0.85rem; line-height: 1.75; }
.footer-hours__body p { margin: 0; }
@media (max-width: 600px) {
    .footer-hours { max-width: none; }
    .footer-hours__body p { columns: 2; column-gap: 1.25rem; }
}

/* Site-map region: primary links in two balanced columns, Yasal split off */
.footer-region--nav > .footer__nav {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.95rem;
    columns: 2;
    column-gap: 1.5rem;
}
.footer-region--nav > .footer__nav li { margin: 0 0 0.55rem; break-inside: avoid; }
.footer__legal-links { margin-top: 1.15rem; padding-top: 1.05rem; border-top: 1px solid var(--anthracite-line); }
.footer__legal-links .footer__nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    font-size: 0.92rem;
}
.footer__nav-heading {
    margin: 0 0 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

/* Contact region: address + phone + WhatsApp as one block, cert below */
.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.95rem; }
.footer-contact__address { color: rgba(255, 255, 255, 0.72); line-height: 1.55; }
.footer-region__doc {
    margin: 1rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--anthracite-line);
    font-size: 0.9rem;
}

/* m.5/1-(ı) site-editor disclosure: its own delineated strip */
.site-footer__editor { border-top: 1px solid var(--anthracite-line); background: var(--anthracite-2); }
.site-footer__editor-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(0.9rem, 2vw, 1.25rem) var(--gutter);
}

.site-footer__baseline { border-top: 1px solid var(--anthracite-line); }
.site-footer__baseline p {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 1.15rem var(--gutter);
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 900px) {
    .site-footer__inner { grid-template-columns: 1fr 1fr; }
    .footer-region--brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .site-footer__inner { grid-template-columns: 1fr; }
    .footer-region--nav > .footer__nav { columns: 1; }
}

/* ------------------------------------------------------------------ *
 *  Content containers - every page that isn't built from full-bleed
 *  <section>s must sit inside one of these so it keeps the shared
 *  max-width + gutter and never touches the viewport edge.
 * ------------------------------------------------------------------ */
main > article,
main > .page-body {
    max-width: 44rem;
    margin: var(--pad-block) auto;
    padding: 0 var(--gutter);
    font-size: var(--step-body);
    line-height: 1.75;
}
main > article > h2,
main > article > .body-heading,
main > .page-body > h2 { margin-top: 2.2em; }
main > article img,
main > article .body-image,
main > .page-body img { border-radius: var(--radius); margin: 2rem 0; box-shadow: var(--shadow-card); }
main > article p, main > .page-body p, .page-prose p { max-width: 66ch; }
.summary, .intro { font-size: var(--step-lead); color: var(--ink-soft); line-height: 1.62; }

/* blog article hero image - full container width, magazine-style, sits
   above the title. Overrides the generic "main > article img" spacing
   below since this image is meant to bleed to its own wrapper's edges.

   KAPSAM "article" (2026-09-11): Bu kural eskiden kapsamsız ".hero__media"
   idi ve tedavi / hekim sayfalarının hero'sunu da ezdi (aynı sınıf adı,
   dosyada daha sonra). Onların tasarımı 4:5 (yukarıda, "Hero" bölümü);
   Wagtail görseli 4:5 kesiyor, bu kural kutuyu 16:9 yapıyordu ve CSS
   dikey görselin ortasından yatay bir şerit kesiyordu: hekim portresinde
   baş, Dental İmplant'ta görselin büyük kısmı gidiyordu. Blog görseli
   <article><header> içinde; tedavi ve hekim hero'ları <section class="hero">. */
article .hero__media {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 0 0 2rem;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lift);
    background: var(--paper);
}
.hero__media picture { display: contents; }
.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}
article .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(22, 25, 27, 0) 55%, rgba(22, 25, 27, 0.55) 100%);
    pointer-events: none;
}
.hero__media--placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--green-tint), #e4e7e6);
}

/* centred corporate / contact pages: a defined surface instead of bare text.
   These are <div class="prose-card"> (not <article> - they are not
   self-contained syndicatable compositions). */
main > .prose-card {
    max-width: min(50rem, 100% - 2 * var(--gutter));  /* always keeps a side gutter */
    margin-inline: auto;
    padding: clamp(1.9rem, 1rem + 3.5vw, 3.5rem);
    background: var(--paper-2);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}
@media (max-width: 560px) {
    main > article.prose-card { padding: 1.5rem 1.25rem; }
}
.prose-card > :first-child { margin-top: 0; }
.prose-card > :last-child { margin-bottom: 0; }
.prose-card > h1 { margin-bottom: 0.5em; }
.prose-card .intro { margin-top: 0; }
.prose-card > h2,
.prose-card > .body-heading { margin-top: 2em; }
.prose-card .body-image,
.prose-card img { border-radius: var(--radius); margin: 1.75rem 0; box-shadow: var(--shadow-card); }

/* "Metin + görsel bölümü" bloğu (StandardStreamBlock.text_with_image).
   Tedavi sayfalarındaki .split ile aynı fikir, ama .prose-card'ın dar
   sütununa göre ölçeklenmiş: görsel karttan taşmaz. */
.prose-split {
    display: grid;
    grid-template-columns: 1fr minmax(0, 320px);
    gap: clamp(1.25rem, 3vw, 2.25rem);
    align-items: start;
    margin: 1.9rem 0;
}
.prose-split--text-only { grid-template-columns: 1fr; }
.prose-split--reverse .prose-split__media { order: -1; }
.prose-split__heading { margin: 0 0 0.6em; }
.prose-split__body > :first-child { margin-top: 0; }
.prose-split__body > :last-child { margin-bottom: 0; }
.prose-split .prose-split__media img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;                       /* .prose-card img'in 1.75rem'ini ezer */
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
}
@media (max-width: 720px) {
    .prose-split,
    .prose-split--reverse { grid-template-columns: 1fr; }
    .prose-split--reverse .prose-split__media { order: 0; }
}
/* ------------------------------------------------------------------ *
 *  Contact page — big map hero with an address badge, then a 2x2 card
 *  grid (İletişim / Çalışma saatleri / Araba ile / Toplu taşıma ile),
 *  then the contact form as its own separate card.
 * ------------------------------------------------------------------ */
.template-contactpage main > .prose-card {
    max-width: min(72rem, 100% - 2 * var(--gutter));
    padding: clamp(1.5rem, 1rem + 2vw, 2.6rem);
}
.template-contactpage .prose-card > h1 {
    /* Ölçek artık ortak token'dan gelir. Bu sayfada elle ayarlanmış olan
       değer, dosya sonundaki ortak bölümde --step-page-title olarak
       kaynak alındı; burada aynı değerin ikinci bir kopyası kalmasın. */
    font-size: var(--step-page-title);
    margin-bottom: 0.35em;
}
.template-contactpage .prose-card .intro {
    font-size: var(--step-body);
    line-height: 1.6;
    max-width: 62ch;
}

/* --- map hero: full-width, an address + "haritada aç" badge overlaid --- */
.contact-map-hero {
    position: relative;
    margin-top: 1.75rem;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    background: var(--paper);
}
.contact-map-hero__frame {
    aspect-ratio: 16 / 9;
    min-height: 260px;
    max-height: 480px;
    /* min-height, aspect-ratio ile çakışınca tarayıcı oranı korumak için
       KUTUYU GENİŞLETİYOR ve harita kartın dışına taşıp kırpılıyordu
       (dar ekranda haritanın sağı kesiliyordu). Bu, taşmayı engeller. */
    max-width: 100%;
}
.contact-map-hero__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.contact-map-hero__badge {
    position: absolute;
    left: 1.25rem;
    bottom: 1.25rem;
    max-width: min(22rem, calc(100% - 2.5rem));
    display: grid;
    gap: 0.55rem;
    padding: 1rem 1.15rem;
    background: var(--paper-2);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lift);
}
.contact-map-hero__address { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink); }
.contact-map-hero__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--green-strong);
}
.contact-map-hero__link:hover { color: var(--green); }
.contact-map-hero__link svg { flex: none; }
@media (max-width: 560px) {
    /* Telefonda kartın iç boşluğu haritayı daraltıyordu; boşluğu kısıp
       haritaya genişlik veriyoruz (6 Eylül geri bildirimi). */
    .template-contactpage main > .prose-card { padding: 1.15rem 1rem; }
    /* not enough room to overlay legibly on a short map — stack instead.
       min-height burada düşürülüyor ki aspect-ratio ile çakışmasın. */
    .contact-map-hero__frame {
        aspect-ratio: 3 / 2;
        min-height: 190px;
        border-radius: var(--radius) var(--radius) 0 0;
    }
    .contact-map-hero__badge {
        position: static;
        max-width: none;
        box-shadow: none;
        border: 0;
        border-top: 1px solid var(--paper-line);
        border-radius: 0 0 var(--radius) var(--radius);
    }
}

/* --- the 4-card info grid: 2x2, symmetric --- */
.contact-cards {
    margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: stretch;
}
.contact-card {
    display: flex;
    flex-direction: column;
    background: var(--paper-2);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    padding: clamp(1.15rem, 1rem + 1vw, 1.5rem);
}
/* each row's two cards can differ in content length, and the grid stretches
   both to match the taller one — centre the shorter card's content in the
   extra room instead of leaving it stranded at the top */
.contact-card h2 { flex: none; }
.contact-card > ul,
.contact-card__hours {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.contact-card .directions { flex: 1; align-content: center; }
.contact-card--dark {
    background: var(--anthracite);
    border-color: var(--anthracite-line);
    color: rgba(255, 255, 255, 0.82);
}
.contact-card--dark.contact-block h2 { color: var(--green-on-dark, var(--green)); }
.contact-card__hours { line-height: 1.9; font-variant-numeric: tabular-nums; }
/* Telefonda tek sütun, tablette iki sütun (6 Eylül kararı). Daha önce
   kırılma noktası 360px'ti; 390px'lik tipik telefonda kartlar iki sütun
   kalıp sıkışıyordu. */
@media (max-width: 700px) {
    .contact-cards { grid-template-columns: 1fr; }
    .contact-card { text-align: left; }
    .contact-card > ul,
    .contact-card__hours,
    .contact-card .directions { justify-content: flex-start; align-content: start; }
}

.contact-block { margin: 0; }
.contact-block h2 {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--green-strong);
    margin: 0 0 0.7em;
}
.contact-block p { margin: 0 0 0.4rem; max-width: none; line-height: 1.55; }
.contact-block ul { margin: 0; padding-left: 1.05rem; }
.contact-block li { margin: 0.28rem 0; }
.contact-block :last-child { margin-bottom: 0; }

/* Ulaşım: two icon-headed blocks (by car / by public transport) */
.directions { display: grid; gap: 1rem; }
.directions__item { display: flex; gap: 0.7rem; align-items: flex-start; }
.directions__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-top: 0.05rem;
    border-radius: 999px;
    color: var(--green-strong);
    background: var(--green-tint);
}
.directions__body { min-width: 0; }
.directions__body p { margin: 0; line-height: 1.55; }
/* compact variant used inside the contact-page card grid — same content,
   tighter type so the block reads as a summary, not a long paragraph */
.directions--compact { gap: 0.75rem; }
.directions--compact .directions__item { gap: 0.55rem; }
.directions--compact .directions__icon { width: 1.7rem; height: 1.7rem; }
.directions--compact .directions__icon svg { width: 15px; height: 15px; }
.directions--compact .directions__body p { font-size: 0.92rem; line-height: 1.5; }

/* --- the form, as its own separate card (reuses .prose-card's chrome via
   the "contact-form-wrap" element; .form-card's own section styling is
   neutralised so it doesn't double up) --- */
.template-contactpage .contact-form-wrap { margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.template-contactpage .contact-form-wrap .form-card { margin-top: 0; padding-top: 0; border-top: 0; }
/* the shared .form component caps at 42rem for the narrower pages it's also
   embedded in (job form on /insan-kaynaklari/, /hakkimizda/) — here the card
   is as wide as the map hero and card grid above it, so let the fields fill
   it instead of sitting flush-left with empty space on the right */
.template-contactpage .contact-form-wrap .form { max-width: none; }
/* Aynı form Uluslararası Hastalar (EN) sayfasının sonunda da ayrı bir kart
   olarak basılıyor (standard_page.html); İletişim'deki üç kuralın aynısı. */
.page-uluslararasi-hastalar .contact-form-wrap { margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.page-uluslararasi-hastalar .contact-form-wrap .form-card { margin-top: 0; padding-top: 0; border-top: 0; }
.page-uluslararasi-hastalar .contact-form-wrap .form { max-width: none; }

/* ------------------------------------------------------------------ *
 *  Public forms — contact & support (/iletisim/) and job application
 *  (/insan-kaynaklari/, foot of /hakkimizda/). One .form-card shell,
 *  shared field styling, and a delineated .form-consent region for
 *  each KVKK declaration.
 * ------------------------------------------------------------------ */
.form-card {
    margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
    padding-top: clamp(1.6rem, 1rem + 2vw, 2.4rem);
    border-top: 1px solid var(--paper-line);
}
.form-card > h2 {
    font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.6rem);
    margin: 0 0 0.4em;
}
.form-card__lead { color: var(--ink-soft); max-width: 60ch; margin: 0 0 1.5rem; }

.form { display: grid; gap: 1.1rem; max-width: 42rem; }
.form-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-row { display: grid; gap: 0.35rem; margin: 0; }
.form-row label,
.form-check label { font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.form-check label { font-weight: 400; }

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="date"],
.form input[type="file"],
.form textarea,
.form select {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-sm);
    font: inherit;
    color: var(--ink);
    background: var(--paper-2);
    -webkit-appearance: none;
    appearance: none;
}
.form textarea { resize: vertical; min-height: 6.5rem; }
.form input:focus-visible,
.form textarea:focus-visible,
.form select:focus-visible {
    outline: 2px solid var(--green-strong);
    outline-offset: 1px;
    border-color: var(--green-strong);
}
.form input[type="file"]:disabled { opacity: 0.5; cursor: not-allowed; }

.form-consent {
    margin: 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-sm);
    background: var(--paper);
    display: grid;
    gap: 0.6rem;
}
.form-consent legend {
    padding: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--green-strong);
}
.form-consent--health { border-left: 3px solid var(--green); }
.form-check { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem; align-items: start; margin: 0; }
.form-check input { margin-top: 0.2rem; }
.form-hint { font-size: 0.86rem; color: var(--ink-soft); margin: 0; line-height: 1.5; }
.form-err { font-size: 0.85rem; color: #b3261e; font-weight: 500; }

.form-note { padding: 0.8rem 1rem; border-radius: var(--radius-sm); margin: 0 0 1.25rem; font-size: 0.95rem; }
.form-note--ok { background: var(--green-tint); color: var(--green-strong); border: 1px solid var(--green); }
.form-note--error { background: #fdecea; color: #8f231c; border: 1px solid #f3c0bb; }
.form-note--error ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }

/* honeypot — removed from layout and from the a11y tree, but not display:none
   (some bots skip display:none fields) */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

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

/* ------------------------------------------------------------------ *
 *  Gallery / slider  (StandardStreamBlock "gallery")
 * ------------------------------------------------------------------ */
.gallery { position: relative; margin: 1.9rem 0; }
.gallery__track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
    border-radius: var(--radius);
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track:focus-visible { outline: 2px solid var(--green-strong); outline-offset: 3px; }
.gallery__slide {
    flex: 0 0 clamp(15rem, 62vw, 34rem);
    scroll-snap-align: center;
    margin: 0;
    list-style: none;
}
.gallery__slide img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    display: block;
    margin: 0;
}
.gallery__caption {
    margin: 0.55rem 0 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 42ch;
}
.gallery__nav {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    margin-top: 0.9rem;
}
.gallery__btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--paper-line);
    background: var(--paper-2);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.gallery__btn:hover { border-color: var(--green); color: var(--green-strong); }
.gallery__btn:disabled { opacity: 0.35; cursor: default; }
.gallery__btn:disabled:hover { border-color: var(--paper-line); color: var(--ink); }
.gallery--static .gallery__nav { display: none; }

.meta,
.medical-review { font-size: 0.85rem; color: var(--ink-soft); letter-spacing: 0.01em; }
.section--dark .medical-review,
.hero .medical-review { color: rgba(255, 255, 255, 0.72); }
/* blog article byline/review credits - moved to the end of the article,
   set off from the body by a hairline so it reads as a footer, not lede */
.article-meta {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--paper-line);
    display: grid;
    gap: 0.3rem;
}
.article-meta .meta,
.article-meta .medical-review { margin: 0; }
.hero__review { margin-top: 1.25rem; }
.page-prose { max-width: 42rem; line-height: 1.75; }
.page-prose > :first-child { margin-top: 0; }

/* ------------------------------------------------------------------ *
 *  Legal / KVKK pages (StandardPage, noindex): tables, notes and the
 *  [bracketed] blanks the clinic still has to fill in. The footer
 *  "Yasal" link group is styled in the Footer section above.
 * ------------------------------------------------------------------ */
.prose-card .table-wrap { margin: 1.75rem 0; overflow-x: auto; }
.prose-card table {
    border-collapse: collapse;
    width: 100%;
    min-width: 32rem;
    font-size: 0.93rem;
    line-height: 1.6;
}
.prose-card th,
.prose-card td {
    border: 1px solid var(--paper-line);
    padding: 0.6rem 0.8rem;
    text-align: left;
    vertical-align: top;
}
.prose-card thead th { background: var(--paper); font-weight: 700; }
.prose-card blockquote {
    margin: 1.5rem 0;
    padding: 0.85rem 1.1rem;
    border-left: 3px solid var(--green);
    background: var(--paper);
    color: var(--ink-soft);
    font-size: 0.93rem;
}
.prose-card blockquote p { margin: 0.35rem 0; max-width: none; }
.prose-card blockquote :first-child { margin-top: 0; }
.prose-card blockquote :last-child { margin-bottom: 0; }
.prose-card .checkbox-line {
    margin: 0.6rem 0;
    padding-left: 1.7em;
    text-indent: -1.7em;
}
.legal-fill {
    padding: 0 0.18em;
    background: var(--green-tint);
    border-bottom: 1px dotted var(--green-strong);
    border-radius: 2px;
}

/* ------------------------------------------------------------------ *
 *  Regulatory chrome: the m.7/1 "results vary" notice on every page
 *  with a photo/video, and the m.5/1-(ı) site-editor footer block.
 * ------------------------------------------------------------------ */
.visual-notice {
    background: var(--paper);
    border-top: 1px solid var(--paper-line);
    border-bottom: 1px solid var(--paper-line);
}
.visual-notice__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 1rem var(--gutter);
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}
.visual-notice__icon {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 0.15rem;
    color: var(--green-strong);
}
.visual-notice p {
    margin: 0;
    max-width: 90ch;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink);
}
.site-editor { margin: 0; }
.site-editor__list {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 0.55rem 2rem;
    font-size: 0.83rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.6);
}
.site-editor__list > div { display: flex; flex-wrap: wrap; gap: 0.1rem 0.4rem; }
.site-editor__list dt { margin: 0; font-weight: 600; color: rgba(255, 255, 255, 0.78); }
.site-editor__list dt::after { content: ":"; }
.site-editor__list dd { margin: 0; }
.site-editor__list a { color: inherit; text-decoration: underline; }
.site-editor__list a:hover { color: #fff; }
@media (max-width: 430px) {
    .site-editor__list { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* ------------------------------------------------------------------ *
 *  Uluslararası Sağlık Turizmi Yetki Belgesi bloğu (m.8/1-(b),(e),(f))
 * ------------------------------------------------------------------ */
.ht-cert {
    margin: 1.75rem 0;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius);
    background: var(--paper);
}
.ht-cert__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 1.5rem 1.25rem;
    text-align: center;
}
.ht-cert__title { margin: 0; font-size: 1rem; }
.ht-cert__facility { margin: 0; font-weight: 600; }

/* the certificate photo - full card width, natural aspect ratio (never
   force-cropped: it has to stay legible/verifiable as a document) */
.ht-cert__media {
    width: 100%;
    max-width: 42rem;
    min-height: 220px;
    background: var(--paper);
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--paper-line);
    box-shadow: var(--shadow-card);
    line-height: 0;
}
.ht-cert__media .ht-cert__media-img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

/* meta text (belge no/tarih/düzenleyen/doğrulama kodu) - small, muted,
   secondary to the certificate image itself */
.ht-cert__meta {
    width: 100%;
    max-width: 42rem;
    margin: 0.15rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--paper-line);
    display: grid;
    gap: 0.3rem 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    font-size: 0.8rem;
}
.ht-cert__meta > div { display: flex; justify-content: center; gap: 0.35rem; }
.ht-cert__meta dt { margin: 0; font-weight: 600; color: var(--ink-soft); }
.ht-cert__meta dt::after { content: ":"; }
.ht-cert__meta dd { margin: 0; color: var(--ink-soft); word-break: break-word; }
.ht-cert__links { display: flex; justify-content: center; margin: 0; }
.ht-cert__links a:not(.btn) { font-size: 0.85rem; }

/* m.8/1-(e) — HealthTürkiye logo slot: exact position + size reserved,
   left empty until the official file is supplied. */
.health-turkiye-logo {
    flex: none;
    width: 200px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.health-turkiye-logo img { max-width: 100%; max-height: 100%; }
.health-turkiye-logo.is-empty {
    border: 1px dashed var(--paper-line);
    border-radius: var(--radius-sm);
    background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(0,0,0,0.03) 8px, rgba(0,0,0,0.03) 16px);
}
.health-turkiye-logo__ph {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    text-transform: uppercase;
}

/* safety net: anything left as a bare direct child of <main> still gets the
   gutter (full-bleed elements opt out explicitly). */
main > :not(.hero):not(.section):not(.listing):not(article):not(.prose-card):not(.page-body):not(script):not(style) {
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* index / listing templates */
.listing {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: var(--pad-block) var(--gutter);
}
/* index heading block: centred above the (full-width, symmetric) card grid so
   the two don't read as accidentally misaligned. */
.listing__head {
    max-width: 46rem;
    margin: 0 auto clamp(2rem, 4.5vw, 3rem);
    text-align: center;
}
.listing__head h1 { margin: 0 0 0.5em; }
.listing__intro {
    font-size: var(--step-lead);
    color: var(--ink-soft);
    line-height: 1.62;
    max-width: 60ch;
    margin-inline: auto;
}
.listing__intro p { margin: 0; }
.listing__group { margin-top: clamp(2.5rem, 5vw, 4rem); }
.listing__group h2 { font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem); margin-bottom: 0.6em; }
.listing__group-desc { color: var(--ink-soft); max-width: 60ch; margin: -0.2rem 0 1.4rem; }
.card__meta {
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--ink-soft);   /* --gray was 4:1 */
}

/* empty state - a clearly-a-placeholder panel (dashed), never a content card
   frame, so it doesn't nest cards inside a card. */
.empty-state {
    max-width: 34rem;
    margin: clamp(1.5rem, 4vw, 3rem) auto 0;
    padding: clamp(2rem, 5vw, 3.25rem);
    text-align: center;
    border: 1px dashed var(--paper-line);
    border-radius: var(--radius);
    color: var(--ink-soft);
}
.empty-state__icon {
    width: 46px; height: 46px;
    margin: 0 auto 1rem;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--green-tint);
    color: var(--green-strong);
}
.empty-state__icon svg { width: 22px; height: 22px; }
.empty-state__title {
    font-family: var(--font);   /* stays sans even though it is now an <h2> */
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 0.35rem;
    font-size: 1.02rem;
    line-height: 1.35;
    letter-spacing: normal;
}
.empty-state p { margin: 0; font-size: 0.95rem; line-height: 1.6; max-width: 44ch; margin-inline: auto; }

.listing__filters {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    justify-content: center;
    margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.listing__filters a {
    padding: 0.5rem 1rem;
    border: 1px solid var(--paper-line);
    border-radius: 999px;
    text-decoration: none;
    color: var(--ink-soft);
    font-size: 0.88rem;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.listing__filters a:hover { border-color: var(--gray); color: var(--ink); }
.listing__filters a[aria-current="true"] {
    border-color: var(--green);
    color: var(--green-strong);
    background: var(--green-tint);
}

/* ------------------------------------------------------------------ *
 *  Scroll-reveal animation system  (design ref §2, §10)
 *  500-900ms, natural easing, short travel. JS adds .is-visible.
 *  The hidden starting state is scoped to .js: if the script never
 *  runs, nothing is ever un-hidden, so the content must stay visible.
 * ------------------------------------------------------------------ */
.js [data-reveal] {
    opacity: 0;
    transition: opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease);
    will-change: opacity, transform;
}
.js [data-reveal="fade-up"] { transform: translateY(var(--reveal-distance)); }
.js [data-reveal="fade-left"] { transform: translateX(calc(var(--reveal-distance) * -1)); }
.js [data-reveal="fade-right"] { transform: translateX(var(--reveal-distance)); }
.js [data-reveal="image-reveal"] { transform: scale(1.04); opacity: 0; }
.js [data-reveal="subtle-scale"] { transform: scale(0.97); }

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* staggered children */
.js [data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    transition: opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease);
}
[data-reveal-stagger].is-visible > * {
    opacity: 1;
    transform: none;
}
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 80ms; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 160ms; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 240ms; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 320ms; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal],
    [data-reveal-stagger] > * {
        opacity: 1 !important;
        transform: none !important;
    }
    .btn:hover, a.card:hover, .card:hover { transform: none; }
}

/* ==========================================================================
   ANA SAYFA (2026 yenilemesi)
   Bes bolum: karsilama, merak edilen konular, hekimlerimiz, hekim notu,
   randevu talebi. Mevcut renk ve tipografi degiskenleri kullanilir; yeni
   token tanimlanmaz.
   ========================================================================== */

.hp-section__title {
    font-family: var(--font-head);
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
    line-height: 1.15;
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
    letter-spacing: -0.015em;
}

/* -------- 1. Karsilama ---------------------------------------------- */
.hp-hero {
    /* Koyu zemin: sitenin siyahi (--anthracite, #16191b). Ayni ton
       "Hekiminizden bir not" bolumunde de kullaniliyor, boylece sayfa tek
       bir renk dili konusuyor. Yalnizca KARSILAMA bolumu koyu; diger dort
       bolum degismedi. */
    background: var(--anthracite);
    color: #e9e9e7;
    padding-block: clamp(2.25rem, 5vw, 4.5rem);
}
.hp-hero__inner {
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}
.hp-hero__eyebrow {
    margin: 0 0 0.85rem;
    font-size: 0.75rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    /* --green-strong (#007a4d) siyah uzerinde 2.6:1 ile okunmuyordu;
       --green (#00945e) ayni zeminde 4.6:1 veriyor. Sitenin koyu
       bolumlerdeki eyebrow kurali da bu tonu kullaniyor. */
    color: var(--green);
    font-weight: 600;
}
.hp-hero__greeting {
    margin: 0 0 0.3rem;
    font-family: var(--font-head);
    font-size: clamp(1.15rem, 0.9rem + 0.9vw, 1.5rem);
    color: rgba(255, 255, 255, 0.78);
}
.hp-hero__title {
    margin: 0 0 1rem;
    font-family: var(--font-head);
    /* Spec: masaustu ~46-60px, mobil ~30-38px. Bes-alti satira bolunmesin
       diye satir uzunlugu da sinirlaniyor. */
    font-size: clamp(1.95rem, 1.25rem + 2.9vw, 3.55rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 15ch;
}
.hp-hero__lead {
    margin: 0 0 1.75rem;
    font-size: clamp(1rem, 0.97rem + 0.15vw, 1.09rem);
    line-height: 1.62;
    color: rgba(255, 255, 255, 0.78);
    max-width: 46ch;
}
.hp-hero__actions {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.hp-hero__media picture { display: block; }
.hp-hero__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: clamp(18px, 2vw, 24px);
    box-shadow: var(--shadow-card);
    object-fit: cover;
}

@media (min-width: 760px) {
    .hp-hero__inner {
        grid-template-columns: 52fr 48fr;
        gap: clamp(2.5rem, 4vw, 3.5rem);
    }
    .hp-hero__media { justify-self: end; width: min(100%, 480px); }
}

/* -------- 2. Merak edilen bazi konular ------------------------------ */
.hp-topics__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(1.5rem, 2.5vw, 2rem);
}
.hp-topic { min-width: 0; }
.hp-topic__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--paper-line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper-2);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.hp-topic__link:hover {
    transform: translateY(-3px);
    border-color: var(--green);
    box-shadow: var(--shadow-card);
}
.hp-topic__link:focus-visible {
    outline: 2px solid var(--green-strong);
    outline-offset: 3px;
}
.hp-topic__media { display: block; }
.hp-topic__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
.hp-topic__body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: clamp(1.1rem, 2vw, 1.5rem);
    flex: 1 1 auto;
}
.hp-topic__title {
    font-family: var(--font-head);
    font-size: 1.16rem;
    line-height: 1.28;
    letter-spacing: -0.01em;
}
.hp-topic__text {
    font-size: 0.955rem;
    line-height: 1.6;
    color: var(--ink-soft);
}
.hp-topic__cta {
    margin-top: auto;
    padding-top: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--green-strong);
}
.hp-topic__link:hover .hp-topic__cta { text-decoration: underline; }

@media (min-width: 761px) {
    /* Masaustunde 2x2 - slider degil. */
    .hp-topics__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
    /* Telefonda tek yatay serit: bir tam kart + sonrakinin bir kismi gorunur,
       boylece kaydirilabildigi kendiliginden anlasilir. Autoplay yok. */
    .hp-topics__grid {
        grid-auto-flow: column;
        grid-auto-columns: 84%;
        grid-template-columns: none;
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.4rem;
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
    }
    .hp-topics__grid::-webkit-scrollbar { display: none; }
    .hp-topic { scroll-snap-align: start; }
}

/* -------- 3. Hekimlerimiz ------------------------------------------- */
.hp-docs__rail { margin-top: 0; }
.hp-docs__track { gap: clamp(1rem, 2vw, 1.5rem); }
.hp-doc { min-width: 0; }
.hp-doc__link {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-decoration: none;
    color: inherit;
}
.hp-doc__link:focus-visible {
    outline: 2px solid var(--green-strong);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}
.hp-doc__media { display: block; margin-bottom: 0.85rem; }
.hp-doc__media img,
.hp-doc__placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--green-tint), #e4e7e6);
}
.hp-doc__name {
    font-family: var(--font-head);
    font-size: 1.06rem;
    line-height: 1.3;
}
.hp-doc__role {
    font-size: 0.9rem;
    color: var(--ink-soft);
    line-height: 1.45;
}
.hp-doc__link:hover .hp-doc__name { color: var(--green-strong); }

.hp-docs__track .gallery__slide { flex: 0 0 80%; }
@media (min-width: 640px) { .hp-docs__track .gallery__slide { flex: 0 0 46%; } }
@media (min-width: 960px) { .hp-docs__track .gallery__slide { flex: 0 0 29%; } }

.gallery__progress {
    margin: 0.65rem 0 0;
    font-size: 0.82rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
.gallery--static .gallery__progress { display: none; }

/* -------- 4. Hekiminizden bir not ----------------------------------- */
.hp-note__inner {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3.25rem);
    align-items: center;
}
.hp-note__eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--green);
    font-weight: 600;
}
.hp-note__title {
    margin: 0 0 1.1rem;
    font-family: var(--font-head);
    font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.3rem);
    line-height: 1.16;
    letter-spacing: -0.015em;
}
.hp-note__quote {
    margin: 0 0 1.5rem;
    font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
    line-height: 1.68;
    color: rgba(255, 255, 255, 0.80);
    max-width: 52ch;
}
.hp-note__sign { margin: 0 0 1.25rem; display: flex; flex-direction: column; }
.hp-note__author { font-weight: 600; }
.hp-note__role { font-size: 0.9rem; color: rgba(255, 255, 255, 0.62); }
.hp-note__cta { margin: 0; }
.hp-note__link {
    font-weight: 600;
    color: var(--green);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
.hp-note__link:hover { color: #fff; }
.hp-note__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}
@media (min-width: 860px) {
    .hp-note__inner { grid-template-columns: 1fr 1fr; }
}

/* -------- 5. Randevu Talebi ----------------------------------------- */
.hp-appt__inner { max-width: 46rem; }
.hp-appt__lead {
    margin: -0.75rem 0 1.75rem;
    color: var(--ink-soft);
    line-height: 1.6;
}
.appt-form .form { max-width: none; }
.form-opt { color: var(--ink-soft); font-weight: 400; }
.form-fineprint {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* Hekim serit karti: telefonda tek kart + sonrakinin ~%19'u gorunsun. */
.hp-docs__track .gallery__slide { flex: 0 0 84%; }
@media (min-width: 640px) { .hp-docs__track .gallery__slide { flex: 0 0 46%; } }
@media (min-width: 960px) { .hp-docs__track .gallery__slide { flex: 0 0 29%; } }

@media (max-width: 760px) {
    /* scroll-snap varsayilan olarak dolguyu yok sayar; bu olmadan serit
       acilista 18px kaymis duruyor ve ilk kart gutter hizasini kaciriyor. */
    .hp-topics__grid { scroll-padding-inline: var(--gutter); }
}

/* Karsilama: telefonda sira metin -> fotograf -> butonlar; masaustunde
   butonlar sol sutunda metnin altinda kalir, fotograf sagda iki satiri kaplar. */
.hp-hero__inner {
    grid-template-areas:
        'metin'
        'gorsel'
        'butonlar';
}
.hp-hero__text    { grid-area: metin; }
.hp-hero__media   { grid-area: gorsel; }
.hp-hero__actions { grid-area: butonlar; margin-top: 0.25rem; }

@media (min-width: 760px) {
    .hp-hero__inner {
        grid-template-areas:
            'metin gorsel'
            'butonlar gorsel';
        grid-template-rows: auto auto;
        align-content: center;
        row-gap: 1.5rem;
    }
    .hp-hero__media { align-self: center; }
    .hp-hero__actions { margin-top: 0; align-self: start; }
}

/* <picture> icindeki <img> etiketinin width/height oznitelikleri mobil
   kaynaktan (4:3) geliyor; masaustunde <source> 4:5 dosyayi yuklese bile
   kutu orani oznitelikten hesaplaniyordu ve gorsel yeniden kirpiliyordu.
   Orani burada acikca veriyoruz. */
.hp-hero__media img { aspect-ratio: 4 / 3; }
@media (min-width: 760px) {
    .hp-hero__media img { aspect-ratio: 4 / 5; }
}

/* --- Karsilama bolumu koyu zeminde butonlar --- */
/* Birincil buton zaten yesil dolgu + antrasit yazi (4.54:1); koyu zeminde
   oldugu gibi kaliyor. Ikincil buton currentColor kullaniyor, yani cerceve
   ve yazi hero metin rengini aliyor. Sorun HOVER'da: genel kural rengi
   --green-strong (#007a4d) yapiyor; siyah uzerinde 3.27:1, AA altinda.
   Koyu zeminde --green kullaniliyor. */
.hp-hero .btn--secondary:hover,
.hp-hero .btn--secondary:focus-visible {
    border-color: var(--green);
    color: var(--green);
}

/* ================================================================== *
 *  ORTAK SAYFA DİLİ — standart sayfalar
 *  Hakkımızda · Ekibimiz · Tedaviler (liste + detay) · Uluslararası
 *  Hastalar · Blog (liste) · İnsan Kaynakları · İletişim
 *
 *  NEDEN BU BÖLÜM VAR
 *  Bu sayfalar üç ayrı düzenden (prose-card / listing / hero) türemiş ve
 *  zamanla birbirinden ayrı düşmüştü. Ölçüm (1440px):
 *
 *    sayfa                    h1      hiza     kapsayıcı  genişlik  üst boşluk
 *    /hakkimizda/           70.4px   sola     prose-card    800px      0
 *    /ekibimiz/             70.4px   ortada   listing      1180px    120px
 *    /tedaviler/            70.4px   ortada   listing      1180px    120px
 *    /uluslararasi-hastalar/70.4px   sola     prose-card   1056px      0
 *    /blog/                 70.4px   ortada   listing      1180px    120px
 *    /insan-kaynaklari/     70.4px   sola     prose-card    800px      0
 *    /iletisim/             34.4px   sola     prose-card   1152px      0
 *
 *  70.4px, ANA SAYFA KARŞILAMA ölçeğidir (--step-hero); sayfa başlığı için
 *  değil. Tek istisna /iletisim/ idi: orada elle 34.4px'e çekilmişti ve
 *  doğru duruyordu. Bu yüzden yeni ortak ölçek uydurulmadı, o kabul edilmiş
 *  değer --step-page-title olarak alındı ve hepsine uygulandı.
 *
 *  Bu bölüm dosyanın SONUNDA duruyor: aynı özgüllükteki eski kuralları
 *  kaynak sırasıyla eziyor, böylece şablonlarda sayfa sayfa satır içi
 *  düzeltme yapmaya gerek kalmıyor ve TR/EN aynı görünümü kendiliğinden
 *  alıyor.
 * ================================================================== */

:root {
    /* Sayfa başlığı — ana sayfa karşılamasından ayrı ve ondan küçük. */
    --step-page-title: clamp(1.7rem, 1.35rem + 1.4vw, 2.15rem);
    /* Bölüm başlığı — sayfa başlığından belirgin şekilde küçük. */
    --step-section-title: clamp(1.3rem, 1.08rem + 0.95vw, 1.7rem);
    /* Sayfa gövdesinin üstündeki tek dikey boşluk (başlık bloğuna kadar). */
    --pad-page: clamp(2.5rem, 1.75rem + 3vw, 4rem);
    /* Başlık bloğunun ölçü genişliği. */
    --page-head-maxw: 46rem;
}

/* --- 1. Sayfa başlıkları: tek ölçek, antrasit ------------------------
   .hero__title--doctor hariç: hekim sayfası bu görevin kapsamında değil
   ve kendi ölçeği zaten bilinçli olarak ayarlanmış.

   BLOG YAZISI da buraya dahil (main > article > header > h1). Yazı
   başlığının sınıfı yok, ölçüsünü genel "h1 { --step-hero }" kuralından
   alıyordu ve ortak ölçeğe geçen yedi sayfanın yanında tek başına 70.4px
   kalmıştı. Blog LİSTESİ zaten .listing__head > h1 üzerinden kapsanıyordu.
   Seçici bilerek yapıya bağlı: yalnızca blog yazısı şablonunda
   <article><header><h1> dizilimi var. */
.prose-card > h1,
.listing__head > h1,
main > article > header > h1,
.hero__title:not(.hero__title--doctor) {
    font-size: var(--step-page-title);
    line-height: 1.16;
}
.prose-card > h1,
.listing__head > h1,
main > article > header > h1 { color: var(--ink); }

/* --- 2. Başlık bloğu ortalanır --------------------------------------
   .listing__head zaten ortalıydı; prose-card sayfaları sola yatıktı.
   Yalnızca başlık ve giriş ortalanır — gövde metni okunabilirlik için
   sola dayalı kalır. */
.prose-card > h1 { text-align: center; margin-bottom: 0.55em; }
.prose-card > .intro {
    text-align: center;
    max-width: 54ch;
    margin-inline: auto;
    margin-bottom: 2.25rem;
}
.listing__head { max-width: var(--page-head-maxw); }

/* --- 3. Dikey ritim: tek üst boşluk ---------------------------------
   prose-card sayfalarında başlık başlığın üstünde hiç boşluk yoktu (kart
   header'a yapışıyordu), listing sayfalarında 120px vardı. */
main > .prose-card { margin-block: var(--pad-page); }
.listing { padding-block: var(--pad-page); }

/* --- 4. Bölüm başlıkları --------------------------------------------
   "2010'dan Bugüne" gibi ara başlıklar sayfa başlığı ölçeğindeydi ve
   üstlerindeki 2em boşluk o iri puntoyla 140px'e çıkıyordu. */
.prose-card > h2,
.prose-card > .body-heading,
.listing__group > h2 {
    font-size: var(--step-section-title);
    line-height: 1.25;
}
.prose-card > h2,
.prose-card > .body-heading { margin-top: 2.4rem; margin-bottom: 0.7rem; }

/* --- 5. Formlar: gerçek bir form gibi dursun -------------------------
   YALNIZCA GÖRÜNÜM. Alanlara, doğrulamaya, gönderime dokunulmadı.
   Kart içinde kart olduğu için gölge yok; ayrım kırık beyaz zemin ve
   ince çerçeveyle veriliyor. Değerler ana sayfadaki kart dilinden
   (--radius, --paper, --paper-line) alındı, yenisi uydurulmadı. */
.form-card {
    margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
    padding: clamp(1.4rem, 0.95rem + 1.9vw, 2.25rem);
    background: var(--paper);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius);
}
.form-card > h2 { margin-top: 0; font-size: var(--step-section-title); }
.form-card__lead { margin-inline: auto; }
.form-card .form { margin-inline: auto; }

/* --- 6. Ara kontrol ---------------------------------------------------
   Ana sayfa (.section / .hero tabanlı) ve hekim sayfaları bu bölümden
   etkilenmez: buradaki seçicilerin hiçbiri onlarda karşılık bulmuyor.
   Tek ortak nokta .hero__title'dı, o da doctor için dışarıda bırakıldı. */

/* --- Uluslararası Hastalar: geniş kart içinde simetrik akış -----------
   Bu sayfanın kartı diğer prose sayfalarından geniş (66rem), çünkü sağlık
   turizmi yetki belgesi bloğu dar bir sütuna sığmıyor — belge, belge no,
   tarih, düzenleyen ve doğrulama kodu YASAL ZORUNLULUK, kırpılamaz.
   Ama metin sütunu 66ch'te kaldığı için belgenin altındaki bölümler
   kartın solunda birikiyor ve sağda geniş bir boşluk kalıyordu.
   Çözüm: metin sütunu daraltılmış hâliyle KART İÇİNDE ORTALANIR; belge
   bloğu tam genişlikte kalır. Metin kendi içinde sola dayalı - ortalanmış
   paragraf uzun metinde okunmayı zorlaştırır. */
.page-uluslararasi-hastalar .prose-card > h2,
.page-uluslararasi-hastalar .prose-card > .body-heading,
.page-uluslararasi-hastalar .prose-card > p,
.page-uluslararasi-hastalar .prose-card > ul,
.page-uluslararasi-hastalar .prose-card > ol,
.page-uluslararasi-hastalar .prose-card > .table-wrap {
    /* rem, ch DEĞİL. ch elemanın KENDİ fontuna göre hesaplanır; başlıklar
       serif (Fraunces) olduğu için 62ch onlarda 1100px'e çıkıyor ve
       kapsayıcıdan geniş kaldığı için ortalanmıyordu — başlıklar solda,
       paragraflar içeride, kırık bir merdiven görüntüsü oluşuyordu.
       Tek mutlak ölçü ikisini de aynı sütuna hizalıyor. */
    max-width: 40rem;
    margin-inline: auto;
}
/* Belge bloğu bu daraltmanın dışında: tam kart genişliği. */
.page-uluslararasi-hastalar .prose-card > .ht-cert { max-width: none; }

/* --- Görsel şeridi ("Kliniğimizden") ---------------------------------
   Kaydırma .gallery kurallarından geliyor (scroll-snap); burada yalnızca
   bölüm başlığı ve şeridin sayfa içindeki yerleşimi tanımlı. Başlık ortak
   bölüm başlığı ölçeğini kullanıyor — abartılı büyüklükte değil.
   Açıklama yok, o yüzden .gallery__caption bu şeritte hiç basılmıyor. */
.photo-strip { margin-top: clamp(2.4rem, 1.8rem + 2.2vw, 3.4rem); }
.photo-strip__title {
    font-size: var(--step-section-title);
    line-height: 1.25;
    text-align: center;
    margin: 0 0 1.2rem;
}
.photo-strip__gallery { margin-top: 0; }

/* ================================================================== *
 *  POLİKLİNİĞİMİZ — görsel önde, metin destek
 *
 *  Bu sayfada asıl iş görsellerde: ziyaretçi kliniğin ortamını görmek
 *  için giriyor. Metin SEO için duruyor ama görselin önüne geçmemeli.
 *  (Blok SIRASI ayrı iş: manage.py arrange_clinic_page galeriyi
 *  kendisini anlatan paragrafın üstüne alıyor.)
 *
 *  Burada yalnızca ÖLÇÜ değişiyor; hiçbir metin gizlenmiyor, silinmiyor.
 *  Kapsam .page-poliklinigimiz ile sınırlı — sitenin geri kalanındaki
 *  galeriler ve bölüm başlıkları etkilenmiyor.
 * ================================================================== */

/* Kart bu sayfada daha geniş: görseller nefes alsın. */
.page-poliklinigimiz main > .prose-card {
    max-width: min(76rem, 100% - 2 * var(--gutter));
}

/* Galeri büyür: slaytlar geniş, oran 3/2 yerine 16/10 (daha az yükseklik,
   daha çok genişlik — mekân fotoğrafı böyle okunuyor). */
.page-poliklinigimiz .gallery { margin: 1.4rem 0 2.2rem; }
.page-poliklinigimiz .gallery__slide {
    flex: 0 0 clamp(17rem, 74vw, 46rem);
}
.page-poliklinigimiz .gallery__slide img {
    aspect-ratio: 16 / 10;
}

/* Bölüm başlıkları küçülür: sayfa başlığından da, ortak bölüm
   başlığından da küçük. Görünürlüğünü koruyan ama galeriyle
   yarışmayan bir ölçek. */
.page-poliklinigimiz .prose-card > .body-heading {
    font-size: clamp(1rem, 0.92rem + 0.35vw, 1.15rem);
    letter-spacing: 0.01em;
    color: var(--green-strong);
    margin-top: 2.2em;
    margin-bottom: 0.4em;
}

/* Gövde paragrafları da bir tık küçük ve daha dar: destek metni. */
.page-poliklinigimiz .prose-card > p {
    font-size: 0.94rem;
    line-height: 1.6;
    max-width: 62ch;
    color: var(--ink-soft, var(--ink));
}

/* Giriş metni kısa ve üstte — ortak kuraldan gelen ortalama korunuyor,
   yalnızca alt boşluk azaltılıyor ki galeri yukarı gelsin. */
.page-poliklinigimiz .prose-card > .intro {
    margin-bottom: 1.5rem;
}


/* ================================================================== *
 *  EKİBİMİZ — asıl olan fotoğraflar, giriş metni destek
 *
 *  Giriş paragrafı .listing__intro ölçeğindeydi (--step-lead) ve dört
 *  sütunluk fotoğraf ızgarasının üstünde bir metin bloğu gibi duruyordu.
 *  Genişlik zaten ızgarayı aşmıyordu (.listing__head 46rem); sorun
 *  puntoydu. Burada yalnızca bu sayfada küçültülüp daraltılıyor —
 *  Tedaviler ve Blog listelerinin giriş ölçeğine dokunulmuyor.
 * ================================================================== */
.template-teampage .listing__intro {
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 52ch;
}
.template-teampage .listing__head {
    margin-bottom: clamp(1.6rem, 3vw, 2.2rem);
}

/* --- Instagram bağlantısı (footer / iletişim / poliklinik) ---------- */
.instagram-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
    font-weight: 600;
}
.instagram-link:hover .instagram-link__text { text-decoration: underline; }
.instagram-link__icon {
    display: inline-flex;
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
}
.instagram-link__icon svg { width: 100%; height: 100%; }
/* Footer koyu zeminde: marka yeşili değil, gövde rengi — footer'daki
   diğer bağlantılarla aynı ağırlıkta dursun. */
.site-footer .instagram-link { color: inherit; }
.contact-block .instagram-link,
.prose-card > .instagram-link { color: var(--green-strong); }
.prose-card > .instagram-link { margin-top: 1.6rem; }

/* --- Tedaviler listesi: tek kartlı grup satırı kaplamasın ----------
   .card-grid auto-fit kullanıyor: bir grupta tek kart varsa o kart tüm
   satıra yayılıyor ve 3/2 oranındaki kapak görseli 1100x733'e çıkıp
   sayfayı eziyordu ("Çocuk Diş Hekimliği"). Kapaklar bu tura kadar
   yoktu, o yüzden fark edilmemişti.

   auto-fill boş sütun izlerini KORUYOR, dolayısıyla tek kart normal
   genişlikte kalıyor. Kapsam yalnızca tedavi listesi — blog listesinin
   ve ana sayfanın kart ızgaralarına dokunulmuyor. Aynı gerekçe
   .team-grid'de zaten yazılı (orada sabit sütun sayısı tercih edilmiş). */
.template-treatmentindexpage .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 255px), 1fr));
}


/* ================================================================== *
 *  RANDEVU TALEBİ FORMU — gruplanmış alanlar
 *
 *  Form ad/telefon + kısa nottan, tarih · saat dilimi · sebep · geçmiş
 *  muayene alanlarını da kapsayacak biçimde büyüdü. Hepsi düz bir liste
 *  hâlinde alt alta dizilince telefonda çok uzun ve caydırıcı duruyordu;
 *  ilgili alanlar tek bir çerçeveye alındı.
 *
 *  Kapsam .form ile sınırlı — İletişim ve İş Başvurusu formlarının
 *  görünümüne dokunulmuyor. Renkler mevcut token'lardan (--green
 *  = PANTONE 340 C), yeni renk tanımlanmadı.
 * ================================================================== */

/* Alan grubu çerçevesi (fieldset). .form-consent ile aynı dil, ama
   vurgusuz: bu bir onay kutusu değil, isteğe bağlı tercihler bloğu. */
.form-block {
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.15rem 1.15rem;
    margin: 0;
    display: grid;
    gap: 1.1rem;
    min-width: 0; /* fieldset varsayılanı grid'i taşırıyor */
}
.form-block > legend {
    padding: 0 0.4rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
}

/* Radyo grubunun başlığı gerçek bir <label> değil (tek bir girdiye
   işaret etmiyor); görünümü label ile aynı olmalı. */
.form-row__label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
}

.form-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    padding-top: 0.2rem;
}
.form-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--ink);
    cursor: pointer;
    /* Dokunma hedefi: telefonda 44px'in altına düşmesin. */
    min-height: 1.9rem;
}
.form-radio input {
    accent-color: var(--green);
    width: 1rem;
    height: 1rem;
    margin: 0;
    flex: 0 0 auto;
}

/* Tarih alanı "net tarihim yok" işaretlenince devre dışı kalır. */
.form input[type="date"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Koşullu satır (Diğer → serbest metin). .form-row display:grid olduğu
   için hidden özniteliği tek başına yetmiyor. */
.form-row[hidden] {
    display: none;
}

/* ================================================================== *
 *  /randevu/ SAYFASI — düzen ve tipografi
 *
 *  Referans: /iletisim/ (sitenin öbür form sayfası). Yeni bir ölçek
 *  UYDURULMADI; aşağıdaki her değer İletişim sayfasının mevcut
 *  kuralından birebir alındı:
 *
 *    giriş metni      --step-body, 1.6, 62ch   ← .template-contactpage .prose-card .intro
 *    h1 alt boşluğu   0.35em                   ← .template-contactpage .prose-card > h1
 *    kart iç boşluğu  clamp(1.5rem,…,2.6rem)   ← .template-contactpage main > .prose-card
 *    blok başlığı     0.78rem/700/BÜYÜK HARF   ← .form-consent legend
 *    gönder butonu    tam genişlik              ← İletişim formunda buton .form grid'inin
 *                                               doğrudan çocuğu olduğu için esniyor
 *
 *  Kart GENİŞLİĞİ değiştirilmedi: /randevu/ zaten standart iç sayfa
 *  kartını (.prose-card, 800px) kullanıyor — /hakkimizda/ ile aynı.
 *  Form alanları tek sütun; İletişim'in 1152px kartında seçim listeleri
 *  okunmayacak kadar uzardı.
 *
 *  Form ETİKETLERİNE dokunulmadı: 0.92rem/600, İletişim'dekiyle birebir
 *  aynı. Formun "ağır" durmasının sebebi etiketler değil, 20px'lik giriş
 *  metni ve koyu-kalın blok başlığıydı.
 *
 *  Kapsam .template-appointmentpage — aynı form ana sayfadaki #randevu
 *  bölümünde de basılıyor, oraya dokunulmuyor.
 * ================================================================== */

.template-appointmentpage main > .prose-card {
    padding: clamp(1.5rem, 1rem + 2vw, 2.6rem);
}
.template-appointmentpage .prose-card > h1 {
    margin-bottom: 0.35em;
}
.template-appointmentpage .prose-card > .intro {
    font-size: var(--step-body);
    line-height: 1.6;
    max-width: 62ch;
    margin-bottom: 1.5rem;
}

/* Blok başlığı ("Ne zaman gelmek istersiniz?") — İletişim'deki
   "AYDINLATMA" / "SAĞLIK VERİSİ PAYLAŞIMI" başlıklarının kuralı. */
.template-appointmentpage .form-block > legend {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--green-strong);
}
/* "(isteğe bağlı)" büyük harfe çevrilmesin — o bir açıklama, başlık değil. */
.template-appointmentpage .form-block > legend .form-opt {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--ink-soft);
}

/* Blok içi boşluklar biraz sıkılaştırıldı; satırlar arası boşluk
   (.form gap 1.1rem) İletişim'le aynı kaldı. */
.template-appointmentpage .form-block {
    padding: 0.9rem 1rem 1rem;
    gap: 0.9rem;
}

/* Gönder butonu — İletişim'deki gibi tam genişlik. Böylece ortalanmış
   başlık + giriş ile formun alt kısmı aynı ekseni paylaşıyor. */
.template-appointmentpage .form-actions {
    margin: 0.25rem 0 0;
}
.template-appointmentpage .form-actions .btn {
    width: 100%;
    justify-content: center;
}
.template-appointmentpage .form-fineprint {
    margin-top: 0.75rem;
    text-align: center;
}

/* FORM İÇİNDEKİ PARAGRAFLAR SINIRLANMASIN.
   Genel kural "p { max-width: 68ch }" (dosyanın başı) okunabilir satır
   uzunluğu için konmuş. Formda satırların çoğu <p> (.form-row,
   .form-actions, .form-fineprint) ve bu kural onları masaüstünde ~700px'e
   kısıyordu: seçim listeleri, not kutusu ve gönder butonu, çerçeveli
   bloktan ve onay kutusundan 15px dar kalıp sağda fazladan boşluk
   açıyordu — form ortada durmuyordu. */
.template-appointmentpage .appt-form p {
    max-width: none;
}

/* Ad soyad / Telefon YAN YANA: telefonun altındaki ipucu satırı o hücreyi
   uzatıyor, grid satırı esneyince ad hücresi de uzuyor ve .form-row'un
   kendi grid'i fazlalığı girdi kutusuna dağıtıyordu. Sonuç: ad kutusu
   telefondan uzun ve daha aşağıda başlıyordu. align-content: start
   fazlalığı hücrenin altında bırakıyor; iki kutu aynı hizada. */
.template-appointmentpage .form-grid > .form-row {
    align-content: start;
}

/* ================================================================== *
 *  İÇ SAYFA "RANDEVU AL" BUTONU (includes/appointment_cta.html)
 *
 *  Buton header'dakiyle aynı sınıf (.btn.btn--primary). Üstündeki boşluk
 *  sitenin mevcut .block-cta kuralından geliyor (2rem); burada yalnızca
 *  ortalama var. Adres şablonda değil, appointment_url tag'inde.
 *
 *  Buton, kapattığı içeriğin bölümüne / kartına konuyor; ayrı ince bir
 *  bant açılmıyor. İlk denemede ayrı bant vardı: üstte önceki bölümün
 *  dolgusu + bandın dolgusu (164px), altta yalnız bandınki (44px) kalıyor,
 *  buton aşağı kaymış görünüyordu.
 * ================================================================== */
.appt-cta {
    display: flex;
    justify-content: center;
}

/* ================================================================== *
 *  ANA SAYFA RANDEVU BÖLÜMÜ (#randevu)
 *
 *  Aynı form parçası (contactforms/_appointment_form.html) hem burada hem
 *  /randevu/'da basılıyor. /randevu/ düzeltmeleri .template-appointmentpage
 *  ile sınırlıydı; ana sayfada aynı sorunlar duruyordu. Ölçüm, 1440px:
 *    - form satırlarının sağ kenarı çerçeveli bloklardan 36px kısa
 *      (genel "p { max-width: 68ch }" kuralı; <p> satırları kısılıyor)
 *    - ad kutusu telefondan 13px aşağıda ve 13px uzun (telefonun ipucu
 *      satırı grid satırını uzatıyor)
 *    - blok başlığı 14.7px koyu kalın; İletişim formundaki blok
 *      başlıklarıyla (0.78rem / 700 / BÜYÜK HARF / yeşil) aynı değil
 *    - gönder düğmesi 156px; İletişim ve İş Başvurusu formlarında düğme
 *      formun tam genişliğinde
 *  Aşağıdaki kurallar /randevu/'dakilerin birebir aynısı, kapsamı .hp-appt.
 *  PAYLAŞILAN ŞABLONA DOKUNULMADI.
 *
 *  Buraya TAŞINMAYANLAR (/randevu/'ya özgü): h1 boşluğu, giriş metni
 *  ölçüsü, kart dolgusu — ana sayfa bölümünün kendi başlık ölçeği var —
 *  ve ortalanmış küçük yazı: /randevu/'da başlık ortalı, burada bölüm sola
 *  hizalı; küçük yazı da sola hizalı kalıyor.
 * ================================================================== */
.hp-appt .appt-form p { max-width: none; }
.hp-appt .form-grid > .form-row { align-content: start; }
.hp-appt .form-block > legend {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--green-strong);
}
.hp-appt .form-block > legend .form-opt {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--ink-soft);
}
.hp-appt .form-block { padding: 0.9rem 1rem 1rem; gap: 0.9rem; }
.hp-appt .form-actions { margin: 0.25rem 0 0; }
.hp-appt .form-actions .btn { width: 100%; justify-content: center; }

/* KOYU ZEMİNDE VURGU (2026-09-12)
   Yukarıdaki dokuz kural koyu bölümlerde marka rengini METİN olarak
   kullanıyor. Panelden koyu bir ana renk seçilirse (ör. lacivert) bu yazılar
   antrasit üzerinde okunmaz hâle gelirdi; bu yüzden hepsi --green-on-dark
   değişkenine bağlandı. Değişken tanımsızken --green'e düşer, yani bugünkü
   görünüm birebir aynı. Tema özel bir renk kullanıyorsa değişkeni
   home/tema.py üretir: rengi 4.5:1 kontrasta ulaşana kadar açar. */

/* ==================================================================== *
 *  BÖLÜM DÜZENİ — panelden seçilen zemin / boşluk / hizalama / genişlik
 *  (2026-09-12, Ayarlar > Tema ile aynı iş)
 *
 *  Bu sınıfların hiçbiri kendiliğinden uygulanmaz: yalnızca editör tedavi
 *  sayfasındaki bir bölümde "Düzen" seçtiğinde şablon basar. Hiçbir bölümde
 *  seçim yoksa çıktı bugünküyle birebir aynıdır (zemin sırası yine
 *  şablondaki {% cycle %} ile gelir).
 * ==================================================================== */

/* Zemin — marka tonu. Tam doygun yeşil bilerek KULLANILMIYOR: tasarım
   referansı yeşili yalnızca vurgu olarak tanımlıyor ("never a dominant
   fill"), bu yüzden bölüm zemini soluk yıkama (--green-tint). */
.section--yesil { background: var(--green-tint); color: var(--ink); }
.section--yesil h1, .section--yesil h2, .section--yesil h3 { color: var(--ink); }

/* Dikey boşluk — tek ritim değişkeninin (--pad-block) katı olarak; böylece
   ekran genişliğine göre akışkan kalır. */
.section--bosluk-dar { padding-block: calc(var(--pad-block) * 0.55); }
.section--bosluk-genis { padding-block: calc(var(--pad-block) * 1.35); }

/* Metin hizalama — ortalarken 68ch'lik paragraf ölçüsü de ortalanır,
   yoksa metin ortalı ama blok sola yaslı kalıyordu. */
.section--orta .section__inner { text-align: center; }
.section--orta .section__inner > p,
.section--orta .section__head,
.section--orta .prose-card { margin-inline: auto; }
.section--orta ul, .section--orta ol { list-style-position: inside; padding-left: 0; }

/* Genişlik — "dar" okuma ölçüsü (.section--lede ile aynı), "tam" ise
   kenar boşluğu dışında sınırsız. */
.section--dar .section__inner { max-width: 46rem; }
.section--tam .section__inner { max-width: none; }

/* ------------------------------------------------------------------ *
 *  Blog — bant düzeni (2026-09-20)
 *
 *  Blog, sitenin geri kalanından kopuk duruyordu: tedavi ve ana sayfa
 *  bantlardan kuruluyken blog tek bir kutuydu. Artık iki blog şablonu da
 *  .section bantlarından oluşuyor. Burada YALNIZCA bantlaşmanın getirdiği
 *  farklar var — kart, filtre, künye gibi parçalar kendi kurallarını
 *  koruyor; koyu zeminde okunmayan renkler aşağıda açılıyor.
 *
 *  Renkler token: tema ayarından gelen --green-on-dark / --green geçerli
 *  kalsın, hiçbir marka rengi buraya gömülmesin.
 * ------------------------------------------------------------------ */

/* Yazı sayfası: <article> artık bantların KABI, okuma sütunu değil.
   Okuma genişliği ve yatay boşluk bantların .blog-body'sine taşındı;
   punto ve satır yüksekliği article'da kalıp aşağı miras geçiyor. */
.template-blogpage main > article {
    max-width: none;
    margin: 0;
    padding: 0;
}
.blog-body {
    max-width: 44rem;
}
/* "main > article > h2" artık eşleşmiyor (h2 bir bant içinde); aynı üst
   boşluk okuma sütununa taşındı. */
.blog-body > h2,
.blog-body > .body-heading { margin-top: 2.2em; }

/* YUMUŞAK GEÇİŞ. Koyu bantların zemini düz antrasit yerine iki antrasit
   tonu arasında geçiyor: başlık bandı aşağı doğru açılır, kapanış bandı
   yukarıdan koyulaşır. Böylece beyaz gövdeyle aradaki dikiş sert bir
   çizgi gibi durmuyor. Yeni renk yok — paletteki iki ton. */
.blog-hero {
    background-image: linear-gradient(180deg, var(--anthracite) 0%, var(--anthracite-2) 100%);
}
.blog-kapanis {
    background-image: linear-gradient(180deg, var(--anthracite-2) 0%, var(--anthracite) 100%);
}
/* Başlık bandında görsel ile başlık arasındaki boşluk, gövdedeki
   ritmin aynısı. */
.blog-hero h1 { margin: 0; }

/* Koyu zeminde okunurluk — aşağıdaki renkler beyaz zemin için seçilmişti.
   Her iki sınıf da yalnızca blog kartında kullanılıyor (başka şablonda
   geçmiyor), bu yüzden kural kapsamı dar tutulmadı. */
.section--dark .card__meta { color: rgba(255, 255, 255, 0.74); }
.section--dark .card__date { color: rgba(255, 255, 255, 0.62); }

/* Kategori filtresi: koyu zeminde çerçeve ve yazı açılır, seçili olan
   marka tonuyla işaretlenir (beyaz zemindeki --green-tint dolgu koyuda
   parlak bir leke bırakıyordu; yerine ince bir doluluk). */
.section--dark .listing__filters a {
    border-color: var(--anthracite-line);
    color: rgba(255, 255, 255, 0.82);
}
.section--dark .listing__filters a:hover {
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}
.section--dark .listing__filters a[aria-current="true"] {
    border-color: var(--green-on-dark, var(--green));
    color: var(--green-on-dark, var(--green));
    background: rgba(255, 255, 255, 0.06);
}

/* Boş durum panosu (kategori seçiliyken yazı yoksa). */
.section--dark .empty-state {
    border-color: var(--anthracite-line);
    color: rgba(255, 255, 255, 0.72);
}

/* "İlgili videolar" link listesi kapanış bandında koyu zemine düşüyor;
   .video-links__list a kuralı --ink (neredeyse siyah) veriyordu. */
.section--dark .video-links__list a {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.28);
}
.section--dark .video-links__list a::before { color: var(--green-on-dark, var(--green)); }
.section--dark .video-links__list a:hover { border-bottom-color: var(--green-on-dark, var(--green)); }

/* Koyu bölümde KART İÇİNDEKİ "devamı" bağlantısı. Kartın zemini
   --anthracite-2, bölümün zemininden açık; tema motoru koyu zemin rengini
   bölüm zeminine göre hesaplıyor (home/tema.py, koyu_zemin_rengi -> ANTRASIT)
   ve o ton kartın içinde 4.54'ten 4.12:1'e düşüyor. Kart içinde bir tık daha
   açılır: varsayılan yeşilde 5.44:1. Tema rengi değişirse hesap onun üstünden
   yürür. color-mix desteklenmezse bu satır düşer ve yukarıdaki kural geçerli
   kalır — yani en kötü hâlde bugünkü davranış. */
.section--dark .card__more {
    color: color-mix(in srgb, var(--green-on-dark, var(--green)) 80%, #fff);
}

/* ==================================================================== *
 *  RANDEVU FORMU — görsel düzen (2026-09-20)
 *
 *  Şikâyetler: form sayfadan ayrışmıyordu (beyaz kart içinde beyaz form),
 *  başlık ortalı / form sola hizalıydı, saat dilimi seçenekleri 2 + 1
 *  kırılıyordu. Aynı form hem /randevu/ hem ana sayfadaki #randevu
 *  bölümünde basıldığı için düzeltmeler PAYLAŞILAN sınıflara yazıldı:
 *  ikisi birden düzeliyor, iki ayrı kopya kural kalmıyor.
 *
 *  Yeni renk/ölçü uydurulmadı: panel İletişim formundaki .form-card
 *  kalıbının aynısı (--paper zemin, --paper-line çerçeve, --radius).
 * ==================================================================== */

/* 1. BAŞLIK VE GİRİŞ FORMLA AYNI HİZADA.
   .prose-card > h1 ve > .intro sitede ortalı; randevu sayfasında form sola
   hizalı olduğu için başlık havada duruyordu. Burada üçü de sol kenarı
   paylaşıyor. Küçük yazı da aynı sebeple sola alındı. */
.template-appointmentpage .prose-card > h1 {
    text-align: left;
}
.template-appointmentpage .prose-card > .intro {
    text-align: left;
    margin-inline: 0;
    max-width: 58ch;
}
.template-appointmentpage .form-fineprint {
    text-align: left;
}

/* 2. SEÇENEK GRUPLARI.
   Saat dilimi artık kendi tam genişlikteki satırında (şablon). Üç seçenek
   eşit sütunlara oturuyor; dar ekranda tek sütuna iner. minmax tabanı
   en uzun etiketi ("Henüz belirlemedim") tek satırda tutacak kadar. */
.form-row--full { grid-column: 1 / -1; }
.form-radios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.5rem 1rem;
    align-items: center;
}
.form-radio {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
    align-items: center;
    font-weight: 400;
    margin: 0;
}
.form-radio input { margin: 0; }
/* "Net bir tarihim yok" tarih kutusunun yanındaki sütunda; kutu ile aynı
   taban çizgisine otursun diye etiket yüksekliği kadar aşağıdan başlar. */
.form-check--date { align-self: end; padding-bottom: 0.7rem; }

/* 3. RANDEVU DIŞI KONU YÖNLENDİRMESİ — formun altında, panelin içinde. */
.appt-form__alt {
    margin: 1rem 0 0;
    font-size: 0.9rem;
    color: var(--ink-soft);
    line-height: 1.55;
}
.appt-form__alt a { color: var(--green-strong); }

/* 4. PANEL. Form .form-card sınıfını da taşıyor (şablon). Ana sayfadaki
   bölümde üstteki metne yapışmasın diye üst boşluk orada biraz daha dar. */
.hp-appt .appt-form.form-card { margin-top: 1.25rem; }

@media (max-width: 560px) {
    .form-check--date { align-self: start; padding-bottom: 0; }
}

/* ==================================================================== *
 *  TİPOGRAFİ — iç sayfalarda kademeli hiyerarşi (2026-09-21)
 *
 *  ŞİKÂYET: "başlıklar çok büyük ve orantısız, bağırıyor". Ölçüldüğünde üç
 *  ayrı sorun çıktı (1440px):
 *
 *   1. TEDAVİ SAYFASI: bölüm başlığı 46.4px, sayfa başlığı 34.4px.
 *      Yani bölüm başlığı SAYFA BAŞLIĞINDAN BÜYÜKTÜ — hiyerarşi ters.
 *      Sebep: bölüm başlıkları genel "h2 { --step-h2 }" kuralından
 *      besleniyordu; o ölçek ana sayfanın bant başlıkları için yapılmıştı.
 *   2. BLOG YAZISI: başlık 70.4px (ana sayfa karşılama ölçeği). Eski
 *      kural "main > article > header > h1" seçicisine bağlıydı; 20 Eylül'de
 *      yazı bant düzenine geçerken h1 <header> içinden .blog-hero içine
 *      taşındı ve seçici tutmaz oldu. Bu bir GERİLEME, burada onarılıyor.
 *   3. Sayfa başlığı ile alt satır (giriş metni) arasındaki fark zayıftı:
 *      34.4 / 20.5 ve ikisi de aynı incelikte.
 *
 *  ÇÖZÜM: ölçek iç sayfalara ÖZEL olarak küçültülüyor, sayfa başlığı ise
 *  KOYULAŞTIRILIYOR — küçük ama net. Ana sayfa (template-homepage) ve hekim
 *  sayfaları kapsam DIŞI: ikisinin ölçeği bilinçli olarak ayrı ayarlanmış.
 *
 *  Yeni değerler yalnızca mevcut token'ları yeniden tanımlar; yeni bir
 *  ölçek sistemi kurulmaz.
 * ==================================================================== */

.template-standardpage,
.template-teampage,
.template-blogindexpage,
.template-blogpage,
.template-treatmentindexpage,
.template-treatmentpage,
.template-videoindexpage,
.template-contactpage,
.template-appointmentpage {
    /* 34.4px -> 29.6px */
    --step-page-title: clamp(1.55rem, 1.3rem + 1.05vw, 1.85rem);
    /* 27.2px -> 21.6px; sayfa başlığının belirgin biçimde altında */
    --step-section-title: clamp(1.15rem, 1.02rem + 0.55vw, 1.35rem);
    /* 20.5px -> 17.6px; gövdeden ayrışır ama başlıkla yarışmaz */
    --step-lead: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
}

/* --- Sayfa başlığı: küçüldü, KOYULAŞTI ----------------------------- */
.template-standardpage .prose-card > h1,
.template-teampage .listing__head > h1,
.template-blogindexpage .listing__head > h1,
.template-treatmentindexpage .listing__head > h1,
.template-videoindexpage .listing__head > h1,
.template-contactpage .prose-card > h1,
.template-appointmentpage .prose-card > h1,
.template-blogpage .blog-hero h1,
.template-treatmentpage .hero__title {
    font-weight: 600;
    letter-spacing: -0.012em;
}

/* BLOG YAZISI BAŞLIĞI — gerileme onarımı.
   Eski kural <header> yapısına bağlıydı; başlık artık .blog-hero içinde. */
.template-blogpage .blog-hero h1 {
    font-size: var(--step-page-title);
    line-height: 1.16;
}

/* --- Alt satır (giriş metni): daha ince, daha küçük ----------------- */
.template-standardpage .prose-card > .intro,
.template-contactpage .prose-card > .intro,
.template-appointmentpage .prose-card > .intro,
.template-blogpage .blog-body > .intro,
.listing__intro {
    font-size: var(--step-lead);
    font-weight: 400;
    line-height: 1.6;
}

/* --- Bölüm başlıkları sayfa başlığını GEÇMESİN --------------------- */
.template-treatmentpage .section__head h2,
.template-treatmentpage .split__body > h2,
.template-blogpage .blog-body > h2,
.template-blogpage .blog-body > .body-heading,
.template-standardpage .prose-card > h2,
.template-standardpage .prose-card > .body-heading,
.template-teampage .listing__group > h2,
.template-treatmentindexpage .listing__group > h2,
.template-videoindexpage .listing__group > h2 {
    font-size: var(--step-section-title);
    font-weight: 600;
    line-height: 1.3;
}

/* --- Bloklar arası boşluk: biraz sıkıldı --------------------------- *
 *  Başlık bloğunun altındaki boşluk 4rem'e kadar çıkıyordu; küçülen
 *  başlıkla birlikte orantısız kalıyordu. Bölüm dolgusuna (--pad-block)
 *  DOKUNULMADI: bantların nefesi sitenin kimliği.                      */
.template-treatmentpage .section__head,
.template-treatmentindexpage .section__head,
.template-blogindexpage .section__head {
    margin-bottom: clamp(1.6rem, 3.2vw, 2.4rem);
}
.template-standardpage .prose-card > h2,
.template-standardpage .prose-card > .body-heading,
.template-blogpage .blog-body > h2,
.template-blogpage .blog-body > .body-heading {
    margin-top: 1.8em;
    margin-bottom: 0.5em;
}
.template-teampage .listing__group,
.template-treatmentindexpage .listing__group,
.template-videoindexpage .listing__group {
    margin-top: clamp(1.8rem, 3.5vw, 2.8rem);
}

/* Instagram "bizi takip edin" kartı — Polikliniğimiz sayfası (2026-09-21).
   Yalnızca SUNUM: adres yine Ayarlar > Site görünümü > Sosyal medya'dan tek
   kaynaktan okunuyor, gömülü akış yok. Ölçüler sitenin kart dilinden
   (--paper, --paper-line, --radius); yeni değer uydurulmadı. */
.ig-kart {
    margin-top: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    padding: clamp(1.1rem, 0.9rem + 1vw, 1.5rem);
    background: var(--paper);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius);
    display: grid;
    gap: 0.5rem;
    justify-items: start;
}
.ig-kart__baslik {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--green-strong);
}

/* Kapak çerçeveyi kaplayabilsin diye konumlandırma bağlamı.
   Mevcut kurala dokunulmadı, üstüne eklendi. */
.contact-map-hero__frame { position: relative; overflow: hidden;
                           border-radius: var(--radius); }

/* Harita kapağı — tıkla-yükle (2026-09-21). Gömme ancak tıklanınca yüklenir;
   kapak, çerçevenin tamamını kaplayan bir düğmedir. Renkler ve yuvarlaklık
   sitenin mevcut kart dilinden. */
.harita-kapak {
    position: absolute;
    inset: 0;
    width: 100%;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.4rem;
    padding: 1.25rem;
    border: 0;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    text-align: center;
    font: inherit;
}
.harita-kapak:hover { background: var(--green-tint); }
.harita-kapak:focus-visible { outline: 2px solid var(--green-strong); outline-offset: -4px; }
.harita-kapak__isaret svg { width: 30px; height: 30px; color: var(--green-strong); }
.harita-kapak__metin { font-weight: 600; }
.harita-kapak__not { font-size: 0.85rem; color: var(--ink-soft); max-width: 26ch; }
.contact-map-hero__phone { margin: 0.35rem 0 0; font-size: 0.9rem; }
.contact-map-hero__phone a { color: var(--ink); }