/* ============================================================
   KURT CLINIC — DESIGN TOKENS
   Direction 3 — "Dikkatli Not / The Considered Note"
   ============================================================ */
:root{
  /* brand — do not change */
  --navy:#223249;
  --green:#19B480;

  /* derived + support surfaces */
  --navy-soft:#5B6B7D;
  --navy-faint:#647282;
  --ink:#1B2733;
  --paper:#FFFFFF;
  --warm:#FAF7F2;
  --green-tint:#EEF7F3;
  --hairline:rgba(34,50,73,.14);
  --hairline-strong:rgba(34,50,73,.30);
  --green-ink:#0F7E5C;

  /* type */
  --font-body:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* layout */
  --container:1240px;
  --measure:64ch;
  --radius:3px;
  --gap:24px;

  /* motion */
  --ease:cubic-bezier(.4,0,.2,1);
  --speed-fast:180ms;
  --speed-med:320ms;
  --speed-slow:480ms;
}

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

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
figure{ margin:0; }
input{ font:inherit; color:inherit; }

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-weight:400;
}

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

.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--navy); color:#fff; padding:10px 16px;
  border-radius:var(--radius); font-size:.9rem; transition:top var(--speed-fast) var(--ease);
}
.skip-link:focus{ top:12px; }

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

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.wrap{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,64px);
}
.section{ padding-block:clamp(56px,9vw,120px); position:relative; scroll-margin-top:96px; }
.section--tight{ padding-block:clamp(40px,6vw,72px); }
.section--loose{ padding-block:clamp(72px,12vw,152px); }
.surface-paper{ background:var(--paper); }
.surface-warm{ background:var(--warm); }
.surface-tint{ background:var(--green-tint); }
.surface-navy{ background:var(--navy); color:#fff; }

.measure{ max-width:var(--measure); }

.mono{
  font-family:var(--font-mono);
  letter-spacing:.06em;
}
.kicker{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--navy-soft);
  display:flex;
  align-items:center;
  gap:.6em;
  margin-bottom:1.1em;
}
.kicker::before{
  content:"";
  width:14px; height:1px; background:var(--hairline-strong);
  display:inline-block;
}
.surface-navy .kicker{ color:rgba(255,255,255,.65); }
.surface-navy .kicker::before{ background:rgba(255,255,255,.35); }

.xref{
  font-family:var(--font-mono);
  font-size:.82rem;
  letter-spacing:.02em;
  display:inline-flex;
  align-items:center;
  gap:.4em;
  color:var(--navy-soft);
  text-decoration:none;
  border-bottom:1px solid var(--hairline-strong);
  padding-bottom:2px;
  transition:color var(--speed-fast) var(--ease), border-color var(--speed-fast) var(--ease);
}
.xref:hover, .xref:focus-visible{ color:var(--green-ink); border-color:var(--green); }

.hr{
  border:0; border-top:1px solid var(--hairline);
  margin:0;
}

.section-head{ max-width:46rem; margin-bottom:clamp(26px,4vw,44px); }
.section-head h2{
  font-size:clamp(1.7rem,1.1rem + 2vw,2.7rem);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.15;
  margin-bottom:.5em;
}
.section-lede{
  color:var(--navy-soft);
  font-size:clamp(1rem,.95rem + .3vw,1.15rem);
  max-width:38rem;
}
.micro-note{
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.02em;
  color:var(--navy-faint); margin-top:.9em;
}

/* links used as calls to action — never a filled pill button */
.link-cta{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:500; color:var(--navy);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid var(--navy);
  transition:gap var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease), border-color var(--speed-fast) var(--ease);
}
.link-cta:hover, .link-cta:focus-visible{ gap:.8em; color:var(--green-ink); border-color:var(--green); }
.link-cta.small{ font-size:.92rem; }
.link-quiet{
  color:var(--navy-soft); text-decoration:underline; text-decoration-color:var(--hairline-strong);
  text-underline-offset:4px; font-size:.95rem;
  transition:text-decoration-color var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease);
}
.link-quiet:hover, .link-quiet:focus-visible{ color:var(--navy); text-decoration-color:var(--green); }

/* reveal-on-scroll */
/* No CSS-based hiding here by design. .reveal content is visible by
   default (ordinary flow, no opacity rule needed). If — and only if —
   site.js successfully executes past its own try/catch, it applies a
   transient inline opacity/transform to a .reveal element immediately
   before observing it, then clears it on intersect. If site.js never
   loads, errors, or is blocked, nothing here ever hides content. */

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--hairline);
  transition:padding var(--speed-med) var(--ease);
}
.header-inner{
  max-width:var(--container);
  margin-inline:auto;
  padding:22px clamp(20px,5vw,64px);
  display:flex; align-items:center; gap:clamp(14px,2vw,32px);
  transition:padding var(--speed-med) var(--ease);
}
.site-header.is-condensed .header-inner{ padding-block:12px; }

.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; flex-shrink:0; }
.brand-logo{ height:24px; width:auto; transition:height var(--speed-med) var(--ease); flex-shrink:0; }
.site-header.is-condensed .brand-logo{ height:19px; }
.brand-divider{ width:1px; height:22px; background:var(--hairline-strong); flex-shrink:0; }
.brand-doctor{
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.01em;
  color:var(--navy-soft); white-space:nowrap; flex-shrink:0;
}

.primary-nav{ margin-left:auto; min-width:0; }
.primary-nav ul{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px clamp(7px,1vw,16px); }
.primary-nav a{
  font-size:.89rem; text-decoration:none; color:var(--navy);
  padding-bottom:4px; border-bottom:1px solid transparent;
  transition:border-color var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease);
  white-space:nowrap;
}
.primary-nav a:hover, .primary-nav a:focus-visible{ border-color:var(--green); }

.header-quick-contact{ display:flex; align-items:center; gap:2px; margin-left:clamp(8px,1.4vw,18px); flex-shrink:0; }
.header-icon-link{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:6px 8px;
  font-size:.82rem; font-weight:500; color:var(--navy); text-decoration:none;
  border-radius:var(--radius); white-space:nowrap;
  transition:background var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease);
}
.header-icon-link:hover, .header-icon-link:focus-visible{ background:var(--warm); }
.header-icon-whatsapp{ color:var(--green-ink); }
@media (max-width:400px){
  .header-icon-link{ font-size:.72rem; padding:6px 4px; min-width:44px; }
}

.header-cta{
  font-size:.85rem; text-decoration:none; color:var(--navy); font-weight:500;
  border-bottom:1px solid var(--navy); padding-bottom:3px; white-space:nowrap; flex-shrink:0;
  margin-left:clamp(10px,1.6vw,22px);
  transition:color var(--speed-fast) var(--ease), border-color var(--speed-fast) var(--ease);
}
.header-cta:hover, .header-cta:focus-visible{ color:var(--green-ink); border-color:var(--green); }

.mobile-nav-wrap{ display:none; position:static; }
.mobile-nav-wrap > summary{
  list-style:none; cursor:pointer;
}
.mobile-nav-wrap > summary::-webkit-details-marker{ display:none; }
.mobile-nav-wrap > summary::marker{ content:""; }

.menu-trigger{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:44px; height:44px; margin-left:4px; margin-right:-5px; flex-shrink:0;
}
.menu-trigger span.bar{ display:block; width:22px; height:2px; background:var(--navy); transition:transform var(--speed-fast) var(--ease), opacity var(--speed-fast) var(--ease); }
/* Pure-CSS hamburger->X, driven by the native details[open] state — works with zero JS. */
.mobile-nav-wrap[open] > .menu-trigger .bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.mobile-nav-wrap[open] > .menu-trigger .bar:nth-child(2){ opacity:0; }
.mobile-nav-wrap[open] > .menu-trigger .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display:block;
  border-top:1px solid var(--hairline);
  background:var(--paper);
  position:absolute; top:100%; left:0; right:0;
}
.mobile-nav ul{ padding:8px clamp(20px,5vw,64px) 20px; display:flex; flex-direction:column; }
.mobile-nav a{
  display:block; padding:13px 0; text-decoration:none; color:var(--navy);
  border-bottom:1px solid var(--hairline); font-size:1.02rem;
}
.mobile-nav .mobile-doctor{
  padding:14px clamp(20px,5vw,64px) 0; font-family:var(--font-mono); font-size:.8rem; color:var(--navy-soft);
}
.mobile-nav .header-cta{ display:inline-block; margin:16px clamp(20px,5vw,64px) 4px; }


@media (max-width:900px){
  .primary-nav, .header-cta{ display:none; }
  .mobile-nav-wrap{ display:block; }
  .brand-doctor{ display:none; }
  .brand-divider{ display:none; }
  .header-quick-contact{ margin-left:auto; }
}

