/* =============================================================================
   DoctorsInTurkey site.css: the public design system (release C).
   RateMyAgent design language, measured tokens; our assets and words.
   Usage notes for every token and component: ops/DESIGN_SYSTEM.md.

   Loaded by layouts/site.php only. Never with main.css (shared class names,
   conflicting base rules) and never in layouts/admin*.php.

   NAMING, one convention:
     block    lowercase noun ................ .card .btn .pill .faq .pager
     part     block-part, inside its block .. .hero-card .rail-card .foot-col
     variant  block-variant, WITH the block . "btn btn-cyan"  "card card-lg"
     state    ARIA/native attributes first .. [aria-current] [aria-expanded]
              [aria-invalid] [open]; .is-open only where ARIA cannot say it
     utility  .h1-.h4 .sm .xs .lead .muted .strong .medium .stack .stack-4
              .visually-hidden
     JS hook  data-* only, never a class .... [data-menu-toggle] [data-lang]
                                              [data-consent] [data-anchornav]
     Hyphen-joined, no BEM underscores, no camelCase, no IDs in selectors.
     !important only in [hidden], .visually-hidden, reduced motion, print.
   Logical properties throughout, so a right-to-left language needs no
   second stylesheet.
   Breakpoints (literals; media queries cannot read custom properties):
     md 768px tablet . lg 1024px two columns, sticky rail . xl 1280px wide
   ========================================================================== */


/* 1. FONT: DM Sans, self-hosted (stage E5), so no page contacts Google for
   it. The two files Google Fonts serves for wght 400;500;700 (v17), fetched
   unchanged from https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap
   (fonts.gstatic.com/s/dmsans/v17/...): one variable file per subset holds
   all three weights. SIL Open Font License 1.1: assets/fonts/dm-sans/OFL.txt.
   latin-ext carries ğ ş İ (Turkish); latin carries ç ö ü ı. The layouts
   preload the latin file (and latin-ext on Turkish pages). A new version
   gets a new file name: /assets is cached for a year. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/dm-sans/dm-sans-v17-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/dm-sans/dm-sans-v17-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fallback: local Arial scaled per weight to DM Sans's width and line
   box, so the webfont swaps in without reflow (measurements: DESIGN_SYSTEM.md) */
@font-face {
  font-family: 'DM Sans Fallback';
  font-weight: 400;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
  size-adjust: 102.47%;
  ascent-override: 96.81%;
  descent-override: 30.25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'DM Sans Fallback';
  font-weight: 500;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
  size-adjust: 104.62%;
  ascent-override: 94.82%;
  descent-override: 29.63%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'DM Sans Fallback';
  font-weight: 700;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold');
  size-adjust: 101%;
  ascent-override: 98.22%;
  descent-override: 30.69%;
  line-gap-override: 0%;
}


/* 2. TOKENS ---------------------------------------------------------------- */
:root {
  /* type — swap the family here and nowhere else */
  --font-sans: 'DM Sans', 'DM Sans Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --fs-xs: .75rem;      --lh-xs: 1.125rem;     /* 12/18   captions, notes      */
  --fs-label: .8125rem; --lh-label: 1.1875rem; /* 13/19   field labels, form notes (D6: was a px literal) */
  --fs-sm: .875rem;     --lh-sm: 1.3125rem;    /* 14/21   pills, nav, meta     */
  --fs-md: .9375rem;    --lh-md: 1.4375rem;    /* 15/23   buttons, fields      */
  --fs-base: 1rem;      --lh-base: 1.625;      /* 16/26   body                 */
  --fs-lead: 1.0625rem; --lh-lead: 1.7;        /* 17      intro paragraphs     */
  --fs-h4: 1rem;        --lh-h4: 1.5rem;       /* 16/24 700                    */
  --fs-h3: 1.25rem;     --lh-h3: 1.71875rem;   /* 20/27.5 700 card title       */
  --fs-h2: 1.5rem;      --lh-h2: 1.18;         /* 24 -> 28/33.6 -> 32/37 500   */
  --fw-h2: 700;         --ls-h2: -0.42px;
  --fs-h1: 2rem;        --lh-h1: 1.15;         /* 32 -> 40 -> 48/56 700        */

  /* colour — brand. Release R2A (the owner's decision of 19.09.2026): the
     brand is teal #23B2B7 (--cyan: buttons, accents, icons, chips, the
     focus ring on the hero) in place of RateMyAgent's blue. The token names
     are kept so no selector changes; the values are all teal now:
     --blue is #23B2B7's hue darkened until text on white passes AA (links,
     headings, outline buttons, the focus ring on light surfaces), and
     --blue-dark darker still, for the large surfaces that carry white text
     (the hero card) and hover. #23B2B7 itself is 2.59:1 on white, so it
     never carries text on white and white text never sits on it. */
  --blue: #146467;
  --blue-dark: #105356;
  --text: #1A222C;
  --lightblue: #D6F1F2;
  --cyan: #23B2B7;
  --cyan-hover: #4CC4C8;
  --cyan-text: #072E30;
  --purple: #9A1BFF;
  --yellow: #FFD119;
  --green: #3D8C71;
  --lavender: #DDD1F7;
  --mint: #E3F5F4;

  /* colour — derived; every text pairing is AA (ops/DESIGN_SYSTEM.md) */
  --muted: #5A6676;
  --white: #FFFFFF;
  --page: #FFFFFF;
  --soft: #F2FAFA;
  --hairline: #E0F2F2;
  --dashed: #9ED7D9;
  --placeholder: #6B7689;
  --control-border: #6E8F91;     /* form-control edge, 3:1 on white */
  --mint-text: #0F4F46;
  --lavender-text: #2E1A5C;
  --green-text: #236B55;         /* --green is 4.05:1: large text and icons only */
  --danger: #B42318;
  --danger-soft: #FEF3F2;
  --danger-border: #FECDCA;      /* the edge of an error alert */
  --warning-text: #6B5200;
  --warning-soft: #FFF8DB;

  --focus-color: var(--blue);    /* on the hero it becomes --cyan (#23B2B7) */

  /* space — 4px base */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;

  /* radius */
  --r-card: 20px;
  --r-pill: 9999px;
  --r-btn: 100px;
  --r-join: 24px;
  --r-sm: 12px;
  --r-xs: 8px;

  /* elevation and card chrome */
  --shadow: 0 0 40px rgba(0, 0, 0, .10);
  --shadow-soft: 0 0 24px rgba(20, 100, 103, .08);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .14);
  /* what floats on the blue hero (the search bar, the showcase cards): deep
     enough to read on blue; the colour is --text */
  --shadow-float: 0 12px 32px rgba(26, 34, 44, .24);
  /* the dimmed page behind an open menu, and behind the consent dialog */
  --scrim: rgba(26, 34, 44, .32);
  --scrim-strong: rgba(26, 34, 44, .55);
  --border: 1px solid var(--lightblue);
  --pad-card: 16px;

  /* layout */
  --max: 1200px;
  --gutter: 16px;                 /* 24px from md */
  --headh: 64px;                  /* site header bar */
  --navh: 56px;                   /* sticky section bar (.anchors) */
  /* what stays pinned at the top: the header bar and its 1px hairline (not
     pinned below lg without JavaScript, where the menu is a row of links) */
  --sticky-head: calc(var(--headh) + 1px);
  /* where in-page links park: below the pinned header, and below the section
     bar on a page that has one */
  --scroll-offset: calc(var(--sticky-head) + 16px);
  --mcta-h: 96px;                 /* sticky bottom CTA, below lg */
  --panel-save-h: 8.5rem;         /* the sticky save bar at its tallest (its sentence on three lines at 320px); 5.5rem from md (Z1) */
  --search-h: 52px;               /* the hero search's fields and button: taller than a 44px .btn on purpose, the one field a visitor must not miss */

  /* breakpoints, for scripts (matchMedia); CSS uses the literals above */
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* motion */
  --dur-fast: .12s;
  --dur: .16s;

  /* stacking */
  --z-anchors: 40;
  --z-suggest: 45;               /* the search suggestion list: over the page, under the header */
  --z-header: 50;
  --z-mcta: 60;
  --z-pop: 70;
  --z-consent: 100;
  --z-menu: 105;                 /* the open menu (release R2A): over the consent bar and the bottom bar */
  --z-skip: 110;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --fs-h1: 2.5rem;  --lh-h1: 1.15;
    --fs-h2: 1.75rem; --lh-h2: 2.1rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-h1: 3rem;    --lh-h1: 3.5rem;
    --fs-h2: 2rem;    --lh-h2: 2.3125rem; --fw-h2: 500; --ls-h2: -0.2px;
  }
}


/* 3. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* in-page links (#lead included) stop below the sticky header and bar */
  scroll-padding-block-start: var(--scroll-offset);
}
html:has(.anchors) { --scroll-offset: calc(var(--sticky-head) + var(--navh) + 16px); }
/* Stage Z1 (WCAG 2.2 2.4.11): a control that takes focus is never left
   under what is pinned to the bottom: a long form's .panel-save, and below
   lg a profile's fixed .mcta. The browser scrolls a focused control above
   this padding. */
html:has(.panel-save) { scroll-padding-block-end: calc(var(--panel-save-h) + var(--s4)); }
@media (min-width: 768px) {
  :root { --panel-save-h: 5.5rem; }
}
@media (max-width: 1023px) {
  html:has(.mcta) { scroll-padding-block-end: calc(var(--mcta-h) + env(safe-area-inset-bottom) + var(--s4)); }
}
@media (max-width: 1023px) {
  html:not(.js) { --sticky-head: 0px; }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-inline-size: 100%; display: block; }
img { block-size: auto; }

