/* ==========================================================================
   YÖNETİM PANELİ — Tasarım sistemi

   Yön: eski usul iş paneli. 2005–2010 arası SaaS ekranlarının dili — gri
   zemin, beyaz kutular, 1px çizgiler, düz renkler, küçük ve sık yazı.

   Belirleyici kararlar (sahibin isteği: "sadece işlev ve hız"):
   · HİÇ animasyon ve geçiş yok. Sayfa, çekmece, menü, bildirim anında açılır.
   · HİÇ bulanıklık (backdrop-filter) ve yumuşak gölge yok. Önceki Apple
     tasarımında üst bar, menü, bildirim ve belge çubuğu arkasını
     bulanıklaştırıyordu; kaydırmada her karede yeniden hesaplanıyordu.
     Yüzeyler artık düz renk, ayrım çizgiyle yapılıyor.
   · Köşeler düz. Yuvarlak köşe, hap, halka yok.
   · Yazı tipi sistemde zaten kurulu olan Tahoma / Arial; indirilen font yok.
   · Açılır liste ve onay kutusu tarayıcının kendi denetimi — çizilmiş
     taklit yok.

   Bölümler: 1 Değişkenler · 2 Temel · 3 Kabuk · 4 Bileşenler · 5 Görünümler
             6 Duyarlı · 7 Belge (A4) · 8 Belge ayarları · 9 Sözleşme/Kalite
   ========================================================================== */

/* =========================================================== 1 DEĞİŞKENLER */
:root {
  color-scheme: light;

  /* Vurgu şirketten gelir (app.js). Varsayılan klasik lacivert. */
  --accent: #2B5797;
  --accent-ink: #FFFFFF;
  --accent-text: color-mix(in srgb, var(--accent) 78%, #000);
  --accent-wash: color-mix(in srgb, var(--accent) 12%, #FFF);
  --accent-edge: color-mix(in srgb, var(--accent) 45%, #FFF);

  --bg:      #E4E4E4;   /* sayfa zemini */
  --bg-soft: #D4D4D4;
  --panel:   #FFFFFF;   /* kutu */
  --panel-2: #F2F2F2;   /* kutu başlığı, ikincil yüzey */
  --bar:     #D8DDE3;   /* üst bar, çekmece başlığı */
  --raise:   #E9E9E9;   /* üzerine gelince */
  --raise-2: #D9D9D9;
  --line:    #D2D2D2;
  --line-2:  #A6A6A6;
  --hover:   #FFF8C4;   /* tablo satırı üzerine gelince — eski usul sarı */

  --text:   #1A1A1A;
  --text-2: #3F3F3F;
  --text-3: #6B6B6B;

  --ok:     #3C8D3C;  --ok-ink:     #2D6B2D;
  --warn:   #E39A00;  --warn-ink:   #855A00;
  --danger: #C62828;  --danger-ink: #B01E1E;
  --info:   #2F6DB5;  --info-ink:   #1F5496;

  /* Uyarı kutuları ve durum etiketleri için açık zeminler */
  --ok-bg:     #E3F1DF;  --ok-edge:     #A9CFA0;
  --warn-bg:   #FCF5D8;  --warn-edge:   #E4CF84;
  --danger-bg: #F6E0E0;  --danger-edge: #DDA5A5;
  --info-bg:   #DFEBF7;  --info-edge:   #9DBDE0;

  /* Değişken adları eski bileşenler ve satır içi stiller kullandığı için
     duruyor; değerleri düz. */
  --r-sm: 0;
  --r:    0;
  --r-lg: 0;
  --r-xl: 0;
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: 2px 2px 0 rgba(0, 0, 0, .22);   /* açılır pencerelerde sert gölge, bulanıklık yok */

  --rail: 196px;
  --topbar: 38px;

  --font: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  --mono: "Courier New", Courier, monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --accent: #4A7CC0;
  --accent-ink: #FFFFFF;
  --accent-text: color-mix(in srgb, var(--accent) 55%, #FFF);
  --accent-wash: color-mix(in srgb, var(--accent) 25%, #262626);
  --accent-edge: color-mix(in srgb, var(--accent) 60%, #262626);

  --bg:      #1B1B1B;
  --bg-soft: #111111;
  --panel:   #262626;
  --panel-2: #303030;
  --bar:     #333A42;
  --raise:   #353535;
  --raise-2: #444444;
  --line:    #3D3D3D;
  --line-2:  #5E5E5E;
  --hover:   #3A3622;

  --text:   #E8E8E8;
  --text-2: #C4C4C4;
  --text-3: #9A9A9A;

  --ok:     #5CAF5C;  --ok-ink:     #7CC77C;
  --warn:   #E8A92A;  --warn-ink:   #E8B64E;
  --danger: #E05252;  --danger-ink: #F07A7A;
  --info:   #5B92D6;  --info-ink:   #86B0E6;

  --ok-bg:     #1F3320;  --ok-edge:     #3A6A3A;
  --warn-bg:   #3A3018;  --warn-edge:   #75602A;
  --danger-bg: #3A1F1F;  --danger-edge: #7A3A3A;
  --info-bg:   #1D2C3E;  --info-edge:   #3D5F88;

  --shadow-3: 2px 2px 0 rgba(0, 0, 0, .6);
}

/* ================================================================ 2 TEMEL */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  min-height: 100dvh;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-weight: bold; line-height: 1.25; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
svg { display: block; }

/* Eski usul noktalı odak çizgisi */
:focus-visible { outline: 1px dotted var(--text); outline-offset: 1px; }

.num, .kpi-value, .q-metric b, table.data td.right { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .95em; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.tiny { font-size: 11px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; }
.wrap { flex-wrap: wrap; }
.only-mobile { display: none; }

/* =============================================================== 3 KABUK */
.shell {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  min-height: 100dvh;
}

/* --------------------------------------------------------------- yan menü */
.rail {
  position: sticky; top: 0; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--panel-2);
  border-right: 1px solid var(--line-2);
  z-index: 40;
}

.brand {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; min-height: var(--topbar);
  background: var(--bar); border-bottom: 1px solid var(--line-2);
}
.brand-mark {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center;
  background: var(--accent);
}
.logo-mark { display: block; line-height: 0; color: var(--accent-ink); }
.logo-mark svg { display: block; width: 100%; height: auto; }
.brand-mark .logo-mark { width: 14px; }
.brand-name { font-weight: bold; font-size: 13px; line-height: 1.2; }
.brand-sub { font-size: 11px; color: var(--text-3); }

.company-switch {
  display: flex; align-items: center; gap: 6px;
  margin: 6px; width: calc(100% - 12px);
  padding: 4px 6px;
  border: 1px solid var(--line-2);
  background: var(--panel);
}
.company-switch:hover { background: var(--raise); }
.company-switch svg { color: var(--text-3); width: 13px; height: 13px; }
.company-dot { width: 8px; height: 8px; flex: none; }
.company-switch .label { flex: 1; text-align: left; overflow: hidden; }
.company-switch .label b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.company-switch .label span { font-size: 10.5px; color: var(--text-3); }

.nav { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }

.nav-group {
  display: flex; align-items: center; gap: 5px; width: 100%;
  padding: 4px 10px;
  font-size: 10.5px; font-weight: bold; text-transform: uppercase;
  color: var(--text-2); text-align: left;
  background: var(--raise-2);
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
button.nav-group:hover { color: var(--text); }
.nav-group .fold { margin-left: auto; width: 11px; height: 11px; }
.nav-sec[data-open] .nav-group .fold { rotate: 180deg; }
.nav-sec:not([data-open]) .nav-sub { display: none; }
.nav-sub { display: flex; flex-direction: column; }

.nav-item {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px;
  color: var(--text); font-size: 12.5px;
  border-bottom: 1px solid var(--line);
}
.nav-item svg { width: 14px; height: 14px; flex: none; color: var(--text-3); }
.nav-item:hover { background: var(--raise); text-decoration: underline; }
.nav-item.active { background: var(--accent); color: var(--accent-ink); font-weight: bold; text-decoration: none; }
.nav-item.active svg { color: var(--accent-ink); }
.nav-item .badge { margin-left: auto; }
.nav-item.soon { opacity: .45; cursor: not-allowed; }
.nav-item.soon:hover { background: none; text-decoration: none; }

.rail-foot { border-top: 1px solid var(--line-2); background: var(--bar); }

.user-chip {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 6px 10px;
}
.user-chip:hover { background: var(--raise-2); }
.user-chip svg { color: var(--text-3); width: 13px; height: 13px; }
.avatar {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center; font-size: 10px; font-weight: bold; color: #fff;
  background: var(--accent);
}
.user-chip .label { flex: 1; text-align: left; overflow: hidden; }
.user-chip .label b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip .label span { font-size: 10.5px; color: var(--text-3); }

/* --------------------------------------------------------------- üst bar */
.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--topbar); flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  background: var(--bar);
  border-bottom: 1px solid var(--line-2);
}
.topbar-co { font-size: 13px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }

/* Arama — düz bir metin kutusu gibi görünür */
.search-trigger {
  display: flex; align-items: center; gap: 6px;
  flex: 1 1 auto; max-width: 320px; height: 24px; padding: 0 6px;
  border: 1px solid var(--line-2);
  background: var(--panel); color: var(--text-3); font-size: 12px;
}
.search-trigger svg { width: 13px; height: 13px; flex: none; }
.search-trigger span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
kbd {
  font-family: var(--font); font-size: 10.5px;
  color: var(--text-3); background: none; border: 0; padding: 0;
}

.icon-btn {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center; color: var(--text-2);
  border: 1px solid transparent;
}
.icon-btn:hover { background: var(--panel); border-color: var(--line-2); color: var(--text); }
.icon-btn:active { background: var(--raise-2); }
.icon-btn.danger:hover { color: var(--danger-ink); }
.icon-btn svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------- sayfa */
.page { padding: 12px 14px 40px; max-width: 1440px; width: 100%; margin: 0 auto; }
.page-head {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line-2);
}
.page-title { font-size: 18px; font-weight: bold; line-height: 1.2; }
.page-desc { color: var(--text-2); font-size: 12px; margin-top: 2px; max-width: 80ch; }
.page-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

/* ========================================================== 4 BİLEŞENLER */

/* --------------------------------------------------------- 4.1 kart/ızgara */
.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line-2);
}
.card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; min-height: 32px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line-2);
}
.card-head h3, .card-head b { font-size: 13px; font-weight: bold; }
.card-head .sub { font-size: 11px; color: var(--text-3); }
.card-head .tools { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.card-body { padding: 10px; }
.card-body.flush { padding: 0; }

.grid { display: grid; gap: 10px; }
.g-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-23 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-32 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }

