/* ═══════════════════════════════════════════════════════════════════════════
   DİYETÇİM — TASARIM SİSTEMİ
   ---------------------------------------------------------------------------
   1. Tokenlar (açık + koyu tema)
   2. Reset & temel katman
   3. Tipografi
   4. Yerleşim: kabuk, üst bar, kenar çubuğu, panel
   5. Bileşenler: buton, kart, form, tablo, rozet, sekme, uyarı, sayfalama
   6. Modüller: takvim, sohbet, öğün kurucu, panel şeritleri, uzman kartı, PWA
   7. Yardımcı sınıflar
   8. Hareket & erişilebilirlik
   9. Yazdırma
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1. TOKENLAR
   Marka rengi logodaki yaprak yeşili rampasından türetildi (#205020 → #a0d010).
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    /* Marka rampası — sarı-yeşil (logo hue'su) */
    --green-50:  #f3faec;
    --green-100: #e3f4d4;
    --green-200: #c6e8ab;
    --green-300: #9fd678;
    --green-400: #74bd4a;
    --green-500: #4fa32e;
    --green-600: #357f22;
    --green-700: #2a641f;
    --green-800: #234e1e;
    --green-900: #1c401d;
    --green-950: #0f2411;

    /* Lime vurgu — logodaki ok/parlama tonu */
    --lime-400: #a8d43a;
    --lime-500: #8fbf1a;
    --lime-600: #74991a;

    /* Nötr rampa — hafif yeşile çalan slate */
    --slate-50:  #f6f8f6;
    --slate-100: #eceff0;
    --slate-200: #dce3de;
    --slate-300: #c0cbc4;
    --slate-400: #94a39b;
    --slate-500: #6b7c73;
    --slate-600: #4e5d55;
    --slate-700: #384540;
    --slate-800: #232e29;
    --slate-900: #16201c;
    --slate-950: #0d1310;

    /* Sinyal renkleri */
    --amber-100: #fdf0d5;
    --amber-500: #e8a317;
    --amber-700: #9a6a08;
    --red-100:   #fde4e2;
    --red-500:   #d64545;
    --red-700:   #9c2b2b;
    --blue-100:  #e2edfd;
    --blue-500:  #3b74d4;
    --blue-700:  #27508f;

    /* ── Anlamsal katman (açık tema) ───────────────────────────────── */
    --bg:            var(--slate-50);
    --bg-alt:        #edf2ec;
    --surface:       #ffffff;
    --surface-2:     #f7faf6;
    --surface-3:     #eef3ed;
    --surface-inset: #f1f5f1;
    --line:          var(--slate-200);
    --line-strong:   var(--slate-300);

    --ink:        var(--slate-900);
    --ink-strong: var(--slate-950);
    --ink-muted:  var(--slate-500);
    --ink-subtle: var(--slate-400);
    --ink-invert: #ffffff;

    --primary:        var(--green-600);
    --primary-hover:  var(--green-700);
    --primary-active: var(--green-800);
    --primary-strong: var(--green-800);
    --primary-soft:   var(--green-100);
    --primary-softer: var(--green-50);
    --primary-ink:    var(--green-800);
    --on-primary:     #ffffff;

    --accent:      var(--lime-600);
    --accent-soft: #eef7d5;
    --accent-ink:  #4c6a08;

    --ok:       #2f8a3f;
    --ok-soft:  #e2f3e3;
    --ok-ink:   #1f6b2d;
    --warning:      var(--amber-500);
    --warning-soft: var(--amber-100);
    --warning-ink:  var(--amber-700);
    --danger:       var(--red-500);
    --danger-soft:  var(--red-100);
    --danger-ink:   var(--red-700);
    --info:         var(--blue-500);
    --info-soft:    var(--blue-100);
    --info-ink:     var(--blue-700);

    /* Yükseklik — koyu temada yeniden tanımlanır */
    --shadow-xs: 0 1px 2px rgba(22, 32, 28, 0.05);
    --shadow-sm: 0 1px 2px rgba(22, 32, 28, 0.05), 0 2px 6px rgba(22, 32, 28, 0.04);
    --shadow-md: 0 2px 4px rgba(22, 32, 28, 0.04), 0 8px 20px rgba(22, 32, 28, 0.07);
    --shadow-lg: 0 4px 8px rgba(22, 32, 28, 0.05), 0 18px 44px rgba(22, 32, 28, 0.10);
    --shadow-xl: 0 8px 16px rgba(22, 32, 28, 0.06), 0 32px 70px rgba(22, 32, 28, 0.14);
    --ring: 0 0 0 3px color-mix(in srgb, var(--primary) 26%, transparent);

    /* Geriye dönük uyumluluk: şablonlarda hâlâ kullanılan eski token adları */
    --surface-muted: var(--surface-2);
    --border: var(--line);
    --bg-main: var(--bg);
    --bg-soft: var(--bg-alt);
    --shadow-soft: var(--shadow-lg);
    --shadow-card: var(--shadow-sm);

    /* Köşe yarıçapı */
    --r-xs: 6px;
    --r-sm: 9px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-2xl: 28px;
    --r-pill: 999px;
    /* Geriye dönük adlar */
    --radius-sm: var(--r-sm);
    --radius-md: var(--r-md);
    --radius-lg: var(--r-lg);
    --radius-xl: var(--r-xl);

    /* Tipografi */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    --text-xs:   0.72rem;
    --text-sm:   0.8rem;
    --text-base: 0.9rem;
    --text-md:   1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.35rem;
    --text-2xl:  clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
    --text-3xl:  clamp(1.7rem, 1.25rem + 2vw, 2.4rem);
    --text-4xl:  clamp(2.1rem, 1.3rem + 3.4vw, 3.4rem);

    /* Aralık */
    --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: 4.5rem;

    /* Hareket */
    --ease: cubic-bezier(0.32, 0.72, 0, 1);
    --dur-fast: 0.14s;
    --dur: 0.22s;
    --dur-slow: 0.42s;

    /* Ölçüler */
    --sidebar-width: 252px;
    --topbar-h: 64px;

    /* Takvim tür renkleri (randevu türü seçicisi bunları kullanır) */
    --type-blue: #2563eb;
    --type-red: #dc2626;
    --type-purple: #9333ea;
    --type-orange: #ea580c;
    --type-teal: #0d9488;
    --type-yellow: #ca8a04;
    --type-pink: #e11d48;

    color-scheme: light;
}

/* ── Koyu tema ─────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
    --bg:            #0c110e;
    --bg-alt:        #101711;
    --surface:       #141c17;
    --surface-2:     #18211b;
    --surface-3:     #1e2822;
    --surface-inset: #111a14;
    --line:          #27332c;
    --line-strong:   #35443a;

    --ink:        #e6ede8;
    --ink-strong: #f4f8f5;
    --ink-muted:  #93a49a;
    --ink-subtle: #6f8177;
    --ink-invert: #0c110e;

    --primary:        var(--green-400);
    --primary-hover:  var(--green-300);
    --primary-active: var(--green-200);
    --primary-strong: var(--green-300);
    --primary-soft:   rgba(116, 189, 74, 0.16);
    --primary-softer: rgba(116, 189, 74, 0.09);
    --primary-ink:    var(--green-300);
    --on-primary:     #0c1a08;

    --accent:      var(--lime-400);
    --accent-soft: rgba(168, 212, 58, 0.16);
    --accent-ink:  var(--lime-400);

    --ok:       #57b86a;
    --ok-soft:  rgba(87, 184, 106, 0.16);
    --ok-ink:   #86d094;
    --warning:      #e8b243;
    --warning-soft: rgba(232, 178, 67, 0.16);
    --warning-ink:  #f0c877;
    --danger:       #e26b6b;
    --danger-soft:  rgba(226, 107, 107, 0.16);
    --danger-ink:   #f09a9a;
    --info:         #6f9fe8;
    --info-soft:    rgba(111, 159, 232, 0.16);
    --info-ink:     #a2c2f2;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 6px 14px rgba(0, 0, 0, 0.45), 0 22px 50px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 10px 22px rgba(0, 0, 0, 0.5), 0 36px 80px rgba(0, 0, 0, 0.6);

    color-scheme: dark;
}

/* Kullanıcı tercihini elle seçmediyse sistem tercihini uygula */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:            #0c110e;
        --bg-alt:        #101711;
        --surface:       #141c17;
        --surface-2:     #18211b;
        --surface-3:     #1e2822;
        --surface-inset: #111a14;
        --line:          #27332c;
        --line-strong:   #35443a;

        --ink:        #e6ede8;
        --ink-strong: #f4f8f5;
        --ink-muted:  #93a49a;
        --ink-subtle: #6f8177;
        --ink-invert: #0c110e;

        --primary:        var(--green-400);
        --primary-hover:  var(--green-300);
        --primary-active: var(--green-200);
        --primary-strong: var(--green-300);
        --primary-soft:   rgba(116, 189, 74, 0.16);
        --primary-softer: rgba(116, 189, 74, 0.09);
        --primary-ink:    var(--green-300);
        --on-primary:     #0c1a08;

        --accent:      var(--lime-400);
        --accent-soft: rgba(168, 212, 58, 0.16);
        --accent-ink:  var(--lime-400);

        --ok:       #57b86a;
        --ok-soft:  rgba(87, 184, 106, 0.16);
        --ok-ink:   #86d094;
        --warning:      #e8b243;
        --warning-soft: rgba(232, 178, 67, 0.16);
        --warning-ink:  #f0c877;
        --danger:       #e26b6b;
        --danger-soft:  rgba(226, 107, 107, 0.16);
        --danger-ink:   #f09a9a;
        --info:         #6f9fe8;
        --info-soft:    rgba(111, 159, 232, 0.16);
        --info-ink:     #a2c2f2;

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
        --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 6px 14px rgba(0, 0, 0, 0.45), 0 22px 50px rgba(0, 0, 0, 0.5);
        --shadow-xl: 0 10px 22px rgba(0, 0, 0, 0.5), 0 36px 80px rgba(0, 0, 0, 0.6);

        color-scheme: dark;
    }
}

