/* ==========================================================================
   DGMed ECT PORTAL, TASARIM SİSTEMİ
   Sıvı cam (liquid glass) · minimal · degradesiz

   İlkeler
   -------
   1. Degrade yok. Her yüzey ve her metin tek bir düz renk taşır; derinlik
      renk geçişiyle değil, saydamlık + bulanıklık + ince kenar çizgisiyle
      kurulur.
   2. Işıltı yok. Gölgeler yalnızca katman ayrımı için, düşük opaklıkta ve
      nötr; hiçbir öğe renkli hale yaymaz.
   3. İki tema. Değişkenler :root (koyu) ve :root[data-theme="light"]
      altında ikiz tanımlıdır; bileşen kuralları temadan habersizdir.
   4. Etiketler kutu değil metindir. Rozet, çip ve durum göstergeleri
      arka planı ve yuvarlak köşesi olmayan, renk + ağırlıkla ayrışan
      metinlerdir.

   Kontrast: tüm metin/zemin çiftleri her iki temada WCAG AA'yı geçer;
   kritik olanların oranı satır sonunda notludur.
   ========================================================================== */

:root {
    color-scheme: dark;

    /* ---- Zemin ve cam katmanları ------------------------------------------ */
    --bg: #0c1016;
    --bg-sunken: #070a0f;

    --glass-1: rgba(255, 255, 255, 0.045);   /* kart */
    --glass-2: rgba(255, 255, 255, 0.07);    /* kart içi kutu, tablo başlığı */
    --glass-3: rgba(255, 255, 255, 0.11);    /* hover */
    --solid: #141922;                        /* çekmece, açılır menü (blur yok) */
    --viewport: #080b11;                     /* hologram sahnesi */

    --line: rgba(255, 255, 255, 0.11);
    --line-strong: rgba(255, 255, 255, 0.20);

    /* ---- Metin ------------------------------------------------------------
       Saf beyaz koyu zeminde parlama yapar; gövde metni hafif soğuk gridir. */
    --text: #e8ebf2;              /* 15.4:1 */
    --text-2: #a6adbd;            /* 8.0:1  */
    --text-3: #7c8494;            /* 5.0:1  */

    /* ---- Aksan: klinik çelik mavisi (tek düz renk, degrade yok) -----------
       Etkileşimin tek rengi budur; bağlantı ile aksan ayrı renkler olmak
       yerine birleştirildi, arayüzde tek bir "tıklanabilir" sinyali kalıyor. */
    --accent: #7cb0e0;            /* 8.8:1 */
    --accent-2: #a3c8ec;          /* hover */
    --accent-fill: #1f6fb4;       /* dolgu; üzerine beyaz metin 4.9:1 */
    --accent-soft: rgba(124, 176, 224, 0.13);

    --link: #7cb0e0;              /* aksanla aynı */

    /* ---- Modalite: bilimsel yayınların standart mavi/turuncu ikilisi -------
       Renk körlüğünün her tipinde ayrışan tek iki renkli şemadır; ayrıca
       her iki etiket metniyle birlikte taşındığı için renk tek başına
       anlam yüklenmez. */
    --ect: #7cb0e0;
    --ire: #dd9160;               /* 8.0:1 */

    /* ---- Kanıt basamakları -------------------------------------------------
       İki aile: klinik basamaklar (1-3) lacivert–teal ekseninde doygun ve
       açıktan koyuya sıralı; klinik olmayanlar (4-5) nötr slate ve gridir.
       Böylece göz önce klinik kanıtı görür, palet de genişlemez.
       Hepsi zemine karşı en az 3:1, WCAG 1.4.11 (grafik öge) eşiği. */
    --tier-1: #a8ceef;            /* randomize · sistematik derleme · kılavuz, 11.6:1 */
    --tier-2: #6fbfc7;            /* klinik çalışma, 9.0:1 */
    --tier-3: #4e969f;            /* vaka serisi / raporu, 5.6:1 */
    --tier-4: #6f7f92;            /* preklinik, 4.7:1 */
    --tier-5: #6b6f76;            /* derleme · teknik · diğer, 3.8:1 */


    /* ---- Anlamsal ---------------------------------------------------------- */
    --ok: #64c98a;                /* 9.6:1 */
    --warn: #dcc14e;              /* 11.3:1 */
    --danger: #ef8585;            /* 7.6:1  */

    /* ---- Tipografi ---------------------------------------------------------- */
    /* Başlıklar geçişli bir serif: hakemli yayın/kılavuz diline yakın, ciddi.
       Gövde ve tüm arayüz Inter; rakamlar da Inter'in tabular figürleriyle
       hizalanır, serif rakamlar veri tablolarında hizayı bozuyordu. */
    --font-head: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

    --fs-2xs: 0.6875rem;
    --fs-xs: 0.8125rem;
    --fs-sm: 0.9375rem;
    --fs-base: 1.0625rem;
    --fs-md: 1.1875rem;
    --fs-lg: 1.4375rem;
    --fs-xl: 1.875rem;
    --fs-2xl: 2.5rem;
    --fs-3xl: 3.125rem;

    --measure: 68ch;

    --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
    --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
    --sp-9: 6rem;

    --r-xs: 3px;  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;

    /* ---- Yerleşim -----------------------------------------------------------
       Başlık, içerik ve altbilgi tek genişlikte hizalanır; logo sayfanın sol
       kenarıyla aynı hizada başlar. */
    --w-page: 1280px;
    --w-read: 72ch;
    --gutter: var(--sp-6);
    --gutter-sm: var(--sp-4);

    /* ---- Izgara sütun eşikleri ---------------------------------------------
       Bileşen başına serbest minmax() değeri yerine dört eşik; aynı ekran
       genişliğinde bütün ızgaralar aynı noktada kırılır. */
    --col-xs: 160px;   /* metrik şeridi */
    --col-sm: 220px;   /* denetimler, küçük kutular */
    --col-md: 300px;   /* içerik kartları */
    --col-lg: 320px;   /* endikasyon / çalışma kartları */

    /* ---- Denetimler ---------------------------------------------------------
       Bir araç çubuğunda yan yana duran arama kutusu, açılır liste, düğme ve
       segment aynı yüksekliği paylaşsın diye tek yerde tanımlı. */
    --control-h: 2.5rem;
    --control-px: 0.75rem;
    --control-fs: var(--fs-sm);

    /* Nötr, renksiz gölge: yalnızca katman ayrımı içindir. */
    --shadow: 0 1px 0 rgba(255, 255, 255, 0.045) inset,
              0 12px 28px -18px rgba(0, 0, 0, 0.8);
    --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
                 0 22px 48px -24px rgba(0, 0, 0, 0.85);
    --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

    --blur: saturate(140%) blur(16px);
    --t-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
    --t: 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   AÇIK TEMA
   Cam katmanı burada beyaz saydamlıktır; kenar çizgisi koyu ve incedir.
   Aksanlar açık zeminde kontrastı tutmak için 3-4 basamak koyulaştırılır.
   ========================================================================== */

:root[data-theme="light"] {
    color-scheme: light;

    --bg: #f4f5f7;
    --bg-sunken: #eaecf0;

    --glass-1: rgba(255, 255, 255, 0.72);
    --glass-2: rgba(255, 255, 255, 0.55);
    --glass-3: rgba(255, 255, 255, 0.92);
    --solid: #ffffff;
    --viewport: #0c1016;          /* hologram koyu zemin ister, tema fark etmez */

    --line: rgba(16, 20, 28, 0.10);
    --line-strong: rgba(16, 20, 28, 0.20);

    --text: #10141c;              /* 16.8:1 */
    --text-2: #4b5464;            /* 7.9:1  */
    --text-3: #616978;            /* 5.1:1, #6b7484 4.32:1'de kalıp AA'yı geçemiyordu */

    --accent: #14568c;            /* 7.4:1 */
    --accent-2: #0e3f68;
    --accent-fill: #14568c;
    --accent-soft: rgba(20, 86, 140, 0.09);

    --link: #14568c;              /* aksanla aynı */

    --ect: #14568c;
    --ire: #94461c;               /* 6.0:1 */

    /* Açık temada dizi ters yönde derinleşir: en güçlü kanıt en koyu lacivert.
       Klinik olmayan iki basamak ayrı bir aile olarak nötr slate/gridir. */
    --tier-1: #123a60;            /* 10.7:1 */
    --tier-2: #1c6b76;            /* 5.6:1  */
    --tier-3: #4b939c;            /* 3.2:1  */
    --tier-4: #6e7c8f;            /* 3.9:1  */
    --tier-5: #85888e;            /* 3.1:1  */


    --ok: #157a3c;                /* 5.0:1 */
    --warn: #7d5a06;              /* 6.2:1 */
    --danger: #ad2a20;            /* 6.4:1 */

    --shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
              0 10px 24px -18px rgba(16, 20, 28, 0.35);
    --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
                 0 20px 44px -24px rgba(16, 20, 28, 0.4);
}

/* ==========================================================================
   1. TEMEL
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* Mobil gezinme çekmecesi kapalıyken ekranın sağında park eder; `clip`
       bunu keser. `hidden` aksine kaydırma bağlamı yaratıp yapışkan başlığı
       bozardı. */
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--text-2);
    background-color: var(--bg);
    min-height: 100vh;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color var(--t), color var(--t);
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-head);
    color: var(--text);
    line-height: 1.25;
    letter-spacing: -0.005em;   /* serif zaten sıkı; sans kadar kısılmaz */
    font-weight: 600;
}

h1 { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.012em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-md); }
h4, h5 { font-size: var(--fs-base); }

p { max-width: var(--measure); }
strong { color: var(--text); font-weight: 600; }
em { color: var(--text); }