/* The panel must not render while the disclosure is closed. .mobile-nav sets
   display:block, which overrides the UA rule that hides a closed <details>'s
   non-summary children, so hide it explicitly. Native [open] still drives it
   with zero JS. */
.mobile-nav-wrap:not([open]) > .mobile-nav{ display:none; }

@media (min-width:901px){
  .mobile-nav-wrap{ display:none !important; }
}

/* ============================================================
   01 — HERO
   ============================================================ */
.hero{ padding-block:clamp(40px,7vw,84px) clamp(52px,7vw,96px); scroll-margin-top:96px; }
.hero-grid{
  display:grid;
  grid-template-columns:1.55fr 1fr;
  column-gap:clamp(24px,4vw,56px);
  align-items:start;
}
.hero-primary{ grid-column:1; min-width:0; }
.hero h1{
  font-size:clamp(2.3rem,1.3rem + 3.6vw,4.35rem);
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.06;
  color:var(--navy);
}
.hero-meta{ margin-top:clamp(24px,3vw,36px); }
.hero-doctor{ font-weight:600; font-size:1.05rem; margin-bottom:.4em; }
.hero-sub{ color:var(--navy-soft); font-size:1.05rem; max-width:32rem; margin-bottom:1.6em; }
.hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(20px,3vw,36px); }

.hero-figure{
  grid-column:2;
  justify-self:end;
  margin-top:clamp(20px,5vw,56px);
  width:100%; max-width:340px;
}
.hero-figure img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 8%;
  border:1px solid var(--hairline-strong);
  background:var(--warm);
}
.hero-figure figcaption{
  margin-top:10px; font-family:var(--font-mono); font-size:.74rem; color:var(--navy-soft);
  letter-spacing:.02em; line-height:1.5;
}
.hero-figure figcaption .mono-tag{ color:var(--navy); font-weight:500; }

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-figure{ grid-column:1; justify-self:start; margin-top:28px; max-width:250px; }
  .hero h1{ font-size:clamp(2rem,1.2rem + 5vw,2.8rem); }
}

/* ============================================================
   02 — ŞİKÂYETİNİZ NEDİR? (Signature Symptom Navigator)
   ============================================================ */
.symptom-index{ border-top:1px solid var(--hairline-strong); }
.symptom-item{ border-bottom:1px solid var(--hairline-strong); }
.symptom-trigger{
  width:100%; display:flex; align-items:center; gap:clamp(16px,3vw,32px);
  padding:clamp(18px,2.4vw,28px) 4px;
  text-align:left;
}
.symptom-number{
  font-family:var(--font-mono); font-size:.95rem; color:var(--navy-faint);
  width:2.4ch; flex-shrink:0; transition:color var(--speed-fast) var(--ease);
}
.symptom-name{
  font-size:clamp(1.15rem,1rem + .9vw,1.6rem); font-weight:500; letter-spacing:-.01em;
  flex:1;
}
.symptom-icon{
  font-family:var(--font-mono); font-size:1.3rem; color:var(--navy-soft); flex-shrink:0;
  transition:transform var(--speed-med) var(--ease), color var(--speed-fast) var(--ease);
  width:1em; text-align:center;
}
.symptom-trigger[aria-expanded="true"] .symptom-icon{ transform:rotate(45deg); color:var(--green-ink); }
.symptom-trigger[aria-expanded="true"] .symptom-number{ color:var(--green-ink); }
/* No-JS / not-yet-initialized default: trigger is a disabled, inert heading —
   not an accordion control. aria-expanded="true" here reflects the visible
   reality (panel is not hidden), but must not carry the "open" accordion
   styling (rotated icon, green accent) since there is no working control. */
.symptom-trigger:disabled{ cursor:default; opacity:1; color:inherit; }
.symptom-trigger:disabled .symptom-icon{ display:none; }
.symptom-trigger:disabled[aria-expanded="true"] .symptom-icon{ display:none; }
.symptom-trigger:disabled[aria-expanded="true"] .symptom-number{ color:var(--navy-faint); }
.symptom-trigger:hover .symptom-name, .symptom-trigger:focus-visible .symptom-name{ color:var(--green-ink); }

.symptom-panel{ overflow:hidden; transition:opacity var(--speed-med) var(--ease); }
.symptom-panel-inner{
  display:grid; grid-template-columns:2.4ch 1fr; gap:clamp(16px,3vw,32px);
  padding:0 4px clamp(20px,2.4vw,28px);
}
.symptom-panel p{ color:var(--navy-soft); max-width:44rem; margin-bottom:.9em; }

@media (max-width:640px){
  .symptom-name{ font-size:1.08rem; }
  .symptom-panel-inner{ grid-template-columns:1fr; }
}

/* ============================================================
   03 — YAKLAŞIMIMIZ
   ============================================================ */
.approach-head-row{
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap;
  gap:12px 32px; border-bottom:1px solid var(--hairline-strong); padding-bottom:22px; margin-bottom:28px;
}
.approach-head-row h2{
  font-size:clamp(1.7rem,1.1rem + 2vw,2.5rem); font-weight:600; letter-spacing:-.01em; margin:0;
}
.approach-text{ font-size:1.15rem; line-height:1.65; color:var(--ink); margin-bottom:2.4rem; max-width:54rem; }
.approach-text strong{ font-weight:600; }

.approach-steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(28px,3.4vw,44px);
  border-top:1px solid var(--hairline-strong); padding-top:clamp(24px,3vw,32px);
}
.approach-step{ position:relative; }
.approach-step + .approach-step{ border-left:1px solid var(--hairline-strong); padding-left:clamp(20px,3vw,32px); }
.approach-step .num{ font-family:var(--font-mono); font-size:.85rem; color:var(--green-ink); display:block; margin-bottom:.6em; }
.approach-step h3{ font-size:1.05rem; font-weight:600; margin-bottom:.4em; }
.approach-step p{ color:var(--navy-soft); font-size:.92rem; }

@media (max-width:900px){
  .approach-steps{ grid-template-columns:1fr 1fr; row-gap:32px; }
  .approach-step:nth-child(2n+1){ border-left:0; padding-left:0; }
  .approach-step:nth-child(n+3){ border-left:0; padding-left:0; border-top:1px solid var(--hairline-strong); padding-top:24px; }
}

@media (max-width:600px){
  .approach-head-row{ flex-direction:column; align-items:flex-start; gap:14px; }
  .approach-steps{
    grid-template-columns:1fr; border-top:none; padding-top:0; gap:0; position:relative; padding-left:26px;
  }
  .approach-steps::before{
    content:""; position:absolute; left:8px; top:4px; bottom:4px; width:1px; background:var(--hairline-strong);
  }
  .approach-step{ padding:0 0 30px 18px !important; border:none !important; }
  .approach-step:last-child{ padding-bottom:0 !important; }
  .approach-step:nth-child(n+3){ border-top:none !important; padding-top:0 !important; }
  .approach-step .num{
    position:absolute; left:-26px; top:-2px; width:18px; height:18px; border-radius:50%;
    background:var(--paper); border:1px solid var(--hairline-strong); color:var(--green-ink);
    font-size:.66rem; display:flex; align-items:center; justify-content:center; margin:0;
  }
}

/* ============================================================
   04 — PROKTOLOJİ ODAĞI
   ============================================================ */
.focus-list{ border-top:1px solid var(--hairline-strong); }
.focus-row{
  border-bottom:1px solid var(--hairline-strong);
  display:grid; grid-template-columns:2.4ch minmax(0,1fr) minmax(0,1.4fr) auto;
  gap:clamp(16px,3vw,32px); align-items:center; padding:clamp(15px,1.9vw,20px) 4px;
  text-decoration:none; color:inherit;
  transition:background var(--speed-fast) var(--ease);
}
.focus-row:hover, .focus-row:focus-visible{ background:var(--warm); }
.focus-row .num{ font-family:var(--font-mono); font-size:.9rem; color:var(--navy-faint); }
.focus-row .name{ font-size:clamp(1.05rem,1rem + .5vw,1.3rem); font-weight:500; }
.focus-row .desc{ color:var(--navy-soft); font-size:.94rem; }
.focus-row .go{ font-family:var(--font-mono); font-size:1.1rem; color:var(--navy-faint); transition:transform var(--speed-fast) var(--ease); }
.focus-row:hover .go, .focus-row:focus-visible .go{ transform:translateX(4px); color:var(--green-ink); }

@media (max-width:760px){
  .focus-row{ grid-template-columns:2ch 1fr auto; }
  .focus-row .desc{ display:none; }
}

/* ============================================================
   05 — MEHMET DURMUŞ KURT
   ============================================================ */