/* --------------------------------------------------------------- 4.2 KPI */
.kpi {
  position: relative;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--line-2);
}
.kpi-top { display: flex; align-items: center; gap: 8px; }
.kpi-ico { color: var(--kpi-c, var(--text-3)); flex: none; }
.kpi-top .kpi-ico { order: 2; margin-left: auto; }
.kpi-ico svg { width: 14px; height: 14px; }
.kpi-label { font-size: 11.5px; font-weight: bold; color: var(--text-2); }
.kpi-value { margin-top: 4px; font-size: 22px; font-weight: bold; line-height: 1.1; }
.kpi-value small { font-size: 12px; font-weight: normal; color: var(--text-3); margin-left: 4px; }
.kpi-foot { margin-top: 4px; display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-3); }

.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: bold; font-size: 11px; }
.delta svg { width: 11px; height: 11px; }
.delta.up { color: var(--ok-ink); }
.delta.down { color: var(--danger-ink); }
.delta.flat { color: var(--text-3); }

/* ------------------------------------------------------ 4.3 durum etiketi
   Eski usul düz renkli etiket: dolu zemin, beyaz kalın yazı. */
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 5px;
  font-size: 11px; font-weight: bold; line-height: 1.35; white-space: nowrap;
  background: #8A8A8A; color: #FFF;
}
.badge.ok      { background: var(--ok); }
.badge.warn    { background: var(--warn); }
.badge.danger  { background: var(--danger); }
.badge.info    { background: var(--info); }
.badge.accent  { background: var(--accent); color: var(--accent-ink); }