a { color: var(--link); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--accent); }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }

.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: -9999px; top: 0; z-index: 1200;
    padding: var(--sp-3) var(--sp-5);
    background: var(--accent-fill); color: #fff; font-weight: 600;
    border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   2. BAŞLIK VE GEZİNME
   ========================================================================== */

.main-header {
    position: sticky; top: 0; z-index: 900;
    background: var(--glass-2);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-bottom: 1px solid var(--line);
}

.header-container {
    max-width: var(--w-page); margin: 0 auto;
    padding: 0 var(--gutter);
    height: 60px;
    display: flex; align-items: center; gap: var(--sp-3);
}

.logo-link {
    flex: 0 0 auto; display: flex; align-items: center;
    border-radius: var(--r-xs);
}

/* Logo lacivert + camgobegi; lacivert koyu zeminde kayboluyor. Iki dosya
   uretildi, temaya gore biri gizlenir. Filtre ile renk cevirmek yerine iki
   varlik: filtre metnin kenar yumusatmasini kirletiyordu. */
.logo-img { display: block; height: 34px; width: auto; }
.logo-img--dark { display: none; }

:root[data-theme="light"] .logo-img--light { display: block; }
:root[data-theme="light"] .logo-img--dark { display: none; }
:root:not([data-theme="light"]) .logo-img--light { display: none; }
:root:not([data-theme="light"]) .logo-img--dark { display: block; }

.main-nav { display: flex; align-items: center; gap: 0.1rem; margin-left: auto; }

.main-nav a {
    font-size: var(--fs-xs); font-weight: 500;
    color: var(--text-2);
    padding: 0.5rem var(--sp-3); border-radius: var(--r-sm);
    white-space: nowrap;
    transition: color var(--t-fast), background-color var(--t-fast);
}

.main-nav a:hover { color: var(--text); background: var(--glass-2); }

/* Etkin sayfa dolgulu bir kutu değil, altında ince bir aksan çizgisi taşır.
   Dolgu, başlığı gezinme çubuğundan çok bir sekme şeridine benzetiyordu. */
.main-nav a.active {
    color: var(--text); font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--accent);
    border-radius: 0;
}

.nav-group { position: relative; }

.nav-group-toggle {
    background: none; border: none; cursor: pointer;
    font: inherit; font-size: var(--fs-xs); font-weight: 500;
    color: var(--text-2);
    padding: 0.5rem var(--sp-3); border-radius: var(--r-sm);
    white-space: nowrap; transition: var(--t-fast);
}

.nav-group-toggle::after {
    content: ""; display: inline-block; margin-left: 0.35rem;
    border: 4px solid transparent; border-top-color: currentColor;
    transform: translateY(2px);
}

.nav-group-toggle:hover, .nav-group.open > .nav-group-toggle {
    color: var(--text); background: var(--glass-2);
}

.nav-group.active > .nav-group-toggle {
    color: var(--text); font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--accent);
    border-radius: 0;
}

.nav-dropdown {
    position: absolute; top: calc(100% + 0.4rem); right: 0;
    min-width: 240px; display: none; flex-direction: column; gap: 1px;
    padding: var(--sp-2);
    background: var(--solid);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    z-index: 1100;
}

.nav-group:hover > .nav-dropdown,
.nav-group:focus-within > .nav-dropdown,
.nav-group.open > .nav-dropdown { display: flex; }

.nav-dropdown a { font-size: var(--fs-sm); padding: 0.55rem 0.7rem; }

/* ---- Dil ve tema anahtarları ------------------------------------------------
   İkisi de aynı segment kalıbını kullanır: ince çerçeve, dolgu yok, aktif
   olan düz aksan zeminde. */
.switch-group {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.lang-toggle-container { composes: switch-group; }

.lang-toggle-container,
.theme-toggle-container {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.lang-btn, .theme-btn {
    background: none; border: none; cursor: pointer;
    font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-3);
    padding: 0.34rem 0.62rem;
    transition: var(--t-fast);
    display: inline-flex; align-items: center; justify-content: center;
}

.lang-btn:hover:not(.active), .theme-btn:hover:not(.active) { color: var(--text); }
.lang-btn.active, .theme-btn.active { background: var(--accent-fill); color: #fff; }

.theme-btn svg { width: 14px; height: 14px; display: block; }

.menu-toggle {
    display: none; flex-direction: column; justify-content: space-between;
    width: 20px; height: 14px; background: none; border: none;
    cursor: pointer; padding: 0; z-index: 1001; margin-left: var(--sp-2);
}

.menu-toggle span {
    display: block; width: 100%; height: 2px;
    background: var(--text); border-radius: 2px;
    transition: var(--t);
}

.menu-toggle.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   3. SAYFA KABI
   ========================================================================== */

.page-container {
    max-width: var(--w-page); margin: 0 auto;
    padding: var(--sp-5) var(--gutter) var(--sp-7);
}

.breadcrumbs {
    font-size: var(--fs-xs); color: var(--text-3);
    margin-bottom: var(--sp-4);
    display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
}

.breadcrumbs a { color: var(--text-3); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span { color: var(--text); }

/* ==========================================================================
   4. CAM KARTLAR
   Derinlik: saydam yüzey + bulanıklık + tek piksellik kenar. Degrade ve
   renkli gölge yok.
   ========================================================================== */

/* Bu bir belge, panel panosu degil.
   Once her bolum yuzen, saydam, yuvarlak bir kutuydu: 33 sayfada 288 kart.
   Ust uste dizilmis ayni kutular sayfayi bilimsel bir referanstan cok bir
   gosterge panosuna benzetiyordu. Icerik artik dogrudan sayfanin uzerinde
   durur; bolumleri ayiran sey kutu degil, ince bir cizgi ve bosluktur.
   Kart muamelesi yalnizca gercekten "cok sayida ayri nesneden biri" olan
   ogelerde kalir (.surface-card, .rule-grid). */
.card, .page-hero { background: none; border: 0; border-radius: 0; box-shadow: none; }

.section-card {
    padding: var(--sp-6) 0 0;
    margin-top: var(--sp-6);
    border-top: 1px solid var(--line);
}

.section-card:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* Sayfa girisinin alt cizgisi zaten bir ayrac; hemen ardindan gelen bolumun
   kendi ust cizgisini de cizmesi bos bir serit birakiyordu. */
.page-hero + .section-card { border-top: 0; padding-top: 0; }
.table-container-card { padding-bottom: 0; }

/* Bolum basligi: buyuk punto degil, kucuk ve agirlikli, belge dilinde
   hiyerarsi boyutla degil, konum ve harf araligiyla kurulur. */
.section-card > h2 {
    font-size: var(--fs-lg);
    color: var(--text);
    margin-bottom: var(--sp-4);
}

.section-subtitle {
    font-size: var(--fs-sm); color: var(--text-3);
    max-width: var(--w-read);
    margin-bottom: var(--sp-4);
}

.section-card > h3 { font-size: var(--fs-md); color: var(--text); margin: var(--sp-6) 0 var(--sp-3); }
.section-card p + p { margin-top: var(--sp-3); }
.section-card p { max-width: var(--w-read); }

/* Kart içi ikincil kutu: kendi kenarı yok, yalnızca daha koyu bir yüzey. */
.visuals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--col-md), 100%), 1fr)); gap: var(--sp-5); }

/* Dört kutu geniş ekranda 3+1 kırılıp sonuncusunu yalnız bırakıyordu; ikiye
   iki her genişlikte dengeli durur. */
.visuals-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) {
    .visuals-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
        grid-template-columns: minmax(0, 1fr);
    }
}

.visual-box { padding-left: var(--sp-4); border-left: 1px solid var(--line); }

.visual-box h3 { font-size: var(--fs-sm); color: var(--text); margin-bottom: var(--sp-3); }

/* Alti mekanizma grubu 5 sutunluk otomatik izgarada 5+1 diye kiriliyor,
   sonuncusu tek basina asagi dusuyordu. Uc sutun iki tam satir verir. */
.visuals-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }

.two-col-prose { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--col-md), 100%), 1fr)); gap: var(--sp-6); }

/* ==========================================================================
   5. SAYFA GİRİŞİ
   ========================================================================== */

/* ---- Sayfa girişi: üç varyant, tek sistem --------------------------------
   home     , sol sütun metin, sağ sütun anatomik gezgin
   data     , metrik şeridi taşır (kanıt haritası, alanlar, kütüphane…)
   editorial, yalnızca etiket + başlık + giriş (kavram ve klinik sayfaları)
   Sıra her üçünde aynı; fark yalnızca metrik ve görselin varlığıdır. */
.page-hero { padding: 0 0 var(--sp-5); border-bottom: 1px solid var(--line-strong); }

.page-hero--home {
    display: grid;
    grid-template-columns: minmax(300px, 0.85fr) minmax(280px, 0.9fr);
    gap: var(--sp-7); align-items: center;
}

.page-hero h1 {
    font-size: var(--fs-xl);
    line-height: 1.15;
    color: var(--text);
    margin-bottom: var(--sp-3);
}

.page-hero--home h1 { font-size: var(--fs-2xl); }

.hero-lede {
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--text-2);
    max-width: var(--w-read);
}

/* Veri girişinde metrik şeridi hero'nun bir parçasıdır; editoryal girişte
   giriş paragrafı okuma genişliğinde tek başına durur. */
.page-hero--data .hero-lede { max-width: 84ch; }
.page-hero--editorial .hero-lede { max-width: var(--w-read); }

/* Girişin üst satırı: kanıt düzeyi ve hacim, başlıktan önce ama sessiz. */
.hero-meta-row {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: var(--sp-4); margin-bottom: var(--sp-3);
}