/* Bootstrap 5.3 değişkenlerini tasarım sistemine bağla */
:root {
    --bs-primary: var(--primary);
    --bs-primary-rgb: 53, 127, 34;
    --bs-body-color: var(--ink);
    --bs-body-bg: transparent;
    --bs-body-font-family: var(--font-body);
    --bs-border-color: var(--line);
    --bs-border-radius: var(--r-md);
    --bs-link-color: var(--primary);
    --bs-link-hover-color: var(--primary-hover);
    --bs-secondary-color: var(--ink-muted);
    --bs-emphasis-color: var(--ink-strong);
    --bs-tertiary-bg: var(--surface-2);
    --bs-heading-color: var(--ink-strong);
}

/* ───────────────────────────────────────────────────────────────────────────
   2. RESET & TEMEL KATMAN
   ─────────────────────────────────────────────────────────────────────────── */

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--topbar-h) + 12px);
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--ink);
    background-color: var(--bg);
    background-image:
        radial-gradient(1100px 620px at 8% -8%, color-mix(in srgb, var(--primary) 9%, transparent) 0%, transparent 62%),
        radial-gradient(900px 520px at 100% 0%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 58%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-variant-numeric: tabular-nums;
}

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

hr {
    border: 0;
    border-top: 1px solid var(--line);
    opacity: 1;
    margin: var(--sp-5) 0;
}

::selection {
    background: color-mix(in srgb, var(--primary) 24%, transparent);
    color: var(--ink-strong);
}

/* Odak halkası — her yerde tutarlı */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

/* İnce kaydırma çubuğu */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: var(--r-pill);
    border: 3px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ink-subtle);
    background-clip: content-box;
}

/* Klavye kullanıcıları için içeriğe atlama bağlantısı */
.skip-link {
    position: absolute;
    left: 50%;
    top: -100px;
    transform: translateX(-50%);
    z-index: 2000;
    padding: 0.7rem 1.2rem;
    background: var(--primary);
    color: var(--on-primary);
    border-radius: 0 0 var(--r-md) var(--r-md);
    font-weight: 700;
    text-decoration: none;
    transition: top var(--dur) var(--ease);
}

.skip-link:focus {
    top: 0;
    color: var(--on-primary);
}

/* ───────────────────────────────────────────────────────────────────────────
   3. TİPOGRAFİ
   ─────────────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6,
.display-font,
.brand-text {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.021em;
    color: var(--ink-strong);
    text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); }

p {
    text-wrap: pretty;
}

a {
    color: var(--primary);
    text-decoration-color: color-mix(in srgb, var(--primary) 35%, transparent);
    text-underline-offset: 0.18em;
    transition: color var(--dur-fast) var(--ease);
}

a:hover {
    color: var(--primary-hover);
}

strong, b { font-weight: 700; }

small, .small { font-size: var(--text-sm); }

code, kbd, pre, samp { font-family: var(--font-mono); }

.muted {
    color: var(--ink-muted) !important;
}

.xsmall {
    font-size: var(--text-xs);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: var(--r-pill);
    background: var(--primary-soft);
    color: var(--primary-ink);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    padding: 0.32rem 0.7rem;
    line-height: 1.3;
}

.eyebrow i {
    font-size: 0.95em;
}

.eyebrow--accent {
    background: var(--accent-soft);
    color: var(--accent-ink);
}

.eyebrow--invert {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.section-title {
    margin-bottom: var(--sp-4);
}

.section-title h1,
.section-title h2,
.section-title h3 {
    margin-bottom: 0.35rem;
}

.section-title > p {
    max-width: 62ch;
    margin-bottom: 0;
}

.section-title.text-center > p {
    margin-inline: auto;
}

/* ───────────────────────────────────────────────────────────────────────────
   4. YERLEŞİM
   ─────────────────────────────────────────────────────────────────────────── */

.site-shell {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.site-shell > .main-content {
    flex: 1;
}

.main-content {
    padding: var(--sp-5) 0 var(--sp-7);
}

/* ── Üst bar (herkese açık sayfalar) ───────────────────────────────────── */

.topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    border-bottom: 1px solid transparent;
    backdrop-filter: saturate(1.6) blur(16px);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    padding: 0.4rem 0;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                background var(--dur) var(--ease);
}

.topbar.is-stuck {
    border-bottom-color: var(--line);
    box-shadow: var(--shadow-sm);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.brand-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    border-radius: var(--r-sm);
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.brand-mark img,
.brand-mark svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: left center;
}

.topbar .brand-wrap {
    margin-right: auto;
}

.topbar .brand-mark {
    width: 172px;
    height: 52px;
}

.footer-wrap .brand-mark {
    width: 190px;
    height: 58px;
}

.brand-text {
    color: var(--ink-strong);
    font-size: 1.05rem;
    font-weight: 800;
}

.brand-text .brand-accent {
    color: var(--accent);
}

/* Kelime markası: açık ve koyu zemin için ayrı görsel (CSS filtresi değil).
   Çift sınıf, `.brand-mark img` gibi tip seçicili kuralları geçmek için. */
.brand-img.brand-img--dark {
    display: none;
}

:root[data-theme="dark"] .brand-img.brand-img--light { display: none; }
:root[data-theme="dark"] .brand-img.brand-img--dark { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand-img.brand-img--light { display: none; }
    :root:not([data-theme="light"]) .brand-img.brand-img--dark { display: block; }
}

/* Tek başına duran logo (ön görüşme, KVKK onay ekranları) */
.standalone-brand {
    display: inline-block;
}

.standalone-brand .brand-img {
    height: 44px;
    width: auto;
}

.navbar-toggler {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 0.4rem 0.6rem;
    font-size: 1.2rem;
    color: var(--ink);
    background: var(--surface);
    transition: all var(--dur-fast) var(--ease);
}

.navbar-toggler:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.navbar-toggler:focus {
    box-shadow: var(--ring);
}

.nav-pills-group {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.navbar .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: var(--r-sm);
    color: var(--ink-muted);
    font-weight: 600;
    font-size: var(--text-sm);
    padding: 0.48rem 0.7rem;
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.navbar .nav-link .nav-icon {
    font-size: 1rem;
    opacity: 0.75;
}

.navbar .nav-link:hover {
    color: var(--ink-strong);
    background: var(--surface-3);
}

.navbar .nav-link.active {
    color: var(--primary-ink);
    background: var(--primary-soft);
}

.navbar .nav-link.active::after {
    content: '';
    position: absolute;
    left: 0.7rem;
    right: 0.7rem;
    bottom: 0.18rem;
    height: 2px;
    border-radius: 2px;
    background: var(--primary);
}

.navbar-actions {
    gap: 0.45rem;
}

/* Kullanıcı çipi */
.profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--r-pill);
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    border: 1px solid var(--line);
    background: var(--surface);
    text-decoration: none;
    color: var(--ink);
    transition: all var(--dur-fast) var(--ease);
}

.profile-chip:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--r-pill);
    background: linear-gradient(140deg, var(--green-500), var(--green-700));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

