/* ==========================================================================
   MedNexus Design Layer — webDoktorModule
   Kaynak: C:\mednexus\design\design_handoff_mednexus\README.md (hifi)
           C:\mednexus\packages\ui\src\styles\tokens.css
           C:\mednexus\packages\ui\src\components\mn\*

   Yükleme sırası: bootstrap.min.css -> font-awesome -> modern-design.css
                   -> BU DOSYA (hepsini ezer)

   Bölümler:
     1. Fontlar
     2. Token katmanı (açık|koyu × mavi|yeşil|gri)
     3. Köprü — eski değişken adları -> mednexus token'ları  [GEÇİCİ]
     4. Taban & tipografi
     5. mn-* bileşen kütüphanesi
     6. Eski sınıf sözlüğünün mednexus'a yeniden tanımı
     7. Bootstrap ezmeleri
     8. Kabuk (üst bar + alt nav)
     9. Erişilebilirlik

   TÜRKÇE KURALI: text-transform:uppercase KULLANILMAZ (İ/ı sorunu).
   Büyük harf gerekiyorsa metin kaynakta büyük yazılır.
   ========================================================================== */

/* ===== 1. Fontlar =========================================================
   latin-ext alt kümesi Türkçe karakterler (ğ ş ı İ ç ö ü) için zorunlu. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@600;700&family=JetBrains+Mono:wght@400;500;600&display=swap&subset=latin,latin-ext');

/* ===== 2. Token katmanı ===================================================
   Seçim: <html data-theme="light|dark" data-accent="blue|green|gray">
   NOT: koyu mod bloğu açık-mod accent bloklarından SONRA gelmeli — eşit
   spesifisitede son kural kazanır. Koyu+accent blokları çift attribute ile
   daha spesifik olduğu için en sonda. */

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

    --mn-bg: #F1F3F6;
    --mn-surf: #FFFFFF;
    --mn-surf2: #EDEFF2;
    --mn-line: #E3E6EB;
    --mn-ink: #141B26;
    --mn-mut: #657080;
    --mn-shadow: 0 1px 2px rgba(16, 24, 40, .06);
    --mn-shadow-raise: 0 .75rem 1.75rem -1rem rgba(16, 24, 40, .28);

    --mn-danger: #D64545;
    --mn-ok: #2E9E6B;
    --mn-warn: #D9862E;
    --mn-info: #2F6FE0;

    /* Accent varsayılanı: mavi (data-accent yokken de tanımlı olsun) */
    --mn-acc: #2F4FE0;
    --mn-soft: #E9EDFC;
    --mn-accink: #FFFFFF;

    /* Marka gradyan uçları — üzerinde daima beyaz metin taşıyan şeritler. */
    --mn-grad-a: color-mix(in srgb, var(--mn-acc) 90%, #fff);
    --mn-grad-b: color-mix(in srgb, var(--mn-acc) 74%, #000);

    /* Tipografi aileleri */
    --mn-font-body: 'Manrope';
    --mn-font-display: 'Space Grotesk';
    --mn-font-mono: 'JetBrains Mono';

    /* Ölçek (tema bağımsız) — tasarım toparlama A.
       Yazı: görünür metin 11px'in altına inmez. Gövde tabanı 14px kalır. */
    --mn-fs-2xs: .6875rem;
    --mn-fs-xs: .75rem;
    --mn-fs-sm: .8125rem;
    --mn-fs-base: .875rem;
    --mn-fs-md: .9375rem;
    --mn-fs-lg: 1.125rem;
    --mn-fs-xl: clamp(1.25rem, 1.1rem + .8vw, 1.5rem);
    --mn-fs-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);

    /* Boşluk: 4px tabanlı */
    --mn-sp-1: .25rem;
    --mn-sp-2: .5rem;
    --mn-sp-3: .75rem;
    --mn-sp-4: 1rem;
    --mn-sp-5: 1.5rem;
    --mn-sp-6: 2rem;

    /* Köşe */
    --mn-r-sm: .5rem;
    --mn-r-md: .75rem;
    --mn-r-lg: 1rem;

    /* Durum tonları: :root'ta çözülür; koyu tema --mn-ok vb.'yi aynı
       elemanda ezdiği için koyu değerle hesaplanır. */
    --mn-ok-soft: color-mix(in srgb, var(--mn-ok) 12%, transparent);
    --mn-warn-soft: color-mix(in srgb, var(--mn-warn) 12%, transparent);
    --mn-danger-soft: color-mix(in srgb, var(--mn-danger) 12%, transparent);
    --mn-info-soft: color-mix(in srgb, var(--mn-info) 12%, transparent);
}

/* ----- Açık mod accent'leri ----- */
:root[data-accent="green"] {
    --mn-acc: #0F7A6C;
    --mn-soft: #E2F1EE;
}

:root[data-accent="gray"] {
    --mn-acc: #37424E;
    --mn-soft: #E8EDF2;
}