/* ---- Metrik şeridi -------------------------------------------------------
   Sayaç kutu değil, ince bir çizgiyle ayrılan veri sütunudur. Portalda
   "sayı + etiket" gösteren tek bileşen budur; hero, alan sayfası ve kanıt
   haritası aynı ölçeği paylaşır. */
.metric-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--col-xs), 100%), 1fr));
    gap: var(--sp-5) 0;
    margin-top: var(--sp-6);
    width: 100%;
}

.metric {
    display: flex; flex-direction: column; gap: 0.1rem;
    padding-left: var(--sp-5);
    border-left: 1px solid var(--line);
}

.metric:first-child { padding-left: 0; border-left: 0; }

.metric strong {
    font-family: var(--font-body);
    font-size: var(--fs-xl); line-height: 1.15; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.metric span { font-size: var(--fs-xs); color: var(--text-3); }

/* İkinci satır oranı ya da kaynağı taşır; birincil etiketten bir ton okunur. */
.metric-note { color: var(--text-2); font-variant-numeric: tabular-nums; }

/* Sayfanın ana sorusunu yanıtlayan metrikler aksanla ayrışır. Hepsini eşit
   sesle bağırmak gösterge panosu yaratır, kanıt sayfası değil. */
.metric.is-key strong { color: var(--accent); }

/* Beşten çok metrik taşıyan şeritler tablet genişliğinde dört sütuna oturuyor
   ve son metrik tek başına alt satırda kalıyordu (beş metrikte 4+1, dokuz
   metrikte 4+4+1). Bu aralıkta üç sütun kalanı hep ikiye böler. */
@media (min-width: 721px) and (max-width: 900px) {
    .metric-strip:has(> .metric:nth-child(5)) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Kart içinde kullanılan yoğun varyant. */
.metric-strip--inline {
    display: flex; flex-wrap: wrap; gap: var(--sp-5);
    margin: 0 0 var(--sp-4);
}
.metric-strip--inline .metric { padding-left: var(--sp-4); border-left: 1px solid var(--line); }
.metric-strip--inline .metric:first-child { padding-left: 0; border-left: 0; }
.metric-strip--inline .metric strong { font-size: var(--fs-lg); }

.hero-copy { min-width: 0; }

/* Anasayfa metin sütunu dar ve dört metrik taşıyor. Otomatik yerleşim
   genişliğe göre üç sütun seçip dördüncüyü tek başına alt satıra atıyordu;
   1024 ile 1180 arası ve 600 civarı hep öyle kırılıyordu. İkiye iki her
   genişlikte aynı duruyor, artık sarkan metrik yok. */
.page-hero--home .metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5) var(--sp-6);
}
.hero-visual { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* ==========================================================================
   6. DÜĞMELER
   ========================================================================== */

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--sp-2);
    min-height: var(--control-h);
    padding: 0 var(--sp-5);
    border-radius: var(--r-sm);
    font-family: var(--font-body); font-size: var(--control-fs); font-weight: 600;
    border: 1px solid transparent; cursor: pointer;
    transition: var(--t-fast);
    text-decoration: none;
    /* Düğme metni sarmalanmaz: iki satıra düşen bir eylem düğmesi araç
       çubuğundaki öteki denetimlerle aynı hizada durmaz. */
    white-space: nowrap;
}

.btn-primary { background: var(--accent-fill); color: #fff; }
.btn-primary:hover { background: var(--accent-2); color: #fff; }

.btn-secondary {
    background: var(--glass-2); color: var(--text);
    border-color: var(--line-strong);
}
.btn-secondary:hover { background: var(--glass-3); color: var(--text); }

/* ==========================================================================
   6b. PAYLAŞILAN BİLEŞEN TABANLARI
   Portalda altı ayrı kart görünümü vardı; hepsi aynı yüzey kuralına indi.
   Fark artık içerikte, çerçevede değil.
   ========================================================================== */

.surface-card {
    background: var(--glass-1);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-5);
    transition: background-color var(--t-fast), border-color var(--t-fast);
}

.surface-card:hover { background: var(--glass-2); border-color: var(--line-strong); }

/* Izgara çizgisiyle ayrılan yoğun kart dizisi: kart başına çerçeve yerine
   tek piksellik ayraç. Dergi düzeni; kutu gölgesi olmadan da okunur. */
.rule-grid {
    display: grid; gap: 1px;
    background: var(--line); border: 1px solid var(--line);
}

.rule-grid > * { background: var(--bg); }
.rule-grid > *:hover { background: var(--glass-2); }

/* ---- Tek odak kuralı -----------------------------------------------------
   Klavyeyle gezenler için: her etkileşimli öge aynı halkayı gösterir. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--focus);
    border-radius: var(--r-xs);
}

/* ==========================================================================
   7. ETİKETLER, kutu değil, renkli metin
   Rozet, çip ve durum göstergelerinin tamamı arka planı, kenarlığı ve
   yuvarlak köşesi olmayan metinlerdir; ayrım renk, ağırlık ve harf
   aralığıyla kurulur.
   ========================================================================== */

.evidence-badge {
    display: inline-block;
    font-size: var(--fs-2xs); font-weight: 700;
    letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--text-3);
}

.badge-clinical        { color: var(--ok); }
.badge-early-clinical  { color: var(--accent); }
.badge-preclinical     { color: var(--link); }
.badge-exploratory     { color: var(--text-3); }
.badge-warning         { color: var(--warn); }

.ref-count-badge {
    display: inline-block;
    font-size: var(--fs-xs); font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-3);
}

.card-badge-row {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 0 var(--sp-3);
    margin-top: var(--sp-3);
}

.tag-chip {
    display: inline-block;
    font-size: var(--fs-2xs); font-weight: 600; line-height: 1.7;
    color: var(--text-3);
}

/* Arka plan kalkınca çipleri ayıran şey aralık ve ince bir orta noktadır. */
.card-badge-row .tag-chip + .tag-chip::before {
    content: "·";
    margin-right: var(--sp-3);
    color: var(--line-strong);
}

.tag-area { color: var(--text-3); }
.tag-modality { font-weight: 700; white-space: nowrap; }
.tag-ect { color: var(--ect); }
.tag-ire { color: var(--ire); }

.mechanisms-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }

.mechanism-pill {
    display: inline-flex; align-items: baseline; gap: var(--sp-2);
    font-size: var(--fs-sm); color: var(--text-2);
}

.mechanism-pill strong {
    color: var(--text-3); font-weight: 600; font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
}

.status-chip {
    display: inline-block;
    font-size: var(--fs-2xs); font-weight: 700; white-space: nowrap;
    letter-spacing: 0.04em; text-transform: uppercase;
}

.status-completed  { color: var(--ok); }
.status-recruiting { color: var(--accent); }
.status-terminated { color: var(--danger); }
.status-withdrawn  { color: var(--danger); }
.status-unknown    { color: var(--warn); }

.source-tag {
    display: inline-block; margin-left: var(--sp-2);
    font-size: var(--fs-2xs); font-weight: 500;
    color: var(--text-3); text-transform: none; letter-spacing: 0;
}

/* ==========================================================================
   8. TABLOLAR
   ========================================================================== */


.table-responsive {
    overflow-x: auto;
    border-top: 1px solid var(--line);
}

table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }

thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--solid);
    color: var(--text-3);
    font-family: var(--font-body); font-weight: 600;
    font-size: var(--fs-2xs); letter-spacing: 0.08em; text-transform: uppercase;
    text-align: left; padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
}

tbody td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line);
    color: var(--text-2); vertical-align: top;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background-color var(--t-fast); }
tbody tr:hover { background: var(--glass-2); }

.compare-table th:first-child,
.compare-table td:first-child { color: var(--text); font-weight: 600; }

.compare-col-ect { color: var(--ect); }
.compare-col-ire { color: var(--ire); }

.matrix-table td, .matrix-table th { text-align: center; }
.matrix-table td:first-child, .matrix-table th:first-child { text-align: left; }

/* ---- Mekanizma tablosu ----------------------------------------------------
   Dokuz sütunluk ham sayı ızgarası ekrana sığmıyordu ve rakamlar alan
   büyüklüğünü yansıttığı için okunacak bir şey söylemiyordu. Dört sütun:
   mekanizma, hacim, korpus payı ve yoğunlaştığı alanlar. */
.mech-table td:nth-child(2), .mech-table th:nth-child(2),
.mech-table td:nth-child(3), .mech-table th:nth-child(3) {
    text-align: right; width: 7rem; white-space: nowrap;
    font-variant-numeric: tabular-nums; color: var(--text);
}

.mech-table td:first-child { width: 26%; min-width: 210px; }
/* Mekanizma grubu adın devamı değil, altındaki ikinci satırdır. */
.mech-table td:first-child .cell-sub { display: block; margin-top: 0.15rem; }
.mech-table td:last-child { width: 46%; }

/* Bir alan = ad + alan içi pay + yayın sayısı. Yüzde vurgulu, çünkü
   karşılaştırılabilir olan o; ham sayı yanında sessiz durur. */
/* Üç alan yan yana aktığında satır sonuna göre rastgele bölünüyor, yüzdeler de
   hiçbir yerde hizalanmıyordu. Liste tek bir ızgara: adlar solda, yüzde ve
   sayı sabit sütunlarda, göz aşağı doğru karşılaştırabiliyor. */
.mech-focus-list {
    display: grid; grid-template-columns: 1fr auto auto;
    align-items: baseline; gap: 2px var(--sp-3);
}

.mech-focus { display: contents; }