.profile-avatar--patient {
    background: linear-gradient(140deg, var(--lime-500), var(--green-600));
}

.profile-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.profile-name {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--ink-strong);
}

.profile-role {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-logout {
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-muted);
    padding: 0.42rem 0.62rem;
    font-size: 1rem;
    line-height: 1;
    transition: all var(--dur-fast) var(--ease);
}

.btn-logout:hover {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
    color: var(--danger-ink);
}

/* ── Tema anahtarı ─────────────────────────────────────────────────────── */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}

.theme-toggle:hover {
    color: var(--primary);
    border-color: var(--primary);
}

/* Simge değişimi hem .theme-toggle düğmesinde hem de kenar çubuğu
   bağlantısı biçimindeki tetikleyicide çalışmalı. */
[data-theme-toggle] .icon-dark { display: none; }

:root[data-theme="dark"] [data-theme-toggle] .icon-dark { display: inline-block; }
:root[data-theme="dark"] [data-theme-toggle] .icon-light { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) [data-theme-toggle] .icon-dark { display: inline-block; }
    :root:not([data-theme="light"]) [data-theme-toggle] .icon-light { display: none; }
}

/* ── Kenar çubuğu (paneller) ───────────────────────────────────────────── */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform var(--dur) var(--ease);
}

/* Yüksekliği `--topbar-h`e sabit: alt çizgisi panel üst çubuğununkiyle
   aynı hizada olsun (box-sizing: border-box, kenarlık dahil). */
.sidebar-brand {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    /* Kenar çubuğu bir flex kolonu; menü taştığında bu blok da sıkışıp
       yüksekliğini kaybediyordu. `flex-shrink: 0` sabit kalmasını sağlar. */
    flex-shrink: 0;
    height: var(--topbar-h);
    min-height: var(--topbar-h);
    padding: 0 1.1rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.sidebar-brand a {
    display: block;
    border-radius: var(--r-sm);
}

.sidebar-brand img {
    height: 38px;
    width: auto;
    object-fit: contain;
    object-position: left center;
}

.sidebar-nav {
    flex: 1;
    padding: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-group-label {
    padding: 0.85rem 0.85rem 0.3rem;
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-subtle);
}

.sidebar-nav > .sidebar-group-label:first-child {
    padding-top: 0.2rem;
}

.sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.8rem;
    border-radius: var(--r-sm);
    color: var(--ink-muted);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.sidebar-link i {
    font-size: 1.05rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.85;
}

.sidebar-link span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-link:hover {
    color: var(--ink-strong);
    background: var(--surface-3);
}

.sidebar-link.active {
    color: var(--primary-ink);
    background: var(--primary-soft);
    font-weight: 700;
}

.sidebar-link.active::before {
    content: '';
    position: absolute;
    left: -0.7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
}

.sidebar-link.active i {
    opacity: 1;
}

.sidebar-link .badge {
    margin-left: auto;
}

.sidebar-link--sm {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.42rem 0.8rem;
    color: var(--ink-subtle);
}

.sidebar-link--sm i {
    font-size: 0.95rem;
}

.sidebar-link--sm:hover {
    color: var(--ink);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(9, 16, 12, 0.5);
    backdrop-filter: blur(2px);
    z-index: 1039;
}

/* ── Panel gövdesi ─────────────────────────────────────────────────────── */

.panel-main {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* Üst çubuk her ekranda görünür; ikincil bağlantılar ve kullanıcı alanı
   sağa yaslanır. Kenar çubuğu yalnızca birincil gezinmeyi taşır. */
.panel-topbar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 1020;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.25rem;
    min-height: var(--topbar-h);
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    border-bottom: 1px solid var(--line);
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
}

.panel-usernav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;   /* sağa yasla */
    min-width: 0;
}

.panel-usernav__sep {
    width: 1px;
    height: 26px;
    background: var(--line);
    margin-inline: 0.25rem;
    flex-shrink: 0;
}

/* İkincil bağlantılar — dar ekranda yalnızca ikon */
.panel-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink-muted);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.panel-nav-btn i {
    font-size: 1.05rem;
}

.panel-nav-btn:hover {
    color: var(--primary-ink);
    background: var(--primary-softer);
}

.panel-nav-btn__label {
    display: none;
}

@media (min-width: 1400px) {
    .panel-nav-btn__label {
        display: inline;
    }
}

/* Kullanıcı çipi */
.panel-profile {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.7rem 0.25rem 0.25rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    text-decoration: none;
    color: var(--ink);
    max-width: 220px;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

a.panel-profile:hover {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--line));
    box-shadow: var(--shadow-xs);
    color: var(--ink);
}

.panel-profile__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, var(--green-500), var(--green-700));
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 800;
}

.panel-profile__avatar--patient {
    background: linear-gradient(140deg, var(--lime-500), var(--green-600));
}

.panel-profile__avatar--admin {
    background: linear-gradient(140deg, var(--slate-600), var(--slate-800));
}

/* Liste/tablo içinde baş harf rozeti olarak da kullanılır */
.panel-profile__avatar--md {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
}

.panel-profile__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.panel-profile__name {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--ink-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-profile__role {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* Çıkış */
.panel-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}

.panel-logout:hover {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
    color: var(--danger-ink);
}

.panel-topbar-title {
    display: none;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--ink-muted);
}

@media (min-width: 992px) {
    .panel-topbar-title {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }
}

/* Dar ekran: ad/rol gizlenir, yalnızca avatar kalır */
@media (max-width: 991.98px) {
    .panel-profile {
        padding: 0.2rem;
        max-width: none;
    }

    .panel-profile__text {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .panel-topbar {
        padding-inline: 0.75rem;
        gap: 0.3rem;
    }

    .panel-usernav {
        gap: 0.15rem;
    }

    .panel-nav-btn {
        padding: 0.35rem 0.4rem;
    }

    .panel-usernav__sep {
        margin-inline: 0.1rem;
    }
}

/* Hamburger yalnızca kenar çubuğunun gizlendiği ekranlarda görünür */
.sidebar-toggle {
    display: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 0.3rem 0.55rem;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
}

/* Panel içeriği kullanılabilir genişliğin tamamını kaplar; dar tutulması gereken
   form sayfaları bunu kendi içinde `col-lg-*` ile sınırlar. */
.panel-content {
    flex: 1;
    width: 100%;
    padding: var(--sp-5);
}

@media (max-width: 991.98px) {
    .sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar {
        transform: translateX(-100%);
        box-shadow: var(--shadow-xl);
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .sidebar.show + .sidebar-overlay,
    .sidebar-overlay.show {
        display: block;
    }

    .panel-main {
        margin-left: 0;
    }

    .panel-topbar .panel-topbar-brand .brand-img {
        height: 28px;
        width: auto;
    }

    .panel-content {
        padding: var(--sp-4);
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   5. BİLEŞENLER
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Yüzeyler ──────────────────────────────────────────────────────────── */

.surface-card {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.surface-card--flat {
    box-shadow: none;
}

.surface-card--raised {
    box-shadow: var(--shadow-md);
}

.surface-muted {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-2);
}

.surface-inset {
    border-radius: var(--r-md);
    background: var(--surface-inset);
}

/* Etkileşimli kart */
.card-hover {
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}

.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--primary) 32%, var(--line));
}

/* ── Butonlar ──────────────────────────────────────────────────────────── */

.btn {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-border: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid var(--btn-border);
    background-color: var(--btn-bg);
    color: var(--btn-fg);
    border-radius: var(--r-sm);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.005em;
    font-size: var(--text-sm);
    line-height: 1.35;
    padding: 0.55rem 0.95rem;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}

.btn:active {
    transform: translateY(1px);
}

.btn:focus-visible {
    box-shadow: var(--ring);
    outline: none;
}

.btn-sm {
    padding: 0.36rem 0.68rem;
    font-size: var(--text-xs);
    border-radius: var(--r-xs);
}

.btn-lg {
    padding: 0.72rem 1.4rem;
    font-size: var(--text-md);
    border-radius: var(--r-md);
}

.btn-primary,
.btn-primary:focus,
.btn-primary:active {
    --btn-bg: var(--primary);
    --btn-border: var(--primary);
    --btn-fg: var(--on-primary);
    box-shadow: var(--shadow-xs);
}

.btn-primary:hover {
    --btn-bg: var(--primary-hover);
    --btn-border: var(--primary-hover);
    --btn-fg: var(--on-primary);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 30%, transparent);
}