h1, h2, h3, h4, h5, h6 { margin: 0; letter-spacing: -0.01em; }
/* a bare heading already has the system's size; a class (.h1-.h4) or a
   component rule overrides it */
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); letter-spacing: var(--ls-h2); color: var(--blue); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-bold); }
p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
/* links in running text are underlined: blue vs body text is only 2.1:1 */
:where(p, dd, .faq-ans, .prose li, .alert) a:not([class]) {
  text-decoration: underline;
  text-underline-offset: .15em;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

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

[hidden] { display: none !important; }

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

.skip {
  position: absolute;
  inset-inline-start: var(--s4);
  inset-block-start: -60px;
  z-index: var(--z-skip);
  background: var(--white);
  color: var(--blue);
  font-weight: var(--fw-bold);
  padding: 10px 18px;
  border-radius: var(--r-btn);
  transition: inset-block-start var(--dur) ease;
}
/* the shadow only while it is on screen: its 40px blur showed at the corner */
.skip:focus { inset-block-start: var(--s3); text-decoration: none; box-shadow: var(--shadow); }

.icon { flex: none; }
[dir="rtl"] .icon-flip { transform: scaleX(-1); }


/* 4. LAYOUT ---------------------------------------------------------------- */
.wrap {
  max-inline-size: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* content column + sticky rail (profiles, clinics) */
.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s6);
  padding-block: var(--s6) var(--s12);
}
.rail { display: grid; gap: var(--s4); align-content: start; }

@media (min-width: 1024px) {
  .cols { grid-template-columns: minmax(0, 1fr) 344px; gap: var(--s8); align-items: start; }
  .rail { position: sticky; inset-block-start: calc(var(--scroll-offset) + 4px); }
}
@media (min-width: 1280px) {
  .cols { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s12); }
}

/* responsive card grid: set --grid-min on the element to change the column width */
.grid {
  display: grid;
  gap: var(--grid-gap, var(--s4));
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 260px)), 1fr));
}

/* page-level section rhythm */
.band { padding-block: var(--s10); }
.band-soft { background: var(--soft); }
.band-head { margin-block-end: var(--s6); max-inline-size: 49.248em; }
.band-head .h2 + p { margin-block-start: var(--s2); }
@media (min-width: 768px) { .band { padding-block: var(--s12); } }

.stack > * + * { margin-block-start: var(--s3); }
.stack-4 > * + * { margin-block-start: var(--s4); }


/* 5. TYPE ------------------------------------------------------------------ */
/* Measures are in em, never ch (stage D5). A ch is the width of "0" in the
   font in use: 0.684em in DM Sans at 400 (0.704em at 700) but 0.570em in the
   metric-matched fallback, so a 60ch paragraph was 17% narrower until the
   webfont arrived and reflowed when it did (a layout shift on every first
   visit). Each value below is the old ch count times DM Sans's "0" at the
   element's weight, so the final layout is unchanged: 60ch = 41.04em. */
.h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); }
.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
  letter-spacing: var(--ls-h2);
  color: var(--blue);
}
.h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--text); }
.h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.sm { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.xs { font-size: var(--fs-xs); line-height: var(--lh-xs); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.muted { color: var(--muted); }
.strong { font-weight: var(--fw-bold); }
.medium { font-weight: var(--fw-medium); }


/* 6. COMPONENTS ------------------------------------------------------------ */

/* alert — flash messages and form-level notices */
.alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-medium);
}
.alert .icon { margin-block-start: 1px; }
.alert-info    { background: var(--soft); border-color: var(--lightblue); color: var(--cyan-text); }
.alert-success { background: var(--mint); color: var(--mint-text); }
.alert-warning { background: var(--warning-soft); color: var(--warning-text); }
.alert-error   { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }

/* anchors — sticky section bar with scrollspy (profiles, clinics) */
.anchors {
  position: sticky;
  inset-block-start: var(--sticky-head);
  z-index: var(--z-anchors);
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-block-end: 1px solid var(--hairline);
}
.anchors .wrap { padding-block: 10px; }
.anchors ul {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.anchors ul::-webkit-scrollbar { display: none; }
.anchors a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-radius: var(--r-pill);
  padding: 7px 18px;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
  border: 1px solid transparent;
}
.anchors a:hover { background: var(--soft); text-decoration: none; }
.anchors a[aria-current="true"] { background: var(--lightblue); color: var(--blue); font-weight: var(--fw-bold); }

/* avatar — round portrait or initials; set --av for other sizes */
.avatar {
  --av: 74px;
  inline-size: var(--av);
  block-size: var(--av);
  flex: 0 0 var(--av);
  border-radius: 50%;
  background: var(--lavender);
  color: var(--blue);
  display: grid;
  grid-template: 100% / 100%;    /* one cell, exactly the circle (D5: a portrait
                                    used to size an auto row to its own 2:3
                                    height and was drawn 74x111, centred) */
  place-items: center;
  overflow: hidden;
  font-size: 1.5rem;             /* initials: 24px on the 74px circle, a step of the type scale */
  font-weight: var(--fw-bold);
  letter-spacing: .5px;
  line-height: 1;
}
/* A portrait fills the circle; the crop favours the upper part, where the
   face is. A clinic logo is shown whole on its mint disc. */
.avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 25%; }
.ccard-av img { object-fit: contain; object-position: center; padding: 10%; }
.avatar-sm { --av: 48px; font-size: var(--fs-base); }
.avatar-lg { --av: 128px; font-size: 2.75rem; }
.avatar-ring { box-shadow: 0 0 0 4px rgba(255, 255, 255, .28); }
@media (min-width: 768px) { .avatar-lg { --av: 160px; font-size: 3.5rem; } }

/* breadcrumb */
.crumbs { padding-block-start: var(--s4); }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--muted);
}
.crumbs a { color: var(--muted); }
.crumbs [aria-current] { color: var(--text); font-weight: var(--fw-medium); }
.crumbs li + li::before { content: "/"; content: "/" / ""; margin-inline-end: 6px; opacity: .6; }

/* buttons — 44px touch height; .btn-sm is RateMyAgent's 36px */
.btn {
  min-block-size: 44px;
  padding: 0 24px;
  border-radius: var(--r-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  font-weight: var(--fw-bold);
  text-align: center;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) ease, background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-cyan { background: var(--cyan); color: var(--cyan-text); }
.btn-cyan:hover { background: var(--cyan-hover); }
.btn-blue { background: var(--blue); color: var(--white); }
.btn-blue:hover { background: var(--blue-dark); }
.btn-outline { background: var(--white); color: var(--blue); border-color: var(--lightblue); }
.btn-outline:hover { background: var(--soft); }
.btn-ghost-light { color: var(--white); border-color: rgba(255, 255, 255, .55); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .14); }
.btn-sm { min-block-size: 36px; padding: 0 20px; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.btn-block { inline-size: 100%; }
/* RateMyAgent's "Join" button, used with .btn: radius 24px, padding 4px 16px */
.btn-join {
  min-block-size: 36px;
  padding: 4px 16px;
  border-radius: var(--r-join);
  border-color: var(--lightblue);
  background: var(--white);
  color: var(--blue);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  white-space: nowrap;
}
.btn-join:hover { background: var(--soft); }

/* card, section */
.card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--pad-card);
}
a.card { display: block; color: inherit; transition: border-color var(--dur-fast) ease; }
a.card:hover { text-decoration: none; border-color: var(--cyan); }
.card-lg { padding: var(--s5); }
@media (min-width: 768px) { .card-lg { padding: var(--s6); } }
.sec + .sec { margin-block-start: var(--s6); }
@media (min-width: 1024px) { .sec + .sec { margin-block-start: var(--s8); } }
.sec-head { margin-block-end: var(--s4); }
.sec-head .h2 + p { margin-block-start: var(--s2); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-block-end: 6px;
}
.eyebrow::before {
  content: "";
  inline-size: 18px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--purple);
}

/* chips — links and filters on white; .pill is the on-blue equivalent */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 36px;
  padding: 8px 24px;             /* the measured pill (D6: was 6px 16px) */
  border-radius: var(--r-pill);
  border: 1px solid var(--lightblue);
  background: var(--white);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-medium);
}
a.chip:hover, button.chip:hover { background: var(--soft); border-color: var(--cyan); text-decoration: none; }
/* a chip that is a choice (a radio inside the label, e.g. a review's rating):
   the chosen one is filled, the focus ring goes round the chip (stage D6) */
label.chip { cursor: pointer; }
label.chip:hover { border-color: var(--cyan); }
label.chip:has(:focus-visible) { outline: 3px solid var(--focus-color); outline-offset: 2px; }
.chip[aria-current="true"], .chip[aria-current="page"], .chip[aria-current="step"], .chip[aria-pressed="true"], label.chip:has(:checked) {
  background: var(--lightblue);
  border-color: var(--lightblue);
  color: var(--blue);
  font-weight: var(--fw-bold);
}

/* contact channels */
.chan { display: grid; gap: var(--s3); }
.chan-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--s3);
  align-items: center;
  border: var(--border);
  border-radius: var(--r-sm);
  padding: 12px;
}
.chan-ico {
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--mint);
  color: var(--mint-text);
}
.chan-ico-blue { background: var(--lightblue); color: var(--cyan-text); }
a.chan-row { color: var(--text); transition: border-color var(--dur-fast) ease; }
a.chan-row:hover { border-color: var(--cyan); text-decoration: none; }
/* the label/value wrapper, not :last-child: an external chan-row has a
   trailing visually-hidden "(opens in a new tab)" span after it, which would
   otherwise become :last-child instead and leave this one inline */
.chan-row > span:nth-child(2) { display: grid; min-inline-size: 0; }
.chan-k { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--muted); }
.chan-v { font-size: var(--fs-base); line-height: 24px; font-weight: var(--fw-bold); font-style: normal; letter-spacing: .02em; overflow-wrap: anywhere; }

/* empty state — honest, always with a way out */
.empty {
  border: 1px dashed var(--dashed);
  border-radius: var(--r-sm);
  background: var(--soft);
  padding: var(--s5) var(--s4);
  text-align: center;
}
.empty .icon { margin-inline: auto; color: var(--cyan); }
.empty .h4 { color: var(--text); margin-block-start: 8px; }
.empty p:not(.h4) {
  margin-block-start: 6px;
  margin-inline: auto;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--muted);
  max-inline-size: 35.568em;
}
.empty .btn, .empty .chips { margin-block-start: var(--s4); }
.empty .chips { justify-content: center; }