/* ----- Koyu mod (nötrler + mavi accent varsayılanı) ----- */
:root[data-theme="dark"] {
    color-scheme: dark;

    --mn-bg: #0E1217;
    --mn-surf: #151A21;
    --mn-surf2: #1C232C;
    --mn-line: #28303B;
    --mn-ink: #EDF1F6;
    --mn-mut: #8B95A5;
    --mn-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --mn-shadow-raise: 0 .75rem 1.75rem -1rem rgba(0, 0, 0, .7);

    --mn-ok: #4CC38A;
    --mn-warn: #E0A64E;
    --mn-info: #7FA0FF;

    --mn-acc: #93A5FF;
    --mn-soft: #232C4E;
    --mn-accink: #0E1217;

    /* Gradyan şeritleri beyaz metin taşır; koyu modda da koyu kalmalı — bu
       yüzden açık-mod accent hex'inden türetilir, --mn-acc'tan değil. */
    --mn-grad-a: color-mix(in srgb, #2F4FE0 90%, #fff);
    --mn-grad-b: color-mix(in srgb, #2F4FE0 74%, #000);
}

/* ----- Koyu mod accent'leri ----- */
:root[data-theme="dark"][data-accent="green"] {
    --mn-acc: #4CC9B6;
    --mn-soft: #123430;
    --mn-grad-a: color-mix(in srgb, #0F7A6C 90%, #fff);
    --mn-grad-b: color-mix(in srgb, #0F7A6C 74%, #000);
}

:root[data-theme="dark"][data-accent="gray"] {
    --mn-acc: #A7B7C7;
    --mn-soft: #2A3540;
    --mn-grad-a: color-mix(in srgb, #37424E 90%, #fff);
    --mn-grad-b: color-mix(in srgb, #37424E 74%, #000);
}

/* ===== 3. Uyumluluk katmanı ===============================================
   Eski değişken sözlüğü (--primary, --bg-body, --text-main …). Tüm
   template'ler --mn-* token'larına taşındı; bu blok yalnızca gözden kaçmış
   bir kullanım veya harici/gömülü içerik için ağ görevi görüyor.
   Yeni kod bu adları KULLANMAMALI. */
:root {
    --primary: var(--mn-acc);
    --primary-hover: var(--mn-acc);
    --primary-light: var(--mn-soft);
    --primary-dark: var(--mn-acc);

    --success: var(--mn-ok);
    --success-light: var(--mn-soft);
    --danger: var(--mn-danger);
    --warning: var(--mn-warn);

    --bg-primary-light: var(--mn-soft);
    --bg-success-light: color-mix(in srgb, var(--mn-ok) 12%, transparent);
    --bg-warning-light: color-mix(in srgb, var(--mn-warn) 12%, transparent);
    --bg-danger-light: color-mix(in srgb, var(--mn-danger) 12%, transparent);

    --bg-body: var(--mn-bg);
    --bg-surface: var(--mn-surf);
    --bg-surface-secondary: var(--mn-surf2);
    --bg-body-secondary: var(--mn-surf2);
    --bg-header: var(--mn-surf);

    --text-main: var(--mn-ink);
    --text-body: var(--mn-ink);
    --text-muted: var(--mn-mut);

    --border-color: var(--mn-line);

    /* Handoff §Ölçüler: input 10–11px, buton 11–12px, kart 14–16px, hero 18px */
    --radius-sm: .625rem;
    --radius-md: .6875rem;
    --radius-lg: .875rem;
    --radius-xl: 1rem;

    --shadow-xs: var(--mn-shadow);
    --shadow-sm: var(--mn-shadow);
    --shadow-md: 0 .25rem .75rem rgba(8, 14, 26, .08);
    --shadow-lg: 0 .5rem 1.5rem rgba(8, 14, 26, .12);
    --shadow-xl: 0 1.125rem 2.25rem -1.125rem rgba(8, 14, 26, .35);

    --input-height: 2.75rem;
}

/* ===== 4. Taban & tipografi =============================================== */

/* Kutu modeli reset'i. ZORUNLU: Bootstrap Reboot bunu veriyor ama login.html,
   rapor_bilgi.html ve resmi_rapfat_modal.html Bootstrap YÜKLEMİYOR — reset
   burada olmazsa o sayfalarda padding genişliğe eklenir ve düzen taşar. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--mn-bg);
    color: var(--mn-ink);
    font-family: var(--mn-font-body), system-ui, -apple-system, sans-serif;
    font-size: .875rem;
    /* handoff: 14px taban */
    line-height: 1.45;
    padding-bottom: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Desktop'ta app-container'ı çerçeveleyen eski gri zemin kaldırıldı —
   mednexus sayfa zemini tek parça. */
@media (min-width: 768px) {
    body {
        background: var(--mn-bg);
    }
}

h1,
h2,
h3,
h4,
h5,
h6,
.mn-display {
    font-family: var(--mn-font-display), var(--mn-font-body), sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--mn-ink);
    margin-top: 0;
}

a {
    color: var(--mn-acc);
    text-decoration: none;
    transition: color .2s;
}

a:hover {
    color: var(--mn-ink);
}

/* Kart/modül kartı içindeki bağlantılar rengi kendileri yönetir */
a.module-card,
a.modern-card,
a.mn-card {
    color: var(--mn-ink);
}

input,
select,
button,
textarea {
    font-family: inherit;
    color: inherit;
}

input::placeholder,
textarea::placeholder {
    color: var(--mn-mut);
    opacity: .75;
}

::selection {
    background: var(--mn-soft);
    color: var(--mn-ink);
}

/* Sayı, tarih, protokol no, TC, kod — handoff §Tipografi */
.mn-mono,
.animate-num,
code,
kbd,
samp {
    font-family: var(--mn-font-mono), ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

/* ===== 5. mn-* bileşen kütüphanesi ======================================== */

/* --- Eyebrow (Eyebrow.tsx): 11px/700/ls .14em/accent --- */
.mn-eyebrow {
    font-size: var(--mn-fs-2xs);
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--mn-acc);
    line-height: 1.3;
}

/* --- Kart (MnCard.tsx) --- */
.mn-card {
    background: var(--mn-surf);
    border: 1px solid var(--mn-line);
    border-radius: var(--mn-r-md);
    box-shadow: var(--mn-shadow);
    padding: 1.25rem;
    color: var(--mn-ink);
}

/* --- Kart hover yükselmesi (globals.css) --- */
.mn-card-hover {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.mn-card-hover:hover {
    border-color: var(--mn-acc);
    transform: translateY(-.1875rem);
    box-shadow: var(--mn-shadow-raise);
}

/* --- Hero panel (HeroPanel.tsx) — radius 18, soft gradyan + dekor daire --- */
.mn-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: var(--mn-sp-5);
    border-radius: var(--mn-r-lg);
    border: 1px solid var(--mn-line);
    background: linear-gradient(120deg, var(--mn-soft), transparent 65%), var(--mn-surf);
    box-shadow: var(--mn-shadow);
}

/* Dekoratif daire (handoff §4).
   z-index ZORUNLU: ::after DOM'da son çocuk ve absolute olduğu için
   z-index'siz halde konumlanmış kardeşlerinin ÜSTÜNE boyanır ve içeriği
   (ör. butonları) soluklaştırır.
   Kenar radial-gradient ile yumuşatıldı: handoff'un hero'su daha yüksek
   (eyebrow + 24px başlık + açıklama); bu projedeki kısa hero'larda 200px'lik
   düz renkli daire üstten+alttan kırpılıp sert dikey bant bırakıyordu. */
.mn-hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    right: -3.125rem;
    top: -3.75rem;
    width: 12.5rem;
    height: 12.5rem;
    border-radius: 50%;
    background: radial-gradient(circle, var(--mn-soft) 52%, transparent 72%);
    opacity: .75;
    pointer-events: none;
}

.mn-hero>* {
    position: relative;
    z-index: 1;
}

.mn-hero__title {
    font-family: var(--mn-font-display), sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.mn-hero__sub {
    color: var(--mn-mut);
    font-size: .84375rem;
    max-width: 45rem;
}

/* --- Ekran başlığı (PageHeader.tsx) --- */
.mn-page-head {
    display: flex;
    align-items: flex-end;
    gap: var(--mn-sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--mn-sp-5);
}

.mn-page-head__eylemler {
    display: flex;
    align-items: center;
    gap: var(--mn-sp-2);
    flex: none;
}

.mn-page-head__main {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    margin-right: auto;
    min-width: 0;
}

.mn-page-head .mn-eyebrow {
    font-size: var(--mn-fs-2xs);
}

.mn-page-head__title {
    font-family: var(--mn-font-display), sans-serif;
    font-size: var(--mn-fs-xl);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--mn-ink);
    margin: 0;
}

.mn-page-head__sub {
    color: var(--mn-mut);
    font-size: var(--mn-fs-sm);
}

/* --- Pill rozet (PillBadge.tsx) --- */
.mn-pill {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: var(--mn-fs-2xs);
    font-weight: 600;
    border-radius: 6.1875rem;
    padding: .1875rem .5625rem;
    white-space: nowrap;
    color: var(--mn-mut);
    border: 1px solid var(--mn-line);
    background: transparent;
}

.mn-pill--soft {
    color: var(--mn-acc);
    border-color: transparent;
    background: var(--mn-soft);
}

.mn-pill--accent {
    color: var(--mn-accink);
    border-color: transparent;
    background: var(--mn-acc);
}

.mn-pill--ok {
    color: var(--mn-ok);
    border-color: color-mix(in srgb, var(--mn-ok) 35%, transparent);
    background: var(--mn-ok-soft);
}

.mn-pill--warn {
    color: var(--mn-warn);
    border-color: color-mix(in srgb, var(--mn-warn) 35%, transparent);
    background: var(--mn-warn-soft);
}

.mn-pill--danger {
    color: var(--mn-danger);
    border-color: color-mix(in srgb, var(--mn-danger) 35%, transparent);
    background: var(--mn-danger-soft);
}

/* Bilgi ve nötr durum (durum_rozeti makrosu) */
.mn-pill--info {
    color: var(--mn-info);
    border-color: color-mix(in srgb, var(--mn-info) 35%, transparent);
    background: var(--mn-info-soft);
}

.mn-pill--notr {
    color: var(--mn-mut);
    border-color: var(--mn-line);
    background: var(--mn-surf2);
}

/* --- Soft ikon kutusu (SoftIconBox.tsx) --- */
.mn-iconbox {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mn-soft);
    color: var(--mn-acc);
    /* md — launcher kartı */
    width: 3rem;
    height: 3rem;
    border-radius: .875rem;
    font-size: 1.375rem;
}

.mn-iconbox--xs {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: .4375rem;
    font-size: .875rem;
}

.mn-iconbox--sm {
    width: 2.625rem;
    height: 2.625rem;
    border-radius: .75rem;
    font-size: 1.25rem;
}

.mn-iconbox--lg {
    width: 3.625rem;
    height: 3.625rem;
    border-radius: 1.0625rem;
    font-size: 2rem;
}

/* --- Form (formStyles.ts) --- */
.mn-label {
    display: block;
    font-size: var(--mn-fs-xs);
    font-weight: 600;
    color: var(--mn-mut);
    margin-bottom: .375rem;
}

.mn-input {
    width: 100%;
    height: 2.75rem;
    padding: 0 .75rem;
    border: 1px solid var(--mn-line);
    border-radius: .625rem;
    background: var(--mn-bg);
    color: var(--mn-ink);
    font-size: .875rem;
    font-family: inherit;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.mn-input:focus {
    border-color: var(--mn-acc);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mn-acc) 18%, transparent);
}

/* --- Butonlar (globals.css §mn-btn-primary) --- */
.mn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 2.75rem;
    padding: 0 1rem;
    border-radius: .6875rem;
    border: 1px solid var(--mn-line);
    background: var(--mn-surf);
    color: var(--mn-ink);
    font-weight: 600;
    font-size: .875rem;
    cursor: pointer;
    transition: all .18s ease;
    text-decoration: none;
}

.mn-btn:hover {
    border-color: var(--mn-acc);
    color: var(--mn-acc);
}

.mn-btn--primary {
    border: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mn-acc) 86%, #fff), var(--mn-acc));
    box-shadow: 0 .5rem 1.125rem -.5rem var(--mn-acc);
    color: var(--mn-accink);
    font-weight: 700;
}

.mn-btn--primary:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--mn-acc) 80%, #fff), var(--mn-acc));
    color: var(--mn-accink);
}

.mn-btn--ghost {
    background: transparent;
    border-color: var(--mn-line);
    color: var(--mn-mut);
}

.mn-btn--ghost:hover {
    color: var(--mn-acc);
    border-color: var(--mn-acc);
}

.mn-btn--danger {
    background: transparent;
    border-color: color-mix(in srgb, var(--mn-danger) 35%, transparent);
    color: var(--mn-danger);
}

.mn-btn--danger:hover {
    background: color-mix(in srgb, var(--mn-danger) 10%, transparent);
    border-color: var(--mn-danger);
    color: var(--mn-danger);
}

.mn-btn:active {
    transform: scale(.985);
}

.mn-btn:disabled,
.mn-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

/* --- Chip (handoff §3) --- */
.mn-chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 2.5rem;
    padding: 0 .875rem;
    border-radius: 6.1875rem;
    border: 1px solid var(--mn-line);
    background: var(--mn-surf);
    color: var(--mn-ink);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s ease;
}

.mn-chip:hover {
    border-color: var(--mn-acc);
}

.mn-chip.is-active,
.mn-chip[aria-pressed="true"] {
    border-color: var(--mn-acc);
    background: var(--mn-soft);
    color: var(--mn-acc);
}

/* --- Veri tablosu (handoff §5) --- */
.mn-table-wrap {
    background: var(--mn-surf);
    border: 1px solid var(--mn-line);
    border-radius: .875rem;
    box-shadow: var(--mn-shadow);
    overflow: hidden;
}

.mn-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
    color: var(--mn-ink);
    margin: 0;
}