.btn-primary:disabled,
.btn-primary.disabled {
    --btn-bg: var(--primary);
    --btn-border: var(--primary);
    --btn-fg: var(--on-primary);
    opacity: 0.5;
    box-shadow: none;
}

.btn-outline-primary,
.btn-outline-primary:focus {
    --btn-border: color-mix(in srgb, var(--primary) 45%, var(--line));
    --btn-fg: var(--primary-ink);
    --btn-bg: var(--surface);
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
    --btn-border: var(--primary);
    --btn-bg: var(--primary-soft);
    --btn-fg: var(--primary-ink);
}

.btn-secondary,
.btn-secondary:focus,
.btn-secondary:active {
    --btn-bg: var(--surface-3);
    --btn-border: var(--line);
    --btn-fg: var(--ink);
}

.btn-secondary:hover {
    --btn-bg: var(--line);
    --btn-fg: var(--ink-strong);
}

.btn-outline-secondary,
.btn-outline-secondary:focus {
    --btn-bg: var(--surface);
    --btn-border: var(--line-strong);
    --btn-fg: var(--ink-muted);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active {
    --btn-bg: var(--surface-3);
    --btn-border: var(--ink-subtle);
    --btn-fg: var(--ink-strong);
}

.btn-danger,
.btn-danger:focus,
.btn-danger:active,
.btn-danger:hover {
    --btn-bg: var(--danger);
    --btn-border: var(--danger);
    --btn-fg: #fff;
}

.btn-danger:hover {
    --btn-bg: var(--danger-ink);
    --btn-border: var(--danger-ink);
}

.btn-outline-danger,
.btn-outline-danger:focus {
    --btn-bg: transparent;
    --btn-border: color-mix(in srgb, var(--danger) 45%, var(--line));
    --btn-fg: var(--danger-ink);
}

.btn-outline-danger:hover,
.btn-outline-danger:active {
    --btn-bg: var(--danger-soft);
    --btn-border: var(--danger);
    --btn-fg: var(--danger-ink);
}

.btn-success {
    --btn-bg: var(--ok);
    --btn-border: var(--ok);
    --btn-fg: #fff;
}

/* Lime zemin üzerinde beyaz metin AA'yı geçmez; koyu yeşil ink kullanılır. */
.btn-warning,
.btn-warning:focus,
.btn-warning:active {
    --btn-bg: var(--lime-400);
    --btn-border: var(--lime-400);
    --btn-fg: #1b3a06;
    box-shadow: var(--shadow-xs);
}

.btn-warning:hover {
    --btn-bg: var(--lime-500);
    --btn-border: var(--lime-500);
    --btn-fg: #163004;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 34%, transparent);
}

.btn-light,
.btn-light:focus {
    --btn-bg: #fff;
    --btn-border: #fff;
    --btn-fg: var(--slate-900);
}

.btn-light:hover {
    --btn-bg: var(--slate-100);
    --btn-border: var(--slate-100);
    --btn-fg: var(--slate-950);
}

.btn-link {
    --btn-fg: var(--primary);
    padding-inline: 0.25rem;
    text-decoration: none;
}

.btn-link:hover {
    --btn-fg: var(--primary-hover);
    text-decoration: underline;
}

/* Buton içi ikon hizası */
.btn i {
    font-size: 1.05em;
    line-height: 1;
}

/* ── İkon hapı ─────────────────────────────────────────────────────────── */

.icon-pill {
    width: 42px;
    height: 42px;
    border-radius: var(--r-md);
    background: var(--primary-soft);
    color: var(--primary-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.icon-pill--accent {
    background: var(--accent-soft);
    color: var(--accent-ink);
}

.icon-pill--lg {
    width: 52px;
    height: 52px;
    border-radius: var(--r-lg);
    font-size: 1.35rem;
}

/* Yönetim panelinde metrikleri ayırt etmek için anlamsal varyantlar */
.icon-pill--ok     { background: var(--ok-soft);      color: var(--ok-ink); }
.icon-pill--amber  { background: var(--warning-soft); color: var(--warning-ink); }
.icon-pill--danger { background: var(--danger-soft);  color: var(--danger-ink); }
.icon-pill--info   { background: var(--info-soft);    color: var(--info-ink); }
.icon-pill--indigo { background: rgba(99, 102, 241, 0.14); color: #4f46e5; }

:root[data-theme="dark"] .icon-pill--indigo { color: #a5b4fc; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .icon-pill--indigo { color: #a5b4fc; }
}

/* ── Metrik kartı ──────────────────────────────────────────────────────── */

.metric-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    padding: 1rem 1.05rem;
    box-shadow: var(--shadow-sm);
    height: 100%;
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.metric-card::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.metric-card:hover::after {
    opacity: 1;
}

.metric-label {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.metric-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.15rem;
    color: var(--ink-strong);
    letter-spacing: -0.02em;
}

.metric-help {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

/* ── Listeler & bağlantı kartları ──────────────────────────────────────── */

.data-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.data-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--text-base);
}

.data-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.data-list span:first-child {
    color: var(--ink-muted);
}

.action-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
    border-radius: var(--r-md);
    text-decoration: none;
    border: 1px solid transparent;
    color: var(--ink);
    transition: all var(--dur-fast) var(--ease);
}

.action-link:hover {
    border-color: var(--line);
    background: var(--surface-2);
    color: var(--ink-strong);
    transform: translateX(2px);
}

/* ── Durum rozetleri ───────────────────────────────────────────────────── */

.status-pill,
.badge-scheduled,
.badge-confirmed,
.badge-completed,
.badge-cancelled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border-radius: var(--r-pill);
    padding: 0.2rem 0.6rem;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.5;
    border: 1px solid transparent;
    white-space: nowrap;
}

.status-scheduled,
.badge-scheduled,
.badge-scheduled.badge {
    background: var(--info-soft);
    color: var(--info-ink);
    border-color: color-mix(in srgb, var(--info) 28%, transparent);
}

.status-confirmed,
.badge-confirmed,
.badge-confirmed.badge {
    background: var(--ok-soft);
    color: var(--ok-ink);
    border-color: color-mix(in srgb, var(--ok) 28%, transparent);
}

.status-completed,
.badge-completed,
.badge-completed.badge {
    background: var(--surface-3);
    color: var(--ink-muted);
    border-color: var(--line-strong);
}

.status-cancelled,
.badge-cancelled,
.badge-cancelled.badge {
    background: var(--danger-soft);
    color: var(--danger-ink);
    border-color: color-mix(in srgb, var(--danger) 28%, transparent);
}

/* Bootstrap rozetlerini de temaya bağla */
.badge.bg-success { background-color: var(--ok) !important; }
.badge.bg-danger  { background-color: var(--danger) !important; }
.badge.bg-warning { background-color: var(--warning) !important; color: #201a06 !important; }
.badge.bg-primary { background-color: var(--primary) !important; color: var(--on-primary) !important; }
.badge.bg-secondary { background-color: var(--slate-500) !important; }
.badge.bg-light   { background-color: var(--surface-3) !important; color: var(--ink) !important; }

/* ── Randevu kartları ──────────────────────────────────────────────────── */

.appointment-card {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 0.95rem 1rem;
    background: var(--surface);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.appointment-card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-sm);
}

.appointment-card + .appointment-card {
    margin-top: 0.75rem;
}

.upcoming-appointments-section {
    background: var(--surface-2);
}

.upcoming-appointment-card {
    border: 1px solid var(--line);
    box-shadow: var(--shadow-xs);
}

.upcoming-appointment-grid {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
}

.upcoming-time-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
    background: var(--primary-softer);
    border-radius: var(--r-md);
    padding: 0.5rem 0.4rem;
    min-height: 72px;
}

.upcoming-day {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--primary-ink);
}

.upcoming-month {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
}

.upcoming-clock {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--ink-strong);
}

.upcoming-main {
    min-width: 0;
}

.upcoming-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.upcoming-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.upcoming-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--line);
    background: var(--surface-2);
    border-radius: var(--r-pill);
    padding: 0.2rem 0.55rem;
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--ink-muted);
}