.mech-focus a { color: var(--text-2); text-decoration: none; }
.mech-focus a:hover { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

.mech-focus-pct { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.mech-focus-n { color: var(--text-3); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mech-focus-n::before { content: "("; }
.mech-focus-n::after { content: ")"; }
.mech-focus-empty { font-size: var(--fs-xs); color: var(--text-3); font-style: italic; }

@media (max-width: 860px) {
    .mech-table td:first-child { min-width: 160px; }
}

/* Isı haritası bir etiket değil veri görselleştirmesidir; yoğunluk renk
   koyuluğu ve ağırlıkla verilir, kutu ya da yuvarlak köşe kullanılmaz. */
.matrix-cell {
    display: inline-block; min-width: 2.2rem;
    font-variant-numeric: tabular-nums;
}

.matrix-0 { color: var(--text-3); opacity: 0.55; }
.matrix-1 { color: var(--text-2); }
.matrix-2 { color: var(--accent); font-weight: 600; }
.matrix-3 { color: var(--accent); font-weight: 700; }

.area-table td { font-size: var(--fs-xs); }
.area-table td:first-child, .area-table th:first-child { white-space: nowrap; }
.area-table td:nth-child(2) { min-width: 270px; max-width: 360px; }
.area-table td:nth-child(6) { min-width: 150px; }
.area-table td:last-child { min-width: 250px; }

.trials-table td { font-size: var(--fs-xs); }
.trials-table td:nth-child(2) { min-width: 260px; }

.ref-link {
    background: none; border: none; padding: 0; font: inherit;
    font-weight: 600; color: var(--link);
    text-align: left; cursor: pointer;
}
.ref-link:hover { color: var(--accent); text-decoration: underline; }

.nct-link { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 600; }

.cell-sub { font-size: var(--fs-2xs); color: var(--text-3); }

.bar-track {
    display: block; height: 3px; min-width: 120px;
    background: var(--line); overflow: hidden;
}
.bar-fill { display: block; height: 100%; background: var(--accent); }

/* ---- Çalışma tipi dağılımı ------------------------------------------------
   Ray, sütun ne kadar genişse o kadar uzayınca %3'lük bir pay birkaç piksele
   düşüyordu. Ray sabit ve kısa; dolgu tablodaki en büyük gruba göre ölçekli;
   gerçek pay rakamla yanında. Renk çalışma tipinin kanıt basamağı, kanıt
   haritasındaki beş basamaklı ölçeğin aynısı. */
.dist-cell { display: flex; align-items: center; gap: var(--sp-3); }

.dist-track {
    display: block; flex: 0 0 auto;
    width: 160px; max-width: 42vw; height: 8px;
    background: var(--line); border-radius: var(--r-xs);
    overflow: hidden;
}

.dist-fill { display: block; height: 100%; border-radius: var(--r-xs); min-width: 2px; }

.dist-fill.tier-1 { background: var(--tier-1); }
.dist-fill.tier-2 { background: var(--tier-2); }
.dist-fill.tier-3 { background: var(--tier-3); }
.dist-fill.tier-4 { background: var(--tier-4); }
.dist-fill.tier-5 { background: var(--tier-5); }

.dist-pct {
    font-size: var(--fs-xs); color: var(--text-2);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Sayı sütunu dar kalsın ki ray ile çalışma tipi adı yan yana okunabilsin. */
.dist-table td:nth-child(2), .dist-table th:nth-child(2) {
    text-align: right; width: 5rem;
    font-variant-numeric: tabular-nums; color: var(--text);
}

@media (max-width: 560px) {
    .dist-track { width: 96px; }
}

/* ---- Rejim dağılımı -------------------------------------------------------
   3px'lik bir kılcal çizgide mavi ile turuncuyu ayırmak zordu ve hangi ucun
   hangi rejim olduğunu ancak renkten çıkarabiliyordunuz. Çubuk 8px'e çıktı,
   iki payın her biri kendi ucunda kendi renginde yazılı; iki bandın arasında
   ray rengiyle bir ayraç var. Renk hiçbir yerde tek başına anlam taşımıyor. */
.split-cell { display: flex; align-items: center; gap: var(--sp-3); }

.split-bar {
    display: flex; gap: 1px;
    flex: 0 0 auto; width: 132px; max-width: 34vw; height: 8px;
    background: var(--line); border-radius: var(--r-xs); overflow: hidden;
}

.split-ect { background: var(--ect); }
.split-ire { background: var(--ire); }

.split-pct {
    font-size: var(--fs-xs); font-weight: 600;
    font-variant-numeric: tabular-nums; white-space: nowrap;
    min-width: 3.2ch; text-align: right;
}

.split-pct:last-child { text-align: left; }

/* İki sayı sütunu hizalı ve dar; alan adı geniş kalsın. */
.split-table td:nth-child(2), .split-table th:nth-child(2),
.split-table td:nth-child(3), .split-table th:nth-child(3) {
    text-align: right; width: 8rem;
    font-variant-numeric: tabular-nums; color: var(--text);
}

/* Sıfır, yokluğu bildirir; sessiz durur ama gizlenmez. */
.cell-zero { color: var(--text-3); }

@media (max-width: 560px) {
    .split-bar { width: 84px; }
}

/* ==========================================================================
   9. ANATOMİK GEZGİN
   Hologram siyah zeminli bir ışık render'ıdır (alfa kanalı parlaklıktan
   türetilerek şeffaflaştırıldı). Açık temada kaybolmaması için figür her
   iki temada da koyu bir görüntüleme penceresinde durur.
   ========================================================================== */

.anatomy-figure { position: relative; margin: 0; }

.anatomy-stage {
    position: relative;
    width: 100%; max-width: 340px;
    margin: 0 auto;
    aspect-ratio: 1;
    background: var(--viewport);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.anatomy-img {
    position: relative;
    display: block;
    width: 100%; height: auto;
}

.anatomy-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }

.anatomy-hotspot { cursor: pointer; }

/* Görünen nokta 1024 birimlik viewBox'ta 12-14 birim, yani telefonda 8px'lik
   bir hedef. Şeffaf daire çizimi değiştirmeden hedefi büyütür. r=26, en yakın
   iki noktayı (pankreas ile karaciğer, aralarında 52 birim) üst üste
   bindirmeden kullanılabilecek en büyük yarıçaptır. Onsekiz nokta bu gövdeye
   sıkıştığı için 44px'lik ölçüte figür ne kadar büyürse büyüsün ulaşılamaz;
   aynı alanların tamamı sayfanın altındaki uygulama dizininden de açılır. */
.anatomy-hit { fill: transparent; stroke: none; }

/* Sahne her iki temada da koyudur; bu yüzden işaret renkleri temayı izlemez,
   sabit tutulur. Açık temanın koyu indigosu koyu zeminde okunmuyordu. */
.anatomy-hotspot .dot {
    fill: rgba(10, 14, 20, 0.55);
    stroke: #7cb0e0;
    stroke-width: 4;
    transition: var(--t-fast);
}

.anatomy-hotspot:hover .dot { fill: #1f6fb4; stroke: #fff; }

/* Seçili nokta halesiz ayrışır: dolu beyaz çekirdek + ince halka. */
.anatomy-hotspot.active .dot { fill: #fff; stroke: #a3c8ec; stroke-width: 5; }
.anatomy-hotspot .pulse { fill: none; stroke: #a3c8ec; stroke-width: 3; opacity: 0; }
.anatomy-hotspot.active .pulse { opacity: 0.5; }
.anatomy-hotspot:focus-visible .dot { stroke: #fff; stroke-width: 6; }
.anatomy-hotspot:focus-visible { outline: none; }

.anatomy-explorer {
    display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(280px, 1.1fr);
    gap: var(--sp-6); align-items: start;
}

.anatomy-panel {
    background: var(--glass-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-5);
    transition: border-color var(--t);
}

/* İçerik değiştiğinde kenar kısa süre aksana döner, ışıltı değil, çizgi. */
.anatomy-panel.flash { animation: panelFlash 700ms ease-out; }

@keyframes panelFlash {
    0%   { border-color: var(--accent); }
    100% { border-color: var(--line); }
}

.panel-eyebrow {
    font-size: var(--fs-2xs); font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
}

.anatomy-panel h3 { margin: var(--sp-2) 0 var(--sp-1); font-size: var(--fs-md); }
.panel-count { color: var(--text-3); font-size: var(--fs-xs); margin-bottom: var(--sp-3); }
.panel-count strong { font-family: var(--font-body); font-size: var(--fs-xl); font-weight: 600; color: var(--text); margin-right: 0.3rem; }

/* Üç sütun: rejim adı, sayı, kanıt düzeyi. Izgara satırın değil listenin
   üzerinde, çünkü her satır kendi ızgarası olduğunda sütun genişliği o satırın
   içeriğine göre hesaplanıyordu: "Klinik Kanıt" ile "Erken Klinik Kanıt"
   arasındaki 19 piksel farkı sayıları kaydırıyordu. Tek ızgarada üç sütun da
   tüm satırların en genişine göre ölçülür, rakamlar üst üste gelir. */
.panel-modalities {
    display: grid; grid-template-columns: 1fr auto minmax(7rem, auto);
    align-items: baseline; font-size: var(--fs-xs);
}

.panel-modality-row { display: contents; }

/* Kenarlık satır kutusunda değil hücrelerde; sütun aralığı sıfır olduğu için
   çizgi kesintisiz görünür, boşluk hücre dolgusundan gelir. */
.panel-modality-row > * { padding: var(--sp-2) 0; border-top: 1px solid var(--line); }
.panel-modality-row:first-child > * { border-top: 0; }

.panel-modality-row .evidence-badge { text-align: right; }

/* Sütun arası boşluk yalnızca sayı hücresinde: rozete yatay dolgu verilseydi
   etiket kutuya benzerdi. */
.panel-modality-count {
    font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--text); text-align: right; min-width: 3ch;
    padding-left: var(--sp-3); padding-right: var(--sp-3);
}
.panel-empty { grid-column: 1 / -1; color: var(--text-3); font-size: var(--fs-sm); }
.panel-cta { margin-top: var(--sp-4); width: 100%; }

/* ==========================================================================
   10. UYGULAMA ALANI KARTLARI
   ========================================================================== */

.application-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--col-md), 100%), 1fr));
    gap: var(--sp-3); margin-top: var(--sp-5);
}

.application-card {
    display: flex; flex-direction: column;
    padding: var(--sp-5);
    background: var(--glass-1);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: inherit; text-decoration: none;
    transition: var(--t-fast);
}

.application-card:hover {
    border-color: var(--line-strong);
    background: var(--glass-2);
}

.app-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.application-card h3 { font-size: var(--fs-base); margin-bottom: var(--sp-1); }
.app-card-group { font-size: var(--fs-2xs); color: var(--text-3); }
.app-card-cta { margin-top: auto; padding-top: var(--sp-4); font-size: var(--fs-xs); font-weight: 600; color: var(--accent); }

/* ==========================================================================
   11. KÜTÜPHANE
   ========================================================================== */

/* ---- Araç çubuğu ---------------------------------------------------------
   Kütüphane, klinik araştırmalar, kanıt haritası ve endikasyon dizini aynı
   sorgu dilini konuşur: arama kutusu solda, alanlar sağda, altında sonuç
   satırı. Etiketler görünürdür, bilimsel bir sorgu aracında hangi alanı
   süzdüğünüzü hatırlamak zorunda kalmamalısınız. */
.toolbar {
    display: flex; flex-wrap: wrap; align-items: flex-end;
    gap: var(--sp-4) var(--sp-5);
    padding: var(--sp-5) 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--sp-4);
}

.toolbar-search { flex: 1 1 260px; min-width: 220px; }

/* Sarmalama açıkken satır kırılması daralmadan önce hesaplanır: alanlar
   doğal genişliklerinde ölçülüp dördüncüsü 960 piksel civarında tek başına
   alta düşüyordu. Tek satıra sabitlenip eşit paylaştırılıyorlar; 720
   piksetten sonra ızgara iki sütuna geçiyor. */
.toolbar-fields {
    display: flex; flex-wrap: nowrap; align-items: flex-end;
    gap: var(--sp-4) var(--sp-5);
}

.toolbar-field { display: flex; flex-direction: column; gap: 0.3rem; flex: 1 1 0; min-width: 0; }
.toolbar-field select { width: 100%; min-width: 0; }

.toolbar-field > label, .toolbar-label {
    font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-3);
}

