:root {
  --paprika: #7D0912;
  --paprika-dark: #560509;
  --paprika-tint: #F8E0E0;
  --sand: #F6EEE1;
  --cream: #FFFCF7;
  --ink: #201812;
  --clay-muted: #6B5B4B;
  --clay-faint: #9C8E80;
  --border: #DDCDB4;
  --border-strong: #C7AE8A;
  --olive: #43571F;
  --olive-bg: #E7EDD5;
  --brick: #A83A20;
  --brick-bg: #FBE3D8;
  --honey: #7A4E00;
  --honey-bg: #FAEACB;
  --muted-bg: #EDE3D0;
  --shadow-soft: 0 2px 6px rgba(32,24,18,0.10);
  --shadow-strong: 0 6px 18px rgba(32,24,18,0.14);
  --font-sans: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
}

[data-theme="dark"] {
  --paprika: #EB8A64;
  --paprika-dark: #F5A886;
  --paprika-tint: #422A22;
  --sand: #1B1613;
  --cream: #251F1A;
  --ink: #FBF3E9;
  --clay-muted: #CBB9A5;
  --clay-faint: #8A7A6A;
  --border: #4A3C30;
  --border-strong: #5C4B3C;
  --olive: #ADC77E;
  --olive-bg: #2C3722;
  --brick: #F0906F;
  --brick-bg: #402A22;
  --honey: #EDBE6C;
  --honey-bg: #3E3119;
  --muted-bg: #382D22;
  --shadow-soft: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-strong: 0 8px 22px rgba(0,0,0,0.45);
}
[data-theme="dark"] body { -webkit-font-smoothing: antialiased; }
[data-theme="dark"] .brand-logo { filter: brightness(0.95); }
[data-theme="dark"] .lightbox { background: rgba(0,0,0,0.85); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { color-scheme: dark; }
input, select, textarea { color-scheme: light; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  font-family: var(--font-sans);
  background: var(--sand);
  color: var(--ink);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--paprika); }
a, button, .badge, summary { touch-action: manipulation; }

.app-header { position: sticky; top: 0; z-index: 30; }

.topbar {
  background: var(--cream);
  color: var(--ink);
  padding: 12px 22px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 6px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid var(--paprika);
  box-shadow: var(--shadow-soft);
  padding-left: max(22px, env(safe-area-inset-left));
  padding-right: max(22px, env(safe-area-inset-right));
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; cursor: pointer; }
.brand-logo { height: 42px; width: auto; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-name { font-family: var(--font-serif); font-size: 17.5px; font-weight: 700; color: var(--paprika); letter-spacing: 0.1px; }
.brand-tagline { font-size: 11.5px; color: var(--clay-muted); letter-spacing: 0.3px; font-weight: 600; }
.topbar h1 {
  font-family: var(--font-serif);
  font-size: 20px;
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--paprika-dark);
}
.topbar .logout {
  color: var(--clay-muted);
  font-size: 13px;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.topbar .logout:hover { background: var(--paprika-tint); color: var(--paprika-dark); }
.topbar-actions { display: flex; align-items: center; gap: 6px; }
.theme-toggle {
  background: var(--muted-bg);
  border: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  color: var(--clay-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.theme-toggle:hover { background: var(--paprika-tint); color: var(--paprika-dark); }
.hamburger-btn { display: none; }
.mainnav-drawer-head { display: none; }

.mainnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: linear-gradient(180deg, var(--cream) 0%, var(--sand) 100%);
  border-bottom: 1px solid var(--border-strong);
  padding: 8px 12px;
  box-shadow: 0 1px 4px rgba(32,24,18,0.05);
}
.mainnav a {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--clay-muted);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
}
.icon { flex-shrink: 0; }
/* Menü ikonlarına konu bazlı canlı renkler — yazı okunur kalır, sadece ikon
   ve hover zemini renklenir. Koyu tema için ayrı, açık tonlar aşağıda. */
.mainnav a[data-nav] .icon { transition: transform 0.15s ease; }
.mainnav a[data-nav] { transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.mainnav a[data-nav="red"]    .icon { color: #C0392B; }
.mainnav a[data-nav="orange"] .icon { color: #D35400; }
.mainnav a[data-nav="amber"]  .icon { color: #B8860B; }
.mainnav a[data-nav="green"]  .icon { color: #3E7A34; }
.mainnav a[data-nav="olive"]  .icon { color: #6B7A1E; }
.mainnav a[data-nav="teal"]   .icon { color: #128277; }
.mainnav a[data-nav="cyan"]   .icon { color: #1B7A99; }
.mainnav a[data-nav="blue"]   .icon { color: #2E6DB4; }
.mainnav a[data-nav="navy"]   .icon { color: #34508C; }
.mainnav a[data-nav="indigo"] .icon { color: #55499C; }
.mainnav a[data-nav="purple"] .icon { color: #7E3F8F; }
.mainnav a[data-nav="pink"]   .icon { color: #B03A6E; }
.mainnav a[data-nav="brown"]  .icon { color: #8A5A2B; }
.mainnav a[data-nav="slate"]  .icon { color: #5B6672; }
.mainnav a[data-nav]:hover:not(.active) .icon { transform: scale(1.12); }
[data-theme="dark"] .mainnav a[data-nav="red"]    .icon { color: #F07568; }
[data-theme="dark"] .mainnav a[data-nav="orange"] .icon { color: #F0925A; }
[data-theme="dark"] .mainnav a[data-nav="amber"]  .icon { color: #E0B84E; }
[data-theme="dark"] .mainnav a[data-nav="green"]  .icon { color: #7FC06F; }
[data-theme="dark"] .mainnav a[data-nav="olive"]  .icon { color: #B6C158; }
[data-theme="dark"] .mainnav a[data-nav="teal"]   .icon { color: #4EC2B6; }
[data-theme="dark"] .mainnav a[data-nav="cyan"]   .icon { color: #56BEDC; }
[data-theme="dark"] .mainnav a[data-nav="blue"]   .icon { color: #6AA6E8; }
[data-theme="dark"] .mainnav a[data-nav="navy"]   .icon { color: #7E9AD6; }
[data-theme="dark"] .mainnav a[data-nav="indigo"] .icon { color: #9A8FDC; }
[data-theme="dark"] .mainnav a[data-nav="purple"] .icon { color: #C084D0; }
[data-theme="dark"] .mainnav a[data-nav="pink"]   .icon { color: #E183AE; }
[data-theme="dark"] .mainnav a[data-nav="brown"]  .icon { color: #C79461; }
[data-theme="dark"] .mainnav a[data-nav="slate"]  .icon { color: #9AA6B2; }
.mainnav a.active {
  color: var(--paprika-dark);
  font-weight: 700;
  border-color: var(--border-strong);
  background: var(--cream);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--paprika) 12%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--paprika) 6%, transparent);
}
.mainnav a.active .icon { transform: scale(1.05); }
.mainnav a[data-nav]:hover:not(.active) {
  background: var(--cream);
  border-color: var(--border);
  box-shadow: 0 1px 4px rgba(32,24,18,0.06);
}
.mainnav a:hover:not(.active) { color: var(--ink); }

.nav-dropdown { position: relative; display: flex; }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(43,32,24,0.14);
  padding: 6px;
  min-width: 190px;
  z-index: 70;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu:hover { display: flex; }
.nav-dropdown-menu a {
  border-bottom: none;
  border-radius: 7px;
  padding: 9px 11px;
  min-height: auto;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover:not(.active) { background: var(--muted-bg); }
.nav-dropdown-menu a.active { background: var(--paprika-tint); }

.container { max-width: 820px; margin: 0 auto; padding: 22px 16px 60px; }
.container-wide { max-width: 1280px; }

h2 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 16px;
  padding-bottom: 12px;
  color: var(--ink);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 3px solid var(--paprika);
  letter-spacing: -0.2px;
}
h2 .icon { color: var(--paprika); flex-shrink: 0; }
h2 > span:first-of-type { display: flex; align-items: center; gap: 10px; }
.compliance-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: var(--clay-muted);
  background: var(--muted-bg);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.compliance-badge:hover { background: var(--paprika-tint); border-color: var(--paprika); color: var(--paprika-dark); }
.compliance-badge .icon { color: inherit; }
.compliance-modal-clause { font-size: 12.5px; font-weight: 700; color: var(--paprika-dark); margin: 2px 0 12px; }
.compliance-modal-desc { font-size: 13.5px; line-height: 1.7; color: var(--ink); margin: 0; }
.page-scope-note {
  margin: -10px 0 16px;
  font-size: 13px;
  color: var(--clay-muted);
  line-height: 1.5;
}
.raporlama-module-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
}
.raporlama-module-row:last-child { border-bottom: none; }
.raporlama-module-row.is-off { opacity: 0.5; }
.raporlama-module-item { flex: 1; min-width: 180px; }
.raporlama-module-dates { display: flex; align-items: center; gap: 6px; }
.raporlama-module-dates input[type="date"] { margin: 0; padding: 6px 8px; font-size: 12.5px; width: auto; }
.raporlama-module-nodate { flex-shrink: 0; }

.detail-actions { display: flex; align-items: center; gap: 14px; margin: -6px 0 18px; flex-wrap: wrap; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) {
  .detail-grid { grid-template-columns: 1fr; }
}

/* Geçmişli (bakım/kalibrasyon, araç) detay sayfaları için: sol dar sütunda
   bilgi + belgeler üst üste, sağ geniş sütunda geçmiş kayıtları — PC'de
   önceki simetrik 2 sütunun bıraktığı garip boşluğu ortadan kaldırır. */
.detail-columns { display: grid; grid-template-columns: 360px 1fr; gap: 16px; align-items: start; }
.detail-col-stack { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 860px) {
  .detail-columns { grid-template-columns: 1fr; }
}

.history-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.history-entry-card {
  background: var(--sand);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--clay-faint);
  border-radius: 10px;
  padding: 12px 14px;
}
.history-entry-badge-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.history-entry-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--clay-faint);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 6px;
}
.history-entry-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.history-entry-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.history-entry-date { font-size: 14px; font-weight: 700; color: var(--ink); font-family: var(--font-serif); }
.history-entry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.history-entry-grid > div {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 9px;
}
.history-entry-grid .log-label { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--clay-faint); }
.history-entry-grid .log-value { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.history-entry-note { font-size: 12.5px; color: var(--clay-muted); margin: 9px 0 0; font-style: italic; line-height: 1.5; }
.history-entry-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.history-entry-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--cream);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 11.5px;
  color: var(--ink);
  text-decoration: none;
}
.history-entry-doc-link:hover { background: var(--paprika-tint); }
.card-accent-add { border-top: 3px solid var(--paprika); }
.history-filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.history-filter-btn {
  background: var(--cream);
  border: 1.5px solid var(--border-strong);
  color: var(--clay-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.history-filter-btn:hover { border-color: var(--paprika); }
.history-filter-btn.active { background: var(--paprika); border-color: var(--paprika); color: #fff; }

.history-group { border: 1px solid var(--border-strong); border-radius: 10px; margin-top: 10px; overflow: hidden; }
.history-group-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--sand);
  border: none;
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.history-group-header svg { margin-left: auto; transition: transform 0.15s; }
.history-group-header.open svg { transform: rotate(90deg); }
.history-group-body { display: none; background: var(--cream); }
.history-group-body.open { display: block; }
.history-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 9px;
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s;
}
.history-row:hover { background: var(--paprika-tint); border-color: var(--paprika); }
.history-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.history-row-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.history-row-bottom { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.history-row-date { font-weight: 700; font-size: 14px; white-space: nowrap; font-family: var(--font-serif); }
.history-row-mid { color: var(--clay-muted); font-weight: 600; }
.history-row-note { font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.history-row svg { flex-shrink: 0; opacity: 0.5; }

.history-tab-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.history-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cream);
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--clay-muted);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.history-tab-btn:hover { border-color: var(--paprika); }
.history-tab-btn.active { background: var(--paprika); border-color: var(--paprika); color: #fff; }
.history-tab-btn.active .badge { background: rgba(255,255,255,0.25); color: #fff; }
.history-tab-panel { display: none; }
.history-tab-panel.active { display: flex; flex-direction: column; gap: 8px; }

.btn-discard-ready {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--paprika);
  border: none;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--paprika) 35%, transparent);
  transition: background 0.15s, transform 0.1s;
}
.btn-discard-ready:hover { background: var(--paprika-dark); transform: translateY(-1px); }
.btn-discard-wait {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sand);
  border: 1px dashed var(--border-strong);
  color: var(--clay-faint);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: not-allowed;
}

.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px 0 6px; }
.pagination-btn { width: auto; margin: 0; padding: 8px 16px; font-size: 13px; }
.pagination-info { white-space: nowrap; }

.raporlama-date-tool { background: linear-gradient(135deg, var(--cream), var(--sand)); }
.raporlama-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.raporlama-preset-pill {
  background: var(--cream);
  border: 1.5px solid var(--border-strong);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.raporlama-preset-pill:hover { background: var(--paprika); border-color: var(--paprika); color: #fff; transform: translateY(-1px); }
.raporlama-preset-pill:active { transform: scale(0.97); }
.raporlama-manual-dates {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--cream);
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  padding: 10px 12px;
}
.raporlama-manual-dates input[type="date"] { margin: 0; padding: 6px 8px; font-size: 12.5px; width: auto; }

.hint {
  font-size: 12.5px;
  color: var(--clay-muted);
  line-height: 1.5;
  background: var(--muted-bg);
  border-radius: 9px;
  padding: 9px 12px;
  margin: 0 0 14px;
}
.hint a { color: var(--paprika); font-weight: 600; text-decoration: none; }
.hint a:hover { text-decoration: underline; }

.card {
  background: var(--cream);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-soft);
}
.card-title {
  font-family: var(--font-serif);
  font-weight: 700;
  margin: 0 0 10px;
  font-size: 15.5px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 7px;
}

.quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.doc-section > .card-title {
  font-size: 13.5px;
  padding-bottom: 9px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.quick-actions a {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--cream);
  border: 1px solid var(--border-strong);
  color: var(--ink);
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
}
.quick-actions a:hover { background: var(--paprika-tint); border-color: var(--paprika); color: var(--paprika-dark); }
.quick-actions .icon { color: var(--paprika); }
.card-warn { background: var(--honey-bg); border-color: #EBD49B; border-left: 4px solid var(--honey); }
.card-warn ul { color: var(--honey); font-size: 13px; margin: 0; padding-left: 18px; line-height: 1.6; }
.card-danger { background: var(--brick-bg); border-color: #E8BEB5; border-left: 4px solid var(--brick); }
.card-danger ul { color: var(--brick); font-size: 13px; margin: 0; padding-left: 18px; line-height: 1.6; }
.card-info { background: var(--muted-bg); border-color: var(--border-strong); border-left: 4px solid var(--clay-muted); }
.card-info ul { color: var(--clay-muted); font-size: 13px; margin: 0; padding-left: 18px; line-height: 1.6; }
.card-info .card-title { color: var(--ink); }
.card-ok { background: var(--olive-bg); border-color: #D7E2C2; }
.warn-list a { color: inherit; text-decoration: none; font-weight: 600; }
.warn-list a:hover { text-decoration: underline; }

.warn-rows { display: flex; flex-direction: column; gap: 6px; }
.warn-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  transition: transform 0.12s, box-shadow 0.12s;
}
.warn-row:hover { transform: translateX(2px); box-shadow: var(--shadow-soft); }
.warn-row-icon { flex-shrink: 0; display: flex; }
.card-warn .warn-row-icon { color: var(--honey); }
.card-danger .warn-row-icon { color: var(--brick); }
.card-info .warn-row-icon { color: var(--clay-muted); }
.warn-row-text { flex: 1; min-width: 0; }
.warn-row-arrow { flex-shrink: 0; color: var(--clay-faint); font-weight: 700; }

/* Not: Eskiden bu kural sadece <form> içindeki ve belirli türlerdeki kutulara
   uygulanıyordu. email / month / tel / search / url türleri listede olmadığı,
   rapor e-posta penceresindeki kutular da <form> dışında kaldığı için bunlar
   tarayıcının varsayılan (stilsiz) görünümünde kalıyordu. */
form input[type=text], form input[type=number], form input[type=date], form input[type=datetime-local],
form input[type=time], form input[type=password], form input[type=file], form select, form textarea,
form input[type=email], form input[type=month], form input[type=tel], form input[type=search], form input[type=url],
.modal-box input[type=text], .modal-box input[type=email], .modal-box input[type=number],
.modal-box input[type=date], .modal-box input[type=password], .modal-box select, .modal-box textarea {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 9px;
  border: 1px solid var(--border-strong);
  background: var(--cream);
  color: var(--ink);
  border-radius: 9px;
  font-size: 14px;
  font-family: inherit;
  box-shadow: inset 0 1px 2px rgba(43,32,24,0.035);
  transition: border-color 0.15s, box-shadow 0.15s;
}
form input:hover, form select:hover, form textarea:hover,
.modal-box input:hover, .modal-box select:hover, .modal-box textarea:hover { border-color: var(--clay-faint); }
form textarea { min-height: 72px; resize: vertical; line-height: 1.5; }
form input[type=file] {
  padding: 8px 10px;
  box-shadow: none;
}
form input[type=file]::file-selector-button {
  background: var(--paprika);
  color: #fff;
  border: none;
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  margin-right: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
form input[type=file]::file-selector-button:hover { background: var(--paprika-dark); }
form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237A6B5D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 34px;
  color: var(--ink);
}
form select:focus { color: var(--ink); }
form select option { color: var(--ink); background: var(--cream); }
form input:focus, form select:focus, form textarea:focus,
.modal-box input:focus, .modal-box select:focus, .modal-box textarea:focus {
  outline: none;
  border-color: var(--paprika);
  box-shadow: 0 0 0 3px var(--paprika-tint);
}
form input::placeholder, form textarea::placeholder,
.modal-box input::placeholder, .modal-box textarea::placeholder { color: var(--clay-faint); }
form input:-webkit-autofill,
form input:-webkit-autofill:hover,
form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 1000px var(--cream) inset;
  transition: background-color 9999s ease-in-out 0s;
}
form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
form .row input, form .row select { margin-bottom: 9px; }
.logdoc-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-bottom: 8px; }
.logdoc-row input { margin-bottom: 0; }
@media (max-width: 600px) { .logdoc-row { grid-template-columns: 1fr; } }
form .field { display: flex; flex-direction: column; }
.field-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--clay-muted); margin: 0 0 4px; }

.checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  font-size: 14px;
  margin-bottom: 9px;
  background: var(--cream);
}
.checkbox input { width: 19px; height: 19px; margin: 0; accent-color: var(--paprika); flex-shrink: 0; }

.btn-primary {
  width: 100%;
  background: var(--paprika);
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--paprika) 32%, transparent);
}
.btn-primary:hover { background: var(--paprika-dark); box-shadow: 0 4px 12px color-mix(in srgb, var(--paprika) 40%, transparent); }
.btn-primary:active { transform: scale(0.98); }

.btn-secondary {
  background: var(--cream);
  color: var(--paprika-dark);
  border: 1.5px solid var(--paprika);
  padding: 9px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.btn-secondary:hover { background: var(--paprika-tint); }
.btn-secondary:active { transform: scale(0.98); }

.inline-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inline-form .btn-secondary { width: auto; padding: 9px 14px; }
.tiny-input { width: 110px !important; margin-bottom: 0 !important; }

.list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; align-items: start; }
.item {
  background: var(--cream);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--border-strong);
  border-radius: 12px;
  padding: 13px 15px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s, transform 0.12s, border-left-color 0.15s;
}
/* Kartın içinde geçen durum rozetine göre sol şeridin rengini otomatik ayarlar
   (en son eşleşen kural kazanır, bu yüzden öncelik sırası: uygun < yaklaşan < uygun değil). */
.item:has(.badge-ok) { border-left-color: var(--olive); }
.item:has(.badge-warn) { border-left-color: var(--honey); }
.item:has(.badge-upcoming) { border-left-color: var(--honey); }
.item:has(.badge-bad) { border-left-color: var(--brick); }
.item-clickable { cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s; }
.item-clickable:hover { border-color: var(--paprika); box-shadow: var(--shadow-strong); transform: translateY(-1px); }
.item.resolved { opacity: 0.62; }
.item strong { font-size: 14.5px; color: var(--ink); font-weight: 700; }
.muted { font-size: 12px; color: var(--clay-muted); margin-top: 3px; line-height: 1.5; }
.muted.small { font-size: 11px; }
.text-danger { color: var(--brick); font-weight: 700; }
.text-warn { color: var(--honey); font-weight: 700; }

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  margin-top: 7px;
  text-decoration: none;
  letter-spacing: 0.1px;
  box-shadow: inset 0 0 0 1px rgba(32,24,18,0.06);
}
a.badge { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 12px; }
.badge-ok { background: var(--olive-bg); color: var(--olive); }
.badge-bad { background: var(--brick-bg); color: var(--brick); }
.badge-warn { background: var(--honey-bg); color: var(--honey); }
.badge-muted { background: var(--muted-bg); color: var(--clay-muted); }

.actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.delete {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--clay-muted);
  background: var(--cream);
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  padding: 7px 11px;
}
.delete:hover { color: #fff; background: var(--brick); border-color: var(--brick); }

.back-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cream);
  border: 1.5px solid var(--border-strong);
  border-radius: 9px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--paprika-dark);
  text-decoration: none;
  margin-bottom: 18px;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.back-link-btn:hover { background: var(--paprika-tint); border-color: var(--paprika); transform: translateX(-2px); }
.empty { color: var(--clay-faint); font-size: 13px; text-align: center; padding: 22px 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 10px; margin-bottom: 16px; }
.metric {
  background: var(--cream);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--paprika);
  border-radius: 10px;
  padding: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-soft);
}
.metric-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paprika-tint);
  color: var(--paprika-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paprika) 12%, transparent);
}
.metric-body { min-width: 0; }
.metric-clickable {
  display: flex;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.metric-clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
  border-color: var(--paprika);
}
.metric-label { display: block; font-size: 11px; color: var(--clay-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.metric-value { display: block; font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 27px; font-weight: 800; margin-top: 4px; color: var(--ink); letter-spacing: -0.4px; }

/* Admin olmayan (Yönetici/Standart Kullanıcı) rollerinde tüm silme
   butonları görsel olarak gizlenir — asıl yetki kontrolü sunucu
   tarafında (require_delete_permission) zaten yapılıyor, bu sadece
   arayüzü tutarlı hale getirir. */
.role-restricted .delete { display: none !important; }

.login-body { display: flex; align-items: center; justify-content: center; height: 100vh; background: var(--sand); margin: 0; }
.login-box {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px;
  width: 300px;
  box-shadow: 0 4px 16px rgba(43,32,24,0.08);
}
.login-box h1 { font-family: var(--font-serif); text-align: center; font-size: 20px; margin: 0 0 18px; color: var(--paprika-dark); }
.login-logo { display: block; margin: 0 auto 10px; height: 64px; width: auto; }
.error { color: var(--brick); font-size: 13px; margin: 0 0 10px; }

.item-block {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 14px;
  margin-bottom: 9px;
  box-shadow: 0 1px 2px rgba(43,32,24,0.03);
}
.item-block .item { border: none; padding: 0; margin-bottom: 8px; box-shadow: none; }

.doc-details { margin-top: 4px; }
.doc-details + .doc-details { margin-top: 8px; }
.completed-details + .completed-details { margin-top: 10px; }
.help-body { padding: 4px 4px 10px 27px; }
.help-body p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink); }
.doc-details summary,
.add-card summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--paprika-dark);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
}
.doc-details summary::-webkit-details-marker,
.add-card summary::-webkit-details-marker { display: none; }
.doc-details summary::before { content: "▸"; font-size: 11px; color: var(--clay-faint); transition: transform 0.15s; }
.doc-details[open] summary::before { transform: rotate(90deg); }

.completed-details {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 16px;
}
.completed-details summary {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 0;
  font-size: 14px;
  cursor: pointer; list-style: none;
}
.completed-details summary::-webkit-details-marker { display: none; }
.completed-details:not(.doc-details) summary::after { content: ''; width: 7px; height: 7px; margin-right: 4px; border-right: 2px solid var(--clay-faint); border-bottom: 2px solid var(--clay-faint); transform: rotate(-45deg); transition: transform .15s; }
.completed-details:not(.doc-details)[open] summary::after { transform: rotate(45deg); }
.completed-summary-icon { color: var(--olive); display: flex; }
.completed-summary-text { flex: 1; font-family: var(--font-serif); font-weight: 600; color: var(--ink); }
.completed-details[open] { padding-bottom: 12px; }

.activity-details { opacity: 0.85; margin-top: 6px; }
.activity-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.activity-list li {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--clay-muted);
  padding: 6px 10px;
  background: var(--muted-bg);
  border-radius: 7px;
}
.activity-user { font-weight: 700; color: var(--clay-muted); }
.activity-text { flex: 1; min-width: 0; }
.activity-time { flex-shrink: 0; color: var(--clay-faint); }

.add-card { padding: 6px 18px; }
.add-card summary { font-family: var(--font-serif); font-size: 15px; padding: 12px 0; }
.add-card summary .icon { color: var(--paprika); transition: transform 0.18s; }
.add-card[open] summary .icon { transform: rotate(45deg); }
.add-card form { padding-bottom: 6px; }

.result-count { font-size: 12px; color: var(--clay-faint); margin: -6px 0 12px; }
.result-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin: -6px 0 12px; }
.result-bar .result-count { margin: 0; }
.print-btn { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 7px 13px; font-size: 12.5px; white-space: nowrap; }

.receipt-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(43,32,24,0.03);
}
.receipt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.receipt-gallery { position: relative; flex-shrink: 0; }
.receipt-gallery-track {
  display: flex;
  width: 60px;
  height: 60px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: 9px;
  border: 1px solid var(--border-strong);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.receipt-gallery-track::-webkit-scrollbar { display: none; }
.receipt-gallery-item { flex: 0 0 60px; width: 60px; height: 60px; scroll-snap-align: start; display: block; }
.receipt-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.receipt-thumb-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--muted-bg); color: var(--clay-muted);
}
.gallery-count {
  position: absolute; bottom: -3px; right: -3px; background: var(--paprika); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 1; padding: 3px 5px; border-radius: 999px;
  border: 1.5px solid var(--cream); pointer-events: none;
}

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 10, 0.94);
  z-index: 200;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
}
.lightbox-img { max-width: 90vw; max-height: 72vh; object-fit: contain; border-radius: 8px; display: block; }
.lightbox-fallback { color: #F3ECE2; text-align: center; font-size: 14px; }
.lightbox-fallback .icon { color: #F3ECE2; margin-bottom: 8px; }
.lightbox-close {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,0.12); color: #fff; border: none;
  width: 42px; height: 42px; border-radius: 50%; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: rgba(255,255,255,0.22); }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.12); color: #fff; border: none;
  width: 46px; height: 46px; border-radius: 50%; font-size: 24px; cursor: pointer;
  align-items: center; justify-content: center;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.22); }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.lightbox-footer { margin-top: 16px; display: flex; gap: 18px; align-items: center; color: #fff; font-size: 13px; }
.lightbox-footer a { color: #F3D9C9; text-decoration: none; }
.lightbox-footer a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .lightbox-nav { width: 40px; height: 40px; font-size: 20px; }
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
}
.receipt-title { font-size: 15px; color: var(--ink); }
.receipt-sub { font-size: 12px; color: var(--clay-muted); margin-top: 2px; }
.receipt-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 8px 16px;
  padding: 10px 0;
  border-top: 1px dashed var(--border-strong);
  border-bottom: 1px dashed var(--border-strong);
  margin-bottom: 8px;
}
.receipt-meta .meta-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--clay-faint); }
.receipt-meta .meta-value { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 1px; }
.receipt-note { font-size: 12px; color: var(--clay-muted); margin-bottom: 8px; font-style: italic; }
.receipt-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }

.kabul-product-row {
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.5);
}
.kabul-product-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.kabul-product-no { font-size: 12px; font-weight: 700; color: var(--paprika-dark); text-transform: uppercase; letter-spacing: 0.3px; }
.kabul-remove-row { background: none; border: none; color: var(--brick); font-size: 12px; cursor: pointer; padding: 2px 6px; }
.kabul-remove-row:hover { text-decoration: underline; }

.cizelge-head {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 0 14px 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--clay-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.cizelge-head-date { min-width: 100px; }
.cizelge-head-values { display: flex; gap: 10px; flex: 1; }
.cizelge-head-time { width: 74px; text-align: center; line-height: 1.5; }
.cizelge-head-sub { font-size: 8.5px; font-weight: 500; text-transform: none; color: var(--clay-faint); }
.cizelge-head-personnel { min-width: 130px; }
@media (min-width: 700px) { .cizelge-head { display: flex; } }

.cizelge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--cream);
  flex-wrap: wrap;
}
.cizelge-row.filled { background: var(--olive-bg); border-color: #D7E2C2; }
.cizelge-date { font-weight: 600; font-size: 13px; min-width: 100px; color: var(--ink); }
.cizelge-values { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; }
.cizelge-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 74px; }
.cizelge-cell-time { font-size: 10px; font-weight: 700; color: var(--paprika-dark); letter-spacing: 0.2px; }
@media (min-width: 700px) { .cizelge-cell-time { display: none; } }
.cizelge-val { font-size: 13.5px; font-weight: 700; color: var(--olive); }
.cizelge-val-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; padding: 2px 4px; margin: 0;
  cursor: pointer; border-radius: 6px; transition: background 0.12s;
}
.cizelge-val-btn:hover { background: rgba(0,0,0,0.06); }
.cizelge-hum { font-size: 10.5px; font-weight: 600; color: var(--clay-muted); }
.cizelge-input { width: 70px !important; margin-bottom: 0 !important; padding: 5px 4px !important; text-align: center; font-size: 12.5px !important; }
.cizelge-input-temp { border-color: var(--paprika-tint) !important; }
.cizelge-input-hum { color: var(--clay-muted) !important; }
.cizelge-personnel { width: 130px !important; margin-bottom: 0 !important; }
.cizelge-save { width: auto !important; padding: 7px 12px !important; white-space: nowrap; }
.cizelge-personnel-display { font-size: 12.5px; color: var(--clay-muted); min-width: 130px; }
.doc-type-block { border-top: 1px solid var(--border); padding: 11px 0; }
.doc-type-block:first-child { border-top: none; padding-top: 4px; }
.doc-type-name { font-size: 12.5px; font-weight: 600; color: var(--ink); margin: 0 0 7px; }
.doc-missing { font-style: italic; }
.doc-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.doc-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  background: var(--muted-bg);
  border-radius: 9px;
  padding: 10px 12px;
  flex-wrap: wrap;
}
.doc-list li > span { flex: 1 1 auto; min-width: 0; }
.doc-list li .delete { flex-shrink: 0; }
.doc-list a:not(.delete) { color: var(--paprika-dark); text-decoration: none; font-weight: 600; }
.doc-list a:not(.delete):hover { text-decoration: underline; }

.doc-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.doc-form input[type=text], .doc-form input[type=file] { margin-bottom: 0; font-size: 13px; }

.filter-bar {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 11px 13px;
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.filter-bar input, .filter-bar select {
  width: auto;
  flex: 1 1 140px;
  margin-bottom: 0;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  background-color: var(--cream);
  color: var(--ink);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  min-width: 0;
}
.filter-bar select { padding-right: 30px; }
.filter-bar { align-items: flex-end; }
.filter-bar .field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; min-width: 0; margin: 0; }
.filter-bar .field .field-label { font-size: 11.5px; margin: 0; }
.filter-bar .field input { flex: 0 0 auto; width: 100%; }
.filter-bar > input, .filter-bar > select { align-self: flex-end; }
.filter-bar .row { flex: 1 1 220px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.filter-bar .row input { margin-bottom: 0; width: 100%; min-width: 0; }
.filter-bar .row .field { min-width: 0; }
.filter-bar .btn-secondary { width: auto; flex: 0 0 auto; padding: 9px 16px; align-self: flex-end; }
.filter-clear { font-size: 12px; color: var(--clay-faint); text-decoration: none; white-space: nowrap; }
.filter-clear:hover { color: var(--brick); }

@media (max-width: 640px) {
  .topbar { padding: 10px 14px; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .brand { gap: 9px; }
  .brand-logo { height: 32px; }
  .brand-name { font-size: 14.5px; }
  .brand-tagline { font-size: 10px; }
  .topbar .logout { font-size: 12px; padding: 5px 8px; }
  .hamburger-btn {
    display: flex; align-items: center; justify-content: center;
    background: var(--muted-bg); border: none; width: 34px; height: 34px;
    border-radius: 8px; color: var(--clay-muted); cursor: pointer;
  }
  .mainnav-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(20,14,10,0.5);
    z-index: 55;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .mainnav-backdrop.open { display: block; opacity: 1; }
  .mainnav {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 82%;
    max-width: 300px;
    background: var(--cream);
    border-bottom: none;
    border-right: 1px solid var(--border);
    box-shadow: 6px 0 24px rgba(20,14,10,0.2);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 60;
    padding: 0 10px 20px;
    padding-top: max(14px, env(safe-area-inset-top));
    padding-left: max(10px, env(safe-area-inset-left));
    transform: translateX(-105%);
    transition: transform 0.25s ease;
  }
  .mainnav.mobile-open { transform: translateX(0); }
  .mainnav-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 6px 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }
  .mainnav-drawer-title { font-family: var(--font-serif); font-size: 15.5px; font-weight: 600; color: var(--paprika-dark); }
  .mainnav-drawer-close {
    background: var(--muted-bg); border: none; width: 32px; height: 32px;
    border-radius: 50%; color: var(--clay-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .mainnav a {
    flex: 0 0 auto;
    white-space: normal;
    padding: 13px 8px;
    min-height: 46px;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
  }
  .mainnav a.active { border-left: 3px solid var(--paprika); border-bottom: 1px solid var(--border); background: var(--paprika-tint); }
  .mainnav a:last-child { border-bottom: none; }
  .nav-dropdown { flex-direction: column; }
  .nav-dropdown-menu {
    display: flex;
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 0 18px;
    min-width: 0;
    background: none;
  }
  .nav-dropdown-menu a { border-bottom: 1px solid var(--border); border-left: 2px solid var(--border-strong); padding: 11px 8px; }
  .nav-dropdown-menu a:last-child { border-bottom: 1px solid var(--border); }
  .container { padding: 15px 12px 60px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  h2 { font-size: 19px; padding-bottom: 10px; margin-bottom: 12px; }
  .compliance-badge { font-size: 10px; padding: 4px 10px; }
  .metric { padding: 11px; gap: 9px; }
  .metric-icon { width: 32px; height: 32px; }
  .metric-icon svg { width: 15px; height: 15px; }
  .metric-label { font-size: 10px; line-height: 1.3; letter-spacing: 0.1px; }
  .metric-value { font-size: 19px; }
  .quick-actions { gap: 6px; }
  .quick-actions a { padding: 10px 13px; font-size: 12.5px; min-height: 40px; }
  form .row { grid-template-columns: 1fr; }
  form input[type=text], form input[type=number], form input[type=date], form input[type=datetime-local],
  form input[type=password], form select, form textarea, .checkbox,
  form input[type=email], form input[type=month], form input[type=time], form input[type=tel],
  form input[type=search], form input[type=url], .modal-box input[type=text], .modal-box input[type=email] {
    min-height: 44px;
  }
  .btn-primary, .btn-secondary { min-height: 46px; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar input, .filter-bar select, .filter-bar .row, .filter-bar .btn-secondary { flex: 1 1 auto; width: 100%; }
  .filter-bar .row { grid-template-columns: 1fr 1fr; }
  .filter-bar .btn-secondary { min-height: 44px; }
  .item { flex-direction: column; }
  .item > a.delete, .item > div.actions { align-self: flex-end; }
  .doc-list li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .doc-form { flex-direction: column; }
  form input[type=text], form input[type=number], form input[type=date], form input[type=datetime-local],
  form input[type=password], form select, form textarea, .filter-bar input, .filter-bar select,
  form input[type=email], form input[type=month], form input[type=time], form input[type=tel],
  form input[type=search], form input[type=url], .modal-box input[type=text], .modal-box input[type=email] {
    font-size: 16px;
  }
  .login-box { width: 90%; max-width: 320px; }
}

@media (max-width: 360px) {
  .brand-tagline { display: none; }
}

/* Modal (pop-up) - "+ Ekle" butonlarına tıklanınca açılan form penceresi */
.modal-trigger-btn {
  display: inline-flex; align-items: center; gap: 8px; width: auto;
  padding: 12px 20px; margin-bottom: 16px; font-size: 14.5px;
}
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(20, 14, 10, 0.55);
  z-index: 150;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--cream);
  border-radius: 16px;
  max-width: 480px;
  width: 100%;
  padding: 22px;
  box-shadow: 0 16px 48px rgba(20, 14, 10, 0.35);
  position: relative;
  margin: auto 0;
}
.modal-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 16px;
  padding-right: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}
.modal-title .icon { color: var(--paprika); }
.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--muted-bg);
  border: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--clay-muted);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.modal-close:hover { background: var(--paprika-tint); color: var(--paprika-dark); }
.modal-box form { margin: 0; }

@media (max-width: 640px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-box { max-width: 100%; border-radius: 16px 16px 0 0; max-height: 92vh; overflow-y: auto; }
}

/* Yatay (landscape) telefon/tablet - dikey alan kısıtlı, header'ı küçült */
@media (max-height: 440px) and (orientation: landscape) {
  .topbar { padding: 6px 16px; }
  .brand { gap: 8px; }
  .brand-logo { height: 26px; }
  .brand-name { font-size: 13.5px; }
  .brand-tagline { display: none; }
  .mainnav a { padding: 7px 11px; min-height: 36px; font-size: 12.5px; }
  .container { padding-top: 14px; }
}

/* Tablet: orta genişlikte biraz daha ferah aralıklar */
@media (min-width: 641px) and (max-width: 1024px) {
  .container { padding-left: 24px; padding-right: 24px; }
  .card, .item-block { padding: 20px; }
}

/* Başarı bildirimi (toast) */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--cream);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 300;
  max-width: 90vw;
}
.toast .icon { color: var(--olive); flex-shrink: 0; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Özel onay penceresi (silme onayı) */
.confirm-box { max-width: 380px; text-align: center; }
.confirm-message { font-size: 14px; color: var(--ink); margin: 4px 0 18px; line-height: 1.5; }
.confirm-actions { display: flex; gap: 10px; }
.confirm-actions button { flex: 1; }
.btn-danger { background: var(--brick) !important; }
.btn-danger:hover { background: #8C2E23 !important; }

/* Form doğrulama - geçersiz alanları belirgin göster */
form.was-validated :invalid {
  border-color: var(--brick) !important;
  box-shadow: 0 0 0 3px var(--brick-bg) !important;
}

/* Uzun pop-up formlarda kaydet butonunu mobilde sabitle */
@media (max-width: 640px) {
  .modal-box > form > button[type=submit]:last-child,
  .modal-box form > button.btn-primary:last-child {
    position: sticky;
    bottom: -2px;
    margin-top: 12px;
  }
}

/* "Bugün" rozeti */
.badge-today {
  background: var(--paprika);
  color: #fff;
}
.badge-upcoming {
  background: var(--honey-bg);
  color: var(--honey);
  font-weight: 700;
}

/* Temizlik - aylık gün kartları ve kontrol listesi */
.temizlik-day summary { justify-content: space-between; width: 100%; }
.temizlik-day-date { font-size: 14px; }
.temizlik-checklist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.temizlik-check-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--muted-bg);
  border-radius: 9px;
  padding: 10px 12px;
}
.temizlik-check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
.temizlik-check-label input[type=checkbox] { width: 19px; height: 19px; accent-color: var(--paprika); flex-shrink: 0; }
.temizlik-check-done { cursor: default; }
.temizlik-check-mark { color: var(--olive); flex-shrink: 0; display: flex; }

/* ============================================================
   Ürün Beyanları: yemek türü seçim butonları ve çoklu seçim çubuğu
   ============================================================ */
.type-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 14px; }
.type-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--cream); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 8px 14px;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  text-decoration: none; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.type-chip:hover { border-color: var(--paprika); color: var(--paprika-dark); }
.type-chip.active { background: var(--paprika); border-color: var(--paprika); color: #fff; }
.type-chip-count {
  background: var(--muted-bg); color: var(--clay-muted);
  border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-weight: 700;
}
.type-chip.active .type-chip-count { background: rgba(255,255,255,0.22); color: #fff; }
.type-chip-empty { opacity: 0.5; }
.type-chip-all { border-style: dashed; }

.select-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  background: var(--sand); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 12px;
}
.select-bar-all { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; cursor: pointer; margin: 0; }
.select-bar-count { font-size: 12.5px; color: var(--clay-muted); }
.select-bar-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.select-bar-actions button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Seçim kutulu liste kartı: kutu kartın dışında kalır, karta tıklayınca
   yine detay sayfası açılır. */
.item-selectable { align-items: stretch; }
.item-check { display: flex; align-items: flex-start; padding-top: 2px; margin: 0; cursor: pointer; }
.item-check input { width: 17px; height: 17px; cursor: pointer; }
.item-body {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; flex: 1; text-decoration: none; color: inherit;
}

/* ============================================================
   Araç kilometre takibi
   ============================================================ */
.km-alert {
  display: flex; align-items: flex-start; gap: 8px;
  border-radius: 9px; padding: 10px 12px; margin-bottom: 12px;
  font-size: 13.5px; line-height: 1.45;
}
.km-alert svg { flex-shrink: 0; margin-top: 1px; }
.km-alert-danger { background: var(--brick-bg); color: var(--brick); border: 1px solid var(--brick); }
.km-alert-warn { background: var(--honey-bg); color: var(--honey); border: 1px solid var(--honey); }
.km-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.km-stat { background: var(--sand); border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; }
.km-stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.3px; color: var(--clay-muted); }
.km-stat-value { font-size: 19px; font-weight: 700; color: var(--ink); margin-top: 3px; font-variant-numeric: tabular-nums; }
.km-stat-sub { font-size: 12px; color: var(--clay-muted); margin-top: 2px; }
.km-history { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.km-history-title { font-size: 13px; font-weight: 700; margin: 0 0 6px; }
.km-history-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 13px;
}
.km-history-row:last-child { border-bottom: 0; }
.km-history-date { color: var(--clay-muted); min-width: 78px; }
.km-history-km { font-variant-numeric: tabular-nums; min-width: 92px; }
.km-history-src { flex: 1; min-width: 0; }
.km-history-row .delete { margin-left: auto; }
@media (max-width: 640px) { .km-stats { grid-template-columns: 1fr; } }

/* ============================================================
   Özet: Yaklaşan süreler — kategori etiketi ve gün filtresi
   ============================================================ */