.upcoming-note {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upcoming-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

.upcoming-actions .status-pill {
    margin-right: 0.15rem;
}

.upcoming-actions form {
    margin: 0;
}

@media (max-width: 991.98px) {
    .upcoming-appointment-grid {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .upcoming-time-badge {
        flex-direction: row;
        justify-content: flex-start;
        min-height: 0;
        gap: 0.5rem;
    }

    .upcoming-head {
        flex-wrap: wrap;
    }

    .upcoming-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .upcoming-note {
        max-width: 100%;
    }
}

/* ── Formlar ───────────────────────────────────────────────────────────── */

.form-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.3rem;
}

.form-text {
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

.form-control,
.form-select {
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
    padding: 0.52rem 0.75rem;
    background-color: var(--surface);
    color: var(--ink);
    font-size: var(--text-base);
    font-weight: 500;
    min-height: 2.35rem;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.form-control::placeholder {
    color: var(--ink-subtle);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    background-color: var(--surface);
    color: var(--ink);
    box-shadow: var(--ring);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--surface-3);
    color: var(--ink-muted);
}

.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='%236b7c73' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-check-input {
    border-color: var(--line-strong);
    background-color: var(--surface);
}

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

.form-check-input:focus {
    border-color: var(--primary);
    box-shadow: var(--ring);
}

.input-group-text {
    background: var(--surface-3);
    border-color: var(--line-strong);
    color: var(--ink-muted);
    font-size: var(--text-sm);
}

.input-group .btn {
    padding-inline: 0.75rem;
}

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

/* ── Tablolar ──────────────────────────────────────────────────────────── */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--line);
    --bs-table-hover-bg: var(--surface-2);
    --bs-table-hover-color: var(--ink-strong);
    --bs-table-striped-bg: var(--surface-2);
    --bs-table-striped-color: var(--ink);
    margin-bottom: 0;
    color: var(--ink);
}

.table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.68rem;
    color: var(--ink-muted);
    font-weight: 800;
    border-bottom: 1px solid var(--line-strong);
    padding: 0.6rem 0.6rem;
    white-space: nowrap;
}

.table tbody td {
    font-size: var(--text-sm);
    border-color: var(--line);
    vertical-align: middle;
    padding: 0.62rem 0.6rem;
}

.table tbody tr:last-child td {
    border-bottom-width: 0;
}

.table-responsive {
    border-radius: var(--r-md);
}

/* ── Uyarılar ──────────────────────────────────────────────────────────── */

.alert {
    border: 1px solid transparent;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xs);
    font-weight: 500;
    font-size: var(--text-base);
    padding: 0.8rem 1rem;
}

.alert-success {
    background: var(--ok-soft);
    color: var(--ok-ink);
    border-color: color-mix(in srgb, var(--ok) 26%, transparent);
}

.alert-danger,
.alert-error {
    background: var(--danger-soft);
    color: var(--danger-ink);
    border-color: color-mix(in srgb, var(--danger) 26%, transparent);
}

.alert-warning {
    background: var(--warning-soft);
    color: var(--warning-ink);
    border-color: color-mix(in srgb, var(--warning) 30%, transparent);
}

.alert-info {
    background: var(--info-soft);
    color: var(--info-ink);
    border-color: color-mix(in srgb, var(--info) 26%, transparent);
}

.alert .btn-close {
    filter: none;
}

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

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-close {
        filter: invert(1) grayscale(1) brightness(2);
    }
}

/* ── Boş durum ─────────────────────────────────────────────────────────── */

.empty-state {
    text-align: center;
    padding: var(--sp-5) var(--sp-4);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--ink-muted);
}

.empty-state i {
    font-size: 1.9rem;
    color: var(--ink-subtle);
    display: block;
    margin-bottom: 0.4rem;
}

/* ── Sekmeler ──────────────────────────────────────────────────────────── */

.panel-tabs {
    display: inline-flex;
    gap: 0.2rem;
    padding: 0.28rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-5);
    box-shadow: var(--shadow-xs);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
}

.panel-tabs::-webkit-scrollbar {
    display: none;
}

.panel-tabs .nav-item {
    flex-shrink: 0;
}

.panel-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    border-radius: var(--r-sm);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--ink-muted);
    background: transparent;
    border: none;
    transition: all var(--dur) var(--ease);
    white-space: nowrap;
    cursor: pointer;
}

.panel-tabs .nav-link::after {
    display: none;
}

.panel-tabs .nav-link i {
    font-size: 1rem;
    opacity: 0.6;
    transition: opacity var(--dur) var(--ease);
}

.panel-tabs .nav-link:hover {
    color: var(--ink-strong);
    background: var(--surface-3);
}

.panel-tabs .nav-link:hover i {
    opacity: 0.9;
}

.panel-tabs .nav-link.active {
    color: var(--on-primary);
    background: var(--primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 32%, transparent);
}

.panel-tabs .nav-link.active i {
    opacity: 1;
}

.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 0.36rem;
    border-radius: var(--r-pill);
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
    background: var(--primary-soft);
    color: var(--primary-ink);
    transition: all var(--dur) var(--ease);
}

.panel-tabs .nav-link.active .tab-badge {
    background: rgba(255, 255, 255, 0.24);
    color: var(--on-primary);
}

.tab-content > .tab-pane {
    display: none;
}

.tab-content > .tab-pane.show.active {
    display: block;
}

.tab-content > .tab-pane.fade {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.tab-content > .tab-pane.fade.show {
    opacity: 1;
    transform: none;
}

/* ── Sayfalama ─────────────────────────────────────────────────────────── */

.pagination {
    --bs-pagination-bg: var(--surface);
    --bs-pagination-color: var(--ink-muted);
    --bs-pagination-border-color: var(--line);
    --bs-pagination-hover-bg: var(--surface-3);
    --bs-pagination-hover-color: var(--ink-strong);
    --bs-pagination-hover-border-color: var(--line-strong);
    --bs-pagination-active-bg: var(--primary);
    --bs-pagination-active-border-color: var(--primary);
    --bs-pagination-active-color: var(--on-primary);
    --bs-pagination-disabled-bg: var(--surface-2);
    --bs-pagination-disabled-color: var(--ink-subtle);
    --bs-pagination-disabled-border-color: var(--line);
    --bs-pagination-border-radius: var(--r-sm);
    --bs-pagination-focus-box-shadow: var(--ring);
    gap: 0.22rem;
}

.page-link {
    font-weight: 600;
    font-size: var(--text-sm);
    border-radius: var(--r-sm);
}

/* ── Modal / açılır menü ───────────────────────────────────────────────── */

.modal-content {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xl);
}

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

.modal-backdrop.show {
    opacity: 0.62;
}

.dropdown-menu {
    --bs-dropdown-bg: var(--surface);
    --bs-dropdown-color: var(--ink);
    --bs-dropdown-border-color: var(--line);
    --bs-dropdown-link-color: var(--ink);
    --bs-dropdown-link-hover-bg: var(--surface-3);
    --bs-dropdown-link-hover-color: var(--ink-strong);
    --bs-dropdown-link-active-bg: var(--primary-soft);
    --bs-dropdown-link-active-color: var(--primary-ink);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
}

/* ── İlerleme çubuğu ───────────────────────────────────────────────────── */

.progress {
    background: var(--surface-3);
    border-radius: var(--r-pill);
    overflow: hidden;
    height: 0.5rem;
}

.progress-bar {
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width var(--dur-slow) var(--ease);
}

/* ── Dil anahtarı ──────────────────────────────────────────────────────── */

.lang-toggle {
    display: inline-flex;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    overflow: hidden;
    flex-shrink: 0;
}

/* Bağlantı (a) olarak render edilir; buton görünümünü korur */
.lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0.3rem 0.6rem;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    line-height: 1.5;
}

.lang-btn:hover {
    color: var(--primary-ink);
    background: var(--primary-softer);
}

.lang-btn.active {
    background: var(--primary);
    color: var(--on-primary);
    cursor: default;
}

.lang-btn + .lang-btn {
    border-left: 1px solid var(--line);
}

.lang-btn.active + .lang-btn,
.lang-btn + .lang-btn.active {
    border-left-color: transparent;
}

/* ── Alt bilgi ─────────────────────────────────────────────────────────── */

.footer-wrap {
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.footer-wrap h6 {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    font-weight: 800;
}

.footer-wrap a.muted {
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}

.footer-wrap a.muted:hover {
    color: var(--primary) !important;
}

.codezzium-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--text-xs);
    color: var(--ink-muted);
    font-weight: 600;
}

.codezzium-badge img {
    /* Reset'teki `height: auto` HTML height niteliğini ezdiği için burada sabitlenir */
    height: 20px;
    width: auto;
    opacity: 0.75;
    transition: opacity var(--dur-fast) var(--ease);
}

:root[data-theme="dark"] .codezzium-badge img {
    filter: invert(1) brightness(1.6) grayscale(0.3);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .codezzium-badge img {
        filter: invert(1) brightness(1.6) grayscale(0.3);
    }
}