.toolbar-status {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--sp-4); flex-wrap: wrap;
    font-size: var(--fs-xs); color: var(--text-3);
    margin-bottom: var(--sp-4);
}

.toolbar-status strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.toolbar-reset {
    border: 0; background: none; padding: 0; cursor: pointer;
    font: inherit; color: var(--link);
    text-decoration: underline; text-underline-offset: 3px;
}

.toolbar-reset[hidden] { display: none; }

/* Segmentli denetim: iki-üç seçenek arasında geçiş; açılır liste açmaya
   değmeyecek kadar az seçenek olduğunda kullanılır. */
.segmented {
    display: inline-flex; height: var(--control-h);
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    overflow: hidden;
}

.segment {
    border: 0; background: none; cursor: pointer;
    font: inherit; font-size: var(--fs-xs); color: var(--text-2);
    padding: 0 var(--sp-4);
    transition: background-color var(--t-fast), color var(--t-fast);
}

.segment + .segment { border-left: 1px solid var(--line-strong); }
.segment:hover { background: var(--glass-2); color: var(--text); }
.segment.is-active { background: var(--accent-fill); color: #fff; }

.search-input-box {
    width: 100%;
    height: var(--control-h);
    padding: 0 var(--control-px);
    background: var(--glass-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: var(--text);
    font-family: var(--font-body); font-size: var(--fs-sm);
    transition: var(--t-fast);
}

.search-input-box::placeholder { color: var(--text-3); }
.search-input-box:focus { outline: none; border-color: var(--accent); }

.filter-select {
    height: var(--control-h);
    padding: 0 2rem 0 var(--control-px);
    background-color: var(--glass-2);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='none' stroke='%23808a9c' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.7rem center;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    color: var(--text);
    font-family: var(--font-body); font-size: var(--fs-xs);
    appearance: none; -webkit-appearance: none; cursor: pointer;
}

.filter-select:focus { outline: none; border-color: var(--accent); }
.filter-select option { background: var(--solid); color: var(--text); }

.library-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-3);
}

.library-result-count { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); }

.library-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--col-lg), 100%), 1fr));
    gap: var(--sp-3);
}

.paper-citation-card {
    position: relative;
    padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
    background: var(--glass-1);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: var(--t-fast);
}

.paper-citation-card:hover { border-color: var(--accent); background: var(--glass-2); }
.paper-citation-card:focus-visible { outline: none; box-shadow: var(--focus); }

.ref-num-indicator {
    position: absolute; top: var(--sp-4); left: var(--sp-4);
    font-family: var(--font-mono); font-size: var(--fs-2xs);
    color: var(--text-3); font-variant-numeric: tabular-nums;
}

.paper-citation-info h4 { font-size: var(--fs-sm); line-height: 1.4; margin-bottom: var(--sp-2); color: var(--text); }
.paper-citation-info .authors { font-size: var(--fs-2xs); color: var(--text-3); }
.paper-citation-info .journal-tag { font-size: var(--fs-2xs); color: var(--text-3); margin-top: 0.15rem; }

.library-empty { grid-column: 1 / -1; text-align: center; color: var(--text-3); padding: var(--sp-8) var(--sp-4); }
.library-load-more { margin: var(--sp-6) auto 0; width: fit-content; }

/* ==========================================================================
   12. ATIF ÇEKMECESİ
   ========================================================================== */

.citation-drawer { position: fixed; inset: 0; z-index: 1200; pointer-events: none; }
.citation-drawer.open { pointer-events: auto; }

.drawer-overlay {
    position: absolute; inset: 0;
    background: rgba(4, 7, 12, 0.6);
    backdrop-filter: blur(2px);
    opacity: 0; transition: opacity var(--t);
}
.citation-drawer.open .drawer-overlay { opacity: 1; }

.drawer-content {
    position: absolute; top: 0; right: 0;
    width: min(560px, 100%); height: 100dvh;
    display: flex; flex-direction: column;
    background: var(--solid);
    border-left: 1px solid var(--line-strong);
    transform: translateX(100%);
    transition: transform var(--t);
}
.citation-drawer.open .drawer-content { transform: translateX(0); }

/* Dar ekranda çekmece yandan değil alttan gelir ve ekranın tamamını
   kaplamaz: arkadaki liste görünürde kalınca hangi kayda baktığınızı
   kaybetmezsiniz. */
@media (max-width: 720px) {
    .drawer-content {
        top: auto; bottom: 0; right: 0; left: 0;
        width: 100%; height: 88dvh;
        border-left: 0; border-top: 1px solid var(--line-strong);
        border-radius: var(--r-lg) var(--r-lg) 0 0;
        transform: translateY(100%);
    }
    .citation-drawer.open .drawer-content { transform: translateY(0); }

    /* Sürükleme tutamağı: panelin aşağı kapanabildiğini söyleyen görsel ipucu. */
    .drawer-header::before {
        content: ""; position: absolute; top: 0.55rem; left: 50%;
        transform: translateX(-50%);
        width: 36px; height: 4px; border-radius: 2px;
        background: var(--line-strong);
    }
    .drawer-header { position: relative; padding-top: var(--sp-6); }
}

.drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
}

.drawer-header h3 { font-size: var(--fs-base); }

.close-drawer-btn {
    background: none; border: 1px solid var(--line);
    color: var(--text);
    width: 32px; height: 32px; border-radius: var(--r-sm);
    font-size: 1.2rem; line-height: 1; cursor: pointer;
    transition: var(--t-fast);
}
.close-drawer-btn:hover { background: var(--glass-2); }

.drawer-body { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-6); }
.drawer-body h4 { font-size: var(--fs-md); line-height: 1.35; margin-bottom: var(--sp-4); }
.drawer-authors, .drawer-journal { font-size: var(--fs-sm); margin-bottom: var(--sp-2); }

.drawer-detail-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--col-xs), 100%), 1fr));
    gap: var(--sp-4);
    margin: var(--sp-5) 0;
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.detail-item { display: flex; flex-direction: column; gap: 0.2rem; }
.detail-item span { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
.detail-item strong { font-size: var(--fs-sm); }

.abstract-box { margin-top: var(--sp-5); }

.abstract-box h5 {
    font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-3); margin-bottom: var(--sp-3);
}

.abstract-box p { font-size: var(--fs-sm); max-width: none; }

.abstract-box-lead { padding-left: var(--sp-4); border-left: 2px solid var(--warn); }
.abstract-box-lead h5 { color: var(--warn); }
.lead-note { font-size: var(--fs-xs) !important; color: var(--text-3); margin-bottom: var(--sp-3); }

.drawer-context { padding-left: var(--sp-4); border-left: 2px solid var(--ok); color: var(--text-2); }
.drawer-context strong { color: var(--ok); }

.drawer-note { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-3); }
.drawer-links { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); }
.drawer-links .btn { flex: 1 1 0; }

/* ==========================================================================
   13. DİĞER BİLEŞENLER
   ========================================================================== */

.visual-box p { font-size: var(--fs-sm); }
.two-col-prose h3 { margin-bottom: var(--sp-3); }

.caution-note {
    padding: var(--sp-4) 0 var(--sp-4) var(--sp-5);
    border-left: 2px solid var(--accent);
    font-size: var(--fs-sm);
    margin-top: var(--sp-5);
}

