/* =========================================================
   International Voice Clinic — style.css
   B · Clinical White: lacivert + beyaz + gri, vurgu rengi yok.
   Ayrım gölgeyle değil 1px çizgiyle yapılır.
   ========================================================= */

/* ---------- Fontlar (self-hosted; KVKK + LCP) ---------- */
/* Her ağırlık için latin-ext ve latin blokları. unicode-range
   değerleri Google Fonts CSS2 API yanıtından birebir alınır. */

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(../fonts/archivo-400-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:'Archivo';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(../fonts/archivo-400-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;
}

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(../fonts/archivo-500-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:'Archivo';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(../fonts/archivo-500-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;
}

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(../fonts/archivo-600-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:'Archivo';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(../fonts/archivo-600-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;
}

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(../fonts/archivo-700-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:'Archivo';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(../fonts/archivo-700-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;
}

/* ---------- Tasarım tokenları ---------- */

:root{
  --ink:#14161A;      --ink-2:#374151;    --ink-3:#6B7280;
  --navy:#2F4B78;     --navy-dark:#24395C; --navy-tint:#EEF1F6;
  /* --line = saç teli ayırıcı (liste satırları, bölüm ayrımı, kart kenarı).
     --line-2 = güçlü kenar; YALNIZCA tıklanabilir veya çerçevelenmiş bir
     yüzeyin sınırında (ghost buton kenarı, harita çerçevesi, sticky bar üst
     kenarı). İkisi de açık soğuk gri olduğu için kayma riski var. */
  --line:#E5E7EB;     --line-2:#CBD2DC;
  --surface:#F7F8FA;  --white:#fff;

  --font:Archivo,system-ui,-apple-system,'Segoe UI',sans-serif;

  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  --r-btn:2px; --r-box:4px;
  --t-fast:120ms cubic-bezier(.2,.8,.2,1);
  --t-menu:180ms cubic-bezier(.2,.8,.2,1);

  --measure:68ch;
  --container:1200px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-weight:400;font-size:16px;line-height:1.65;
  color:var(--ink-2);background:var(--white);overflow-x:hidden}
/* overflow-x:hidden BURADA, body'de kalmalı. html'de overflow tanımlı olmadığı
   için UA bunu viewport'a propagate eder ve arada kaydırma konteyneri OLUŞMAZ;
   sticky iletişim barı (Task 4) ve sticky sağ ray (Task 11) bu sayede çalışır.
   ARA BİR SARMALAYICIYA asla overflow eklemeyin — ampirik olarak doğrulandı:
   ara div'de overflow-x:hidden sticky'yi sessizce kırıyor. Yatay taşma
   görürseniz taşan elementi düzeltin, sarmalayıcıyla saklamayın. */
@media (min-width:768px){body{font-size:17px;line-height:1.7}}

img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--navy-dark)}

/* Focus halkası — hiçbir yerde kaldırılmaz */
:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
/* Lacivert yüzeylerde (güven şeridi, koyu footer) lacivert halka görünmez —
   1:1 kontrast, WCAG 2.4.7 ihlali. O yüzeyler `.on-navy` sınıfı taşır. */
.on-navy :focus-visible{outline-color:var(--white)}

/* Tipografi ölçeği — tek modüler ölçek, clamp() ile akışkan */
h1,h2,h3{color:var(--ink);font-weight:600;line-height:1.14;text-wrap:balance;
  overflow-wrap:break-word}
.display{font-size:clamp(2rem,1.25rem+3.4vw,3.5rem);letter-spacing:-.035em;line-height:1.04}
h1{font-size:clamp(1.75rem,1.2rem+2.4vw,2.75rem);letter-spacing:-.032em;line-height:1.08}
h2{font-size:clamp(1.375rem,1.2rem+.9vw,1.75rem);letter-spacing:-.022em}
/* h3, 768px'de body'nin 17px'ine karşı ~17.34px'e geliyordu — sadece 0.3px
   fark, hiyerarşi tamamen ağırlık ve renge kalıyordu. Ölçek genişletildi. */
h3{font-size:clamp(1.125rem,1rem+.5vw,1.375rem);letter-spacing:-.015em;line-height:1.25}

.eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.meta{font-size:13px;letter-spacing:.01em;color:var(--ink-3)}

.container{max-width:var(--container);margin-inline:auto;padding-inline:20px}
@media (min-width:768px){.container{padding-inline:32px}}
@media (min-width:1200px){.container{padding-inline:40px}}

.section{padding-block:34px}
@media (min-width:768px){.section{padding-block:64px}}
@media (min-width:1200px){.section{padding-block:96px}}
.section--alt{background:var(--surface)}

/* Hareket kısıtlaması */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important}
  html{scroll-behavior:auto}
}