/* facts — label/value tiles (dl) */
.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.fact { border: var(--border); border-radius: var(--r-sm); padding: 12px 14px; background: var(--white); }
.fact dt { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--muted); font-weight: var(--fw-medium); }
.fact dd { margin-block-start: 2px; font-size: var(--fs-md); line-height: 22px; font-weight: var(--fw-bold); }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* FAQ disclosure */
.faq { border-block-start: 1px solid var(--hairline); }
.faq details { border-block-end: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding-block: 16px;
  padding-inline: 0 40px;
  position: relative;
  font-size: var(--fs-base);
  line-height: 24px;
  font-weight: var(--fw-bold);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 8px;
  inset-block-start: 50%;
  inline-size: 10px;
  block-size: 10px;
  margin-block-start: -7px;
  border-inline-end: 2px solid var(--blue);
  border-block-end: 2px solid var(--blue);
  transform: rotate(45deg);
  transition: transform var(--dur) ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-block-start: -3px; }
.faq-ans { padding-block-end: 18px; font-size: var(--fs-md); line-height: 24px; color: var(--muted); max-inline-size: 45.144em; }

/* forms */
.form { display: grid; gap: var(--s3); }
/* align-content: start (stage E3) keeps a label on its control when a field
   sits beside a taller one in a .row2 (a hint or an error under only one of
   them); a grid's rows otherwise stretched and pushed the shorter field's
   control down */
.field { display: grid; gap: 6px; align-content: start; }
.field label, .field-label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-bold); }
.field-hint { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--muted); font-weight: var(--fw-regular); }
/* a group of choices is a fieldset.field with legend.field-label (stage D6) */
fieldset.field { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
fieldset.field > legend { padding: 0; margin-block-end: 6px; }
.field :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  inline-size: 100%;
  min-block-size: 46px;
  font-family: inherit;
  font-size: var(--fs-md);
  line-height: 22px;
  color: var(--text);
  background-color: var(--white);
  border: 1px solid var(--control-border);
  border-radius: var(--r-sm);
  padding: 11px 13px;
}
.field :is(input, select, textarea):hover { border-color: var(--blue); }
.field :is(input, select, textarea):focus-visible { border-color: var(--blue); outline-offset: 1px; }
.field :is(input, textarea)::placeholder { color: var(--placeholder); opacity: 1; }
.field textarea { min-block-size: 104px; resize: vertical; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23146467' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
[dir="rtl"] .field select { background-position: left 14px center; }
.field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger); }
.field-error {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: var(--fw-medium);
  color: var(--danger);
}
.field-error .icon { flex: none; margin-block-start: 2px; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
@media (min-width: 768px) { .row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* star-input — a classic 5-star radio picker (the open review's overall
   rating, replacing the .chip row). This page never loads main.css /
   legacy.css, whose own .star-input is a different design system, so this
   is the same technique (radios in DOM order 5..1, mirrored to read 1..5
   left to right, a general-sibling selector fills every star at or before
   the hovered/checked one) rebuilt on site.css's own tokens: real radios
   stay tab/arrow-key navigable, same as the .chip row they replace. The
   mirroring is `direction: rtl`, not `flex-direction: row-reverse`: only
   `direction` also flips the browser's own left/right arrow-key traversal
   of the radio group, so keyboard order stays in sync with what's drawn
   (row-reverse only reorders paint, leaving arrow keys backwards against
   the visual 1..5 layout). fill: currentColor on the filled stars only is
   the .dcard-rating idiom; an unfilled star keeps the icon's own outline
   stroke. */
.star-input { display: flex; direction: rtl; justify-content: flex-end; gap: var(--s1); }
.star-input .star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  border-radius: var(--r-xs);
  color: var(--placeholder);
  cursor: pointer;
}
.star-input input:checked ~ .star,
.star-input .star:hover,
.star-input .star:hover ~ .star {
  color: var(--cyan);
}
.star-input input:checked ~ .star .icon,
.star-input .star:hover .icon,
.star-input .star:hover ~ .star .icon {
  fill: currentColor;
}
.star-input input:focus-visible + .star {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}

/* upload — a restyled native file input (the visit document): the real
   <input type="file"> stays the control (keyboard, screen readers),
   visually hidden; a label styled as .btn/.btn-outline opens the file
   picker and a small readout beside it names the chosen file
   (assets/js/site.js, progressive: the field still posts and uploads the
   same file without it). The dashed frame reuses .empty's own tokens, not
   new ones. A real, reusable class -- reviews/_open_fields.php and
   reviews/document.php both use it. */
.upload {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px dashed var(--dashed);
  border-radius: var(--r-sm);
  background: var(--soft);
}
.upload > .icon { flex: none; color: var(--blue); }
.upload-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); flex: 1 1 auto; min-inline-size: 0; }
.upload-name { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); overflow-wrap: anywhere; }
.upload:has(input:focus-visible) .btn { outline: 3px solid var(--focus-color); outline-offset: 2px; }
.upload-invalid { border-color: var(--danger-border); background: var(--danger-soft); }
.check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--muted);
}
.check input { inline-size: 20px; block-size: 20px; margin: 1px 0 0; accent-color: var(--blue); }
.check a { text-decoration: underline; text-underline-offset: .15em; }
.form-note {
  background: var(--mint);
  border-radius: var(--r-sm);
  padding: 12px;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--mint-text);
}

/* hero — the blue card that opens a page */
.hero { margin-block: var(--s4) var(--s6); }
/* the reference's three soft circles, as gradients: round at every width.
   The teal one stays at .08: over it a .pill keeps 4.5:1 and the #23B2B7
   focus ring 3:1 (at .16 they were 4.43 and 2.74; ops/design/contrast.py) */
.hero-card {
  --focus-color: var(--cyan);
  position: relative;
  overflow: hidden;
  background-color: var(--blue-dark);
  background-image:
    radial-gradient(circle clamp(140px, 19vw, 230px) at 90% 13%, rgba(255, 255, 255, .06) 99.5%, transparent 100%),
    radial-gradient(circle clamp(100px, 14vw, 165px) at 80% 87%, rgba(35, 178, 183, .08) 99.5%, transparent 100%),
    radial-gradient(circle clamp(80px, 11vw, 135px) at 15% 97%, rgba(221, 209, 247, .07) 99.5%, transparent 100%);
  border-radius: var(--r-card);
  color: var(--white);
  padding: var(--s6);
}
.hero-inner { position: relative; display: grid; gap: var(--s5); }
.hero h1, .hero .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); color: var(--white); }
.hero-sub { font-size: var(--fs-lead); line-height: var(--lh-lead); color: rgba(255, 255, 255, .92); max-inline-size: 41.04em; }
.hero-actions { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.hero-id { display: flex; gap: var(--s5); align-items: center; flex-wrap: wrap; }
.hero-id-text { min-inline-size: min(100%, 260px); }
.hero-name-row { display: flex; align-items: center; gap: var(--s3); }
.hero-name-row h1 { min-inline-size: 0; }
.hero-fav { flex-shrink: 0; }
.hero-fav .btn { padding: 0; inline-size: 44px; }
.hero-spec { margin-block-start: 6px; font-size: var(--fs-base); line-height: 24px; font-weight: var(--fw-medium); color: rgba(255, 255, 255, .92); }
.hero-place {
  margin-block-start: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: rgba(255, 255, 255, .88);
}
.hero-note { margin-block-start: 10px; font-size: var(--fs-xs); line-height: var(--lh-xs); color: rgba(255, 255, 255, .80); max-inline-size: 31.464em; }
@media (min-width: 768px) { .hero-card { padding: var(--s8); } }
@media (min-width: 1280px) { .hero-card { padding: var(--s10) var(--s8); } }

/* list — table-free rows: title and meta, with a value or action at the end */
.list { border-block-start: 1px solid var(--hairline); }
.list-row {
  display: grid;
  gap: var(--s2);
  padding-block: 14px;
  border-block-end: 1px solid var(--hairline);
}
.list-main { min-inline-size: 0; }
.list-main > * + * { margin-block-start: 2px; }
.list-side { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); }
.list-side.strong { color: var(--text); }
@media (min-width: 768px) {
  .list-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s4); }
  .list-side { text-align: end; }
}

/* map — only ever a real map or a real image; the note sits below it */
/* inline-size is set so the 220px minimum height stretches the frame instead
   of being carried over to its width through the aspect ratio (a 352px-wide
   map on a 375px phone, stage D6) */
.map { inline-size: 100%; border-radius: var(--r-sm); overflow: hidden; border: var(--border); background: var(--mint); aspect-ratio: 16 / 10; min-block-size: 220px; }
.map > iframe, .map > img { display: block; inline-size: 100%; block-size: 100%; border: 0; object-fit: cover; }
.map-note { margin-block-start: 8px; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--muted); }
/* the map on request (stage E5, partials/site/map): the box holds a static
   placeholder until "Haritayı göster" puts Google's frame in it (site.js 8);
   without JavaScript the button is hidden and "Haritada aç" is the way */
.map-ph { display: grid; align-content: center; justify-items: center; gap: var(--s2); block-size: 100%; padding: var(--s4); text-align: center; color: var(--mint-text); }
.map-ph-place { font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-medium); max-inline-size: 30em; }
.map-ph-note { font-size: var(--fs-xs); line-height: var(--lh-xs); max-inline-size: 30em; }
html:not(.js) .map-show { display: none; }
.map-open { display: inline-flex; align-items: center; gap: 4px; color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.addr { display: grid; gap: 2px; font-size: var(--fs-md); line-height: 23px; font-style: normal; }

/* sticky bottom CTA — visible below lg, where the rail is not yet sticky */
.mcta {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-mcta);
  background: var(--white);
  border-block-start: 1px solid var(--lightblue);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .10);
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  display: grid;
  gap: 6px;
}
.mcta > * { inline-size: 100%; max-inline-size: 560px; margin-inline: auto; }
/* release R2A: the doctor's own channels, phone and WhatsApp, side by side */
.mcta-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s2); }
body:has(.mcta) { padding-block-end: calc(var(--mcta-h) + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) {
  .mcta { display: none; }
  body:has(.mcta) { padding-block-end: 0; }
}

/* note — where a piece of information comes from (was .src in the reference) */
.note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-block-start: var(--s4);
  padding: 10px 12px;
  background: var(--soft);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--muted);
}
.note .icon { margin-block-start: 2px; color: var(--cyan); }