.doctor-grid{ display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:clamp(36px,5vw,72px); align-items:start; }
.doctor-photo img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 15%;
  border:1px solid var(--hairline-strong); background:var(--warm);
}
.doctor-photo figcaption{ margin-top:10px; font-family:var(--font-mono); font-size:.74rem; color:var(--navy-soft); }
.doctor-name{ font-size:clamp(1.6rem,1.2rem + 1.6vw,2.2rem); font-weight:600; letter-spacing:-.01em; margin-bottom:.2em; }
.doctor-role{ color:var(--green-ink); font-family:var(--font-mono); font-size:.85rem; letter-spacing:.04em; margin-bottom:1.3em; display:block; }
.doctor-bio p{ color:var(--navy-soft); font-size:1.08rem; max-width:38rem; margin-bottom:1.1em; }
.doctor-bio p:first-of-type{ color:var(--ink); }
.doctor-approach-line{ font-size:.95rem !important; color:var(--navy-soft); }

@media (max-width:760px){ .doctor-grid{ grid-template-columns:1fr; } .doctor-photo{ max-width:220px; } }

/* ============================================================
   06 — QUICK CONTACT MODULE
   ============================================================ */
.quick-contact-grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);
  max-width:960px;
}
.qc-note h2{ font-size:clamp(1.5rem,1.1rem + 1.4vw,1.9rem); font-weight:600; margin-bottom:.5em; letter-spacing:-.01em; }
.qc-note p{ color:var(--navy-soft); }

/* Direct Contact Mode — replaces the form while no backend exists.
   Navy + green accent, matching the rest of the design system rather
   than a third-party WhatsApp-green button aesthetic (see rule 18). */
.qc-direct-actions{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:1.6em; }
.qc-direct-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em; min-height:44px;
  padding:13px 24px; border-radius:var(--radius); font-weight:500; font-size:.96rem; text-decoration:none;
  white-space:nowrap;
}
.qc-direct-primary{ background:var(--navy); color:#fff; border-bottom:3px solid var(--green); transition:background var(--speed-fast) var(--ease); }
.qc-direct-primary:hover, .qc-direct-primary:focus-visible{ background:#2c4262; }
.qc-direct-secondary{ background:transparent; color:var(--navy); border:1px solid var(--hairline-strong); transition:border-color var(--speed-fast) var(--ease), background var(--speed-fast) var(--ease); }
.qc-direct-secondary:hover, .qc-direct-secondary:focus-visible{ border-color:var(--navy); background:var(--warm); }
.lp-contact-box .qc-direct-actions{ margin-top:1.4em; }
/* No form CSS anywhere in the build: there is no <form> in any visitor-facing
   page. Do not re-add input/label/submit/success styling before a real endpoint,
   legally approved consent text and a retention process exist. */

@media (max-width:760px){ .quick-contact-grid{ grid-template-columns:1fr; } }

/* ============================================================
   07 — MDK
   ============================================================ */
.mdk-box{ max-width:640px; padding:clamp(26px,3.4vw,40px); border:1px solid var(--hairline-strong); }
.mdk-box h2{ font-size:clamp(1.4rem,1.1rem + 1vw,1.75rem); font-weight:600; margin-bottom:.25em; }
.mdk-by{ font-family:var(--font-mono); font-size:.82rem; color:var(--navy-soft); margin-bottom:1.6em; display:block; }
.mdk-facts{ display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; margin-bottom:1.8em; }
.mdk-facts li{ font-size:.94rem; color:var(--ink); padding-left:16px; position:relative; }
.mdk-facts li::before{ content:"—"; position:absolute; left:0; color:var(--navy-faint); }
.mdk-caveat{
  border-top:1px solid var(--hairline-strong); padding-top:1.4em; margin-bottom:1.6em;
  font-size:1.02rem; font-weight:500; line-height:1.6;
}
@media (max-width:600px){ .mdk-facts{ grid-template-columns:1fr; } }

/* Homepage-only wide editorial MDK panel — mdk-box/.mdk-facts above are
   left untouched because the landing page (hemoroid-degerlendirme.html)
   still relies on them. This block is additive, not a replacement. */
.mdk-panel{
  border-top:1px solid var(--hairline-strong); border-bottom:1px solid var(--hairline-strong);
  padding-block:clamp(32px,4vw,48px);
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  grid-template-areas:
    "title   facts"
    "byline  facts"
    "cta     facts"
    "caveat  caveat";
  column-gap:clamp(32px,5vw,56px);
  row-gap:clamp(20px,3vw,28px);
  align-items:start;
}
.mdk-p-title{ grid-area:title; font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem); font-weight:600; margin:0; }
.mdk-p-byline{ grid-area:byline; margin-bottom:0; }
.mdk-p-cta{ grid-area:cta; align-self:start; }
.mdk-p-facts{ grid-area:facts; }
.mdk-p-caveat{ grid-area:caveat; margin-bottom:0; max-width:56rem; }

.mdk-panel-facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px clamp(24px,3vw,40px); }
.mdk-fact{ border-top:1px solid var(--hairline-strong); padding-top:14px; }
.mdk-fact .num{ font-family:var(--font-mono); font-size:.8rem; color:var(--green-ink); display:block; margin-bottom:.5em; }
.mdk-fact p{ font-size:.92rem; color:var(--ink); line-height:1.55; margin:0; }

@media (max-width:900px){
  .mdk-panel{
    grid-template-columns:1fr;
    grid-template-areas:"title" "byline" "facts" "caveat" "cta";
    row-gap:20px;
  }
  .mdk-panel-facts{ grid-template-columns:1fr 1fr; }
  .mdk-p-cta{ margin-top:4px; }
}
@media (max-width:600px){
  .mdk-panel-facts{ grid-template-columns:1fr; }
}

/* ============================================================
   08 — DEĞERLENDİRMEDEN TAKİBE
   ============================================================ */
.care-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,8px); position:relative; margin-bottom:2.6rem; }
.care-grid::before{
  content:""; position:absolute; top:11px; left:2%; right:2%; height:1px; background:var(--hairline-strong);
  display:none;
}
@media (min-width:761px){ .care-grid::before{ display:block; } }
.care-step{ position:relative; padding-top:clamp(0px,0px,0px); }
.care-step .num{
  font-family:var(--font-mono); font-size:.85rem; color:var(--paper); background:var(--navy);
  width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  margin-bottom:14px; position:relative; z-index:1;
}
.care-step h3{ font-size:1rem; font-weight:600; margin-bottom:.4em; }
.care-step p{ font-size:.9rem; color:var(--navy-soft); }
.care-note{ max-width:40rem; color:var(--navy-soft); border-left:1px solid var(--hairline-strong); padding-left:18px; }

@media (max-width:760px){ .care-grid{ grid-template-columns:1fr 1fr; gap:28px 20px; } }
@media (max-width:460px){ .care-grid{ grid-template-columns:1fr; } }

/* ============================================================
   09 — HASTA REHBERİ (Topic Index)
   ============================================================ */
.guide-grid{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--hairline-strong); border-left:1px solid var(--hairline-strong); }
.guide-row{
  border-bottom:1px solid var(--hairline-strong); border-right:1px solid var(--hairline-strong);
  display:flex; align-items:baseline; gap:14px; padding:clamp(13px,1.6vw,18px) clamp(18px,2vw,26px);
  text-decoration:none; color:inherit; transition:background var(--speed-fast) var(--ease);
}
.guide-row:hover, .guide-row:focus-visible{ background:var(--warm); }
.guide-row .num{ font-family:var(--font-mono); font-size:.82rem; color:var(--navy-faint); flex-shrink:0; }
.guide-row .name{ font-size:1.02rem; font-weight:500; }

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

/* ============================================================
   10 — FINAL CONTACT
   ============================================================ */