/* =========================================================
   Task 4 — Header, mobil menü, footer, sticky iletişim barı
   ========================================================= */

/* ---------- Skip link — yalnızca focus'ta görünür ---------- */
.skip{
  position:absolute;top:-40px;left:0;z-index:100;
  background:var(--navy);color:var(--white);
  padding:var(--s-2) var(--s-4);font-weight:600;
  transition:top var(--t-fast);
}
.skip:focus{top:0}

/* ---------- Header ---------- */
.hd{background:var(--white);border-bottom:1px solid var(--line)}
.hd__barin{display:flex;align-items:center;gap:var(--s-4);padding-block:var(--s-3)}

.hd__logo{display:inline-flex;align-items:center;margin-right:auto}
.hd__logo img{height:44px;width:auto}
@media (min-width:900px){.hd__logo img{height:60px}}

/* Üst yardımcı alan: sosyal medya + telefonlar (sağda) */
.hd__util{display:none}
@media (min-width:768px){.hd__util{display:flex;flex-direction:column;align-items:flex-end;gap:6px}}
.hd__social{list-style:none;display:flex;align-items:center;gap:14px}
.hd__social a{display:inline-flex;color:var(--ink-3);transition:color var(--t-fast)}
.hd__social a:hover{color:var(--navy)}
.hd__phones{display:flex;gap:var(--s-4);font-size:14px}
.hd__phones a{color:var(--ink);font-weight:600}
.hd__phones a:hover{color:var(--navy)}
.hd__pc{color:var(--ink-3);font-weight:500}

/* Navy nav bandı (masaüstü) */
.navbar{display:none;background:var(--navy)}
.navbar :focus-visible{outline-color:var(--white)}
@media (min-width:900px){
  .navbar{display:block}
  .navbar ul{list-style:none;display:flex;align-items:center;gap:var(--s-6)}
  .navbar a{display:inline-flex;align-items:center;min-height:48px;color:rgba(255,255,255,.82);
    font-weight:500;font-size:15px;border-bottom:2px solid transparent}
  .navbar a:hover{color:#fff}
  .navbar a[aria-current="page"]{color:#fff;border-bottom-color:#fff}
}

/* ---------- Hamburger ---------- */
.burger{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;width:44px;height:44px;background:none;border:0;cursor:pointer;
}
.burger span{display:block;width:22px;height:2px;background:var(--ink)}
@media (min-width:900px){.burger{display:none}}

/* ---------- Mobil menü (tam ekran sheet) ---------- */
.menu{
  position:fixed;inset:0;z-index:90;background:var(--white);
  padding:var(--s-7) var(--s-5);overflow-y:auto;
  box-shadow:0 8px 24px -12px rgba(20,22,26,.18);
}
.menu[hidden]{display:none}
.menu ul{list-style:none;display:flex;flex-direction:column}
.menu a{
  display:flex;align-items:center;min-height:44px;
  padding-block:var(--s-3);border-bottom:1px solid var(--line);
  font-size:1.125rem;font-weight:500;color:var(--ink);
}
.menu a[aria-current="page"]{color:var(--navy)}
@media (min-width:900px){.menu{display:none}}

/* Menü açılırken hafif giriş — durum bildirimi, dekoratif değil */
.menu:not([hidden]){animation:menu-in var(--t-menu) both}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* Mobil menü açıkken arka planın kaydırılmasını kilitle */
body.is-locked{overflow:hidden}

/* ---------- Footer ---------- */
.ft{background:var(--ink);color:rgba(255,255,255,.72)}
.ft a{color:var(--white)}
.ft a:hover{color:rgba(255,255,255,.8)}

.ft__in{
  display:grid;gap:var(--s-7);
  padding-block:var(--s-8) var(--s-6);
}
@media (min-width:900px){
  .ft__in{grid-template-columns:repeat(4,1fr)}
}

.ft__logo{color:var(--white);font-weight:600;font-size:1.125rem;margin-bottom:var(--s-3)}
.ft address{font-style:normal;margin-bottom:var(--s-4);line-height:1.6}

.ft__h{
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:var(--s-3);
}
.ft__col ul{list-style:none}
.ft__col li{margin-bottom:var(--s-2)}

.ft__hours{padding-block:0 var(--s-6)}
.ft__hours-t{border-collapse:collapse}
.ft__hours-t th,.ft__hours-t td{
  text-align:left;font-weight:400;padding:var(--s-1) var(--s-5) var(--s-1) 0;
}

/* The fixed 56px sticky contact bar (<900px) overlaps whatever the document
   ends with, and 24px of padding is not 56px — the copyright line sat under the
   bar on every page. The compensation lives on the footer's last block rather
   than on <body> so the dark footer background keeps running behind the bar
   instead of leaving a white strip. Mirrors .sticky's own safe-area padding. */
.ft__legal{
  border-top:1px solid rgba(255,255,255,.14);
  padding-block:var(--s-5);
  padding-bottom:calc(var(--s-5) + 56px + env(safe-area-inset-bottom));
}
@media (min-width:900px){
  /* The bar is display:none here, so there is nothing to clear. */
  .ft__legal{padding-bottom:var(--s-5)}
}
.ft__legal-list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-5);margin-bottom:var(--s-4)}
.ft__disclaimer{font-size:13px;color:rgba(255,255,255,.55);margin-bottom:var(--s-2);max-width:var(--measure)}