.mn-table thead th {
    background: var(--mn-surf2);
    color: var(--mn-mut);
    font-size: .75rem;
    font-weight: 700;
    text-align: left;
    padding: .625rem .75rem;
    border: none;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.mn-table tbody td {
    padding: .625rem .75rem;
    border-top: 1px solid var(--mn-line);
    vertical-align: middle;
}

.mn-table tbody tr {
    min-height: 2.875rem;
    transition: background .15s ease;
}

.mn-table tbody tr:hover {
    background: var(--mn-soft);
}

/* Sayısal kolonlar sağa yaslı + mono */
.mn-table .num,
.mn-table td.num {
    text-align: right;
    font-family: var(--mn-font-mono), monospace;
    font-variant-numeric: tabular-nums;
}

/* --- Cam yüzey (globals.css) --- */
.mn-glass {
    background: color-mix(in srgb, var(--mn-surf) 80%, transparent);
    -webkit-backdrop-filter: blur(.875rem);
    backdrop-filter: blur(.875rem);
}

/* --- Sayfa ışıması (globals.css) --- */
.mn-page-glow {
    background:
        radial-gradient(75rem 37.5rem at 92% -12%, var(--mn-soft), transparent 55%),
        radial-gradient(56.25rem 32.5rem at -8% 112%, var(--mn-soft), transparent 50%),
        var(--mn-bg);
}

/* --- Izgara (handoff §2/§4) --- */
.mn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: .75rem;
}

.mn-grid--tight {
    grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
}

/* --- Animasyonlar (globals.css) --- */
@keyframes mn-fadeup {
    from {
        opacity: 0;
        transform: translateY(.625rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes mn-fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* DİKKAT — fill-mode YOK, bilerek.
   `both` (veya `forwards`) kullanılırsa animasyon bittikten sonra da transform
   uygulanmış sayılır (computed: matrix(1,0,0,1,0,0), `none` değil). Bu durumda
   elemanı taşıyan kap:
     1) position:fixed için containing block olur -> Bootstrap modal'ı viewport
        yerine kabı kaplar,
     2) stacking context yaratır -> z-index:1055 modal bu bağlama hapsolur ve
        kök seviyedeki z-index:1050 backdrop üstüne boyanır (modal tıklanamaz).
   base.html'de .app-container bu sınıfı taşıyor ve modallar onun içinde. */
.mn-fadeup {
    animation: mn-fadeup .35s ease;
}

.mn-fadein {
    animation: mn-fadein .15s ease;
}

/* --- Toast (handoff §Interactions): alt-orta koyu pill, ~2.6s --- */
.mn-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 10000;
    background: var(--mn-ink);
    color: var(--mn-bg);
    border-radius: 6.1875rem;
    padding: .6875rem 1.25rem;
    font-size: .84375rem;
    font-weight: 500;
    box-shadow: 0 .625rem 1.75rem rgba(0, 0, 0, .3);
    pointer-events: none;
}

/* ===== 5b. Kanonik bileşenler — tasarım toparlama A =======================
   İşaretleme templates/_bilesenler.html makrolarında; burada yalnızca görünüm.
   Eski karşılıkları (.module-card, .icon-box, .card-content, .action-arrow)
   B/C ekranları taşınana kadar §6'da yaşar. */

/* --- Liste ızgarası --- */
.mn-liste {
    display: grid;
    gap: var(--mn-sp-3);
    margin-bottom: var(--mn-sp-5);
}

.mn-liste--modul {
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}

.mn-liste--servis {
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
    gap: var(--mn-sp-2);
}

/* --- Liste kartı: ikon + başlık/alt + chevron --- */
.mn-liste-karti {
    display: flex;
    align-items: center;
    gap: var(--mn-sp-3);
    min-height: 4.5rem;
    padding: var(--mn-sp-4);
    background: var(--mn-surf);
    border: 1px solid var(--mn-line);
    border-radius: var(--mn-r-md);
    box-shadow: var(--mn-shadow);
    color: var(--mn-ink);
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

a.mn-liste-karti:hover {
    border-color: var(--mn-acc);
    box-shadow: var(--mn-shadow-raise);
    color: var(--mn-ink);
}

.mn-liste-karti__govde {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.mn-liste-karti__baslik {
    font-family: var(--mn-font-display), sans-serif;
    font-size: var(--mn-fs-md);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.35;
    color: var(--mn-ink);
    margin: 0;
}

.mn-liste-karti__alt {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem .375rem;
    font-size: var(--mn-fs-sm);
    color: var(--mn-mut);
    line-height: 1.4;
}

.mn-liste-karti__yan {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mn-sp-1);
}

.mn-liste-karti__oda {
    font-family: var(--mn-font-mono), monospace;
    font-size: var(--mn-fs-2xs);
    font-weight: 600;
    color: var(--mn-mut);
}

.mn-liste-karti__ok {
    flex: none;
    color: var(--mn-mut);
    font-size: var(--mn-fs-sm);
    transition: color .18s ease, transform .18s ease;
}

a.mn-liste-karti:hover .mn-liste-karti__ok {
    color: var(--mn-acc);
}

/* Servis seçimi: tek satırlık isim — sıkı satır */
.mn-liste--servis .mn-liste-karti {
    min-height: 3.5rem;
    padding: var(--mn-sp-3) var(--mn-sp-4);
}

.mn-liste--servis .mn-iconbox--sm {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--mn-r-sm);
    font-size: 1rem;
}

/* Açılır kartın içindeki başlık satırı: çerçeveyi dış kart taşır */
.mn-liste-karti--ic {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* --- Açılır kart (hasta kartı) --- */
.mn-acilir {
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .18s ease;
}

.mn-acilir[aria-expanded="true"] {
    border-color: var(--mn-acc);
}

.mn-acilir[aria-expanded="true"] .mn-liste-karti__ok {
    transform: rotate(180deg);
}

.mn-acilir__detay {
    padding: var(--mn-sp-4);
    border-top: 1px solid var(--mn-line);
    background: var(--mn-surf2);
    cursor: default;
}

.mn-acilir:not([aria-expanded="true"]) .mn-acilir__detay {
    display: none;
}

/* --- Apple tarzı anahtar (.mn-switch) ---
   <label class="mn-switch"><input type="checkbox" role="switch"><span class="mn-switch__ray"></span></label>
   iOS ölçüleri (51×31, 27px topuz), açıkken sistem yeşili. */
.mn-switch {
    position: relative;
    display: inline-flex;
    flex: none;
    width: 3.1875rem;
    height: 1.9375rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mn-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.mn-switch__ray {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #E9E9EB;
    transition: background-color .25s ease;
    pointer-events: none;
}

.mn-switch__ray::after {
    content: '';
    position: absolute;
    top: .125rem;
    left: .125rem;
    width: 1.6875rem;
    height: 1.6875rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1);
    transition: transform .25s cubic-bezier(.3, 1.3, .6, 1);
}

.mn-switch input:checked + .mn-switch__ray {
    background: #34C759;
}

.mn-switch input:checked + .mn-switch__ray::after {
    transform: translateX(1.25rem);
}

.mn-switch input:focus-visible + .mn-switch__ray {
    outline: 2px solid var(--mn-acc);
    outline-offset: 2px;
}

.mn-switch input:disabled + .mn-switch__ray {
    opacity: .5;
}

:root[data-theme="dark"] .mn-switch__ray {
    background: #39393D;
}

:root[data-theme="dark"] .mn-switch input:checked + .mn-switch__ray {
    background: #30D158;
}

@media (prefers-reduced-motion: reduce) {
    .mn-switch__ray,
    .mn-switch__ray::after { transition: none; }
}

/* --- Tek seferlik ipucu balonu (.mn-ipucu) ---
   Sarmalayıcı .mn-ipucu-kap (position: relative); balon varsayılan olarak
   altta açılır, --ust ile üstte (kırpan kapsayıcıların içinde). Bir kez
   gösterme mantığı sayfadaki JS'tedir (localStorage anahtarı). */
.mn-ipucu-kap {
    position: relative;
}

.mn-ipucu {
    position: absolute;
    top: calc(100% + .625rem);
    left: 0;
    z-index: 20;
    width: max-content;
    max-width: min(16rem, calc(100vw - 2rem));
    padding: .75rem .875rem;
    border-radius: var(--mn-r-md);
    background: var(--mn-acc);
    color: #fff;
    font-size: var(--mn-fs-sm);
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    box-shadow: var(--mn-shadow-raise);
    cursor: default;
    animation: mn-ipucu-gir .25s ease-out;
}

.mn-ipucu::before {
    content: '';
    position: absolute;
    top: -.375rem;
    left: 1.5rem;
    width: .75rem;
    height: .75rem;
    background: inherit;
    transform: rotate(45deg);
}

.mn-ipucu--ust {
    top: auto;
    bottom: calc(100% + .625rem);
}

.mn-ipucu--ust::before {
    top: auto;
    bottom: -.375rem;
}

.mn-ipucu__kapat {
    display: block;
    margin: .5rem 0 0 auto;
    padding: .25rem .75rem;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-weight: 600;
    font-size: var(--mn-fs-xs);
    cursor: pointer;
}

.mn-ipucu__kapat:hover {
    background: rgba(255, 255, 255, .15);
}

@keyframes mn-ipucu-gir {
    from { opacity: 0; transform: translateY(-.25rem); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mn-ipucu { animation: none; }
}

@media print {
    .mn-ipucu { display: none !important; }
}

/* Kart alt şeridi (eylem butonları) */
.mn-kart-alt {
    padding: var(--mn-sp-3) var(--mn-sp-4);
    border-top: 1px solid var(--mn-line);
    background: var(--mn-surf2);
}

/* --- Detay kutucukları --- */
.mn-detay-izgara {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mn-sp-3);
    margin-bottom: var(--mn-sp-4);
}

.mn-detay {
    min-width: 0;
    padding: var(--mn-sp-3);
    border: 1px solid var(--mn-line);
    border-radius: var(--mn-r-sm);
    background: var(--mn-surf2);
}

.mn-acilir__detay .mn-detay {
    background: var(--mn-surf);
}

.mn-detay .mn-label {
    margin-bottom: 0;
}

.mn-detay__deger {
    font-size: var(--mn-fs-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Form alanı --- */
.mn-form-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr));
    gap: var(--mn-sp-3);
}