.caution-strong { border-left-color: var(--warn); }
.caution-strong strong { color: var(--warn); }

.pathway-chain { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: var(--sp-5); }

.pathway-step { padding-left: var(--sp-4); border-left: 1px solid var(--line-strong); }
.pathway-step h3 { font-size: var(--fs-sm); margin: var(--sp-3) 0 var(--sp-2); }
.pathway-step p { font-size: var(--fs-xs); color: var(--text-3); }

.pathway-index {
    display: inline-block;
    font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700;
    color: var(--accent);
}

/* Piramit basamak genişlikleri anlamsaldır: üstte az sayıda yüksek kanıt. */
.evidence-pyramid { display: flex; flex-direction: column; align-items: center; gap: 1px; }

.pyramid-tier {
    display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
    padding: var(--sp-4);
    text-align: center;
    background: var(--glass-2);
    border: 1px solid var(--line);
}

.pyramid-tier strong { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; color: var(--text); }
.pyramid-tier span { font-size: var(--fs-xs); color: var(--text-2); }

.pyramid-tier.tier-1 { width: 46%; }
.pyramid-tier.tier-2 { width: 60%; }
.pyramid-tier.tier-3 { width: 74%; }
.pyramid-tier.tier-4 { width: 88%; }
.pyramid-tier.tier-5 { width: 100%; }

.figure-note { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--sp-4); max-width: var(--measure); }

.mono { font-family: var(--font-mono); font-size: 0.9em; color: var(--link); }

/* ==========================================================================
   14. ALTBİLGİ
   ========================================================================== */

.global-footer { border-top: 1px solid var(--line); margin-top: var(--sp-8); }
.footer-container { max-width: var(--w-page); margin: 0 auto; padding: var(--sp-7) var(--gutter); }
.footer-disclaimer { font-size: var(--fs-xs); color: var(--text-3); max-width: 90ch; }
.footer-copy { font-size: var(--fs-2xs); color: var(--text-3); margin-top: var(--sp-4); }

/* Portal ana siteden bir alt yol olarak sunuluyor; geri dönüş yolunu tarayıcı
   geçmişine bırakmamak için footer'da açık bir bağlantı duruyor. */
.footer-home { margin-top: var(--sp-5); font-size: var(--fs-xs); font-weight: 600; }
.footer-home a { color: var(--link); text-decoration: none; display: inline-block; padding: 0.5rem 0.25rem; }
.footer-home a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   15. KANIT HARİTASI
   Sayfanın tek işi şu soruyu yanıtlamak: hangi uygulama alanında ne kadar
   *klinik* kanıt var? Bu yüzden hiyerarşi klinik güç üzerine kurulur ,
   matriste en güçlü basamak solda ve en koyu renkte durur, alan satırları
   varsayılan olarak klinik güce göre sıralanır.
   ========================================================================== */

/* ---- Kanıt düzeyi dağılımı ------------------------------------------------
   Altında gösterge olan tek bir renk şeridi değil: her bant kendi sayısını,
   payını ve adını taşır. Şeritte iki komşu bandın rengini birbirinden
   ayırmak zorunda kalmıyorsunuz, renk yalnızca sırayı pekiştiriyor.
   Bantlar arasındaki boşluk da bu yüzden var: bitişik iki blok tek bir
   blok gibi okunuyordu. */
/* Paylarin toplami tam %100; alt piksel yuvarlamasi son bandi alt satira
   atiyordu. Genis ekranda sarma kapali, bantlar gerektiginde daralir. */
.lvdist { display: flex; flex-wrap: nowrap; margin-top: var(--sp-5); gap: 0; }

.lvdist-item {
    display: flex; flex-direction: column; gap: 0.15rem;
    flex-grow: 0; flex-shrink: 1; min-width: 0;
    padding-right: var(--sp-4);
}

.lvdist-item:last-child { padding-right: 0; }

.lvdist-figure { display: flex; align-items: baseline; gap: var(--sp-2); }

.lvdist-figure strong {
    font-family: var(--font-body);
    font-size: var(--fs-lg); font-weight: 600; line-height: 1.1;
    font-variant-numeric: tabular-nums; color: var(--text);
}

.lvdist-pct { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.lvdist-name { font-size: var(--fs-xs); color: var(--text-2); line-height: 1.35; }

.lvdist-bar { display: block; height: 6px; margin-top: var(--sp-2); border-radius: var(--r-xs); }

/* Dört değer tek bir lacivert–teal–slate rampasında; komşu iki bant hem
   tonda hem açıklıkta ayrışır, en zayıf düzey nötr slate'e düşer. */
.lvdist-bar.lv-clinical       { background: var(--tier-1); }
.lvdist-bar.lv-early-clinical { background: var(--tier-2); }
.lvdist-bar.lv-preclinical    { background: var(--tier-3); }
.lvdist-bar.lv-exploratory    { background: var(--tier-4); }

.lvdist-note { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--sp-4); }

@media (max-width: 720px) {
    /* Dar ekranda paylar okunamayacak kadar inceliyor; bantlar tam genişlikte
       satırlara açılır, oran rakamla korunur. */
    .lvdist { flex-wrap: wrap; }
    .lvdist-item { flex-basis: 100% !important; padding-right: 0; margin-bottom: var(--sp-4); }
}

/* ---- Matris -------------------------------------------------------------- */
/* Kanıt matrisi ortak tablo tabanını kullanır; yalnızca hizalama, yapışkan
   ilk sütun ve sütun genişlikleri farklıdır. */
.em-matrix-scroll { overflow-x: auto; border-top: 1px solid var(--line); }

.em-matrix { min-width: 760px; }
.em-matrix th, .em-matrix td { text-align: center; vertical-align: middle; padding: var(--sp-3) var(--sp-2); }
.em-matrix thead th { white-space: normal; text-align: center; }

/* Sütun başlığı hangi basamağı gösterdiğini renkle de söyler. */
.em-matrix thead th .em-swatch { display: inline-block; margin-right: 0.35rem; }

/* Yatay kaydırırken alan adı görünürde kalsın, 22 satırlık bir matriste
   satırın hangi alana ait olduğunu kaybetmek okumayı bitirir. */
.em-matrix th.em-col-area, .em-matrix td.em-col-area {
    position: sticky; left: 0; z-index: 1;
    text-align: left; width: 30%; min-width: 210px;
    background: var(--bg);
    padding-left: var(--sp-4);
}

.em-matrix thead th.em-col-area { z-index: 3; background: var(--solid); }
.em-matrix tbody tr:hover td.em-col-area { background: var(--bg-sunken); }

.em-matrix th.em-col-level, .em-matrix td.em-col-level { text-align: left; width: 15%; min-width: 130px; }
.em-matrix td.em-col-total { width: 8%; min-width: 62px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.em-matrix th.em-col-total { text-align: right; }

.em-area-link { font-weight: 600; color: var(--text); text-decoration: none; }
.em-area-link:hover { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.em-area-group { display: block; font-size: var(--fs-2xs); color: var(--text-3); margin-top: 0.1rem; }

/* Hücre = kabarcık + sayı. Kabarcık şekli verir (alan sayının kareköküyle
   ölçeklenir; göz alanı okur, çapı değil), sayı kesin değeri verir, biri
   ötekinin yerine geçmez. Kabarcık sabit genişlikte bir yuvada ortalanır,
   böylece sütun boyunca rakamlar hizada kalır. */
.em-cell {
    display: inline-grid; grid-template-columns: 40px auto;
    align-items: center; gap: var(--sp-2);
}

.em-cell > :first-child { justify-self: center; }

.em-cell-n {
    font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
    color: var(--text-2); text-align: right; min-width: 2.4ch;
}

.em-bubble { display: block; border-radius: 50%; }

.em-bubble-1 { background: var(--tier-1); }
.em-bubble-2 { background: var(--tier-2); }
.em-bubble-3 { background: var(--tier-3); }
.em-bubble-4 { background: var(--tier-4); }
.em-bubble-5 { background: var(--tier-5); }

.em-zero { color: var(--line-strong); font-size: var(--fs-xs); }

/* Boş sonuç: her süzgeçli listenin paylaştığı tek durum. */
.state-empty { padding: var(--sp-7) 0; text-align: center; color: var(--text-3); font-size: var(--fs-sm); }

/* Kabarcık boyut anahtarı */
.em-sizekey { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); font-size: var(--fs-2xs); color: var(--text-3); }
.em-sizekey-item { display: inline-flex; align-items: center; gap: 0.35rem; }

/* ---- Klinik sonuç kartları ---------------------------------------------- */
.em-studies { grid-template-columns: repeat(auto-fill, minmax(min(var(--col-lg), 100%), 1fr)); }
.em-study { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }

.em-study-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }

.em-study-type {
    font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase;
}
.em-study-type.tier-rank-1 { color: var(--tier-1); }

.em-study-year { font-size: var(--fs-2xs); color: var(--text-3); font-variant-numeric: tabular-nums; }

.em-study h3 { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; }

.em-study h3 .ref-link { font: inherit; text-align: left; color: var(--text); }
.em-study h3 .ref-link:hover { color: var(--link); }

.em-study-meta { font-size: var(--fs-xs); color: var(--text-2); }
.em-study-area { font-size: var(--fs-2xs); color: var(--text-3); }
.em-study-abs { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.55; }

.em-more { margin-top: var(--sp-5); }
.em-more[hidden] { display: none; }

/* ---- Yöntem ve gösterge -------------------------------------------------- */
.em-method { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--col-md), 100%), 1fr)); gap: var(--sp-6) var(--sp-7); }
.em-method h3 { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--text); margin-bottom: var(--sp-3); }