/* ---------- Sticky iletişim barı (<900px) ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:grid;grid-template-columns:repeat(3,1fr);
  height:56px;padding-bottom:env(safe-area-inset-bottom);
  background:var(--navy);
  box-shadow:0 -6px 18px -8px rgba(20,22,26,.18);
}
.sticky a{
  display:flex;align-items:center;justify-content:center;min-height:44px;
  color:var(--white);font-weight:600;font-size:14px;
  border-inline-start:1px solid rgba(255,255,255,.18);
}
.sticky a:first-child{border-inline-start:0}
.sticky a:hover{color:var(--white);background:var(--navy-dark)}
@media (min-width:900px){.sticky{display:none}}

/* =========================================================
   Task 6 — Homepage sections
   ========================================================= */

/* ---------- Buttons (shared: hero, appointment section) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:var(--s-3) var(--s-6);
  border-radius:var(--r-btn);font-weight:600;font-size:16px;
  border:1px solid transparent;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.btn--primary{background:var(--navy);color:var(--white)}
.btn--primary:hover{background:var(--navy-dark);color:var(--white)}
.btn--ghost{background:var(--white);color:var(--navy);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--navy-tint);color:var(--navy-dark)}
.on-navy .btn--ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5)}
.on-navy .btn--ghost:hover{background:rgba(255,255,255,.12);color:var(--white)}

/* ---------- Hero ---------- */
.hero__in{max-width:44rem}
.hero__lead{font-size:1.0625rem;color:var(--ink-2);margin-top:var(--s-4);max-width:var(--measure)}
@media (min-width:768px){.hero__lead{font-size:1.1875rem}}
.hero h1{margin-top:var(--s-3)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-6)}

/* ---------- Symptom router ---------- */
.symptoms h2{max-width:var(--measure)}
.symptoms__note{color:var(--ink-2);margin-top:var(--s-3);max-width:var(--measure)}
.symptoms__list{margin-top:var(--s-6);border-top:1px solid var(--line)}
.symptoms__row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  min-height:56px;padding-block:var(--s-4);
  border-bottom:1px solid var(--line);
  color:var(--ink);font-weight:500;
  transition:color var(--t-fast),background var(--t-fast);
}
.symptoms__row:hover,.symptoms__row:focus-visible{color:var(--navy);background:var(--surface)}
.symptoms__row::after{
  content:'\203A';font-size:1.375rem;line-height:1;flex-shrink:0;
  color:var(--ink-3);transition:color var(--t-fast);
}
.symptoms__row:hover::after,.symptoms__row:focus-visible::after{color:var(--navy)}

/* ---------- Trust strip ---------- */
.trust{background:var(--navy);color:var(--white)}
.trust__grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--s-6) var(--s-4);
}
.trust__grid .trust__item:last-child{grid-column:1 / -1}
/* ≥600px: dört sayı yan yana, editörlük satırı altta tam genişlik bant.
   Beşi eşit kolona bölmek yanlış olur — dört madde kısa sayılar
   ("250+", "2013"), beşincisi ise bir kitap adı taşıyan uzun bir metin;
   beşte bire sıkışınca okunmuyor. */