.mn-alan {
    min-width: 0;
}

.mn-alan__kontrol {
    position: relative;
}

.mn-alan__ikon {
    position: absolute;
    left: .875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mn-mut);
    font-size: var(--mn-fs-md);
    pointer-events: none;
    transition: color .18s ease;
}

.mn-alan__kontrol--ikonlu .mn-input {
    padding-left: 2.5rem;
}

.mn-alan__kontrol:focus-within .mn-alan__ikon {
    color: var(--mn-acc);
}

/* Sayısal kimlik alanları gövde fontunda, rakamlar hizalı */
.mn-input--sayi {
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

/* --- Boş durum --- */
.mn-bos {
    text-align: center;
    padding: var(--mn-sp-6) var(--mn-sp-5);
}

.mn-bos .mn-iconbox {
    margin: 0 auto var(--mn-sp-4);
}

.mn-bos__baslik {
    font-family: var(--mn-font-display), sans-serif;
    font-size: var(--mn-fs-md);
    font-weight: 700;
    color: var(--mn-ink);
    margin-bottom: var(--mn-sp-1);
}

.mn-bos__metin {
    color: var(--mn-mut);
    font-size: var(--mn-fs-sm);
    margin: 0;
}

.mn-bos--kesikli {
    border-style: dashed;
}

/* --- Tablo yardımcıları --- */
.mn-table--genis {
    min-width: 51.25rem;
}

.mn-table-wrap__bas {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--mn-sp-2);
    padding: var(--mn-sp-3) var(--mn-sp-4);
    border-bottom: 1px solid var(--mn-line);
}

.mn-hucre-guclu {
    font-weight: 600;
}

.mn-hucre-alt {
    font-size: var(--mn-fs-2xs);
    color: var(--mn-mut);
}

.mn-hucre-kisalt {
    max-width: 15.625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mn-mut);
}

/* --- Görünüm değiştirici (kart / tablo) --- */
.mn-gorunum-btn {
    border: none;
    background: transparent;
    color: var(--mn-mut);
    width: 2.25rem;
    height: 2.25rem;
}

.mn-gorunum-btn.is-active {
    background: var(--mn-soft);
    color: var(--mn-acc);
}

/* --- Hızlı işlem paneli (launcher) --- */
.mn-hizli__satir {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mn-sp-3);
    margin-top: var(--mn-sp-3);
}

.mn-hizli__form {
    display: flex;
    gap: var(--mn-sp-2);
    flex: 1 1 20rem;
    max-width: 37.5rem;
}

.mn-hizli__form .mn-alan {
    flex: 1;
}

.mn-hizli__eylemler {
    display: flex;
    gap: var(--mn-sp-2);
    margin-left: auto;
}

/* --- Modal yardımcıları --- */
.mn-modal-kirp {
    overflow: hidden;
}

.mn-modal-frame {
    background: var(--mn-surf2);
}

.mn-modal-frame > iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.mn-modal-liste {
    max-height: 25rem;
    overflow-y: auto;
}

.mn-ikon-acc {
    color: var(--mn-acc);
}

.mn-spinner {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--mn-acc);
}

/* ===== 6. Eski sınıf sözlüğü -> mednexus =================================
   Template'lerde yaygın kullanılan sınıflar burada mednexus spesifikasyonuna
   çekiliyor; böylece 23 template'in çoğu HTML'e dokunmadan dönüşüyor. */

/* --- .modern-card / .glass-card -> MnCard --- */
.modern-card,
.glass-card {
    background: var(--mn-surf);
    border: 1px solid var(--mn-line);
    border-radius: 1rem;
    box-shadow: var(--mn-shadow);
    padding: 1.125rem;
    margin-bottom: .75rem;
    color: var(--mn-ink);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position: relative;
    overflow: hidden;
}

.modern-card:hover {
    transform: translateY(-.1875rem);
    box-shadow: 0 1.125rem 2.25rem -1.125rem rgba(8, 14, 26, .35);
    border-color: var(--mn-acc);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .875rem;
    border: none;
    background: transparent;
    padding: 0;
}

/* Handoff §7d — kart başlığı Space Grotesk 15px/700 */
.card-title {
    font-family: var(--mn-font-display), sans-serif;
    font-size: var(--mn-fs-md);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--mn-ink);
    margin: 0;
}

/* --- .module-card -> launcher/modül kartı (handoff §2/§4) --- */
.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.module-grid.grid-2-col {
    grid-template-columns: repeat(2, 1fr);
}

.module-card {
    background: var(--mn-surf);
    border: 1px solid var(--mn-line);
    border-radius: var(--mn-r-md);
    padding: 1.125rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .875rem;
    text-decoration: none;
    color: var(--mn-ink);
    box-shadow: var(--mn-shadow);
    height: 100%;
    min-height: 5rem;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.module-card:hover {
    transform: translateY(-.1875rem);
    box-shadow: 0 1.125rem 2.25rem -1.125rem rgba(8, 14, 26, .35);
    border-color: var(--mn-acc);
}

.module-card.active,
.login-option.active {
    border-color: var(--mn-acc);
    background: var(--mn-soft);
    color: var(--mn-acc);
    font-weight: 700;
    box-shadow: none;
}

/* İkon kutusu — SoftIconBox md/sm. Handoff'ta tüm ikon kutuları accent'tir;
   eski .gradient-* renk çeşitliliği bilinçli olarak tek accent'e indirildi. */
.module-card .icon-box,
.icon-box {
    width: 3rem;
    height: 3rem;
    border-radius: .875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    flex-shrink: 0;
    background: var(--mn-soft);
    color: var(--mn-acc);
    transition: none;
}

.module-card:hover .icon-box {
    transform: none;
}

.icon-circle {
    width: 3rem;
    height: 3rem;
    border-radius: .875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    margin-bottom: .75rem;
    background: var(--mn-soft);
    color: var(--mn-acc);
    transition: none;
}

/* .gradient-* ve .icon-circle.<renk> -> tek accent dili.
   Sınıf adları template'lerde kaldığı için tanımları koruyup nötrleştiriyoruz. */
.gradient-blue,
.gradient-green,
.gradient-purple,
.gradient-orange,
.gradient-red,
.gradient-slate,
.gradient-teal,
.icon-circle.blue,
.icon-circle.green,
.icon-circle.purple,
.icon-circle.orange {
    background: var(--mn-soft);
    color: var(--mn-acc);
}

/* Durum bildiren rozetler anlamlı rengini korur (handoff §Uyarı/hata). */
.gradient-red.is-status {
    background: color-mix(in srgb, var(--mn-danger) 12%, transparent);
    color: var(--mn-danger);
}

.gradient-green.is-status {
    background: color-mix(in srgb, var(--mn-ok) 12%, transparent);
    color: var(--mn-ok);
}

.gradient-orange.is-status {
    background: color-mix(in srgb, var(--mn-warn) 12%, transparent);
    color: var(--mn-warn);
}

.card-content {
    flex: 1;
    min-width: 0;
}

.card-content h3 {
    font-family: var(--mn-font-display), sans-serif;
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
    color: var(--mn-ink);
    white-space: normal;
    line-height: 1.35;
}

.card-content p {
    font-size: .78125rem;
    color: var(--mn-mut);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Chevron — handoff §2: kartın sağında, hover'a bağlı gizlenmez */
.action-arrow {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6.1875rem;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mn-mut);
    opacity: 1;
    transform: none;
    transition: color .18s ease;
    flex-shrink: 0;
    font-size: .8125rem;
}

.module-card:hover .action-arrow {
    opacity: 1;
    transform: none;
    background: transparent;
    color: var(--mn-acc);
}

/* --- .section-label -> eyebrow ayraçlı başlık (kanonik ad: .mn-bolum-etiketi) --- */
.mn-bolum-etiketi,
.section-label {
    font-size: .6875rem;
    font-weight: 700;
    color: var(--mn-acc);
    letter-spacing: .14em;
    text-transform: none;
    /* Türkçe kuralı */
    margin: 1.25rem 0 .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.mn-bolum-etiketi::after,
.section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--mn-line);
    opacity: .8;
}

/* --- Formlar --- */
.modern-input-group {
    position: relative;
    margin-bottom: 1rem;
}

.modern-input {
    width: 100%;
    height: 2.75rem;
    background: var(--mn-bg);
    border: 1px solid var(--mn-line);
    border-radius: .625rem;
    padding: 0 .75rem 0 2.75rem;
    font-size: .875rem;
    color: var(--mn-ink);
    outline: none;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.modern-input:focus {
    border-color: var(--mn-acc);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mn-acc) 18%, transparent);
}

.input-icon {
    position: absolute;
    left: .875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mn-mut);
    font-size: 1rem;
    transition: color .18s;
    pointer-events: none;
}

.modern-input:focus+.input-icon,
.modern-input-group:focus-within .input-icon {
    color: var(--mn-acc);
}

.form-label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--mn-mut);
    margin-bottom: .375rem;
    margin-left: 0;
}

/* --- Butonlar --- */
.btn-modern {
    height: 2.75rem;
    border-radius: .6875rem;
    font-weight: 600;
    font-size: .875rem;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    cursor: pointer;
    transition: all .18s ease;
    border: 1px solid var(--mn-line);
    background: var(--mn-surf);
    color: var(--mn-ink);
    width: 100%;
    position: relative;
    overflow: hidden;
}

