/* Copyright (c) 2026 Tayfun Şimşek. Tüm hakları saklıdır / All rights reserved.
   Purpose: shell layer on top of tokens.css + ui.css — responsive layout (desktop side menu,
            phone right-edge rail, NO bottom tab bar), [hidden] base rule, and the small layout
            helpers that replace inline styles (CSP: style-src 'self').
   Amaç:    tokens.css + ui.css üstündeki kabuk katmanı — duyarlı yerleşim (masaüstü yan menü,
            telefonda sağ kenar şeridi, alt sekme çubuğu YOK), [hidden] taban kuralı ve satır içi
            stilin yerine geçen yerleşim yardımcıları (CSP). */

[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; }
body.app { min-height: 100vh; }

/* Girdiler 16px: iOS yakınlaştırmasın; dokunma hedefi ≥ 44px */
.app input, .app select, .app textarea, .app .input { font-size: 16px; }
.app button, .app .btn, .app a.btn { min-height: var(--tap); }
.app .btn--field { min-height: var(--tap-lg); }
textarea.input { padding-top: var(--s3); min-height: 88px; }

/* ---------- Kabuk ---------- */
.shell { min-height: 100vh; flex-wrap: nowrap; }
.main { flex: 1 1 auto; }
.page { margin-inline: auto; }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side-link { min-height: var(--tap); display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s3); border-radius: var(--r-sm); color: var(--rail-ink); font-size: var(--fs-sm); }
.side-link[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.side-org { width: calc(100% - 2 * var(--s1)); }
.side-close { display: none; }
.rail { display: none; }
body[data-chrome="off"] .side,
body[data-chrome="off"] .rail { display: none !important; }

/* Telefon / dar tablet: sağ kenar şeridi; menü şeritten açılan çekmece */
@media (max-width: 899px) {
  .rail { display: flex; position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 30; }
  body:not([data-chrome="off"]) .main { padding-inline-end: var(--rail-w); }
  .side { display: none; position: fixed; inset-block: 0; inset-inline-end: 0; width: min(320px, 88vw); z-index: 40; height: 100vh; box-shadow: var(--sh-2); }
  .side.is-open { display: flex; }
  .side-close { display: inline-grid; }
  .scrim-menu { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 35; }
  .page { padding: var(--s4) var(--s3); gap: var(--s4); }
  .topbar { padding: var(--s3) var(--s4); }
}
@media (min-width: 900px) { .scrim-menu { display: none !important; } }

.rail-btn { min-height: 48px; }
.rail-btn[aria-disabled="true"] { opacity: 0.4; }

/* ---------- Yardımcılar (satır içi stil yasak) ---------- */
.stack { display: grid; gap: var(--s4); align-content: start; }
.stack-sm { display: grid; gap: var(--s2); align-content: start; }
.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: var(--s3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s4); }
.center { text-align: center; }
.narrow { max-width: 440px; width: 100%; margin-inline: auto; }
.mt-auto { margin-top: auto; }
.small { font-size: var(--fs-xs); }
.title-xl { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--track-tight); line-height: var(--lh-tight); }

/* ---------- Giriş ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: var(--s6) var(--s4); }
.auth-card { width: 100%; max-width: 420px; padding: var(--s8) var(--s6); display: grid; gap: var(--s5); }
.pw-wrap { position: relative; display: flex; align-items: stretch; gap: var(--s2); }
.pw-wrap .input { flex: 1 1 auto; }
.check-row { display: flex; align-items: center; gap: var(--s3); min-height: var(--tap); font-size: var(--fs-sm); cursor: pointer; }
.check-row input { width: 22px; height: 22px; accent-color: var(--brand); flex: none; }
.name-slot { display: inline-block; padding: 0 var(--s2); border: 1.5px dashed var(--line-strong); border-radius: var(--r-xs); color: var(--ink-3); font-weight: var(--fw-semi); }
.tenant-btn { width: 100%; justify-content: flex-start; min-height: var(--tap-lg); text-align: start; }

/* ---------- Pano ---------- */
.shortcut { display: grid; gap: var(--s3); padding: var(--s5); text-decoration: none !important; color: inherit; }
.shortcut.is-off { opacity: 0.6; }
.shortcut .why { font-size: var(--fs-xs); color: var(--warn-ink); }

/* ---------- Eşitleme şeridi ---------- */
.sync { position: sticky; top: 0; z-index: 20; flex-wrap: wrap; }
.sync .btn { min-height: 36px; }
.sync-list { display: grid; gap: var(--s3); padding: var(--s3) var(--s4) var(--s4); background: var(--surface); border-bottom: 1px solid var(--line); }
.sync-item { display: grid; gap: var(--s2); padding: var(--s3); border: 1px solid var(--err-ink); border-radius: var(--r-md); background: var(--err-soft); }