/* pager — public pagination (App\Support\Pager) */
.pager { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; justify-content: center; margin-block-start: var(--s8); }
.pager ol { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pager a, .pager [aria-current], .pager-gap {
  display: inline-grid;
  place-items: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding-inline: 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.pager a { border: var(--border); background: var(--white); color: var(--text); }
.pager a:hover { background: var(--soft); border-color: var(--blue); text-decoration: none; }
.pager [aria-current] { background: var(--blue); color: var(--white); font-weight: var(--fw-bold); }
.pager-gap { min-inline-size: 24px; padding-inline: 0; color: var(--muted); }
.pager .pager-step { display: inline-flex; gap: 6px; font-weight: var(--fw-bold); color: var(--blue); }
@media (max-width: 767px) {
  /* numbers on their own row, previous and next under them at either end */
  .pager { justify-content: space-between; }
  .pager ol { order: -1; flex-basis: 100%; justify-content: center; }
}

/* photo frame — holds a real photo; .ph-shimmer sweeps while something loads */
.ph {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  border: 1px dashed var(--dashed);
  background: linear-gradient(135deg, rgba(214, 241, 242, .55) 0%, rgba(227, 245, 244, .55) 100%);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s4);
  min-block-size: 132px;
}
.ph > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.ph:has(> img) { border-style: solid; border-color: var(--lightblue); padding: 0; }
.ph .icon { color: var(--cyan); opacity: .75; margin-inline: auto; }
.ph-txt { margin-block-start: 8px; font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-bold); color: var(--cyan-text); max-inline-size: 16.894em; }
.ph-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: sweep 3.2s ease-in-out infinite;
}
@keyframes sweep { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
.cap { margin-block-start: 8px; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--muted); }
.gal { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.gal .ph { min-block-size: 150px; }
/* a real photo keeps its thumbnail's 3:2 frame (stage D6) */
.gal .ph:has(> img) { min-block-size: 0; aspect-ratio: 3 / 2; }
@media (min-width: 768px) { .gal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* pills — on blue surfaces (hero); rows of them */
.pillrow { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  gap: 6px;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  padding: 8px 24px;
  background: rgba(255, 255, 255, .20);
  color: var(--white);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
/* a lighter fill would drop white text below 4.5:1, so hover draws a ring */
a.pill:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65); text-decoration: none; }
.pill-label { font-size: var(--fs-xs); line-height: var(--lh-xs); color: rgba(255, 255, 255, .80); margin-inline-end: 2px; }

/* procedure / service tiles */
.proc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.proc { border: var(--border); border-radius: var(--r-sm); padding: 14px; background: var(--white); }
.proc-featured { border-color: var(--warning-text); }
.proc-featured > .tag { margin-block-end: 8px; }
.proc h3, .proc .h4 { font-size: var(--fs-base); line-height: 24px; font-weight: var(--fw-bold); }
.proc p { margin-block-start: 4px; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); }
.proc .tag { margin-block-start: 10px; }
/* Stage I3: a profile procedure's methods, one row of tags under its name
   (the row keeps the offset; its wrapped tags only the row gap). */
.proc .tags { margin-block-start: 10px; }
.proc .tags .tag { margin-block-start: 0; }
@media (min-width: 768px) { .proc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* prose — long text: legal pages, About texts, blog posts */
.prose { max-inline-size: 47.88em; }
.prose > * + * { margin-block-start: 1em; }
.prose h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--text); margin-block-start: 1.6em; }
.prose h3 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-bold); margin-block-start: 1.4em; }
.prose ul { list-style: disc; padding-inline-start: 1.4em; }
.prose ol { list-style: decimal; padding-inline-start: 1.4em; }
.prose li + li { margin-block-start: .4em; }
.prose table { border-collapse: collapse; inline-size: 100%; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.prose th, .prose td { border: 1px solid var(--hairline); padding: 8px 10px; text-align: start; vertical-align: top; }
.prose th { background: var(--soft); font-weight: var(--fw-bold); }
.table-scroll { overflow-x: auto; }

/* rail — the sticky contact card beside a profile */
.rail-top { display: flex; gap: var(--s3); align-items: center; }
.rail-actions { display: grid; gap: var(--s2); margin-block-start: var(--s4); }
.rail-who { margin-block-start: var(--s3); font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--muted); }
.rail-mini { border: var(--border); border-radius: var(--r-card); padding: var(--pad-card); background: var(--soft); }

/* steps — numbered how-it-works tiles */
.steps { counter-reset: step; display: grid; gap: var(--s3); }
.step {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
  border: var(--border);
  border-radius: var(--r-sm);
  padding: 14px;
}
.step-n {
  counter-increment: step;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  background: var(--lightblue);
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
.step-n::before { content: counter(step); }
.step h3 { font-size: var(--fs-md); line-height: 22px; font-weight: var(--fw-bold); }
.step p { margin-block-start: 2px; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* in the narrow rail the steps stay one column at every width (D6) */
.rail .steps { grid-template-columns: minmax(0, 1fr); }
.rail .step { background: var(--white); }

/* status — a page that reports a state instead of content: not found (the
   404 view) and the server-error page (App\Support\ServerErrorPage). The
   large code is decoration (aria-hidden); the heading says what happened */
.status { padding-block: var(--s12) var(--s16); text-align: center; }
.status-code {
  font-size: clamp(4.5rem, 16vw, 7.5rem);
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  color: var(--lightblue);
}
.status h1 { margin-block-start: var(--s3); font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--text); }
.status p {
  margin: var(--s3) auto 0;
  max-inline-size: 35.568em;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--muted);
}
.status > .icon { margin-inline: auto; color: var(--green); }   /* a state that went well: "request received" (D6) */
.status-actions { margin-block-start: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }
/* Below 360px the two buttons fill the row one above the other in any font:
   side by side they fitted in DM Sans and not in the fallback, so they
   jumped when the webfont arrived (D5). */
@media (max-width: 359px) { .status-actions .btn { inline-size: 100%; } }
.status .chips { margin-block-start: var(--s6); justify-content: center; }

/* tags — small labels on white (working areas, statuses) */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--mint);
  color: var(--mint-text);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: var(--fw-medium);
}
.tag-lav { background: var(--lavender); color: var(--lavender-text); }
.tag-blue { background: var(--lightblue); color: var(--cyan-text); }
/* a state: waiting, or gone wrong (an order's payment status, D6) */
.tag-warning { background: var(--warning-soft); color: var(--warning-text); }
.tag-danger { background: var(--danger-soft); color: var(--danger); }

/* timeline — education and career */
.tl { position: relative; padding-inline-start: 24px; }
.tl::before {
  content: "";
  position: absolute;
  inset-inline-start: 5px;
  inset-block: 6px;
  inline-size: 2px;
  background: var(--lightblue);
  border-radius: 2px;
}
.tl li { position: relative; }
.tl li + li { margin-block-start: var(--s5); }
.tl li::before {
  content: "";
  position: absolute;
  inset-inline-start: -24px;
  inset-block-start: 7px;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--blue);
}
.tl-when { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--muted); font-weight: var(--fw-bold); letter-spacing: .04em; }
.tl-what { margin-block-start: 2px; font-size: var(--fs-base); line-height: 24px; font-weight: var(--fw-bold); }
.tl-who { margin-block-start: 2px; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); }

/* --- directory components (stage D3) ------------------------------------- */

/* search — a query, an optional city and one button: a plain GET form to the
   doctor listing, so it works without JavaScript. [data-suggest] on the query
   field is where the suggestion list attaches. The form is its own container:
   stacked when narrow, query over city + button from 520px, one white pill
   bar from 680px. The focus ring is drawn inside each white field, so it
   reads on the blue hero and inside the white bar alike. */
.search { container: search / inline-size; }
.search-in { display: grid; gap: var(--s2); }
.search-field {
  position: relative;
  display: flex;
  align-items: center;
  min-inline-size: 0;
  background: var(--white);
  border-radius: var(--r-sm);
  color: var(--text);
}
.search-field > .icon { position: absolute; inset-inline-start: 16px; color: var(--cyan); pointer-events: none; }
.search-field :is(input, select) {
  inline-size: 100%;
  min-block-size: var(--search-h);
  margin: 0;
  border: 0;
  border-radius: inherit;
  background-color: transparent;
  padding-block: 12px;
  padding-inline: 48px 16px;
  font-size: var(--fs-base);
  line-height: 24px;
  color: var(--text);
  outline: none;
  text-overflow: ellipsis;
}
.search-field input::placeholder { color: var(--placeholder); opacity: 1; }
.search-field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-inline-end: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23146467' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}
[dir="rtl"] .search-field select { background-position: left 16px center; }
.search-field:focus-within { box-shadow: inset 0 0 0 3px var(--blue); }
.search-go { min-block-size: var(--search-h); }
/* on a phone the field icons give way, so the whole placeholder fits */
@container search (max-width: 399px) {
  .search-field > .icon { display: none; }
  .search-field :is(input, select) { padding-inline: 12px 8px; }
  .search-field select { padding-inline-end: 36px; }
  .search-field input::placeholder { font-size: var(--fs-md); }
}
@container search (min-width: 520px) {
  .search-in { grid-template-columns: minmax(0, 1fr) auto; }
  .search-q { grid-column: 1 / -1; }
}
@container search (min-width: 680px) {
  .search-in {
    --focus-color: var(--blue);
    grid-template-columns: minmax(0, 1fr) minmax(0, 12rem) auto;
    gap: 0;
    padding: 6px;
    background: var(--white);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-float);
  }
  .search-q { grid-column: auto; }
  .search-field { border-radius: var(--r-pill); }
  .search-q input { padding-inline-end: 10px; }
  .search-city { border-inline-start: 1px solid var(--hairline); border-radius: 0; }
  .search-city select { padding-inline: 44px 34px; background-position: right 14px center; }
  [dir="rtl"] .search-city select { background-position: left 14px center; }
  .search-city:focus-within { border-radius: var(--r-sm); }
  .search-go { padding-inline: 24px; }
}