.btn-modern.btn-primary,
.btn-modern.btn-primary:focus {
    border: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mn-acc) 86%, #fff), var(--mn-acc));
    box-shadow: 0 .5rem 1.125rem -.5rem var(--mn-acc);
    color: var(--mn-accink);
    font-weight: 700;
}

.btn-modern.btn-primary:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--mn-acc) 80%, #fff), var(--mn-acc));
    box-shadow: 0 .625rem 1.25rem -.5rem var(--mn-acc);
    color: var(--mn-accink);
}

.btn-modern:active {
    transform: scale(.985);
}

/* Eski parlama efekti kaldırıldı — handoff'ta yok */
.btn-modern::after {
    display: none;
}

/* --- .back-btn --- */
.back-btn,
.modal-back-btn {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--mn-surf);
    border: 1px solid var(--mn-line);
    border-radius: .6875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mn-mut);
    transition: all .18s;
    cursor: pointer;
    text-decoration: none;
    font-size: 1rem;
    opacity: 1;
    padding: 0;
}

.back-btn:hover,
.modal-back-btn:hover {
    background: var(--mn-soft);
    border-color: var(--mn-acc);
    color: var(--mn-acc);
}

/* --- .login-option / .login-options --- */
.login-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
}

.login-option {
    background: var(--mn-surf);
    border: 1px solid var(--mn-line);
    border-radius: .6875rem;
    padding: .875rem;
    text-align: center;
    cursor: pointer;
    transition: all .18s ease;
    position: relative;
    min-height: 2.75rem;
}

.login-option:hover {
    border-color: var(--mn-acc);
}

/* --- .quick-search-card --- */
.quick-search-card {
    background: linear-gradient(120deg, var(--mn-soft), transparent 65%), var(--mn-surf);
    border: 1px solid var(--mn-line);
    border-radius: 1.125rem;
    padding: 1.125rem;
    margin-top: 1.5rem;
    box-shadow: var(--mn-shadow);
}

/* --- .welcome-header / .dashboard-container --- */
.dashboard-container {
    max-width: 70rem;
    margin: 0 auto;
    padding-bottom: 1.5rem;
}

.welcome-header {
    margin-bottom: 1.25rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

/* --- .app-container: mednexus sayfa dolgusu (handoff §Ölçüler: 20px) --- */
.app-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 1.25rem;
    min-height: calc(100vh - 3.75rem);
}

@media (min-width: 768px) {
    .app-container {
        padding: 1.25rem;
        max-width: 70rem;
        background: transparent;
        box-shadow: none;
        margin: 0 auto;
        border-radius: 0;
        min-height: calc(100vh - 3.75rem);
    }
}

/* --- .stat-list-item --- */
.stat-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .625rem 0;
    border-bottom: 1px solid var(--mn-line);
}

.stat-list-item:last-child {
    border-bottom: none;
}

/* --- Mobil kart-tablo (modern-design.css'ten devralındı) --- */
@media (max-width: 767.98px) {

    /* Kart moduna geçen tablo yatay kaydırma genişliğini BIRAKMALI; aksi halde
       satır kartları ekrandan taşar. Template'lerdeki inline min-width'i ezer. */
    .mobile-table {
        min-width: 0 !important; /* !important: şablonlardaki inline style="min-width" ezilmeli */
        width: 100%;
    }

    .mobile-table thead {
        display: none;
    }

    .mobile-table tr {
        display: block;
        margin-bottom: .75rem;
        background: var(--mn-surf);
        border: 1px solid var(--mn-line);
        border-radius: .875rem;
        padding: .875rem;
        box-shadow: var(--mn-shadow);
    }

    /* tbody: .mn-table tbody td dolgusunu özgüllükle ezer (!important gerekmez) */
    .mobile-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .5rem 0;
        border-bottom: 1px solid var(--mn-line);
        text-align: right;
    }

    .mobile-table td:last-child {
        border-bottom: none;
    }

    .mobile-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--mn-mut);
        font-size: .75rem;
        letter-spacing: .04em;
        text-transform: none;
        /* Türkçe kuralı */
        margin-right: 1rem;
        text-align: left;
    }

    /* Mobilde iki kolonlu modül ızgarası (dr_bolum_sec) */
    .module-grid {
        grid-template-columns: 1fr;
    }

    .module-grid.mobile-2-col {
        grid-template-columns: repeat(2, 1fr) !important; /* !important: .grid-2-col ezilmeli */
        gap: .5rem;
    }

    .module-grid.mobile-2-col .module-card {
        padding: .875rem;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        min-height: auto;
    }

    .module-grid.mobile-2-col .module-card .icon-box {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.125rem;
        margin-bottom: .5rem;
    }

    .module-grid.mobile-2-col .module-card h3 {
        font-size: .8125rem;
        line-height: 1.3;
    }

    .module-grid.mobile-2-col .action-arrow {
        display: none;
    }
}

/* --- modern-design.css'ten taşınan projeye özgü düzeltmeler --- */

/* dr_hasta_listesi kart detay ızgarası: mobilde 1fr track'lerin taşmasını önler.
   Varsayılan min-width:auto, nowrap uzun değeri (yatıran doktor) track'i şişirip
   kartı/ekranı sağa taşırıyor; min-width:0 ile track küçülür, değer kırpılır. */
.detail-grid {
    min-width: 0;
}

.detail-grid>div {
    min-width: 0;
    overflow: hidden;
}


/* ===== 7. Bootstrap ezmeleri ==============================================
   Bootstrap'in kendi değişkenlerini token'lara bağlamak !important
   ihtiyacını en aza indiriyor. */

:root {
    --bs-body-font-family: var(--mn-font-body), system-ui, sans-serif;
    --bs-body-font-size: .875rem;
    --bs-body-line-height: 1.45;
    --bs-body-color: var(--mn-ink);
    --bs-body-bg: var(--mn-bg);
    --bs-emphasis-color: var(--mn-ink);
    --bs-secondary-color: var(--mn-mut);
    --bs-border-color: var(--mn-line);
    --bs-border-radius: .6875rem;
    --bs-border-radius-sm: .625rem;
    --bs-border-radius-lg: .875rem;
    --bs-border-radius-xl: 1rem;
    --bs-primary: var(--mn-acc);
    --bs-link-color: var(--mn-acc);
    --bs-link-hover-color: var(--mn-ink);
    --bs-heading-color: var(--mn-ink);
}

.text-muted {
    color: var(--mn-mut) !important;
}

.text-primary {
    color: var(--mn-acc) !important;
}

.text-danger {
    color: var(--mn-danger) !important;
}

.text-success {
    color: var(--mn-ok) !important;
}

.text-warning {
    color: var(--mn-warn) !important;
}

.bg-white,
.bg-body {
    background-color: var(--mn-surf) !important;
}

.bg-light {
    background-color: var(--mn-surf2) !important;
}

.border {
    border-color: var(--mn-line) !important;
}

/* Bootstrap .btn ailesi */
.btn {
    border-radius: .6875rem;
    font-weight: 600;
    font-size: .875rem;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: all .18s ease;
}

.btn-sm {
    min-height: 2.25rem;
    border-radius: .625rem;
    font-size: .8125rem;
    padding: .25rem .75rem;
}

/* .btn-primary yalnızca Bootstrap bağlamında (btn-modern kendi kuralına sahip) */
.btn.btn-primary {
    border: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mn-acc) 86%, #fff), var(--mn-acc));
    box-shadow: 0 .5rem 1.125rem -.5rem var(--mn-acc);
    color: var(--mn-accink);
    font-weight: 700;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--mn-acc) 80%, #fff), var(--mn-acc));
    color: var(--mn-accink);
    border: none;
}

.btn.btn-outline-primary {
    border-color: var(--mn-line);
    color: var(--mn-acc);
    background: transparent;
}

.btn.btn-outline-primary:hover {
    border-color: var(--mn-acc);
    background: var(--mn-soft);
    color: var(--mn-acc);
}

.btn.btn-secondary,
.btn.btn-light {
    background: var(--mn-surf);
    border-color: var(--mn-line);
    color: var(--mn-ink);
}

.btn.btn-secondary:hover,
.btn.btn-light:hover {
    background: var(--mn-surf2);
    border-color: var(--mn-acc);
    color: var(--mn-acc);
}

.btn.btn-danger {
    background: var(--mn-danger);
    border-color: var(--mn-danger);
    color: #fff;
}

.btn.btn-outline-danger {
    border-color: color-mix(in srgb, var(--mn-danger) 35%, transparent);
    color: var(--mn-danger);
    background: transparent;
}

.btn.btn-outline-danger:hover {
    background: color-mix(in srgb, var(--mn-danger) 10%, transparent);
    border-color: var(--mn-danger);
    color: var(--mn-danger);
}

.btn.btn-success {
    background: var(--mn-ok);
    border-color: var(--mn-ok);
    color: #fff;
}

/* Bootstrap form kontrolleri */
.form-control,
.form-select {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    background-color: var(--mn-bg);
    border: 1px solid var(--mn-line);
    border-radius: .625rem;
    padding: .5rem .75rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--mn-ink);
    transition: border-color .18s ease, box-shadow .18s ease;
}

textarea.form-control {
    min-height: 5rem;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--mn-bg);
    border-color: var(--mn-acc);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mn-acc) 18%, transparent);
    color: var(--mn-ink);
    outline: 0;
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23657080' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 14px 11px;
    padding-right: 2.25rem;
}

.form-check-input:checked {
    background-color: var(--mn-acc);
    border-color: var(--mn-acc);
}