#iletisim{ position:relative; overflow:hidden; }
.fc-bignum{
  position:absolute; right:clamp(20px,5vw,64px); top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-weight:500; line-height:1;
  font-size:clamp(140px,20vw,300px); color:rgba(255,255,255,.05);
  pointer-events:none; user-select:none;
}
@media (max-width:900px){ .fc-bignum{ display:none; } }
.final-contact-grid{ max-width:32rem; position:relative; z-index:1; }
.fc-list{ margin-top:1.4rem; }
.fc-list .row{ display:flex; gap:18px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.14); }
.fc-list .label{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55); width:9ch; flex-shrink:0; padding-top:2px; }
.fc-list .value{ font-size:1.05rem; }
.fc-list a{ text-decoration:none; color:#fff; border-bottom:1px solid rgba(255,255,255,.35); transition:border-color var(--speed-fast) var(--ease); }
.fc-list a:hover, .fc-list a:focus-visible{ border-color:var(--green); }
.final-contact-grid p.lede{ color:rgba(255,255,255,.7); }
.fc-back{
  margin-top:2rem; display:inline-flex; align-items:center; min-height:44px; gap:.6em; text-decoration:none;
  color:#fff; border-bottom:1px solid var(--green); padding-bottom:3px; font-weight:500;
}



/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--warm); border-top:1px solid var(--hairline); padding-block:clamp(48px,6vw,72px) 28px; }
.footer-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(24px,2.6vw,36px); margin-bottom:44px; }
.footer-grid > .footer-col:first-child{ grid-column:1 / -1; max-width:34rem; margin-bottom:8px; }
.footer-brand-logo{ height:22px; width:auto; margin-bottom:14px; }
.footer-address{ max-width:26rem; }
.footer-col h3{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-soft); margin-bottom:16px; }
.footer-col p{ font-size:.92rem; color:var(--navy-soft); max-width:24rem; margin-bottom:.6em; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col a{ font-size:.92rem; text-decoration:none; color:var(--navy); }
.footer-col a:hover, .footer-col a:focus-visible{ color:var(--green-ink); text-decoration:underline; }
.footer-other{ font-size:.84rem; color:var(--navy-faint); }
.footer-other a{ color:var(--navy-faint); font-size:.84rem; }
.footer-bottom{ border-top:1px solid var(--hairline); padding-top:22px; display:flex; flex-wrap:wrap; gap:16px 28px; justify-content:space-between; align-items:center; }
.footer-legal{ display:flex; flex-wrap:wrap; gap:18px; }
.footer-legal a{ font-size:.82rem; color:var(--navy-soft); text-decoration:none; }
.footer-legal a:hover, .footer-legal a:focus-visible{ color:var(--navy); text-decoration:underline; }
.footer-meta{ font-size:.78rem; color:var(--navy-faint); }

@media (max-width:1000px){ .footer-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px){ .footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:460px){ .footer-grid{ grid-template-columns:1fr; } }

/* ============================================================
   INTERNAL PAGE SYSTEM — shared across disease / symptom / doctor templates
   ============================================================ */

/* Breadcrumb */
.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.78rem; color:var(--navy-soft);
  margin-bottom:clamp(24px,4vw,36px);
}
.breadcrumb a{ color:var(--navy-soft); text-decoration:none; }
.breadcrumb a:hover, .breadcrumb a:focus-visible{ color:var(--green-ink); text-decoration:underline; }
.breadcrumb .sep{ color:var(--hairline-strong); }
.breadcrumb .current{ color:var(--navy); }

/* Internal page hero — lighter than homepage hero, text-forward */
.page-hero{ padding-block:clamp(36px,6vw,72px) clamp(40px,6vw,64px); scroll-margin-top:96px; }
.page-hero h1{
  font-size:clamp(2.1rem,1.3rem + 3vw,3.4rem); font-weight:600; letter-spacing:-.015em;
  line-height:1.1; color:var(--navy); max-width:20ch;
}
.page-hero-lede{ font-size:clamp(1.05rem,1rem + .3vw,1.2rem); color:var(--navy-soft); max-width:42rem; margin-top:1.1em; }
.page-hero-meta{ display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,32px); align-items:center; margin-top:1.7em; }

/* Table of contents */
.toc{
  border-top:1px solid var(--hairline-strong); border-bottom:1px solid var(--hairline-strong);
  padding-block:16px; margin-block:clamp(28px,4vw,44px);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 24px;
}
.toc-label{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-faint); }
.toc-list{ display:flex; flex-wrap:wrap; gap:8px 22px; list-style:none; padding:0; margin:0; }
.toc-list a{ font-size:.88rem; color:var(--navy-soft); text-decoration:none; padding-bottom:2px; border-bottom:1px solid transparent; }
.toc-list a:hover, .toc-list a:focus-visible{ color:var(--navy); border-color:var(--green); }

/* Article / long-form editorial section */
.article-section{ padding-block:clamp(40px,6vw,72px); scroll-margin-top:96px; }
.article-section h2{ font-size:clamp(1.5rem,1.1rem + 1.6vw,2.1rem); font-weight:600; letter-spacing:-.01em; margin-bottom:.7em; max-width:32rem; }
.article-section h3{ font-size:1.12rem; font-weight:600; margin:1.7em 0 .5em; color:var(--navy); }
.article-body{ max-width:var(--measure); }
.article-body p{ color:var(--navy-soft); font-size:1.04rem; margin-bottom:1.15em; }
.article-body p:first-of-type{ color:var(--ink); }
.article-body ul, .article-body ol{ margin:0 0 1.15em; padding-left:1.25em; color:var(--navy-soft); }
.article-body li{ margin-bottom:.5em; }
.article-section--tint{ background:var(--warm); }

/* Callout — contextual note, not a legal-warning box */
.callout{ border-left:2px solid var(--green); padding:2px 0 2px 20px; margin:1.7em 0; max-width:var(--measure); }
.callout p{ font-size:.98rem; color:var(--navy); font-weight:500; margin:0; }

/* FAQ accordion — secondary detail only */
.faq-list{ border-top:1px solid var(--hairline-strong); max-width:var(--measure); }
.faq-item{ border-bottom:1px solid var(--hairline-strong); }
.faq-trigger{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:17px 2px; text-align:left; font-size:1rem; font-weight:500; }
.faq-icon{ font-family:var(--font-mono); font-size:1.15rem; color:var(--navy-soft); flex-shrink:0; transition:transform var(--speed-med) var(--ease), color var(--speed-fast) var(--ease); }
.faq-trigger[aria-expanded="true"] .faq-icon{ transform:rotate(45deg); color:var(--green-ink); }
/* Same disabled/no-JS neutralization as .symptom-trigger above. */
.faq-trigger:disabled{ cursor:default; opacity:1; color:inherit; }
.faq-trigger:disabled .faq-icon{ display:none; }
.faq-trigger:disabled[aria-expanded="true"] .faq-icon{ display:none; }
.faq-panel{ overflow:hidden; transition:opacity var(--speed-med) var(--ease); }
.faq-panel p{ padding:0 2px 19px; color:var(--navy-soft); max-width:42rem; }

/* Related Context Map — signature symptom-page interaction (static, accessible, non-diagnostic) */
.context-map{ border-top:1px solid var(--hairline-strong); padding-block:clamp(40px,6vw,64px); }
.context-map-grid{
  position:relative; display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(32px,5vw,64px);
  align-items:center; margin-top:clamp(28px,4vw,44px);
}
.context-map-grid::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px;
  background:var(--hairline-strong); z-index:0;
}
.context-group{ position:relative; z-index:1; }
.context-group h3{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--navy-faint); font-weight:500; margin-bottom:16px; }
.context-group ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.context-group a{
  font-size:.98rem; color:var(--navy); text-decoration:none; display:block;
  padding:7px 10px; margin:0 -10px; border-radius:var(--radius);
  border-bottom:1px solid var(--hairline-strong);
  transition:color var(--speed-fast) var(--ease), background var(--speed-fast) var(--ease), border-color var(--speed-fast) var(--ease);
}
.context-group a:hover, .context-group a:focus-visible{ color:var(--green-ink); background:var(--warm); border-color:var(--green); }
.context-current{
  position:relative; z-index:2; justify-self:center; text-align:center; font-family:var(--font-mono); font-size:.82rem;
  letter-spacing:.03em; color:#fff; background:var(--navy); padding:13px 20px; border-radius:var(--radius);
  white-space:nowrap;
}
@media (max-width:760px){
  .context-map-grid{ grid-template-columns:1fr; }
  .context-map-grid::before{ display:none; }
  .context-current{ order:-1; justify-self:start; margin-bottom:4px; }
}

/* Doctor page — larger, still restrained hero photo treatment */
.doctor-page-hero{ display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:clamp(36px,5vw,72px); align-items:end; }
.doctor-page-hero .doctor-photo img{ aspect-ratio:4/5; }
@media (max-width:820px){ .doctor-page-hero{ grid-template-columns:1fr; } .doctor-page-hero .doctor-photo{ max-width:260px; } }

/* Active nav state on internal pages */
.primary-nav a.is-active, .mobile-nav a.is-active{ border-color:var(--green); font-weight:500; }

/* Contextual quick-contact intro line reused inside long-form pages */
.qc-inline-kicker{ margin-bottom:0; }

/* ============================================================
   CAMPAIGN / LANDING PAGE ONLY — isolated scope (hemoroid-degerlendirme.html)
   Reuses core tokens, surfaces, .qc-form, .faq-*, .symptom-*, .callout,
   .mdk-box and .link-cta from the shared system above. Does not alter
   any global site.* or homepage selectors.
   ============================================================ */