@media (min-width:600px){
  .trust__grid{grid-template-columns:repeat(4,1fr)}
}
.trust__num{color:var(--white);font-weight:600;font-size:1.375rem;letter-spacing:-.015em}
.trust__label{color:rgba(255,255,255,.72);font-size:13px;margin-top:var(--s-1)}

/* ---------- Physician strip ---------- */
.physician__in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-6)}
.physician__img{width:150px;height:150px;object-fit:cover;border-radius:var(--r-box);flex-shrink:0}
.physician__body{flex:1 1 320px;min-width:0}
.physician__body h2{margin-top:var(--s-1)}
.physician__body p{margin-top:var(--s-3);max-width:var(--measure)}
.link-more{display:inline-block;margin-top:var(--s-4);color:var(--navy);font-weight:600}
.link-more:hover{color:var(--navy-dark)}

/* ---------- What we do ---------- */
.services__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--s-7) var(--s-6);margin-top:var(--s-6);
}
.services__col{border-top:1px solid var(--line);padding-top:var(--s-4)}
.services__col ul{list-style:none;margin-top:var(--s-3)}
.services__col li{margin-bottom:var(--s-2)}

/* ---------- Professional voice users ---------- */
.pro-voice__in > div{max-width:var(--measure)}
.pro-voice p{margin-top:var(--s-3)}

/* ---------- Reference library ---------- */
.library__grid{
  list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--s-4);margin-top:var(--s-6);
}
.library__item{
  display:block;padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-box);
  transition:border-color var(--t-fast);
}
.library__item:hover{border-color:var(--line-2)}
.library__name{color:var(--navy);font-weight:600}

/* ---------- Appointment & location ---------- */
.appt__in{display:grid;gap:var(--s-7)}
@media (min-width:900px){.appt__in{grid-template-columns:1fr 1fr}}
.appt__address{font-style:normal;margin-top:var(--s-4);line-height:1.7}
.appt__hours{margin-top:var(--s-5);border-collapse:collapse}
.appt__hours th,.appt__hours td{text-align:left;font-weight:400;padding:var(--s-1) var(--s-5) var(--s-1) 0}
.appt__hours th{color:var(--ink)}
.appt__in > p{margin-top:var(--s-4)}
.appt__channels{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3)}
.appt__channels .btn{width:100%}
@media (min-width:480px){.appt__channels .btn{width:auto}}

/* =========================================================
   Task 7 — About page biography
   ========================================================= */

/* Flowing prose, constrained to reading measure. H2s carry a hairline rule
   above them, per spec 4.2 — separation by line, not by shadow or colour block.
   The rules themselves live with .prose in the Task 11 block below: one house
   pattern, declared once. */

/* Credential/role list — hairlines and type, no cards, no dots. */
.bio-list{list-style:none;margin-top:var(--s-4)}
.bio-list li{padding-block:var(--s-3);border-top:1px solid var(--line);color:var(--ink-2)}
.bio-list li:last-child{border-bottom:1px solid var(--line)}

/* =========================================================
   Task 8 — Contact & appointment pages
   ========================================================= */

/* Static OSM map image. border-radius on the <img> itself clips the
   replaced content directly — no wrapper, so no overflow property is
   needed (an overflow wrapper here would risk the sticky bar bug). */
.map{margin-top:var(--s-6)}
.map__img{width:100%;height:auto;border:1px solid var(--line-2);border-radius:var(--r-box)}

/* =========================================================
   Task 9 — Hub pages (voice, vocal-cord-diseases, voice-surgery)
   Grouped article card grid. Cards are bordered, not elevated —
   hover changes only border-color, per B · Clinical White (spec §4).
   ========================================================= */
.hub-lead{max-width:var(--measure)}

.hub-group{margin-top:var(--s-8)}
.hub-group:first-child{margin-top:0}
.hub-group h2{border-top:1px solid var(--line);padding-top:var(--s-4)}
.hub-group:first-child h2{border-top:0;padding-top:0}

/* auto-fill, not auto-fit: auto-fit collapses the empty tracks and lets one
   surviving card stretch across the full 1200px container. That happens as soon
   as a group holds fewer than three cards — which is what a broken slug in a
   related list produces, and is latent in the hubs' smaller sub-groups too.
   (spec §4.4 still says auto-fit; flagged for the Task 21 spec sync.) */
.cards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:var(--s-5);margin-top:var(--s-6);
}
a.card{
  display:flex;flex-direction:column;height:100%;
  border:1px solid var(--line);border-radius:var(--r-box);
  background:var(--white);color:inherit;text-decoration:none;
  transition:border-color var(--t-fast);
}
a.card:hover,a.card:focus-visible{border-color:var(--line-2);color:inherit}