.form-check-input:focus {
    border-color: var(--mn-acc);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mn-acc) 18%, transparent);
}

.input-group-text {
    background: var(--mn-surf2);
    border-color: var(--mn-line);
    color: var(--mn-mut);
    border-radius: .625rem;
}

/* Bootstrap kart & tablo */
.card {
    background: var(--mn-surf);
    border: 1px solid var(--mn-line);
    border-radius: 1rem;
    box-shadow: var(--mn-shadow);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--mn-ink);
    --bs-table-border-color: var(--mn-line);
    --bs-table-hover-bg: var(--mn-soft);
    --bs-table-hover-color: var(--mn-ink);
    --bs-table-striped-bg: var(--mn-surf2);
    --bs-table-striped-color: var(--mn-ink);
    font-size: .8125rem;
    color: var(--mn-ink);
}

.table>thead {
    background: var(--mn-surf2);
}

.table>thead th {
    color: var(--mn-mut);
    font-size: .75rem;
    font-weight: 700;
    border-bottom-color: var(--mn-line);
    text-transform: none;
    /* Türkçe kuralı */
}

.table>tbody td,
.table>tbody th {
    border-color: var(--mn-line);
    vertical-align: middle;
}

/* Bootstrap rozet */
.badge {
    border-radius: 6.1875rem;
    font-size: .6875rem;
    font-weight: 600;
    padding: .1875rem .5625rem;
    letter-spacing: 0;
}

.badge.bg-primary {
    background: var(--mn-soft) !important;
    color: var(--mn-acc) !important;
}

.badge.bg-secondary {
    background: var(--mn-surf2) !important;
    color: var(--mn-mut) !important;
}

.badge.bg-success {
    background: color-mix(in srgb, var(--mn-ok) 14%, transparent) !important;
    color: var(--mn-ok) !important;
}

.badge.bg-danger {
    background: color-mix(in srgb, var(--mn-danger) 14%, transparent) !important;
    color: var(--mn-danger) !important;
}

.badge.bg-warning {
    background: color-mix(in srgb, var(--mn-warn) 14%, transparent) !important;
    color: var(--mn-warn) !important;
}

.badge.bg-info {
    background: color-mix(in srgb, var(--mn-info) 14%, transparent) !important;
    color: var(--mn-info) !important;
}

/* Bootstrap uyarı kutuları */
.alert {
    border: 1px solid var(--mn-line);
    border-radius: .875rem;
    box-shadow: var(--mn-shadow);
    background: var(--mn-surf);
    color: var(--mn-ink);
    font-size: .84375rem;
    padding: .875rem 1rem;
}

.alert-success {
    border-color: color-mix(in srgb, var(--mn-ok) 35%, transparent);
    background: color-mix(in srgb, var(--mn-ok) 10%, var(--mn-surf));
    color: var(--mn-ink);
}

.alert-danger {
    border-color: color-mix(in srgb, var(--mn-danger) 35%, transparent);
    background: color-mix(in srgb, var(--mn-danger) 10%, var(--mn-surf));
    color: var(--mn-ink);
}

.alert-warning {
    border-color: color-mix(in srgb, var(--mn-warn) 35%, transparent);
    background: color-mix(in srgb, var(--mn-warn) 10%, var(--mn-surf));
    color: var(--mn-ink);
}

.alert-info {
    border-color: color-mix(in srgb, var(--mn-info) 35%, transparent);
    background: color-mix(in srgb, var(--mn-info) 10%, var(--mn-surf));
    color: var(--mn-ink);
}

/* Bootstrap modal — handoff §5 diyalog */
.modal-content {
    background: var(--mn-surf);
    color: var(--mn-ink);
    border: 1px solid var(--mn-line);
    border-radius: 1rem;
    box-shadow: 0 1.5rem 3rem -1rem rgba(8, 12, 18, .45);
}

.modal-header,
.modal-footer {
    border-color: var(--mn-line);
    background: transparent;
}

.modal-title {
    font-family: var(--mn-font-display), sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
    font-size: 1.0625rem;
    color: var(--mn-ink);
}

.modal-backdrop.show {
    background: rgba(8, 12, 18, .55);
    opacity: 1;
}

.btn-close {
    filter: none;
}

:root[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}

/* Bootstrap açılır menü */
.dropdown-menu {
    background: var(--mn-surf);
    border: 1px solid var(--mn-line);
    border-radius: .875rem;
    box-shadow: 0 1.125rem 2.25rem -1.125rem rgba(8, 14, 26, .35);
    padding: .375rem;
}

.dropdown-item {
    border-radius: .5rem;
    color: var(--mn-ink);
    font-size: .84375rem;
    padding: .5rem .625rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--mn-soft);
    color: var(--mn-acc);
}

/* Bootstrap sekmeler */
.nav-tabs {
    border-bottom-color: var(--mn-line);
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--mn-mut);
    font-weight: 600;
    font-size: .84375rem;
}

.nav-tabs .nav-link.active {
    background: transparent;
    color: var(--mn-acc);
    border-bottom-color: var(--mn-acc);
}

.list-group-item {
    background: var(--mn-surf);
    border-color: var(--mn-line);
    color: var(--mn-ink);
}

hr {
    border-color: var(--mn-line);
    opacity: 1;
}

/* ===== 8. Kabuk =========================================================== */

/* --- Üst bar (handoff §3): 60px, yapışkan, cam --- */
.mn-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: 3.75rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--mn-line);
    background: color-mix(in srgb, var(--mn-surf) 80%, transparent);
    -webkit-backdrop-filter: blur(.875rem);
    backdrop-filter: blur(.875rem);
}

.mn-topbar__brand {
    display: flex;
    align-items: center;
    gap: .625rem;
    text-decoration: none;
    color: var(--mn-ink);
    flex: none;
}

.mn-topbar__logo {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .625rem;
    object-fit: contain;
    background: var(--mn-soft);
    padding: .1875rem;
}

.mn-topbar__name {
    font-family: var(--mn-font-display), sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--mn-ink);
    white-space: nowrap;
}

.mn-topbar__sep {
    width: 1px;
    height: 1.5rem;
    background: var(--mn-line);
    flex: none;
}

.mn-topbar__crumb {
    color: var(--mn-mut);
    font-size: .8125rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: auto;
}

.mn-topbar__crumb a {
    color: var(--mn-mut);
}

.mn-topbar__crumb a:hover {
    color: var(--mn-acc);
}

.mn-topbar__date {
    font-family: var(--mn-font-mono), monospace;
    font-size: .75rem;
    color: var(--mn-mut);
    flex: none;
}

.mn-topbar__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: none;
}

/* Üst bar ikon butonu — dokunma hedefi 44px (handoff: tablet birincil) */
.mn-iconbtn {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .6875rem;
    border: 1px solid var(--mn-line);
    background: var(--mn-surf);
    color: var(--mn-mut);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: all .18s ease;
    font-size: .875rem;
    flex: none;
    padding: 0;
}

.mn-iconbtn:hover {
    border-color: var(--mn-acc);
    color: var(--mn-acc);
    background: var(--mn-soft);
}

.mn-iconbtn--danger {
    color: var(--mn-danger);
    border-color: color-mix(in srgb, var(--mn-danger) 30%, transparent);
}

.mn-iconbtn--danger:hover {
    color: var(--mn-danger);
    border-color: var(--mn-danger);
    background: color-mix(in srgb, var(--mn-danger) 10%, transparent);
}

/* Kullanıcı çipi — baş harf avatarı + ad */
.mn-userchip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 2.75rem;
    padding: 0 .75rem 0 .375rem;
    border-radius: 6.1875rem;
    border: 1px solid var(--mn-line);
    background: var(--mn-surf);
    color: var(--mn-ink);
    font-size: .8125rem;
    font-weight: 600;
    max-width: 12rem;
    text-decoration: none;
}

.mn-userchip__avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 6.1875rem;
    background: var(--mn-soft);
    color: var(--mn-acc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    flex: none;
}

.mn-userchip__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Accent seçici — üç renk noktası */
.mn-accents {
    display: flex;
    align-items: center;
    gap: .25rem;
    height: 2.75rem;
    padding: 0 .375rem;
    border-radius: .6875rem;
    border: 1px solid var(--mn-line);
    background: var(--mn-surf);
}

.mn-accents__dot {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 6.1875rem;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform .18s ease, border-color .18s ease;
}

.mn-accents__dot:hover {
    transform: scale(1.15);
}

.mn-accents__dot[aria-pressed="true"] {
    border-color: var(--mn-ink);
}

.mn-accents__dot[data-set="blue"] {
    background: #2F4FE0;
}

.mn-accents__dot[data-set="green"] {
    background: #0F7A6C;
}

.mn-accents__dot[data-set="gray"] {
    background: #37424E;
}

:root[data-theme="dark"] .mn-accents__dot[data-set="blue"] {
    background: #93A5FF;
}

:root[data-theme="dark"] .mn-accents__dot[data-set="green"] {
    background: #4CC9B6;
}

:root[data-theme="dark"] .mn-accents__dot[data-set="gray"] {
    background: #A7B7C7;
}


/* --- Alt nav (mobil) — mednexus token'larıyla yeniden çizildi --- */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    min-height: 3.5rem;
    z-index: 1040;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    padding: .5rem 1rem;
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom, .5rem));
    margin: 0;
    border-top: 1px solid var(--mn-line);
    border-radius: 1rem 1rem 0 0;
    background: color-mix(in srgb, var(--mn-surf) 88%, transparent);
    -webkit-backdrop-filter: blur(.875rem);
    backdrop-filter: blur(.875rem);
    box-shadow: 0 -.25rem 1.5rem rgba(8, 14, 26, .08);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.mobile-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--mn-mut);
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .6875rem;
    transition: all .18s ease;
    position: relative;
}