.em-deflist { display: flex; flex-direction: column; }

/* Terim ve sayı üstte, tanım altta. Terim genişliği satırdan satıra değiştiği
   için yan yana dizildiğinde tanım sütunu her satırda başka yerden başlıyordu;
   iki satıra ayrılınca hem sol kenar hizalanıyor hem de tanım tam genişlik
   alıyor. */
.em-def {
    padding: var(--sp-3) 0; border-top: 1px solid var(--line);
    font-size: var(--fs-xs);
}

.em-def:first-child { border-top: 0; }
.em-def dt {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--sp-3); color: var(--text); font-weight: 600;
}
.em-def dd { margin: var(--sp-1) 0 0; color: var(--text-3); max-width: 52ch; }
.em-def-term { min-width: 0; }
.em-def-count {
    color: var(--text-2); font-weight: 400;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

.em-note { font-size: var(--fs-xs); color: var(--text-3); max-width: var(--measure); margin-top: var(--sp-4); }

@media (max-width: 720px) {
    .metric { padding-left: 0; border-left: 0; }
    /* `1fr` = `minmax(auto, 1fr)`: iz min-content'in altına inemediği için
       "Durum Bilinmiyor" gibi uzun bir etiket 320px'te şeridi ekranın 9px
       dışına taşırıyordu. */
    .metric-strip { gap: var(--sp-4) var(--sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .em-studies { grid-template-columns: 1fr; }
}

/* ==========================================================================
   16. ENDİKASYON MANZARASI (uygulama alanları dizini)

   Sayfa üç soruyu bu sırayla yanıtlamak üzere dizilir: nerede kullanılıyor,
   kanıt nerede en güçlü, hangi alanlar henüz gelişiyor. Bu yüzden kartlar
   varsayılan olarak tematik gruba değil kanıt olgunluğuna göre kümelenir ve
   olgunluk karta yalnızca renkle değil, kenar çizgisi + düzey adı + sayılarla
   birlikte yazılır.
   ========================================================================== */

/* ---- Doku grubu tablosu ---------------------------------------------------
   Önceki grup × olgunluk ızgarası boş hücrelerle doluydu ve dolu hücreler
   aşağıdaki kart dizinini tekrar ediyordu; hücredeki sayı da oturduğu sütunla
   ilgisiz alan toplamıydı. Bu tablo grupları karşılaştırır: hacim ile klinik
   derinlik ayrı ölçüler, oran ikisini birbirinden ayırır. */
.group-table td:nth-child(2), .group-table th:nth-child(2) {
    text-align: right; width: 4rem;
    font-variant-numeric: tabular-nums; color: var(--text);
}

.group-table td:first-child { width: 24%; min-width: 190px; }
.group-table td:nth-child(3) { width: 11rem; }
.group-table td:nth-child(4) { width: 12rem; }

/* Gruptaki alanlar satırın altında küçük bağlantılar olarak durur: eski
   ızgaranın tek gerçek işlevi olan tıklanabilirlik korunuyor. */
.gs-members { display: block; margin-top: 0.2rem; font-size: var(--fs-2xs); line-height: 1.55; }
.gs-members a { color: var(--text-3); text-decoration: none; }
.gs-members a:hover { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.gs-members a + a::before { content: " · "; color: var(--line-strong); }

/* İki çubuk, iki ayrı ölçü.
   Hacim çubuğu en büyük gruba göre ölçekli, sıralama hacme göre olduğu için
   yukarıdan aşağı kısalır. Oran çubuğu her satırda 0-100 arasında; küçük
   gruplarda da okunsun diye rayı tam genişlikte ve kenarlıklı. Sağ sütunun
   soldakini izlememesi tablonun söylediği şeydir. */
.gs-cell { display: flex; align-items: center; gap: var(--sp-3); }

.gs-track {
    display: block; flex: 0 0 auto; width: 72px; height: 9px;
    background: var(--line); border-radius: var(--r-xs); overflow: hidden;
}

/* Oran rayı 0-100 referansı taşır; bu yüzden kenarlığı görünür. */
.gs-track--ratio {
    background: none;
    border: 1px solid var(--line-strong);
}

.gs-fill { display: block; height: 100%; min-width: 2px; }
.gs-fill--volume { background: var(--text-3); }
.gs-fill--ratio { background: var(--tier-2); }

.gs-n { font-size: var(--fs-sm); color: var(--text); font-variant-numeric: tabular-nums; }
.gs-n--muted { font-size: var(--fs-2xs); color: var(--text-3); }
.gs-n--muted::before { content: "("; }
.gs-n--muted::after { content: ")"; }

/* Oran sayfanın asıl bulgusu; en okunur rakam o olmalı. */
.gs-ratio {
    font-size: var(--fs-md); font-weight: 600; color: var(--text);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Olgunluk karışımı: renkli metin, kutu değil. */
.gs-mix { display: inline-block; margin-right: var(--sp-3); font-size: var(--fs-xs); white-space: nowrap; }
.gs-mix.lv-clinical    { color: var(--tier-1); font-weight: 600; }
.gs-mix.lv-early       { color: var(--tier-2); }
.gs-mix.lv-preclinical { color: var(--tier-4); }
.gs-mix.lv-exploratory { color: var(--text-3); }

@media (max-width: 860px) {
    .group-table td:first-child { min-width: 150px; }
    .gs-track { width: 46px; }
}

/* ---- Öne çıkan alanlar ----------------------------------------------------
   Kutu ızgarası değil, yatay bir sıralama listesi: her satır bir alan, çubuk
   klinik yayın hacmi, sağdaki rakam bu hacmin içindeki en güçlü basamak.
   Çubuklar aynı rayı paylaştığı için satırlar birbiriyle kıyaslanabiliyor;
   ızgarada beşinci sütundan sonra tek başına sarkan hücre de ortadan kalkıyor. */
.feat-list { display: flex; flex-direction: column; }

.feat-row {
    display: grid;
    grid-template-columns: minmax(150px, 15rem) minmax(60px, 1fr) auto auto;
    align-items: center; gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--line);
    text-decoration: none;
    transition: background-color var(--t-fast);
}


.feat-row:hover { background: var(--glass-2); }

.feat-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.feat-row:hover .feat-name { color: var(--link); }

.feat-track { display: block; height: 9px; background: var(--line); border-radius: var(--r-xs); overflow: hidden; }
.feat-fill { display: block; height: 100%; background: var(--tier-1); }

.feat-n, .feat-top {
    font-size: var(--fs-xs); color: var(--text-3);
    white-space: nowrap; text-align: right;
}

.feat-n { min-width: 5rem; }
.feat-top { min-width: 12rem; }

/* Başlık satırı: etiketler bir kez burada, satırlarda yalnızca rakam. */
.feat-head {
    padding-bottom: var(--sp-2); border-top: 0;
    font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-3);
}

.feat-head:hover { background: none; }
.feat-head .feat-n, .feat-head .feat-top { font-size: inherit; color: inherit; }
.feat-row:not(.feat-head):first-of-type { border-top: 1px solid var(--line); }
.feat-n strong, .feat-top strong {
    font-size: var(--fs-md); font-weight: 600; color: var(--text);
    font-variant-numeric: tabular-nums; margin-right: 0.3rem;
}

/* Dar ekranda uzun etiket satırı bozar; çubuk alta iner, açıklama bölüm
   alt başlığında zaten yazılı. */
@media (max-width: 900px) {
    .feat-row { grid-template-columns: 1fr auto; row-gap: var(--sp-2); }
    .feat-track { grid-column: 1 / -1; }
    .feat-n, .feat-top { min-width: 0; text-align: left; font-size: var(--fs-2xs); }
    .feat-top { text-align: right; }
}

/* ---- Kümeler ------------------------------------------------------------- */
.ind-group + .ind-group { margin-top: var(--sp-7); }

.ind-group-head { padding-left: var(--sp-4); border-left: 3px solid var(--line-strong); margin-bottom: var(--sp-5); }
.ind-group-head.lv-clinical    { border-left-color: var(--tier-1); }
.ind-group-head.lv-early       { border-left-color: var(--tier-2); }
.ind-group-head.lv-preclinical { border-left-color: var(--tier-4); }
.ind-group-head.lv-exploratory { border-left-color: var(--tier-5); }

.ind-group-head h3 {
    font-family: var(--font-head); font-size: var(--fs-md); font-weight: 600;
    color: var(--text); display: flex; align-items: baseline; gap: var(--sp-3);
}

.ind-group-n { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ind-group-head p { font-size: var(--fs-xs); color: var(--text-3); max-width: 76ch; margin-top: 0.15rem; }

.ind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--col-lg), 100%), 1fr)); gap: var(--sp-4); }

/* ---- Endikasyon kartı ---------------------------------------------------- */
.ind-card { display: flex; flex-direction: column; gap: var(--sp-3); border-left-width: 3px; }

.ind-card.lv-clinical    { border-left-color: var(--tier-1); }
.ind-card.lv-early       { border-left-color: var(--tier-2); }
.ind-card.lv-preclinical { border-left-color: var(--tier-4); }
.ind-card.lv-exploratory { border-left-color: var(--tier-5); }
.ind-card[hidden] { display: none; }

/* Izgara, esnek kutu değil: `flex: 0 0 auto` taşıyan rozet hiç daralmadığı
   için dar kartlarda kartın dışına çıkıyordu ("Early Clinical Evidence" 82
   piksel taşıyordu). `auto` sütunu yer kalmayınca metni sarmalar, taşmaz. */
.ind-card-top {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline; gap: var(--sp-3);
}