/* object-fit:cover is required, not cosmetic: 8 of the 57 article images
   are not 800x600 (626x417, 1024x576 16:9, 1000x667, 1000x918) and would
   be visibly squashed inside a bare aspect-ratio:4/3 box otherwise.
   .art-hero is reserved for the Task 11 article-page hero image, which
   shares the same crop rule. */
.card img, .art-hero img{width:100%;aspect-ratio:4/3;object-fit:cover}

.card__body{padding:var(--s-4);flex:1 1 auto}
/* Image-free cards (spec §7.4) get extra top padding so the title sits
   where the image would have, instead of hugging the card's top edge. */
.card--noimg .card__body{padding-top:var(--s-5)}
.card__title{margin:0}
.card__excerpt{color:var(--ink-2);font-size:14px;margin-top:var(--s-2);line-height:1.55}

/* =========================================================
   Task 10 — Sitemap (dense list) and 404 page
   No cards, no icons: a hairline-separated list and clear type
   hierarchy carry the page, per spec §4 "B · Clinical White".
   Reuses .hub-group / .hub-lead for section rhythm (Task 9).
   ========================================================= */
.sitemap-list{list-style:none;margin-top:var(--s-4);border-top:1px solid var(--line)}
.sitemap-list li{border-bottom:1px solid var(--line)}
.sitemap-list a{display:block;padding-block:var(--s-3);color:var(--ink);font-weight:500}
.sitemap-list a:hover,.sitemap-list a:focus-visible{color:var(--navy)}

/* =========================================================
   Task 11 — Article template
   Breadcrumb, byline, hero, TOC, prose, sticky right rail,
   "What to do next" box. No new colours: every value below
   resolves to one of the ten palette tokens from :root.
   Separation is 1px --line, never a shadow; radius stays 2/4px.
   ========================================================= */

/* ---------- Breadcrumb ---------- */
/* The '›' separator is generated, so it is not part of the link text and does
   not have to be a real character in the DOM. It repeats the hierarchy the
   BreadcrumbList JSON-LD in article-open.php describes. */
.crumbs ol{
  list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--s-1) var(--s-2);
  font-size:13px;letter-spacing:.01em;color:var(--ink-3);
}
.crumbs li{display:flex;align-items:baseline;gap:var(--s-2);min-width:0}
.crumbs li + li::before{content:'\203A';color:var(--ink-3)}
/* padding-block, not decoration: at 13px the link box is ~21px tall, half the
   44px target every other link on the site meets (.nav a, .menu a, .btn,
   .sticky a, .sitemap-list a). 12px top and bottom takes it to ~45px. The
   baseline alignment above keeps the separators and the current-page span
   sitting on the same line despite the taller boxes. .byline a stays untouched:
   it is a link inside a sentence, where a 44px box would break the line. */
.crumbs a{display:inline-block;padding-block:var(--s-3);color:var(--ink-3)}
.crumbs a:hover{color:var(--navy)}
/* Long single-word article titles must wrap here too, not push the page wide. */
.crumbs [aria-current="page"]{color:var(--ink-2);overflow-wrap:break-word}

/* ---------- Article head ---------- */
/* Constrained to the reading measure so the H1, the byline and the hero image
   share the prose column's edges below 900px. At and above 900px the shared
   width comes from .art__main, the grid's first track — see the grid below. */
.art__head{max-width:var(--measure)}
.art__head h1{margin-top:var(--s-5)}

.byline{font-size:13px;letter-spacing:.01em;color:var(--ink-3);margin-top:var(--s-4)}
.byline a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.byline a:hover{color:var(--navy)}

/* Border and radius sit on the <img> itself, as with .map__img — a wrapper with
   overflow:hidden would be the one thing that breaks the sticky rail below. */
.art-hero{margin-top:var(--s-5)}
.art-hero img{border:1px solid var(--line);border-radius:var(--r-box)}

/* ---------- Table of contents ---------- */
/* No animation on open/close: height animation on <details> janks (spec §4.5).
   summary keeps its default display so the disclosure marker survives; the
   44px touch target comes from padding, not from display:flex. */