.campaign-header{
  position:sticky; top:0; z-index:100; background:var(--paper); border-bottom:1px solid var(--hairline);
}
.campaign-header-inner{
  max-width:var(--container); margin-inline:auto; padding:16px clamp(20px,5vw,64px);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.campaign-header .brand-logo{ height:22px; width:auto; }
/* Landing logo link: 44px minimum touch target on mobile, logo size unchanged. */
@media (max-width:900px){
  .campaign-header-inner > a{ display:inline-flex; align-items:center; min-height:44px; }
}
.campaign-header-actions{ display:flex; align-items:center; gap:clamp(10px,2vw,20px); }
.campaign-phone{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:.92rem; font-weight:500; color:var(--navy); text-decoration:none;
  border-bottom:1px solid var(--hairline-strong); white-space:nowrap;
}
.campaign-phone:hover, .campaign-phone:focus-visible{ border-color:var(--green); color:var(--green-ink); }
.campaign-phone-short{ display:none; }
.campaign-cta{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; gap:.5em; background:var(--navy); color:#fff;
  font-size:.88rem; font-weight:500; padding:10px 18px; border-radius:var(--radius);
  border-bottom:2px solid var(--green); text-decoration:none; white-space:nowrap;
  transition:background var(--speed-fast) var(--ease);
}
.campaign-cta:hover, .campaign-cta:focus-visible{ background:#2c4262; }
@media (max-width:600px){
  .campaign-header-inner{ padding-inline:16px; gap:10px; }
  .campaign-phone-full{ display:none; }
  .campaign-phone-short{ display:inline-flex; min-width:44px; justify-content:center; }
  .campaign-cta{ padding:10px 16px; font-size:.86rem; }
}
@media (max-width:360px){
  .campaign-header-inner{ padding-inline:12px; gap:8px; }
  .campaign-cta{ padding:10px 12px; font-size:.82rem; }
}

.lp-hero{ padding-block:clamp(32px,6vw,64px) clamp(28px,5vw,48px); scroll-margin-top:80px; }
.lp-hero-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(32px,5vw,64px); align-items:start; }
.lp-hero h1{
  font-size:clamp(2rem,1.2rem + 3vw,3.1rem); font-weight:600; letter-spacing:-.015em; line-height:1.12; color:var(--navy);
}
.lp-hero-sub{ color:var(--navy-soft); font-size:1.08rem; margin-top:.9em; max-width:34rem; }
.lp-doctor-row{ display:flex; align-items:center; gap:14px; margin-top:1.6em; }
.lp-doctor-row img{ width:56px; height:56px; border-radius:50%; object-fit:cover; object-position:50% 15%; border:1px solid var(--hairline-strong); flex-shrink:0; }
.lp-doctor-name{ font-weight:600; font-size:.98rem; color:var(--navy); }
.lp-doctor-role{ font-family:var(--font-mono); font-size:.76rem; color:var(--navy-soft); }
.lp-moderation{ font-size:.86rem; color:var(--navy-faint); margin-top:1.3em; max-width:32rem; }
.lp-hero-phone{ margin-top:.9em; font-size:.92rem; color:var(--navy-soft); }
.lp-hero-phone a{ color:var(--navy); font-weight:500; text-decoration:none; border-bottom:1px solid var(--hairline-strong); }
.lp-hero-phone a:hover, .lp-hero-phone a:focus-visible{ border-color:var(--green); color:var(--green-ink); }

.lp-contact-box{ border:1px solid var(--hairline-strong); padding:clamp(24px,3vw,32px); border-radius:var(--radius); background:var(--paper); }
.lp-contact-box h2{ font-size:1.2rem; font-weight:600; margin-bottom:.3em; }
.lp-contact-box > p{ color:var(--navy-soft); font-size:.92rem; margin-bottom:1.3em; }

@media (max-width:820px){ .lp-hero-grid{ grid-template-columns:1fr; } }

@media (max-width:480px){
  .campaign-header-inner{ padding-block:11px; }
  .lp-hero{ padding-block:16px 20px; }
  .lp-hero h1{ font-size:1.78rem; line-height:1.18; }
  .lp-hero-sub{ margin-top:.55em; font-size:.98rem; }
  .lp-hero-grid{ gap:18px; }
  .lp-doctor-row{ margin-top:.85em; gap:11px; }
  .lp-doctor-row img{ width:44px; height:44px; }
  .lp-moderation{ margin-top:.7em; }
  .lp-hero-phone{ margin-top:.55em; }
  .lp-contact-box{ padding:18px; }
  .lp-contact-box h2{ font-size:1.08rem; }
  .lp-contact-box > p{ margin-bottom:.8em; font-size:.86rem; }
}

.lp-trust{ border-top:1px solid var(--hairline-strong); border-bottom:1px solid var(--hairline-strong); }
.lp-trust-line{
  padding-block:22px; font-size:1rem; color:var(--navy-soft); line-height:1.6;
  max-width:42rem; margin-inline:auto; text-align:center;
}
.lp-trust-line strong{ color:var(--navy); font-weight:600; }
@media (max-width:600px){ .lp-trust-line{ font-size:.94rem; text-align:left; } }

.lp-diseases-note{ font-size:.92rem; color:var(--navy-soft); margin-top:20px; }

.lp-steps{ display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,40px); margin-top:clamp(20px,3vw,28px); }
.lp-step{ flex:1 1 200px; }
.lp-step .num{ font-family:var(--font-mono); font-size:.85rem; color:var(--green-ink); display:block; margin-bottom:.5em; }
.lp-step p{ font-size:.98rem; color:var(--ink); }

.lp-final{ text-align:left; }
.lp-final-actions{ display:flex; flex-wrap:wrap; gap:clamp(16px,3vw,28px); align-items:center; margin-top:1.4em; }

/* Landing page — tighter section rhythm than the main site, keeps focus on the form */
.lp-tight.section{ padding-block:clamp(28px,4.5vw,52px); }
.lp-tight.article-section{ padding-block:clamp(24px,4vw,44px); }
.lp-tight .mdk-box{ padding:clamp(20px,2.6vw,30px); }
.lp-tight .mdk-facts{ margin-bottom:1.1em; }

.campaign-sticky{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:150;
  background:var(--navy); color:#fff; padding:8px clamp(16px,4vw,28px);
  align-items:center; justify-content:space-between; gap:10px;
  opacity:0; transform:translateY(100%); transition:opacity var(--speed-med) var(--ease), transform var(--speed-med) var(--ease);
}
.campaign-sticky.is-visible{ opacity:1; transform:translateY(0); }
.campaign-sticky-btn{
  display:inline-flex; align-items:center; justify-content:center; flex:1 1 auto; min-height:44px;
  color:var(--navy); background:var(--green); font-size:.9rem; font-weight:600; text-decoration:none;
  padding:9px 14px; border-radius:var(--radius); gap:6px;
}
.campaign-sticky-call{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px;
  color:#fff; background:transparent; border:1px solid rgba(255,255,255,.4); font-size:.86rem; font-weight:600; text-decoration:none;
  padding:9px 16px; border-radius:var(--radius); flex-shrink:0;
}
@media (max-width:820px){ .campaign-sticky{ display:flex; } }
@media (prefers-reduced-motion: reduce){ .campaign-sticky{ transition:opacity .01ms; } }

.campaign-footer{ background:var(--warm); border-top:1px solid var(--hairline); padding-block:32px; }
.campaign-footer-inner{ display:flex; flex-wrap:wrap; gap:20px 32px; align-items:center; justify-content:space-between; }
.campaign-footer-brand{ display:flex; align-items:center; gap:14px; }
.campaign-footer-brand img{ height:20px; width:auto; }
.campaign-footer-meta{ font-size:.84rem; color:var(--navy-soft); }
.campaign-footer-links{ display:flex; flex-wrap:wrap; gap:16px; }
.campaign-footer-links a{ font-size:.82rem; color:var(--navy-soft); text-decoration:none; }
.campaign-footer-links a:hover, .campaign-footer-links a:focus-visible{ color:var(--navy); text-decoration:underline; }

/* ============================================================
   VIDEO-READY COMPONENT — editorial, no real video yet.
   Non-interactive poster placeholder (not a clickable/fake play
   control — see PRODUCTION-CHECKLIST.md). When a real asset exists,
   replace this poster/badge pair directly with a native
   <video playsinline preload="none" controls> element carrying
   captions/transcript, without changing the surrounding layout.
   ============================================================ */
.kc-video{ display:flex; align-items:center; gap:14px; }
.kc-video-poster-wrap{
  position:relative; flex-shrink:0; width:76px; aspect-ratio:4/5;
  border:1px solid var(--hairline-strong); border-radius:var(--radius); overflow:hidden;
  background:var(--warm);
}
.kc-video-poster{ width:100%; height:100%; object-fit:cover; object-position:50% 12%; display:block; filter:grayscale(.15); opacity:.85; }
.kc-video-badge{
  position:absolute; left:6px; bottom:6px; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.04em;
  color:#fff; background:rgba(34,50,73,.75); padding:3px 7px; border-radius:2px; text-transform:uppercase;
}
.kc-video-meta{ display:flex; flex-direction:column; gap:2px; }
.kc-video-title{ font-size:.9rem; font-weight:600; color:var(--navy); }
.kc-video-desc{ font-size:.84rem; color:var(--navy-soft); }
.kc-video-duration{ font-family:var(--font-mono); font-size:.7rem; color:var(--navy-faint); margin-top:2px; }
.surface-navy .kc-video-title{ color:#fff; }
.surface-navy .kc-video-desc{ color:rgba(255,255,255,.75); }
.surface-navy .kc-video-duration{ color:rgba(255,255,255,.5); }
.surface-navy .kc-video-poster-wrap{ border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.06); }