.mobile-nav-item i {
    font-size: 1.125rem;
    transition: none;
}

.mobile-nav-item.active {
    color: var(--mn-acc);
    background: var(--mn-soft);
}

.mobile-nav-item.active i {
    transform: none;
}

/* Ortadaki öne çıkan arama butonu */
.nav-item-search {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 6.1875rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mn-acc) 86%, #fff), var(--mn-acc));
    box-shadow: 0 .5rem 1.125rem -.5rem var(--mn-acc);
}

/* a:hover rengini/altı çizgisini özgüllükle ez (!important yerine) */
a.mobile-nav-item,
a.mobile-nav-item:hover {
    text-decoration: none;
}

.mobile-nav-item.nav-item-search,
.mobile-nav-item.nav-item-search:hover {
    color: var(--mn-accink);
}

.nav-item-search i {
    color: var(--mn-accink);
}

.nav-item-search:active {
    transform: scale(.94);
}

body.modal-open .mobile-bottom-nav {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}


/* --- Görünüm ayarları menüsü (masaüstü dropdown + mobil hesap paneli) --- */
.mn-theme-menu {
    min-width: 13.75rem;
    border-radius: 1rem;
    margin-top: .625rem;
    border: none;
    background-color: var(--mn-surf);
}

.mn-theme-menu .mn-accents {
    padding: 0;
}

.mn-theme-menu .mn-accents__dot {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}

.theme-toggle-container {
    background-color: var(--mn-bg);
    gap: .25rem;
}

.theme-toggle-btn {
    border-radius: 8px;
    font-weight: 600;
    border: none;
    background-color: transparent;
    color: var(--mn-mut);
    transition: all 0.2s;
}

.theme-toggle-btn:hover {
    color: var(--mn-ink);
    background-color: rgba(128, 128, 128, 0.05);
}

.theme-toggle-btn.active {
    background-color: var(--mn-surf);
    color: var(--mn-acc);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Koyu mod kontrastı. !important: Bootstrap .dropdown-menu zemin/çerçevesini ezer */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--mn-surf) !important;
    border: 1px solid var(--mn-line) !important;
}

[data-theme="dark"] .theme-toggle-container {
    background-color: rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .theme-toggle-btn {
    color: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .theme-toggle-btn:hover {
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .theme-toggle-btn.active {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* --- Mobil hesap paneli (Bootstrap offcanvas-bottom) --- */
/* Sürüm uyumu: sayfa Bootstrap CSS 5.1.3 + JS 5.3.2 yüklüyor. 5.3 JS
   offcanvas'ı görünür yapmak için inline stil vermez, 5.3 CSS'teki
   .showing/.hiding durum sınıflarına güvenir; 5.1.3 CSS'te bu kurallar yok →
   panel "show" sınıfını alır ama visibility:hidden kalır. */
.offcanvas.showing,
.offcanvas.hiding,
.offcanvas.show {
    visibility: visible;
}

.offcanvas.showing,
.offcanvas.show:not(.hiding) {
    transform: none;
}

/* 5.3 JS kapanırken .show'u .hiding ile birlikte tutar; 5.1 CSS'teki
   .offcanvas.show{transform:none} eşleşmeye devam eder ve panel kaymadan
   kaybolur. Aynı özgüllük + sonra tanımlı → kapanış kayması geri gelir. */
.offcanvas-bottom.hiding {
    transform: translateY(100%);
}

.mn-topbar__account {
    display: none;
    width: var(--mn-tap);
    height: var(--mn-tap);
    border-radius: 6.1875rem;
    border: 1px solid var(--mn-line);
    background: var(--mn-surf);
    padding: 0;
    align-items: center;
    justify-content: center;
    flex: none;
}

.mn-topbar__account .mn-userchip__avatar {
    width: 2.25rem;
    height: 2.25rem;
}

.mn-sheet.offcanvas-bottom {
    height: auto;
    max-height: 85vh;
    max-height: 85dvh;
    border: 0;
    border-top: 1px solid var(--mn-line);
    border-radius: 1.25rem 1.25rem 0 0;
    background: var(--mn-surf);
    color: var(--mn-ink);
    padding-bottom: var(--mn-safe-b);
    padding-left: var(--mn-safe-l);
    padding-right: var(--mn-safe-r);
}

.mn-sheet__grab {
    width: 2.5rem;
    height: .25rem;
    border-radius: 6.1875rem;
    background: var(--mn-line);
    margin: .5rem auto 0;
    flex: none;
}

.mn-sheet .offcanvas-header {
    padding: .75rem 1.25rem;
    gap: .75rem;
}

.mn-sheet__user {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.mn-sheet__user .mn-userchip__avatar {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1rem;
}

.mn-sheet .offcanvas-title {
    font-size: 1rem;
    margin: 0;
    overflow-wrap: anywhere;
}

.mn-sheet .offcanvas-body {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    padding: .25rem 1.25rem 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mn-sheet__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.mn-sheet__row .mn-label {
    margin: 0;
}

.mn-sheet__seg {
    display: flex;
    padding: .25rem;
    border-radius: .75rem;
    flex: 0 1 14rem;
}

.mn-sheet__seg .theme-toggle-btn {
    flex: 1;
    min-height: var(--mn-tap);
}

.mn-sheet .mn-accents {
    height: auto;
    border: 0;
    background: none;
    gap: .5rem;
    padding: 0;
}

.mn-sheet .mn-accents__dot {
    width: var(--mn-tap);
    height: var(--mn-tap);
}

.mn-sheet__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    min-height: 3rem;
    padding: 0 1rem;
    border: 1px solid var(--mn-line);
    border-radius: .75rem;
    background: var(--mn-surf);
    color: var(--mn-ink);
    font-weight: 600;
    text-align: left;
}

.mn-sheet__item i {
    width: 1.25rem;
    color: var(--mn-acc);
}

.mn-sheet__item--danger,
.mn-sheet__item--danger i {
    color: var(--mn-danger);
}

button.mobile-nav-item {
    border: 0;
    background: none;
    padding: 0;
}

/* --- Yan sekme: Öneri & Görüş --- */
.feedback-tab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1035;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mn-acc) 86%, #fff), var(--mn-acc));
    color: var(--mn-accink);
    width: 1.625rem;
    border-radius: .6875rem 0 0 .6875rem;
    cursor: pointer;
    box-shadow: -.1875rem 0 .875rem -.25rem var(--mn-acc);
    border: none;
    overflow: hidden;
    transition: width .4s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease;
    padding: .75rem 0;
    gap: 0;
}

.feedback-tab.expanded,
.feedback-tab:hover {
    width: 6.875rem;
    padding: .875rem .5rem;
    gap: .375rem;
    box-shadow: -.3125rem 0 1.25rem -.25rem var(--mn-acc);
}

.feedback-tab .tab-icon,
.feedback-tab .tab-arrow {
    writing-mode: horizontal-tb;
    flex-shrink: 0;
}

.feedback-tab .tab-icon {
    font-size: .875rem;
}

.feedback-tab .tab-arrow {
    font-size: .6875rem;
    opacity: .8;
}

.feedback-tab .tab-label {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .3s ease, opacity .3s ease;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.feedback-tab.expanded .tab-label,
.feedback-tab:hover .tab-label {
    max-height: 5rem;
    opacity: 1;
}

/* ===== 9. Erişilebilirlik ================================================= */

:focus-visible {
    outline: 2px solid var(--mn-acc);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    .mn-fadeup,
    .mn-fadein {
        animation: none;
    }

    .mn-card-hover,
    .modern-card,
    .module-card,
    .mn-btn,
    .btn,
    .mn-chip {
        transition: none;
    }

    .mn-card-hover:hover,
    .modern-card:hover,
    .module-card:hover {
        transform: none;
    }

    .mobile-bottom-nav,
    .feedback-tab {
        transition: none;
    }
}

/* ===== 10. Mobil & dokunmatik =============================================
   Kırılma noktaları ölçümle belirlendi: 360 küçük telefon · 480 · 768 tablet ·
   1024 masaüstü (max sorgularda .02 eksiği). Kural:
   - dokunma büyütmeleri yalnızca (pointer: coarse) — fareli masaüstü değişmez,
   - yerleşim değişiklikleri yalnızca max-width sorgularında. */

:root {
    --mn-tap: 2.75rem;
    --mn-safe-t: env(safe-area-inset-top, 0px);
    --mn-safe-r: env(safe-area-inset-right, 0px);
    --mn-safe-b: env(safe-area-inset-bottom, 0px);
    --mn-safe-l: env(safe-area-inset-left, 0px);
    --mn-gutter: clamp(.75rem, 4vw, 1.25rem);
}

/* --- Taşma koruması --- */
body {
    overflow-wrap: break-word; /* yalnızca taşacak kelimeyi kırar; min-content'i değiştirmez */
}

img,
video {
    max-width: 100%;
}

[hidden] {
    display: none !important; /* Bootstrap'siz sayfalarda da; .mobile-table tr display:block'u ezmeli */
}

/* --- Dokunma davranışı --- */
a,
button,
[role="button"],
input,
select,
textarea,
label,
summary,
[onclick] {
    touch-action: manipulation; /* çift dokunma yakınlaştırması ve 300ms gecikme yok */
}

/* Masaüstü ikon butonunun küçük varyantı (tablo satırları) */
.mn-iconbtn--sm {
    width: 2.25rem;
    height: 2.25rem;
}

/* Kompakt metin butonu (tablo satırları) */
.mn-btn--sm {
    height: 2.25rem;
}

@media (pointer: coarse) {

    a,
    button,
    [role="button"],
    [onclick] {
        -webkit-tap-highlight-color: color-mix(in srgb, var(--mn-acc) 16%, transparent);
    }

    .mn-iconbtn,
    .mn-iconbtn--sm,
    .back-btn,
    .modal-back-btn,
    .mn-topbar__brand,
    .theme-toggle-btn,
    .lg-field__toggle,
    .lg-qr-link,
    .mobile-nav-item {
        min-width: var(--mn-tap);
        min-height: var(--mn-tap);
    }

    .mn-iconbtn--sm {
        width: var(--mn-tap);
        height: var(--mn-tap);
    }

    .mn-btn--sm {
        height: var(--mn-tap);
    }

    /* Tablet/dokunmatik masaüstünde yan sekme görünür kalır; dokunma genişliği */
    .feedback-tab {
        width: var(--mn-tap);
    }

    .btn-close {
        box-sizing: border-box;
        min-width: var(--mn-tap);
        min-height: var(--mn-tap);
    }

    .mn-accents__dot,
    .mn-theme-menu .mn-accents__dot {
        width: var(--mn-tap);
        height: var(--mn-tap);
    }

    /* 44px çocuklar 2.75rem sabit yükseklikli kaptan taşmasın */
    .mn-accents {
        height: auto;
        min-height: var(--mn-tap);
    }

    /* Anahtar (switch) yatay oranını korusun */
    .form-switch .form-check-input {
        width: 2.5rem;
        height: 1.375rem;
    }

    .form-check {
        display: flex;
        align-items: center;
        gap: .5rem;
        min-height: var(--mn-tap);
    }

    .form-check-input {
        width: 1.375rem;
        height: 1.375rem;
        margin-top: 0;
    }

    /* Dokunmatikte hover "yapışmasın" */
    .mn-card-hover:hover,
    .modern-card:hover,
    .module-card:hover,
    .mn-accents__dot:hover {
        transform: none;
    }
}

/* --- iOS odak yakınlaştırmasını önle: mobilde ve dokunmatikte ≥16px --- */
@media (max-width: 767.98px),
(pointer: coarse) {
    :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
        font-size: max(1rem, 16px);
    }
}

/* --- Safe-area + sayfa dolgusu --- */
.mn-topbar {
    padding-left: max(1.25rem, var(--mn-safe-l));
    padding-right: max(1.25rem, var(--mn-safe-r));
    padding-top: var(--mn-safe-t);
    height: calc(3.75rem + var(--mn-safe-t));
}

.app-container {
    padding-left: max(1.25rem, var(--mn-safe-l));
    padding-right: max(1.25rem, var(--mn-safe-r));
}

/* --- Kabuk ve sayfa dolgusu: tablet ve altı (≤767.98px) --- */
@media (max-width: 767.98px) {
    .app-container {
        padding: var(--mn-gutter);
        padding-left: max(var(--mn-gutter), var(--mn-safe-l));
        padding-right: max(var(--mn-gutter), var(--mn-safe-r));
    }

    .mn-topbar {
        padding-left: max(.875rem, var(--mn-safe-l));
        padding-right: max(.875rem, var(--mn-safe-r));
        gap: .5rem;
        height: calc(3.5rem + var(--mn-safe-t));
    }

    .mn-topbar__date,
    .mn-topbar__sep {
        display: none;
    }

    /* İçerikteki kart/tablo görünüm düğmeleri: sayfalar bu genişlikte kart
       görünümünü zaten zorluyor (isi_list, hasta_ara) — düğmeler işlevsiz */
    .app-container .mn-accents {
        display: none;
    }

    /* Klavye açıkken alt nav, Android'de (interactive-widget=resizes-content)
       klavyenin üstüne biner; metin alanı odaktayken gizlenir */
    body:has(:is(input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]), textarea, select):focus) .mobile-bottom-nav {
        display: none;
    }

    /* Oturum açıkken palet/kullanıcı/çıkış hesap paneline taşınır */
    .mn-topbar__actions--hesapli {
        display: none;
    }

    .mn-topbar__account {
        display: inline-flex;
    }

    .mobile-bottom-nav {
        display: flex;
    }

    body {
        padding-bottom: calc(5.5rem + var(--mn-safe-b));
    }

    /* Öneri & Görüş hesap panelinde; yan sekme içeriği örtmesin */
    .feedback-tab {
        display: none;
    }
}

@media (max-width: 479.98px) {

    /* Sayfa adına yer aç: logo marka kimliğini taşır */
    .mn-topbar__name {
        display: none;
    }
}

/* --- Modallar --- */
.mn-modal-frame {
    height: 80vh;
}

/* Tam ekran modda gövde kalan alanı doldurur (Bootstrap .modal-content flex sütunu) */
.modal-fullscreen .mn-modal-frame {
    height: auto;
    flex: 1 1 auto;
}

@media (max-width: 991.98px) {
    .modal-fullscreen-lg-down .mn-modal-frame {
        height: auto;
        flex: 1 1 auto;
    }

    .modal-fullscreen-lg-down .modal-header {
        padding-top: max(1rem, var(--mn-safe-t));
    }
}

.modal-fullscreen .modal-header {
    padding-top: max(1rem, var(--mn-safe-t));
}

@media (max-width: 575.98px) {
    .modal-dialog:not(.modal-fullscreen):not(.modal-fullscreen-lg-down):not(.modal-fullscreen-md-down):not(.modal-fullscreen-sm-down) {
        margin: max(.5rem, var(--mn-safe-t)) max(.5rem, var(--mn-safe-r)) max(.5rem, var(--mn-safe-b)) max(.5rem, var(--mn-safe-l));
    }

    .modal-dialog-centered {
        min-height: calc(100% - 1rem);
    }

    .dropdown-menu {
        max-width: calc(100vw - 1rem);
    }
}

/* Dar VEYA alçak ekran (yatay telefon dahil): modal ekrana sığar, gövde kayar */
@media (max-width: 575.98px),
(max-height: 575.98px) {
    /* ≥576px'te Bootstrap 1.75rem dikey boşluk verir; alçak ekranda içerik
       yüksekliği hesabına uysun diye .5rem'e çekilir */
    .modal-dialog:not(.modal-fullscreen):not(.modal-fullscreen-lg-down) {
        margin-top: max(.5rem, var(--mn-safe-t));
        margin-bottom: max(.5rem, var(--mn-safe-b));
    }

    .modal-dialog-centered:not(.modal-fullscreen):not(.modal-fullscreen-lg-down) {
        min-height: calc(100% - 1rem);
    }

    .modal-dialog:not(.modal-fullscreen):not(.modal-fullscreen-lg-down) .modal-content {
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem - var(--mn-safe-t) - var(--mn-safe-b));
    }

    .modal-dialog:not(.modal-fullscreen):not(.modal-fullscreen-lg-down) .modal-body {
        overflow-y: auto;
        overscroll-behavior: contain;
        min-height: 0;
    }
}