/* showcase — the profile cards floating in the home hero
   (partials/site/hero_showcase.php, data from App\Support\HeroShowcase).
   Sample cards are decoration; the note under them says so. In a row under
   the search below 1280px (two on a phone), floating beside it from 1280px.
   They move by transform only and stand still under reduced motion. */
.showcase-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.showcase-list > :nth-child(n+3) { display: none; }
.pcard { container: pcard / inline-size; }
.pcard-in {
  display: flex;
  flex-direction: column;
  gap: 8px;
  block-size: 100%;
  padding: 12px;
  background: var(--white);
  color: var(--text);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-float);
}
a.pcard-in:hover { text-decoration: none; box-shadow: var(--shadow-float), 0 0 0 2px var(--cyan); }
.pcard-av .icon { color: var(--cyan); }
.pcard-body { display: grid; gap: 2px; min-inline-size: 0; }
.pcard-bar {
  display: block;
  inline-size: 72%;
  block-size: 10px;
  margin-block: 5px 7px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--lightblue), var(--soft));
}
/* the sample card is an abstract picture: three bars, the lower two shorter */
.showcase-sample .pcard-body { flex: 1; }
.pcard-bar + .pcard-bar { inline-size: 56%; block-size: 8px; margin-block: 0 7px; }
.pcard-bar + .pcard-bar + .pcard-bar { inline-size: 40%; }
.pcard-name { font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-bold); }
.pcard-spec { font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-bold); color: var(--blue); }
.pcard-meta { display: flex; gap: 5px; align-items: flex-start; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--muted); }
.pcard-meta .icon { flex: none; margin-block-start: 2px; color: var(--cyan); }
@container pcard (min-width: 210px) {
  .pcard-in { flex-direction: row; align-items: flex-start; gap: 12px; }
}
.showcase-note {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-block-start: var(--s3);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: rgba(255, 255, 255, .88);
}
.showcase-note .icon { flex: none; margin-block-start: 2px; }
/* a phone shows one sample card, full width (so a row: circle beside the
   bars, 76 px instead of two 132 px columns), and the procedure chips under
   the hero come back onto the first screen (stage E5). Real profiles keep
   their two cards. */
@media (max-width: 479px) {
  .showcase-sample .showcase-list { grid-template-columns: minmax(0, 1fr); }
  .showcase-sample .showcase-list > :nth-child(n+2) { display: none; }
}
@media (min-width: 600px) {
  .showcase-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .showcase-list > :nth-child(3) { display: block; }
}
@media (min-width: 1280px) {
  .showcase { position: relative; min-block-size: 420px; display: flex; flex-direction: column; justify-content: flex-end; }
  .showcase-list { display: block; position: absolute; inset: 0 0 56px; }
  .pcard { position: absolute; inline-size: 252px; }
  .pcard-1 { inset-block-start: 0; inset-inline-start: 0; }
  .pcard-2 { inset-block-start: 124px; inset-inline-end: 0; }
  .pcard-3 { inset-block-start: 248px; inset-inline-start: 12px; }
  .showcase-note { margin-block-start: 0; }
  /* real profiles: no note under them, and only as tall as the cards */
  .showcase:not(.showcase-sample) { min-block-size: 360px; }
  .showcase:not(.showcase-sample) .showcase-list { inset-block-end: 0; }
  .showcase:not(.showcase-sample):not(:has(.pcard-3)) { min-block-size: 236px; }
  .showcase:not(.showcase-sample):not(:has(.pcard-2)) { min-block-size: 112px; }
}
@media (prefers-reduced-motion: no-preference) {
  .pcard { animation: pcard-float 5.4s ease-in-out infinite alternate; }
  .pcard-2 { animation-delay: -1.8s; }
  .pcard-3 { animation-delay: -3.6s; }
}
@keyframes pcard-float { from { transform: translateY(0); } to { transform: translateY(-8px); } }

/* dcard — the doctor result card (partials/site/doctor_card.php): portrait
   or initials, name, specialty, city and clinic, languages, up to three
   working areas, and one link ("Profili İncele") that covers the card */
.dgrid { --grid-min: 280px; }
/* used with .card (class="card dcard"): the card's surface, radius, border,
   shadow and padding come from .card; this is only the layout (D6) */
.dcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  block-size: 100%;
  transition: border-color var(--dur-fast) ease;
}
.dcard:hover, .dcard:focus-within { border-color: var(--cyan); }
.dcard-head { display: flex; gap: var(--s3); align-items: center; }
.dcard-id { min-inline-size: 0; }
.dcard-name { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); color: var(--text); overflow-wrap: anywhere; }
.dcard-spec { margin-block-start: 2px; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-medium); color: var(--blue); }
.dcard-facts { display: grid; gap: 6px; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); }
.dcard-facts li { display: flex; gap: 8px; align-items: flex-start; }
.dcard-facts .icon { flex: none; margin-block-start: 2px; color: var(--cyan); }
/* release R2B: "Profili İncele", and with a WhatsApp number a second link
   that sits above the card's cover link, so both can be clicked */
.dcard-actions { display: grid; gap: var(--s2); margin-block-start: auto; }
/* the link covers the whole card; a lift on hover would move the cover with it */
.dcard-cta:hover { transform: none; }
.dcard-cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.dcard-alt { position: relative; z-index: 1; }

/* growing — the doctor area while no doctor (or clinic) is published
   (partials/site/directory_empty.php): since release R2A only its picture,
   three abstract profile rows into which a check comes in turn while the
   bars shimmer. No text, no form (a listing's section keeps one visually
   hidden heading). aria-hidden, CSS only, a fixed size (no layout shift);
   it animates at every width, phones included, and under reduced motion it
   stands still in its final state: every row checked. data-system keeps
   legacy.css out of it on the old pages. */
.growing { display: grid; justify-items: center; padding-block: var(--s2); color: var(--text); font-family: var(--font-sans); text-align: start; }
.growing-art {
  display: grid;
  gap: 8px;
  inline-size: 100%;
  max-inline-size: 360px;
  padding: 12px;
  background: var(--white);
  border: var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
}
.grow-row { display: flex; align-items: center; gap: 12px; block-size: 56px; padding-inline: 10px; border-radius: var(--r-sm); background: var(--soft); }
.grow-av { flex: none; inline-size: 36px; block-size: 36px; border-radius: 50%; background: var(--lightblue); }
.grow-lines { flex: 1; display: grid; gap: 7px; }
.grow-lines > span { position: relative; overflow: hidden; display: block; block-size: 8px; border-radius: var(--r-pill); background: var(--lightblue); }
.grow-lines > span:first-child { inline-size: 72%; }
.grow-lines > span:last-child { inline-size: 46%; }
.grow-ok { flex: none; display: grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 50%; background: var(--green); color: var(--white); }
@media (prefers-reduced-motion: no-preference) {
  .grow-row { animation: grow-row 7.2s ease-in-out infinite both; }
  .grow-row-2, .grow-row-2 .grow-ok { animation-delay: 1.2s; }
  .grow-row-3, .grow-row-3 .grow-ok { animation-delay: 2.4s; }
  .grow-ok { animation: grow-ok 7.2s cubic-bezier(.2, .7, .2, 1) infinite both; }
  .grow-lines > span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    transform: translateX(-100%);
    animation: sweep 2.6s ease-in-out infinite;
  }
}
@keyframes grow-ok {
  0%, 12% { transform: scale(0); }
  20%, 84% { transform: scale(1); }
  92%, 100% { transform: scale(0); }
}
/* the row lifts a little as its check arrives, so the motion reads on a phone */
@keyframes grow-row {
  0%, 12%, 30%, 100% { transform: translateY(0); box-shadow: none; }
  18% { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
}

/* --- doctor-facing components (stage D6) ----------------------------------- */

/* plan — a package on /pricing: what it is, its price, what it includes and
   one action at the foot of the card, so two plans side by side line up */
.plans { max-inline-size: 880px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: var(--s4); block-size: 100%; }
.plan .eyebrow { margin-block-end: calc(-1 * var(--s3)); }
.plan-price { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); letter-spacing: var(--ls-h2); color: var(--text); }
.plan-price-text { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.plan-per { margin-inline-start: 4px; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-medium); color: var(--muted); }
.plan-list { display: grid; gap: var(--s2); }
.plan-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-md); line-height: var(--lh-md); }
.plan-list .icon { flex: none; margin-block-start: 3px; color: var(--green); }
.plan > .btn { margin-block-start: auto; }

/* checkout — the order's steps: a numbered heading per group of fields, the
   company fields only while "company" is chosen (CSS :has, no script; a
   browser without :has shows both groups), the summary in the rail */
.checkout-form { counter-reset: step; }
.checkout-group { display: grid; gap: var(--s3); }
.checkout-group + .checkout-group { padding-block-start: var(--s5); border-block-start: 1px solid var(--hairline); }
.checkout-group > h2 { display: flex; align-items: center; gap: 10px; }
.checkout-form:has(input[name="invoice_type"][value="corporate"]:checked) .checkout-individual,
.checkout-form:has(input[name="invoice_type"][value="individual"]:checked) .checkout-corporate { display: none; }
.checkout-pay > iframe { display: block; inline-size: 100%; min-block-size: 640px; border: 0; }

/* ctile — a city with its short introduction; the name links the tile */
.ctiles { --grid-min: 300px; }
/* used with .card (class="card ctile"), like .dcard */
.ctile {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px var(--s3);
  align-content: start;
  block-size: 100%;
  transition: border-color var(--dur-fast) ease;
}
.ctile:hover, .ctile:focus-within { border-color: var(--cyan); }
.ctile-name { grid-column: 1; font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); }
.ctile-link { color: var(--text); }
.ctile-link:hover { text-decoration: none; }
.ctile-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ctile-text { grid-column: 1; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); }
.ctile > .icon { grid-column: 2; grid-row: 1; align-self: center; color: var(--cyan); }