.ind-card-top h3 { font-family: var(--font-head); font-size: var(--fs-md); font-weight: 600; line-height: 1.25; }
.ind-card-top h3 a { color: var(--text); text-decoration: none; }
.ind-card-top h3 a:hover { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.ind-card-top .evidence-badge { flex: 0 0 auto; text-align: right; }

.ind-card-meta { font-size: var(--fs-2xs); color: var(--text-3); }
.ind-card-blurb { font-size: var(--fs-xs); color: var(--text-2); line-height: 1.55; }

/* Klinik / preklinik / diğer payı, tek satırlık bir dağılım çubuğu. */
.ind-bar { display: flex; height: 3px; background: var(--line); margin-top: var(--sp-1); }
.ind-bar span { display: block; }
.ind-bar-clin  { background: var(--tier-1); }
.ind-bar-pre   { background: var(--tier-4); }
.ind-bar-other { background: var(--tier-5); }

.ind-figs { display: flex; gap: var(--sp-5); }
.ind-figs div { display: flex; flex-direction: column-reverse; }
.ind-figs dt { font-size: var(--fs-2xs); color: var(--text-3); }
.ind-figs dd { font-size: var(--fs-md); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.2; }

.ind-outcomes-label {
    font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--text-3); margin-top: var(--sp-1);
}

.ind-outcomes { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }

.ind-outcome { font-size: var(--fs-xs); color: var(--text-2); }
.ind-outcome b { font-weight: 600; color: var(--text-3); margin-left: 0.3rem; font-variant-numeric: tabular-nums; }
.ind-outcome.is-empty { color: var(--text-3); font-style: italic; }

.ind-card-foot {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--sp-3); flex-wrap: wrap;
    margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--line);
}

.ind-regimes { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.ind-cta { font-size: var(--fs-xs); font-weight: 600; color: var(--link); text-decoration: none; white-space: nowrap; }
.ind-cta:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Yöntem ------------------------------------------------------------- */
.ind-method { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.ind-method summary {
    cursor: pointer; list-style: none;
    padding: var(--sp-4) 0;
    font-size: var(--fs-sm); font-weight: 600; color: var(--text);
    display: flex; align-items: baseline; gap: var(--sp-3);
}

.ind-method summary::-webkit-details-marker { display: none; }
.ind-method summary::before { content: "+"; color: var(--text-3); font-weight: 400; }
.ind-method[open] summary::before { content: "−"; }
.ind-method summary:focus-visible { outline: none; box-shadow: var(--focus); }

.ind-method-body { padding-bottom: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.ind-method-body p { font-size: var(--fs-xs); color: var(--text-3); max-width: var(--measure); line-height: 1.6; }

/* ---- Kapsam dışı ilgili alanlar -------------------------------------------
   Elektroporasyon temelli ama tümör tedavisi değil. Veri gizlenmiyor; sayfanın
   onkolojik manzarasından ayrı, sessiz bir blokta duruyor. */
.offscope {
    margin-top: var(--sp-6); padding-top: var(--sp-5);
    border-top: 1px solid var(--line);
}

.offscope h3 { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.offscope > p { font-size: var(--fs-xs); color: var(--text-3); max-width: var(--w-read); margin-top: var(--sp-2); }

.offscope-item {
    display: flex; align-items: baseline; gap: var(--sp-3);
    margin-top: var(--sp-3); font-size: var(--fs-sm);
}

.offscope-item a { font-weight: 600; }
.offscope-n { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }

.ind-crosslink { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--text-2); }
.ind-crosslink a { font-weight: 600; }

@media (max-width: 720px) {
    .ind-grid { grid-template-columns: 1fr; }
    .toolbar { flex-direction: column; align-items: stretch; }
    /* İki sütun sabit: otomatik yerleşim burada da üç sütun seçip dördüncü
       alanı yalnız bırakıyordu. */
    .toolbar-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .segmented { width: 100%; }
    .segment { flex: 1; }
}

/* ==========================================================================
   17. DAR EKRAN
   ========================================================================== */

/* Başlıkta yedi bağlantı + açılır grup + dil + tema var; 1024px'te bunlar
   sığmayıp tema düğmesini ekranın dışına itiyordu. İki kademede sıkıştırılır,
   992px'in altında gezinme çekmeceye taşınır. */
@media (max-width: 1240px) {
    .main-nav a, .nav-group-toggle { font-size: 0.75rem; padding: 0.5rem var(--sp-2); }
    .header-container { padding: 0 var(--gutter-sm); gap: var(--sp-2); }
}

@media (max-width: 1100px) {
    .main-nav { gap: 0; }
    .main-nav a, .nav-group-toggle { padding: 0.5rem 0.35rem; letter-spacing: -0.01em; }
    .lang-toggle-container, .theme-toggle-container { margin-left: var(--sp-2); }
    .logo-img { height: 26px; }
}

@media (max-width: 992px) {
    .menu-toggle { display: flex; }
    .lang-toggle-container { margin-left: auto; }

    /* ---- Dokunma hedefleri ------------------------------------------------
       Menü düğmesi 20x14px'lik çubuk grafiğinin tam boyutundaydı: telefonda
       gezinmeyi açan tek denetim, parmak ucunun üçte biri kadar. Çubuklar
       aynı kalır, düğme 44x44'e çıkar; iç boşluk grafiği ortalar. Dil ve
       tema düğmeleri de 25-28px'ten 44px'e yükselir. */
    .menu-toggle {
        width: 44px; height: 44px;
        padding: 15px 12px;
        margin-left: 0;
    }

    .lang-btn, .theme-btn { min-height: 44px; padding: 0.34rem 0.8rem; }

    .breadcrumbs a, .breadcrumbs span {
        display: inline-block;
        padding: 0.3rem 0;
    }

    .footer-home a { min-height: 44px; }

    .main-nav {
        position: fixed; top: 0; right: -320px;
        width: 300px; height: 100dvh; max-height: 100dvh;
        overflow-y: auto; overscroll-behavior: contain;
        flex-direction: column; align-items: stretch; justify-content: flex-start;
        gap: 0.15rem; margin-left: 0;
        padding: 84px var(--sp-5) var(--sp-6);
        background: var(--solid);
        border-left: 1px solid var(--line-strong);
        transition: right var(--t);
        z-index: 1000;
    }

    .main-nav.mobile-open { right: 0; }

    /* Çekmece açıkken arkadaki sayfa sönümlenir: hangi katmanın etkin
       olduğu belirsiz kalmasın. Perde tıklanabilir değil; kapatmayı
       belge düzeyindeki dinleyici üstlenir. */
    .main-nav::after { content: none; }
    body:has(.main-nav.mobile-open)::after {
        content: ""; position: fixed; inset: 0; z-index: 999;
        background: rgba(4, 7, 12, 0.5);
        -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
    }
    .main-nav a { display: block; width: 100%; padding: 0.75rem 1rem; font-size: var(--fs-sm); }

    .nav-group { width: 100%; }
    .nav-group-toggle {
        display: block; width: 100%; text-align: left;
        padding: 0.75rem 1rem; font-size: var(--fs-sm); cursor: default;
    }
    .nav-group-toggle::after { display: none; }
    .nav-dropdown {
        position: static; display: flex; min-width: 0;
        border: none; box-shadow: none; background: transparent;
        padding: 0 0 0 var(--sp-4);
    }

    .page-hero { padding: var(--sp-6) var(--sp-5); }
    .page-hero--home { grid-template-columns: 1fr; }
    .page-hero--home h1 { font-size: var(--fs-2xl); }
    /* Sahne ne kadar genişse uyarım noktaları da o kadar büyük; telefonda
       280px'lik sabit tavan yerine mevcut genişliği kullanır. */
    .anatomy-stage { max-width: min(340px, 100%); }
    .anatomy-explorer { grid-template-columns: 1fr; }
    .section-card { padding: var(--sp-5); }
    .page-container { padding: var(--sp-5) var(--sp-4) var(--sp-8); }
    .pyramid-tier { width: 100% !important; }
}

@media (max-width: 640px) {
    :root { --fs-3xl: 2.125rem; --fs-2xl: 1.75rem; --fs-xl: 1.4375rem; }

    /* Logo + dil + tema + menü, 44px'lik dokunma hedefleriyle birlikte
       320px'lik bir başlığa sığmıyor ve son öğe ekranın dışında kalıyordu.
       Yükseklik korunur, yatayda daralır: dar telefonda da dört denetimin
       tamamı erişilebilir kalsın. */
    .header-container { padding: 0 var(--sp-3); gap: var(--sp-1); }
    .logo-img { height: 22px; }
    .lang-btn, .theme-btn { padding: 0.34rem 0.5rem; }
    .lang-toggle-container, .theme-toggle-container { margin-left: var(--sp-1); }
    .menu-toggle { margin-left: var(--sp-1); flex: 0 0 44px; }
    .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .drawer-links { flex-direction: column; }
    .library-toolbar { flex-direction: column; align-items: stretch; }
    .library-grid { grid-template-columns: 1fr; }

    /* Telefonda rozet başlığın yanında iki satıra kırılmak yerine tümüyle
       altına iner. */
    .ind-card-top { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
    .ind-card-top .evidence-badge { text-align: left; }

    /* Tek başına duran eylem düğmesi sarmalanabilir; hizayı koruması gereken
       yalnızca araç çubuğundaki düğmelerdir. */
    .btn { white-space: normal; }
    .toolbar .btn, .library-toolbar .btn { white-space: nowrap; }
}

@media (hover: none) {
    .application-card:hover, .paper-citation-card:hover { background: var(--glass-1); }
}

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

@media print {
    body { background: #fff; color: #000; }
    .main-header, .citation-drawer, .btn, .menu-toggle { display: none !important; }
    .card, .section-card { border: 1px solid #ccc; background: #fff; }
    h1, h2, h3, strong { color: #000; }
}