/* ---------- Operatör günü ---------- */
.field-sticky { position: sticky; bottom: 0; padding: var(--s3) 0; background: var(--bg); display: grid; gap: var(--s2); }
.chk-id { font-family: var(--mono); font-size: var(--fs-sm); }
.tri-btn[aria-pressed="false"] { box-shadow: none; }
.state { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semi); }
.state--ok { color: var(--ok-ink); }
.state--warn { color: var(--warn-ink); }
.state--err { color: var(--err-ink); }
.state--idle { color: var(--ink-3); }
.safety-note { font-size: var(--fs-xs); color: var(--ink-3); border-top: 1px solid var(--line); padding-top: var(--s3); }
.gate-why dd .basis { font-family: var(--mono); font-size: var(--fs-xs); }
.gate--info { border-color: var(--line-strong); background: var(--surface-2); }
.gate--info .gate-head { color: var(--ink-2); }
.gate--ok { border-color: var(--ok-ink); background: var(--ok-soft); }
.gate--ok .gate-head { color: var(--ok-ink); }

/* ---------- Herkese açık sayfalar (QR / hak ediş) ---------- */
.public { max-width: 640px; margin-inline: auto; padding: var(--s6) var(--s4) var(--s8); display: grid; gap: var(--s4); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--s4); font-size: var(--fs-sm); margin: 0; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; }
.tbl td.money, .tbl th.money { text-align: end; }
.legal-note { font-weight: var(--fw-semi); }

/* ---------- Tur 2: kullanıcı bloğu, küçük boş durum, select ---------- */
.side-user { border-top: 1px solid var(--rail-line); }
.side-actions { margin-top: 0; border-top: 0; padding-top: var(--s2); flex-wrap: wrap; }
.side-actions .btn { color: var(--rail-ink); }
.side-user .avatar { background: var(--rail-bg-2); color: var(--rail-ink); }
.empty--sm { padding: var(--s4); justify-items: start; text-align: start; grid-template-columns: auto 1fr; align-items: center; }
.empty--sm .empty-icon { width: 40px; height: 40px; border-radius: 12px; }
select.input { appearance: auto; padding-inline-end: var(--s3); }