.codezzium-badge:hover img {
    opacity: 1;
}

/* ── Kimlik doğrulama ekranları ────────────────────────────────────────── */

.auth-shell {
    min-height: calc(100vh - 40px);
    display: flex;
    align-items: center;
}

.auth-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 0;
    border-radius: var(--r-xl);
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.auth-side {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(700px 340px at 85% 8%, rgba(255, 255, 255, 0.2), transparent 62%),
        linear-gradient(155deg, var(--green-700) 0%, var(--green-900) 72%, var(--green-950) 100%);
    color: #fff;
    padding: var(--sp-6) var(--sp-5);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--sp-5);
    min-height: 460px;
    overflow: hidden;
}

.auth-side::after {
    content: '';
    position: absolute;
    right: -70px;
    bottom: -90px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 212, 58, 0.28), transparent 68%);
    z-index: -1;
}

.auth-side h1,
.auth-side h2 {
    color: #fff;
}

.auth-bullet {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin-bottom: 0.6rem;
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.92);
}

.auth-bullet i {
    color: var(--lime-400);
    margin-top: 0.12rem;
    flex-shrink: 0;
}

.auth-panel {
    padding: var(--sp-6) var(--sp-5);
}

/* auth-grid içindeki kartın kendi çerçevesi olmasın */
.auth-grid > .surface-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--surface);
}

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

    .auth-side {
        min-height: 0;
        padding: var(--sp-5) var(--sp-4);
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   6. MODÜLLER
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Panel: bugünün randevu şeridi ─────────────────────────────────────── */

.today-ribbon {
    background:
        linear-gradient(135deg, var(--primary-softer), transparent 60%),
        var(--surface);
}

.today-strip {
    display: flex;
    gap: 0.65rem;
    overflow-x: auto;
    padding-bottom: 0.4rem;
    scroll-snap-type: x mandatory;
}

.today-chip {
    flex: 0 0 216px;
    min-width: 216px;
    scroll-snap-align: start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--primary);
    border-radius: var(--r-md);
    padding: 0.7rem 0.9rem;
    text-decoration: none;
    color: inherit;
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.today-chip:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: inherit;
}

.today-chip-time {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--primary-ink);
}

.today-chip-patient {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--ink-strong);
    margin: 0.1rem 0;
}

.today-chip-meta {
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

.next-apt-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--primary);
    border-radius: var(--r-md);
    padding: 0.85rem 1rem;
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.next-apt-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: inherit;
}

.next-apt-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--primary-ink);
    font-weight: 800;
}

.next-apt-date {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--ink-muted);
}

.next-apt-patient {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink-strong);
    margin-top: 0.1rem;
}

/* ── Panel: aktivite akışı ─────────────────────────────────────────────── */

.activity-feed {
    list-style: none;
    padding: 0;
    margin: 0;
}

.activity-feed-item {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
}

.activity-feed-item:last-child {
    border-bottom: 0;
}

.activity-feed-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

/* ── Takvim ────────────────────────────────────────────────────────────── */

.calendar-grid {
    font-size: var(--text-sm);
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
    min-width: 760px;
    background: var(--surface);
    border-radius: var(--r-md);
    overflow: hidden;
}

.calendar-grid th,
.calendar-grid td {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.calendar-grid th:last-child,
.calendar-grid td:last-child {
    border-right: 0;
}

.calendar-time-col {
    width: 56px;
}

.calendar-time-cell {
    text-align: center;
    background: var(--surface-2);
    color: var(--ink-muted);
    padding: 0 4px;
    font-size: var(--text-xs);
    font-weight: 600;
    height: 54px;
    vertical-align: middle;
    white-space: nowrap;
}

.calendar-day-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-2);
    padding: 8px 4px;
    text-align: center;
    white-space: nowrap;
}

.calendar-day-header.today-col {
    background: var(--primary-softer);
    box-shadow: inset 0 -2px 0 var(--primary);
}

.calendar-day-header .day-label {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.calendar-day-header .day-number {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink-strong);
    line-height: 1.2;
}

.calendar-day-header.today-col .day-number {
    color: var(--primary-ink);
}

.calendar-cell {
    min-height: 54px;
    height: 54px;
    padding: 3px;
    transition: background var(--dur-fast) var(--ease);
    position: relative;
    background: var(--surface);
}

.calendar-cell.slot-booked {
    height: auto;
    min-height: 54px;
}

.slot-available {
    background: var(--surface);
}

.slot-available:hover {
    background: var(--primary-softer);
}

.slot-booked {
    background: var(--surface);
}

.slot-past {
    background: var(--surface-3);
    opacity: 0.55;
}

.slot-blocked {
    background: repeating-linear-gradient(
        45deg,
        var(--surface-3),
        var(--surface-3) 6px,
        color-mix(in srgb, var(--ink) 7%, transparent) 6px,
        color-mix(in srgb, var(--ink) 7%, transparent) 12px
    );
    color: var(--ink-muted);
}

.calendar-event {
    display: block;
    padding: 4px 6px 4px 9px;
    border-radius: var(--r-xs);
    background: var(--primary-soft);
    border-left: 3px solid var(--primary);
    font-size: var(--text-xs);
    line-height: 1.35;
    margin-bottom: 3px;
    min-height: 42px;
    box-sizing: border-box;
    color: var(--ink);
    text-decoration: none;
    transition: filter var(--dur-fast) var(--ease);
}

/* Danışan takviminde "Sizin" ve "Dolu" bloklarını birbirinden ayır */
.calendar-event-own {
    background: var(--accent-soft);
    border-left-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
}

.calendar-event-busy {
    background: var(--surface-3);
    border-left-color: var(--line-strong);
    color: var(--ink-muted);
}

.slot-own {
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.calendar-event:last-child {
    margin-bottom: 0;
}

.calendar-event:hover {
    filter: brightness(0.95) saturate(1.1);
    color: var(--ink);
}

.calendar-event .event-name {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-event-type {
    font-size: 0.66rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-slot-free {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: var(--primary-ink);
    text-decoration: none;
    font-size: var(--text-xs);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
    border-radius: var(--r-xs);
}

.calendar-slot-free i {
    font-size: 1rem;
}

.calendar-cell:hover .calendar-slot-free {
    opacity: 1;
    background: var(--primary-soft);
}

.calendar-slot-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

/* Renk seçiciler & lejant */

.color-swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--line-strong);
    vertical-align: middle;
}

.color-swatch-sm {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 4px;
}

.color-preset {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--line-strong);
    cursor: pointer;
    padding: 0;
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.color-preset:hover {
    transform: scale(1.18);
    box-shadow: var(--shadow-sm);
}

.legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--line-strong);
}

.legend-dot--available {
    background: var(--primary-soft);
    border-color: var(--primary);
}

.legend-dot--booked {
    background: var(--danger-soft);
    border-color: var(--danger);
}

.legend-dot--own {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.legend-dot--past {
    background: var(--surface-3);
    border-color: var(--line-strong);
}

.legend-dot--blocked {
    background: repeating-linear-gradient(
        45deg,
        var(--surface-3),
        var(--surface-3) 3px,
        color-mix(in srgb, var(--ink) 14%, transparent) 3px,
        color-mix(in srgb, var(--ink) 14%, transparent) 6px
    );
    border-color: var(--line-strong);
}

/* ── Sohbet ────────────────────────────────────────────────────────────── */

.chat-wrap {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 130px);
    max-height: calc(100dvh - 130px);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.chat-header .chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--green-500), var(--green-700));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-family: var(--font-display);
    flex-shrink: 0;
}

.chat-header .chat-peer-name {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink-strong);
}

.chat-header .chat-peer-sub {
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

.chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem;
    background: var(--surface-inset);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.chat-msg {
    max-width: 74%;
    padding: 0.5rem 0.78rem;
    border-radius: var(--r-md);
    line-height: 1.4;
    font-size: var(--text-base);
    word-wrap: break-word;
    box-shadow: var(--shadow-xs);
}

.chat-msg--me {
    align-self: flex-end;
    background: var(--primary);
    color: var(--on-primary);
    border-bottom-right-radius: 4px;
}

.chat-msg--them {
    align-self: flex-start;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-bottom-left-radius: 4px;
}

.chat-body {
    white-space: pre-wrap;
}

.chat-img {
    max-width: 240px;
    max-height: 240px;
    border-radius: var(--r-sm);
    display: block;
    margin-bottom: 0.25rem;
}

.chat-file {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    text-decoration: none;
}

.chat-msg--me .chat-file {
    color: var(--on-primary);
}

.chat-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    font-size: 0.66rem;
    opacity: 0.75;
    margin-top: 0.15rem;
}

