/*
 * Htp kabuğu (P1.11) — Bootstrap 5.3 üstüne ince katman. Renkler tema değişkenlerinden (--htp-*, Htp:Branding → _Head içindeki :root bloğu);
 * burada marka rengi yok (DEC-006). color-mix: hover/active tonları birincil renkten türetilir.
 */
:root {
    --htp-primary-hover: color-mix(in srgb, var(--htp-primary) 85%, #000);
    --htp-primary-active: color-mix(in srgb, var(--htp-primary) 75%, #000);
    --htp-primary-subtle: color-mix(in srgb, var(--htp-primary) 12%, #fff);
    --htp-touch: 44px; /* mobil dokunma hedefi */
}

body.htp-body { background: var(--htp-bg); min-height: 100vh; }

/* Butonlar ve bileşenler tema rengini kullanır (Bootstrap'in derlenmiş --bs-btn-* değişkenleri) */
.btn-primary {
    --bs-btn-bg: var(--htp-primary); --bs-btn-border-color: var(--htp-primary);
    --bs-btn-hover-bg: var(--htp-primary-hover); --bs-btn-hover-border-color: var(--htp-primary-hover);
    --bs-btn-active-bg: var(--htp-primary-active); --bs-btn-active-border-color: var(--htp-primary-active);
    --bs-btn-disabled-bg: var(--htp-primary); --bs-btn-disabled-border-color: var(--htp-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--htp-primary); --bs-btn-border-color: var(--htp-primary);
    --bs-btn-hover-bg: var(--htp-primary); --bs-btn-hover-border-color: var(--htp-primary);
    --bs-btn-active-bg: var(--htp-primary-active); --bs-btn-active-border-color: var(--htp-primary-active);
}
.nav-tabs .nav-link.active { border-top: 3px solid var(--htp-primary); }
.form-check-input:checked { background-color: var(--htp-primary); border-color: var(--htp-primary); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--htp-primary); box-shadow: 0 0 0 .2rem rgba(var(--htp-primary-rgb), .25); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--htp-primary); }
.list-group { --bs-list-group-active-bg: var(--htp-primary); --bs-list-group-active-border-color: var(--htp-primary); }

/* Üst şerit */
.htp-topbar { background: var(--htp-topbar-bg); color: var(--htp-topbar-fg); }
.htp-topbar .navbar-brand, .htp-topbar .nav-link, .htp-topbar .htp-user { color: var(--htp-topbar-fg); }
.htp-topbar .nav-link { opacity: .85; }
.htp-topbar .nav-link:hover, .htp-topbar .nav-link.active { opacity: 1; color: var(--htp-topbar-fg); }
.htp-topbar .nav-link.active { font-weight: 600; box-shadow: inset 0 -3px 0 var(--htp-topbar-fg); }
.htp-brand { font-weight: 700; letter-spacing: .02em; }
.htp-logo { height: 28px; width: auto; }
.htp-role-badge { background: rgba(255, 255, 255, .18); color: var(--htp-topbar-fg); font-weight: 500; }
.htp-btn-topbar { color: var(--htp-topbar-fg); border: 1px solid rgba(255, 255, 255, .55); }
.htp-btn-topbar:hover, .htp-btn-topbar:focus { color: var(--htp-topbar-fg); background: rgba(255, 255, 255, .12); }

/* İçerik */
.htp-main h1 { font-size: 1.5rem; font-weight: 600; }
.htp-card { background: #fff; border: 1px solid rgba(0, 0, 0, .075); border-radius: .5rem; }
.htp-counter { font-size: 1.75rem; font-weight: 600; line-height: 1.1; }
.htp-counter-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); }
.htp-section-title { font-weight: 600; color: var(--bs-secondary-color); letter-spacing: .02em; }
.htp-empty-icon { font-size: 2rem; color: var(--bs-secondary-color); }
.htp-mono { font-family: var(--bs-font-monospace); font-size: .875em; word-break: break-all; }
.htp-secret-once { font-family: var(--bs-font-monospace); font-size: 1.15rem; letter-spacing: .06em; user-select: all; background: var(--htp-primary-subtle); }
.table > :not(caption) > * > * { vertical-align: middle; }
.htp-thumb { max-height: 72px; max-width: 140px; } /* ekran 10 sürüm önizlemesi */
.htp-pre { white-space: pre-wrap; max-width: 420px; font-size: .85rem; }
.htp-truncate { display: inline-block; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* ekran 03 kaynak notu */

/* Kimlik (giriş/MFA) kartı */
.htp-auth-card { max-width: 440px; margin: 2rem auto; }
.htp-qr { width: 220px; margin: 1rem auto; }
.htp-qr svg { width: 100%; height: auto; display: block; }
code.htp-key { font-size: 1.05rem; letter-spacing: .08em; user-select: all; }

/* Mobil kabuk: tek kolon, büyük dokunma alanları, alt aksiyon çubuğu */
.htp-mobile-column { max-width: 560px; margin-left: auto; margin-right: auto; width: 100%; }
.htp-mobile .btn, .htp-mobile .form-control, .htp-mobile .form-select { min-height: var(--htp-touch); }
.htp-mobile .form-control, .htp-mobile .form-select { font-size: 1rem; }
.htp-mobile.htp-has-actions .htp-main { padding-bottom: calc(var(--htp-touch) + 2rem) !important; }
.htp-bottom-bar { background: #fff; border-top: 1px solid rgba(0, 0, 0, .1); box-shadow: 0 -2px 8px rgba(0, 0, 0, .06); }
.htp-bottom-bar .btn { flex: 1; }

/* Ekran 14 Yardım (P3.13): Markdig çıktısı */
.htp-help-link { min-width: 2rem; font-weight: 700; }
.htp-help h2 { font-size: 1.15rem; font-weight: 600; margin-top: 1.5rem; }
.htp-help h3 { font-size: 1rem; font-weight: 600; margin-top: 1.25rem; }
.htp-help table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; font-size: .925rem; }
.htp-help th, .htp-help td { border: 1px solid rgba(0, 0, 0, .1); padding: .35rem .5rem; vertical-align: top; }
.htp-help th { background: var(--htp-primary-subtle, #f1f5f5); }
.htp-help li + li { margin-top: .2rem; }

/* Ekran 05A Konuşma (P3.08): hasta solda, AI/danışman sağda, sistem olayları ortada ince; akış kendi içinde kayar */
.htp-anchor { scroll-margin-top: .5rem; } /* P3.08b: PRG dönüşü #konusma'ya iner; akış yüksekliği başlık + akış + yazma kutusu tek ekrana sığacak kadar */
.htp-feed { list-style: none; margin: 0; padding: .75rem; max-height: max(16rem, calc(100vh - 25rem)); overflow-y: auto; background: var(--htp-bg); border: 1px solid rgba(0, 0, 0, .075); border-radius: .5rem; }
.htp-msg { max-width: 78%; margin-bottom: .6rem; }
.htp-msg-in { margin-right: auto; }
.htp-msg-out { margin-left: auto; }
.htp-msg-system { margin-left: auto; margin-right: auto; max-width: 85%; text-align: center; }
.htp-msg-meta { font-size: .75rem; color: var(--bs-secondary-color); margin-bottom: .15rem; }
.htp-msg-out .htp-msg-meta { text-align: right; }
.htp-bubble { padding: .45rem .75rem; border-radius: .75rem; white-space: pre-wrap; overflow-wrap: anywhere; background: #fff; border: 1px solid rgba(0, 0, 0, .08); }
.htp-msg-in .htp-bubble { border-top-left-radius: .2rem; }
.htp-msg-out .htp-bubble { background: var(--htp-primary-subtle); border-top-right-radius: .2rem; }
.htp-msg-system .htp-bubble { background: transparent; border-style: dashed; font-size: .875rem; }
.htp-bubble-media { font-style: italic; color: var(--bs-secondary-color); }
.htp-bubble-draft { background: #fffbe6; }
.htp-feed-event { text-align: center; font-size: .78rem; color: var(--bs-secondary-color); margin: .5rem auto; max-width: 90%; }