/* ---------- Tur 3: arka ofis ekranları ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.side-link.is-off, .rail-btn.is-off { opacity: 0.5; }
.side-label { margin-top: var(--s2); }
.rail { overflow-y: auto; }
.tag--ok { background: var(--ok-soft); color: var(--ok-ink); }
.card--warn { border-color: var(--warn-ink); }
.card--stale { border-color: var(--err-ink); box-shadow: 0 0 0 1px var(--err-ink); }
.card--unread { border-inline-start: 4px solid var(--brand); }
.trail-row { font-size: var(--fs-sm); }
.tri--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
fieldset.plain { border: 0; padding: 0; margin: 0; }
.chip { min-height: var(--tap); }

/* ---------- Tur 5: kurulum ekranları, QR etiketi ---------- */
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.pick--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pick-btn { min-height: var(--tap); }
.rot-up { transform: rotate(90deg); }
.rot-down { transform: rotate(-90deg); }
details.card summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; gap: var(--s2); }
.qr-print { display: grid; justify-items: center; gap: var(--s2); padding: var(--s4); border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: #fff; color: #000; max-width: 320px; }
.qr-img { width: 220px; height: 220px; image-rendering: pixelated; }
.qr-print-name { font-size: var(--fs-lg); }
.qr-print-note { font-size: var(--fs-xs); text-align: center; }
@media (max-width: 560px) { .pick--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Yazdırma: yalnız QR etiketi basılır (kabuk, menü, formlar basılmaz). */
@media print {
  body * { visibility: hidden !important; }
  .qr-print, .qr-print * { visibility: visible !important; }
  .qr-print { position: absolute; inset-block-start: 0; inset-inline-start: 0; border: 0; max-width: none; }
  .rail, .side, .sync, .sync-list { display: none !important; }
}

/* ---------- Tur 6: atama planı ---------- */
.flip-x { transform: scaleX(-1); }
.plan-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.plan-tbl { min-width: 760px; table-layout: fixed; }
.plan-tbl th:first-child { width: 140px; position: sticky; inset-inline-start: 0; background: var(--surface); z-index: 1; }
.plan-tbl td, .plan-tbl th { padding: var(--s2); vertical-align: top; }
.plan-cell.is-today, .plan-tbl th.is-today { background: var(--brand-soft); }
.asg { display: grid; gap: 2px; padding: 4px 6px; margin-bottom: 4px; border-radius: var(--r-sm); background: var(--ok-soft); color: var(--ink);
  border-inline-start: 3px solid var(--ok-ink); font-size: var(--fs-xs); }
.asg--override { background: var(--warn-soft); border-inline-start-color: var(--warn-ink); }
.asg-who { font-weight: var(--fw-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asg-site { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Tur 10: QR okutma, vade listesi ---------- */
.qr-scan { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #000; aspect-ratio: 1 / 1; max-width: 420px; width: 100%; }
.qr-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tbl tr.is-urgent td:first-child { box-shadow: inset 3px 0 0 var(--err-ink); }

/* ---------- Tur 13: üst çubuk, arama, geri bildirim, yardım, fotoğraflar ---------- */
.topbar { position: relative; gap: var(--s3); }
.search-wrap { position: relative; display: flex; align-items: center; gap: var(--s2); max-width: 560px; }
.search-wrap .search-icon { position: absolute; inset-inline-start: 12px; color: var(--ink-3); pointer-events: none; }
.search-wrap .input { padding-inline-start: 36px; }
.search-results { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 50; list-style: none; margin: 0; padding: var(--s1);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--sh-2); max-height: 60vh; overflow-y: auto; }
.search-item { display: flex; align-items: center; gap: var(--s3); min-height: var(--tap); padding: var(--s2) var(--s3); border-radius: var(--r-sm); cursor: pointer; }
.search-item.is-active, .search-item:hover { background: var(--brand-soft); }
.feedback-entry { position: relative; }
.feedback-panel { position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: 50; width: min(420px, 90vw); box-shadow: var(--sh-2); }
details.help summary { display: flex; align-items: center; gap: var(--s2); cursor: pointer; min-height: var(--tap); font-weight: var(--fw-semi); }
details.help { padding: 0 var(--s4); }
details.help p { padding-bottom: var(--s3); }
.photo-grid { display: flex; flex-wrap: wrap; gap: var(--s2); }
.photo-thumb { display: block; width: 120px; height: 120px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mark-preview { min-height: 72px; display: flex; align-items: center; padding: var(--s2); border: 1px dashed var(--line); border-radius: var(--r-md); background: #fff repeating-conic-gradient(#e5e7eb 0 25%, transparent 0 50%) 0 0 / 12px 12px; }   /* belge kâğıdı beyazdır: koyu temada da açık zemin */
.mark-preview img { max-height: 64px; max-width: 100%; width: auto; }
.util-bar { width: 120px; flex: none; }
.bar-grey { background: var(--idle); }
.tbl td .num { white-space: nowrap; }
.row-detail > td > .stack { max-width: 720px; }
label.btn.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.eligible.is-muted { opacity: 0.8; }
.eligible summary { cursor: pointer; }
.expiry-row { min-height: var(--tap); padding: var(--s1) 0; color: inherit; text-decoration: none; }
@media (max-width: 899px) { .topbar { flex-wrap: wrap; } .search-wrap { max-width: none; } }

/* F-060 sevk panosu (tasarım tur 9: S1–S4) */
.disp-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s4); align-items: start; position: relative; }
.disp-filters .input { width: auto; min-width: 180px; flex: none; }
.disp-queue { position: sticky; top: var(--s4); max-height: calc(100vh - 120px); overflow-y: auto; }
.disp-q { display: flex; flex-direction: column; gap: 2px; text-align: start; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); cursor: pointer; }
.disp-q:hover { border-color: var(--brand); }
.disp-q.is-blocked { border-style: dashed; border-color: var(--err); }
.disp-grid { overflow-x: auto; padding: var(--s3); }
.disp-row { display: grid; grid-template-columns: 180px minmax(560px, 1fr); align-items: center; min-height: 40px; border-bottom: 1px solid var(--line); }
.disp-row--group { min-height: 28px; background: var(--surface-2); font-size: var(--fs-2xs); font-weight: var(--fw-semi); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.disp-row--head { min-height: 28px; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.disp-name { padding: 0 var(--s2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disp-ticks { display: flex; }
.disp-ticks > span { flex: 1; font-size: var(--fs-2xs); color: var(--muted); border-left: 1px solid var(--line); padding-left: 2px; }
.disp-track { position: relative; height: 32px; background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: calc(100% / var(--disp-cols, 13)) 100%; }
.disp-track.is-out { background: repeating-linear-gradient(135deg, var(--err-soft) 0 6px, transparent 6px 12px); }
.disp-bar { position: absolute; top: 4px; height: 24px; padding: 0 var(--s2); border: 0; border-radius: var(--r-sm); font-size: var(--fs-xs); color: #fff; background: var(--brand); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; text-align: start; }
.disp-bar--transport { background: var(--info-ink); }
.disp-bar.is-blocked { background: transparent; color: var(--err-ink); border: 2px dashed var(--err); }
.disp-bar.is-drag { opacity: 0.5; outline: 2px solid var(--err); }
.disp-legend .disp-bar, .disp-swatch { position: static; display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s2); border-radius: var(--r-sm); }
.disp-swatch.is-out { background: repeating-linear-gradient(135deg, var(--err-soft) 0 6px, transparent 6px 12px); color: var(--err-ink); }
.disp-panel { position: fixed; top: var(--s4); right: var(--s4); bottom: var(--s4); width: min(420px, calc(100vw - 2 * var(--s4))); z-index: 30; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s3); box-shadow: var(--sh-3); }   /* sağdan çekmece: ızgarayı daraltmaz */
.disp-panel[hidden] { display: none; }
.disp-tr { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3); }
.disp-tr:disabled { opacity: 0.55; }
@media (max-width: 1100px) {
  .disp-layout { grid-template-columns: minmax(0, 1fr); }
  .disp-queue { position: static; max-height: none; }
}

/* F-032 DÖF (tasarım tur 5: Q1/Q2) */
.steps-row { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; padding: 0; margin: 0; }
.steps-row .step { flex: 1 1 140px; }
.locked-card { border: 2px dashed var(--line-strong); background: transparent; }

/* F-034 / F-038 / F-039 (tasarım tur 5: Q4, Q8, Q9) */
.seg-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.seg-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.seg-btn.is-on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.seg-btn.is-measure { background: var(--warn-soft); border-color: var(--warn); color: var(--warn-ink); }
.dist { display: grid; gap: 6px; font-size: var(--fs-sm); }
.dist-row { display: flex; gap: var(--s2); align-items: center; }
.dist-row > span:first-child { width: 18px; }
.dist-track { flex: 1; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.dist-fill { display: block; height: 100%; border-radius: 4px; background: var(--ok-ink); }
.dist-fill.is-mid { background: var(--ink-3); }
.dist-fill.is-low { background: var(--err-ink); }
.low-card { border: 2px solid var(--err-ink); }
.risk-item.is-measure { border-color: var(--warn); }
.risk-note { font-size: var(--fs-sm); padding: var(--s2) var(--s3); border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn-ink); }
.lift-box { border: 2px solid var(--brand); }
/* Q3b olay kanıt paneli (tasarım 10. tur; CSP: satır içi stil yok) */
.ev-panel { display: grid; gap: 18px; }
.ev-seal--bad { border: 1px solid var(--err-ink); }
.ev-missing { display: grid; gap: var(--s2); padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px dashed var(--line-strong); }
.ev-missing-head { display: flex; gap: var(--s2); align-items: center; font-size: var(--fs-sm); color: var(--ink-2); }
.ev-times { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.ev-time { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.ev-loc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); font-size: var(--fs-sm); }
.ev-loc-text { flex: 1 1 220px; }
.ev-loc a { display: inline-flex; gap: 6px; align-items: center; font-weight: var(--fw-semi); min-height: var(--tap); }
.ev-sec { display: grid; gap: 10px; }
.ev-sec-head { display: flex; align-items: baseline; gap: var(--s2); }
.ev-sec-head .h-sec { font-size: var(--fs-md); margin: 0; }
.ev-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ev-photo { margin: 0; display: grid; gap: 6px; align-content: start; font-size: var(--fs-xs); }
.ev-photo-img { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.ev-photo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-photo-line { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ev-parties { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ev-party { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); min-height: 52px; box-sizing: border-box; }
.ev-party-name { display: grid; }
.ev-notes { list-style: none; margin: 0; padding: 0; display: grid; }
.ev-note { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.ev-note > div { display: grid; gap: 4px; min-width: 0; }
.ev-note-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--fs-sm); }
.ev-note-body { line-height: 1.5; overflow-wrap: anywhere; }
.ev-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; background: var(--brand); }
.ev-note--addendum .ev-dot { background: var(--line-strong); }
.ev-note--after .ev-dot { background: var(--warn); }
.ev-form { padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); }
.grid-side { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: flex-start; }
.grid-side > :first-child { flex: 999 1 640px; min-width: 0; }
.grid-side > aside, .grid-side > form { flex: 1 1 320px; max-width: 440px; min-width: 0; }
.tbl tr.is-warn td { background: var(--warn-soft); }