/* ============================================================
   KLİNİK — Dr. Rengin Türkgüler | Clinical Precision tasarım sistemi
   ============================================================ */

:root {
  /* Kurumsal kimlik — drrengin.com (Montserrat, #039BE5 mavi, #25B981 yeşil) */
  --surface: #f7f9fa;
  --surface-dim: #d5dde1;
  --surface-lowest: #ffffff;
  --surface-low: #f0f4f6;
  --surface-container: #e7ecef;
  --surface-high: #dfe6ea;
  --surface-highest: #d6dfe4;
  --on-surface: #141516;
  --on-surface-variant: #484848;
  --outline: #6b6b7e;
  --outline-variant: #c3ccd2;
  --primary: #0288c7;
  --on-primary: #ffffff;
  --primary-container: #039be5;
  --on-primary-container: #01466b;
  --secondary: #0f9c6b;
  --secondary-container: #a9f0d4;
  --tertiary: #0b1d38;
  --error: #ba1a1a;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
  --vibrant-cyan: #00a5d9;
  --mint-green: #25b981;
  --deep-azure: #039be5;
  --surface-light: #f7f9fa;
  --stroke-soft: #e7ecef;

  /* Alan renkleri */
  --c-usg: #2563eb;
  --c-varis: #dc2626;
  --c-biyopsi: #8b5cf6;
  --c-mezo: #f59e0b;
  --c-muayene: #0891b2;
  --c-diger: #64748b;

  --shadow-1: 0px 4px 12px rgba(3, 155, 229, 0.06);
  --shadow-2: 0px 12px 32px rgba(3, 155, 229, 0.14);

  --font-head: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Montserrat", "Segoe UI", system-ui, sans-serif;

  --r-sm: 0.25rem; --r: 0.5rem; --r-md: 0.75rem; --r-lg: 1rem; --r-xl: 1.5rem;
  --sidebar-w: 264px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.45;
}
/* Boyut verilmemiş her SVG ikon için güvenli varsayılan (taşmayı önler) */
svg { width: 16px; height: 16px; flex-shrink: 0; }
h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; }
h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 17px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
a { color: var(--primary); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: 9px; }
::-webkit-scrollbar-track { background: transparent; }

.mono { font-family: var(--font-mono); }
.label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--outline);
}
.muted { color: var(--on-surface-variant); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }

/* ---------- Yerleşim ---------- */
#app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--surface-lowest);
  border-right: 1px solid var(--stroke-soft); padding: 16px 12px;
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 16px; }
.brand img { width: 36px; height: 31px; flex-shrink: 0; }
.brand .t1 { font-family: var(--font-head); font-weight: 800; font-size: 12.5px; color: var(--primary); line-height: 1.15; letter-spacing: 0.02em; }
.brand .t2 { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.16em; color: var(--outline); margin-top: 2px; }

.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: var(--r); color: var(--on-surface-variant);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  cursor: pointer; border: none; background: none; text-align: left; width: 100%;
  text-decoration: none;
}
.nav-item:hover { background: var(--surface-low); color: var(--primary); }
.nav-item.active { background: var(--surface-container); color: var(--primary); font-weight: 700; }
.nav-item svg { width: 16px; height: 16px; }
.sidebar .spacer { flex: 1; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 14px; padding: 9px 22px;
  background: var(--surface-lowest); border-bottom: 1px solid var(--stroke-soft);
  position: sticky; top: 0; z-index: 40;
}
.topbar .search { flex: 1; max-width: 460px; position: relative; }
.topbar .search input { padding: 8px 12px 8px 34px; border-radius: 999px; background: var(--surface-light); font-size: 13px; }
.topbar .search .s-ikon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--outline); display: inline-flex; }
.topbar .search .s-ikon svg { width: 15px; height: 15px; }
.topbar .who { margin-left: auto; text-align: right; }
.topbar .who .n { font-family: var(--font-head); font-weight: 700; font-size: 12.5px; }
.topbar .who .r { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--outline); text-transform: uppercase; }

.content { padding: 22px 24px 80px; max-width: 1280px; width: 100%; margin: 0 auto; }