.chat-tick {
    font-size: 0.7rem;
}

.chat-time {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.chat-error {
    display: none;
    color: var(--danger-ink);
    background: var(--danger-soft);
    padding: 0.4rem 0.75rem;
    margin: 0.5rem 1rem 0;
    border-radius: var(--r-sm);
    font-size: var(--text-sm);
}

.chat-composer {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.chat-composer textarea {
    flex: 1 1 auto;
    resize: none;
    border: 1px solid var(--line-strong);
    background: var(--surface-2);
    color: var(--ink);
    border-radius: var(--r-lg);
    padding: 0.55rem 0.9rem;
    max-height: 120px;
    font: inherit;
    font-size: var(--text-base);
}

.chat-composer textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--ring);
}

.chat-attach-btn {
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--primary);
    padding: 0.25rem 0.35rem;
    line-height: 1;
    border-radius: var(--r-xs);
}

.chat-send-btn {
    border: none;
    background: var(--primary);
    color: var(--on-primary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex: 0 0 auto;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.chat-send-btn:hover:not(:disabled) {
    background: var(--primary-hover);
    transform: scale(1.05);
}

.chat-send-btn:disabled {
    opacity: 0.5;
}

.chat-file-preview {
    display: none;
    font-size: var(--text-sm);
    color: var(--ink-muted);
    padding: 0.25rem 1rem 0;
}

.chat-load-more {
    display: block;
    margin: 0 auto 0.5rem;
}

.chat-empty {
    text-align: center;
    color: var(--ink-muted);
    padding: 3rem 1rem;
}

.chat-empty-icon {
    font-size: 2.4rem;
    color: var(--primary);
    display: block;
    margin-bottom: 0.5rem;
}

/* Sohbet listesi (gelen kutusu) */
.chat-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--green-500), var(--green-700));
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
}

.list-group-item {
    --bs-list-group-bg: var(--surface);
    --bs-list-group-color: var(--ink);
    --bs-list-group-border-color: var(--line);
    --bs-list-group-action-hover-bg: var(--surface-2);
    --bs-list-group-action-hover-color: var(--ink-strong);
    --bs-list-group-action-active-bg: var(--primary-soft);
}

/* ── Öğün kurucu ───────────────────────────────────────────────────────── */

.meal-card {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}

.food-row {
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-sm);
    padding: 0.7rem;
    background: var(--surface-2);
    transition: border-color var(--dur-fast) var(--ease);
}

.food-row:focus-within {
    border-color: var(--primary);
    border-style: solid;
}

.meal-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
}

.tiny-hint {
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

.food-combo {
    position: relative;
}

.food-options {
    position: absolute;
    z-index: 1050;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    margin-top: 3px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-lg);
}

.food-option {
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    font-size: var(--text-base);
    color: var(--ink);
}

.food-option:hover,
.food-option.is-active {
    background: var(--primary-softer);
    color: var(--primary-ink);
}

.food-option.is-empty {
    color: var(--ink-muted);
    cursor: default;
}

/* ── Öğün kurucu: salt okunur besin listesi ────────────────────────────── */

.food-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

/* ── Yıldız seçici ─────────────────────────────────────────────────────── */

.star-rating {
    display: flex;
    gap: 0.2rem;
}

.star-label {
    cursor: pointer;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--line-strong);
    transition: transform var(--dur-fast) var(--ease);
}

.star-label:hover {
    transform: scale(1.1);
}

.star-label:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

.star-picker {
    display: flex;
    gap: 0.2rem;
}

.star-btn {
    background: transparent;
    border: 0;
    padding: 0.25rem;
    cursor: pointer;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--line-strong);
    transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.star-btn:hover {
    transform: scale(1.12);
}

.star-btn.active {
    color: var(--warning);
}

/* ── Uzman kartı & detay modalı (dietitian_list) ───────────────────────── */

.dietitian-card {
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}

.dietitian-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--primary) 32%, var(--line));
}

.dm-content {
    border: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
}

.dm-header {
    background: linear-gradient(135deg, var(--primary-softer) 0%, transparent 100%);
    border-bottom: 1px solid var(--line);
}

.dm-header .display-font {
    font-size: 1.3rem;
    line-height: 1.2;
}

.dm-spec {
    color: var(--primary-ink);
    font-weight: 600;
    font-size: var(--text-base);
}

.dm-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.65rem;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.dm-chip i {
    color: var(--primary);
}

.dm-section-title {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-muted);
    font-weight: 800;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--line);
}

.dm-bio {
    color: var(--ink);
    font-size: var(--text-base);
    line-height: 1.6;
}

.dm-services {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.dm-services li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.4rem;
    color: var(--ink);
    font-size: var(--text-base);
    line-height: 1.45;
}

.dm-services li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

.dm-interest-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.7rem;
    border-radius: var(--r-pill);
    background: var(--primary-soft);
    color: var(--primary-ink);
    font-size: var(--text-sm);
    font-weight: 600;
}

.dm-social {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1.05rem;
    transition: all var(--dur-fast) var(--ease);
}

#dmInstagram:hover { background: #e1306c; color: #fff; border-color: #e1306c; }
#dmYoutube:hover   { background: #ff0000; color: #fff; border-color: #ff0000; }
#dmPhone:hover     { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.dm-cta {
    border-radius: var(--r-md);
    font-weight: 700;
    padding: 0.8rem 1rem;
}

@media (max-width: 575.98px) {
    .dm-header .row { text-align: center; }
    .dm-header .col-auto { width: 100%; }
    .dm-header .d-flex.flex-wrap { justify-content: center; }
}

/* ── Sayfa yolu (breadcrumb) ───────────────────────────────────────────── */

.breadcrumb-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: var(--sp-4);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.breadcrumb-nav a {
    color: var(--ink-muted);
    text-decoration: none;
}

.breadcrumb-nav a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.breadcrumb-nav [aria-hidden="true"] {
    color: var(--ink-subtle);
}

.breadcrumb-nav [aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
}

/* ── Blog yazısı gövdesi ───────────────────────────────────────────────── */

.blog-content {
    font-size: 1.02rem;
    line-height: 1.78;
    color: var(--ink);
    max-width: 72ch;
}

.blog-content > p {
    margin-bottom: 1.15em;
}

.blog-content > p:last-child {
    margin-bottom: 0;
}

.blog-content h2,
.blog-content h3,
.blog-content h4 {
    margin: 1.9em 0 0.6em;
}

.blog-content h2 { font-size: var(--text-xl); }
.blog-content h3 { font-size: var(--text-lg); }

.blog-content ul,
.blog-content ol {
    padding-left: 1.35em;
    margin-bottom: 1.15em;
}

.blog-content li + li {
    margin-top: 0.35em;
}

.blog-content a {
    text-decoration: underline;
}

.blog-content img {
    border-radius: var(--r-md);
    margin: 1.2em 0;
}

.blog-content blockquote {
    margin: 1.4em 0;
    padding: 0.85rem 1.15rem;
    border-left: 3px solid var(--primary);
    background: var(--surface-2);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    color: var(--ink-muted);
    font-style: italic;
}

.blog-content code {
    background: var(--surface-3);
    padding: 0.12em 0.36em;
    border-radius: var(--r-xs);
    font-size: 0.9em;
}

/* ── Hata sayfaları (403 / 404 / 500) ──────────────────────────────────── */

.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--sp-5) var(--sp-4);
}