.toc{
  margin-top:var(--s-6);padding:0 var(--s-4);
  border:1px solid var(--line);border-radius:var(--r-box);
}
.toc summary{cursor:pointer;font-weight:600;color:var(--ink);padding-block:var(--s-3)}
.toc ol{margin:0 0 var(--s-4) var(--s-5);color:var(--ink-3)}
.toc li{margin-top:var(--s-2)}
.toc a{color:var(--navy)}

/* ---------- Body + right rail ---------- */
/* ≥900px the article becomes two columns (spec §4.4). The first track is
   minmax(0, 68ch): it takes the reading measure where there is room and shrinks
   rather than overflowing where there is not — between 900 and 1200px the
   viewport cannot fit 68ch plus a 280px rail, and shrinking the prose is the
   correct trade against a horizontal scrollbar.
   .art__main holds the head, the prose and the CTA, so all three follow that
   track together. They used to sit outside the grid on their own max-width:68ch
   and were measured 138px wider than the prose at 900px — same left edge,
   ragged right edge, which is exactly the kind of misalignment nobody reports. */
.art__grid{margin-top:var(--s-7)}
.art__main{min-width:0}
@media (min-width:900px){
  .art__grid{
    display:grid;grid-template-columns:minmax(0,var(--measure)) 280px;
    gap:var(--s-6);align-items:start;
  }
  /* Ungrouped articles have no rail; they must not leave its column empty. */
  .art__grid--norail{grid-template-columns:minmax(0,var(--measure))}
}

/* The rail is supplementary navigation, so below 900px it is removed rather
   than stacked — the same links are already one tap away in the related cards
   and the footer. No `overflow` anywhere on its ancestors, or sticky dies. */
.rail{display:none}
@media (min-width:900px){
  .rail{display:block;position:sticky;top:var(--s-5)}
}
.rail__h{
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);padding-bottom:var(--s-3);border-bottom:1px solid var(--line);
}
.rail ul{list-style:none}
.rail li{border-bottom:1px solid var(--line)}
.rail a{display:block;padding-block:var(--s-3);font-size:14px;line-height:1.45;color:var(--ink)}
.rail a:hover,.rail a:focus-visible{color:var(--navy)}
.rail__all{display:inline-block;margin-top:var(--s-4);font-size:13px;font-weight:600;color:var(--navy)}

/* ---------- Prose ---------- */
/* 68ch measure (spec §4.2). H2s carry a hairline rule above them. One house
   pattern for flowing text, so it is declared once for both users: .prose is
   the article body, .bio-prose the about page. Task 7 wrote these rules for
   .bio-prose and Task 11 wrote them again for .prose; the comment claimed one
   pattern while the file implemented it twice.
   Paragraph rhythm is 16px, not 12px: the line height here is ~28.9px, so 12px
   between paragraphs read as one block of text over a long medical article. */