/* ---------- Kartlar ---------- */
.card {
  background: var(--surface-lowest); border: 1px solid var(--stroke-soft);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.card .card-head {
  display: flex; align-items: center; gap: 8px; padding: 11px 16px;
  border-bottom: 1px solid var(--stroke-soft);
}
.card .card-head h3 { flex: 1; }
.card .card-head > svg { color: var(--outline); }
.card .card-body { padding: 14px 16px; }
.card.accent { border-left: 3px solid var(--primary); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.stat {
  background: var(--surface-lowest); border: 1px solid var(--stroke-soft);
  border-left: 3px solid var(--primary); border-radius: var(--r-md);
  padding: 12px 14px; box-shadow: var(--shadow-1);
}
.stat .v { font-family: var(--font-head); font-size: 21px; font-weight: 700; margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.stat.red { border-left-color: var(--error); }
.stat.green { border-left-color: var(--mint-green); }
.stat.cyan { border-left-color: var(--primary-container); }

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r); border: 1px solid transparent;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: all .15s; white-space: nowrap;
}
.btn svg { width: 14px; height: 14px; }
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 4px 14px rgba(0, 103, 129, 0.25); }
.btn-primary:hover { background: linear-gradient(135deg, #0a86a5, var(--primary)); }
.btn-cyan { background: var(--primary-container); color: #003544; box-shadow: 0 4px 14px rgba(21, 191, 237, 0.3); }
.btn-cyan:hover { filter: brightness(1.05); }
.btn-ghost { background: transparent; border-color: var(--outline-variant); color: var(--tertiary); }
.btn-ghost:hover { background: var(--surface-low); border-color: var(--tertiary); }
.btn-soft { background: var(--surface-container); color: var(--primary); }
.btn-soft:hover { background: var(--surface-high); }
.btn-danger { background: var(--error-container); color: var(--on-error-container); }
.btn-danger:hover { background: #ffc4bd; }
.btn-sm { padding: 5px 10px; font-size: 11px; }
.btn-sm svg { width: 13px; height: 13px; }
.btn-icon { padding: 7px; border-radius: var(--r); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-wa { background: #dcf8e7; color: #075e54; }
.btn-wa:hover { background: #c3f2d6; }

/* ---------- Rozetler ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
  border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.03em;
}
.chip svg { width: 12px; height: 12px; }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-usg { background: rgba(37, 99, 235, .16); color: #1d4ed8; }
.chip-varis { background: rgba(220, 38, 38, .16); color: #c81e1e; }
.chip-biyopsi { background: rgba(139, 92, 246, .18); color: #6d28d9; }
.chip-mezo { background: rgba(245, 158, 11, .2); color: #b45309; }
.chip-muayene { background: rgba(8, 145, 178, .16); color: #0e7490; }
.chip-diger { background: rgba(100, 116, 139, .18); color: #475569; }
.chip-green { background: rgba(15, 156, 107, .2); color: #0b7a53; }
.chip-yellow { background: rgba(245, 158, 11, .22); color: #a15c07; }
.chip-red { background: rgba(220, 38, 38, .16); color: #c81e1e; }
.chip-gray { background: var(--surface-container); color: var(--on-surface-variant); }
.chip-cyan { background: rgba(2, 136, 199, .18); color: #026aa0; }

/* ---------- Form ---------- */
label.f { display: block; margin-bottom: 14px; }
label.f > span, .f-title {
  display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-surface-variant);
  margin-bottom: 4px;
}
.f-title { margin: 10px 0 8px; }
input, select, textarea {
  width: 100%; padding: 8px 11px; border: 1px solid var(--stroke-soft);
  border-radius: var(--r); font-family: var(--font-body); font-size: 13.5px;
  color: var(--on-surface); background: var(--surface-lowest); outline: none;
  transition: border .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 103, 129, 0.14);
}
textarea { resize: vertical; min-height: 84px; }
input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--primary); }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; margin-bottom: 12px; cursor: pointer; }
.check input { width: auto; margin-top: 2px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }
@media (max-width: 720px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* ---------- Tablo ---------- */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-surface-variant);
  padding: 8px 14px; background: var(--surface-low); border-bottom: 1px solid var(--stroke-soft);
}
td { padding: 9px 14px; border-bottom: 1px solid var(--stroke-soft); font-size: 13px; vertical-align: middle; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--surface-light); }

/* ---------- Sekmeler ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--stroke-soft); margin-bottom: 20px; overflow-x: auto; }
.tab {
  padding: 9px 13px; border: none; background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  color: var(--on-surface-variant); border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.tab svg { width: 14px; height: 14px; }
.tab:hover { color: var(--primary); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ---------- Zaman çizelgesi ---------- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--surface-highest); }
.tl-item { position: relative; padding-bottom: 22px; }
.tl-item::before {
  content: ""; position: absolute; left: -25px; top: 5px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--primary-container); border: 2.5px solid var(--surface-lowest);
  box-shadow: 0 0 0 2px var(--primary-container);
}
.tl-item.red::before { background: var(--c-varis); box-shadow: 0 0 0 2px var(--c-varis); }
.tl-item.purple::before { background: var(--c-biyopsi); box-shadow: 0 0 0 2px var(--c-biyopsi); }
.tl-item.amber::before { background: var(--c-mezo); box-shadow: 0 0 0 2px var(--c-mezo); }
.tl-item.blue::before { background: var(--c-usg); box-shadow: 0 0 0 2px var(--c-usg); }
.tl-date { font-family: var(--font-mono); font-size: 10.5px; color: var(--outline); }
.tl-title { font-family: var(--font-head); font-weight: 700; font-size: 13px; margin: 2px 0; }

/* ---------- Modal ---------- */
.modal-bg {
  /* z-index, "Ana ekrana ekle" bandından (300) yüksek olmalı; aksi hâlde bant
     pencerenin üstüne biniyor ve tablette pencere görünmüyor sanılıyordu. */
  position: fixed; inset: 0; background: rgba(13, 28, 46, .45); z-index: 400;
  display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px;
  overflow-y: auto;
}
.modal {
  background: var(--surface-lowest); border-radius: var(--r-xl); box-shadow: var(--shadow-2);
  width: 100%; max-width: 640px; max-height: 92vh; display: flex; flex-direction: column;
}
.modal.wide { max-width: 980px; }
.modal-head { display: flex; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--stroke-soft); }
.modal-head h2 { flex: 1; font-size: 15px; }
.modal-body { padding: 16px 20px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--stroke-soft); flex-wrap: wrap; }

/* ---------- Toast ---------- */
#toasts { position: fixed; bottom: 22px; right: 22px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--on-surface); color: #eaf1ff; padding: 12px 18px; border-radius: var(--r-md);
  font-size: 14px; box-shadow: var(--shadow-2); animation: toastIn .25s ease;
  display: flex; align-items: center; gap: 10px; max-width: 380px;
}
.toast.ok { border-left: 4px solid var(--mint-green); }
.toast.err { border-left: 4px solid #ff8a80; }
@keyframes toastIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Boş durum ---------- */
.empty { text-align: center; padding: 34px 20px; color: var(--outline); font-size: 12.5px; }
.empty svg { width: 28px; height: 28px; margin-bottom: 8px; opacity: .45; }

/* ---------- Venöz haritalama ---------- */
.map-wrap { position: relative; background: #fff; border: 1px solid var(--stroke-soft); border-radius: var(--r-lg); overflow: hidden; touch-action: none; }
.map-wrap canvas { display: block; width: 100%; height: auto; touch-action: none; }
.map-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 12px; background: var(--surface-lowest); border: 1px solid var(--stroke-soft);
  border-radius: var(--r-lg); margin-bottom: 12px; box-shadow: var(--shadow-1);
}
.tool-btn {
  width: 40px; height: 40px; border-radius: var(--r); border: 1px solid var(--stroke-soft);
  background: var(--surface-lowest); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; color: var(--on-surface-variant);
}
.tool-btn svg { width: 19px; height: 19px; }
.tool-btn:hover { border-color: var(--primary); color: var(--primary); }
.tool-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.color-dot { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--outline-variant); cursor: pointer; padding: 0; }
.color-dot.active { box-shadow: 0 0 0 3px var(--on-surface); transform: scale(1.12); }
.tsep { width: 1px; height: 26px; background: var(--stroke-soft); margin: 0 4px; }
.map-wrap.not-modu canvas#cnv-cizim { cursor: crosshair; }