/* --- Mobil: sayfa başlığı butonları başlıkla aynı satırda; filtre kartı 2x2 sıkı ızgara --- */
@media (max-width: 767.98px) {
    .mn-page-head {
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .mn-page-head > :not(.mn-page-head__main) {
        flex: none;
    }

    /* Kaydırmayı azalt: mobilde daha sıkı kart ve başlık boşlukları */
    .mn-card {
        padding: var(--mn-sp-4);
    }

    .mn-page-head {
        margin-bottom: var(--mn-sp-4);
    }

    /* Hasta arama: alanlar iki sütun, form tek ekrana sığar */
    .mn-form-izgara--mobil-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mn-sp-2);
    }

    .mn-form-izgara--mobil-2 .mn-label {
        margin-bottom: .125rem;
    }

    /* Tek kalan son alan (ör. Telefon) satırı doldurur */
    .mn-form-izgara--mobil-2 > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    /* Servis seçimi: daha sıkı satır (dokunma alanı 48px) */
    .mn-liste--servis .mn-liste-karti {
        min-height: 3rem;
        padding: var(--mn-sp-2) var(--mn-sp-3);
    }

    .mn-filtre {
        padding: .75rem;
    }

    .mn-filtre .mn-label {
        margin-bottom: .125rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mn-filtre .form-select {
        padding-left: .5rem;
        padding-right: 1.5rem;
        background-position: right .375rem center;
        text-overflow: ellipsis;
    }
}

/* --- Kademeli gösterim gözcü satırı --- */
.mn-kademeli td {
    text-align: center;
    padding: .75rem;
}

.mn-kademeli__btn {
    width: 100%;
    max-width: 20rem;
    min-height: var(--mn-tap);
    justify-content: center;
}

@media (max-width: 767.98px) {

    /* .mobile-table kart modunun satır kartı görünümünü gözcüde iptal et */
    .mobile-table tr.mn-kademeli {
        background: none;
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .mobile-table tr.mn-kademeli td {
        display: block;
        border: 0;
        text-align: center;
    }

    .mobile-table tr.mn-kademeli td::before {
        content: none;
    }
}

@media (max-width: 1023.98px) {
    .mn-table-scroll {
        background:
            linear-gradient(to right, var(--mn-surf) 30%, transparent) left / 2.5rem 100% no-repeat local,
            linear-gradient(to left, var(--mn-surf) 30%, transparent) right / 2.5rem 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgba(8, 14, 26, .14), transparent) left / .875rem 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(8, 14, 26, .14), transparent) right / .875rem 100% no-repeat scroll;
        -webkit-overflow-scrolling: touch;
    }
}