/* a row of chips that scrolls sideways on a phone instead of wrapping into
   a column of rows; the room above and below keeps focus rings unclipped */
@media (max-width: 767px) {
  .chips-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding: 6px var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .chips-scroll::-webkit-scrollbar { display: none; }
  .chips-scroll > li { flex: none; }
}

/* three steps side by side from lg; a link under a band */
@media (min-width: 1024px) { .steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.band-more { margin-block-start: var(--s6); }

/* --- search suggestions (stage D4) --------------------------------------- */

/* suggest — the typed suggestions under a [data-suggest] search field
   (site.js builds it: an ARIA listbox of grouped options, the input a
   combobox). It must not be clipped by the hero card it opens from. */
.search { position: relative; }
.hero-card:has([data-suggest]) { overflow: visible; }
.suggest {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + 8px);
  z-index: var(--z-suggest);
  max-block-size: min(26rem, 62vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  background: var(--white);
  color: var(--text);
  border: var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-pop);
  text-align: start;
}
.suggest-group + .suggest-group { margin-block-start: 4px; padding-block-start: 4px; border-block-start: 1px solid var(--hairline); }
.suggest-h {
  padding: 8px 10px 4px;
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.suggest-opt {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-block-size: 48px;
  padding: 6px 10px;
  border-radius: var(--r-xs);
  cursor: pointer;
}
.suggest-opt:hover { background: var(--soft); }
.suggest-opt[aria-selected="true"] { background: var(--lightblue); }
.suggest-ico {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--blue);
}
.suggest-opt[aria-selected="true"] .suggest-ico { background: var(--white); }
.suggest-txt { display: grid; min-inline-size: 0; }
.suggest-label { font-size: var(--fs-md); line-height: 22px; font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.suggest-label mark { background: none; color: inherit; font-weight: var(--fw-bold); }
.suggest-hint { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--muted); overflow-wrap: anywhere; }
.suggest-opt[aria-selected="true"] .suggest-hint { color: var(--text); }

/* --- listing components (stage D4) ---------------------------------------- */

/* hero-main — the text and search column of a page's blue hero; .hero-list
   is the shorter hero of a listing page (/doctors, specialty, city, clinics) */
.hero-main { display: grid; gap: var(--s3); max-inline-size: 56rem; }
.hero-main .search { margin-block-start: var(--s2); }
.hero-list { margin-block-end: var(--s4); }
/* on a phone the card's padding gives way, so the owner's placeholder fits */
@media (max-width: 399px) { .hero-list .hero-card { padding: var(--s4); } }

/* .search-solo — the query field and the button, no city field */
@container search (min-width: 520px) {
  .search-solo .search-in { grid-template-columns: minmax(0, 1fr) auto; }
  .search-solo .search-q { grid-column: auto; }
}
@container search (min-width: 680px) {
  .search-solo .search-in { grid-template-columns: minmax(0, 1fr) auto; }
}

/* facets — a listing's filters as pills (partials/site/facets.php): a short
   label and a native select (or a checkbox) in one rounded control, light
   blue while a value is chosen. In the owner's order; wraps on a phone. */
.facets { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.facet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 44px;
  max-inline-size: 100%;
  padding-inline-start: 18px;
  border: 1px solid var(--lightblue);
  border-radius: var(--r-pill);
  background: var(--white);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.facet:hover { border-color: var(--blue); }
.facet-k { color: var(--muted); font-weight: var(--fw-medium); white-space: nowrap; cursor: pointer; }
.facet select {
  appearance: none;
  -webkit-appearance: none;
  field-sizing: content;
  min-inline-size: 0;
  max-inline-size: min(16rem, 62vw);
  min-block-size: 42px;
  margin: 0;
  border: 0;
  border-radius: var(--r-pill);
  padding-block: 0;
  padding-inline: 2px 38px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23146467' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px;
  color: var(--text);
  font: inherit;
  font-weight: var(--fw-bold);
  text-overflow: ellipsis;
  cursor: pointer;
}
[dir="rtl"] .facet select { background-position: left 16px center; }
/* the ring goes round the whole pill, not the select inside it */
.facet :is(select, input):focus-visible { outline: none; }
.facet:has(:is(select, input):focus-visible) { outline: 3px solid var(--focus-color); outline-offset: 2px; }
.facet-set { background: var(--lightblue); border-color: var(--lightblue); }
.facet-set .facet-k, .facet-set select { color: var(--blue); }
.facet-check { gap: 10px; padding-inline: 16px 18px; cursor: pointer; font-weight: var(--fw-medium); color: var(--text); }
.facet-check input { flex: none; inline-size: 18px; block-size: 18px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.facet-check.facet-set { color: var(--blue); font-weight: var(--fw-bold); }
/* without JavaScript the filters apply with this button; with it, on change,
   except after a keyboard change, which shows it again (site.js, stage D6) */
.js .facets-apply:not([data-shown]) { display: none; }

/* results — the result count, the sort, the filters in effect */
.results { padding-block-end: var(--s4); }
/* the living empty state under a listing's hero: the page's section rhythm
   (40 / 48 px with the hero's own 16), not the result bar's 16 (stage E5);
   padding, because a margin would collapse into the hero's */
.results > .growing { padding-block-start: var(--s6); }
@media (min-width: 768px) { .results > .growing { padding-block-start: var(--s8); } }
.results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3) var(--s4);
  margin-block: var(--s6) var(--s4);
}
.results-count { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--text); }
.results-page { margin-inline-start: var(--s3); font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-medium); color: var(--muted); }
.filters-on { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-block-end: var(--s5); }
.filters-on-k { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); }
.chip-on { background: var(--lightblue); border-color: var(--cyan); color: var(--blue); font-weight: var(--fw-bold); }
a.chip-on:hover { background: var(--white); border-color: var(--cyan); }
.chip-n { color: var(--muted); font-weight: var(--fw-medium); }
.chip-n::before { content: "·"; content: "·" / ""; margin-inline-end: 6px; }
.filters-clear {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: .15em;
}
.empty-results { padding: var(--s8) var(--s4); }
.empty-results .h4 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.empty p.empty-k { margin-block-start: var(--s6); font-weight: var(--fw-bold); color: var(--text); }

/* ccard — a clinic card (partials/site/clinic_card.php): the doctor card's
   frame, with the clinic's logo or initials, city, doctors and specialties */
.ccard .dcard-spec { display: flex; align-items: center; gap: 6px; color: var(--muted); font-weight: var(--fw-medium); }
.ccard .dcard-spec .icon { color: var(--cyan); }
.ccard-av { background: var(--mint); color: var(--mint-text); }

/* stile — a specialty: its introduction, its procedures and how many doctors
   it lists; the name's link covers the tile (/specialties) */
.stiles { --grid-min: 300px; }
/* used with .card (class="card stile"), like .dcard */
.stile {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px var(--s3);
  align-content: start;
  block-size: 100%;
  transition: border-color var(--dur-fast) ease;
}
.stile:hover, .stile:focus-within { border-color: var(--cyan); }
.stile-ico {
  grid-row: 1 / span 4;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  background: var(--lightblue);
  color: var(--blue);
}
.stile > :not(.stile-ico) { grid-column: 2; }
.stile-name { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.stile-link { color: var(--text); }
.stile-link:hover { text-decoration: none; }
.stile-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.stile-text { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); }
.stile-procs { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--muted); }
.stile-count, .ctile-count { margin-block-start: var(--s2); font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-bold); color: var(--blue); }
.ctile-count { grid-column: 1; }
.stile-none, .ctile-none { color: var(--muted); font-weight: var(--fw-medium); }

/* the result card's approved-review average (DoctorCard::rating()) */
.dcard-rating { display: flex; align-items: center; gap: 6px; margin-block-start: 4px; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); }
.dcard-rating .icon { color: var(--cyan); fill: currentColor; }
.dcard-rating strong { color: var(--text); }
/* Stage I3: the profile's review average, the star beside the text (svg is
   display:block by default, which put the star on a line of its own). */
.rating-line { display: flex; align-items: center; gap: 8px; }
.rating-line .icon { color: var(--cyan); fill: currentColor; }

/* stage I2: the searched or filtered procedure the doctor lists, on its own
   line with a check (DoctorCard 'match'); "Telefon Et" beside WhatsApp on
   the procedure and category pages, with whose line it is */
.dcard-match { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-bold); color: var(--blue); }
.dcard-match .icon { flex: none; margin-block-start: 2px; }
.dcard-owner { font-size: var(--fs-xs); font-weight: var(--fw-medium); }

/* choose — what a search means, before its results (stage I2;
   partials/site/search_intent): the prompt, then the choices as chips (a
   procedure chip with how many doctors it gives); .choose-note for a
   condition, whose operations and branches follow as explicit choices,
   each under a .choose-k line. A soft panel, not an alert: nothing is wrong */
.choose {
  display: grid;
  gap: var(--s3);
  margin-block-end: var(--s4);
  padding: var(--s4);
  border: var(--border);
  border-radius: var(--r-sm);
  background: var(--soft);
}
.choose-q { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-md); line-height: var(--lh-md); font-weight: var(--fw-bold); color: var(--text); }
.choose-q .icon { flex: none; margin-block-start: 2px; color: var(--blue); }
.choose-note .choose-q { font-weight: var(--fw-medium); }
.choose-k { font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-medium); color: var(--muted); }
.choose .chips + .choose-k { margin-block-start: var(--s1); }

/* the suggestion list's chooser group (stage I2): the server's prompt in
   sentence case instead of the uppercase group label */
.suggest-choose .suggest-h { text-transform: none; letter-spacing: normal; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text); padding-block: 10px 6px; }

/* the honest empty result's quiet "clear everything" (stage I2) */
.empty p.empty-clear { margin-block-start: var(--s4); }