.prose,.bio-prose{max-width:var(--measure);color:var(--ink-2)}
.prose > * + *,.bio-prose p{margin-top:var(--s-4)}
.prose h2,.bio-prose h2{border-top:1px solid var(--line);padding-top:var(--s-4);margin-top:var(--s-8)}
.prose h2:first-child,.bio-prose h2:first-child{margin-top:0;border-top:0;padding-top:0}
.prose h3{margin-top:var(--s-5)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{text-decoration:underline;text-underline-offset:2px}
.prose ul,.prose ol{padding-left:var(--s-5)}
.prose li + li{margin-top:var(--s-2)}
.prose li::marker{color:var(--ink-3)}
/* ---------- In-body clinical figures (Task 11b) ---------- */
/* These are deliberately NOT cropped. .card and .art-hero force
   aspect-ratio:4/3 with object-fit:cover because a grid of cards has to be
   uniform; an endoscopy frame is evidence, and cropping it to fit a box removes
   part of what the picture shows. The 37 in-body images run from 859x280 to
   1080x1080 and every one of them is rendered whole.

   CLS is still 0. ivc_figure() always prints width and height, and the browser
   derives the image's default aspect-ratio from that attribute pair, so the box
   is reserved before a byte arrives. That attribute pair is also why width is
   left auto: forcing width:100% would blow the 270x270 and 278x417 images up to
   the 68ch measure and turn a clinical photograph into a blur. Small images sit
   at their natural size; only oversized ones are scaled down by max-width. */
.prose figure{margin-top:var(--s-5)}
.prose figure img{
  display:block;max-width:100%;height:auto;
  border:1px solid var(--line);border-radius:var(--r-box);
}
.prose figcaption{font-size:13px;color:var(--ink-3);margin-top:var(--s-2)}

/* A set of frames the article describes only as a group: the figcaption carries
   the author's own sentence and the individual images keep alt="" (spec 4.6
   image-alt rule). Two columns rather than auto-fit/auto-fill, because the one
   group on the site is four equal frames and a ragged last row would read as a
   layout bug. Below 520px they stack; the frames are 426px wide and two of them
   in a phone-width measure would be unreadable. */
.prose .fig--group{display:grid;gap:var(--s-3)}
.prose .fig--group img{width:100%}
.prose .fig--group figcaption{grid-column:1/-1}
@media (min-width:520px){.prose .fig--group{grid-template-columns:1fr 1fr}}
/* Wide tables scroll inside their own box (spec §4.6-10). This wrapper is not
   an ancestor of .rail, so its overflow cannot affect the sticky rail. */
.prose .table-wrap{overflow-x:auto;margin-top:var(--s-5)}
.prose table{border-collapse:collapse;min-width:100%}
.prose th,.prose td{
  text-align:left;font-weight:400;vertical-align:top;
  padding:var(--s-2) var(--s-4) var(--s-2) 0;border-bottom:1px solid var(--line);
}
.prose th{color:var(--ink);font-weight:600}

/* ---------- "What to do next" ---------- */
/* A navy edge and nothing else: no fill, no shadow, no accent colour. */
.cta{
  max-width:var(--measure);margin-top:var(--s-8);padding:var(--s-5);
  border:1px solid var(--navy);border-left-width:3px;border-radius:var(--r-box);
}
/* Same step as h3: this is an h2 in the document outline but a box label
   typographically. It used to hard-code the floor of that clamp, which made it
   the one heading on the site that never scaled with the viewport. */
.cta__h{font-size:clamp(1.125rem,1rem+.5vw,1.375rem);letter-spacing:-.015em;line-height:1.25}
.cta p{margin-top:var(--s-3);color:var(--ink-2)}
.cta__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}

/* =========================================================
   Ana sayfa — görsel hero + referans kütüphanesi görselli kartlar
   (2026-08-16, kullanıcı isteği: görsel zenginlik). Koyu lacivert
   hero'da metin solda, şarkıcı görseli sağda; kartlar beyaz,
   ayrım 1px çizgi + ince hareketle (gölge değil, kimliğe sadık).
   ========================================================= */
/* Tam-genişlik hero slider, metin görselin üstünde */
.hero3{position:relative;isolation:isolate;background:var(--navy-dark);color:#fff;overflow:hidden}
.hero3__slider{position:absolute;inset:0;z-index:0}
.hero3 .hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% center}
.hero3__overlay{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg, rgba(18,28,48,.94) 0%, rgba(18,28,48,.80) 30%, rgba(18,28,48,.34) 58%, rgba(18,28,48,.05) 82%),
  linear-gradient(0deg, rgba(18,28,48,.35), rgba(18,28,48,0) 42%)}
.hero3__in{position:relative;z-index:2;display:flex;align-items:center;min-height:clamp(440px,54vw,600px)}
.hero3__text{max-width:38rem;padding-block:44px}
.hero3 .eyebrow{color:rgba(255,255,255,.72)}
.hero3 h1{color:#fff;margin-top:var(--s-3);text-shadow:0 1px 18px rgba(10,16,30,.45)}
.hero3__lead{font-size:1.0625rem;color:rgba(255,255,255,.92);margin-top:var(--s-4);max-width:33rem;text-wrap:pretty;text-shadow:0 1px 12px rgba(10,16,30,.4)}
.hero3 .hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-6)}
@media (min-width:768px){.hero3__lead{font-size:1.1875rem}}
@media (min-width:900px){.hero3 .hero-slide{object-position:right center}}

.btn--onnavy{background:#fff;color:var(--navy-dark)}
.btn--onnavy:hover{background:var(--navy-tint);color:var(--navy-dark)}
.btn--ghost-navy{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn--ghost-navy:hover{background:rgba(255,255,255,.12);color:#fff}

.library__note{color:var(--ink-2);margin-top:var(--s-3);max-width:var(--measure)}
.library__grid{
  list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:var(--s-4);margin-top:var(--s-6);
}
.libcard{
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-box);overflow:hidden;
  transition:border-color var(--t-fast),transform var(--t-fast);
}
.libcard__img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--navy-tint)}
.libcard__body{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-4)}
.libcard__name{color:var(--ink);font-weight:600}
.libcard__go{color:var(--navy);font-size:1.25rem;line-height:1;transition:transform var(--t-fast),color var(--t-fast)}
.libcard:hover{border-color:var(--line-2);transform:translateY(-2px)}
.libcard:hover .libcard__go{transform:translateX(3px);color:var(--navy-dark)}
@media (prefers-reduced-motion:reduce){.libcard,.libcard:hover{transition:none;transform:none}.libcard:hover .libcard__go{transform:none}}