/* Bacak rozeti (toolbar) + "hangi bacak?" seçimi */
.bacak-rozet.secili { background: var(--primary); color: #fff; border-color: var(--primary); }
.bacak-rozet.uyari { background: #fef3c7; color: #92400e; border-color: #f59e0b; animation: recyanip 1.4s steps(2) infinite; }
.bacak-sec { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.btn-lg { padding: 18px 12px; font-size: 14px; flex-direction: column; }
@media (max-width: 560px) { .bacak-sec { grid-template-columns: 1fr; } }

/* Fotoğraf yokken boş durum çağrısı */
.harita-bos {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center;
  padding: 24px; background: repeating-linear-gradient(45deg, #f7f9fa, #f7f9fa 14px, #eef2f5 14px, #eef2f5 28px);
}
.harita-bos svg { width: 46px; height: 46px; color: var(--primary); }
.map-wrap { min-height: 260px; }

/* Not iğneleri katmanı (çizim canvasının üstünde) */
#not-katman, .harita-pinler { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.not-pin {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px;
  background: #039be5; color: #fff; border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.35);
  font: 700 13px/1 Montserrat, sans-serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.not-pin.sesli { background: #7c3aed; }
.not-pin:hover { filter: brightness(1.08); transform: translate(-50%, -50%) scale(1.08); }

/* Kamera modalı */
.kamera-kap { background: #000; border-radius: var(--r-md); overflow: hidden; display: flex; justify-content: center; }
.kamera-kap video { width: 100%; max-height: 62vh; object-fit: contain; display: block; }
.rec-nokta { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #fff; margin-right: 5px; animation: recyanip 1s steps(2) infinite; vertical-align: middle; }
@keyframes recyanip { 50% { opacity: .25; } }

/* Kaydedilmiş harita önizleme + not listesi */
.harita-onizleme { position: relative; }
.not-liste { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.not-satir { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--surface-light); border-radius: 10px; transition: background .3s; }
.not-satir.vurgu { background: rgba(3,155,229,.16); }
.not-no { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: #039be5; color: #fff; font: 700 12px/24px Montserrat, sans-serif; text-align: center; }
.not-no.sesli { background: #7c3aed; }

/* ---------- Galeri ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.photo {
  position: relative; border-radius: var(--r-md); overflow: hidden; border: 2px solid var(--stroke-soft);
  cursor: pointer; background: var(--surface-light); aspect-ratio: 3/4;
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo.sel { border-color: var(--primary-container); box-shadow: 0 0 0 3px rgba(21,191,237,.35); }
.photo .tag {
  position: absolute; left: 8px; top: 8px; background: rgba(13, 28, 46, .78); color: #fff;
  font-family: var(--font-mono); font-size: 10.5px; padding: 3px 8px; border-radius: 999px;
}
.photo .del {
  position: absolute; right: 6px; top: 6px; background: rgba(13,28,46,.6); border: none; color: #fff;
  border-radius: 50%; width: 26px; height: 26px; cursor: pointer; display: none;
  align-items: center; justify-content: center;
}
.photo:hover .del { display: inline-flex; }
.photo .dt {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px;
  background: linear-gradient(transparent, rgba(13,28,46,.75)); color: #fff;
  font-family: var(--font-mono); font-size: 10.5px;
}

/* Karşılaştırma slider */
.ba-wrap { position: relative; overflow: hidden; border-radius: var(--r-lg); user-select: none; background: #0d1c2e; }
.ba-wrap img { display: block; width: 100%; pointer-events: none; }
.ba-after { position: absolute; inset: 0; overflow: hidden; }
.ba-line { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; cursor: ew-resize; box-shadow: 0 0 8px rgba(0,0,0,.5); }
.ba-line::after {
  content: "◂ ▸"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: #fff; color: var(--primary); border-radius: 999px; padding: 6px 9px;
  font-size: 12px; white-space: nowrap; box-shadow: var(--shadow-2);
}
.ba-badge {
  position: absolute; top: 12px; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  background: rgba(13,28,46,.72); color: #fff; padding: 4px 12px; border-radius: 999px;
}

/* ---------- Takvim ---------- */
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.cal-day { background: var(--surface-lowest); border: 1px solid var(--stroke-soft); border-radius: var(--r-md); min-height: 150px; padding: 8px; }
.cal-day.today { border-color: var(--primary-container); box-shadow: 0 0 0 2px rgba(21,191,237,.25); }
.cal-day .dh { text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--outline); text-transform: uppercase; }
.cal-day .dn { text-align: center; font-family: var(--font-head); font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.cal-day.today .dn { color: var(--primary); }
.cal-ev {
  border-left: 3px solid var(--c-diger); background: var(--surface-light);
  border-radius: var(--r-sm); padding: 4px 7px; margin-bottom: 5px; font-size: 11.5px; cursor: pointer;
}
.cal-ev:hover { background: var(--surface-low); }
.cal-ev .t { font-family: var(--font-mono); font-weight: 700; font-size: 10.5px; }
.cal-ev.usg { border-left-color: var(--c-usg); }
.cal-ev.varis { border-left-color: var(--c-varis); }
.cal-ev.biyopsi { border-left-color: var(--c-biyopsi); }
.cal-ev.mezo { border-left-color: var(--c-mezo); }
.cal-ev.muayene { border-left-color: var(--c-muayene); }
.cal-ev.iptal { opacity: .45; text-decoration: line-through; }

/* Aylık görünüm */
.cal-ay-baslik {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--outline); text-align: center;
}
.cal-ay { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-ay-hucre {
  background: var(--surface-lowest); border: 1px solid var(--stroke-soft); border-radius: var(--r);
  min-height: 86px; padding: 5px 6px; cursor: pointer; overflow: hidden;
}
.cal-ay-hucre:hover { border-color: var(--primary-container); }
.cal-ay-hucre.disari { opacity: .38; background: var(--surface-light); }
.cal-ay-hucre.today { border-color: var(--primary-container); box-shadow: 0 0 0 2px rgba(3,155,229,.22); }
.cal-ay-hucre .no { font-family: var(--font-head); font-weight: 700; font-size: 12px; margin-bottom: 3px; }
.cal-ay-hucre.today .no { color: var(--primary); }
.cal-ay-hucre .mini {
  font-size: 9.5px; line-height: 1.35; padding: 1px 4px; margin-bottom: 2px;
  border-left: 2px solid var(--c-diger); background: var(--surface-light); border-radius: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-ay-hucre .mini.usg { border-left-color: var(--c-usg); }
.cal-ay-hucre .mini.varis { border-left-color: var(--c-varis); }
.cal-ay-hucre .mini.biyopsi { border-left-color: var(--c-biyopsi); }
.cal-ay-hucre .mini.mezo { border-left-color: var(--c-mezo); }
.cal-ay-hucre .mini.muayene { border-left-color: var(--c-muayene); }
.cal-ay-hucre .mini.iptal { opacity: .45; text-decoration: line-through; }
@media (max-width: 900px) {
  .cal-ay-hucre { min-height: 54px; }
  .cal-ay-hucre .mini { display: none; }
  .cal-ay-hucre .no::after { content: ""; }
}

/* ---------- Hasta başlığı ---------- */
.avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--primary-container);
  color: #00344a; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 13px; flex-shrink: 0;
}
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 18px; }
.page-head .grow { flex: 1; min-width: 200px; }

.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mt { margin-top: 16px; } .mb { margin-bottom: 16px; }

/* ---------- WhatsApp arşivi ---------- */
.wa-kutu {
  background: #e9e2d5; border: 1px solid var(--stroke-soft); border-radius: var(--r-lg);
  padding: 14px; max-height: 65vh; overflow-y: auto;
}
.wa-gun { text-align: center; margin: 10px 0 8px; }
.wa-gun span {
  background: rgba(255,255,255,.85); border-radius: 999px; padding: 3px 12px;
  font-size: 10.5px; font-weight: 600; color: var(--on-surface-variant);
}
.wa-satir { display: flex; margin-bottom: 5px; }
.wa-satir.ben { justify-content: flex-end; }
.wa-balon {
  max-width: 72%; background: #fff; border-radius: 10px; padding: 6px 10px 4px;
  box-shadow: 0 1px 1px rgba(0,0,0,.08); font-size: 12.5px; position: relative;
}
.wa-satir.ben .wa-balon { background: #d5f1fd; }
.wa-kim { font-size: 10.5px; font-weight: 700; color: var(--primary); margin-bottom: 2px; }
.wa-metin { white-space: pre-wrap; word-break: break-word; }
.wa-saat { font-size: 9px; color: var(--outline); text-align: right; margin-top: 2px; }
.wa-img { max-width: 240px; width: 100%; border-radius: 8px; display: block; margin: 3px 0; cursor: zoom-in; }
.wa-ek {
  background: var(--surface-light); border-radius: 8px; padding: 6px 9px; margin: 3px 0;
  font-size: 11.5px; cursor: pointer;
}

#rnd-hasta-ac:hover { background: var(--surface-light) !important; }
#rnd-hasta-ac:hover .chip-cyan { background: var(--primary); color: #fff; }

/* ---------- Dijital onam imzası (tablet) ---------- */
.imza-kimlik { background: var(--surface-light); border-radius: 8px; padding: 8px 12px; font-size: 12.5px; margin-bottom: 10px; }
.imza-kimlik b { color: var(--primary); }
.imza-form { border: 1px solid var(--stroke-soft); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.imza-form h3 { font-size: 13.5px; color: var(--primary); margin: 0 0 8px; }
.imza-metin { max-height: 240px; overflow-y: auto; border: 1px solid var(--stroke-soft); border-radius: 8px;
              padding: 10px 12px; font-size: 12.5px; line-height: 1.5; background: var(--surface); margin-bottom: 10px; }
.imza-metin h3 { font-size: 12.5px; color: var(--primary); margin: 8px 0 3px; }
.imza-metin p, .imza-metin li { margin: 0 0 6px; }
.imza-metin ul { padding-left: 18px; margin: 0 0 6px; }
.imza-kap { position: relative; border: 2px dashed var(--outline-variant); border-radius: 12px;
            background: #fff; height: 190px; touch-action: none; overflow: hidden; }
.imza-kap canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.imza-ipucu { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
              color: var(--outline); font-size: 14px; pointer-events: none; }
@media (max-width: 900px) { .imza-kap { height: 220px; } .imza-metin { max-height: 200px; } }

/* ---------- Takvim (.ics) içe aktarma tablosu ---------- */
.ics-tablo { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ics-tablo th { position: sticky; top: 0; background: var(--surface-lowest); text-align: left; padding: 8px 6px; border-bottom: 2px solid var(--stroke-soft); font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--on-surface-variant); z-index: 1; }
.ics-tablo td { padding: 7px 6px; border-bottom: 1px solid var(--stroke-soft); vertical-align: top; }
.ics-tablo input, .ics-tablo select { padding: 6px 8px; font-size: 12.5px; }
.ics-tablo .ics-durum { margin-top: 3px; }

/* ---------- PWA "Ana Ekrana Ekle" ipucu ---------- */
.pwa-banner {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 300;
  background: var(--surface-lowest); border: 1px solid var(--stroke-soft);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 12px 14px;
  display: flex; align-items: center; gap: 12px; max-width: 520px; margin: 0 auto;
  animation: toastIn .25s ease;
}
.pwa-banner img { width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; }
.pwa-banner .m { flex: 1; font-size: 12.5px; line-height: 1.4; }
.pwa-banner .m b { display: block; font-size: 13.5px; }
.pwa-banner .kapat { background: none; border: none; color: var(--outline); cursor: pointer; font-size: 20px; line-height: 1; padding: 2px 4px; }
@media (min-width: 901px) { .pwa-banner { display: none; } }
/* Bir pencere açıkken bant gizlenir (üstüne binmesin) */
body.modal-acik .pwa-banner { display: none; }


/* ---------- Mobil ---------- */
.bottom-nav { display: none; }
@media (max-width: 900px) {
  .sidebar { display: none; }
  .content { padding: 18px 14px 90px; }
  .topbar { padding: 10px 14px; }
  .topbar .who .r { display: none; }
  .bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    background: var(--surface-lowest); border-top: 1px solid var(--stroke-soft);
    justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .bottom-nav .nav-item { flex-direction: column; gap: 3px; font-size: 10px; padding: 6px 10px; width: auto; color: var(--on-surface-variant); }
  .bottom-nav .nav-item.active { color: var(--primary); }
  .bottom-nav .nav-item svg { width: 21px; height: 21px; }
  .cal-week { grid-template-columns: 1fr; }
  .cal-day { min-height: unset; }

  /* Dokunmatik hedefleri büyüt */
  body { font-size: 14.5px; }
  .btn { padding: 10px 15px; font-size: 12.5px; }
  .btn-sm { padding: 8px 12px; font-size: 12px; }
  .tab { padding: 11px 14px; font-size: 12.5px; }
  .tabs { gap: 2px; -webkit-overflow-scrolling: touch; }

  /* Haritalama araç çubuğu — dokunmatik dostu */
  .map-toolbar { gap: 7px; padding: 10px; position: sticky; top: 0; z-index: 5; }
  .tool-btn { width: 46px; height: 46px; }
  .tool-btn svg { width: 22px; height: 22px; }
  .color-dot { width: 38px; height: 38px; }
  .map-wrap { min-height: 320px; }
  .not-pin { min-width: 32px; height: 32px; font-size: 15px; }

  /* Modal — tam ekrana yakın */
  .modal-bg { padding: 0; align-items: flex-end; }
  .modal, .modal.wide { max-width: 100%; max-height: 94vh; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .modal-head { padding: 16px 18px; }
  .modal-head h2 { font-size: 16px; }
  .modal-body { padding: 16px 18px; }
  .modal-foot { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex: 1; min-width: 44%; padding: 12px; font-size: 13px; }

  /* Tablolar taşmasın */
  .card { overflow-x: auto; }
  #toasts { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); }
  .toast { max-width: none; }
}
@media (max-width: 560px) {
  .content { padding: 14px 10px 92px; }
  .page-head h1 { font-size: 19px; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .modal-foot { flex-direction: column-reverse; }
  .modal-foot .btn { width: 100%; }
  .modal-foot .btn[style*="margin-right:auto"] { margin-right: 0 !important; }
}

@media print {
  .sidebar, .topbar, .bottom-nav, .btn, .tabs { display: none !important; }
  .content { padding: 0; }
  .card { box-shadow: none; }
}

/* ---------- Zengin metin editörü (rapor) ---------- */
div.f { display: block; margin-bottom: 14px; }
div.f > span {
  display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-surface-variant);
  margin-bottom: 4px;
}
.zengin-arac {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  border: 1px solid var(--stroke-soft); border-bottom: none;
  border-radius: var(--r) var(--r) 0 0; background: var(--surface-light); padding: 4px 6px;
}
.zengin-arac button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 26px; border: none; border-radius: 5px;
  background: transparent; color: var(--on-surface); cursor: pointer;
  font-size: 13px; font-family: var(--font-body); padding: 0;
}
.zengin-arac button:hover { background: rgba(3, 155, 229, 0.12); color: var(--primary); }
.zengin-arac button svg { width: 15px; height: 15px; }
.zengin-arac .ayrac { width: 1px; height: 16px; background: var(--stroke-soft); margin: 0 4px; }
.zengin-editor {
  min-height: 260px; max-height: 55vh; overflow-y: auto;
  border: 1px solid var(--stroke-soft); border-radius: 0 0 var(--r) var(--r);
  padding: 10px 12px; font-family: var(--font-body); font-size: 14px; line-height: 1.55;
  color: var(--on-surface); background: var(--surface-lowest); outline: none;
}
.zengin-editor:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 103, 129, 0.14); }
.zengin-editor ul, .zengin-editor ol { margin: 4px 0; padding-left: 22px; }
/* Rapor biçimi: her paragrafın ilk satırı içeriden, 1,5 satır aralığı.
   Ortalanmış başlık satırları (style="text-align:center") girintisiz kalır. */
/* Editör, antetli çıktının aynısını göstersin: A4 metin sütunu genişliğinde
   (11,5 punto ile satır başına düşen karakter sayısı kabaca aynı olur),
   iki yana yaslı, 1,5 satır aralıklı, paragraf başları içeriden. */
.zengin-editor { line-height: 1.5; text-align: justify; padding: 18px 14px; }
.zengin-editor > * { max-width: 70ch; }
.zengin-editor p, .zengin-editor div { margin: 0 auto; }
.zengin-editor p:not([style*="center"]), .zengin-editor div:not([style*="center"]) { text-indent: 2.4em; }
.zengin-editor li { text-indent: 0; }
/* Zengin rapor görüntüleme (hasta dosyası) */
.rapor-goruntule {
  font-size: 13.5px; background: var(--surface-light); padding: 12px;
  border-radius: 8px; margin: 6px 0 0; line-height: 1.55;
}
.rapor-goruntule ul, .rapor-goruntule ol { margin: 4px 0; padding-left: 22px; }
.rapor-goruntule { line-height: 1.5; text-align: justify; }
.rapor-goruntule p, .rapor-goruntule div { margin: 0; }
.rapor-goruntule p:not([style*="center"]), .rapor-goruntule div:not([style*="center"]) { text-indent: 2.4em; }
.rapor-goruntule li { text-indent: 0; }

/* ---------- Tedavi onam kilidi / bandı ---------- */
.onam-uyari {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; margin: 0 0 2px; font-size: 13px; line-height: 1.5;
}
.onam-uyari svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.onam-uyari.kilit { background: rgba(220, 38, 38, .07); border-top: 1px solid rgba(220,38,38,.2); border-bottom: 1px solid rgba(220,38,38,.2); color: #7f1d1d; }
.onam-uyari.kilit svg { color: #dc2626; }
.onam-uyari.tamam { background: rgba(37, 185, 129, .09); border-top: 1px solid rgba(37,185,129,.25); color: #14532d; }
.onam-uyari.tamam svg { color: var(--secondary); }
.onam-btnlar { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.card.karti-kilit { border-left: 3px solid #dc2626; }
.onam-uyari .lnk { background: none; border: none; color: var(--primary); cursor: pointer; padding: 0 0 0 4px; font: inherit; text-decoration: underline; }

/* Islak imza zorunluluğu uyarısı */
.islak-uyari {
  background: #fef3c7; border: 1px solid #f59e0b; color: #92400e;
  border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; margin: 0 0 12px;
}

/* WhatsApp panel içi yanıt kutusu */
.wa-yanit { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.wa-yanit textarea { flex: 1; min-height: 44px; resize: vertical; }
@media (max-width: 560px) { .wa-yanit { flex-direction: column; align-items: stretch; } }

/* Otomatik taslak kaydı: modal alt satırındaki hata metni */
.err-metin { color: #c81e1e; }

/* ---- Kullanıcı kimliği ve ekran filigranı ---- */
.nav-kullanici {
  padding: 10px 14px; margin: 4px 8px 0; border-radius: 10px;
  background: var(--surface-container); display: flex; flex-direction: column; gap: 1px;
}
.nav-kullanici b { font-size: 12.5px; color: var(--on-surface); }
.nav-kullanici span { font-size: 10.5px; color: var(--on-surface-variant); }

/* Filigran: tıklamaları geçirir, yazdırmada da görünür (sızıntı izi) */
#filigran {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font: 600 13px/1 var(--font-body); color: rgba(2, 132, 199, .07);
  letter-spacing: .5px; overflow: hidden; text-align: center;
  transform: rotate(-24deg); white-space: pre;
}
#filigran::before, #filigran::after {
  content: attr(data-damga); position: absolute; left: 0; right: 0;
}
#filigran::before { top: 22%; }
#filigran::after { bottom: 22%; }
@media print { #filigran { color: rgba(0, 0, 0, .08); } }

/* Yetkisiz kullanıcıdan gizlenen bölümler.
   NOT: Bu yalnızca arayüz kolaylığıdır — gerçek engel sunucudadır (api.php).
   CSS'i kurcalayan biri düğmeyi görebilir ama sunucu isteği 403 ile reddeder. */
body[data-rol="raportor"] [data-yetki="yedek_al"],
body[data-rol="raportor"] [data-yetki="denetim"],
/* Raportör rapor yazar ama silemez; yanlış raporu Rengin siler. */
body[data-rol="raportor"] [data-yetki="rapor_sil"] { display: none !important; }

body:not([data-rol="yonetici"]) [data-yetki="ayarlar"],
body:not([data-rol="yonetici"]) [data-yetki="kullanicilar"],
body:not([data-rol="yonetici"]) [data-yetki="yedek_yukle"] { display: none !important; }

/* ---- Hasta listesi tablosu ----
   Sütun sayısı fazla: tarih/durum sütunları tek satırda kalsın, artan genişliği
   ad sütunu alsın ama sınırsız büyümesin. */
.hasta-tablo th, .hasta-tablo td { white-space: nowrap; }
.hasta-tablo .h-ad { white-space: normal; width: 34%; min-width: 200px; }
.hasta-tablo td, .hasta-tablo th { padding-left: 10px; padding-right: 10px; }

/* ---- Galeri: karşılaştırma seçim dairesi ----
   Fotoğrafa tıklamak büyüttüğü için seçim ayrı bir hedefte. */
.photo .sec {
  position: absolute; right: 8px; bottom: 8px; width: 26px; height: 26px; padding: 0;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9);
  background: rgba(13, 28, 46, .5); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; line-height: 1;
}
.photo .sec:hover { background: rgba(13, 28, 46, .8); }
.photo .sec svg { width: 14px; height: 14px; }
.photo.sel .sec { background: var(--primary); border-color: #fff; }
.photo.sel .sec::after { content: "✓"; }

/* ---- Fotoğraf büyütme (ışık kutusu) ----
   Filigranın (z-index 9999) altında kalır; ekran görüntüsü izi korunur. */
.foto-buyut {
  position: fixed; inset: 0; z-index: 1200; background: rgba(6, 14, 24, .93);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.foto-buyut figure {
  margin: 0; max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.foto-buyut img {
  max-width: 100%; max-height: calc(100vh - 120px);
  object-fit: contain; border-radius: 10px; background: #0d1c2e;
}
.foto-buyut figcaption { color: #e8f2fb; font-family: var(--font-mono); font-size: 12.5px; text-align: center; }
.foto-buyut .fb-kapat, .foto-buyut .fb-ok {
  position: absolute; border: none; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .15); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.foto-buyut .fb-kapat:hover, .foto-buyut .fb-ok:hover { background: rgba(255, 255, 255, .3); }
.foto-buyut .fb-kapat { top: 16px; right: 18px; width: 40px; height: 40px; }
.foto-buyut .fb-ok { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 28px; line-height: 1; }
.foto-buyut .fb-geri { left: 16px; }
.foto-buyut .fb-ileri { right: 16px; }
@media (max-width: 640px) {
  .foto-buyut { padding: 12px; }
  .foto-buyut .fb-ok { width: 40px; height: 40px; font-size: 24px; }
  .foto-buyut img { max-height: calc(100vh - 140px); }
}

/* ---- Hasta arama kutusu (yazarak seçme) ---- */
.hasta-ara { position: relative; }
.hasta-ara-liste {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 120;
  background: var(--surface); border: 1px solid var(--stroke-soft); border-radius: var(--r-md);
  box-shadow: 0 12px 28px rgba(13, 28, 46, .18); max-height: 280px; overflow: auto;
}
.hasta-ara-liste button {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  padding: 8px 12px; border: none; background: none; cursor: pointer; font: inherit;
}
.hasta-ara-liste button b { font-size: 13.5px; }
.hasta-ara-liste button span { font-size: 11px; color: var(--on-surface-variant); font-family: var(--font-mono); }
.hasta-ara-liste button:hover, .hasta-ara-liste button.vurgu { background: var(--surface-container); }
.hasta-ara-liste .bos { padding: 10px 12px; color: var(--on-surface-variant); font-size: 12.5px; }

/* Randevu listesinde not satırı */
.rnd-not {
  display: block; font-size: 10.5px; opacity: .85; font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Ayarlar → Kullanıcılar (sıkı düzen) ---- */
.kul-liste .kul-satir {
  display: grid; grid-template-columns: minmax(72px, auto) 1fr auto auto auto;
  align-items: center; gap: 10px; padding: 5px 0;
  border-bottom: 1px solid var(--stroke-soft);
}
.kul-liste .kul-satir:last-child { border-bottom: 0; }
.kul-liste .kul-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kul-liste .kul-satir .btn-icon { width: 28px; height: 28px; }
.kul-liste .kul-sil:hover { color: var(--error); }
.kul-roller { margin-top: 8px; }
.kul-roller summary { cursor: pointer; color: var(--primary); }
.kul-roller p { margin: 6px 0 0; }
@media (max-width: 560px) {
  .kul-liste .kul-satir { grid-template-columns: 1fr auto auto; row-gap: 2px; }
  .kul-liste .kul-satir .mono { grid-column: 1 / -1; }
}

/* Yalnızca dokunmatik cihazlarda görünen öğeler (ör. "ara" düğmesi).
   Bilgisayarda tel: bağlantısı işe yaramadığı için gizlenir. */
.sadece-dokunmatik { display: none !important; }
@media (hover: none) and (pointer: coarse) {
  .sadece-dokunmatik { display: inline-flex !important; }
}

/* Tablet (701–900 px): pencere telefondaki gibi alt şerit olmasın, ortada
   normal bir pencere olarak açılsın. iPad dikeyde 768 px olduğu için önceki
   davranışta pencere ekranın en altında ince bir şerit hâlinde çıkıyor ve
   fark edilmiyordu. */
@media (min-width: 701px) and (max-width: 900px) {
  .modal-bg { padding: 4vh 16px; align-items: flex-start; }
  .modal, .modal.wide {
    max-width: min(720px, 94vw);
    max-height: 88vh;
    border-radius: var(--r-xl);
  }
  .modal-foot .btn { flex: 0 1 auto; min-width: 0; }
}

/* ---------- Venöz haritalama: kayıtlı harita şeridi ----------
   Arşiv çizim alanının ÜSTÜNDE, yatay kaydırılan bir şerit hâlinde durur;
   haritalar arasında geçiş tek dokunuş, sayfayı aşağı kaydırmak gerekmez.
   Her kart hangi bacağa ait olduğunu renkli rozetle gösterir. */
.harita-serit-kap {
  border: 1px solid var(--stroke-soft); border-radius: var(--r-lg);
  background: var(--surface-lowest); padding: 8px 10px 10px; margin-bottom: 12px;
  box-shadow: var(--shadow-1);
}
.harita-serit-bas { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; font-size: 12.5px; }
.harita-serit {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.harita-kart {
  position: relative; flex: 0 0 auto; width: 132px; padding: 0; cursor: pointer;
  border: 2px solid var(--stroke-soft); border-radius: 12px; overflow: hidden;
  background: #fff; scroll-snap-align: start; text-align: left;
}
.harita-kart img { display: block; width: 100%; height: 96px; object-fit: cover; }
.harita-kart.aktif { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(3, 155, 229, .2); }
.harita-kart .bacak {
  position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 999px;
  font: 700 10px var(--font-sans); color: #fff; letter-spacing: .02em;
}
.harita-kart .bacak-sag { background: #dc2626; }
.harita-kart .bacak-sol { background: #2563eb; }
.harita-kart .bacak-iki { background: #7c3aed; }
.harita-kart .alt {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 5px 7px; font-size: 10.5px; color: var(--on-surface-variant);
}
.harita-kart .alt .n { display: inline-flex; align-items: center; gap: 3px; }
.harita-kart .alt svg { width: 11px; height: 11px; }
.harita-kart .islem { position: absolute; right: 5px; top: 5px; display: flex; gap: 4px; }
.harita-kart .islem .k {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: rgba(13, 28, 46, .58); color: #fff;
}
.harita-kart .islem .k svg { width: 13px; height: 13px; }
.harita-kart .islem .sil { background: rgba(186, 26, 26, .72); }
@media (max-width: 700px) {
  .harita-kart { width: 116px; }
  .harita-kart img { height: 84px; }
}

/* ---------- Harita not işaretleri: şeffaf balonda metin + oynat ---------- */
.not-isaret { position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
              display: flex; align-items: center; gap: 5px; z-index: 3; }
.not-isaret.sola { flex-direction: row-reverse; }
.not-balon {
  display: flex; align-items: center; gap: 6px; max-width: 320px;
  padding: 4px 9px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .82); backdrop-filter: blur(3px);
  border: 1px solid rgba(13, 28, 46, .18); box-shadow: 0 2px 8px rgba(13, 28, 46, .22);
  font: 600 12px var(--font-body); color: #16222f; line-height: 1.25;
}
.not-balon .yazi { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
                   overflow: hidden; word-break: break-word; }
.not-balon .oynat {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
  background: #7c3aed; color: #fff; font-size: 12px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.harita-tarih { min-width: 150px; }
.harita-tarih input { padding: 7px 9px; }
.not-sayac { white-space: nowrap; }

/* ---------- Tablet/dokunmatik: parmakla kullanılabilir hedef boyutları ----------
   Apple ve Google kılavuzları en az 44 pt/48 dp önerir. 701–1100 px arası
   (iPad dikey ve yatay) tüm düğmeler bu ölçüye çıkarılır. */
@media (min-width: 701px) and (max-width: 1100px), (pointer: coarse) {
  .btn { min-height: 46px; padding: 11px 16px; font-size: 13.5px; }
  .btn-sm { min-height: 40px; padding: 9px 13px; font-size: 12.5px; }
  .btn-icon { width: 46px; height: 46px; padding: 0; }
  .tab { min-height: 46px; padding: 11px 15px; font-size: 13px; }
  .tool-btn { width: 48px; height: 48px; }
  .tool-btn svg { width: 22px; height: 22px; }
  .color-dot { width: 40px; height: 40px; }
  input, select, textarea { min-height: 44px; font-size: 16px; }   /* 16px: iOS yakınlaştırmasın */
  textarea { min-height: 88px; }
  .check input[type="checkbox"], input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  .chip { padding: 6px 12px; font-size: 12px; }
  .photo .del, .photo .sec { width: 38px; height: 38px; }
  .photo .del svg, .photo .sec svg { width: 17px; height: 17px; }
  .modal-foot .btn { min-height: 48px; }
  .not-pin { min-width: 34px; height: 34px; font-size: 15px; }
  .not-balon { font-size: 13.5px; padding: 7px 12px; max-width: 340px; }
  .nav-item { min-height: 48px; }
  table td, table th { padding: 12px 10px; }
  .hasta-ara-liste button { min-height: 48px; }
}

/* Sol menü tablette daha geniş: parmakla isabetli dokunulsun.
   Genişlik --sidebar-w değişkeninden geldiği için düzen bozulmadan büyür. */
@media (min-width: 901px) and (max-width: 1300px) {
  :root { --sidebar-w: 300px; }
  .sidebar { padding: 18px 14px; }
  .sidebar .nav-item { min-height: 50px; font-size: 14px; gap: 12px; padding: 12px 14px; }
  .sidebar .nav-item svg { width: 22px; height: 22px; }
}

/* ---------- Not penceresi: dikte ile doldurulacak, parmakla kullanılacak ---------- */
.not-yazi {
  min-height: 150px; font-size: 17px; line-height: 1.5; padding: 14px 15px;
  border-radius: var(--r-lg);
}
@media (min-width: 701px) and (max-width: 1100px), (pointer: coarse) {
  .not-yazi { min-height: 190px; font-size: 18px; padding: 16px; }
  /* Not penceresinin düğmeleri tam genişlikte ve ferah dursun */
  #modal-bg .modal-foot .btn { min-height: 52px; font-size: 14px; }
}

/* ---------- Uygulama içi dikte düğmesi ---------- */
.dikte-btn.dikte-aktif {
  background: var(--error) !important; color: #fff !important; border-color: transparent !important;
}
.dikte-btn .rec-nokta {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #fff; margin-right: 6px; animation: recYanip 1s infinite;
}
@keyframes recYanip { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
#rapor-arac .dikte-btn { width: auto; padding: 0 10px; gap: 5px; font-size: 12px; font-weight: 600; }

/* ---------- Terim öneri penceresi ---------- */
.terim-oneri { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; }
.oneri-satir {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start;
  padding: 10px 12px; border: 1px solid var(--stroke-soft); border-radius: var(--r);
  background: var(--surface-lowest); cursor: pointer;
}
.oneri-satir > input[type="checkbox"] { grid-row: 1 / 3; width: 22px; height: 22px; margin-top: 2px; }
.oneri-satir .ok { font-size: 14px; }
.oneri-satir .ok .yanlis { color: var(--error); text-decoration: line-through; }
.oneri-satir .ok .dogru { color: var(--secondary); }
.oneri-satir .baglam { grid-column: 2; font-size: 11.5px; color: var(--on-surface-variant); }
.oneri-satir .kalici { grid-column: 2; display: inline-flex; align-items: center; gap: 6px;
                       font-size: 11.5px; color: var(--on-surface-variant); margin-top: 2px; }
.oneri-satir .kalici input { width: 18px; height: 18px; }

/* ---------- İzin formu listesi (İletişim & Görsel İzinler) ---------- */
.idari-satir {
  display: grid; grid-template-columns: auto 1fr auto; gap: 6px 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--stroke-soft);
}
.idari-satir .idari-islem { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 900px), (pointer: coarse) {
  .idari-satir { grid-template-columns: auto 1fr; }
  .idari-satir .idari-islem { grid-column: 1 / 3; justify-content: flex-start; }
  .idari-satir .idari-islem .btn { flex: 1 1 auto; min-width: 44%; }
}