/* a landing page's procedures (branch and category pages, stage I2): the
   section between the hero and the doctors; its filter bar then opens the
   results section */
.page-procs { padding-block: var(--s2) var(--s6); border-block-end: 1px solid var(--hairline); }
.page-procs .band-head { margin-block-end: var(--s4); }
.page-branches { margin-block: var(--s4) 0; }
.results > form:first-child + .facets { margin-block-start: var(--s6); }

/* hub-sub — a disclosure of procedures (the treatments hub, a branch
   page's groups; stage I2): the group's name and how many procedures it
   holds in the summary, the chevron of .faq, inside a link to the group's
   own page and the procedure chips. Native <details>, no JavaScript */
.hub-subs { border-block-start: 1px solid var(--hairline); }
.hub-subs > li { border-block-end: 1px solid var(--hairline); }
.hub-sub summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-block-size: 44px;
  padding-block: 10px;
  padding-inline: 0 32px;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.hub-sub summary::-webkit-details-marker { display: none; }
.hub-sub summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 8px;
  inset-block-start: 50%;
  inline-size: 9px;
  block-size: 9px;
  margin-block-start: -6px;
  border-inline-end: 2px solid var(--blue);
  border-block-end: 2px solid var(--blue);
  transform: rotate(45deg);
  transition: transform var(--dur) ease;
}
.hub-sub[open] summary::after { transform: rotate(-135deg); margin-block-start: -2px; }
.hub-sub summary:hover { color: var(--blue); }
.hub-sub-body { display: grid; gap: var(--s3); padding-block: 2px var(--s4); }
.hub-n { flex: none; font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-medium); color: var(--muted); }
.hub-open { display: inline-flex; align-items: center; gap: 6px; min-block-size: 36px; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-bold); }
.hub-only { border-block: 1px solid var(--hairline); }
.proc-chips .chip { padding-inline: 16px; }


/* 7. SITE SHELL ------------------------------------------------------------ */

/* header — pinned to the top while the page scrolls (--sticky-head); the
   page's scroll padding keeps in-page targets below it */
.site {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background: var(--white);
  border-block-end: 1px solid var(--hairline);
}
.site-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
  min-block-size: var(--headh);
}
.logo { display: inline-flex; align-items: center; flex: none; border-radius: var(--r-xs); }
.logo img { block-size: 36px; inline-size: auto; }
.site-tools { display: flex; align-items: center; gap: var(--s2); margin-inline-start: auto; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); align-items: center; }
.site-nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
}
.site-nav a:not(.btn):hover { color: var(--blue); }
.site-nav a[aria-current="page"] {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.site-nav-extra { display: none; }
.site-account { display: none; }

.menu-toggle {
  display: inline-grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border: 1px solid var(--lightblue);
  border-radius: 50%;
  background: var(--white);
  color: var(--blue);
}
.menu-toggle:hover { background: var(--soft); }
.menu-toggle .icon-close, .menu-toggle[aria-expanded="true"] .icon-menu { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* below lg: a panel opened by the menu button; a row of links without JS.
   Release R2A: the panel carries the same items as the bar from 1024 px, in
   its order (the three items, then "Yorumlarım" as a quiet link and
   "Doktorlar İçin"), every row at least 52 px tall. While it is open the
   header rises above every sticky or fixed bar (the profile's bottom bar,
   the consent bar on the notices: --z-menu), the page under it is dimmed,
   inert and does not scroll (html.menu-open, site.js), and a short or
   landscape screen scrolls the panel itself. */
@media (max-width: 1023px) {
  .site-nav { order: 3; flex-basis: 100%; padding-block-end: var(--s2); }
  html:not(.js) .site { position: relative; }
  html:not(.js) .site-nav-quiet { display: block; }
  .js .site-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    max-block-size: calc(100vh - var(--sticky-head));
    max-block-size: calc(100dvh - var(--sticky-head));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s2) var(--gutter) calc(var(--s5) + env(safe-area-inset-bottom));
    background: var(--white);
    border-block-end: 1px solid var(--hairline);
    box-shadow: var(--shadow-pop);
  }
  .js .site.is-open { z-index: var(--z-menu); }
  .js .site.is-open .site-nav { display: block; }
  /* the page under an open menu is inert: dim it, and a click on it closes
     the menu (site.js) */
  .js .site.is-open::after {
    content: "";
    position: fixed;
    inset: var(--sticky-head) 0 0;
    z-index: -1;
    background: var(--scrim);
  }
  .js .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .js .site-nav li + li { border-block-start: 1px solid var(--hairline); }
  .js .site-nav a:not(.btn) { inline-size: 100%; min-block-size: 52px; font-size: var(--fs-base); }
  .js .site-nav-extra { display: block; }
  .js .site-nav .site-nav-quiet { margin-block-start: var(--s2); }
  .js .site-nav-quiet a:not(.btn) { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--muted); }
  .js .site-nav .site-nav-join { padding-block-start: var(--s3); border-block-start: 0; }
  .js .site-nav-join .btn { inline-size: 100%; min-block-size: 48px; }
  html:not(.js) .menu-toggle { display: none; }
}
html.menu-open, html.menu-open body { overflow: hidden; }
/* "Doktorlar İçin" is in the bar from 420px and in the menu panel below it,
   never in both */
@media (max-width: 419px) {
  .js .site-tools .btn-join { display: none; }
}
@media (min-width: 420px) and (max-width: 1023px) {
  .js .site-nav .site-nav-join { display: none; }
}
@media (min-width: 1024px) {
  .site-bar { flex-wrap: nowrap; gap: var(--s8); }
  .site-tools { gap: var(--s3); }
  /* "Yorumlarım": a quiet utility link between the language and
     "Doktorlar İçin" */
  .site-account {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: 4px;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--muted);
  }
  .site-account:hover { color: var(--blue); }
  .site-account[aria-current="page"] { color: var(--blue); text-decoration: underline; text-underline-offset: 6px; }
  .menu-toggle { display: none; }
}

/* language switcher — <details>, works without JavaScript */
.lang { position: relative; }
.lang summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 36px;
  padding: 4px 12px;
  border-radius: var(--r-join);
  border: 1px solid transparent;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.lang summary::-webkit-details-marker { display: none; }
.lang abbr { text-decoration: none; }
.lang summary:hover, .lang[open] summary { background: var(--soft); border-color: var(--lightblue); }
.lang[open] summary .icon-chevron-down { transform: rotate(180deg); }
.lang-menu {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 6px);
  z-index: var(--z-pop);
  min-inline-size: 180px;
  padding: 6px;
  background: var(--white);
  border: var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-pop);
}
.lang-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-block-size: 44px;
  padding-inline: 12px;
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
}
.lang-menu a:hover { background: var(--soft); text-decoration: none; }
.lang-menu a[aria-current="true"] { color: var(--blue); font-weight: var(--fw-bold); }

/* flash messages under the header */
.flash { padding-block-start: var(--s4); }

/* footer */
.foot { margin-block-start: var(--s12); background: var(--soft); border-block-start: 1px solid var(--hairline); }
/* a page that ends on a soft band meets the footer without a white seam */
main:has(> .band-soft:last-child) + .foot { margin-block-start: 0; }
.foot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s8) var(--s4);
  padding-block: var(--s10) var(--s8);
}
/* below lg the brand block spans the row and the link lists pair up */
.foot-brand { grid-column: 1 / -1; display: grid; gap: var(--s3); align-content: start; max-inline-size: 27.36em; }
.foot-brand .logo img { block-size: 40px; }
.foot-h { font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-bold); letter-spacing: normal; color: var(--text); margin-block-end: var(--s2); }
.foot-col li + li { margin-block-start: 2px; }
.foot-col a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 32px;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--muted);
}
.foot-col a:hover { color: var(--blue); }
.foot-contact { display: grid; gap: 6px; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); font-style: normal; }
.foot-contact a, .foot-contact span { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--muted); }
.foot-contact .icon { margin-block-start: 2px; color: var(--cyan); }
.foot-contact a:hover { color: var(--blue); }
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s6);
  justify-content: space-between;
  align-items: center;
  padding-block: var(--s4) var(--s8);
  border-block-start: 1px solid var(--hairline);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--muted);
}
.foot-langs ul { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.foot-langs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 32px;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--muted);
}
.foot-langs a:hover { color: var(--blue); }
.foot-langs a[aria-current="true"] { color: var(--text); font-weight: var(--fw-bold); }
.foot-langs .icon { color: var(--cyan); }
@media (min-width: 768px) {
  .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s8) var(--s6); }
}
@media (min-width: 1024px) {
  .foot-grid { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: var(--s6); }
  .foot-brand { grid-column: auto; }
}

/* KVKK consent — a dialog over the page, as release A's overlay was; since
   stage E4 with two equal answers, Accept and Decline (.consent-actions) */
.consent {
  position: fixed;
  inset: 0;
  z-index: var(--z-consent);
  display: grid;
  align-items: end;
  justify-items: center;
  padding: var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
  background: var(--scrim-strong);
  overflow-y: auto;
}
.consent-box {
  inline-size: 100%;
  max-inline-size: 520px;
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  padding: var(--s6);
  display: grid;
  gap: var(--s3);
}
.consent-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-sm); }
.consent-links a { text-decoration: underline; text-underline-offset: .15em; }
.consent form { margin-block-start: var(--s2); }
/* the two answers: the same button at the same size, side by side */
.consent-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
body.consent-open { overflow: hidden; }
@media (min-width: 768px) { .consent { align-items: center; } }
/* on the notices the dialog links to (/kvkk, /privacy, /cookies) the same
   form is a bar: the last thing in the page, pinned to the bottom of the
   window while there is page below it, so it never covers the end of the
   text and nothing behind it is blocked (stage D6) */