.error-card {
    text-align: center;
    max-width: 520px;
    width: 100%;
    padding: var(--sp-6) var(--sp-5);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.error-brand {
    display: inline-block;
    margin-bottom: var(--sp-4);
}

.error-brand img {
    width: 168px;
    height: auto;
}

.error-code {
    font-family: var(--font-display);
    font-size: clamp(3.4rem, 2rem + 6vw, 5.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
    margin: 0 0 0.25rem;
    background: linear-gradient(135deg, var(--green-500), var(--lime-500));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.error-card h1 {
    font-size: var(--text-xl);
    margin-bottom: 0.5rem;
}

/* ── PWA: kurulum bandı ────────────────────────────────────────────────── */

.install-banner {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 1040;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xl);
    padding: 0.8rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: installSlideUp var(--dur-slow) var(--ease);
}

.install-banner[hidden] {
    display: none !important;
}

@keyframes installSlideUp {
    from { transform: translateY(140%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.install-banner-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    border-radius: var(--r-md);
    font-size: 1.3rem;
    flex-shrink: 0;
}

.install-banner-text {
    flex: 1;
    min-width: 0;
    font-size: var(--text-base);
    line-height: 1.35;
    color: var(--ink);
}

.install-banner-text strong {
    display: block;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--ink-strong);
}

.install-banner-text small {
    color: var(--ink-muted);
    font-size: var(--text-xs);
}

.install-banner-cta {
    padding: 0.5rem 0.9rem;
    background: var(--primary);
    color: var(--on-primary);
    border: none;
    border-radius: var(--r-sm);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

.install-banner-cta:hover {
    color: var(--on-primary);
    background: var(--primary-hover);
}

.install-banner-close {
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    color: var(--ink-muted);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.install-banner-close:hover {
    background: var(--surface-3);
    color: var(--ink);
}

@media (min-width: 768px) {
    .install-banner { display: none !important; }
}

/* ── PWA: kurulum rehberi sayfası ──────────────────────────────────────── */

.install-guide-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
    background: linear-gradient(135deg, var(--primary-softer) 0%, var(--accent-soft) 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    margin-bottom: var(--sp-5);
}

.install-guide-hero-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border-radius: var(--r-lg);
    font-size: 1.85rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.install-guide-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-5);
    max-width: 720px;
    margin-inline: auto;
}

.install-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.5rem;
}

.install-tab {
    flex: 1;
    padding: 0.6rem 0.85rem;
    background: transparent;
    border: none;
    border-radius: var(--r-sm);
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--ink-muted);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}

.install-tab:hover {
    background: var(--surface-3);
    color: var(--ink-strong);
}

.install-tab.is-active {
    background: var(--primary-soft);
    color: var(--primary-ink);
}

.install-steps {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0 0 1.25rem 0;
}

.install-steps li {
    counter-increment: step;
    position: relative;
    padding: 0.8rem 0 0.8rem 3.1rem;
    border-bottom: 1px solid var(--line);
    line-height: 1.55;
    color: var(--ink);
}

.install-steps li:last-child {
    border-bottom: none;
}

.install-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0.8rem;
    width: 2.15rem;
    height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: var(--on-primary);
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.92rem;
}

.install-screenshot {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--line);
}

/* ───────────────────────────────────────────────────────────────────────────
   7. YARDIMCI SINIFLAR
   ─────────────────────────────────────────────────────────────────────────── */

.opacity-60 { opacity: 0.6; }

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-success { color: var(--ok) !important; }
.text-danger  { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-primary { color: var(--primary) !important; }
.text-muted   { color: var(--ink-muted) !important; }

.bg-light { background-color: var(--surface-3) !important; }
.bg-white { background-color: var(--surface) !important; }

.divider-y {
    border: 0;
    border-top: 1px solid var(--line);
    margin: var(--sp-4) 0;
}

.stack-sm > * + * { margin-top: var(--sp-2); }
.stack-md > * + * { margin-top: var(--sp-4); }

/* ───────────────────────────────────────────────────────────────────────────
   8. HAREKET & ERİŞİLEBİLİRLİK
   ─────────────────────────────────────────────────────────────────────────── */

.fade-up {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeUp 0.6s var(--ease) forwards;
}

.fade-up.delay-1 { animation-delay: 0.08s; }
.fade-up.delay-2 { animation-delay: 0.16s; }
.fade-up.delay-3 { animation-delay: 0.24s; }

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: none;
    }
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .fade-up,
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .card-hover:hover,
    .metric-card:hover,
    .today-chip:hover,
    .next-apt-card:hover,
    .dietitian-card:hover,
    .action-link:hover,
    .btn:active {
        transform: none !important;
    }
}

@media (prefers-contrast: more) {
    :root {
        --line: var(--slate-400);
        --line-strong: var(--slate-500);
        --ink-muted: var(--slate-700);
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   9. DUYARLI YERLEŞİM İNCE AYARLARI
   ─────────────────────────────────────────────────────────────────────────── */

@supports (padding: env(safe-area-inset-bottom)) {
    .panel-main { padding-bottom: env(safe-area-inset-bottom); }
    .sidebar { padding-bottom: env(safe-area-inset-bottom); }
    .footer-wrap { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 991.98px) {
    .topbar {
        position: sticky;
        padding: 0.45rem 0;
    }

    .nav-pills-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0.1rem;
        padding: 0.6rem 0;
        margin-top: 0.4rem;
        border-top: 1px solid var(--line);
    }

    .navbar .nav-link {
        padding: 0.6rem 0.85rem;
    }

    .navbar .nav-link.active::after {
        display: none;
    }

    .navbar-actions {
        padding-top: 0.7rem;
        border-top: 1px solid var(--line);
        flex-wrap: wrap;
    }
}

@media (max-width: 767.98px) {
    html {
        font-size: 15px;
    }

    body {
        line-height: 1.55;
    }

    .topbar .brand-mark {
        width: 142px;
        height: 44px;
    }

    .footer-wrap .brand-mark {
        width: 165px;
        height: 50px;
    }

    .main-content {
        padding: var(--sp-4) 0 var(--sp-6);
    }

    .metric-value {
        font-size: 1.32rem;
    }

    /* iOS Safari otomatik yakınlaştırmasını engelle */
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px;
    }

    /* Dokunma hedefleri — min 40-44px */
    .btn,
    .navbar-toggler,
    .sidebar-toggle,
    .lang-btn,
    .theme-toggle,
    .btn-close {
        min-height: 40px;
    }

    .btn-sm {
        min-height: 34px;
    }

    .sidebar-link {
        min-height: 42px;
    }

    .navbar .nav-link {
        min-height: 40px;
    }

    .panel-nav-btn,
    .panel-logout {
        min-height: 38px;
    }

    html, body {
        overflow-x: hidden;
    }

    .today-strip {
        scroll-padding-left: 0.5rem;
        scrollbar-width: none;
    }

    .today-strip::-webkit-scrollbar {
        display: none;
    }

    .today-chip {
        scroll-snap-align: start;
    }

    .calendar-grid {
        font-size: var(--text-xs);
        min-width: 600px;
    }

    .calendar-cell,
    .calendar-time-cell {
        height: 48px;
        min-height: 48px;
    }

    .calendar-cell.slot-booked {
        height: auto;
    }

    .calendar-event {
        min-height: 38px;
        padding: 3px 5px 3px 8px;
    }
}

@media (max-width: 575.98px) {
    .table tbody td {
        font-size: var(--text-xs);
        padding-block: 0.45rem;
    }

    .table thead th {
        font-size: 0.62rem;
        padding-block: 0.45rem;
    }

    .status-pill,
    .badge-scheduled,
    .badge-confirmed,
    .badge-completed,
    .badge-cancelled {
        font-size: 0.66rem;
        padding: 0.18rem 0.46rem;
    }

    .chat-msg {
        max-width: 86%;
    }
}

@media (max-width: 480px) {
    .panel-content {
        padding: 0.85rem;
    }

    .section-title {
        margin-bottom: 0.7rem;
    }

    .surface-card,
    .metric-card,
    .appointment-card {
        border-radius: var(--r-md);
    }

    .metric-card {
        padding: 0.85rem;
    }

    .metric-value {
        font-size: 1.22rem;
    }

    .modal-dialog {
        margin: 0.5rem;
    }

    .row.g-4 {
        --bs-gutter-y: 0.9rem;
        --bs-gutter-x: 0.9rem;
    }

    .sidebar {
        width: 86%;
        max-width: 290px;
    }

    .calendar-grid {
        font-size: 0.66rem;
        min-width: 520px;
    }

    .calendar-time-col {
        width: 44px;
    }

    .calendar-time-cell {
        font-size: 0.68rem;
        height: 44px;
    }

    .calendar-cell {
        min-height: 44px;
        height: 44px;
    }
}

@media (max-width: 360px) {
    .topbar .brand-mark {
        width: 126px;
        height: 40px;
    }

    .panel-content {
        padding: 0.7rem;
    }

    .surface-card.p-4,
    .surface-card.p-lg-4 {
        padding: 1rem !important;
    }

    .d-flex.flex-wrap.gap-2 > .btn {
        flex: 1 1 auto;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   10. YAZDIRMA
   ─────────────────────────────────────────────────────────────────────────── */

@media print {
    .topbar,
    .sidebar,
    .sidebar-overlay,
    .panel-topbar,
    .footer-wrap,
    .install-banner,
    .panel-tabs,
    .btn,
    .theme-toggle {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000;
    }

    .panel-main {
        margin-left: 0;
    }

    .surface-card,
    .metric-card,
    .appointment-card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
    }
}