.lp-video-strip{ padding-block:20px; border-bottom:1px solid var(--hairline-strong); }
.lp-video-strip .wrap{ display:flex; justify-content:center; }
.lp-final .kc-video{ margin-top:24px; }

/* Not-yet-built destinations: real page links were converted to non-interactive
   spans (see CHANGELOG.md) rather than pointing to routes that don't exist or
   masking them behind a demo-only toast. Neutralise any hover/cursor affordance
   inherited from the link classes they still carry for visual consistency. */
.is-static{ cursor:default; }
.is-static:hover, .is-static:focus-visible{ background:none !important; color:inherit !important; border-color:var(--hairline-strong) !important; outline:none; }


/* ============================================================
   HOME REVISION — hierarchy layer
   Additive only. No token, no brand colour, no typeface change.
   Introduced to remove inline heading styles, replace disabled
   accordion controls with native <details>, and give the page a
   single dominant contact path (telephone, WhatsApp second).
   ============================================================ */

/* — shared heading scale (replaces per-section inline clamp()) — */
.h2-lg{ font-size:clamp(1.7rem,1.1rem + 2vw,2.7rem); font-weight:600; letter-spacing:-.01em; line-height:1.15; margin:0 0 .5em; }
.h2-md{ font-size:clamp(1.45rem,1.1rem + 1.3vw,2rem); font-weight:600; letter-spacing:-.01em; line-height:1.2; margin:0 0 .5em; }
.h2-sm{ font-size:clamp(1.15rem,1rem + .6vw,1.35rem); font-weight:600; letter-spacing:-.005em; margin:0 0 .5em; }
.eyebrow{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--navy-faint); display:block; margin-bottom:1.1em;
}
.surface-navy .eyebrow{ color:rgba(255,255,255,.55); }

/* — header: telephone is the one visually distinct control — */
.header-phone{
  display:inline-flex; align-items:center; gap:.5em; min-height:40px;
  padding:8px 15px; border:1px solid var(--navy); border-radius:var(--radius);
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.01em; font-weight:500;
  color:var(--navy); text-decoration:none; white-space:nowrap;
  transition:background var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease);
}
.header-phone:hover, .header-phone:focus-visible{ background:var(--navy); color:#fff; }
.header-phone .num{ font-variant-numeric:tabular-nums; }
.header-wa{
  display:inline-flex; align-items:center; min-height:40px; padding:8px 4px;
  font-size:.85rem; color:var(--navy-soft); text-decoration:none; white-space:nowrap;
  border-bottom:1px solid transparent;
  transition:color var(--speed-fast) var(--ease), border-color var(--speed-fast) var(--ease);
}
.header-wa:hover, .header-wa:focus-visible{ color:var(--green-ink); border-color:var(--green); }
/* Desktop nav only collapses at 900px, so the header must survive 901–1300px
   without the phone pill pushing the row past the container. */
@media (max-width:1460px){ .brand-doctor{ display:none; } .brand-divider{ display:none; } }
@media (max-width:1150px){ .header-phone .num{ display:none; } .header-phone{ padding:8px 13px; } }
@media (max-width:1000px){ .header-wa{ display:none; } }
/* Mobile header (<=900px) must always carry logo + WhatsApp + Ara + hamburger.
   The full telephone number is never shown here — only the "Ara" label. Both
   controls hold a 44x44 minimum touch target down to 360px. */
@media (max-width:900px){
  .header-wa{ display:inline-flex; min-height:44px; min-width:44px; justify-content:center; padding:8px 10px; }
  .header-phone{ min-height:44px; min-width:44px; justify-content:center; padding:8px 16px; }
  /* Brand link is a navigation target too — hold the 44px minimum without
     changing the header's own height or the logo size. */
  .brand, .campaign-header .brand{ min-height:44px; }
  .header-quick-contact{ gap:4px; margin-left:auto; }
}
@media (max-width:400px){
  .header-wa{ padding:8px 6px; font-size:.82rem; }
  .header-phone{ padding:8px 12px; font-size:.8rem; }
  .header-quick-contact{ gap:2px; }
  .menu-trigger{ margin-left:0; }
}

/* — hero: one primary action, portrait subordinate — */
.hero-cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px; margin-top:1.7em; }
.cta-primary{
  display:inline-flex; align-items:center; gap:.7em; min-height:52px;
  background:var(--navy); color:#fff; text-decoration:none;
  padding:14px 26px; border-radius:var(--radius); border-bottom:3px solid var(--green);
  font-weight:500; font-size:1rem;
  transition:background var(--speed-fast) var(--ease);
}
.cta-primary:hover, .cta-primary:focus-visible{ background:#2c4262; }
.cta-primary .tel{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.cta-secondary{
  display:inline-flex; align-items:center; gap:.5em; min-height:44px;
  color:var(--navy); text-decoration:none; font-size:.98rem; font-weight:500;
  border-bottom:1px solid var(--hairline-strong); padding-bottom:2px;
  transition:border-color var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease);
}
.cta-secondary:hover, .cta-secondary:focus-visible{ color:var(--green-ink); border-color:var(--green); }

.hero-rail{
  border-top:1px solid var(--hairline-strong);
  margin-top:clamp(34px,5vw,54px); padding-top:20px;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px clamp(24px,4vw,48px);
}
.hero-rail div{ display:flex; flex-direction:column; gap:5px; }
.hero-rail dt{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; color:var(--navy-faint); }
.hero-rail dd{ margin:0; font-size:.95rem; color:var(--ink); }
@media (max-width:700px){ .hero-rail{ grid-template-columns:1fr; gap:14px; } }

/* — native <details> accordion: works with JavaScript disabled — */
.sx-list{ border-top:1px solid var(--hairline-strong); }
.sx-item{ border-bottom:1px solid var(--hairline-strong); }
.sx-item > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:clamp(14px,3vw,28px);
  padding:clamp(17px,2.2vw,24px) 4px; min-height:44px;
}
.sx-item > summary::-webkit-details-marker{ display:none; }
.sx-item > summary::marker{ content:""; }
.sx-name{ flex:1; font-size:clamp(1.08rem,1rem + .7vw,1.4rem); font-weight:500; letter-spacing:-.01em; transition:color var(--speed-fast) var(--ease); }
.sx-item > summary:hover .sx-name, .sx-item > summary:focus-visible .sx-name{ color:var(--green-ink); }
.sx-sign{
  flex-shrink:0; width:1em; text-align:center; font-family:var(--font-mono); font-size:1.25rem;
  color:var(--navy-faint); transition:transform var(--speed-med) var(--ease), color var(--speed-fast) var(--ease);
}
.sx-item[open] > summary .sx-sign{ transform:rotate(45deg); color:var(--green-ink); }
.sx-body{ padding:0 4px clamp(20px,2.4vw,26px); max-width:52rem; }
.sx-body p{ color:var(--navy-soft); margin:0; }
.sx-body .link-cta{ margin-top:1em; }

/* — doctor: fact-sheet (künye) scaffold — */
.kunye{ border-top:1px solid var(--hairline-strong); margin-top:clamp(24px,3vw,32px); }
.kunye .row{
  display:grid; grid-template-columns:11rem minmax(0,1fr); gap:8px clamp(20px,3vw,36px);
  padding:13px 0; border-bottom:1px solid var(--hairline);
}
.kunye dt{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; color:var(--navy-faint); padding-top:3px; }
.kunye dd{ margin:0; font-size:.98rem; color:var(--ink); }
@media (max-width:620px){ .kunye .row{ grid-template-columns:1fr; gap:4px; } }

/* — quiet mid-page contact band (deliberately not a second CTA block) — */
.qline{ border-top:1px solid var(--hairline-strong); border-bottom:1px solid var(--hairline-strong); }
.qline .wrap{
  padding-block:22px; display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 26px; justify-content:space-between;
}
.qline p{ font-size:.98rem; color:var(--navy-soft); margin:0; max-width:44rem; }
.qline-links{ display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; }
.qline-links a{
  font-family:var(--font-mono); font-size:.86rem; color:var(--navy); text-decoration:none;
  border-bottom:1px solid var(--hairline-strong); padding-bottom:2px; min-height:32px; display:inline-flex; align-items:center;
  transition:border-color var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease);
}
.qline-links a:hover, .qline-links a:focus-visible{ color:var(--green-ink); border-color:var(--green); }