/* Hero slider (crossfade) */
.hero-slide{opacity:0;transition:opacity 700ms cubic-bezier(.4,0,.2,1)}
.hero-slide.is-active{opacity:1}
.hero-dots{position:absolute;left:0;right:0;bottom:14px;z-index:2;display:flex;gap:8px;justify-content:center}
.hero-dot{width:9px;height:9px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.5);transition:width var(--t-fast),background var(--t-fast)}
.hero-dot:hover{background:rgba(255,255,255,.8)}
.hero-dot.is-active{background:#fff;width:24px}
@media (prefers-reduced-motion:reduce){.hero-slide{transition:none}}

/* ---- Master benzeri rötuşlar (2026-08-16): büyük buton, renkli sosyal, büyük logo ---- */
.btn--lg{min-height:58px;padding:var(--s-4) var(--s-7);font-size:17px}

/* Sosyal ikonlar: aralıklı + marka renkli */
.hd__social{gap:18px}
.hd__social svg{width:21px;height:21px}
.hd__social a{color:var(--ink-3);transition:transform var(--t-fast),opacity var(--t-fast)}
.hd__social li:nth-child(1) a{color:#0f1419}   /* X */
.hd__social li:nth-child(2) a{color:#1877F2}   /* Facebook */
.hd__social li:nth-child(3) a{color:#FF0000}   /* YouTube */
.hd__social li:nth-child(4) a{color:#0A66C2}   /* LinkedIn */
.hd__social li:nth-child(5) a{color:#E4405F}   /* Instagram */
.hd__social li:nth-child(6) a{color:#25D366}   /* WhatsApp */
.hd__social a:hover{opacity:.72;transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.hd__social a:hover{transform:none}}

/* Logo daha net ve büyük */
.hd__logo img{height:52px}
@media (min-width:900px){.hd__logo img{height:74px}}

/* Hero noktaları overlay'in üstünde */
.hero3 .hero-dots{z-index:3;bottom:18px}

/* Physician (About) — büyük foto + CV, master düzeni (2026-08-16) */
.physician--big .physician__in{display:grid;gap:var(--s-6);align-items:center}
@media(min-width:768px){.physician--big .physician__in{grid-template-columns:340px 1fr;gap:var(--s-8)}}
.physician--big .physician__img{width:100%;max-width:360px;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-box)}
.physician--big .physician__lead{font-size:1.125rem;color:var(--ink);font-weight:600;margin-top:var(--s-3);max-width:var(--measure)}
.physician--big .physician__body p{margin-top:var(--s-3);max-width:var(--measure)}
.physician--big .physician__body .btn{margin-top:var(--s-5)}

/* Library kartları master gibi: başlık üstte + "Detailed information" butonu */
.libcard__body{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
.libcard__name{font-size:1.0625rem}
.libcard__cta{display:inline-flex;align-items:center;gap:6px;background:var(--navy);color:#fff;
  padding:9px 16px;border-radius:var(--r-btn);font-weight:600;font-size:14px;transition:background var(--t-fast)}
.libcard:hover .libcard__cta{background:var(--navy-dark)}

/* ---- Voice grid 3'lü sıra + intro metni + nav düğme (2026-08-16) ---- */
/* Kartlar: mobil 1, tablet 2, masaüstü 3 kolon (4+2 yerine dengeli 3+3) */
.library__grid{grid-template-columns:1fr}
@media (min-width:600px){.library__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.library__grid{grid-template-columns:repeat(3,1fr)}}
/* Intro: "titles." tek başına alta düşmesin */
.library__note{max-width:52rem;text-wrap:pretty}

/* Navbar item'ları düğme/sekme gibi */
.navbar ul{gap:var(--s-2)}
.navbar a{padding:9px 16px;border-radius:var(--r-box);border-bottom:0;color:rgba(255,255,255,.86);
  transition:background var(--t-fast),color var(--t-fast)}
.navbar a:hover{background:rgba(255,255,255,.12);color:#fff}
.navbar a[aria-current="page"]{background:#fff;color:var(--navy);border-bottom:0}