.upcoming-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.upcoming-head .card-title { margin: 0; }
.upcoming-filter { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.upcoming-filter button {
  background: var(--cream); border: 1px solid var(--border-strong); color: var(--ink);
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.upcoming-filter button:hover { border-color: var(--paprika); color: var(--paprika-dark); }
.upcoming-filter button.active { background: var(--paprika); border-color: var(--paprika); color: #fff; }
.upcoming-filter button .uf-count { opacity: 0.75; font-weight: 700; margin-left: 3px; }
.up-cat {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px;
  padding: 2px 8px; border-radius: 999px; margin-right: 7px; vertical-align: 1px;
  background: var(--muted-bg); color: var(--clay-muted); white-space: nowrap;
}
.up-cat-ilaclama { background: #E8F0DD; color: #43571F; }
.up-cat-arac { background: #E3EAF3; color: #2F4B6E; }
.up-cat-personel { background: #F3E4EC; color: #7A2E55; }
.up-cat-belge { background: #FBF0D6; color: #7A4E00; }
.up-cat-ekipman { background: #EDE6F5; color: #54407A; }
.up-cat-atik { background: #F1E7DA; color: #6B4A22; }
.up-cat-analiz { background: #DDEFEF; color: #235C5C; }
.up-detail { display: block; font-size: 12px; color: var(--clay-muted); margin-top: 2px; }
.badge-km { background: #E3EAF3; color: #2F4B6E; }
.upcoming-empty { font-size: 13px; color: var(--clay-muted); padding: 10px 2px 2px; margin: 0; }

/* Görevler: araç km girişi satırı */
.km-task-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--border);
}
.km-task-info { flex: 1 1 220px; min-width: 0; }
.km-task-form { display: flex; gap: 6px; align-items: center; flex: 0 1 auto; flex-wrap: wrap; }
.km-task-form input[type=number] { width: 130px; margin: 0; }
.km-task-form input[type=text] { width: 120px; margin: 0; }
.km-task-form .btn-secondary { margin: 0; }
@media (max-width: 640px) {
  .km-task-form { width: 100%; }
  .km-task-form input[type=number], .km-task-form input[type=text] { flex: 1 1 110px; width: auto; }
}

/* ============================================================
   Toplu km girişi (arac_km_toplu.php)
   ============================================================ */
.bulk-km-summary { padding: 14px 16px; }
.bulk-km-head .row { margin-bottom: 4px; }
.bulk-km-list {
  background: var(--cream); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; margin-bottom: 14px;
}
.bulk-km-row {
  display: grid;
  grid-template-columns: minmax(130px, 1.2fr) minmax(110px, 1fr) minmax(130px, 1.1fr) minmax(160px, 1.3fr) minmax(120px, 1.1fr);
  gap: 12px; align-items: start;
  padding: 12px 14px; border-top: 1px solid var(--border);
}
.bulk-km-row:first-child { border-top: 0; }
.bulk-km-row-head {
  background: var(--sand); font-size: 11.5px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--clay-muted); padding-top: 9px; padding-bottom: 9px; align-items: center;
}
.bulk-km-row.is-due { background: var(--honey-bg); box-shadow: inset 4px 0 0 var(--honey); }
.bulk-km-row.just-saved { background: var(--olive-bg); box-shadow: inset 4px 0 0 var(--olive); }
.bulk-km-row.has-error, .bulk-km-row.bk-bad { background: var(--brick-bg); box-shadow: inset 4px 0 0 var(--brick); }
.bk-vehicle, .bk-last, .bk-status, .bk-input { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bk-vehicle a { color: var(--ink); text-decoration: none; }
.bk-vehicle a:hover { color: var(--paprika); text-decoration: underline; }
.bk-last strong { font-variant-numeric: tabular-nums; }
.bk-status .badge { align-self: flex-start; }
.bk-maint { font-size: 12px; }
.bk-maint-warn { color: var(--honey); font-weight: 600; }
.bk-input input, .bk-note input { width: 100%; margin: 0; }
.bk-input input { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.3px; }
.bulk-km-row.bk-good .bk-input input { border-color: var(--olive); }
.bulk-km-row.bk-bad .bk-input input, .bulk-km-row.has-error .bk-input input { border-color: var(--brick); }
.bk-diff { font-size: 12px; color: var(--olive); font-weight: 600; min-height: 15px; }
.bk-diff-warn { color: var(--honey); }
.bk-diff-bad { color: var(--brick); }
.bk-error { font-size: 12px; color: var(--brick); line-height: 1.4; }
.bk-mobile-label { display: none; }
.bulk-km-actions {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap;
  background: var(--sand); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; box-shadow: 0 -4px 14px rgba(43,32,24,0.08);
}
.bulk-km-actions .btn-primary { width: auto; min-width: 180px; margin: 0; }
.bulk-km-actions .btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 760px) {
  .bulk-km-row-head { display: none; }
  .bulk-km-row { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .bk-vehicle { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .bk-input, .bk-note { grid-column: 1 / -1; }
  .bk-mobile-label { display: block; font-size: 11px; font-weight: 700; color: var(--clay-muted); letter-spacing: 0.3px; }
  .bulk-km-actions { justify-content: space-between; }
  .bulk-km-actions .btn-primary { flex: 1 1 auto; }
}

.bulk-km-summary.card-warn { border-left: 4px solid var(--honey); }
.bulk-km-summary.card-ok { border-left: 4px solid var(--olive); }
.km-task-card { border-left: 4px solid var(--honey); }
.km-task-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.km-task-btn { width: auto; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; margin: 0; }
.km-task-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.km-task-chip {
  display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none;
  background: var(--honey-bg); color: var(--honey); border: 1px solid var(--honey);
  border-radius: 999px; padding: 5px 11px; font-size: 12.5px;
}
.km-task-chip strong { color: var(--ink); }
.km-task-chip.late { background: var(--brick-bg); color: var(--brick); border-color: var(--brick); }
@media (max-width: 640px) { .km-task-btn { width: 100%; justify-content: center; } }

/* ============================================================
   Yardım balonu (help_tip)
   ============================================================ */
.help-tip { position: relative; display: inline-flex; vertical-align: middle; }
.help-tip-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; margin: 0 0 0 5px;
  border: none; background: transparent; color: var(--clay-faint);
  cursor: pointer; border-radius: 50%; transition: color 0.15s, background 0.15s, transform 0.15s;
}
.help-tip-btn:hover { color: var(--paprika); background: var(--paprika-tint); transform: scale(1.1); }
.help-tip-pop {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 60;
  width: max-content; max-width: min(320px, 78vw);
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: 11px;
  box-shadow: var(--shadow-strong); padding: 12px 14px;
  font-size: 12.5px; line-height: 1.55; font-weight: 400; text-align: left;
  white-space: normal; text-transform: none; letter-spacing: normal;
  animation: help-pop-in 0.13s ease-out;
}
.help-tip-pop-right { left: auto; right: 0; }
.help-tip-pop::before {
  content: ""; position: absolute; top: -6px; left: 12px;
  width: 11px; height: 11px; background: var(--cream);
  border-left: 1px solid var(--border-strong); border-top: 1px solid var(--border-strong);
  transform: rotate(45deg);
}
.help-tip-pop-right::before { left: auto; right: 12px; }
.help-tip-title { display: block; color: var(--paprika); font-weight: 700; margin-bottom: 5px; font-size: 13px; }
.help-tip-body { display: block; color: var(--clay-muted); }
@keyframes help-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
  /* Mobilde balon, butonun konumundan bağımsız olarak ekrana göre
     konumlanır — dar ekranda kenardan taşmasın diye. */
  .help-tip-pop {
    position: fixed; left: 12px !important; right: 12px !important; top: auto;
    max-width: none; width: auto;
  }
  .help-tip-pop::before { display: none; }
}

/* ============================================================
   Tasarım canlandırması — palet aynı, mevcut renkler daha canlı.
   Yapısal hiçbir şey değişmiyor; sadece derinlik, vurgu ve
   yumuşak hareket ekleniyor.
   ============================================================ */

/* Kartlarda üstte çok ince, sıcak bir vurgu şeridi ve yumuşak hover */
.card { position: relative; transition: box-shadow 0.18s ease, transform 0.18s ease; }

/* Özet metrik kutuları: düz zemin yerine hafif degrade + hover kalkışı */
.metric-card, .stat-box, .pd-stat, .km-stat {
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.metric-card:hover, .stat-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
  border-color: var(--border-strong);
}

/* Tıklanabilir uyarı/görev satırları: hover'da sıcak zemin + sağ ok kayması */
a.warn-row { transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease; }
a.warn-row:hover {
  background: var(--sand);
  border-color: var(--border-strong);
  transform: translateX(2px);
}
a.warn-row .warn-row-arrow { transition: transform 0.15s ease; }
a.warn-row:hover .warn-row-arrow { transform: translateX(3px); }

/* Birincil butonlarda yumuşak kalkış ve gölge */
.btn-primary { transition: background 0.15s ease, box-shadow 0.16s ease, transform 0.12s ease; }
.btn-primary:hover:not([disabled]) {
  background: var(--paprika-dark);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--paprika) 28%, transparent);
  transform: translateY(-1px);
}
.btn-primary:active:not([disabled]) { transform: translateY(0); box-shadow: var(--shadow-soft); }

/* İkincil butonlarda ince renk canlanması */
.btn-secondary { transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
.btn-secondary:hover { border-color: var(--paprika); color: var(--paprika-dark); }

/* Rozetlerde hafif canlılık: durumlar biraz daha okunur */
.badge { transition: filter 0.15s ease; }
a.badge:hover { filter: brightness(0.96); }

/* Liste kartları (item): hover'da hafif yükselme */
.item { transition: box-shadow 0.16s ease, border-color 0.16s ease; }
.item:hover { box-shadow: var(--shadow-soft); border-color: var(--border-strong); }

/* Menüde aktif sekmenin altında canlı bir vurgu çizgisi */
.mainnav > a.active, .nav-dropdown > a.active {
  position: relative;
}

/* ============================================================
   Buton ve yüzey yumuşatması — köşeler daha yuvarlak, dolgular
   degrade, gölgeler yumuşak. Renk paleti korunur.
   ============================================================ */
.btn-primary {
  border-radius: 12px;
  background: linear-gradient(160deg, var(--paprika) 0%, var(--paprika-dark) 100%);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--paprika) 24%, transparent), inset 0 1px 0 rgba(255,255,255,0.12);
  letter-spacing: 0.2px;
}
.btn-primary:hover:not([disabled]) {
  background: linear-gradient(160deg, var(--paprika-dark) 0%, var(--paprika-dark) 100%);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--paprika) 30%, transparent), inset 0 1px 0 rgba(255,255,255,0.12);
  transform: translateY(-1px);
}
.btn-primary:active:not([disabled]) { transform: translateY(0) scale(0.99); box-shadow: 0 2px 7px color-mix(in srgb, var(--paprika) 24%, transparent); }

.btn-secondary {
  border-radius: 12px;
  border-width: 1.5px;
  background: var(--cream);
  box-shadow: 0 1px 3px rgba(32,24,18,0.06);
}
.btn-secondary:hover {
  background: var(--paprika-tint);
  border-color: var(--paprika);
  transform: translateY(-1px);
  box-shadow: 0 3px 9px color-mix(in srgb, var(--paprika) 14%, transparent);
}
.btn-secondary:active { transform: translateY(0) scale(0.99); }

/* Kartlar ve kutular biraz daha yuvarlak ve daha yumuşak gölgeli */
.card { border-radius: 16px; box-shadow: 0 2px 10px rgba(32,24,18,0.06); border-color: var(--border); }
.card:hover { box-shadow: 0 6px 20px rgba(32,24,18,0.09); }
.warn-row { border-radius: 12px; }
.item { border-radius: 14px; }
.badge { border-radius: 999px; padding: 3px 10px; }

/* Form alanları: köşeler biraz daha yumuşak, odakta sıcak halka */
form input[type=text], form input[type=number], form input[type=date], form input[type=datetime-local],
form input[type=time], form input[type=password], form input[type=file], form select, form textarea,
form input[type=email], form input[type=month], form input[type=tel], form input[type=search], form input[type=url],
.modal-box input, .modal-box select, .modal-box textarea {
  border-radius: 11px;
}
/* Modal select'lerde tarayıcı oku yerine tek özel ok — tekrarlamasın */
.modal-box select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237A6B5D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}
form input:focus, form select:focus, form textarea:focus,
.modal-box input:focus, .modal-box select:focus, .modal-box textarea:focus {
  box-shadow: 0 0 0 3px var(--paprika-tint);
  border-color: var(--paprika);
}

/* Metrik kutuları: köşeleri yuvarla, sol renk şeridini yumuşat */
.metric-card, .stat-box { border-radius: 14px; }

/* Modal kutusu daha yumuşak */
.modal-box { border-radius: 18px; box-shadow: 0 12px 40px rgba(32,24,18,0.22); }

/* "Geri dön" gibi ince bağlantı-butonları da yumuşasın */
.back-link, .btn-ghost {
  border-radius: 11px; transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.back-link:hover, .btn-ghost:hover { transform: translateX(-2px); }

/* Özet kısayol butonlarında konu renkleri (ikon + hover) */
.quick-actions a[data-nav] .icon { transition: transform 0.15s ease; }
.quick-actions a[data-nav]:hover { transform: translateY(-1px); box-shadow: 0 3px 9px rgba(32,24,18,0.10); }
.quick-actions a[data-nav]:hover .icon { transform: scale(1.12); }
.quick-actions a[data-nav="red"]    .icon { color: #C0392B; }
.quick-actions a[data-nav="orange"] .icon { color: #D35400; }
.quick-actions a[data-nav="amber"]  .icon { color: #B8860B; }
.quick-actions a[data-nav="green"]  .icon { color: #3E7A34; }
.quick-actions a[data-nav="red"]:hover    { border-color: #C0392B; background: #FBE9E6; }
.quick-actions a[data-nav="orange"]:hover { border-color: #D35400; background: #FBEDE0; }
.quick-actions a[data-nav="amber"]:hover  { border-color: #B8860B; background: #FAF0D5; }
.quick-actions a[data-nav="green"]:hover  { border-color: #3E7A34; background: #E8F2E2; }
[data-theme="dark"] .quick-actions a[data-nav="red"]    .icon { color: #F07568; }
[data-theme="dark"] .quick-actions a[data-nav="orange"] .icon { color: #F0925A; }
[data-theme="dark"] .quick-actions a[data-nav="amber"]  .icon { color: #E0B84E; }
[data-theme="dark"] .quick-actions a[data-nav="green"]  .icon { color: #7FC06F; }
[data-theme="dark"] .quick-actions a[data-nav]:hover { background: var(--sand); }

/* ============================================================
   İKİNCİL / AKSİYON BUTONLARI — düz beyaz görünümden kurtarma
   ============================================================
   Amaç: PDF/Görüntüle/E-posta/CSV, "geri dön" ve "sil" gibi butonlar
   artık degradeli, hafif gölgeli ve işlevine göre renkli. Palet aynı.
   Tek noktadan; HTML değişmeden tüm sayfalara uygulanır.
*/

/* Ortak ikincil buton görünümü: yumuşak degrade zemin + ince gölge */
.btn-secondary {
  background: linear-gradient(170deg, var(--cream) 0%, var(--sand) 100%);
  border-color: var(--border-strong);
  color: var(--paprika-dark);
  box-shadow: 0 1px 2px rgba(32,24,18,0.05), inset 0 1px 0 rgba(255,255,255,0.5);
}

/* --- Rapor aksiyon çubuğu butonları (PDF / Görüntüle / E-posta / CSV) --- */
.print-btn {
  border-radius: 10px;
  border-width: 1.5px;
  font-weight: 700;
}
.print-btn .icon { transition: transform 0.15s ease; }
.print-btn:hover .icon { transform: scale(1.12); }

/* PDF indir — sıcak kiremit tonu */
.print-btn[href*="download_pdf.php"] {
  color: #A83A20;
  border-color: #E0B7A6;
  background: linear-gradient(170deg, #FFFDFB 0%, #FBEEE7 100%);
}
.print-btn[href*="download_pdf.php"]:hover,
.print-btn[onclick*="download_pdf.php"]:hover {
  border-color: #A83A20; background: #FBE3D8;
  box-shadow: 0 3px 9px rgba(168,58,32,0.18); transform: translateY(-1px);
}
.print-btn[onclick*="download_pdf.php"] {
  color: #A83A20; border-color: #E0B7A6;
  background: linear-gradient(170deg, #FFFDFB 0%, #FBEEE7 100%);
}
/* Görüntüle / Yazdır (yazdir.php, csv olmayan) — sakin mavi-gri */
.print-btn[href*="yazdir.php"]:not([href*="csv"]),
.print-btn[onclick*="yazdir.php"] {
  color: #34508C;
  border-color: #B9C4DC;
  background: linear-gradient(170deg, #FFFFFF 0%, #EEF2F9 100%);
}
.print-btn[href*="yazdir.php"]:not([href*="csv"]):hover,
.print-btn[onclick*="yazdir.php"]:hover {
  border-color: #34508C; background: #E5EBF6;
  box-shadow: 0 3px 9px rgba(52,80,140,0.18); transform: translateY(-1px);
}
/* E-posta ile Gönder — canlı yeşil */
.print-btn[onclick*="openEmailReportModal"],
.print-btn[onclick*="pdEmail"] {
  color: #2F6B2A;
  border-color: #AECBA4;
  background: linear-gradient(170deg, #FFFFFF 0%, #EBF3E6 100%);
}
.print-btn[onclick*="openEmailReportModal"]:hover,
.print-btn[onclick*="pdEmail"]:hover {
  border-color: #2F6B2A; background: #E1EFDA;
  box-shadow: 0 3px 9px rgba(47,107,42,0.18); transform: translateY(-1px);
}
/* CSV indir — kehribar */
.print-btn[href*="csv"] {
  color: #8A5A00;
  border-color: #DCC38A;
  background: linear-gradient(170deg, #FFFFFF 0%, #FAF2DE 100%);
}
.print-btn[href*="csv"]:hover {
  border-color: #8A5A00; background: #F7EBCB;
  box-shadow: 0 3px 9px rgba(138,90,0,0.16); transform: translateY(-1px);
}
/* Pasif (disabled) seçim butonları renksiz kalsın */
.print-btn[disabled] {
  color: var(--clay-faint) !important;
  border-color: var(--border) !important;
  background: var(--muted-bg) !important;
  box-shadow: none !important; transform: none !important;
}

/* --- "Geri dön" butonu: daha belirgin, derinlikli --- */
.back-link-btn {
  border-radius: 11px;
  border-width: 1.5px;
  background: linear-gradient(170deg, var(--cream) 0%, var(--sand) 100%);
  box-shadow: 0 1px 3px rgba(32,24,18,0.07), inset 0 1px 0 rgba(255,255,255,0.5);
}
.back-link-btn::before { content: ""; }
.back-link-btn:hover {
  background: var(--paprika-tint); border-color: var(--paprika);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--paprika) 14%, transparent); transform: translateX(-2px);
}

/* --- "Sil" butonu: kırmızı tonuna otursun, beyazdan çıksın --- */
.delete {
  border-radius: 9px;
  color: #A83A20;
  border-color: #E0B7A6;
  background: linear-gradient(170deg, #FFFDFB 0%, #FBEEE7 100%);
  padding: 7px 11px;
  box-shadow: 0 1px 2px rgba(168,58,32,0.06);
}
.delete:hover {
  color: #fff;
  background: linear-gradient(170deg, var(--brick) 0%, #8F2E18 100%);
  border-color: var(--brick);
  box-shadow: 0 3px 9px rgba(168,58,32,0.28);
}

/* --- Koyu tema karşılıkları --- */
[data-theme="dark"] .btn-secondary {
  background: linear-gradient(170deg, var(--cream) 0%, #2E2620 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="dark"] .print-btn[href*="download_pdf.php"],
[data-theme="dark"] .print-btn[onclick*="download_pdf.php"] { color: #F0906F; border-color: #6A4034; background: linear-gradient(170deg, #2A211C 0%, #3A2820 100%); }
[data-theme="dark"] .print-btn[href*="yazdir.php"]:not([href*="csv"]),
[data-theme="dark"] .print-btn[onclick*="yazdir.php"] { color: #8FB0E6; border-color: #3C4A66; background: linear-gradient(170deg, #22262E 0%, #2A3242 100%); }
[data-theme="dark"] .print-btn[onclick*="openEmailReportModal"],
[data-theme="dark"] .print-btn[onclick*="pdEmail"] { color: #86C878; border-color: #3B5533; background: linear-gradient(170deg, #212A1E 0%, #2A3826 100%); }
[data-theme="dark"] .print-btn[href*="csv"] { color: #E0B84E; border-color: #5A4A23; background: linear-gradient(170deg, #2A2618 0%, #38311C 100%); }
[data-theme="dark"] .print-btn[disabled] { color: var(--clay-faint) !important; background: var(--muted-bg) !important; border-color: var(--border) !important; }
[data-theme="dark"] .back-link-btn { background: linear-gradient(170deg, var(--cream) 0%, #2E2620 100%); }
[data-theme="dark"] .delete { color: #F0906F; border-color: #5A382E; background: linear-gradient(170deg, #2A211C 0%, #38271F 100%); }

/* ============================================================
   TARİH / SAAT alanları ve form kontrollerini canlandırma
   ============================================================ */
/* Tarih/saat kutuları: markanın takvim ikonu, daha davetkâr görünüm */
input[type=date], input[type=datetime-local], input[type=time], input[type=month] {
  position: relative;
  cursor: pointer;
}
/* Tarayıcının gri takvim ikonunu paprika tonuna boya (WebKit/Blink) */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.75;
  border-radius: 6px;
  padding: 3px;
  transition: background 0.15s, opacity 0.15s;
  /* Gri yerine paprika: filtre ile SVG'yi renklendir */
  filter: invert(11%) sepia(78%) saturate(4200%) hue-rotate(347deg) brightness(70%);
}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover,
input[type=month]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: var(--paprika-tint);
}
[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type=datetime-local]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type=time]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type=month]::-webkit-calendar-picker-indicator {
  /* Koyu temada zaten color-scheme:dark ikonu açık yapıyor; hafif paprika ton */
  filter: invert(64%) sepia(38%) saturate(900%) hue-rotate(320deg) brightness(102%);
}
/* Tarih kutusuna odak/hover'da sıcak vurgu (form input kuralıyla uyumlu) */
input[type=date]:hover, input[type=datetime-local]:hover,
input[type=time]:hover, input[type=month]:hover { border-color: var(--paprika) !important; }

/* Select açılır ok'u biraz daha canlı (soluk gri yerine kil tonu → paprika hover) */
form select:hover, .filter-bar select:hover, .modal-box select:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237D0912' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Filtre çubuğu: sade beyaz yerine yumuşak degrade + belirginlik */
.filter-bar {
  background: linear-gradient(170deg, var(--cream) 0%, var(--sand) 100%);
  border-color: var(--border-strong);
  box-shadow: 0 1px 4px rgba(32,24,18,0.05);
}
.filter-bar input, .filter-bar select {
  background-color: var(--cream);
  border-radius: 9px;
  box-shadow: inset 0 1px 2px rgba(43,32,24,0.04);
}
/* filter-bar select ok'u: form select ile aynı, kaybolmasın */
.filter-bar select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237A6B5D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}
.filter-bar input:focus, .filter-bar select:focus {
  border-color: var(--paprika);
  box-shadow: 0 0 0 3px var(--paprika-tint);
}

/* Tarih alanlarını saran field kutusuna küçük etiket vurgusu */
.field-label { color: var(--clay-muted); font-weight: 600; }

/* Boş-durum / bilgilendirme kutuları (örn. "Kayıtları görüntülemek için filtre
   seçin") sade beyazdan çıksın — hafif degrade ve sıcak kenar */
.card-info, .empty-state, .info-box {
  background: linear-gradient(170deg, var(--sand) 0%, var(--cream) 100%);
  border-color: var(--border-strong);
}

/* ============================================================
   Boş durum kutuları — cansız gri ikon yerine renk dairesi
   ============================================================ */
/* "Filtre seçin / kayıt yok" gibi ortalı bilgi kartlarındaki ikonu,
   yumuşak paprika daire içine al. HTML değişmeden, ortalı card-title'a
   uygulanır. */
.card-info .card-title[style*="center"] .icon,
.card .card-title[style*="center"] .icon {
  color: var(--paprika);
  background: var(--paprika-tint);
  border-radius: 50%;
  padding: 7px;
  width: 32px; height: 32px;
  box-sizing: content-box;
  margin-right: 4px;
}
.card-info .card-title[style*="center"],
.card .card-title[style*="center"] {
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
}
[data-theme="dark"] .card-info .card-title[style*="center"] .icon,
[data-theme="dark"] .card .card-title[style*="center"] .icon {
  background: var(--paprika-tint);
}

/* ============================================================
   Rozetlere hafif derinlik (degrade + ince gölge)
   ============================================================ */
.badge {
  background-image: linear-gradient(170deg, rgba(255,255,255,0.35) 0%, rgba(0,0,0,0.02) 100%);
  box-shadow: 0 1px 2px rgba(32,24,18,0.06), inset 0 1px 0 rgba(255,255,255,0.25);
  border: 1px solid rgba(0,0,0,0.04);
}
a.badge { transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease; }
a.badge:hover { transform: translateY(-1px); box-shadow: 0 3px 7px rgba(32,24,18,0.12); filter: brightness(0.98); }
[data-theme="dark"] .badge {
  background-image: linear-gradient(170deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.12) 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  border-color: rgba(255,255,255,0.05);
}

/* ============================================================
   Sayfa başlığı ikonuna yumuşak renk dairesi (marka tonu)
   ============================================================ */
h2 > span:first-of-type .icon {
  color: var(--paprika);
  background: var(--paprika-tint);
  border-radius: 10px;
  padding: 6px;
  width: 24px; height: 24px;
  box-sizing: content-box;
}
[data-theme="dark"] h2 > span:first-of-type .icon { background: var(--paprika-tint); }

/* ============================================================
   Araç sigorta / kasko poliçe kartı
   ============================================================ */
.policy-block {
  border: 1px solid var(--border); border-radius: 11px;
  padding: 11px 13px; margin-bottom: 10px; background: var(--cream);
}
.policy-block.policy-overdue { border-color: var(--brick); background: var(--brick-bg); box-shadow: inset 3px 0 0 var(--brick); }
.policy-block.policy-upcoming { border-color: var(--honey); background: var(--honey-bg); box-shadow: inset 3px 0 0 var(--honey); }
.policy-head { display: flex; align-items: center; gap: 9px; }
.policy-head strong { font-size: 14px; }
.policy-info { font-size: 12.5px; color: var(--clay-muted); margin-top: 4px; }
.policy-info.muted { font-style: italic; }
.policy-edit { margin-top: 4px; }
.policy-edit summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--paprika-dark);
  padding: 8px 12px; background: var(--sand); border: 1px solid var(--border-strong);
  border-radius: 9px; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.policy-edit summary::-webkit-details-marker { display: none; }
.policy-edit summary::before { content: "✎"; font-size: 12px; }
.policy-edit summary:hover { background: var(--paprika-tint); border-color: var(--paprika); }
.policy-edit[open] summary { margin-bottom: 4px; }

/* Poliçe belgeleri: yükleme, liste, toplu indirme */
.policy-download {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  background: var(--sand); border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 12px;
}
.policy-download-label { font-size: 12.5px; font-weight: 600; color: var(--clay-muted); display: inline-flex; align-items: center; gap: 6px; }
.policy-download .btn-secondary { width: auto; padding: 7px 12px; font-size: 12.5px; text-decoration: none; margin: 0; }
.policy-docs { margin-top: 9px; border-top: 1px dashed var(--border); padding-top: 8px; }
.policy-doc-item {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 5px 0; font-size: 13px;
}
.policy-doc-item > a:first-child { color: var(--paprika-dark); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.policy-doc-item > a:first-child:hover { text-decoration: underline; }
.policy-doc-item .delete { margin-left: auto; padding: 4px 7px; }
.policy-upload { margin-top: 6px; }
.policy-upload-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--paprika-dark);
  background: var(--cream); border: 1.5px dashed var(--border-strong);
  border-radius: 9px; padding: 7px 13px; transition: border-color 0.15s, background 0.15s;
}
.policy-upload-btn:hover { border-color: var(--paprika); background: var(--paprika-tint); }

/* ============================================================
   MASAÜSTÜ SOL SIDEBAR DÜZENİ (641px ve üstü)
   Mobil (640px altı) drawer davranışı DEĞİŞMEZ — o kurallar korunur.
   Örnek tasarımdaki gibi: sol sabit dikey menü, gruplu başlıklar.
   ============================================================ */
.nav-group-label { display: none; } /* mobilde gizli, masaüstünde grup başlığı */

@media (min-width: 641px) {
  /* Gövdeyi sidebar + içerik olarak ikiye böl */
  body { }
  .app-header {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 232px;
    z-index: 40;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #4a0d12 0%, #3a0a0e 100%);
    box-shadow: 2px 0 12px rgba(20,14,10,0.14);
    overflow: hidden;
  }
  /* Üst marka bloğu (sidebar başlığı) */
  .topbar {
    flex-direction: column;
    align-items: stretch;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: none;
    padding: 18px 16px 14px;
    row-gap: 12px;
  }
  .topbar .brand { gap: 10px; }
  .topbar .brand-logo {
    height: 38px; background: #fff; border-radius: 9px; padding: 4px;
  }
  .topbar .brand-name { color: #fff; font-size: 16px; }
  .topbar .brand-tagline { color: rgba(255,255,255,0.6); }
  /* Kullanıcı barı: sidebar'ın üst kısmında yatay */
  .topbar-actions {
    justify-content: flex-start;
    gap: 6px; flex-wrap: wrap;
  }
  .topbar .theme-toggle {
    background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85);
    width: 32px; height: 32px;
  }
  .topbar .theme-toggle:hover { background: rgba(255,255,255,0.2); color: #fff; }
  .topbar .logout {
    color: rgba(255,255,255,0.75);
  }
  .topbar .logout:hover { background: rgba(255,255,255,0.12); color: #fff; }
  .hamburger-btn { display: none !important; }
  .mainnav-drawer-head { display: none !important; }

  /* Menü: dikey, kaydırılabilir liste */
  .mainnav {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 1px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 10px 10px 24px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
  }
  .nav-group-label {
    display: block;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px;
    color: rgba(255,255,255,0.4);
    padding: 14px 12px 5px;
  }
  .nav-group-label:first-child { padding-top: 4px; }
  .mainnav a {
    color: rgba(255,255,255,0.82);
    padding: 9px 12px;
    border: none;
    border-radius: 9px;
    border-left: 3px solid transparent;
    min-height: 40px;
    font-size: 13px;
    gap: 11px;
  }
  .mainnav a span { flex: 1; }
  /* İkonlar sidebar'da açık/beyazımsı — konu renkleri koyu zeminde kaybolur */
  .mainnav a[data-nav] .icon { color: rgba(255,255,255,0.7) !important; }
  .mainnav a:hover:not(.active) {
    background: rgba(255,255,255,0.08);
    color: #fff;
    box-shadow: none;
    border-color: transparent;
  }
  .mainnav a:hover:not(.active) .icon { color: #fff !important; transform: none; }
  .mainnav a.active {
    background: rgba(255,255,255,0.14);
    color: #fff;
    font-weight: 700;
    border-left: 3px solid #fff;
    box-shadow: none;
  }
  .mainnav a.active .icon { color: #fff !important; transform: none; }

  /* Alt menülü öğeler: sidebar'da açılır liste yerine düz alt satırlar */
  .nav-dropdown { flex-direction: column; align-items: stretch; }
  .nav-dropdown-menu {
    position: static;
    display: flex; flex-direction: column;
    background: transparent; border: none; box-shadow: none;
    min-width: 0; padding: 0 0 0 34px; margin: 0;
    opacity: 1; visibility: visible; transform: none;
  }
  .nav-dropdown-menu a {
    color: rgba(255,255,255,0.6); font-size: 12.5px;
    padding: 7px 10px; border-radius: 7px; min-height: 0;
    border-left: 2px solid rgba(255,255,255,0.15);
  }
  .nav-dropdown-menu a:hover { background: rgba(255,255,255,0.08); color: #fff; }
  .nav-dropdown-menu a.active { background: rgba(255,255,255,0.12); color: #fff; border-left-color: #fff; }
  .nav-dropdown:hover .nav-dropdown-menu { display: flex; }

  /* İçerik alanı: sidebar genişliği kadar sağa kaydır */
  main.container {
    margin-left: 232px;
    max-width: none;
    width: auto;
    padding: 26px 30px 60px;
  }
  main.container.container-wide { margin-left: 232px; max-width: none; }
  /* İçeriği okunur genişlikte tut ama sidebar'a yaslama */
  main.container > * { max-width: 1180px; }
}

/* Geniş ekranda içerik sola yaslı kalır (ortalanmaz) — aksi halde
   inline butonlar hizadan kayardı. */

/* ============================================================
   İÇERİK ALANI CANLANDIRMA (641px ve üstü)
   Sidebar zengin oldu; sağdaki içerik de aynı özene kavuşsun.
   Mobil görünüm etkilenmez.
   ============================================================ */
@media (min-width: 641px) {
  /* Sayfa başlığı: daha ferah, ikon kutusu belirgin */
  main.container h2 {
    font-size: 26px;
    margin-bottom: 20px;
    padding-bottom: 15px;
  }
  main.container h2 > span:first-of-type { gap: 13px; }
  h2 > span:first-of-type .icon {
    background: var(--paprika-tint);
    border-radius: 12px;
    padding: 9px;
    width: 26px; height: 26px;
  }

  /* İçerik gövdesine hafif zemin farkı — sidebar/içerik ayrımı yumuşasın */
  body.role-admin, body.role-restricted { background: var(--sand); }
  main.container { background: var(--sand); }

  /* Kartlar: daha yumuşak, hover'da yükselen, sol renk vurgulu */
  main.container .card {
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(32,24,18,0.05);
    padding: 20px 22px;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
  }
  main.container .card:hover { box-shadow: 0 8px 24px rgba(32,24,18,0.08); }
  main.container .card-title {
    font-size: 14.5px; font-weight: 700;
    padding-bottom: 11px; margin-bottom: 14px;
  }

  /* Liste kartları: daha nefes alan, hover'da canlı */
  main.container .list { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
  main.container .item {
    border-radius: 14px;
    padding: 15px 17px;
    box-shadow: 0 2px 8px rgba(32,24,18,0.05);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border-strong);
    transition: box-shadow 0.16s ease, transform 0.14s ease, border-color 0.16s ease;
  }
  main.container .item:hover, main.container .item-clickable:hover {
    box-shadow: 0 8px 22px rgba(32,24,18,0.10);
    transform: translateY(-2px);
    border-color: var(--border-strong);
  }
  main.container .item strong { font-size: 15.5px; }

  /* Ekle butonu: daha belirgin, gölgeli, hover'da canlı */
  main.container .modal-trigger-btn,
  main.container > a.btn-primary {
    padding: 13px 24px;
    font-size: 15px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--paprika) 22%, transparent);
  }

  /* Filtre çubuğu: daha ferah */
  main.container .filter-bar { padding: 14px 16px; border-radius: 14px; }

  /* Boş durum kartı: sağ alanda ortalanmış, ferah dursun */
  main.container .card-info { border-radius: 16px; }

  /* Uyumluluk rozeti (sağ üst) biraz daha belirgin */
  .compliance-badge { font-size: 11px; padding: 5px 12px; }
}

/* İçerik genişliğini artır — sidebar sonrası daha çok yatay alan var */
@media (min-width: 1100px) {
  main.container > * { max-width: 1240px; }
  main.container .list { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
}

/* ============================================================
   LİSTE TABLOSU — kart-grid yerine satır satır düzgün tablo
   (örnek tasarımdaki gibi). Masaüstünde tablo, mobilde kart.
   ============================================================ */
.data-table-wrap {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(32,24,18,0.05);
  overflow: hidden;
  margin-bottom: 4px;
}
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table thead th {
  text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
  color: var(--clay-muted);
  padding: 13px 16px;
  background: var(--sand);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table thead th.dt-right { text-align: right; }
.data-table thead th.dt-center { text-align: center; }
.data-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.13s ease;
  cursor: pointer;
}
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--sand); }
.data-table td { padding: 13px 16px; vertical-align: middle; color: var(--ink); }
.data-table td.dt-right { text-align: right; }
.data-table td.dt-center { text-align: center; }
.data-table .dt-primary { font-weight: 700; font-size: 14px; color: var(--ink); line-height: 1.35; }
.data-table .dt-sub { font-size: 12px; color: var(--clay-muted); margin-top: 2px; }
.data-table .dt-muted { color: var(--clay-muted); }
.data-table .dt-arrow { color: var(--clay-faint); }
.data-table tbody tr:hover .dt-arrow { color: var(--paprika); }
/* Durum satırı sol renk şeridi */
.data-table tr.dt-danger td:first-child { box-shadow: inset 3px 0 0 var(--brick); }
.data-table tr.dt-warn td:first-child { box-shadow: inset 3px 0 0 var(--honey); }
.data-table tr.dt-ok td:first-child { box-shadow: inset 3px 0 0 var(--olive); }

/* Mobilde tabloyu karta dönüştür */
@media (max-width: 720px) {
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table-wrap { border: none; background: transparent; box-shadow: none; border-radius: 0; }
  .data-table tr {
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 12px 14px;
    box-shadow: 0 2px 8px rgba(32,24,18,0.05);
  }
  .data-table td { padding: 3px 0; border: none; }
  .data-table td::before {
    content: attr(data-label);
    display: inline-block;
    font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
    color: var(--clay-muted);
    min-width: 96px; margin-right: 8px;
  }
  .data-table td.dt-right, .data-table td.dt-center { text-align: left; }
  .data-table td:first-child::before { display: none; }
  .data-table td:first-child { margin-bottom: 4px; }
  .data-table .dt-arrow { display: none; }
  .data-table tr.dt-danger { border-left: 3px solid var(--brick); }
  .data-table tr.dt-warn { border-left: 3px solid var(--honey); }
  .data-table tr.dt-ok { border-left: 3px solid var(--olive); }
}
.data-table tr.row-passive { opacity: 0.6; }

/* İki butonlu sayfa aksiyonları (örn. Araçlar: ekle + toplu km) */
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.page-actions .modal-trigger-btn, .page-actions .btn-primary, .page-actions .btn-secondary { margin-bottom: 0; }

/* ============================================================
   SIDEBAR: daha açık ton + daha geniş menü; İÇERİK: sağ boşluk dolsun
   (yalnız 641px ve üstü — mobil drawer etkilenmez)
   ============================================================ */
@media (min-width: 641px) {
  .app-header {
    width: 264px;
    background: linear-gradient(180deg, #9B2630 0%, #7E1A23 55%, #6B151D 100%);
  }
  .topbar { padding: 20px 18px 16px; }
  .topbar .brand-name { font-size: 17px; }
  .topbar .brand-logo { height: 42px; }
  .mainnav { padding: 12px 12px 28px; gap: 2px; }
  .nav-group-label { font-size: 11px; color: rgba(255,255,255,0.55); padding: 16px 13px 6px; }
  .mainnav a {
    font-size: 14.5px;
    padding: 11px 14px;
    min-height: 44px;
    gap: 12px;
    color: rgba(255,255,255,0.9);
  }
  .mainnav a .icon { width: 18px; height: 18px; }
  .mainnav a.active { background: rgba(255,255,255,0.2); }
  .mainnav a:hover:not(.active) { background: rgba(255,255,255,0.12); }
  .nav-dropdown-menu { padding-left: 38px; }
  .nav-dropdown-menu a { font-size: 13.5px; padding: 8px 12px; color: rgba(255,255,255,0.72); }

  /* İçerik: sidebar genişliği kadar kaydır, sağa kadar yayıl */
  main.container,
  main.container.container-wide { margin-left: 264px; padding: 28px 34px 60px; }
  main.container > * { max-width: none; }
}
/* Çok geniş ekranlarda satırlar aşırı uzamasın */
@media (min-width: 2200px) {
  main.container > * { max-width: 1900px; }
}

/* Ay gezinme çubuğu (Şahit Numune) */
.month-nav {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.month-nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--cream); border: 1px solid var(--border-strong);
  color: var(--paprika-dark); font-size: 22px; font-weight: 700; line-height: 1;
  text-decoration: none; transition: background 0.15s, border-color 0.15s;
}
.month-nav-btn:hover { background: var(--paprika-tint); border-color: var(--paprika); }
.month-nav-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-serif); font-size: 19px; font-weight: 700; color: var(--ink);
  padding: 0 6px;
}
.month-nav-label .icon { color: var(--paprika); }
.month-nav-today { font-size: 13px; font-weight: 600; color: var(--paprika-dark); }
@media (min-width: 641px) { .filter-bar input[type=month] { flex: 0 1 170px; } }
@media (max-width: 640px) { .filter-bar input, .filter-bar select { flex: 0 0 auto !important; } }

/* Filtre çubuğu: tüm kontroller aynı yükseklik ve aynı alt hizada
   (önceden metin 38px, seçim 33px, tarih 42px, buton 35px idi) */
.filter-bar { align-items: flex-end; }
.filter-bar input, .filter-bar select,
.filter-bar .field input, .filter-bar .field select {
  height: 42px !important;
  min-height: 42px;
  box-sizing: border-box;
  margin: 0 !important;
  padding-top: 0; padding-bottom: 0;
  line-height: 40px;
}
.filter-bar > .btn-secondary, .filter-bar button[type=submit] {
  height: 42px; box-sizing: border-box; margin: 0 !important;
  padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; justify-content: center;
}
.filter-bar .filter-clear { align-self: center; }

/* ============================================================
   DETAY SAYFALARI: dar sol sütunda alt alta yığılma yerine dengeli ızgara
   ============================================================ */
.detail-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1500px) {
  .detail-columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-columns-3 > .detail-col-wide { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .detail-columns-3 { grid-template-columns: 1fr; }
}
/* İki sütunlu (360px + geniş) eski düzen: geniş ekranda sol sütun da büyüsün */
@media (min-width: 1400px) {
  .detail-columns:not(.detail-columns-3) { grid-template-columns: minmax(380px, 0.9fr) 1.6fr; }
}
/* Detay: çok sayıda küçük belge/fotoğraf kartını tek sütunda yığmak yerine ızgara */
@media (min-width: 1200px) {
  .detail-col-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
}
.doc-list li .photo-thumb { flex: 0 0 auto; display: inline-block; width: 46px; height: 46px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-strong); background: var(--sand); }
.doc-list li .photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-list li .photo-thumb + a { margin-right: auto; }
/* Detay özet kartı (kontrol / faaliyet) */
.summary-card.summary-ok { border-left: 4px solid var(--olive); }
.summary-card.summary-bad { border-left: 4px solid var(--brick); }
.summary-value { font-size: 40px; font-weight: 800; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.summary-value span { font-size: 20px; font-weight: 600; color: var(--clay-muted); margin-left: 3px; }
.summary-bad .summary-value { color: var(--brick); }
.summary-status { margin: 6px 0 14px; }
.summary-list { display: grid; grid-template-columns: max-content 1fr; gap: 7px 16px; margin: 0; font-size: 13.5px; }
.summary-list dt { color: var(--clay-muted); font-weight: 600; }
.summary-list dd { margin: 0; color: var(--ink); }
/* Ürün beyanı: alerjen ızgarası + canlı önizleme */
.allergen-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 10px;
  margin-top: 6px; background: var(--sand); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
}
.allergen-grid .checkbox { width: auto; margin: 0; }
@media (max-width: 640px) { .allergen-grid { grid-template-columns: 1fr; } }
@media (min-width: 1100px) { .ub-grid { grid-template-columns: 1.15fr 0.85fr; } .ub-preview-col { position: sticky; top: 20px; } }
.ub-preview { border-top: 4px solid var(--paprika); }
.ub-prev-name { background: var(--paprika); color: #fff; font-weight: 800; font-size: 18px; padding: 10px 14px; border-radius: 8px; }
.ub-prev-type { font-size: 12px; color: var(--clay-muted); font-weight: 600; margin: 6px 2px 10px; min-height: 14px; }
.ub-prev-sec { font-size: 12px; font-weight: 700; color: var(--paprika-dark); margin: 12px 0 4px; letter-spacing: 0.3px; }
.ub-prev-sec span { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; background: var(--paprika); color: #fff; font-size: 10px; margin-right: 5px; }
.ub-prev-sec b { font-weight: 600; color: var(--clay-muted); }
.ub-prev-text { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; }
.ub-prev-allergens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 10px; font-size: 11.5px; }
.ub-prev-allergens li { color: var(--clay-faint); padding-left: 16px; position: relative; }
.ub-prev-allergens li::before { content: "○"; position: absolute; left: 0; }
.ub-prev-allergens li.on { color: var(--ink); font-weight: 700; }
.ub-prev-allergens li.on::before { content: "✔"; color: var(--paprika); }
.ub-prev-sign { margin: 12px 0 0; font-size: 12px; color: var(--clay-muted); border-top: 1px dashed var(--border); padding-top: 8px; }
main.container .card.summary-ok { border-left: 4px solid var(--olive); }
main.container .card.summary-bad { border-left: 4px solid var(--brick); }

/* Kullanıcı bölüm yetkileri */
.perm-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.perm-tools { font-size: 12px; }
.perm-tools a { color: var(--paprika-dark); font-weight: 600; text-decoration: none; }
.perm-group { font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; color: var(--clay-muted); margin: 10px 0 5px; }
.perm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 10px; }
.perm-item { margin: 0 !important; width: auto !important; font-size: 13px; padding: 6px 9px !important; }
.perm-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
@media (max-width: 480px) { .perm-grid { grid-template-columns: 1fr; } }
.modal-box { max-height: 90vh; overflow-y: auto; }

/* Kontrol aylık tablo: günler çok sütunlu ızgarada olduğu için tek ortak saat
   başlığı sadece ilk sütunun üstüne denk geliyor, diğer sütunlarda hangi değerin
   hangi saate ait olduğu anlaşılmıyordu. Artık her değerin üstünde saati yazar;
   ortak başlık gizlenir. */
.cizelge-list .cizelge-cell-time {
  display: block !important;
  font-size: 10.5px; font-weight: 700; color: var(--paprika-dark);
  background: var(--paprika-tint); border-radius: 6px; padding: 1px 7px; line-height: 1.5;
}
.cizelge-list ~ .cizelge-head, .cizelge-head { display: none !important; }
.cizelge-list .cizelge-cell { gap: 4px; }

/* ============================================================
   KAYIT KİMLİK KARTI (detay sayfası başı) — örn. araç detayı
   ============================================================ */
.entity-hero {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) minmax(260px, 1.2fr) auto;
  grid-template-areas: "media main facts actions";
  align-items: center; gap: 22px;
  background: var(--cream); border: 1px solid var(--border);
  border-radius: 18px; padding: 20px 22px; margin: 6px 0 20px;
  box-shadow: 0 2px 12px rgba(32,24,18,0.05);
}
.hero-media {
  grid-area: media; width: 92px; height: 92px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, var(--paprika-tint), var(--sand));
  color: var(--paprika); border: 1px solid var(--border);
}
.hero-media-electric { background: linear-gradient(145deg, var(--olive-bg), var(--sand)); color: var(--olive); }
.hero-main { grid-area: main; min-width: 0; }
main.container h2.hero-title {
  font-size: 30px; margin: 0 0 8px; padding: 0; border: 0; letter-spacing: 0.3px;
  font-family: var(--font-serif); display: block;
}
.hero-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hero-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--sand); border: 1px solid var(--border); color: var(--clay-muted);
}
.hero-chip-green, .hero-chip-ok { background: var(--olive-bg); color: var(--olive); border-color: transparent; }
.hero-chip-muted { background: var(--muted-bg); color: var(--clay-faint); }
.hero-facts {
  grid-area: facts; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px;
  border-left: 1px solid var(--border); padding-left: 20px;
}
.hero-fact { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; line-height: 1.3; }
.hero-fact span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; color: var(--clay-faint); text-transform: uppercase; }
.hero-fact b { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-fact-bad b { color: var(--brick); }
.hero-fact-warn b { color: var(--honey); }
.hero-fact-ok b { color: var(--olive); }
.hero-fact-muted b { color: var(--clay-faint); font-weight: 600; }
.hero-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 460px; }
.hero-actions .btn-secondary, .hero-actions .delete { margin: 0; width: auto; }
.hero-toggle { display: inline-flex; align-items: center; text-decoration: none; }
@media (max-width: 1500px) {
  .entity-hero { grid-template-columns: auto 1fr auto; grid-template-areas: "media main actions" "facts facts facts"; }
  .hero-facts { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 14px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
@media (max-width: 760px) {
  .entity-hero { grid-template-columns: auto 1fr; grid-template-areas: "media main" "facts facts" "actions actions"; gap: 14px; padding: 16px; }
  .hero-media { width: 64px; height: 64px; border-radius: 14px; }
  .hero-media .hero-icon .icon, .hero-media > .icon { width: 32px; height: 32px; }
  main.container h2.hero-title { font-size: 24px; }
  .hero-actions { justify-content: flex-start; max-width: none; }
  .hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   BİLDİRİM KARTI (sağ alt)
   ============================================================ */
.toast {
  left: auto !important; right: 24px; bottom: 24px;
  transform: translateY(16px) !important;
  display: flex; align-items: center; gap: 10px;
  background: var(--cream) !important; color: var(--ink) !important;
  border: 1px solid var(--border); border-left: 4px solid var(--olive);
  border-radius: 12px !important; padding: 12px 12px 12px 14px !important;
  box-shadow: 0 10px 30px rgba(32,24,18,0.18); max-width: min(420px, calc(100vw - 32px));
}
.toast.show { transform: translateY(0) !important; }
.toast-icon { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center; background: var(--olive-bg); color: var(--olive); flex-shrink: 0; }
.toast-icon .icon { color: var(--olive); }
.toast-text { flex: 1; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.toast-close { background: none; border: 0; color: var(--clay-faint); font-size: 15px; cursor: pointer; padding: 4px 6px; border-radius: 6px; margin: 0; width: auto; }
.toast-close:hover { background: var(--sand); color: var(--ink); }
@media (max-width: 640px) { .toast { right: 16px; left: 16px !important; bottom: 16px; } }

/* ============================================================
   TÜRKÇE DOSYA SEÇME BUTONU
   ============================================================ */
.file-pick {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 42px; box-sizing: border-box;
  background: var(--cream); border: 1px solid var(--border-strong); border-radius: 11px;
  padding: 5px 12px 5px 5px; margin-bottom: 10px;
}
.file-pick:hover { border-color: var(--paprika); }
.file-pick.has-file { border-color: var(--olive); background: var(--olive-bg); }
.file-pick-btn {
  flex: 0 0 auto; width: auto !important; margin: 0 !important;
  background: var(--paprika); color: #fff; border: 0; border-radius: 8px;
  padding: 7px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.file-pick-btn:hover { background: var(--paprika-dark); }
.file-pick-name { flex: 1; min-width: 0; font-size: 13px; color: var(--clay-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-pick.has-file .file-pick-name { color: var(--ink); font-weight: 600; }
/* Gerçek kutu formda kalır (gönderim/required çalışsın) ama görünmez */
input[type=file].file-pick-input {
  position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important;
  opacity: 0; overflow: hidden; clip: rect(0 0 0 0); margin: 0 !important; padding: 0 !important; border: 0 !important;
  left: 12px; bottom: 4px;
}

/* Kimlik kartı: ton renkleri, fotoğraf alanı */
.hero-tone-green  { background: linear-gradient(145deg, var(--olive-bg), var(--sand)); color: var(--olive); }
.hero-tone-red    { background: linear-gradient(145deg, var(--brick-bg), var(--sand)); color: var(--brick); }
.hero-tone-amber  { background: linear-gradient(145deg, var(--honey-bg), var(--sand)); color: var(--honey); }
.hero-tone-blue   { background: linear-gradient(145deg, #E3EAF6, var(--sand)); color: #34508C; }
.hero-tone-purple { background: linear-gradient(145deg, #EEE4F2, var(--sand)); color: #7E3F8F; }
[data-theme="dark"] .hero-tone-blue { background: linear-gradient(145deg, #243048, var(--sand)); color: #8FB0E6; }
[data-theme="dark"] .hero-tone-purple { background: linear-gradient(145deg, #3A2A40, var(--sand)); color: #C084D0; }
.hero-media { position: relative; overflow: hidden; }
.hero-media-photo { width: 168px; height: 112px; flex-direction: column; }
.hero-photo-link, .hero-photo-link img { display: block; width: 100%; height: 100%; }
.hero-photo-link img { object-fit: cover; }
.hero-photo-form { margin: 0; }
.hero-photo-btn {
  position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer;
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.92); color: var(--paprika-dark); border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12); transition: opacity 0.15s;
}
.hero-media-photo:not(:has(img)) .hero-icon { margin-bottom: 18px; }
.hero-photo-remove {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 11px; text-decoration: none;
  background: rgba(0,0,0,0.55); color: #fff;
}
@media (hover: hover) {
  .hero-media-photo:has(img) .hero-photo-btn, .hero-media-photo:has(img) .hero-photo-remove { opacity: 0; }
  .hero-media-photo:has(img):hover .hero-photo-btn, .hero-media-photo:has(img):hover .hero-photo-remove { opacity: 1; }
}
@media (max-width: 760px) { .hero-media-photo { width: 120px; height: 84px; } }
.veh-cell { display: flex; align-items: center; gap: 12px; }
.veh-thumb { width: 56px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); background: var(--sand); }
.veh-thumb-empty { display: inline-flex; align-items: center; justify-content: center; color: var(--clay-faint); }

/* Fotoğraf butonundaki simge her ekranda küçük kalsın */
.hero-photo-btn .icon { width: 12px !important; height: 12px !important; }
@media (max-width: 760px) {
  .hero-photo-btn { font-size: 10px; padding: 3px 8px; bottom: 5px; }
  .hero-photo-remove { width: 20px; height: 20px; top: 4px; right: 4px; }
}

/* Kimlik kartı fotoğraf şekilleri */
.hero-shape-round  { width: 112px; height: 112px; border-radius: 50%; }
.hero-shape-round .hero-photo-btn { bottom: 10px; }
.hero-shape-square { width: 118px; height: 118px; }
.hero-shape-logo   { width: 128px; height: 104px; background: #fff; }
.hero-shape-logo .hero-photo-link img { object-fit: contain; padding: 8px; box-sizing: border-box; }
[data-theme="dark"] .hero-shape-logo { background: #F6F1EA; }
@media (max-width: 760px) {
  .hero-shape-round { width: 84px; height: 84px; }
  .hero-shape-square, .hero-shape-logo { width: 90px; height: 84px; }
}
/* Liste küçük resimleri: personel yuvarlak */
.veh-thumb.thumb-round { width: 40px; height: 40px; border-radius: 50%; }
.veh-thumb.thumb-logo { object-fit: contain; background: #fff; padding: 2px; box-sizing: border-box; }

/* ============================================================
   NÖTR AÇIK PALET (mockup'a göre) — krem/bej yerine açık gri-beyaz
   Yalnızca açık tema; koyu tema değişkenleri aynen kalır.
   ============================================================ */
:root:not([data-theme="dark"]) {
  --sand: #F5F4F2;          /* sayfa zemini */
  --cream: #FFFFFF;         /* kartlar, kutular */
  --border: #E7E3DF;
  --border-strong: #D7D1CA;
  --muted-bg: #EFEDEA;
  --clay-muted: #6A6460;
  --clay-faint: #9C9691;
  --paprika-tint: #F9E4E4;
  --shadow-soft: 0 1px 3px rgba(20,16,12,0.06), 0 1px 2px rgba(20,16,12,0.04);
}
:root:not([data-theme="dark"]) body,
:root:not([data-theme="dark"]) main.container { background: var(--sand); }

/* Sayfa başlığı: kalın bordo çizgi yerine ince ayırıcı */
main.container h2:not(.hero-title) { border-bottom: 1px solid var(--border); padding-bottom: 14px; }

/* Kartlar: beyaz, ince kenar, çok hafif gölge */
main.container .card, .data-table-wrap, main.container .filter-bar, .entity-hero {
  background: var(--cream); border-color: var(--border);
  box-shadow: 0 1px 3px rgba(20,16,12,0.05);
}
main.container .card:hover { box-shadow: 0 4px 14px rgba(20,16,12,0.07); }
.data-table thead th { background: #FAF9F8; }
[data-theme="dark"] .data-table thead th { background: var(--sand); }
.data-table tbody tr:hover { background: #FAF9F7; }
[data-theme="dark"] .data-table tbody tr:hover { background: var(--sand); }
main.container .filter-bar { background: var(--cream); }

/* ---- ÖZET ---- */
.today-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cream); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink);
  margin: -4px 0 14px; box-shadow: 0 1px 2px rgba(20,16,12,0.04);
}
.today-pill .icon { color: var(--clay-muted); }

/* Hızlı erişim: pastel renkli haplar */
.quick-actions a { border-radius: 999px !important; font-weight: 600; box-shadow: none !important; }
.quick-actions a[data-nav="amber"]  { background: #FDF3DC; border-color: #F2DDA6; color: #7A4E00; }
.quick-actions a[data-nav="red"]    { background: #FBE7E7; border-color: #F1C7C7; color: #8E1B22; }
.quick-actions a[data-nav="green"]  { background: #E6F2E8; border-color: #C5E0CA; color: #2E6A3C; }
.quick-actions a[data-nav="orange"] { background: #FDEBDD; border-color: #F4CFB2; color: #8A4515; }
.quick-actions a[data-nav] .icon { color: currentColor !important; }
.quick-actions a[data-nav]:hover { filter: brightness(0.97); transform: translateY(-1px); }
[data-theme="dark"] .quick-actions a[data-nav] { background: var(--cream); border-color: var(--border-strong); color: var(--ink); }

/* Sayı kutuları: beyaz kart, sol şerit yok, renkli ikon kutusu */
main.container .metric {
  background: var(--cream); border: 1px solid var(--border) !important;
  border-left: 1px solid var(--border) !important; border-radius: 14px;
  box-shadow: 0 1px 3px rgba(20,16,12,0.05); padding: 14px 16px; gap: 12px;
}
main.container .metric-icon {
  width: 40px; height: 40px; border-radius: 11px; background: var(--paprika-tint); color: var(--paprika);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
main.container .metric-label { font-size: 10.5px; letter-spacing: 0.4px; color: var(--clay-muted); }
main.container .metric-value { font-size: 26px; }
main.container .metric-clickable:hover { border-color: var(--border-strong) !important; box-shadow: 0 6px 16px rgba(20,16,12,0.08); transform: translateY(-2px); }

/* Ön gereksinim uyarıları: yumuşak sarı kart, içinde açık satırlar */
main.container .card-warn {
  background: #FFF8E1; border: 1px solid #F3E2A9 !important; border-left: 1px solid #F3E2A9 !important;
}
main.container .card-warn .warn-row { background: #FFFCEF; border: 1px solid #F3E6B8; }
main.container .card-warn .warn-row:hover { background: #FFF6D6; }
[data-theme="dark"] main.container .card-warn { background: var(--honey-bg); border-color: #5A4A23 !important; }
[data-theme="dark"] main.container .card-warn .warn-row { background: rgba(0,0,0,0.15); border-color: #5A4A23; }

/* Yaklaşan süreler: beyaz satırlar, plaka hapları, aciliyet renkli rozet */
#upcoming-card .warn-row { background: var(--cream); border: 1px solid var(--border); }
#upcoming-card .warn-row:hover { background: #FAF9F7; border-color: var(--border-strong); }
[data-theme="dark"] #upcoming-card .warn-row:hover { background: var(--sand); }
.up-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 0; vertical-align: middle; }
.up-chip { font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--muted-bg); color: var(--clay-muted); border: 1px solid var(--border); white-space: nowrap; }
.badge.up-days { font-weight: 700; border: 1px solid transparent; white-space: nowrap; }
.up-days-red   { background: #FBE3E3 !important; color: #9B1C22 !important; border-color: #F2C4C4 !important; }
.up-days-amber { background: #FDF1D6 !important; color: #7A4E00 !important; border-color: #F1DDA5 !important; }
.up-days-green { background: #E4F1E6 !important; color: #2E6A3C !important; border-color: #C3DFC8 !important; }
[data-theme="dark"] .up-days-red   { background: #402A22 !important; color: #F0906F !important; border-color: transparent !important; }
[data-theme="dark"] .up-days-amber { background: #3E3119 !important; color: #EDBE6C !important; border-color: transparent !important; }
[data-theme="dark"] .up-days-green { background: #2C3722 !important; color: #ADC77E !important; border-color: transparent !important; }

@media (max-width: 640px) {
  .today-pill { font-size: 13px; padding: 7px 12px; }
  main.container .metric { padding: 12px; }
  main.container .metric-icon { width: 34px; height: 34px; }
  main.container .metric-value { font-size: 22px; }
  .up-chips { display: flex; }
}
.up-chips { display: flex; margin-top: 6px; }
main.container .metric { padding: 13px 14px; gap: 11px; align-items: center; }
main.container .metric-icon { width: 38px; height: 38px; }
main.container .metric-label { font-size: 10px; letter-spacing: 0.15px; line-height: 1.3; }
@media (min-width: 1100px) { main.container .grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } }

/* ####################################################################
   TASARIM v2 — "Mutfak karosu" dili
   Karo zemin, kâğıt yüzey, mürekkep yazı, bordo yalnız marka/ana işlem,
   yeşil/hardal/kırmızı yalnız durum. Başlık ve rakamlar Archivo, metin
   Source Sans 3 (yerel dosyalar, dışarıya istek yok).
   #################################################################### */
@font-face { font-family: "Archivo"; src: url(fonts/archivo-latin-standard-normal.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Archivo"; src: url(fonts/archivo-latin-ext-standard-normal.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2212; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3-latin-ext-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA,U+1E00-1E9F,U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2212; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3-latin-ext-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-02BA,U+1E00-1E9F,U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2212; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3-latin-ext-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0100-02BA,U+1E00-1E9F,U+A720-A7FF; }

:root {
  --font-sans: "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Archivo", "Arial Narrow", Arial, sans-serif;   /* başlıklar (değişken adı eski) */
  --font-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --brand-deep: #4B070C;
  --on-deep: #F1D6D8; --on-deep-2: #E5BFC2; --on-deep-muted: #C98E92; --on-deep-tag: #D9A9AC; --on-deep-av: #F3DADB;
}
:root:not([data-theme="dark"]) {
  --sand: #EDEFEB;  --cream: #FAFBF9;  --ink: #1A1F1D;
  --clay-muted: #5B6560;  --clay-faint: #8A938E;
  --border: #D8DDD7;  --border-strong: #C6CDC5;  --muted-bg: #E6E9E4;
  --paprika: #7D0912;  --paprika-dark: #5E060D;  --paprika-tint: #F4E3E3;
  --olive: #2F6B4E;  --olive-bg: #E1ECE4;  --brick: #B42318;  --brick-bg: #FAE3E0;  --honey: #95590A;  --honey-bg: #F5EBD4;
  --shadow-soft: none;
}
[data-theme="dark"] { --brand-deep: #2A0A0D; }

html body { font-family: var(--font-sans); font-size: 15px; color: var(--ink); -webkit-font-smoothing: antialiased; }
html body, html body main.container { background: var(--sand); }

/* ---------- Başlıklar ---------- */
html body main.container h2:not(.hero-title) {
  font-family: var(--font-display); font-stretch: 84%; font-weight: 650; font-size: 32px; letter-spacing: -0.3px;
  border-bottom: 0; padding-bottom: 0; margin-bottom: 8px;
}
html body main.container h2:not(.hero-title) > span:first-of-type .icon { background: transparent; padding: 0; width: 26px; height: 26px; color: var(--paprika); }
html body .page-scope-note { font-size: 15px; color: var(--clay-muted); margin: 0 0 18px; }
html body .card-title { font-family: var(--font-display); font-stretch: 92%; font-weight: 650; font-size: 18px; color: var(--ink); border-bottom: 0; padding-bottom: 4px; }
html body .card-title .icon { color: var(--clay-muted); }
html body .compliance-badge { background: transparent; border: 1px solid var(--border); color: var(--clay-muted); font-weight: 600; }

/* ALL-CAPS etiketler normal yazıma */
html body .metric-label, html body .hero-fact span, html body .perm-group, html body .data-table thead th, html body .nav-group-label,
html body .field-label, html body .cizelge-head, html body .km-stat-label { text-transform: none !important; letter-spacing: 0 !important; }

/* ---------- Yüzeyler ---------- */
html body main.container .card, html body .data-table-wrap, html body main.container .filter-bar, html body .entity-hero, html body .modal-box {
  background: var(--cream); border: 1px solid var(--border); box-shadow: none;
}
html body main.container .card { border-radius: 16px; }
html body main.container .card:hover { box-shadow: none; }
html body .entity-hero { border-radius: 18px; }
html body .card-info { background: var(--cream); border-left: 1px solid var(--border); }
html body .card-accent-add { border-top: 3px solid var(--paprika) !important; }

/* ---------- Butonlar ---------- */
html body .btn-primary {
  background: var(--paprika) !important; background-image: none !important; color: #fff; border: 1px solid var(--paprika);
  border-radius: 10px; font-weight: 600; font-family: var(--font-sans); box-shadow: none !important; min-height: 42px;
}
html body .btn-primary:hover:not([disabled]) { background: var(--paprika-dark) !important; transform: none; }
html body .btn-secondary, html body .print-btn, html body .back-link-btn {
  background: var(--cream) !important; background-image: none !important; border: 1px solid var(--border) !important;
  color: var(--ink) !important; border-radius: 10px; font-weight: 600; box-shadow: none !important; text-decoration: none !important;
}
html body .btn-secondary:hover, html body .print-btn:hover, html body .back-link-btn:hover { border-color: var(--clay-faint) !important; background: #fff !important; }
html body .print-btn .icon { color: var(--paprika); }
html body .delete { background: transparent !important; border: 1px solid transparent !important; color: var(--brick) !important; box-shadow: none !important; }
html body .delete:hover { background: var(--brick-bg) !important; }
html body .back-link-btn { border: 0 !important; background: transparent !important; padding-left: 0; color: var(--paprika) !important; }
html body .modal-trigger-btn { box-shadow: none !important; }

/* ---------- Formlar ---------- */
html body input[type=text], html body input[type=email], html body input[type=number], html body input[type=date], html body input[type=datetime-local],
html body input[type=time], html body input[type=password], html body input[type=search], html body input[type=month], html body select, html body textarea {
  background-color: #fff; border: 1px solid var(--border-strong); border-radius: 10px; font-family: var(--font-sans); color: var(--ink); box-shadow: none;
}
[data-theme="dark"] body input, [data-theme="dark"] body select, [data-theme="dark"] body textarea { background-color: var(--cream); }
html body input:focus, html body select:focus, html body textarea:focus { border-color: var(--paprika) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--paprika) 14%, transparent) !important; outline: none; }
html body .field-label { font-size: 13px; font-weight: 600; color: var(--clay-muted); }

/* ---------- Tablolar ---------- */
html body .data-table-wrap { border-radius: 16px; }
html body .data-table thead th { background: #F3F5F2; font-size: 12.5px; font-weight: 600; color: var(--clay-muted); }
[data-theme="dark"] body .data-table thead th { background: var(--sand); }
html body .data-table tbody tr:hover { background: #F4F6F3; }
[data-theme="dark"] body .data-table tbody tr:hover { background: var(--sand); }
html body .data-table .dt-primary { font-weight: 600; }

/* ---------- Rozetler ---------- */
html body .badge { background-image: none !important; box-shadow: none !important; border-radius: 6px; font-weight: 600; letter-spacing: 0; }

/* ---------- Kenar çubuğu (masaüstü) ---------- */
@media (min-width: 641px) {
  html body .app-header { background: var(--brand-deep) !important; box-shadow: none; }
  html body .topbar { border-bottom: 0; padding: 22px 20px 14px; }
  html body .topbar .brand-name { font-family: var(--font-display); font-stretch: 105%; font-size: 17px; }
  html body .topbar .brand-tagline { color: var(--on-deep-tag); font-size: 12.5px; text-transform: none; letter-spacing: 0; }
  html body .topbar-actions { display: none !important; }   /* kullanıcı bloğu menünün altına taşındı */
  html body .mainnav { padding: 6px 14px 16px; }
  html body .nav-group-label { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--on-deep-muted); padding: 16px 12px 6px; }
  html body .mainnav a { font-size: 14.5px; font-weight: 600; color: var(--on-deep); border-left: 0 !important; border-radius: 9px; padding: 9px 12px; min-height: 0; }
  html body .mainnav a[data-nav] .icon { color: var(--on-deep) !important; opacity: 0.85; }
  html body .mainnav a:hover:not(.active) { background: rgba(255,255,255,0.07); }
  html body .mainnav a.active { background: var(--cream) !important; color: var(--paprika-dark) !important; }
  html body .mainnav a.active .icon { color: var(--paprika) !important; opacity: 1; }
  html body .nav-dropdown-menu a { font-size: 13.5px; color: var(--on-deep-2); border-left: 1px solid rgba(255,255,255,0.14) !important; border-radius: 0 7px 7px 0; }
  html body .nav-dropdown-menu a.active { background: rgba(255,255,255,0.12) !important; color: #fff !important; }
  [data-theme="dark"] body .mainnav a.active { background: #3A2A26 !important; color: #fff !important; }
}
.nav-cnt { margin-left: auto; font: 600 12px/1 var(--font-display); background: rgba(255,255,255,0.16); color: #fff; padding: 3px 7px; border-radius: 6px; }
.mainnav a.active .nav-cnt { background: var(--paprika-tint); color: var(--paprika-dark); }
.nav-who { margin: 14px 2px 0; padding: 14px 10px 4px; border-top: 1px solid rgba(255,255,255,0.12); color: var(--on-deep); }
.nav-who-row { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.nav-av { width: 34px; height: 34px; border-radius: 50%; background: var(--on-deep-av); color: var(--paprika-dark); display: grid; place-items: center; font: 700 13px var(--font-display); flex-shrink: 0; }
.nav-who-name { font-weight: 600; font-size: 14px; line-height: 1.2; } .nav-who-role { font-size: 12.5px; color: var(--on-deep-muted); }
.nav-who-tools { display: flex; gap: 6px; margin-top: 12px; }
.nav-who-tools a, .nav-who-tools button { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 34px; border-radius: 8px; background: rgba(255,255,255,0.08); color: var(--on-deep) !important; border: 0; cursor: pointer; text-decoration: none; font: 600 12.5px var(--font-sans); min-height: 0 !important; padding: 0 !important; margin: 0 !important; }
.nav-who-tools a:hover, .nav-who-tools button:hover { background: rgba(255,255,255,0.16); }
.nav-who-tools .icon { width: 16px; height: 16px; color: inherit !important; }
.nav-who-tools .theme-icon-dark { display: none; } [data-theme="dark"] .nav-who-tools .theme-icon-dark { display: inline-flex; } [data-theme="dark"] .nav-who-tools .theme-icon-light { display: none; }

/* ---------- Mobil: üst çubuk + alt sekme çubuğu ---------- */
.tabbar, .m-avatar { display: none; }
@media (max-width: 640px) {
  html body .app-header { background: var(--brand-deep) !important; }
  html body .topbar { background: var(--brand-deep) !important; border-bottom: 0 !important; padding: 10px 14px; }
  html body .topbar .brand-name { color: #fff !important; font-family: var(--font-display); font-stretch: 105%; }
  html body .topbar .brand-tagline { display: none; }
  html body .topbar-actions > *:not(.m-avatar) { display: none !important; }
  html body .m-avatar { display: grid; margin-left: auto; text-decoration: none; }
  html body main.container { padding-bottom: 96px !important; }
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--cream); border-top: 1px solid var(--border); padding: 7px 4px calc(10px + env(safe-area-inset-bottom)); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 600 11.5px var(--font-sans); color: var(--clay-muted);
    text-decoration: none; background: none; border: 0; padding: 0; margin: 0; min-height: 0; width: auto; cursor: pointer; }
  .tabbar .icon { width: 22px; height: 22px; }
  .tabbar .on { color: var(--paprika); }
  .tabbar .tab-fab-c { width: 46px; height: 46px; margin-top: -22px; border-radius: 14px; background: var(--paprika); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px color-mix(in srgb, var(--paprika) 30%, transparent); }
  .tabbar .tab-fab-c .icon { width: 22px; height: 22px; color: #fff; }
  html body .toast { bottom: 88px; }
  html body main.container h2:not(.hero-title) { font-size: 28px; }
  /* Çekmece menü: koyu marka zemini */
  html body .mainnav { background: var(--brand-deep) !important; }
  html body .mainnav a { color: var(--on-deep) !important; background: transparent !important; border-color: transparent !important; }
  html body .mainnav a.active { background: var(--cream) !important; color: var(--paprika-dark) !important; }
  html body .mainnav a[data-nav] .icon { color: inherit !important; }
  html body .mainnav-drawer-head { border-bottom-color: rgba(255,255,255,0.12) !important; }
  html body .mainnav-drawer-title { color: #fff !important; }
  html body .mainnav-drawer-close { background: rgba(255,255,255,0.12) !important; color: #fff !important; }
  html body .nav-group-label { display: block !important; color: var(--on-deep-muted); font-size: 12px; font-weight: 600; padding: 14px 12px 4px; }
  html body .nav-dropdown-menu a { color: var(--on-deep-2) !important; }
}

/* ==================== Tasarım v2: ÖZET ==================== */
.oz-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 4px 0 22px; }
.oz-date { margin: 0; font: 650 44px/1 var(--font-display); font-stretch: 78%; letter-spacing: -0.5px; color: var(--ink); }
.oz-sum { margin: 10px 0 0; font-size: 15.5px; color: var(--clay-muted); }
.oz-sum b { color: var(--ink); font-weight: 600; }
.oz-acts { display: flex; gap: 10px; flex-shrink: 0; }
html body .oz-btn { display: inline-flex; align-items: center; gap: 8px; width: auto; height: 42px; padding: 0 16px; margin: 0; text-decoration: none; }
.oz-panel-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.oz-panel-h h3 { margin: 0; font: 650 20px/1.2 var(--font-display); font-stretch: 92%; color: var(--ink); }
.oz-panel-h p { margin: 3px 0 0; font-size: 13.5px; color: var(--clay-muted); }
.oz-panel-h a { font-size: 13.5px; font-weight: 600; color: var(--paprika); text-decoration: none; white-space: nowrap; }

/* Dikkat gerektirenler */
.oz-attn { background: var(--brick-bg); border: 1px solid #EFC2BC; border-radius: 14px; padding: 12px 14px; margin-bottom: 22px; }
[data-theme="dark"] .oz-attn { border-color: #5A382E; }
.oz-attn-h { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font-weight: 700; color: #7A1810; }
[data-theme="dark"] .oz-attn-h { color: var(--brick); }
html body .oz-attn .warn-rows { display: grid; gap: 6px; }
html body .oz-attn .warn-row { background: rgba(255,255,255,0.72); border: 1px solid #F1CFCA; border-radius: 10px; padding: 9px 12px; color: var(--ink); }
[data-theme="dark"] body .oz-attn .warn-row { background: rgba(0,0,0,0.18); border-color: #5A382E; }
html body .oz-attn .warn-row-icon { color: var(--brick); }
html body .oz-attn .warn-row-arrow { display: none; }
.warn-row-go { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--brick); white-space: nowrap; }

/* Soğuk zincir panosu */
html body main.container .oz-board { padding: 18px 22px 0; margin-bottom: 22px; }
.bd-legend, .bd-row { display: grid; grid-template-columns: minmax(170px, 230px) 130px minmax(0, 1fr) auto; gap: 26px; align-items: center; }
.bd-legend { font-size: 12px; color: var(--clay-faint); padding-bottom: 8px; border-bottom: 1px solid var(--muted-bg); }
.bd-legend .r { text-align: right; }
.bd-row { padding: 15px 0; border-bottom: 1px solid var(--muted-bg); text-decoration: none; color: inherit; }
.bd-row:hover { background: linear-gradient(90deg, transparent, var(--sand) 12%, var(--sand) 88%, transparent); }
.bd-nm b { display: block; font-weight: 600; font-size: 15px; } .bd-nm span { font-size: 13px; color: var(--clay-muted); }
.bd-v { font: 600 32px/1 var(--font-display); font-stretch: 82%; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; white-space: nowrap; }
.bd-v sup { font-size: 14px; color: var(--clay-muted); font-weight: 500; margin-left: 1px; }
.bd-v small { display: block; font: 400 12.5px/1.3 var(--font-sans); color: var(--clay-muted); letter-spacing: 0; margin-top: 5px; }
.bd-v em { font: italic 400 13.5px var(--font-sans); color: var(--clay-faint); letter-spacing: 0; }
.bd-warn .bd-v { color: var(--honey); } .bd-crit .bd-v { color: var(--brick); }
.bd-track { position: relative; height: 40px; min-width: 120px; }
.bd-rail { position: absolute; left: 0; right: 0; top: 15px; height: 10px; border-radius: 5px; background: repeating-linear-gradient(90deg, var(--muted-bg) 0 6px, transparent 6px 8px); }
.bd-band { position: absolute; top: 12px; height: 16px; border-radius: 8px; background: var(--olive-bg); border: 1px solid #BFD8C7; }
[data-theme="dark"] .bd-band { border-color: #3E5230; }
.bd-mark { position: absolute; top: 9px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--olive); border: 3px solid var(--cream); box-shadow: 0 0 0 1px var(--olive); }
.bd-warn .bd-mark { background: var(--honey); box-shadow: 0 0 0 1px var(--honey); } .bd-crit .bd-mark { background: var(--brick); box-shadow: 0 0 0 1px var(--brick); }
.bd-lim { position: absolute; top: 31px; transform: translateX(-50%); font: 500 11px/1 var(--font-display); color: var(--clay-faint); font-variant-numeric: tabular-nums; }
.bd-slots { display: flex; gap: 6px; justify-content: flex-end; }
.bd-slot { min-width: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 8px; border-radius: 7px; border: 1px solid var(--border);
  font: 600 11.5px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--clay-muted); background: var(--cream); white-space: nowrap; }
.bd-slot.done { background: var(--olive-bg); border-color: #C6DCCC; color: var(--olive); }
.bd-slot.done::before { content: ""; width: 9px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-1px); }
.bd-slot.miss { border-color: var(--brick); color: var(--brick); background: var(--brick-bg); font-weight: 700; }
.bd-slot.next { border-style: dashed; border-color: var(--clay-faint); color: var(--ink); }
[data-theme="dark"] .bd-slot.done { border-color: #3E5230; }
.bd-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 0 16px; font-size: 12.5px; color: var(--clay-muted); }
.bd-foot i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.bd-foot .k-ok { background: var(--olive); } .bd-foot .k-warn { background: var(--honey); } .bd-foot .k-crit { background: var(--brick); } .bd-foot .k-done { background: var(--olive-bg); border: 1px solid #C6DCCC; }

/* Alt iki sütun */
.oz-below { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; margin-bottom: 22px; }
html body main.container .oz-below .card, html body main.container .oz-recv { padding: 18px 22px; margin: 0; }
.tk-prog { margin: 0 0 8px; }
.tk-bar { display: block; height: 8px; border-radius: 4px; background: var(--muted-bg); overflow: hidden; }
.tk-bar b { display: block; height: 100%; background: var(--olive); border-radius: 4px; }
.tk-txt { display: flex; justify-content: space-between; margin-top: 7px; font-size: 13px; color: var(--clay-muted); } .tk-txt b { color: var(--ink); }
.tk-list { list-style: none; margin: 4px -10px 0; padding: 0; }
.tk-list a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.tk-list a:hover { background: var(--sand); }
.tk-box { width: 20px; height: 20px; border-radius: 6px; border: 1.8px solid var(--clay-faint); display: grid; place-items: center; flex-shrink: 0; }
.tk-box .icon { stroke-width: 3; color: #fff; }
.tk-ok .tk-box { background: var(--olive); border-color: var(--olive); }
.tk-ok .tk-t { color: var(--clay-muted); text-decoration: line-through; text-decoration-color: var(--clay-faint); }
.tk-t { flex: 1; font-size: 14.5px; min-width: 0; }
.tk-w { font: 500 12.5px var(--font-display); color: var(--clay-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-late .tk-box { border-color: var(--brick); } .tk-late .tk-w { color: var(--brick); font-weight: 700; }
.tk-more { margin: 6px 0 0; font-size: 13.5px; } .tk-more a { color: var(--paprika); font-weight: 600; text-decoration: none; }

/* Yaklaşan */
html body .oz-soon .upcoming-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
html body .oz-soon .upcoming-filter button { width: auto; margin: 0; padding: 5px 10px; font: 600 12.5px var(--font-sans); border-radius: 8px; border: 1px solid var(--border); background: var(--cream); color: var(--clay-muted); min-height: 0; box-shadow: none; }
html body .oz-soon .upcoming-filter button.active { background: var(--ink); border-color: var(--ink); color: #fff; }
[data-theme="dark"] body .oz-soon .upcoming-filter button.active { background: var(--paprika); border-color: var(--paprika); }
html body .oz-soon .uf-count { opacity: 0.7; font-weight: 500; }
.sn-list { list-style: none; margin: 0 -10px; padding: 0; }
.sn-list li + li { border-top: 1px solid var(--muted-bg); }
.sn-list a { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; padding: 10px; text-decoration: none; color: var(--ink); border-radius: 10px; }
.sn-list a:hover { background: var(--sand); }
.sn-d { text-align: center; border-radius: 10px; padding: 6px 0 5px; background: var(--olive-bg); color: var(--olive); }
.sn-d b { display: block; font: 650 22px/1 var(--font-display); font-stretch: 82%; font-variant-numeric: tabular-nums; }
.sn-d span { font-size: 11px; font-weight: 600; }
.sn-w .sn-d { background: var(--honey-bg); color: var(--honey); } .sn-c .sn-d { background: var(--brick-bg); color: var(--brick); } .sn-km .sn-d { background: var(--muted-bg); color: var(--ink); } .sn-km .sn-d b { font-size: 15px; padding-top: 3px; }
.sn-x b { font-size: 14.5px; font-weight: 600; } .sn-x p { margin: 1px 0 0; font-size: 13px; color: var(--clay-muted); }
.sn-cat { margin-left: 6px; font-size: 11.5px; font-weight: 600; color: var(--clay-faint); }
.sn-plates { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sn-plates span { font: 600 11px/1 var(--font-display); font-stretch: 90%; padding: 4px 6px; border-radius: 5px; background: var(--sand); border: 1px solid var(--border); }

/* Bugünkü mal kabuller */
.rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); border-top: 1px solid var(--muted-bg); margin: 0 -22px -18px; }
.rv-item { display: grid; grid-template-columns: 58px 1fr; gap: 14px; padding: 16px 22px 18px; text-decoration: none; color: var(--ink); border-right: 1px solid var(--muted-bg); border-bottom: 1px solid var(--muted-bg); }
.rv-item:hover { background: var(--sand); }
.rv-ph { width: 58px; height: 58px; border-radius: 10px; overflow: hidden; background: var(--muted-bg); border: 1px solid var(--border); display: grid; place-items: center; color: var(--clay-faint); }
.rv-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-x b { display: block; font-size: 15px; font-weight: 600; } .rv-sup { display: block; font-size: 13px; color: var(--clay-muted); }
.rv-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; font: 600 12.5px var(--font-display); font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) { .bd-legend, .bd-row { grid-template-columns: minmax(140px, 190px) 110px minmax(0, 1fr) auto; gap: 18px; } .bd-slot { min-width: 48px; } }
@media (max-width: 860px) { .oz-below { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .oz-head { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 16px; }
  .oz-date { font-size: 34px; }
  .oz-acts { gap: 8px; } html body .oz-btn { flex: 1; justify-content: center; height: 46px; }
  html body main.container .oz-board { padding: 16px 16px 0; }
  .bd-legend { display: none; }
  .bd-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; }
  .bd-nm { grid-column: 1; grid-row: 1; } .bd-v { grid-column: 2; grid-row: 1; text-align: right; font-size: 28px; }
  .bd-v small { display: none; } .bd-track { grid-column: 1 / -1; grid-row: 2; } .bd-slots { grid-column: 1 / -1; grid-row: 3; justify-content: stretch; }
  .bd-slot { flex: 1; min-width: 0; }
  html body main.container .oz-below .card, html body main.container .oz-recv { padding: 16px; }
  .rv-grid { grid-template-columns: 1fr; margin: 0 -16px -16px; } .rv-item { padding: 14px 16px; border-right: 0; }
}
@media (min-width: 641px) {
  html body .mainnav a { min-height: 40px !important; line-height: 1.25; gap: 12px; align-items: center; }
  html body .mainnav a > span:not(.nav-cnt) { flex: 1 1 auto; }
  html body .mainnav a .nav-cnt { flex: 0 0 auto !important; margin-left: auto; }
  html body .nav-dropdown-menu a { min-height: 34px !important; }
  html body .mainnav { gap: 2px; }
}
html body .mainnav a .nav-cnt { flex: 0 0 auto; }
html body .mainnav .nav-who-row { padding: 4px 2px !important; min-height: 0 !important; background: transparent !important; color: var(--on-deep) !important; }
html body .mainnav .nav-who-row .nav-av { flex: 0 0 34px !important; width: 34px; height: 34px; }
html body .mainnav .nav-who-row > span:not(.nav-av) { flex: 1 1 auto; line-height: 1.25; }
html body .mainnav .nav-who-tools > a, html body .mainnav .nav-who-tools > button { min-height: 34px !important; height: 34px; padding: 0 !important; flex: 1 1 0 !important; justify-content: center; gap: 0; }
html body .mainnav .nav-who-tools > a:last-child { flex: 1.4 1 0 !important; }
@media (max-width: 640px) { html body .topbar .brand-logo { background: #fff; border-radius: 8px; padding: 2px; height: 34px; } }
@media (hover: none) { .bd-row:hover, .tk-list a:hover, .sn-list a:hover, .rv-item:hover { background: none; } }

/* ==================== Tasarım v2: MAL KABUL DETAYI ==================== */
.kb-crumb { font-size: 14px; color: var(--clay-muted); margin: 0 0 18px; } .kb-crumb a { color: var(--paprika); font-weight: 600; text-decoration: none; }
.kb-hero { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 34px; align-items: start; margin-bottom: 24px; }
.kb-photo { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: var(--muted-bg); }
.kb-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kb-cap { position: absolute; left: 10px; bottom: 10px; font-size: 12.5px; font-weight: 600; background: rgba(250,251,249,0.94); color: var(--ink); padding: 5px 9px; border-radius: 7px; }
.kb-photo-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--clay-faint); text-decoration: none; border-style: dashed; font-weight: 600; font-size: 14px; }
.kb-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
html body .kb-th { width: 58px; height: 58px; min-height: 0; padding: 0; margin: 0; border-radius: 10px; background: center/cover var(--muted-bg); border: 1px solid var(--border); cursor: pointer; }
html body .kb-th.on { outline: 2px solid var(--ink); outline-offset: 1px; }
.kb-th-add { display: grid; place-items: center; background: var(--cream) !important; border-style: dashed !important; color: var(--clay-muted); }
.kb-title { margin: 2px 0 8px; font: 650 46px/1.02 var(--font-display); font-stretch: 80%; letter-spacing: -0.6px; color: var(--ink); }
.kb-sup { margin: 0 0 16px; font-size: 15.5px; color: var(--clay-muted); line-height: 1.55; } .kb-sup b { color: var(--ink); font-weight: 600; }
.kb-verdict { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 14px; border-radius: 12px; font-size: 15px; border: 1px solid; }
.kb-verdict b { font-weight: 700; white-space: nowrap; } .kb-verdict span { color: var(--clay-muted); }
.kb-verdict .icon { stroke-width: 2.6; }
.kv-ok { background: var(--olive-bg); border-color: #C6DCCC; color: var(--olive); }
.kv-warn { background: var(--honey-bg); border-color: #EBD6A6; color: var(--honey); }
.kv-bad { background: var(--brick-bg); border-color: #EFC2BC; color: var(--brick); }
[data-theme="dark"] .kb-verdict { border-color: transparent; }
.kb-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; align-items: center; }
html body .kb-btn { display: inline-flex; align-items: center; gap: 8px; width: auto; height: 42px; padding: 0 15px; margin: 0; font-size: 14.5px; }
html body .kb-del { font-weight: 600; padding: 8px 10px; }
html body main.container .kb-checks { padding: 18px 22px 8px; margin-bottom: 24px; }
.kc-row { display: grid; grid-template-columns: 26px 200px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--muted-bg); }
.kc-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--olive-bg); color: var(--olive); }
.kc-ic .icon { stroke-width: 2.8; }
.kc-warn .kc-ic { background: var(--honey-bg); color: var(--honey); } .kc-crit .kc-ic { background: var(--brick-bg); color: var(--brick); } .kc-muted .kc-ic { background: var(--muted-bg); color: var(--clay-faint); }
.kc-k { font-weight: 600; }
.kc-v b { display: block; font: 600 20px/1.15 var(--font-display); font-stretch: 86%; font-variant-numeric: tabular-nums; }
.kc-v small { display: block; font-size: 13px; color: var(--clay-muted); margin-top: 3px; }
.kc-r { font-size: 13px; font-weight: 700; color: var(--olive); text-align: right; white-space: nowrap; }
.kc-warn .kc-r { color: var(--honey); } .kc-crit .kc-r { color: var(--brick); } .kc-muted .kc-r { color: var(--clay-faint); }
.kc-note { border-top: 1px solid var(--muted-bg); padding: 14px 0 12px; } .kc-note b { font-size: 13px; color: var(--clay-muted); } .kc-note p { margin: 4px 0 0; }
.kb-edit { margin-bottom: 24px; } .kb-edit[hidden] { display: none; }
html body .kb-edit .card { border-top: 3px solid var(--paprika); }
html body .kb-edit-close { float: right; width: auto; margin: 0; padding: 4px 10px; min-height: 0; font: 600 13px var(--font-sans); background: var(--sand); border: 1px solid var(--border); border-radius: 8px; color: var(--ink); cursor: pointer; }
.kb-sec { font: 650 20px/1.2 var(--font-display); font-stretch: 92%; margin: 4px 0 12px; }
@media (min-width: 1200px) { html body .kb-files.detail-col-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .kb-hero { grid-template-columns: 1fr; gap: 16px; } .kb-photo { aspect-ratio: 4 / 3; }
  .kb-title { font-size: 34px; }
  .kb-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } html body .kb-btn { justify-content: center; padding: 0 8px; font-size: 14px; }
  html body .kb-del { grid-column: 1 / -1; text-align: center; justify-content: center; }
  html body main.container .kb-checks { padding: 16px 16px 6px; }
  .kc-row { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 6px 12px; } .kc-k { grid-column: 2; } .kc-r { grid-column: 3; grid-row: 1; } .kc-v { grid-column: 2 / -1; grid-row: 2; }
}

/* Mobil katman sırası: çekmece ve karartma üst çubuğun içinde durduğu için
   üst çubuğun önceliği alt sekme çubuğundan yüksek olmalı; yoksa açık
   menünün alt kısmı (Çıkış vb.) sekme çubuğunun altında kalır. */
@media (max-width: 640px) { html body .app-header { z-index: 70; } }
/* Klavyeyle gezinmede görünür odak */
html body a:focus-visible, html body button:focus-visible, html body [tabindex]:focus-visible { outline: 2px solid var(--paprika); outline-offset: 2px; border-radius: 6px; }
.mainnav a:focus-visible, .tabbar a:focus-visible, .tabbar button:focus-visible { outline-color: #fff; }
/* Kaybolan bildirim görünmez olarak kalıp altındaki öğelere dokunmayı
   engelliyordu (opaklık 0, ama yerinde). Görünmezken tıklamaları geçirir. */
html body .toast { pointer-events: none; visibility: hidden; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s; }
html body .toast.show { pointer-events: auto; visibility: visible; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s; }

/* ==================== MAL KABUL SICAKLIK REFERANSI ==================== */
.rt-block { margin: 2px 0 10px; }
.rt-block .row { align-items: flex-end; }
.rt-input { display: flex; align-items: stretch; gap: 0; }
html body .rt-sign { flex: 0 0 44px; width: 44px; min-height: 42px; margin: 0; padding: 0; border: 1px solid var(--border-strong); border-right: 0; border-radius: 10px 0 0 10px;
  background: var(--sand); color: var(--ink); font: 700 18px/1 var(--font-display); cursor: pointer; }
html body .rt-sign:hover { background: var(--muted-bg); }
html body .rt-input .rt-temp { border-radius: 0 10px 10px 0 !important; margin: 0 !important; font: 600 17px var(--font-display); font-variant-numeric: tabular-nums; }
html body .rt-temp.rt-bad { border-color: var(--brick) !important; background: var(--brick-bg) !important; color: var(--brick); }
.rt-hint { font-size: 13.5px; line-height: 1.45; padding: 7px 11px; border-radius: 9px; margin: 6px 0 0; background: var(--sand); color: var(--clay-muted); }
.rt-hint:empty { display: none; }
.rt-s-uygun .rt-hint { background: var(--olive-bg); color: var(--olive); }
.rt-s-sinirda .rt-hint { background: var(--honey-bg); color: var(--honey); }
.rt-s-disinda .rt-hint, .rt-s-gecersiz .rt-hint { background: var(--brick-bg); color: var(--brick); }
.rt-s-disinda .rt-hint b, .rt-s-gecersiz .rt-hint b { font-weight: 700; }
html body .rt-fix { margin: 6px 0 0; width: auto; min-height: 0; padding: 5px 10px; font: 600 13px var(--font-sans); background: #fff; color: var(--brick); border: 1px solid var(--brick); border-radius: 8px; cursor: pointer; }
.rt-decide { margin: 8px 0 0; padding: 10px 12px; border: 1px solid #EFC2BC; border-radius: 10px; background: #FFF8F7; }
[data-theme="dark"] .rt-decide { background: rgba(0,0,0,0.15); border-color: #5A382E; }
.rt-decide[hidden] { display: none; }
.rt-decide-q { margin: 0 0 8px; font-weight: 600; font-size: 14px; color: var(--ink); }
.rt-decide-btns { display: flex; gap: 8px; }
html body .rt-decide-btns button { flex: 1; width: auto; margin: 0; min-height: 40px; border-radius: 9px; font: 600 14px var(--font-sans); cursor: pointer; border: 1px solid var(--border-strong); background: var(--cream); color: var(--ink); }
html body .rt-decide-btns .rt-reject { border-color: var(--brick); color: var(--brick); }
.rt-decided-red .rt-reject { background: var(--brick) !important; color: #fff !important; }
html body .rt-reason { margin: 8px 0 0 !important; min-height: 70px; }
.rt-reason[hidden] { display: none; }
.rt-need .rt-reason { border-color: var(--brick) !important; box-shadow: 0 0 0 3px rgba(180,35,24,0.15) !important; }
.rt-decide-note { margin: 6px 0 0; font-size: 12.5px; color: var(--clay-muted); }
.rt-reason[hidden] ~ .rt-decide-note { display: none; }
/* Liste ve Özet */
.rt-v-disinda { color: var(--brick) !important; font-weight: 700; } .rt-v-sinirda { color: var(--honey) !important; font-weight: 700; }
.rt-tag { display: inline-block; font: 600 11px/1 var(--font-sans); padding: 3px 6px; border-radius: 5px; vertical-align: 1px; }
.rt-tag-disinda { background: var(--brick-bg); color: var(--brick); } .rt-tag-sinirda { background: var(--honey-bg); color: var(--honey); }
html body .receipt-card.receipt-temp-bad { border-left: 4px solid var(--brick) !important; }
.rt-settings-link { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px 12px; font-size: 14px; font-weight: 600; color: var(--paprika); text-decoration: none; }
.rt-range-cell { font: 600 15px var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Kabul kontrolü: bant ve faaliyet bağlantısı */
.kc-band { display: block; margin-top: 8px; max-width: 420px; }
.kc-mark-warn { background: var(--honey) !important; box-shadow: 0 0 0 1px var(--honey) !important; }
.kc-mark-crit { background: var(--brick) !important; box-shadow: 0 0 0 1px var(--brick) !important; }
.kc-action { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--brick); text-decoration: none; }
@media (max-width: 640px) { .rt-settings-link { margin: 4px 0 14px; } .rt-decide-btns { flex-direction: column; } }

/* ==================== TELİF / İMZA ==================== */
.app-copy {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px;
  margin: 48px 0 0; padding: 18px 2px 4px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--clay-muted);
}
.app-copy-mark {
  grid-row: span 1; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--paprika); color: #fff; font: 700 12px/1 var(--font-display); font-stretch: 110%; letter-spacing: 0.5px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18);
}
.app-copy-main b { color: var(--ink); font-weight: 700; }
.app-copy-sub { color: var(--clay-faint); font-size: 12.5px; text-align: right; }
[data-theme="dark"] .app-copy-mark { background: var(--paprika); color: #fff; }
@media (max-width: 760px) {
  .app-copy { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 6px; margin-top: 36px; padding-top: 16px; }
  .app-copy-sub { text-align: center; }
}
/* Giriş ekranı: kartın altında, ortalı */
.app-copy-login { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; border-top: 0; padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  grid-template-columns: auto auto; justify-content: center; text-align: left; }
.app-copy-login .app-copy-sub { grid-column: 2; text-align: left; margin-top: -2px; }
.app-copy-login .app-copy-mark { grid-row: span 2; }
@media (max-width: 760px) { .app-copy-login { position: static; margin-top: 28px; grid-template-columns: auto auto; justify-items: start; } }
@media (max-height: 560px) { .app-copy-login { position: static; margin-top: 24px; } }
.login-body { flex-direction: column; }

/* ==================== KARANLIK MOD KONTRAST DÜZELTMELERİ ====================
   Kontrast denetimiyle bulundu (yazı/zemin oranı < 3). Yalnızca karanlık tema. */
html[data-theme="dark"] { color-scheme: dark; }   /* tarih/saat seçicileri de koyu açılsın */
/* 1) Form alanları: v2'deki beyaz zemin karanlık kuralı eziyordu (yazı görünmüyordu) */
html[data-theme="dark"] body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]),
html[data-theme="dark"] body select, html[data-theme="dark"] body textarea {
  background-color: #1B1613 !important; color: var(--ink) !important; border-color: #4A3F37 !important;
}
html[data-theme="dark"] body input::placeholder, html[data-theme="dark"] body textarea::placeholder { color: #8C7F74 !important; opacity: 1; }
html[data-theme="dark"] body .rt-temp.rt-bad { background-color: var(--brick-bg) !important; color: var(--brick) !important; }
/* 2) İkincil butonların üzerine gelince beyaza dönmesi */
html[data-theme="dark"] body .btn-secondary:hover, html[data-theme="dark"] body .print-btn:hover,
html[data-theme="dark"] body .back-link-btn:hover { background: var(--muted-bg) !important; }
/* 3) Açık somon (karanlık temanın ana rengi) zeminli öğelerde yazı koyu */
html[data-theme="dark"] body .btn-primary, html[data-theme="dark"] body .file-pick-btn, html[data-theme="dark"] body .app-copy-mark,
html[data-theme="dark"] body .tabbar .tab-fab-c, html[data-theme="dark"] body .oz-soon .upcoming-filter button.active,
html[data-theme="dark"] body .history-tab-btn.active, html[data-theme="dark"] body .grid-legend b,
html[data-theme="dark"] body .rt-decided-red .rt-reject { color: #1B1310 !important; }
html[data-theme="dark"] body .btn-primary .icon, html[data-theme="dark"] body .tabbar .tab-fab-c .icon { color: #1B1310 !important; }
html[data-theme="dark"] body .history-tab-btn.active .badge, html[data-theme="dark"] body .upcoming-filter button.active .uf-count { background: rgba(0,0,0,0.16) !important; color: #1B1310 !important; }
/* 4) Açık zemini sabit olan küçük öğeler: yazı sabit koyu */
html body .nav-av { color: var(--brand-deep) !important; }
html[data-theme="dark"] body .hero-photo-btn { color: #5E060D !important; }
html[data-theme="dark"] body .hero-photo-btn .icon { color: #5E060D !important; }
html[data-theme="dark"] body .kb-cap { color: #1A1F1D !important; }
/* 5) Mal kabul penceresindeki ürün satırı (sabit yarı beyaz zemin) */
html[data-theme="dark"] body .kabul-product-row { background: rgba(255,255,255,0.04) !important; }
html[data-theme="dark"] body .ub-prev-name, html[data-theme="dark"] body .ub-prev-sec span { color: #1B1310 !important; }
/* Açık tema: soluk gri yazı zemine göre fazla soluktu (kontrast 2,7 → ~3,8) */
:root:not([data-theme="dark"]) { --clay-faint: #737C77; }

/* ==================== ÖZET: TAKVİM YAPRAĞI (v222) ====================
   "Cuma, 25 Eylül" tek satırlık dar/kalın başlık yerine: solda ay + gün
   yaprağı, yanında haftanın günü ve hafta bilgisi, altında durum cümlesi. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (min-width: 761px) { .oz-head { align-items: center; } }
.oz-when { display: flex; align-items: center; gap: 18px; min-width: 0; }
.oz-leaf { flex: 0 0 auto; display: flex; flex-direction: column; width: 74px; border-radius: 14px; overflow: hidden;
  background: var(--cream, #FAFBF9); border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(26,31,29,.04), 0 8px 18px -12px color-mix(in srgb, var(--brand-deep) 35%, transparent); text-align: center; }
.oz-leaf-m { display: block; padding: 5px 4px 4px; background: var(--paprika); color: #fff;
  font: 700 11px/1.2 var(--font-sans); letter-spacing: 1.1px; text-transform: uppercase; }
.oz-leaf-d { display: block; padding: 6px 0 9px; font: 700 34px/1 var(--font-display); font-stretch: 100%;
  font-variant-numeric: tabular-nums; letter-spacing: -0.5px; color: var(--ink); }
.oz-when-txt { min-width: 0; }
html body .oz-date { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0;
  font: 650 30px/1.1 var(--font-display); font-stretch: 100%; letter-spacing: -0.3px; color: var(--ink); }
.oz-week { font: 600 13px/1 var(--font-sans); letter-spacing: .2px; color: var(--clay-muted);
  padding: 5px 9px; border-radius: 999px; background: rgba(26,31,29,.055); white-space: nowrap; position: relative; top: -3px; }
html body .oz-sum { margin: 7px 0 0; font-size: 16px; line-height: 1.45; }
[data-theme="dark"] .oz-leaf { background: #1D2320; border-color: #2E3632; box-shadow: none; }
[data-theme="dark"] .oz-leaf-m { color: #1B1310; }
[data-theme="dark"] .oz-week { background: rgba(255,255,255,.07); }
@media (max-width: 760px) {
  .oz-when { gap: 14px; align-items: flex-start; }
  .oz-leaf { width: 62px; border-radius: 12px; }
  .oz-leaf-m { font-size: 10px; letter-spacing: .9px; }
  .oz-leaf-d { font-size: 28px; padding: 5px 0 7px; }
  html body .oz-date { font-size: 25px; gap: 4px 10px; }
  .oz-week { font-size: 12px; padding: 4px 8px; top: -2px; }
  html body .oz-sum { font-size: 15px; margin-top: 6px; }
}

/* ==================== ORTAK (Site Ayarları için) ==================== */
.tabs-lite { display: flex; gap: 6px; margin: 0 0 16px; padding: 4px; border-radius: 12px; background: var(--muted-bg); width: fit-content; max-width: 100%; overflow-x: auto; }
.tabs-lite a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--clay-muted); text-decoration: none; white-space: nowrap; }
.tabs-lite a.on { background: var(--cream); color: var(--ink); box-shadow: 0 1px 2px rgba(26,31,29,.08); }
.linklike { background: none; border: 0; padding: 0; margin: 0; width: auto; font: inherit; font-size: 13px; color: var(--paprika); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.cp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 16px; }
.cp-stats .cp-st-wide { grid-column: span 2; }
.cp-stats > div { padding: 12px 14px; border-radius: 14px; background: var(--cream); border: 1px solid var(--border); }
.cp-stats b { display: block; font: 700 26px/1 var(--font-display); color: var(--ink); }
.cp-stats span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--clay-muted); }
.cp-stats .cp-st-bad { background: var(--brick-bg); } .cp-stats .cp-st-bad b { color: var(--brick); }
.cp-stats .cp-st-wide p { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cp-stats .cp-st-warn { background: var(--honey-bg); } .cp-stats .cp-st-warn b { color: var(--honey); }
@media (max-width: 760px) { .cp-stats { grid-template-columns: repeat(2, 1fr); } }
/* ==================== SİTE AYARLARI ==================== */
.no-dark [onclick="toggleTheme()"] { display: none !important; }
.login-note { margin: -4px 0 14px; font-size: 14px; line-height: 1.5; color: var(--clay-muted); text-align: center; }
.sa-tabs { margin-bottom: 18px; }
.sa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.sa-grid > .card { margin: 0; min-width: 0; }
.sa-grid .sa-span { grid-column: 1 / -1; }
.sa-save { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; position: sticky; bottom: 12px; z-index: 5; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--border); }
html body .sa-save .btn-primary, html body .sa-save .btn-secondary { width: auto; margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.sa-check { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-weight: 500; }
html body .sa-check input { width: 18px; height: 18px; margin: 0; }
.sa-logo-row { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; margin-bottom: 14px; }
.sa-logo-box { width: 96px; height: 96px; border-radius: 14px; border: 1px dashed var(--border-strong); background: repeating-conic-gradient(var(--muted-bg) 0 25%, var(--cream) 0 50%) 0 0 / 14px 14px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sa-logo-box img { max-width: 84px; max-height: 84px; object-fit: contain; }
.sa-fav { width: 56px; height: 56px; justify-self: center; } .sa-fav img { max-width: 40px; max-height: 40px; }
.sa-presets { display: flex; flex-wrap: wrap; gap: 8px; }
html body .sa-preset { width: auto; margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--cream); color: var(--ink); font: 600 14px/1 var(--font-sans); cursor: pointer; }
html body .sa-preset.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sa-preset-custom { cursor: default !important; color: var(--clay-muted) !important; }
.sa-sw { display: inline-flex; } .sa-sw i { width: 14px; height: 22px; display: block; } .sa-sw i:first-child { border-radius: 5px 0 0 5px; } .sa-sw i:last-child { border-radius: 0 5px 5px 0; }
.sa-color { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--border); }
html body .sa-color input[type=color] { width: 46px; height: 38px; padding: 2px; margin: 0; border-radius: 9px; cursor: pointer; }
.sa-color b { display: block; font-size: 14.5px; } .sa-color span { display: block; font-size: 12.5px; color: var(--clay-muted); }
.sa-hex { font-size: 12px; color: var(--clay-muted); }
.sa-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.sa-seg label { margin: 0; cursor: pointer; }
.sa-seg input { position: absolute; opacity: 0; pointer-events: none; }
.sa-seg span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 9px; border: 1px solid var(--border); background: var(--cream); font-size: 13.5px; font-weight: 600; color: var(--clay-muted); }
.sa-seg span i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--border-strong); display: inline-block; }
.sa-seg input:checked + span { border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sa-seg input:focus-visible + span { outline: 2px solid var(--paprika); outline-offset: 2px; }
.sa-preview { display: grid; grid-template-columns: 190px 1fr; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--sand); }
.sa-pv-side { background: var(--brand-deep); padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; }
.sa-pv-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #fff; font-size: 14px; }
.sa-pv-brand img { width: 30px; height: 30px; object-fit: contain; background: #fff; border-radius: 7px; padding: 2px; }
.sa-pv-side span { color: rgba(255,255,255,.78); font-size: 13.5px; font-weight: 600; padding: 8px 10px; border-radius: 9px; }
.sa-pv-side span.on { background: var(--cream); color: var(--ink); }
.sa-pv-main { padding: 16px; }
.sa-mod td { vertical-align: middle; }
html body .sa-mod input[type=text] { margin: 0; height: 38px; max-width: 320px; }
.sa-mod tr.sa-off td { opacity: .55; }
.sa-switch { position: relative; display: inline-block; width: 42px; height: 24px; margin: 0; cursor: pointer; }
.sa-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.sa-switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--border-strong); transition: background .15s; }
.sa-switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.sa-switch input:checked + span { background: var(--olive); }
.sa-switch input:checked + span::after { transform: translateX(18px); }
.sa-switch input:disabled + span { opacity: .5; cursor: not-allowed; }
.sa-switch input:focus-visible + span { outline: 2px solid var(--paprika); outline-offset: 2px; }
@media (max-width: 860px) { .sa-grid { grid-template-columns: 1fr; } .sa-preview { grid-template-columns: 1fr; } .sa-pv-side { flex-direction: row; flex-wrap: wrap; } .sa-pv-brand { width: 100%; } }
.kr-box { max-width: 480px; text-align: left; }
.kr-box h1 { text-align: center; }
.kr-presets { gap: 6px; margin-bottom: 8px; }
.kr-pre { margin: 0; cursor: pointer; }
.kr-pre input { position: absolute; opacity: 0; pointer-events: none; }
.kr-pre span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 9px; border: 1px solid var(--border); font-size: 13px; font-weight: 600; background: var(--cream); }
.kr-pre span i { width: 10px; height: 18px; display: inline-block; } .kr-pre span i:first-child { border-radius: 4px 0 0 4px; margin-right: -6px; } .kr-pre span i:nth-child(2) { border-radius: 0 4px 4px 0; }
.kr-pre input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.kr-pre input:focus-visible + span { outline: 2px solid var(--paprika); }
.sa-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sa-adv { margin: 8px 0 12px; } .sa-adv summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--clay-muted); padding: 4px 0; }
.sa-cron { white-space: pre-wrap; word-break: break-all; font-size: 12px; background: var(--muted-bg); padding: 10px; border-radius: 8px; }
.sa-test { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); }
.sa-test.ok { background: var(--olive-bg); color: var(--olive); } .sa-test.bad { background: var(--brick-bg); color: var(--brick); }
.sa-test pre { white-space: pre-wrap; font-size: 11.5px; max-height: 260px; overflow: auto; color: var(--ink); background: var(--cream); padding: 8px; border-radius: 8px; }
.sa-test summary { cursor: pointer; margin-top: 6px; font-size: 13px; }
.sa-sigs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.sa-sig { border: 1px solid var(--border); border-radius: 12px; padding: 10px; display: grid; gap: 8px; background: var(--cream); }
.sa-sig-img { height: 80px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 8px; background: repeating-conic-gradient(var(--muted-bg) 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.sa-sig-img img { max-height: 70px; max-width: 70%; object-fit: contain; } .sa-sig-img .sa-sig-stamp { max-height: 66px; max-width: 30%; }
.sa-sig-meta b { display: block; } .sa-sig-meta span { font-size: 13px; color: var(--clay-muted); margin-right: 6px; }
.sa-sig-act { display: flex; gap: 14px; align-items: center; font-size: 13px; }
.sa-mailgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
html body .sa-color input[type=color]:disabled { opacity: .4; cursor: not-allowed; }
.sa-kv { width: 100%; border-collapse: collapse; font-size: 14px; } .sa-kv th { text-align: left; font-weight: 600; color: var(--clay-muted); padding: 6px 8px 6px 0; width: 45%; } .sa-kv td { padding: 6px 0; border-bottom: 1px dashed var(--border); } .sa-kv th { border-bottom: 1px dashed var(--border); }
@media (max-width: 860px) { .sa-mailgrid, .sa-row2 { grid-template-columns: 1fr; } }
.sa-tabs { flex-wrap: wrap; width: auto; overflow: visible; }
@media (max-width: 600px) { .sa-tabs a { padding: 7px 10px; font-size: 13px; } }
.sa-jobs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.sa-job { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: var(--cream); min-width: 0; }
.sa-job-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .sa-job-h b { flex: 1; font-size: 16px; }
.sa-when { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: end; }
html body .sa-when input[type=time] { margin: 0 0 10px; }
.sa-days { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.sa-days label { margin: 0; cursor: pointer; } .sa-days input { position: absolute; opacity: 0; pointer-events: none; }
.sa-days span { display: inline-block; min-width: 40px; text-align: center; padding: 8px 6px; border-radius: 8px; border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--clay-muted); background: var(--sand); }
.sa-days input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.sa-days input:focus-visible + span { outline: 2px solid var(--paprika); outline-offset: 2px; }
.sa-secs .sa-check { margin: 4px 0; font-size: 14px; }
.sa-last { margin: 10px 0 4px; }
.sa-src { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--border); background: var(--muted-bg); font-size: 13.5px; line-height: 1.45; }
.sa-src > svg { flex-shrink: 0; margin-top: 2px; }
.sa-src b { display: block; color: var(--ink); } .sa-src span { display: block; color: var(--clay-muted); word-break: break-word; }
.sa-src .linklike { margin-top: 6px; font-weight: 700; }
.sa-src.ok { background: var(--olive-bg); border-color: color-mix(in srgb, var(--olive) 30%, transparent); } .sa-src.ok > svg { color: var(--olive); }
.sa-src.warn { background: var(--honey-bg); border-color: color-mix(in srgb, var(--honey) 35%, transparent); } .sa-src.warn > svg { color: var(--honey); }
.sa-src.bad { background: var(--brick-bg); border-color: color-mix(in srgb, var(--brick) 35%, transparent); } .sa-src.bad > svg { color: var(--brick); }
.sa-admin-note { display: block; padding: 9px 11px; border-radius: 10px; background: var(--muted-bg); line-height: 1.5; } .sa-admin-note svg { vertical-align: -2px; }
.sa-jobs > .sa-job:nth-child(3):last-child { grid-column: 1 / -1; }
.sa-code { font-size: 12px; word-break: break-all; }
@media (max-width: 900px) { .sa-jobs { grid-template-columns: 1fr; } .sa-when { grid-template-columns: 1fr; } }

/* ==================== EKLERİ İNDİR DÜĞMELERİ ==================== */
.dl-cell { white-space: nowrap; }
.dl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 3px; height: 26px; min-width: 26px; padding: 0 7px; margin-left: 6px; vertical-align: middle; border-radius: 999px; border: 1px solid var(--border); background: var(--cream); color: var(--clay-muted); font: 700 11.5px/1 var(--font-sans); text-decoration: none; transition: transform .15s; }
.dl-btn .icon { width: 13px; height: 13px; }
.dl-btn:hover, .dl-btn:focus-visible { background: var(--paprika); border-color: var(--paprika); color: #fff; transform: translateY(-1px); }
.dl-btn:focus-visible { outline: 2px solid var(--paprika); outline-offset: 2px; }
[data-theme="dark"] .dl-btn:hover, [data-theme="dark"] .dl-btn:focus-visible { color: #1B1310; }
.dl-right { display: inline-flex; align-items: center; gap: 6px; }
.item-selectable > .dl-btn { align-self: center; margin: 0 12px 0 0; flex-shrink: 0; }
.receipt-foot-act { margin-left: auto; margin-right: 10px; }
.receipt-foot-act .dl-btn { margin-left: 0; }
html body .dl-hero { display: inline-flex; align-items: center; gap: 6px; }

/* ==================== ÖLÇÜM ALANI ± DÜĞMESİ ==================== */
.sg-input { display: flex; align-items: stretch; margin-bottom: 10px; }
html body .sg-input input { flex: 1; min-width: 0; margin: 0 !important; border-radius: 0 10px 10px 0 !important; font-variant-numeric: tabular-nums; }
html body .sg-btn { flex: 0 0 44px; width: 44px; margin: 0; padding: 0; border: 1px solid var(--border-strong); border-right: 0; border-radius: 10px 0 0 10px; background: var(--cream); color: var(--ink); font: 700 19px/1 var(--font-sans); cursor: pointer; }
html body .sg-btn:hover { background: var(--muted-bg); }
html body .sg-btn:focus-visible { outline: 2px solid var(--paprika); outline-offset: 1px; }
.sg-compact { display: inline-flex; margin-bottom: 0; vertical-align: middle; }
html body .sg-compact .sg-btn { flex: 0 0 26px; width: 26px; font-size: 14px; border-radius: 7px 0 0 7px; }
html body .sg-compact input.cizelge-input { width: 58px !important; border-radius: 0 7px 7px 0 !important; }

/* ==================== OTURUM SAYACI (sağ üst) ==================== */
.sess-bar { display: flex; justify-content: flex-end; margin: -6px 0 8px; }
html body .sess-pill { display: inline-flex; align-items: center; gap: 8px; width: auto; margin: 0; padding: 5px 12px 5px 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--cream); color: var(--clay-muted); font: 600 12.5px/1 var(--font-sans); font-variant-numeric: tabular-nums; cursor: pointer; box-shadow: none; transition: border-color .2s, background .2s, color .2s; }
html body .sess-pill:hover { border-color: var(--border-strong); color: var(--ink); }
html body .sess-pill:focus-visible { outline: 2px solid var(--paprika); outline-offset: 2px; }
.sess-ring { width: 22px; height: 22px; transform: rotate(-90deg); flex-shrink: 0; }
.sess-ring circle { fill: none; stroke-width: 3.5; }
.sess-ring-bg { stroke: var(--muted-bg); }
.sess-ring-fg { stroke: var(--olive); stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear, stroke .2s; }
.sess-lbl { color: var(--clay-faint); font-weight: 600; }
.sess-t { color: var(--ink); font-weight: 700; min-width: 44px; text-align: left; }
html body .sess-pill.sess-warn { border-color: color-mix(in srgb, var(--honey) 45%, transparent); background: var(--honey-bg); color: var(--honey); }
html body .sess-pill.sess-warn .sess-ring-fg { stroke: var(--honey); }
html body .sess-pill.sess-bad { border-color: color-mix(in srgb, var(--brick) 50%, transparent); background: var(--brick-bg); color: var(--brick); animation: sess-pulse 1.4s ease-in-out infinite; }
html body .sess-pill.sess-bad .sess-ring-fg { stroke: var(--brick); }
.sess-warn .sess-t, .sess-bad .sess-t, .sess-warn .sess-lbl, .sess-bad .sess-lbl { color: inherit; }
.sess-ext { display: none; margin-left: 2px; padding: 4px 9px; border-radius: 999px; color: #fff; font-weight: 700; }
.sess-warn .sess-ext { display: inline-block; background: var(--honey); } .sess-bad .sess-ext { display: inline-block; background: var(--brick); }
[data-theme="dark"] .sess-warn .sess-ext, [data-theme="dark"] .sess-bad .sess-ext { color: #1B1310; }
html body .sess-pill.sess-ok .sess-ring-fg { animation: sess-fill .6s ease-out; }
@keyframes sess-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brick) 35%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--brick) 0%, transparent); } }
@keyframes sess-fill { from { stroke-dashoffset: 97.4; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { html body .sess-pill.sess-bad { animation: none; } .sess-ring-fg { transition: none; } }
/* Mobil: üst çubukta, avatarın solunda sade hap */
.sess-m { display: none !important; }
@media (max-width: 640px) {
  .sess-bar { display: none; }
  html body .topbar-actions > .sess-m { display: inline-flex !important; margin-left: auto; padding: 6px 10px; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.1); color: #fff; }
  html body .topbar-actions > .sess-m .sess-t { color: #fff; min-width: 0; }
  html body .topbar-actions > .sess-m + .m-avatar { margin-left: 8px; }
  html body .topbar-actions > .sess-m.sess-warn { background: var(--honey-bg); color: var(--honey); border-color: transparent; }
  html body .topbar-actions > .sess-m.sess-bad { background: var(--brick-bg); color: var(--brick); border-color: transparent; }
  html body .topbar-actions > .sess-m.sess-warn .sess-t, html body .topbar-actions > .sess-m.sess-bad .sess-t { color: inherit; }
}
@media print { .sess-bar, .sess-m { display: none !important; } }

/* Oturum bitiyor uyarısı (son 1 dakika) */
.sto-back { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 16px; background: rgba(27,19,16,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: sto-fade .2s ease-out; }
.sto-back[hidden] { display: none; }
html.sto-open { overflow: hidden; }
.sto-card { width: 100%; max-width: 400px; padding: 28px 26px 20px; border-radius: 20px; background: var(--cream); border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(0,0,0,.28); text-align: center; animation: sto-pop .25s cubic-bezier(.2,.9,.3,1.2); }
.sto-clock { position: relative; width: 76px; height: 76px; margin: 0 auto 14px; }
.sto-clock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sto-clock circle { fill: none; stroke-width: 5; }
.sto-bg { stroke: var(--brick-bg); }
.sto-fg { stroke: var(--brick); stroke-linecap: round; stroke-dasharray: 175.9; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; }
.sto-clock b { position: absolute; inset: 0; display: grid; place-items: center; color: var(--brick); font: 700 24px/1 var(--font-display); font-variant-numeric: tabular-nums; }
html body .sto-card h2 { border: 0; padding: 0; margin: 0 0 8px; color: var(--ink); font: 700 20px/1.25 var(--font-display); }
.sto-card p { margin: 0 0 20px; color: var(--clay-muted); font-size: 14.5px; line-height: 1.55; }
.sto-card p strong { color: var(--brick); font-variant-numeric: tabular-nums; }
html body .sto-go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin: 0; font-size: 15px; }
.sto-out { display: inline-block; margin-top: 12px; padding: 6px 10px; color: var(--clay-faint); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.sto-out:hover { color: var(--ink); text-decoration: underline; }
@keyframes sto-fade { from { opacity: 0; } }
@keyframes sto-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .sto-back, .sto-card { animation: none; } .sto-fg { transition: none; } }
@media print { .sto-back { display: none !important; } }

/* ==================== OTURUMLAR ==================== */
.os-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--muted-bg); font-size: 12px; }
.tabs-lite a.on .os-count { background: var(--olive-bg); color: var(--olive); }
.os-list { display: flex; flex-direction: column; gap: 10px; }
.os-card { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--cream); }
.os-card.os-mine { box-shadow: inset 3px 0 0 var(--olive); }
.os-av { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--muted-bg); color: var(--ink); font: 700 15px var(--font-display); }
.os-dot { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid var(--cream); }
.os-dot.on { background: var(--olive); } .os-dot.idle { background: var(--clay-faint); }
.os-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 15.5px; color: var(--ink); }
.os-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 3px; font-size: 13px; color: var(--clay-muted); }
.os-meta .icon { width: 13px; height: 13px; }
.os-act { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.os-act form { margin: 0; }
html body .os-end { width: auto; margin: 0; white-space: nowrap; }
html body .os-end:hover { border-color: var(--brick); color: var(--brick); }
@media (max-width: 640px) { .os-card { grid-template-columns: 44px 1fr; } .os-act { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; } }

/* Şahit numune: toplu imha */
.nm-bulk { display: grid; grid-template-columns: 1fr 220px auto; gap: 12px; align-items: center; margin: 0 0 12px; padding: 14px 16px; border-color: color-mix(in srgb, var(--brick) 30%, var(--border)); background: var(--brick-bg); }
.nm-bulk-txt b { display: block; color: var(--ink); } .nm-bulk-txt span { display: block; font-size: 13px; color: var(--clay-muted); }
html body .nm-bulk input[type=text] { margin: 0; } html body .nm-bulk .btn-primary { width: auto; margin: 0; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
@media (max-width: 760px) { .nm-bulk { grid-template-columns: 1fr; } html body .nm-bulk .btn-primary { width: 100%; justify-content: center; } }

/* ==================== TABLO SIRALAMA ==================== */
html body .data-table thead th.th-sortable { padding: 0; }
html body .th-sort { display: inline-flex; align-items: center; gap: 6px; width: 100%; margin: 0; padding: 11px 14px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
html body th.dt-right .th-sort { justify-content: flex-end; }
html body th.dt-center .th-sort { justify-content: center; }
html body .th-sort:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
html body .th-sort:focus-visible { outline: 2px solid var(--paprika); outline-offset: -2px; }
html body th.is-sorted .th-sort { color: var(--ink); }
.th-sort-ic { display: inline-flex; flex-shrink: 0; }
.th-sort-ic path { fill: currentColor; opacity: .28; transition: opacity .15s; }
.th-sort:hover .th-sort-ic path { opacity: .5; }
.th-sort-ic.is-asc .up, .th-sort-ic.is-desc .dn { opacity: 1; fill: var(--paprika); }
.th-sort-ic.is-asc .dn, .th-sort-ic.is-desc .up { opacity: .18; }
[data-theme="dark"] .th-sort-ic.is-asc .up, [data-theme="dark"] .th-sort-ic.is-desc .dn { fill: var(--dark-accent, var(--paprika)); }

/* "Sırala" çubuğu: kart listelerinde her zaman, tablolarda yalnızca mobilde */
.ts-bar { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 auto; padding: 0; flex-wrap: nowrap; }
.ts-lbl { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--clay-muted); white-space: nowrap; }
html body .ts-bar select { width: auto; min-width: 0; max-width: 200px; margin: 0; padding: 7px 30px 7px 10px; font-size: 13.5px; }
html body .ts-dir { display: inline-flex; align-items: center; gap: 5px; width: auto; margin: 0; padding: 7px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--cream); color: var(--ink); font-size: 13px; font-weight: 600; box-shadow: none; cursor: pointer; white-space: nowrap; }
html body .ts-dir:hover { border-color: var(--border-strong); }
.ts-mobile { display: none; }
.ts-bar.ts-client { margin: 0 0 10px; }
@media (max-width: 720px) {
  .ts-mobile { display: flex; }
  .ts-bar { width: 100%; margin: 6px 0 4px; }
  html body .ts-bar select { flex: 1; max-width: none; }
}
@media print { .ts-bar, .th-sort-ic { display: none !important; } }

/* ==================== DEĞİŞİKLİK GEÇMİŞİ (yalnızca admin) ==================== */
.ah-card { margin-top: 18px; border-style: dashed; }
.ah-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ah-head .card-title { margin: 0; }
.ah-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--muted-bg); color: var(--clay-muted); font-size: 11.5px; font-weight: 600; }
.ah-list { list-style: none; margin: 0; padding: 0; }
.ah-list > li { position: relative; padding: 10px 0 10px 18px; border-top: 1px solid var(--border); }
.ah-list > li:first-child { border-top: 0; }
.ah-list > li::before { content: ''; position: absolute; left: 3px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--honey); }
.ah-meta { font-size: 13px; color: var(--clay-muted); margin-bottom: 4px; }
.ah-meta b { color: var(--ink); }
.ah-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.ah-list ul li { display: grid; grid-template-columns: minmax(120px, 190px) auto auto 1fr; gap: 8px; align-items: baseline; font-size: 13.5px; }
.ah-f { color: var(--clay-muted); font-weight: 600; }
.ah-old, .ah-old-cell { color: var(--brick); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--brick) 45%, transparent); }
html body .ah-new, html body .data-table td.ah-new-cell { color: var(--olive); font-weight: 600; }
html body .data-table td.ah-old-cell { color: var(--brick); }
.ah-arrow { color: var(--clay-faint); }
@media (max-width: 640px) { .ah-list ul li { grid-template-columns: 1fr; gap: 0; padding: 4px 0; } .ah-arrow { display: none; } }
@media print { .ah-card { display: none !important; } }

/* ==================== DÜZELTİCİ FAALİYET KAPATMA ==================== */
.fa-close-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fa-close-form .field { margin: 0; }
.fa-hint { margin: -4px 0 8px; min-height: 18px; font-weight: 600; }
.fa-hint.fa-ok { color: var(--olive); } .fa-hint.fa-bad { color: var(--brick); }
.fa-eff { margin: 0 0 10px; }
.fa-ineff { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--brick-bg); color: var(--brick); font-size: 13.5px; line-height: 1.45; }
.fa-ineff svg { flex-shrink: 0; margin-top: 2px; }
.fa-close-dl { margin-top: 10px; }
@media (max-width: 640px) { .fa-close-form .row { grid-template-columns: 1fr; } }

/* ==================== RAPORLAMA KISAYOLLARI + DENETİM DOSYASI ==================== */
.rp-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin: 0 0 18px; }
.rp-card { display: grid; grid-template-columns: 46px 1fr 20px; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--cream); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.rp-card:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.rp-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--muted-bg); color: var(--ink); }
.rp-primary .rp-ic { background: var(--paprika); color: #fff; }
.rp-txt b { display: block; font-size: 16px; } .rp-txt small { display: block; margin-top: 3px; color: var(--clay-muted); font-size: 13px; line-height: 1.45; }
.rp-go { color: var(--clay-faint); }
.dd-month-row { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: end; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.dd-month-row select { margin: 0; }
.dd-summary { display: flex; flex-wrap: wrap; gap: 6px; }
.dd-summary span { padding: 6px 11px; border-radius: 999px; background: var(--muted-bg); font-size: 13px; color: var(--clay-muted); }
.dd-summary span b { color: var(--ink); } .dd-summary span.dd-bad { background: var(--brick-bg); color: var(--brick); } .dd-summary span.dd-bad b { color: var(--brick); }
.dd-secs-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dd-secs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.dd-sec-opt { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--cream); cursor: pointer; }
.dd-sec-opt:has(input:checked) { border-color: color-mix(in srgb, var(--paprika) 45%, var(--border)); background: color-mix(in srgb, var(--paprika) 5%, var(--cream)); }
.dd-sec-opt input { margin: 0; width: 18px; height: 18px; }
.dd-sec-txt b { display: block; font-size: 14px; } .dd-sec-txt small { display: block; color: var(--clay-muted); font-size: 12px; line-height: 1.35; margin-top: 1px; }
.dd-sec-n { font-size: 12px; font-weight: 700; color: var(--olive); white-space: nowrap; } .dd-sec-n.is-zero { color: var(--clay-faint); font-weight: 600; }
.dd-actions { display: flex; gap: 10px; flex-wrap: wrap; }
html body .dd-actions .btn-primary, html body .dd-actions .btn-secondary { width: auto; margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.dd-wait { margin-top: 10px; }
@media (max-width: 640px) { .dd-month-row { grid-template-columns: 1fr; } }

/* ==================== YAZI GÖRÜNÜMLÜ DÜĞMELER → ORTAK DÜĞME STİLİ ====================
   Tek başına duran eylem bağlantıları (ayar sayfasına git, temizle, geri dön,
   tümünü seç, şimdi gönder…) artık çerçeveli küçük düğme. Cümle içi bağlantılar
   bu kurala dahil değil. */
html body .btn-ghost, html body .back-link-btn, html body .rt-settings-link, html body .filter-clear,
html body .linklike, html body .month-nav-today, html body .oz-panel-h > a, html body .tk-more a {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; width: auto;
  min-height: 34px; padding: 6px 13px !important; margin: 0;
  background: var(--cream) !important; border: 1px solid var(--border) !important; border-radius: 9px;
  color: var(--paprika-dark, var(--paprika)) !important; font: inherit; font-size: 13px !important; font-weight: 600 !important;
  line-height: 1.2; text-decoration: none !important; white-space: nowrap; cursor: pointer; box-shadow: none !important;
  transition: background .15s, border-color .15s, color .15s; vertical-align: middle;
}
html body .btn-ghost:hover, html body .back-link-btn:hover, html body .rt-settings-link:hover, html body .filter-clear:hover,
html body .linklike:hover, html body .month-nav-today:hover, html body .oz-panel-h > a:hover, html body .tk-more a:hover {
  background: var(--paprika-tint) !important; border-color: var(--paprika) !important; color: var(--paprika-dark, var(--paprika)) !important; transform: none;
}
html body .btn-ghost .icon, html body .rt-settings-link .icon, html body .back-link-btn .icon { color: var(--paprika); flex: 0 0 auto; }
html body .btn-ghost.sm, html body .filter-clear, html body .month-nav-today, html body .oz-panel-h > a, html body .tk-more a, html body .linklike {
  min-height: 30px; padding: 4px 11px !important; font-size: 12.5px !important; border-radius: 8px;
}
html body .back-link-btn { margin-bottom: 18px; }
html body .filter-bar .filter-clear { align-self: flex-end; min-height: 42px; color: var(--clay-muted) !important; }
html body .filter-bar .filter-clear:hover { color: var(--brick) !important; border-color: var(--brick) !important; background: var(--brick-bg) !important; }
.hint .btn-ghost { margin-left: 6px; }
.hint > .btn-ghost:first-child { margin-left: 0; }
.oz-panel-h { align-items: center; }
.tk-more { margin: 10px 0 0; }
.perm-tools, .dd-pick-tools { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sa-src .linklike { margin-top: 8px; }
/* Filtre çubuğunda tarih alanı kesilmesin (10/04/202… görünüyordu) */
.filter-bar input[type=date] { min-width: 9.6em; }
.filter-bar .field:has(input[type=date]) { flex: 1 1 160px; min-width: 9.6em; }
/* Sonuç çubuğu: sayı solda, düğmeler sağda yan yana (aralarına boşluk yayılmasın) */
.result-bar { justify-content: flex-start; gap: 8px; }
.result-bar .result-count { margin-right: auto !important; }
html[data-theme="dark"] body .btn-ghost:hover, html[data-theme="dark"] body .back-link-btn:hover, html[data-theme="dark"] body .rt-settings-link:hover,
html[data-theme="dark"] body .linklike:hover, html[data-theme="dark"] body .month-nav-today:hover, html[data-theme="dark"] body .oz-panel-h > a:hover,
html[data-theme="dark"] body .tk-more a:hover, html[data-theme="dark"] body .filter-clear:hover { background: var(--muted-bg) !important; }
@media (max-width: 640px) {
  html body .filter-bar .filter-clear { align-self: stretch; }
  .result-bar .result-count { flex: 1 0 100%; }
}
html body .rt-settings-link { min-height: 42px; padding: 8px 15px !important; }
@media (max-width: 640px) { html body .rt-settings-link { margin: 0 0 12px; } }

/* Fotoğraf alanı: dosya seçici + "Fotoğraf çek" düğmesi yan yana */
.photo-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.photo-pick input[type=file]:not(.cam-input) { flex: 1 1 200px; min-width: 0; }
.photo-pick .cam-btn { flex: 0 0 auto; }
html body .photo-pick .cam-btn { min-height: 38px; }

/* Hata penceresi */
.errpop-ov { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20,12,10,.55); }
.errpop { width: min(440px, 100%); max-height: 85vh; overflow: auto; background: var(--cream); color: var(--ink); border: 1px solid var(--border); border-top: 4px solid var(--brick); border-radius: 14px; padding: 20px 20px 18px; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.errpop-h { display: flex; align-items: center; gap: 10px; font-size: 17px; margin-bottom: 10px; }
.errpop-ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--brick); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.errpop-l { margin: 0 0 10px; padding-left: 20px; font-size: 14.5px; line-height: 1.45; }
.errpop-l li + li { margin-top: 6px; }
.errpop-n { margin: 0 0 14px; font-size: 13px; color: var(--clay-muted); }
html body .errpop .errpop-ok { width: 100%; }
/* Sayfa içi kamera */
.cam-ov { position: fixed; inset: 0; z-index: 9998; background: #000; display: flex; }
.cam-box { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cam-box video { flex: 1; min-height: 0; width: 100%; object-fit: contain; background: #000; }
.cam-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: rgba(0,0,0,.75); }
.cam-shot { width: 64px; height: 64px; border-radius: 50%; border: 4px solid #fff; background: #fff; box-shadow: inset 0 0 0 4px #000; cursor: pointer; }
.cam-shot:active { transform: scale(.93); }
.cam-n { position: absolute; top: 10px; left: 12px; right: 12px; margin: 0; padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; text-align: center; }
.cam-n:empty { display: none; }

/* Yönetilebilir listeler (Site Ayarları › Listeler) */
.ml-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line,#e5e7e0)}
.ml-row.off input[type=text]{opacity:.55}
.ml-row input[type=text]{flex:1;min-width:0}
.ml-move{display:inline-flex;gap:2px}
.ml-move .btn-ghost{padding:2px 6px;line-height:1}
.ml-chk{display:inline-flex;align-items:center;gap:4px;font-size:.82rem;white-space:nowrap}
.ml-del{color:var(--danger,#B42318)}
.ml-sys{font-size:.72rem;color:var(--muted,#6b7280);background:rgba(0,0,0,.05);border-radius:999px;padding:1px 8px}
.ml-add{padding:8px 0}.ml-add input{width:100%}
.ml-foot{display:flex;justify-content:flex-end}
@media(max-width:600px){.ml-row{flex-wrap:wrap}}

/* Geçmiş kayıtları kartı (history_card) */
.hist-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.hist-tab{border:1px solid var(--line,#dfe3da);background:transparent;color:inherit;border-radius:999px;padding:5px 12px;font:inherit;font-size:.86rem;cursor:pointer}
.hist-tab span{opacity:.6;margin-left:4px;font-size:.78rem}
.hist-tab.on{background:var(--primary,#7D0912);border-color:var(--primary,#7D0912);color:#fff}
.hist-tab.on span{opacity:.85}
.hist-panel{display:none;flex-direction:column;gap:8px}
.hist-panel.on{display:flex}
.hist-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line,#e5e7e0);border-radius:12px;text-decoration:none;color:inherit;background:rgba(127,127,127,.04);transition:border-color .15s,transform .15s}
.hist-item:hover{border-color:var(--primary,#7D0912);transform:translateY(-1px)}
.hist-date{flex:0 0 54px;text-align:center;border-radius:10px;padding:5px 0;background:rgba(125,9,18,.08);line-height:1.15}
.hist-date b{display:block;font-size:1.15rem}
.hist-date i{display:block;font-style:normal;font-size:.62rem;letter-spacing:.04em;opacity:.75}
.hist-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.hist-chips{display:flex;flex-wrap:wrap;gap:5px}
.hist-chips:empty{display:none}
.hist-chip{font-size:.74rem;padding:1px 8px;border-radius:999px;background:rgba(127,127,127,.14)}
.hist-chip.warn{background:rgba(149,89,10,.15);color:var(--warning,#95590A)}
.hist-chip.ok{background:rgba(47,107,78,.15);color:var(--success,#2F6B4E)}
.hist-chip.bad{background:rgba(180,35,24,.14);color:var(--danger,#B42318)}
.hist-by{font-weight:600;font-size:.92rem}
.hist-note{font-size:.82rem;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Hatırlatıcılar */
.rem-layout{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:16px;align-items:start}
@media(max-width:860px){.rem-layout{grid-template-columns:1fr}}
.rem-side{display:flex;flex-direction:column;gap:16px}
.rem-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.rem-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.rem-dow{font-size:.7rem;text-align:center;opacity:.6;padding-bottom:2px}
.rem-cell{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:10px;text-decoration:none;color:inherit;font-size:.88rem;border:1px solid transparent}
.rem-cell:not(.rem-empty):hover{background:rgba(125,9,18,.08)}
.rem-cell.today{border-color:var(--primary,#7D0912);font-weight:700}
.rem-cell.has{background:rgba(125,9,18,.12);font-weight:600}
.rem-cell.alldone{background:rgba(47,107,78,.12)}
.rem-cell.sel{background:var(--primary,#7D0912);color:#fff}
.rem-cell i{position:absolute;right:3px;top:1px;font-style:normal;font-size:.62rem;opacity:.75}
.rem-cal-foot{display:flex;gap:8px;margin-top:10px}
.rem-tabs{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.rem-tabs a{border:1px solid var(--line,#dfe3da);border-radius:999px;padding:5px 12px;text-decoration:none;color:inherit;font-size:.88rem}
.rem-tabs a span{opacity:.6;margin-left:4px;font-size:.78rem}
.rem-tabs a.on{background:var(--primary,#7D0912);border-color:var(--primary,#7D0912);color:#fff}
.rem-late-pill{margin-left:auto;font-size:.78rem;padding:2px 10px;border-radius:999px;background:rgba(180,35,24,.14);color:var(--danger,#B42318)}
.rem-item{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line,#e5e7e0);border-radius:12px;margin-bottom:8px;background:rgba(127,127,127,.04)}
.rem-item.late{border-color:rgba(180,35,24,.45)}
.rem-item.done .rem-title{text-decoration:line-through;opacity:.6}
.rem-check{flex:0 0 24px;height:24px;border-radius:50%;border:2px solid var(--primary,#7D0912);display:inline-flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;margin-top:1px}
.rem-item.done .rem-check{background:var(--success,#2F6B4E);border-color:var(--success,#2F6B4E)}
.rem-body{flex:1;min-width:0}
.rem-title{font-weight:600}
.rem-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.rem-note{font-size:.84rem;opacity:.75;margin-top:6px}
.rem-act{display:flex;gap:6px;align-items:center}

/* Demirbaş */
.asset-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 14px}
.asset-kpi{border:1px solid var(--line,#e5e7e0);border-radius:12px;padding:10px 14px;background:rgba(127,127,127,.04);display:flex;flex-direction:column}
.asset-kpi span{font-size:.78rem;opacity:.7}.asset-kpi b{font-size:1.6rem;line-height:1.2}.asset-kpi i{font-style:normal;font-size:.76rem;opacity:.65}
.asset-kpi.ok b{color:var(--success,#2F6B4E)}
.asset-cust{margin-bottom:12px}.asset-cust .hist-item{margin-top:8px}
.asset-cust-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.asset-cust-name{font-size:1.05rem}
.photo-grid{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.photo-grid .photo-thumb{display:block;width:96px;height:96px;border-radius:10px;overflow:hidden;border:1px solid var(--border-strong,#cfd3c8)}
.photo-grid .photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.asset-ph{position:relative;display:inline-block}
.asset-ph-x{position:absolute;right:3px;top:3px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;text-decoration:none}
.asset-loan{border:1px solid var(--line,#e5e7e0);border-radius:12px;padding:12px;margin-bottom:10px;background:rgba(127,127,127,.04)}
.asset-loan-head{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:flex-start}
.asset-loan details{margin-top:8px}.asset-loan summary{cursor:pointer;font-size:.86rem;color:var(--primary,#7D0912)}

/* Yaklaşan: tür renkleri */
.upcoming-cats{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.upcoming-cats button{display:inline-flex;align-items:center;gap:5px;width:auto;margin:0;padding:4px 10px;min-height:0;border-radius:999px;border:1px solid var(--cb,var(--border));background:var(--cbg,var(--cream));color:var(--cfg,var(--clay-muted));font:600 12px var(--font-sans);box-shadow:none;cursor:pointer}
.upcoming-cats button span{opacity:.7}
.upcoming-cats button.active{background:var(--cfg,var(--ink));color:#fff;border-color:var(--cfg,var(--ink))}
.upcoming-cats .uc-all{--cfg:var(--ink)}
.cat-personel,.uc-personel{--cbg:#F3E4EC;--cfg:#7A2E55;--cb:#C2528A55;--cac:#C2528A}
.cat-ekipman,.uc-ekipman{--cbg:#EDE6F5;--cfg:#54407A;--cb:#8B6BC455;--cac:#8B6BC4}
.cat-belge,.uc-belge{--cbg:#FBF0D6;--cfg:#7A4E00;--cb:#D39A1E55;--cac:#D39A1E}
.cat-arac,.uc-arac{--cbg:#E3EAF3;--cfg:#2F4B6E;--cb:#4F7DB855;--cac:#4F7DB8}
.cat-analiz,.uc-analiz{--cbg:#DDEFEF;--cfg:#235C5C;--cb:#2E949455;--cac:#2E9494}
.cat-ilaclama,.uc-ilaclama{--cbg:#E8F0DD;--cfg:#43571F;--cb:#6E9A2E55;--cac:#6E9A2E}
.cat-atik,.uc-atik{--cbg:#F1E7DA;--cfg:#6B4A22;--cb:#A8793A55;--cac:#A8793A}
.cat-hatirlatici,.uc-hatirlatici{--cbg:#E5E8FA;--cfg:#33408A;--cb:#5B6CD655;--cac:#5B6CD6}
.cat-demirbas,.uc-demirbas{--cbg:#FCE8D8;--cfg:#9A4A10;--cb:#E2762A55;--cac:#E2762A}
#upcoming-card .upcoming-row{border-left:4px solid var(--cac,transparent);border-radius:0 10px 10px 0}
#upcoming-card .upcoming-row .sn-cat{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:var(--cbg,var(--sand));color:var(--cfg,var(--clay-faint));font-size:11.5px}
#upcoming-card .upcoming-row .sn-cat svg{flex:none}

html[data-theme="dark"] .cat-personel,html[data-theme="dark"] .uc-personel{--cbg:#C2528A2e;--cfg:#C2528A;--cb:#C2528A66}
html[data-theme="dark"] .cat-ekipman,html[data-theme="dark"] .uc-ekipman{--cbg:#8B6BC42e;--cfg:#8B6BC4;--cb:#8B6BC466}
html[data-theme="dark"] .cat-belge,html[data-theme="dark"] .uc-belge{--cbg:#D39A1E2e;--cfg:#D39A1E;--cb:#D39A1E66}
html[data-theme="dark"] .cat-arac,html[data-theme="dark"] .uc-arac{--cbg:#4F7DB82e;--cfg:#4F7DB8;--cb:#4F7DB866}
html[data-theme="dark"] .cat-analiz,html[data-theme="dark"] .uc-analiz{--cbg:#2E94942e;--cfg:#2E9494;--cb:#2E949466}
html[data-theme="dark"] .cat-ilaclama,html[data-theme="dark"] .uc-ilaclama{--cbg:#6E9A2E2e;--cfg:#6E9A2E;--cb:#6E9A2E66}
html[data-theme="dark"] .cat-atik,html[data-theme="dark"] .uc-atik{--cbg:#A8793A2e;--cfg:#A8793A;--cb:#A8793A66}
html[data-theme="dark"] .cat-hatirlatici,html[data-theme="dark"] .uc-hatirlatici{--cbg:#5B6CD62e;--cfg:#5B6CD6;--cb:#5B6CD666}
html[data-theme="dark"] .cat-demirbas,html[data-theme="dark"] .uc-demirbas{--cbg:#E2762A2e;--cfg:#E2762A;--cb:#E2762A66}
html[data-theme="dark"] .upcoming-cats button.active{color:#1B1310}

/* Demirbaş: toplu teslim */
.asset-actions{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.asset-actions .modal-trigger-btn{margin:0}
html body a.asset-bulk-btn{display:inline-flex;align-items:center;gap:6px;width:auto;text-decoration:none;background:var(--ink,#2b1b17);border-color:var(--ink,#2b1b17)}
.bulk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:14px;align-items:start}
@media(max-width:900px){.bulk-grid{grid-template-columns:1fr}}
.bulk-pick-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.bulk-pick-h input[type=search]{flex:1 1 180px;min-width:0}
.bulk-list{display:flex;flex-direction:column;gap:6px;max-height:520px;overflow:auto;padding:2px}
.bulk-item{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--border);border-radius:12px;background:var(--cream);cursor:pointer;transition:border-color .15s,background .15s}
.bulk-item:hover{border-color:var(--paprika)}
.bulk-item.on{border-color:var(--paprika);background:rgba(125,9,18,.06)}
.bulk-item input[type=checkbox]{width:20px;height:20px;margin:0}
.bulk-item .bi-n{font-weight:600;font-size:14.5px}
.bulk-item .bi-m{display:block;font-size:12px;color:var(--clay-muted)}
.bulk-item .bi-q{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--clay-muted)}
.bulk-item .bi-q input{width:64px;margin:0;padding:6px 8px;text-align:center}
.bulk-item .bi-q input:disabled{opacity:.35}
.bulk-sum{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--ink,#2b1b17);color:#fff;font-size:14px}
.bulk-sum b{font-size:16px}
.bulk-sum button{width:auto;margin:0}
.bulk-sum button:disabled{opacity:.45}
.bulk-empty{padding:18px;text-align:center;color:var(--clay-muted)}

/* Site Ayarları › Uyarı süreleri */
.wn-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.wn-row:last-of-type{border-bottom:0}
.wn-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.wn-t b{display:inline-flex;align-items:center;gap:6px}
.wn-in{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:13px;color:var(--clay-muted)}
.wn-in input{width:84px;margin:0;text-align:center}
@media(max-width:600px){.wn-row{flex-direction:column;align-items:stretch}.wn-in{justify-content:flex-end}}
.wn-in{flex:none}.wn-in input{flex:none;min-width:84px;width:84px}.wn-t{flex:1 1 auto}

/* Yükleme bekleme penceresi + küçültme notu */
.up-ov{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(20,12,10,.6)}
.up-box{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 28px;border-radius:16px;background:var(--cream);color:var(--ink);box-shadow:0 18px 50px rgba(0,0,0,.35);text-align:center}
.up-box b{font-size:17px}.up-box span{font-size:14px}.up-box small{font-size:12px;color:var(--clay-muted)}
.up-spin{width:34px;height:34px;border-radius:50%;border:4px solid var(--border);border-top-color:var(--paprika,#7D0912);animation:upspin .8s linear infinite}
@keyframes upspin{to{transform:rotate(360deg)}}
.up-note{margin-top:4px}

/* ---- Genel arama + sistem sağlığı ---- */
.nav-search{display:flex;align-items:center;gap:8px;margin:4px 2px 2px;padding:0 12px;height:38px;border-radius:9px;background:rgba(255,255,255,.1);color:var(--on-deep,#fff)}
.nav-search svg{opacity:.7;flex:none;color:inherit}
html body .nav-search input{border:0 !important;background:transparent !important;outline:0;box-shadow:none !important;width:100%;height:36px;padding:0 !important;margin:0 !important;font-size:14px;color:#fff;min-height:0}
.nav-search input::placeholder{color:rgba(255,255,255,.6)}
.nav-search:focus-within{background:rgba(255,255,255,.18)}
.m-search{display:none;place-items:center;text-decoration:none;margin-left:auto}
@media (max-width:640px){html body .topbar-actions > .m-search{display:grid !important}html body .m-avatar{margin-left:8px}}
.gsearch-page{display:flex;gap:8px;margin:0 0 14px}.gsearch-page input[type=text]{flex:1;margin:0;width:auto;min-width:0}.gsearch-page .btn-primary{width:auto;flex:none}
.gsearch-group{margin-bottom:12px}
.gsearch-row{display:flex;flex-direction:column;gap:1px;padding:9px 6px;border-top:1px solid var(--border,#e5e5e5);text-decoration:none;color:inherit}
.gsearch-row:first-of-type{border-top:0}.gsearch-row:hover{background:rgba(127,127,127,.08)}
.sa-card .kv-table th{text-align:left;font-weight:600;padding-right:16px;white-space:normal}
.sa-card .kv-table td{text-align:left}

.asset-cust-btns{display:inline-flex;gap:8px;flex-wrap:wrap}
.asset-tut{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:2px 0 8px}

.sa-mt{border:1px solid var(--border,#e5e5e5);border-radius:10px;padding:8px 12px;margin:8px 0}.sa-mt summary{cursor:pointer;padding:4px 0}

.cf-block{margin:10px 0;padding:10px 12px;border:1px dashed var(--border,#d8cfc2);border-radius:10px}.cf-title{margin:0 0 6px;font-weight:700;font-size:13px;opacity:.8}.cf-req{color:#B5382F}

.up-box .up-sec{font:700 22px var(--font-display,inherit);color:var(--paprika,#7D0912);font-variant-numeric:tabular-nums}
.up-hide{margin-top:6px;border:1px solid var(--border);background:transparent;border-radius:8px;padding:4px 12px;font-size:12px;cursor:pointer;color:inherit}
.up-box{min-width:220px}

/* ===== Kurum içi sohbet ===== */
.chat{display:grid;grid-template-columns:330px 1fr;height:calc(100vh - 150px);min-height:520px;max-height:880px;background:var(--cream,#fff);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 6px 24px rgba(40,20,10,.07)}
.chat-side{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--border);background:var(--sand,#f5f1ea)}
.chat-side-h{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 4px}
.chat-side-h h1{margin:0;font-size:20px;display:flex;align-items:center;gap:8px}
.chat-sound{border:0;background:transparent;font-size:18px;cursor:pointer;padding:4px 6px;border-radius:8px}
.chat-sound:hover{background:rgba(0,0,0,.06)}
.chat-onl-sum{padding:0 16px 8px;font-size:13px;color:var(--clay-muted,#6b5b4d);display:flex;align-items:center;gap:6px}
.chat-search{margin:0 12px 8px;width:calc(100% - 24px);padding:9px 12px;border-radius:12px;border:1px solid var(--border);background:var(--cream,#fff);color:inherit;font-size:14px}
.chat-list{flex:1;overflow-y:auto;padding:4px 8px 12px}
.chat-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:9px 10px;border:0;border-radius:14px;background:transparent;color:inherit;cursor:pointer;font:inherit;position:relative}
.chat-item:hover{background:rgba(125,9,18,.06)}
.chat-item.on{background:var(--paprika-tint,#f6dfe0)}
.chat-item-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.chat-item-n{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.chat-item-n b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-item-n small{font-size:11px;color:var(--clay-faint,#9a8b7d);flex-shrink:0}
.chat-item-s{font-size:12.5px;color:var(--clay-muted,#6b5b4d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-item-s .muted{opacity:.8}
.chat-badge{min-width:21px;height:21px;padding:0 6px;border-radius:11px;background:var(--paprika,#7D0912);color:#fff;font:700 12px/21px var(--font-display,inherit);text-align:center;flex-shrink:0}
.chat-none{padding:18px;text-align:center;color:var(--clay-muted);font-size:13px}
.chat-av{position:relative;width:42px;height:42px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font:700 14px var(--font-display,inherit);flex-shrink:0}
.chat-av-grp{background:var(--olive,#5B7F2B);font-size:19px}
.chat-dot{position:absolute;right:-1px;bottom:-1px;width:13px;height:13px;border-radius:50%;background:#b9b2a8;border:2.5px solid var(--sand,#f5f1ea);box-sizing:border-box}
.chat-dot.on{background:#2fb34a}
.chat-onl-sum .chat-dot{position:static;width:10px;height:10px;border:0}
.chat-main{position:relative;display:flex;flex-direction:column;min-height:0;background:var(--cream,#fff)}
.chat-empty{margin:auto;text-align:center;color:var(--clay-muted);display:flex;flex-direction:column;gap:6px;align-items:center;padding:30px}
.chat-empty-ic{width:78px;height:78px;border-radius:50%;background:var(--paprika-tint,#f6dfe0);color:var(--paprika,#7D0912);display:grid;place-items:center;margin-bottom:6px}
.chat-empty b{font-size:18px;color:var(--ink,#201812)}
.chat-pane{display:flex;flex-direction:column;min-height:0;height:100%;position:relative}
.chat-pane[hidden],.chat-empty[hidden]{display:none}
.chat-head{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--cream,#fff)}
.chat-head .chat-dot{border-color:var(--cream,#fff)}
.chat-head-t{display:flex;flex-direction:column;min-width:0}
.chat-head-t b{font-size:16px}
.chat-head-t span{font-size:12.5px;color:var(--clay-muted)}
.chat-head-t span.on{color:#23913b}
.chat-back{display:none;border:0;background:transparent;font-size:30px;line-height:1;color:inherit;padding:0 6px;cursor:pointer}
.chat-msgs{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:3px;background:linear-gradient(180deg,rgba(125,9,18,.025),transparent 140px),var(--sand,#f5f1ea);overscroll-behavior:contain}
.chat-day{align-self:center;margin:12px 0 6px}
.chat-day span{font-size:12px;background:var(--cream,#fff);border:1px solid var(--border);padding:3px 12px;border-radius:12px;color:var(--clay-muted)}
.chat-more{align-self:center;border:1px solid var(--border);background:var(--cream,#fff);border-radius:14px;padding:6px 14px;font-size:13px;cursor:pointer;color:inherit;margin-bottom:6px}
.chat-m{display:flex;align-items:flex-end;gap:6px;max-width:100%}
.chat-m.me{justify-content:flex-end}
.chat-b{max-width:min(520px,78%);padding:7px 11px 5px;border-radius:16px;font-size:14.5px;line-height:1.4;overflow-wrap:anywhere;display:flex;flex-direction:column;gap:3px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.chat-m.th .chat-b{background:var(--cream,#fff);border:1px solid var(--border);border-bottom-left-radius:5px}
.chat-m.me .chat-b{background:var(--paprika,#7D0912);color:#fff;border-bottom-right-radius:5px}
.chat-m.me .chat-b a{color:#fff;text-decoration:underline}
.chat-who{font-size:12.5px;font-weight:700}
.chat-meta{align-self:flex-end;font-size:10.5px;opacity:.65;display:flex;gap:4px;align-items:center}
.chat-tick{letter-spacing:-2px;font-size:11px}
.chat-tick.r{color:#8fe3a0;opacity:1}
.chat-img img{display:block;max-width:100%;max-height:300px;border-radius:11px;cursor:zoom-in}
.chat-file{font-size:13.5px}
.chat-del-txt{opacity:.7;font-size:13px}
.chat-x{opacity:0;border:0;background:transparent;cursor:pointer;font-size:14px;padding:2px 4px;border-radius:8px;transition:opacity .15s}
.chat-m:hover .chat-x,.chat-x:focus{opacity:.7}
@media (hover:none){.chat-x{opacity:.45}}
.chat-newpill{position:absolute;left:50%;transform:translateX(-50%);bottom:84px;border:0;background:var(--paprika,#7D0912);color:#fff;border-radius:18px;padding:7px 16px;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:3}
.chat-newpill[hidden]{display:none}
.chat-form{border-top:1px solid var(--border);padding:10px 12px 12px;background:var(--cream,#fff);position:relative}
.chat-row{display:flex;align-items:flex-end;gap:8px}
.chat-row textarea{flex:1;resize:none;border:1px solid var(--border);border-radius:20px;padding:10px 14px;font:inherit;font-size:15px;max-height:130px;background:var(--sand,#f5f1ea);color:inherit;line-height:1.35}
.chat-row textarea:focus{outline:2px solid var(--paprika-tint,#f6dfe0);border-color:var(--paprika,#7D0912)}
.chat-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--clay-muted);background:transparent;border:0;font-size:20px;flex-shrink:0}
.chat-ic:hover{background:var(--sand,#f5f1ea);color:var(--paprika,#7D0912)}
.chat-send{width:44px;height:44px;border-radius:50%;border:0;background:var(--paprika,#7D0912);color:#fff;display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.chat-send:disabled{opacity:.5;cursor:wait}
.chat-attach{display:flex;align-items:center;gap:10px;margin-bottom:8px;padding:6px 8px;border:1px solid var(--border);border-radius:12px;background:var(--sand,#f5f1ea);font-size:13px}
.chat-attach[hidden],.chat-prog[hidden],.chat-emo[hidden]{display:none}
.chat-attach img{width:46px;height:46px;object-fit:cover;border-radius:8px}
.chat-attach span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-attach button{border:0;background:transparent;font-size:16px;cursor:pointer;color:inherit}
.chat-prog{position:relative;height:22px;border-radius:11px;background:var(--sand,#f5f1ea);border:1px solid var(--border);overflow:hidden;margin-bottom:8px}
.chat-prog i{position:absolute;inset:0 auto 0 0;width:4%;background:var(--paprika-tint,#f6dfe0);transition:width .2s}
.chat-prog span{position:relative;display:block;text-align:center;font-size:12px;line-height:20px;font-weight:600}
.chat-emo{position:absolute;left:12px;bottom:66px;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px;background:var(--cream,#fff);border:1px solid var(--border);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.2);z-index:5}
.chat-emo button{border:0;background:transparent;font-size:22px;padding:4px;border-radius:8px;cursor:pointer}
.chat-emo button:hover{background:var(--sand,#f5f1ea)}
.chat-lb{position:fixed;inset:0;z-index:10001;background:rgba(10,6,4,.88);display:flex;align-items:center;justify-content:center;padding:20px}
.chat-lb[hidden]{display:none}
.chat-lb img{max-width:100%;max-height:100%;border-radius:10px}
.chat-lb button{position:absolute;top:14px;right:16px;border:0;background:rgba(255,255,255,.15);color:#fff;width:40px;height:40px;border-radius:50%;font-size:20px;cursor:pointer}
/* Bildirim kartı (her sayfada) */
.chat-toast{position:fixed;right:18px;bottom:20px;z-index:9000;display:flex;align-items:center;gap:12px;max-width:340px;padding:12px 14px;border-radius:16px;background:var(--cream,#fff);color:var(--ink,#201812);border:1px solid var(--border);box-shadow:0 14px 40px rgba(0,0,0,.28);text-decoration:none;animation:chatin .35s ease-out}
.chat-toast-ic{width:40px;height:40px;border-radius:50%;background:var(--paprika-tint,#f6dfe0);display:grid;place-items:center;font-size:20px;flex-shrink:0}
.chat-toast-t{display:flex;flex-direction:column;min-width:0;flex:1}
.chat-toast-t b{font-size:14px}
.chat-toast-t small{font-size:12.5px;color:var(--clay-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-toast button{border:0;background:transparent;cursor:pointer;color:inherit;opacity:.6;font-size:15px}
@keyframes chatin{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.nav-chat[hidden],.m-chat-b[hidden]{display:none}
.nav-cnt.nav-chat{background:var(--paprika,#7D0912);color:#fff}
.m-chat{display:none;place-items:center;text-decoration:none;position:relative;margin-left:8px}
.m-chat-b{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:9px;background:#e5484d;color:#fff;font:700 10px/17px var(--font-display,inherit);text-align:center;padding:0 4px}
@media (max-width:640px){html body .topbar-actions > .m-chat{display:grid !important}}
@media (max-width:860px){
  .chat{grid-template-columns:1fr;height:calc(100dvh - 190px);min-height:420px;border-radius:14px}
  .chat-side{border-right:0}
  .chat-main{display:none}
  .chat.chat-open .chat-side{display:none}
  .chat.chat-open .chat-main{display:flex}
  .chat-back{display:block}
  .chat-b{max-width:86%}
  .chat-toast{left:12px;right:12px;max-width:none;bottom:84px}
}
.chat-ic input[type=file],.chat input[type=file]{display:none !important}
.chat-ic{position:relative}
.nav-av{overflow:hidden}
.nav-av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.chat-av{overflow:visible}
.chat-av img.chat-photo{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.chat-av.has-photo{background:var(--sand,#eee)}

/* Sağ alttaki sohbet düğmesi + pencere (masaüstü) */
.chat-fab{position:fixed;right:22px;bottom:22px;z-index:8900;width:58px;height:58px;border-radius:50%;border:0;background:var(--paprika,#7D0912);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(60,10,10,.38);transition:transform .15s}
.chat-fab:hover{transform:scale(1.07)}
.chat-fab-b{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;border-radius:11px;background:#e5484d;color:#fff;font:700 12px/22px var(--font-display,inherit);text-align:center;padding:0 5px;border:2px solid var(--cream,#fff);box-sizing:border-box}
.chat-fab-b[hidden]{display:none}
.chat-wd{position:fixed;right:22px;bottom:92px;z-index:8901;width:420px;height:min(640px,calc(100vh - 120px));display:flex;flex-direction:column;background:var(--cream,#fff);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:chatin .22s ease-out}
.chat-wd[hidden]{display:none}
.chat-wd-h{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 16px;background:var(--paprika,#7D0912);color:#fff}
.chat-wd-h b{flex:1;font-size:15px}
.chat-wd-h a,.chat-wd-h button{border:0;background:rgba(255,255,255,.16);color:#fff;border-radius:9px;padding:5px 10px;font-size:13px;text-decoration:none;cursor:pointer}
.chat-wd-h a:hover,.chat-wd-h button:hover{background:rgba(255,255,255,.28)}
.chat-wd iframe{flex:1;border:0;width:100%;background:var(--cream,#fff)}
.chat-toast{bottom:92px}
@media (max-width:640px){.chat-fab,.chat-wd{display:none !important}}
@media print{.chat-fab,.chat-wd,.chat-toast{display:none !important}}
/* Pencere içindeki (iframe) sohbet */
body.chat-embed{margin:0;background:var(--cream,#fff);overflow:hidden}
.chat-embed .chat{height:100vh;max-height:none;min-height:0;border:0;border-radius:0;box-shadow:none}

.chat-av-bot{background:#fef3c7;color:#92400e;font-size:18px;display:inline-flex;align-items:center;justify-content:center}

/* ---- Fotoğraf alanı bileşeni (.photo-pick.pp) ---- */
.photo-pick.pp { display: block; border: 1.5px dashed var(--border); border-radius: 14px; padding: 12px; background: var(--cream); transition: border-color .15s, background .15s; }
.photo-pick.pp.pp-has { border-style: solid; border-color: #5aa874; background: rgba(90,168,116,.07); }
.photo-pick.pp .pp-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.pp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; margin-bottom: 8px; }
.pp-state { font-size: 13.5px; color: var(--clay-muted); }
.pp-badge { margin-left: auto; font-size: 12.5px; font-weight: 700; color: #1d7a3e; background: rgba(90,168,116,.18); border-radius: 999px; padding: 2px 10px; }
.pp-list { display: grid; gap: 8px; }
.pp-list:empty { display: none; }
.pp-item { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 6px 8px; }
.pp-th { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; background: rgba(0,0,0,.06); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--clay-muted); }
.pp-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-nm { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pp-nm b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-nm i { font-size: 12px; font-style: normal; color: var(--clay-muted); }
.pp-rm { flex: 0 0 auto; background: none; border: 0; color: var(--brick); font: inherit; font-size: 13px; font-weight: 600; padding: 8px 6px; cursor: pointer; }
.pp-actions { display: flex; gap: 8px; margin-top: 10px; }
.pp-list:empty + .pp-actions { margin-top: 0; }
.pp-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 8px 12px; border-radius: 12px; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; border: 1.5px solid var(--brick); background: #fff; color: var(--brick); }
.pp-btn.pp-cam { background: var(--brick); color: #fff; }
.pp-btn:active { transform: scale(.98); }
.pp-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.photo-pick.pp.pp-has .pp-btn { min-height: 40px; font-size: 13.5px; }
@media (max-width: 380px) { .pp-actions { flex-direction: column; } }
.photo-pick.pp .cam-btn { display: none !important; }