/* — patient guide: quiet index, no clickable-looking tiles — */
.guide-index{
  columns:3; column-gap:clamp(28px,4vw,56px); border-top:1px solid var(--hairline-strong); padding-top:20px;
}
.guide-index li{
  break-inside:avoid; padding:9px 0; border-bottom:1px solid var(--hairline);
  font-size:.98rem; color:var(--navy-soft);
}
@media (max-width:820px){ .guide-index{ columns:2; } }
@media (max-width:520px){ .guide-index{ columns:1; } }

/* — contact section: form + direct lines side by side — */
.contact-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,6vw,88px); align-items:start; position:relative; z-index:1;
}
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }

/* Visitor-facing form styles removed with the form itself (Rule 0 — no backend).
   Do not re-add form CSS before the endpoint, consent text and retention
   process genuinely exist. */

.contact-direct .lead{ color:rgba(255,255,255,.75); font-size:1.05rem; max-width:26rem; margin-bottom:1.6em; }
.contact-tel{
  display:inline-flex; align-items:center; gap:.6em; min-height:52px;
  font-family:var(--font-mono); font-size:clamp(1.15rem,1rem + .8vw,1.5rem); font-weight:500;
  color:#fff; text-decoration:none; border-bottom:1px solid var(--green); padding-bottom:6px;
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
.contact-tel:hover, .contact-tel:focus-visible{ color:var(--green); }
.contact-wa{
  display:inline-flex; align-items:center; gap:.5em; min-height:44px; margin-top:1.4em;
  color:rgba(255,255,255,.85); text-decoration:none; font-size:.98rem;
  border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:3px;
  transition:color var(--speed-fast) var(--ease), border-color var(--speed-fast) var(--ease);
}
.contact-wa:hover, .contact-wa:focus-visible{ color:#fff; border-color:var(--green); }


/* ============================================================
   CONTACT — direct-contact column (replaces the removed form)
   ============================================================ */
.contact-direct-col{ position:relative; z-index:1; }
.contact-direct-title{ color:#fff; }
.contact-direct-lead{ color:rgba(255,255,255,.72); font-size:1rem; max-width:28rem; margin-bottom:1.9em; }
.contact-actions{ display:flex; flex-direction:column; gap:0; border-top:1px solid rgba(255,255,255,.16); }
.contact-actions li{ border-bottom:1px solid rgba(255,255,255,.16); }
.contact-action{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:60px; padding:16px 2px; text-decoration:none; color:#fff;
  font-size:1.05rem; font-weight:500;
  transition:color var(--speed-fast) var(--ease), transform var(--speed-fast) var(--ease);
}
.contact-action span{ font-family:var(--font-mono); color:rgba(255,255,255,.55); transition:transform var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease); }
.contact-action:hover, .contact-action:focus-visible{ color:var(--green); }
.contact-action:hover span, .contact-action:focus-visible span{ transform:translateX(5px); color:var(--green); }
.contact-action.is-primary{ font-size:1.15rem; }
.contact-action.is-primary::before{
  content:""; position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:var(--green); transform:scaleX(0); transform-origin:left;
  transition:transform var(--speed-med) var(--ease);
}
.contact-action.is-primary:hover::before, .contact-action.is-primary:focus-visible::before{ transform:scaleX(1); }

/* ============================================================
   MOTION LAYER — transform/opacity only, GPU-friendly.
   Every effect degrades to a plain static page: nothing here is
   required for content to be visible or for a control to work,
   and all of it is switched off under prefers-reduced-motion.
   ============================================================ */
/* Header logos and the doctor name are static everywhere. The only logo
   motion in the system is the homepage inline .brand-logo-svg opening
   animation, defined further down. No drop-in, no hover/focus/active scale,
   on any header, landing header or footer logo. */

/* Sticky header: fully opaque warm white, hairline bottom border, and a
   padding condense on scroll (JS toggles .is-condensed). No translucency,
   no backdrop-filter, no drop shadow — the design system allows none. */
.site-header{
  background:var(--paper);
  transition:padding var(--speed-med) var(--ease), border-color var(--speed-med) var(--ease);
}
.site-header.is-condensed{ border-bottom-color:var(--hairline-strong); }
.mobile-nav{ background:var(--paper); }

/* Buttons and links: lift on hover, press on click */
.cta-primary, .qc-direct-btn, .campaign-cta, .campaign-sticky-btn{
  transition:background var(--speed-fast) var(--ease), transform var(--speed-fast) var(--ease), border-color var(--speed-fast) var(--ease);
}
.cta-primary:hover, .qc-direct-btn:hover, .campaign-cta:hover,
.cta-primary:focus-visible, .qc-direct-btn:focus-visible, .campaign-cta:focus-visible{ transform:translate3d(0,-3px,0); }
.cta-primary:active, .qc-direct-btn:active, .campaign-cta:active,
.campaign-sticky-btn:active, .header-phone:active, .contact-action:active{ transform:scale(.98); }

/* Primary CTA: green underline grows across the button instead of a glow */
.cta-primary{ position:relative; overflow:hidden; border-bottom-color:transparent; }
.cta-primary::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:100%;
  background:var(--green); transform:scaleX(.34); transform-origin:left;
  transition:transform var(--speed-med) var(--ease);
}
.cta-primary:hover::after, .cta-primary:focus-visible::after{ transform:scaleX(1); }

/* Editorial rows: hairline slide, no card hover */
.focus-row{ transition:background var(--speed-fast) var(--ease), transform var(--speed-fast) var(--ease); }
a.focus-row:hover, a.focus-row:focus-visible{ transform:translate3d(4px,0,0); }

/* Accordion body eases open (details toggles instantly with no JS; only
   the inner block animates) */
@keyframes kc-panel-in{
  from{ opacity:0; transform:translate3d(0,-5px,0); }
  to{ opacity:1; transform:translate3d(0,0,0); }
}
.sx-item[open] > .sx-body{ animation:kc-panel-in var(--speed-med) var(--ease) both; }
.mobile-nav-wrap[open] > .mobile-nav{ animation:kc-panel-in var(--speed-fast) var(--ease) both; }

@media (prefers-reduced-motion: reduce){
  .sx-item[open] > .sx-body, .mobile-nav-wrap[open] > .mobile-nav{ animation:none !important; }
  .cta-primary:hover, .qc-direct-btn:hover, .campaign-cta:hover,
  .cta-primary:focus-visible, .qc-direct-btn:focus-visible, .campaign-cta:focus-visible,
  a.focus-row:hover, a.focus-row:focus-visible{ transform:none !important; }
  .cta-primary::after, .contact-action.is-primary::before{ transition:none; transform:scaleX(1); }
}


/* ============================================================
   PHASE 06.2 — VISUAL ENRICHMENT + MOTION SYSTEM
   Fail-safe contract: nothing in this block hides content by default.
   Every hiding/offset rule lives under html.js-motion, a class that
   assets/js/site.js only adds after it has initialised successfully
   inside a try/catch. With JavaScript off, blocked, or throwing, the
   class is absent and every element below renders in its final,
   fully visible state.
   ============================================================ */

/* — brand logo: inline SVG (index) or <img> (all other pages).
     Explicit height + intrinsic 944x162 ratio, so no layout shift. — */
.brand-logo-svg{
  display:block; height:24px; width:auto; flex-shrink:0;
  aspect-ratio:944 / 162;
  transition:height var(--speed-med) var(--ease);
}
.site-header.is-condensed .brand-logo-svg{ height:19px; }
@media (max-width:400px){ .brand-logo, .brand-logo-svg{ height:20px; } }

/* Logo motion — homepage only, once per page load, never on hover.
   Wordmark settles 8px; the green accent wipes left to right. */
html.js-motion .brand-logo-svg{
  opacity:0; transform:translate3d(0,8px,0);
  animation:kc-logo-settle 520ms var(--ease) 60ms forwards;
}
html.js-motion .brand-logo-svg .logo-accent{
  clip-path:inset(0 100% 0 0);
  animation:kc-logo-accent 350ms var(--ease) 470ms forwards;
}
@keyframes kc-logo-settle{ to{ opacity:1; transform:translate3d(0,0,0); } }
@keyframes kc-logo-accent{ to{ clip-path:inset(0 0 0 0); } }
@media (max-width:700px){
  html.js-motion .brand-logo-svg{ animation-duration:380ms; }
  html.js-motion .brand-logo-svg .logo-accent{ animation:kc-logo-accent 260ms var(--ease) 340ms forwards; }
}

/* Hero portrait — single mask reveal, image never fully hidden. */
html.js-motion .hero-figure picture img{
  clip-path:inset(0 0 14% 0);
  animation:kc-hero-mask 640ms var(--ease) 140ms forwards;
}
@keyframes kc-hero-mask{ to{ clip-path:inset(0 0 0 0); } }

/* Editorial process line — drawn left to right when the section arrives. */
.process-line{
  display:block; height:1px; background:var(--hairline-strong);
  margin-bottom:clamp(26px,3vw,36px);
}
html.js-motion .process-line{
  transform:scaleX(0); transform-origin:left center;
  transition:transform 620ms var(--ease);
}
html.js-motion .process-line.is-drawn{ transform:scaleX(1); }

/* CTA micro-interaction — arrow travels 4px, underline stays legible. */
.link-cta span[aria-hidden], .cta-secondary span[aria-hidden], .contact-wa span[aria-hidden]{
  display:inline-block; transition:transform var(--speed-fast) var(--ease);
}
.link-cta:hover span[aria-hidden], .link-cta:focus-visible span[aria-hidden],
.cta-secondary:hover span[aria-hidden], .cta-secondary:focus-visible span[aria-hidden],
.contact-wa:hover span[aria-hidden], .contact-wa:focus-visible span[aria-hidden]{
  transform:translate3d(4px,0,0);
}

/* — medical illustration figure (disease / symptom / service pages) — */
.med-figure{
  margin:clamp(26px,3.4vw,38px) 0 0; max-width:38rem;
  border-top:1px solid var(--hairline-strong); padding-top:clamp(18px,2.2vw,24px);
}
.med-figure img{
  width:100%; height:auto; display:block;
  border:1px solid var(--hairline); background:var(--warm);
}
.med-figure figcaption{
  margin-top:11px; font-family:var(--font-mono); font-size:.72rem; line-height:1.6;
  letter-spacing:.05em; color:var(--navy-faint); max-width:34rem;
}

/* — homepage proctology block: illustration + editorial disease list — */
.focus-visual{
  display:grid; grid-template-columns:minmax(0,270px) minmax(0,1fr);
  gap:clamp(26px,3.6vw,54px); align-items:start;
}
.focus-visual .med-figure{ margin-top:0; border-top:0; padding-top:0; max-width:none; }
@media (max-width:860px){
  .focus-visual{ grid-template-columns:1fr; }
  .focus-visual .med-figure{ max-width:26rem; order:2; margin-top:clamp(24px,3vw,32px); }
  .focus-visual .focus-list{ order:1; }
}

/* — Değerlendirmeden Takibe: editorial split, portrait is not a hero — */
.care-split{
  display:grid; grid-template-columns:minmax(0,208px) minmax(0,1fr);
  gap:clamp(24px,3.4vw,48px); align-items:center;
}
.care-portrait{ margin:0; }
.care-portrait img{
  width:100%; height:auto; display:block; border:1px solid var(--hairline);
}
.care-portrait figcaption{
  margin-top:10px; font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.05em; color:var(--navy-faint);
}
@media (max-width:700px){
  .care-split{ grid-template-columns:1fr; gap:22px; }
  .care-portrait{ max-width:200px; }
}

/* — patient guide: real links only — */
.guide-index a{
  display:inline-flex; align-items:center; min-height:32px;
  color:var(--navy); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--speed-fast) var(--ease), border-color var(--speed-fast) var(--ease);
}
.guide-index a:hover, .guide-index a:focus-visible{ color:var(--green-ink); border-color:var(--green); }