.plate {
  display: inline-flex; align-items: stretch; overflow: hidden; white-space: nowrap;
  border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 11.5px; font-weight: bold;
  background: var(--panel);
}
.plate i { display: grid; place-items: center; padding: 0 3px; background: #0040DD; color: #fff; font-style: normal; font-size: 7.5px; font-weight: bold; }
.plate span { padding: 1px 5px; }
.plate.own { border-color: var(--accent-edge); background: var(--accent-wash); }

/* ------------------------------------------------------- 4.4 ölçü çizgisi */
.measure, .meter, .ct-bar {
  height: 8px; overflow: hidden;
  background: var(--raise);
  border: 1px solid var(--line-2);
}
.measure > i, .meter i, .ct-bar i {
  display: block; height: 100%;
  background: var(--accent);
}
.meter { min-width: 64px; }
.meter.warn i { background: var(--warn); }
.meter.danger i { background: var(--danger); }
.measure.ok > i { background: var(--ok); }
.measure.warn > i { background: var(--warn); }
.measure.danger > i { background: var(--danger); }
.ct-bar { min-width: 110px; }
.ct-bar.lg { height: 10px; margin: 7px 0 5px; }

/* ------------------------------------------------------------- 4.5 düğme */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 26px; padding: 0 10px;
  font-size: 12px; white-space: nowrap;
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text);
}
.btn:hover { background: var(--raise-2); }
.btn:active { background: var(--bg-soft); }
.btn svg { width: 13px; height: 13px; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.btn.primary {
  background: var(--accent); color: var(--accent-ink); font-weight: bold;
  border-color: color-mix(in srgb, var(--accent) 70%, #000);
}
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 85%, #000); }
.btn.primary:active { background: color-mix(in srgb, var(--accent) 72%, #000); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--accent-text); text-decoration: underline; }
.btn.ghost:hover { background: var(--raise); }
.btn.danger { color: var(--danger-ink); border-color: var(--danger-edge); background: var(--panel-2); }
.btn.danger:hover { background: var(--danger-bg); }
.btn.sm { height: 22px; padding: 0 7px; font-size: 11.5px; }
.btn.sm svg { width: 12px; height: 12px; }
.btn.block { width: 100%; }

/* Seçim düğmeleri: yan yana bitişik düğme grubu, seçili olan dolu. */
.seg { display: inline-flex; border: 1px solid var(--line-2); background: var(--panel-2); }
.seg button {
  padding: 2px 9px; min-height: 22px;
  font-size: 12px; color: var(--text);
  border-right: 1px solid var(--line-2);
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--raise-2); }
.seg button.on { background: var(--accent); color: var(--accent-ink); font-weight: bold; }

/* ------------------------------------------------------------- 4.6 form */
.field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.field > label { font-size: 12px; font-weight: bold; color: var(--text-2); }
.field > label .req { color: var(--danger-ink); margin-left: 2px; }
.field .hint { font-size: 11px; color: var(--text-3); }
.field .err { font-size: 11.5px; color: var(--danger-ink); font-weight: bold; }

.input, .select, textarea.input {
  width: 100%; height: 26px; padding: 0 5px;
  border: 1px solid var(--line-2); border-radius: 0;
  background: var(--panel); color: var(--text);
  font-size: 13px;
}
textarea.input { height: auto; padding: 4px 5px; resize: vertical; min-height: 64px; line-height: 1.4; }
.input::placeholder { color: var(--text-3); }
.input:focus, .select:focus { outline: 1px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field.invalid .input, .field.invalid .select { border-color: var(--danger); background: var(--danger-bg); }
.select { cursor: pointer; padding: 0 2px; }
.select option { background: var(--panel); color: var(--text); }

.input-wrap { position: relative; }
.input-wrap .suffix {
  position: absolute; right: 6px; top: 50%; translate: 0 -50%;
  font-size: 12px; color: var(--text-3); pointer-events: none;
}
.input-wrap .input { padding-right: 40px; }

/* Anahtar yerine tarayıcının kendi onay kutusu. */
.switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.switch input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.switch i { display: none; }
.switch span { font-size: 13px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.form-grid .full { grid-column: 1 / -1; }
.form-sep {
  grid-column: 1 / -1; margin-top: 4px; padding: 3px 6px;
  background: var(--panel-2); border: 1px solid var(--line);
}
.form-sep span { font-size: 11.5px; font-weight: bold; color: var(--text-2); }

/* ------------------------------------------------------------ 4.7 tablo
   Izgara çizgili tablo, gri başlık, zebra satır, sarı vurgu. */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.data th {
  text-align: left; font-size: 11.5px; font-weight: bold;
  color: var(--text); padding: 5px 8px; white-space: nowrap;
  background: var(--panel-2);
  border: 1px solid var(--line-2); border-top: 0;
}
table.data th.sortable { cursor: pointer; user-select: none; text-decoration: underline; }
table.data th.sortable:hover { background: var(--raise-2); }
table.data th .dir { margin-left: 3px; color: var(--accent-text); }
table.data td { padding: 4px 8px; border: 1px solid var(--line); vertical-align: middle; }
table.data th:first-child, table.data td:first-child { border-left: 0; }
table.data th:last-child, table.data td:last-child { border-right: 0; }
table.data tbody tr:nth-child(even) { background: var(--panel-2); }
table.data tbody tr:hover { background: var(--hover); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data .cell-main { font-weight: normal; }
table.data .cell-sub { font-size: 11px; color: var(--text-3); }
/* Serbest not hücresi. Not bazen tek kelime, bazen üç cümle; kırpılmazsa
   uzun olanı tabloyu gerip bütün sütunları daraltıyor. Tamamı title'da. */
table.data .cell-note {
  display: block; max-width: 30ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.data td.acts { width: 1%; white-space: nowrap; text-align: right; }
/* Satır düğmeleri hep görünür — üzerine gelmeyi beklemek yok. */
table.data .acts .row-btns { display: flex; gap: 2px; justify-content: flex-end; }
table.data tfoot td {
  padding: 5px 8px; font-weight: bold;
  border-top: 2px solid var(--line-2); border-bottom: 0;
  background: var(--raise);
}

/* İptal edilen satır soluklaşır. */
tr[data-status="cancelled"] { opacity: .5; }

/* Sevkiyat satırı durumuna göre boyanır: faturası kesilen yeşil, alıcının geri
   çevirdiği (reddedildi) kırmızı. Haftalık faturalamada "bunu geçtim"
   işareti; listeye bakınca kalanlar beyaz kalır. Renk tr'ye değil hücreye
   verilir: zebra, üzerine gelme ve iOS'un düz tablo kuralı tr'yi boyuyor,
   hücre onların üstünde kalır. Reddedilen faturalanamaz; eski bir kayıtta
   ikisi birden varsa kırmızı kazanır (sonra yazıldı). */
table.data tbody tr[data-invoiced="1"] > td { background: var(--ok-bg); }
table.data tbody tr[data-invoiced="1"]:hover > td {
  background: color-mix(in srgb, var(--ok-bg), var(--ok-edge));
}
/* Faturalı satırın üstü de çizilir (yeşilin yanında, owner'ın isteği). Çizgi
   yalnızca ana hücrelere uygulanır; rozet ve düğmeler okunur kalır. */
tr[data-invoiced="1"] .cell-main,
tr[data-invoiced="1"] .cell-sub {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--text-2);
}
table.data tbody tr[data-status="rejected"] > td { background: var(--danger-bg); }
table.data tbody tr[data-status="rejected"]:hover > td {
  background: color-mix(in srgb, var(--danger-bg), var(--danger-edge));
}

/* Durum sütunundaki fatura rozeti — durum rozetinin altına iner */
table.data .cell-inv { margin-top: 3px; }

/* -------------------------------------------------------- 4.8 filtreler */
.filters {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 8px;
  background: var(--panel-2); border: 1px solid var(--line-2);
  margin-bottom: 10px;
}
.filters .input, .filters .select { height: 24px; font-size: 12px; }
.filters .select { width: auto; flex: 0 1 auto; max-width: 210px; }
.filters .input { width: auto; flex: 0 0 auto; }
.filters .search { min-width: 190px; flex: 1 1 190px; max-width: 300px; }
.filters .sep { width: 1px; height: 18px; background: var(--line-2); }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 4px 0 7px;
  font-size: 11.5px;
  background: var(--accent-wash); color: var(--accent-text);
  border: 1px solid var(--accent-edge);
}
.chip button { display: grid; place-items: center; }
.chip svg { width: 11px; height: 11px; }

/* ---------------------------------------------------- 4.9 çekmece / modal */
.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .35); }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 91;
  width: min(560px, 100vw);
  display: flex; flex-direction: column;
  background: var(--panel);
  border-left: 2px solid var(--line-2);
}
.drawer.wide { width: min(900px, 100vw); }

.drawer-head {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px;
  background: var(--bar); border-bottom: 1px solid var(--line-2);
}
.drawer-head h2 { font-size: 15px; }
.drawer-head p { font-size: 11.5px; color: var(--text-2); margin-top: 1px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 12px; }
.drawer-foot {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  border-top: 1px solid var(--line-2); background: var(--panel-2);
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.drawer-foot .grow { flex: 1; }

/* Onay penceresi: düz kutu, başlık, metin, sağda düğmeler. */
.modal {
  position: fixed; z-index: 91; top: 50%; left: 50%; translate: -50% -50%;
  width: min(400px, calc(100vw - 30px));
  background: var(--panel);
  border: 1px solid var(--text-3); box-shadow: var(--shadow-3);
  padding: 14px;
}
.modal h3 { font-size: 14px; margin-bottom: 6px; }
.modal p { color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
.modal .acts { display: flex; gap: 6px; justify-content: flex-end; margin-top: 14px; }

/* -------------------------------------------------------- 4.10 komut paleti */
.palette {
  position: fixed; z-index: 91; top: 10vh; left: 50%; translate: -50% 0;
  width: min(560px, calc(100vw - 24px));
  background: var(--panel);
  border: 1px solid var(--text-3); box-shadow: var(--shadow-3); overflow: hidden;
}
.palette-input { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--line-2); background: var(--panel-2); }
.palette-input svg { width: 14px; height: 14px; color: var(--text-3); flex: none; }
.palette-input input {
  flex: 1; min-width: 0; height: 26px; padding: 0 5px;
  background: var(--panel); border: 1px solid var(--line-2); outline: none; font-size: 13px;
}
.palette-input input::placeholder { color: var(--text-3); }
.palette-list { max-height: 54vh; overflow-y: auto; }
.palette-group {
  padding: 3px 10px; font-size: 10.5px; font-weight: bold; text-transform: uppercase;
  color: var(--text-2); background: var(--raise); border-bottom: 1px solid var(--line);
}
.palette-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 4px 10px; text-align: left; font-size: 12.5px;
  border-bottom: 1px solid var(--line);
}
.palette-item svg { width: 14px; height: 14px; color: var(--text-3); flex: none; }
.palette-item .sub { font-size: 11px; color: var(--text-3); }
.palette-item .tail { margin-left: auto; font-size: 11px; color: var(--text-3); }
.palette-item.on { background: var(--accent); color: var(--accent-ink); }
.palette-item.on svg, .palette-item.on .sub, .palette-item.on .tail { color: var(--accent-ink); }
.palette-empty { padding: 20px 14px; text-align: center; color: var(--text-3); font-size: 12.5px; }

/* -------------------------------------------------------------- 4.11 menü */
.menu {
  position: fixed; z-index: 92; min-width: 190px; padding: 2px;
  background: var(--panel);
  border: 1px solid var(--text-3); box-shadow: var(--shadow-3);
}
.menu button {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 4px 8px; font-size: 12.5px; text-align: left; color: var(--text);
}
.menu button:hover { background: var(--accent); color: var(--accent-ink); }
.menu button:hover svg { color: var(--accent-ink); }
.menu button svg { width: 13px; height: 13px; flex: none; color: var(--text-3); }
.menu button.danger { color: var(--danger-ink); }
.menu button.danger:hover { background: var(--danger); color: #fff; }
.menu .divider { height: 1px; background: var(--line-2); margin: 2px 0; }
.menu .head {
  padding: 3px 8px; font-size: 10.5px; font-weight: bold; color: var(--text-2);
  background: var(--raise); border-bottom: 1px solid var(--line);
}
.menu button .check { margin-left: auto; color: var(--accent-text); }
.menu button:hover .check { color: var(--accent-ink); }

/* ------------------------------------------------------------- 4.12 bildirim */
.toasts { position: fixed; bottom: 12px; right: 12px; z-index: 95; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.toast {
  display: flex; align-items: flex-start; gap: 8px;
  min-width: 260px; max-width: 380px; padding: 7px 10px;
  background: var(--panel);
  border: 1px solid var(--text-3); border-left: 5px solid var(--text-3);
  box-shadow: var(--shadow-3);
  cursor: pointer;
}
.toast.ok  { background: var(--ok-bg);     border-color: var(--ok-edge);     border-left-color: var(--ok); }
.toast.err { background: var(--danger-bg); border-color: var(--danger-edge); border-left-color: var(--danger); }
.toast.warn { background: var(--warn-bg);  border-color: var(--warn-edge);   border-left-color: var(--warn); }
.toast.info { background: var(--info-bg);  border-color: var(--info-edge);   border-left-color: var(--info); }
.toast.out { display: none; }
.toast svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--text-3); }
.toast.ok svg { color: var(--ok-ink); } .toast.err svg { color: var(--danger-ink); } .toast.warn svg { color: var(--warn-ink); }
.toast b { display: block; font-size: 12.5px; }
.toast p { font-size: 11.5px; color: var(--text-2); margin-top: 1px; line-height: 1.35; }

/* --------------------------------------------------------- 4.13 boş durum */
.empty { padding: 26px 16px; text-align: center; }
.empty-ico { margin: 0 auto 8px; width: 20px; color: var(--text-3); }
.empty-ico svg { width: 20px; height: 20px; }
.empty h4 { font-size: 13px; margin-bottom: 3px; }
.empty p { color: var(--text-3); font-size: 12px; max-width: 360px; margin: 0 auto 12px; line-height: 1.45; }

/* --------------------------------------------------------- 4.14 yükleniyor */
.skel { background: var(--raise); }
.skel-row { height: 22px; margin-bottom: 2px; }

/* ---------------------------------------------------------- 4.15 grafik */
/* Sütun grafik (genel bakış): her sütun bir kutu, yüksekliği yüzde.
   Soldaki pay eksen yazılarına; yazılar ızgara çizgisinin ucunda durur. */
.cc { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; flex: 1; }
/* Grafik kartı yanındaki kartın boyuna uzar; çizim alanı kalan yeri doldurur. */
.card.cc-kart { display: flex; flex-direction: column; }
.card.cc-kart > .card-body { flex: 1; display: flex; flex-direction: column; }
.cc-plot {
  position: relative; flex: 1; min-height: 200px; margin-left: 58px;
  border-left: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.cc-grid { position: absolute; left: 0; right: 0; border-top: 1px dotted var(--line); }
.cc-grid span {
  position: absolute; right: calc(100% + 5px); top: -7px;
  font-size: 10.5px; color: var(--text-3); white-space: nowrap;
}
.cc-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; padding: 0 2px; }
.cc-col { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; cursor: default; }
.cc-col i { display: block; width: 100%; background: var(--accent); }
.cc-col:hover { background: var(--hover); }
.cc-col:hover i { background: color-mix(in srgb, var(--accent) 75%, #000); }
.cc-x { display: flex; gap: 2px; padding: 0 2px; margin-left: 58px; font-size: 10.5px; color: var(--text-3); }
.cc-x span { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: visible; }

.timeline { display: flex; flex-direction: column; }
.tl-item { position: relative; display: flex; gap: 8px; padding: 0 0 10px 0; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot { position: relative; flex: none; width: 14px; display: flex; justify-content: center; }
.tl-dot i { width: 7px; height: 7px; background: var(--accent); margin-top: 5px; z-index: 1; }
.tl-item:not(:last-child) .tl-dot::after { content: ''; position: absolute; top: 14px; bottom: -10px; width: 1px; background: var(--line-2); }
.tl-body { flex: 1; min-width: 0; }
.tl-body b { font-size: 12.5px; }
.tl-body .meta { font-size: 11px; color: var(--text-3); }

/* ------------------------------------------------------- 4.16 detay şeridi */
.detail-strip { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); }
.detail-cell { flex: 1 1 140px; padding: 6px 9px; background: var(--panel); }
.detail-cell label { display: block; font-size: 11px; color: var(--text-3); margin-bottom: 1px; }
.detail-cell .v { font-size: 13.5px; font-weight: bold; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------- 4.17 uyarı / bilgi kutusu */
.kr-warn, .kr-note {
  display: flex; gap: 8px; padding: 7px 10px;
  margin-bottom: 10px; font-size: 12.5px; line-height: 1.45;
  border: 1px solid;
}
.kr-warn { background: var(--warn-bg); border-color: var(--warn-edge); color: var(--text); }
.kr-warn svg { color: var(--warn-ink); }
.kr-note { background: var(--info-bg); border-color: var(--info-edge); color: var(--text-2); }
.kr-warn svg, .kr-note svg { flex: none; margin-top: 1px; }
.kr-warn p, .kr-note p { margin: 2px 0 0; color: var(--text-2); font-size: 12px; }

/* =========================================================== 5 GÖRÜNÜMLER */

/* ------------------------------------------------------------ 5.1 giriş */
.auth {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 24px 14px max(24px, env(safe-area-inset-bottom));
  background: var(--bg);
}
.auth-box { width: min(340px, 100%); }
.auth-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.auth-brand .brand-mark { width: 30px; height: 30px; }
.auth-brand .brand-mark .logo-mark { width: 18px; }
.auth-brand .brand-name { font-size: 14px; }

.auth-card { background: var(--panel); border: 1px solid var(--line-2); padding: 0 0 12px; }
.auth-card h1 {
  font-size: 13px; padding: 6px 12px; margin-bottom: 10px;
  background: var(--bar); border-bottom: 1px solid var(--line-2);
}
.auth-card > p { color: var(--text-2); font-size: 12px; margin: 0 12px 10px; }
.auth-card form { display: flex; flex-direction: column; gap: 8px; padding: 0 12px; }
.auth-card .input { height: 28px; }
.auth-card .btn.primary { height: 28px; margin-top: 4px; }
.auth-card > .btn.block { width: calc(100% - 24px); margin: 8px 12px 0; }

.auth-alert {
  display: none; align-items: flex-start; gap: 6px; padding: 6px 9px; margin: 0 12px 10px;
  background: var(--danger-bg); border: 1px solid var(--danger-edge);
  color: var(--danger-ink); font-size: 12px; font-weight: bold;
}
.auth-alert.on { display: flex; }
.auth-foot { margin-top: 10px; font-size: 11px; color: var(--text-3); line-height: 1.45; }

/* ---------------------------------------------------------- 5.2 takvim */
.cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
  background: var(--line-2); border: 1px solid var(--line-2);
}
.cal-dow {
  background: var(--panel-2); padding: 4px 6px;
  font-size: 11px; font-weight: bold; color: var(--text-2); text-align: center;
}
.cal-day {
  background: var(--panel); min-height: 96px; padding: 4px;
  display: flex; flex-direction: column; gap: 2px;
  cursor: pointer;
}
.cal-day:hover { background: var(--hover); }
.cal-day.out { background: var(--panel-2); cursor: default; }
.cal-day.out .cal-num { color: var(--text-3); }
.cal-day.out:hover { background: var(--panel-2); }
.cal-day.today { background: var(--hover); }
.cal-day.today .cal-num {
  background: var(--accent); color: var(--accent-ink);
  min-width: 18px; padding: 0 3px; display: inline-grid; place-items: center;
  font-weight: bold;
}
.cal-head { display: flex; align-items: center; gap: 5px; }
.cal-num { font-size: 12px; font-weight: bold; color: var(--text); font-variant-numeric: tabular-nums; }
.cal-count {
  margin-left: auto; font-size: 10px; font-weight: bold;
  background: var(--raise-2); color: var(--text-2); padding: 0 4px;
}
.cal-items { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cal-chip {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; line-height: 1.3; padding: 1px 4px;
  background: color-mix(in srgb, var(--chip) 14%, var(--panel));
  border-left: 3px solid var(--chip);
  color: var(--text); white-space: nowrap; overflow: hidden;
}
.cal-chip:hover { background: color-mix(in srgb, var(--chip) 26%, var(--panel)); }
.cal-chip span { overflow: hidden; text-overflow: ellipsis; }
.cal-chip b { font-size: 10px; color: var(--text-3); flex: none; }
.cal-chip.done { opacity: .5; text-decoration: line-through; }
.cal-amt { margin-left: auto; font-size: 10px; font-weight: bold; flex: none; font-variant-numeric: tabular-nums; }
.cal-more { font-size: 10.5px; color: var(--text-3); padding: 0 3px; }
.cal-layer {
  font-size: 10.5px; padding: 1px 5px;
  color: var(--chip); background: color-mix(in srgb, var(--chip) 12%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--chip) 40%, var(--panel));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-dot { width: 8px; height: 8px; flex: none; }
.up-row { display: flex; align-items: flex-start; gap: 7px; padding: 3px; }
.up-row:hover { background: var(--hover); }

/* ------------------------------------------------------ 5.3 tanım merkezi */
.def-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-bottom: 1px solid var(--line);
}
.def-row:last-child { border-bottom: 0; }
.def-row:hover { background: var(--hover); }
.def-row .kpi-ico { width: 18px; }

.module-card {
  position: relative; padding: 10px;
  background: var(--panel); border: 1px solid var(--line-2);
}
.module-card .mi {
  width: 26px; height: 26px; display: grid; place-items: center; margin-bottom: 8px;
  background: var(--accent-wash); color: var(--accent-text); border: 1px solid var(--accent-edge);
}
.module-card h4 { font-size: 13px; margin-bottom: 3px; }
.module-card p { font-size: 12px; color: var(--text-3); line-height: 1.4; }
.module-card .st { position: absolute; top: 8px; right: 8px; }
.module-card.soon { opacity: .55; }
.module-card.soon .mi { background: var(--raise); color: var(--text-3); border-color: var(--line); }

/* ------------------------------------------------------- 5.4 dosya arşivi */
.kirinti { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; }
.kirinti > span { display: flex; align-items: center; gap: 2px; }
.kirinti svg { color: var(--text-3); flex: none; }
.kirinti button {
  display: flex; align-items: center; gap: 5px;
  padding: 2px 5px;
  font-size: 12px; color: var(--accent-text); text-decoration: underline;
  max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kirinti button:hover { background: var(--raise); }
.kirinti button.son { color: var(--text); font-weight: bold; text-decoration: none; }

.dosya-ad { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dosya-ico {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  color: var(--text-2);
}
.dosya-ico svg { width: 15px; height: 15px; }
.dosya-ico.klasor { color: var(--warn); }
.dosya-ad .cell-main { display: block; overflow: hidden; text-overflow: ellipsis; }
.dosya-ad .cell-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dz-uzerinde { position: relative; }
.dz-uzerinde::after {
  content: 'Bırakın, bulunduğunuz klasöre yüklensin';
  position: fixed; inset: var(--topbar) 0 0 var(--rail); z-index: 60;
  display: grid; place-items: center;
  font-size: 14px; font-weight: bold; color: var(--accent-text);
  background: var(--accent-wash);
  border: 2px dashed var(--accent);
  margin: 10px; pointer-events: none;
}

/* ================================================================ 6 DUYARLI */
@media (max-width: 1280px) {
  .g-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-23, .g-32 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 960px) {
  :root { --rail: 0px; }
  .g-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shell { grid-template-columns: 1fr; }
  .rail {
    position: fixed; left: 0; top: 0; width: 250px;
    transform: translateX(-100%);
    border-right: 2px solid var(--line-2);
  }
  body.nav-open .rail { transform: none; }
  body.nav-open::after { content: ''; position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, .35); }
  .menu-btn { display: grid !important; }
  .only-mobile { display: block; }
  .only-desktop { display: none; }
  .page { padding: 10px 10px 40px; }
  .g-3, .g-2 { grid-template-columns: minmax(0, 1fr); }
  .topbar { padding: 0 8px; gap: 6px; }
  .drawer { width: 100vw; border-left: 0; }

  /* Parmakla basılabilsin diye dokunma hedefleri büyür. */
  .nav-item { padding: 9px 12px; font-size: 14px; }
  .icon-btn { width: 34px; height: 34px; }
  .btn { height: 34px; font-size: 14px; }
  .input, .select { height: 36px; font-size: 16px; }   /* 16px: iOS odakta yakınlaştırmasın */

  .cal-day { min-height: 70px; padding: 3px; }
  .cal-chip span, .cal-layer { font-size: 10.5px; }

  .seg { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { white-space: nowrap; }
  .filters .search { max-width: none; }
  .filters .select, .filters .input { flex: 1 1 140px; max-width: none !important; }
}

@media (max-width: 620px) {
  .g-4, .g-6 { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .page-title { font-size: 16px; }
  .page-actions { margin-left: 0; width: 100%; }
  .toasts { left: 8px; right: 8px; bottom: 8px; }
  .toast { max-width: none; width: 100%; }
  .def-row { flex-wrap: wrap; }
  .def-row .grow { flex: 1 1 100%; order: -1; }
  .search-trigger { flex: none; width: 34px; height: 34px; padding: 0; justify-content: center; }
  .search-trigger span, .search-trigger kbd { display: none; }
  .filters .sep { display: none; }
}

.menu-btn { display: none; }

/* ================================================================ 7 BELGE */
/* A4 çıktı. Belge her zaman beyaz zemin/siyah metindir — koyu temada bile. */

/* Çekmecenin (91) ve menünün (92) üstünde: ekstre gibi belgeler çekmeceden
   açılıyor, altında kalırsa görünmüyordu. Bildirimler (95) yine üstte kalır. */
.rp-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 93; }
.rp-overlay { position: fixed; inset: 0; z-index: 94; display: flex; flex-direction: column; }
.rp-bar {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 5px 10px; background: var(--bar);
  border-bottom: 1px solid var(--line-2);
}
.rp-bar-title { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.rp-bar-title .dim { color: var(--text-3); font-size: 11.5px; }
.rp-scroll { flex: 1; overflow: auto; padding: 16px 12px 40px; background: var(--bg-soft); }
.rp-sheet { margin: 0 auto; width: 210mm; max-width: 100%; }

.rp-doc {
  background: #fff; color: #1D1D1F;
  padding: 16mm 14mm;
  min-height: 297mm;
  border: 1px solid #999;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10.5pt; line-height: 1.45;
  display: flex; flex-direction: column;
}
.rp-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
  padding-bottom: 10px; border-bottom: 2px solid #1D1D1F;
}
.rp-co { font-size: 15pt; font-weight: 700; }
.rp-co-sub { font-size: 8.5pt; color: #6E6E73; margin-top: 2px; }
.rp-title { text-align: right; flex: none; max-width: 45%; }
.rp-kind { font-size: 8pt; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8E8E93; }
.rp-title h1 { font-size: 16pt; font-weight: 700; margin: 2px 0 4px; }
.rp-issued { font-size: 8pt; color: #8E8E93; }

.rp-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 18px;
  padding: 10px 0 12px; border-bottom: 1px solid #D2D2D7; margin-bottom: 14px;
}
.rp-meta-item { display: flex; flex-direction: column; min-width: 0; }
.rp-meta-item .k { font-size: 7.5pt; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8E8E93; }
.rp-meta-item .v { font-size: 10pt; font-weight: 600; }

.rp-table { width: 100%; border-collapse: collapse; }
.rp-table th {
  text-align: left; font-size: 8pt; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: #6E6E73;
  padding: 7px 8px; border-bottom: 1.5px solid #1D1D1F; white-space: nowrap;
}
.rp-table td { padding: 7px 8px; border-bottom: 1px solid #E8E8ED; vertical-align: top; }
.rp-table th.r, .rp-table td.r { text-align: right; }
.rp-table td.strong { font-weight: 700; }
.rp-table .num { font-variant-numeric: tabular-nums; }
.rp-table tfoot td {
  border-top: 1.5px solid #1D1D1F; border-bottom: none;
  font-weight: 700; font-size: 10.5pt; padding-top: 9px;
}
.rp-table.compact th, .rp-table.compact td { padding: 5px 8px; font-size: 9.5pt; }
.rp-table th.nw, .rp-table td.nw { white-space: nowrap; }

.rp-group { margin-top: 14px; break-inside: avoid; border: 1px solid #D2D2D7; overflow: hidden; }
.rp-group h3 {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 8.5pt; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #1D1D1F; background: #F5F5F7; margin: 0;
  padding: 6px 10px; border-bottom: 1px solid #D2D2D7;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rp-group-sub { font-size: 8pt; font-weight: 400; letter-spacing: 0; text-transform: none; color: #6E6E73; }
.rp-group .rp-table { margin: 0; }
.rp-group .rp-table th { border-bottom-width: 1px; }
.rp-group .rp-table tr:last-child td { border-bottom: none; }
.rp-group .rp-table th:first-child, .rp-group .rp-table td:first-child { padding-left: 10px; }
.rp-group .rp-table th:last-child, .rp-group .rp-table td:last-child { padding-right: 10px; }
.rp-group .rp-table tfoot td { border-top: 1.5px solid #1D1D1F; padding-bottom: 7px; }
.rp-table tr.rp-rule td { border-top: 1px solid #C7C7CC; }

.rp-part { margin-top: 16px; break-inside: avoid; }
.rp-part:first-of-type { margin-top: 0; }
.rp-part h3 { font-size: 10pt; font-weight: 700; color: #1D1D1F; padding-bottom: 4px; margin-bottom: 6px; border-bottom: 1.5px solid #1D1D1F; }
.rp-part-sub { font-size: 8.5pt; color: #6E6E73; margin: -3px 0 7px; }
.rp-empty { padding: 30px 0; text-align: center; color: #8E8E93; font-size: 10pt; }
.rp-note { margin-top: 16px; padding: 10px 12px; background: #F5F5F7; border-left: 3px solid #1D1D1F; font-size: 9.5pt; color: #3A3A3C; }
.rp-sign { margin-top: auto; padding-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.rp-sign div { display: flex; flex-direction: column; gap: 26px; }
.rp-sign span { font-size: 8.5pt; color: #8E8E93; }
.rp-sign i { display: block; border-top: 1px solid #AEAEB2; }
.rp-foot { margin-top: 14px; padding-top: 8px; border-top: 1px solid #D2D2D7; display: flex; justify-content: space-between; font-size: 8pt; color: #8E8E93; }

@media print {
  body.printing-report > *:not(.rp-overlay) { display: none !important; }
  body.printing-report .rp-scrim, body.printing-report .rp-bar { display: none !important; }
  body.printing-report .rp-overlay { position: static; display: block; }
  body.printing-report .rp-scroll { overflow: visible; padding: 0; background: #fff; }
  body.printing-report .rp-sheet { width: auto; }
  body.printing-report .rp-doc { border: 0; padding: 0; min-height: 0; }
  .rp-table thead { display: table-header-group; }
  .rp-table tfoot { display: table-footer-group; }
  .rp-table tr { break-inside: avoid; }
  .rp-doc { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@page { size: A4; margin: 14mm 12mm; }

@media (max-width: 900px) {
  .rp-sheet { width: 100%; }
  .rp-doc { padding: 10mm 8mm; min-height: 0; }
  .rp-head { flex-direction: column; gap: 10px; }
  .rp-title { text-align: left; max-width: none; }
  .rp-meta { grid-template-columns: repeat(2, 1fr); }
}

/* ==================================================== 8 BELGE AYARLARI */
.rs-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 10px; align-items: start; }
.rs-list {
  background: var(--panel); border: 1px solid var(--line-2);
  position: sticky; top: calc(var(--topbar) + 10px);
  max-height: calc(100dvh - var(--topbar) - 30px); overflow: auto;
}
.rs-group + .rs-group { margin-top: 0; }
.rs-group-name {
  font-size: 10.5px; font-weight: bold; text-transform: uppercase; color: var(--text-2);
  padding: 3px 8px; background: var(--raise); border-bottom: 1px solid var(--line);
}
.rs-item {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  padding: 5px 8px; border-bottom: 1px solid var(--line);
  background: none; color: var(--text); cursor: pointer;
}
.rs-item:hover { background: var(--hover); }
.rs-item.on { background: var(--accent); color: var(--accent-ink); }
.rs-item.on .grow span, .rs-item.on svg { color: var(--accent-ink); }
.rs-item .grow { display: grid; min-width: 0; }
.rs-item b { font-size: 12px; }
.rs-item .grow span { font-size: 11px; color: var(--text-3); }
.rs-item svg { flex: none; color: var(--text-3); }

.rs-panel { background: var(--panel); border: 1px solid var(--line-2); padding: 12px; min-width: 0; }
.rs-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.rs-head h2 { font-size: 15px; }
.rs-head p { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.rs-sec-title { font-size: 11.5px; font-weight: bold; color: var(--text-2); margin: 12px 0 5px; }
.rs-cols { display: grid; gap: 0; border: 1px solid var(--line-2); }
.rs-col {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-bottom: 1px solid var(--line);
  background: var(--panel-2); color: var(--text-3);
}
.rs-col:last-child { border-bottom: 0; }
.rs-col.on { background: var(--panel); color: var(--text); }
.rs-col .grow { display: flex; align-items: center; gap: 7px; min-width: 0; }
.rs-col b { font-size: 12.5px; }
.rs-ord {
  min-width: 18px; height: 18px; flex: none; padding: 0 3px;
  display: grid; place-items: center; font-size: 10.5px; font-weight: bold;
  background: var(--accent); color: var(--accent-ink); font-variant-numeric: tabular-nums;
}
.rs-tag { font-size: 10.5px; padding: 0 5px; background: var(--info-bg); color: var(--info-ink); border: 1px solid var(--info-edge); }
.rs-ops { display: flex; gap: 2px; margin-left: auto; }
.rs-ops .icon-btn { width: 24px; height: 24px; }
.rs-ops .icon-btn:disabled { opacity: .3; cursor: default; }
.rs-empty { font-size: 12px; color: var(--warn-ink); padding: 8px 0; }
.rs-note { display: flex; gap: 7px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--text-3); line-height: 1.45; }
.rs-note svg { flex: none; margin-top: 1px; }

@media (max-width: 900px) {
  .rs-layout { grid-template-columns: minmax(0, 1fr); }
  .rs-list { position: static; max-height: none; }
}

/* ============================================= 9 SÖZLEŞME VE KALİTE KONTROL */
.ct-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ct-head b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ct-legend { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-3); }
.ct-terms { white-space: pre-wrap; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }

.pay-rows { display: grid; gap: 4px; }
.pay-row { display: grid; grid-template-columns: 150px 1fr 140px 30px; gap: 6px; align-items: center; }
.pay-row .input, .pay-row .select { height: 26px; }
.pay-total {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline;
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-2);
  font-size: 12.5px; font-weight: bold; font-variant-numeric: tabular-nums;
}
.pay-total .dim { font-weight: normal; color: var(--text-3); }
.pay-diff { color: var(--warn-ink); }

.q-due { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.q-due-chip {
  display: grid; text-align: left; padding: 3px 8px;
  background: var(--warn-bg); border: 1px solid var(--warn-edge);
  color: var(--text); cursor: pointer;
}
.q-due-chip:hover { background: var(--hover); }
.q-due-chip b { font-size: 12px; font-family: var(--mono); }
.q-due-chip span { font-size: 10.5px; color: var(--text-3); }
.q-over { color: var(--danger-ink); font-weight: bold; }

.q-verdict {
  display: flex; align-items: center; gap: 7px; padding: 7px 10px;
  margin-bottom: 10px; font-size: 13px; font-weight: bold;
  background: var(--raise); color: var(--text); border: 1px solid var(--line-2);
}
.q-verdict.ok { background: var(--ok-bg); border-color: var(--ok-edge); color: var(--ok-ink); }
.q-verdict.warn { background: var(--warn-bg); border-color: var(--warn-edge); color: var(--warn-ink); }
.q-verdict.danger { background: var(--danger-bg); border-color: var(--danger-edge); color: var(--danger-ink); }

/* Dört sütun: kalite ekranındaki ölçüm grupları dörder kutu (3 sütunda
   dördüncüsü tek başına alt satıra düşüyordu). */
.q-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.q-metric { padding: 6px 9px; background: var(--panel-2); border: 1px solid var(--line-2); display: grid; gap: 1px; }
.q-metric.over { background: var(--danger-bg); border-color: var(--danger-edge); }
.q-metric.over b { color: var(--danger-ink); }
.q-metric .k { font-size: 11.5px; color: var(--text-3); }
.q-metric b { font-size: 19px; }
.q-metric .lim { font-size: 10.5px; color: var(--text-3); }

.q-rows { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line-2); }
.q-row { display: flex; gap: 10px; padding: 5px 9px; background: var(--panel); font-size: 12.5px; }
.q-row:nth-child(even) { background: var(--panel-2); }
.q-row .k { width: 140px; flex: none; color: var(--text-3); }
.q-row .v { flex: 1; white-space: pre-wrap; min-width: 0; }

.q-sec { font-size: 11.5px; font-weight: bold; color: var(--text-2); margin: 14px 0 5px; }
.q-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.q-photo { display: block; overflow: hidden; background: var(--panel-2); border: 1px solid var(--line-2); }
.q-photo img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.q-photo span { display: block; padding: 3px 6px; font-size: 11px; color: var(--text-3); }

.q-shots { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: flex-start; }
.q-shot { position: relative; width: 112px; overflow: hidden; border: 1px solid var(--line-2); }
.q-shot img { display: block; width: 100%; height: 80px; object-fit: cover; }
.q-shot span { display: block; padding: 2px 5px; font-size: 10.5px; color: var(--text-3); background: var(--panel-2); }
.q-shot .icon-btn { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; background: rgba(0, 0, 0, .55); color: #fff; }
.q-warn-text { color: var(--warn-ink); font-size: 12px; }

/* ---------------------------------------------------------- ek dosyalar */
.ek-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line-2); }
.ek-list:empty { border: 0; }
.ek-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-bottom: 1px solid var(--line);
  background: var(--panel); min-width: 0;
}
.ek-row:last-child { border-bottom: 0; }
.ek-row .tip {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  color: var(--text-2);
}
.ek-row .tip svg { width: 14px; height: 14px; }
.ek-row .ad { flex: 1; min-width: 0; }
.ek-row .ad b { display: block; font-size: 12.5px; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-row .ad span { font-size: 11px; color: var(--text-3); }
.ek-row.yeni { background: var(--accent-wash); }
.ek-row.yeni .tip { color: var(--accent-text); }

.ek-add {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 8px;
  border: 1px dashed var(--line-2); background: var(--panel-2);
  color: var(--accent-text); font-size: 12.5px; text-decoration: underline;
}
.ek-add:hover { border-color: var(--accent); background: var(--accent-wash); }
.ek-add[disabled] { opacity: .5; pointer-events: none; }
.ek-hata { font-size: 12px; color: var(--danger-ink); font-weight: bold; }

@media (max-width: 720px) {
  .q-metrics { grid-template-columns: 1fr; }
  .q-row { flex-direction: column; gap: 1px; }
  .q-row .k { width: auto; }
  .pay-row { grid-template-columns: 1fr 1fr; }
  .pay-row .select { grid-column: 1 / 2; }
}

/* ==========================================================================
   DOKUNMATİK CİHAZLAR

   iOS, yazı boyutu 16px'in altındaki bir alana odaklanınca sayfayı
   kendiliğinden büyütüyor; büyüyen sayfa ekrana sığmayıp formun sağ kenarı
   dışarı taşıyordu. Yazıyı 16px yapınca büyütme hiç tetiklenmiyor.
   Dokunma hedefleri de parmakla tutturulabilecek kadar büyütülüyor.

   Fare kullanılan ekranlar bundan etkilenmiyor; oradaki sık tablo düzeni
   olduğu gibi kalıyor. */
@media (pointer: coarse) {
  .input, .select, textarea.input { font-size: 16px; height: 36px; }
  textarea.input { height: auto; }
  .auth-card .input { font-size: 16px; height: 40px; }
  .auth-card .btn.primary { height: 40px; }
  .btn { min-height: 34px; }
  .btn.sm, .btn.tiny { min-height: 30px; }
  .icon-btn { min-width: 34px; min-height: 34px; }
  .switch input { width: 20px; height: 20px; }
}

/* `hidden` niteliği tek başına yetmiyor: .btn kuralı display'i inline-flex
   yapıp gizlemeyi eziyordu, Face ID düğmesi boş bir kutu olarak görünüyordu. */
[hidden] { display: none !important; }

/* ==========================================================================
   GÜVENLİ ALAN (çentik / Dynamic Island)

   Sayfa `viewport-fit=cover` ile tam ekran açılıyor; iOS'ta web görünümü
   durum çubuğunun da altına uzanıyor. Pay verilmezse üst bar saatin altında
   kalıyor. Tarayıcıda `env(...)` sıfır döndüğü için masaüstü değişmiyor. */
.topbar {
  height: calc(var(--topbar) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
}

/* Yan menü de tepeden başlıyor; aynı pay ona da gerekli. */
.rail { padding-top: env(safe-area-inset-top); }

/* Ana içeriğin altı ana ekran çubuğunun altında kalmasın. */
.page { padding-bottom: max(40px, calc(20px + env(safe-area-inset-bottom))); }

/* ==========================================================================
   iOS UYGULAMASI

   Eski usul tasarım tarayıcıdaki panel için. Uygulama Apple'ın diliyle
   çiziliyor (ios.css) ve oradaki kurallar çerçevesiz yüzeyleri, iOS anahtarını
   ve soluk rozetleri varsayıyor. Buradaki çerçeveler, düz onay kutusu ve dolu
   renkli etiketler uygulamaya sızmasın diye geri alınıyor.
   ========================================================================== */
:root[data-native] { --bar: var(--panel); --hover: var(--raise); }
:root[data-native] :is(.card, .kpi, .module-card, .seg, .filters, .detail-strip, .q-metric, .q-rows) { border: 0; }
:root[data-native] :is(.card-head, .page-head) { background: none; border-bottom-width: 0; }
:root[data-native] table.data tbody tr:nth-child(even) { background: none; }

:root[data-native] .switch input { position: absolute; opacity: 0; width: auto; height: auto; }
:root[data-native] .switch i {
  display: block; position: relative; flex: none;
  width: 46px; height: 28px; border-radius: 99px; background: var(--raise-2);
}
:root[data-native] .switch i::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16);
}
:root[data-native] .switch input:checked + i { background: var(--ok); }
:root[data-native] .switch input:checked + i::after { translate: 18px 0; }

:root[data-native] .badge        { background: var(--raise); color: var(--text-2); }
:root[data-native] .badge.ok     { color: var(--ok-ink);     background: color-mix(in oklab, var(--ok) 16%, transparent); }
:root[data-native] .badge.warn   { color: var(--warn-ink);   background: color-mix(in oklab, var(--warn) 18%, transparent); }
:root[data-native] .badge.danger { color: var(--danger-ink); background: color-mix(in oklab, var(--danger) 14%, transparent); }
:root[data-native] .badge.info   { color: var(--info-ink);   background: color-mix(in oklab, var(--info) 14%, transparent); }
:root[data-native] .badge.accent { color: var(--accent-text); background: color-mix(in oklab, var(--accent) 14%, transparent); }