.consent-bar {
  position: sticky;
  inset: auto 0 0;
  display: block;
  padding: 0;
  background: var(--white);
  border-block-start: 1px solid var(--lightblue);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .10);
  overflow: visible;
}
.consent-bar .consent-box {
  max-inline-size: var(--max);
  margin-inline: auto;
  padding: var(--s4) var(--gutter) calc(var(--s4) + env(safe-area-inset-bottom));
  border-radius: 0;
  box-shadow: none;
  gap: var(--s2);
}
.consent-bar .consent-box .h3 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.consent-bar form { margin-block-start: var(--s1); }
@media (min-width: 768px) {
  .consent-bar .consent-box { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s6); align-items: center; }
  .consent-bar .consent-box > :not(form) { grid-column: 1; }
  .consent-bar form { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
}
/* on the cookie policy, once answered, the same question in the page, with
   the answer in force, to change it (stage E4): no overlay, no bar, a card
   under the policy's card */
.consent-inline {
  position: static;
  display: block;
  padding: 0;
  margin-block-start: var(--s6);
  background: none;
  overflow: visible;
}
.consent-inline .consent-box { max-inline-size: none; box-shadow: var(--shadow); border: var(--border); }
.consent-inline .consent-box > p { max-inline-size: 47.88em; }
@media (min-width: 768px) { .consent-inline .consent-actions { max-inline-size: 420px; } }

/* "Devamını oku" — a service card's excerpt button and the dialog it opens
   with the full description (app/Views/doctors/show.php, #services;
   site.js §10). Unlike .consent above (a full-screen gate) this is a small
   content popup, so it is not made to cover the page instantly: opacity and
   a small translate/scale both animate on open and close. Without
   JavaScript the button stays hidden and only the excerpt prints. */
.svc-more {
  margin-inline-start: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
html:not(.js) .svc-more { display: none; }
.svc-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--z-consent);
  display: grid;
  align-items: center;
  justify-items: center;
  padding: var(--s4);
  background: var(--scrim-strong);
  overflow-y: auto;
  opacity: 0;
  transition: opacity var(--dur) ease-in-out;
}
.svc-dialog[hidden] { display: none; }
.svc-dialog-box {
  inline-size: 100%;
  max-inline-size: 480px;
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  padding: var(--s6);
  display: grid;
  gap: var(--s3);
  transform: translateY(10px) scale(.98);
  transition: transform var(--dur) ease-in-out;
}
.svc-dialog.is-open { opacity: 1; }
.svc-dialog.is-open .svc-dialog-box { transform: translateY(0) scale(1); }
.svc-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.svc-dialog-head .h4 { margin: 0; }
.svc-dialog-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.svc-dialog-close:hover { background: var(--soft); color: var(--text); }
body.svc-dialog-open { overflow: hidden; }


/* 8. PAGES ----------------------------------------------------------------- */

/* home — hero with the search and the floating profile cards, the procedure
   chips, then bands (app/Views/home/index.php) */
.home-hero-grid { display: grid; gap: var(--s6); align-items: center; }
.home-hero-main { display: grid; gap: var(--s4); }
.home-hero .search { margin-block-start: var(--s2); }
@media (max-width: 399px) { .home-hero .hero-card { padding: var(--s4); } }
@media (min-width: 1280px) {
  .home-hero-grid { grid-template-columns: minmax(0, 1fr) 290px; gap: var(--s8); }
}
/* the broad treatment categories under the hero (release R2A): city tiles
   (.card .ctile) in a fixed 2 / 3 / 6 column grid, a quiet heading and the
   "Tüm tedaviler" link */
.home-cats { padding-block: 0 var(--s8); }
.home-cats-title { margin-block-end: var(--s3); font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-bold); letter-spacing: normal; color: var(--text); }
.cattiles { --grid-gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cattiles .ctile { align-content: center; min-block-size: 64px; }
.cattiles .ctile-name { font-size: var(--fs-md); line-height: var(--lh-md); }
@media (min-width: 600px) { .cattiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cattiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.home-cats-all { margin-block-start: var(--s3); }
.home-cats-all a { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; font-weight: var(--fw-medium); }
/* the doctor area with nothing published: the picture alone, centred */
.growing-home { padding-block: var(--s2); }

/* discover — the home page's "Ne arıyorsunuz?" grid: four .stile cards (the
   specialty hub's own icon-and-name tile, ops/DESIGN_SYSTEM.md), fixed at
   1 / 2 / 4 columns so the four destinations read as one set instead of
   wrapping arbitrarily. */
.discover-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) { .discover-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .discover-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.discover-more { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 2px; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-bold); color: var(--blue); }
.discover-more .icon { color: var(--cyan); }

/* about — the "what is this platform" band: the page-opening hero card's own
   background, radial gradient and white type, reused mid-page instead of a
   new dark surface. The art is three of the how-it-works steps as icon
   chips, in flow (no absolute positioning, so nothing to overflow at a
   narrow width) — never photos, so nothing here can be mistaken for a real
   patient or doctor. */
.about-grid { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 1024px) { .about-grid { grid-template-columns: minmax(0, 1fr) 260px; gap: var(--s8); } }
.about-title { color: var(--white); margin-block-end: var(--s2); }
.about-card .hero-sub + .hero-sub { margin-block-start: var(--s3); }
.about-card .hero-actions { margin-block-start: var(--s5); }
.about-art { display: grid; gap: var(--s3); }
.about-chip {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-float);
  color: var(--text);
}
.about-chip:nth-child(2) { margin-inline-start: var(--s6); }
.about-chip:nth-child(3) { margin-inline-start: var(--s3); }
.about-chip .icon { flex: none; color: var(--cyan); }
.about-chip span { font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-bold); }

/* hub — "Tedaviler ve Uzmanlıklar" (/specialties, stage I2): the broad
   treatment categories as cards (the icon of .stile, the name's link, how
   many doctors, the .hub-sub disclosures), then every branch in columns,
   sub-branches indented under their main branch */
.hub-grid { --grid-min: 320px; }
.hub-cat { display: grid; gap: var(--s3); align-content: start; }
.hub-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s3); align-items: center; }
.hub-name { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.hub-name a { color: var(--text); }
.hub-name a:hover { color: var(--blue); }
.hub-head .stile-count { margin-block-start: 0; }
.hub-branches { columns: 1; column-gap: var(--s8); }
.hub-branches > li { break-inside: avoid; padding-block: 4px; }
.hub-branches a { display: inline-flex; align-items: center; min-block-size: 32px; font-weight: var(--fw-bold); }
.hub-branches ul { margin-block: 2px 4px; padding-inline-start: var(--s4); border-inline-start: 2px solid var(--lightblue); }
.hub-branches ul a { font-weight: var(--fw-medium); }
@media (min-width: 600px) { .hub-branches { columns: 2; } }
@media (min-width: 1024px) { .hub-branches { columns: 3; } }
.home-faq .faq, .faq-page .faq { max-inline-size: 860px; }

/* pricing — from 1024 px the two packages share the page's width (the
   880 px row left its right third empty at 1280 px), and each card is as tall
   as what it says, so the institutions' shorter card has no empty stretch
   above its button (stage E5) */
@media (min-width: 1024px) {
  .pricing-plans { max-inline-size: none; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .pricing-plans > .plan { block-size: auto; }
}

/* member pages — sign-in, registration and the password pages are one
   narrow card; the member area's pages share a row of chips and the e-mail
   verification tag (app/Views/auth, app/Views/account; stage D6) */
.auth-wrap { max-inline-size: 640px; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); }
.account-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.account-card { max-inline-size: 760px; }
.account-doc { display: flex; align-items: center; gap: var(--s3); }

/* panel — the doctor and the clinic panels (layouts/panel.php; stage E3).
   The screens are a row of .chip links (scrolling sideways on a phone, as
   .chips-scroll does) that becomes a column beside the page from 1024px.
   .panel-head: a page's (or a card's) title with its actions at the end.
   .panel-id: a portrait (or logo) beside its text. .panel-save: the save
   button of a long form, kept in reach at the bottom of the window while
   the form scrolls. Everything inside is the system's own: .card, .form,
   .field, .list, .facts, .steps, .tag, .empty, .alert. */
.panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding-block-start: var(--s4); }
.panel-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-content: start; min-inline-size: 0; }
.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s3) var(--s4);
}
.panel-head > :first-child { flex: 1 1 18em; min-inline-size: 0; }
.panel-head .muted { margin-block-start: var(--s1); }
.panel-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.panel-id { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.panel-id > div { flex: 1 1 14em; min-inline-size: 0; }
.panel-save {
  position: sticky;
  inset-block-end: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--white);
  border: var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-pop);
}
.panel-save p { flex: 1 1 16em; }
@media (min-width: 1024px) {
  .panel { grid-template-columns: 232px minmax(0, 1fr); gap: var(--s8); align-items: start; padding-block-start: var(--s6); }
  .panel-nav { position: sticky; inset-block-start: calc(var(--sticky-head) + var(--s6)); }
  .panel-nav .chips { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .panel-nav .chip { display: flex; border-color: transparent; padding-inline: 14px; }
  .panel-nav a.chip:hover { border-color: var(--lightblue); }
}


/* 9. MOTION, FORCED COLOURS, PRINT ----------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .ph-shimmer::after { display: none; }
  .btn:hover { transform: none; }
}

@media (forced-colors: active) {
  .btn, .btn-join, .chip, .pill, .tag, .pager a, .menu-toggle, .facet { border: 1px solid ButtonText; }
  .suggest-opt[aria-selected="true"] { outline: 2px solid Highlight; }
  .hero-card, .card, .consent-box, .pcard-in, .growing-art, .choose { border: 1px solid CanvasText; }
  .search-field:focus-within { outline: 2px solid Highlight; }
}

@media print {
  .anchors, .mcta, .rail, .skip, .menu-toggle, .lang, .consent, .site-nav, .showcase, .growing-art, .growing-ask, .suggest, .facets, .search, .panel-nav, .panel-save { display: none !important; }
  .card, .hero-card { box-shadow: none; }
  .hero-card { background: none; color: var(--text); border: 1px solid var(--lightblue); }
  .hero h1, .hero .h1, .hero-spec, .hero-place, .hero-sub { color: var(--text); }
  body:has(.mcta) { padding-block-end: 0; }
}