/* — reduced motion: content is immediate, complete and static — */
@media (prefers-reduced-motion: reduce){
  html.js-motion .brand-logo-svg,
  html.js-motion .brand-logo-svg .logo-accent,
  html.js-motion .hero-figure picture img{
    animation:none !important; opacity:1 !important;
    transform:none !important; clip-path:none !important;
  }
  html.js-motion .process-line{ transition:none !important; transform:none !important; }
  .link-cta span[aria-hidden], .cta-secondary span[aria-hidden], .contact-wa span[aria-hidden]{ transition:none; }
  .link-cta:hover span[aria-hidden], .cta-secondary:hover span[aria-hidden],
  .contact-wa:hover span[aria-hidden]{ transform:none !important; }
}

/* — safety lists (§9 clinical safety areas): visible markers, calm tone — */
.safety-list{ list-style:disc; padding-left:1.3em; margin:0 0 1.15em; color:var(--navy-soft); }
.safety-list li{ margin-bottom:.45em; }

/* — disease illustrations (raster, Phase 07) — */
.med-figure img.is-illus{ max-width:22rem; aspect-ratio:1/1; object-fit:contain; background:#fff; }
.focus-row.has-thumb{ grid-template-columns:72px 2.4ch minmax(0,1fr) minmax(0,1.4fr) auto; }
.focus-thumb{ width:72px; height:72px; object-fit:contain; background:#fff; border:1px solid var(--hairline); border-radius:var(--radius); }
@media (max-width:760px){
  .focus-row.has-thumb{ grid-template-columns:56px 1fr auto; }
  .focus-row.has-thumb .num{ display:none; }
  .focus-thumb{ width:56px; height:56px; }
}

/* — consent banner (Phase 07) — */
.consent-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:200; max-width:560px;
  background:var(--paper); color:var(--ink); border:1px solid var(--hairline-strong); border-radius:var(--radius);
  padding:18px 20px; display:grid; gap:14px; box-shadow:0 8px 28px rgba(34,50,73,.14);
}
.consent-text{ margin:0; font-size:.95rem; line-height:1.55; color:var(--navy); }
.consent-text a{ color:var(--green-ink); }
.consent-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.consent-btn{
  flex:1 1 120px; min-height:46px; padding:0 18px; border-radius:var(--radius); cursor:pointer;
  font:500 .95rem var(--font-body); background:var(--paper); color:var(--navy); border:1px solid var(--navy);
}
.consent-btn.is-accept{ background:var(--navy); color:#fff; }
.consent-btn:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
@media (max-width:900px){ .consent-banner{ bottom:calc(84px + env(safe-area-inset-bottom)); } }

/* — hemoroid page: MDK highlight band — */
.mdk-hero{
  margin-top:clamp(20px,3vw,32px); background:var(--navy); color:#fff; border-radius:var(--radius);
  padding:clamp(24px,4vw,44px); display:grid; gap:clamp(20px,3vw,32px);
}
.mdk-hero-kicker{ font-family:var(--font-mono); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:#7FE0BE; }
.mdk-hero-title{ font-size:clamp(1.6rem,1.1rem + 2vw,2.5rem); font-weight:600; line-height:1.12; letter-spacing:-.015em; margin:.3em 0 .35em; color:#fff; text-wrap:balance; }
.mdk-hero-by{ margin:0; font-size:1.02rem; color:#D6DEE8; max-width:44rem; }
.mdk-hero-facts{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,2vw,20px); }
.mdk-hero-facts li{ border-top:2px solid var(--green); padding-top:14px; font-size:clamp(1.02rem,.95rem + .35vw,1.2rem); font-weight:500; line-height:1.35; color:#fff; }
.mdk-hero-facts .n{ display:block; font-family:var(--font-mono); font-size:.78rem; color:#7FE0BE; margin-bottom:6px; font-weight:400; }
.mdk-hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; }
.mdk-hero-btn{
  display:inline-flex; align-items:center; min-height:52px; padding:0 22px; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.55); color:#fff; text-decoration:none; font-weight:500;
}
.mdk-hero-btn.is-primary{ background:var(--green); border-color:var(--green); color:#06281C; }
.mdk-hero-btn:hover, .mdk-hero-btn:focus-visible{ border-color:#fff; }
.mdk-hero-btn.is-primary:hover, .mdk-hero-btn.is-primary:focus-visible{ background:#22C98F; }
.mdk-hero-more{ color:#fff; text-decoration:underline; text-underline-offset:4px; min-height:44px; display:inline-flex; align-items:center; }
@media (max-width:860px){ .mdk-hero-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:420px){ .mdk-hero-btn{ width:100%; justify-content:center; } }

/* — mobile/tablet menu: distinct panel + dimmed page behind (Phase 07) — */
@media (max-width:900px){
  .mobile-nav{
    background:var(--warm);
    border-top:2px solid var(--green);
    box-shadow:0 12px 32px rgba(34,50,73,.22);
    max-height:calc(100dvh - 72px); overflow-y:auto; overscroll-behavior:contain;
  }
  .mobile-nav a{ min-height:52px; display:flex; align-items:center; padding:0; font-size:1.08rem; font-weight:500; border-bottom-color:var(--hairline-strong); }
  .mobile-nav a.is-active{ color:var(--green-ink); }
  .mobile-nav .header-cta{ display:flex; justify-content:center; min-height:52px; background:var(--navy); color:#fff; border:0; border-radius:var(--radius); margin:20px clamp(20px,5vw,64px) 24px; }
  body:has(.mobile-nav-wrap[open]){ overflow:hidden; }
  body:has(.mobile-nav-wrap[open])::after{ content:""; position:fixed; inset:0; background:rgba(34,50,73,.55); z-index:99; }
  body:has(.mobile-nav-wrap[open]) .mobile-cta-bar{ display:none; }
}