/* =====================================================================
   Voestalpine Teklif Sistemi — ORTAK TASARIM SİSTEMİ
   Demircode Analiz · Faz 3
   ---------------------------------------------------------------------
   Kaynak: concept.html (Faz 2 konsept sayfası — tasarım dilinin kaynağı).
   Tüm sayfalar bu dosyayı import eder:
       <link rel="stylesheet" href="shared/styles.css">
   Sayfaya özel kurallar HTML içindeki <style> bloğunda, bu import'tan
   SONRA gelir (cascade: sayfa kuralı ortak kuralı ezer).
   ===================================================================== */
/* ============================================================
   DESIGN TOKENS
   Endüstriyel-Teknik / Voestalpine Corporate
   ============================================================ */
:root {
  /* PRIMARY - Voestalpine Lacivert (corporate blue) */
  --primary-50:  #EBF1F8;
  --primary-100: #C7D8EC;
  --primary-200: #94B4D7;
  --primary-300: #5F8DBE;
  --primary-400: #2F6BA3;
  --primary-500: #134B85;
  --primary-600: #0A3A6B;
  --primary-700: #062B53;  /* TEMEL TON */
  --primary-800: #031D3C;
  --primary-900: #021129;

  /* NEUTRAL - Slate (technical gray) */
  --slate-25:  #FAFBFC;
  --slate-50:  #F4F6F9;
  --slate-100: #E8ECF1;
  --slate-200: #D5DCE5;
  --slate-300: #B5C0CC;
  --slate-400: #8593A2;
  --slate-500: #5C6B7A;
  --slate-600: #41505F;
  --slate-700: #2C3946;
  --slate-800: #1A2532;
  --slate-900: #0E1620;

  /* ACCENT - Endüstriyel altın (Voestalpine accent) */
  --accent-100: #FFF4D6;
  --accent-300: #F5C95C;
  --accent-500: #D89B1B;  /* TEMEL ALTIN */
  --accent-600: #B27B0F;
  --accent-700: #8C5F0A;

  /* STATUS */
  --success-50:  #E8F6EE;
  --success-500: #1F9D55;
  --success-700: #0E6B36;

  --warning-50:  #FFF6E0;
  --warning-500: #D89B1B;
  --warning-700: #8C5F0A;

  --danger-50:  #FCEAEA;
  --danger-500: #C42525;
  --danger-700: #861515;

  --info-50:  #E6EEF7;
  --info-500: #1F66B0;
  --info-700: #103E70;

  /* QUOTE STATUS COLORS — 7 teklif statüsü (onay süreci 2026-09-08'de kaldırıldı).
     --status-approved-* / --status-rejected-* artık teklif statüsü değil; genel amaçlı
     yeşil/kırmızı rozet tonu olarak kullanılıyor (.b-approved / .b-rejected). */
  --status-draft-bg: #E8ECF1;       --status-draft-fg: #41505F;
  --status-progress-bg: #DCE9F7;    --status-progress-fg: #103E70;
  --status-approved-bg: #E8F6EE;    --status-approved-fg: #0E6B36;
  --status-rejected-bg: #FCEAEA;    --status-rejected-fg: #861515;
  --status-sent-bg: #E0E5FA;        --status-sent-fg: #2A2F8C;
  --status-won-bg: #C9EAD5;         --status-won-fg: #095227;
  --status-lost-bg: #F2C9C9;        --status-lost-fg: #6B0F0F;
  --status-cancel-bg: #D5DCE5;      --status-cancel-fg: #2C3946;
  --status-archive-bg: #F4F6F9;     --status-archive-fg: #5C6B7A;

  /* TYPOGRAPHY */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  --fs-4xl: 36px;

  /* SPACING (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* RADIUS */
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;
  --r-xl: 12px;

  /* SHADOWS (subtle, technical) */
  --sh-sm: 0 1px 2px rgba(14,22,32,0.06);
  --sh-md: 0 2px 6px rgba(14,22,32,0.08), 0 1px 2px rgba(14,22,32,0.04);
  --sh-lg: 0 8px 24px rgba(14,22,32,0.12), 0 2px 6px rgba(14,22,32,0.06);
  --sh-focus: 0 0 0 3px rgba(47,107,163,0.25);

  /* LAYOUT */
  --row-h: 40px;
  --row-h-sm: 32px;
  --row-h-lg: 48px;
  --container-max: 1280px;

  --transition: 150ms ease;
  /* --- 2026-09-08: daha once sayfa scope'unda lokal tanimlanan eksik degiskenler --- */
  --white:        #FFFFFF;
  --accent-50:    #FBF3DC;
  --accent-200:   #F2D783;
  --accent-800:   #6B4708;
  --info-100:     #C7D7EA;
  --warning-300:  #F2C654;
  --warning-400:  #DDA82A;
  --warning-800:  #6B4708;
  --success-100:  #D4EFDE;
  --success-300:  #76C795;
  --success-400:  #3FB07B;
  --danger-100:   #FAD9D9;
  --danger-300:   #ED9A9A;
  --danger-600:   #A12020;
  --sh-2xl:       0 16px 48px rgba(14,22,32,0.18), 0 4px 12px rgba(14,22,32,0.08);
  --ff-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --warning-100: #FDF3D6;
}

/* ============================================================ RESET ============================================================ */
*,*::before,*::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--slate-800);
  background: var(--slate-50);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}
.app { max-width: 100%; }
.container { max-width: var(--container-max); margin: 0 auto; min-width: 0; }
img, table, pre { max-width: 100%; }
.app-main { min-width: 0; overflow-x: hidden; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }
table { border-collapse: collapse; width: 100%; }
a { color: var(--primary-600); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================ TYPOGRAPHY ============================================================ */
h1,h2,h3,h4,h5,h6 { margin: 0; color: var(--slate-900); font-weight: 600; line-height: 1.25; }
h1 { font-size: var(--fs-4xl); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-3xl); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-2xl); letter-spacing: -0.01em; }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate-600); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-600);
}
.text-muted { color: var(--slate-500); }
.text-mono { font-family: var(--font-mono); }

/* ============================================================ APP SHELL (header + sidebar + main) ============================================================ */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas: "sidebar header" "sidebar main";
  min-height: 100vh;
}
.app-header {
  grid-area: header;
  background: white;
  border-bottom: 1px solid var(--slate-200);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-6);
  gap: var(--sp-4);
  position: sticky; top: 0; z-index: 100;
}
.app-header .crumbs {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--slate-500);
}
.app-header .crumbs strong { color: var(--slate-800); font-weight: 500; }
.app-header .crumbs .sep { opacity: 0.4; }
.app-header .header-actions {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--sp-2);
}
.icon-btn {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--slate-600);
  transition: var(--transition);
  position: relative;
}
.icon-btn:hover { background: var(--slate-100); color: var(--slate-800); }
.user-menu {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-md);
  cursor: pointer;
}
.user-menu:hover { background: var(--slate-100); }
.user-menu .name { font-size: var(--fs-sm); font-weight: 500; }
.user-menu .role { font-size: var(--fs-xs); color: var(--slate-500); display: block; }

.app-sidebar {
  grid-area: sidebar;
  background: var(--primary-700);
  color: white;
  display: flex; flex-direction: column;
}
/* Marka bloğu — voestalpine kurumsal logosu (yerel dosya; kullanıcı kararı 22.09.2026).
   Logo kendi renkleriyle (mavi #0082b4 + gri) beyaz şeritte durur: lacivert zeminde okunmuyor
   ve kurumsal renkler değiştirilmiyor. Altındaki satır ürün adıdır. */
.brand {
  display: block; padding: 0;
  border-bottom: 1px solid var(--primary-600);
}
.brand-logo {
  display: flex; align-items: center;
  background: white; padding: 11px var(--sp-5);
}
.brand-logo img { height: 30px; width: auto; display: block; }
.brand-name {
  display: block; padding: 9px var(--sp-5) 11px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em;
  color: white; opacity: 0.75;   /* büyük harfe çevrilmez: tr-TR uppercase "Estimating" -> "ESTİMATİNG" yapar */
}

.nav-section {
  padding: var(--sp-3) 0;
}
.nav-section .nav-label {
  padding: var(--sp-1) var(--sp-5);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
  font-weight: 600;
}
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-md);
  color: rgba(255,255,255,0.78);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: var(--transition);
}
.nav-item:hover { background: var(--primary-600); color: white; }
.nav-item.active {
  background: var(--primary-800);
  color: white;
  border-left-color: var(--accent-500);
  font-weight: 500;
}
.nav-icon { width: 18px; opacity: 0.85; }
.nav-item .nav-badge {
  margin-left: auto;
  background: var(--accent-500);
  color: var(--primary-900);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 18px; text-align: center;
}

.app-main {
  grid-area: main;
  padding: var(--sp-8) var(--sp-8);
  max-width: 100%;
}
/* Baskı: hiçbir ekranda menü, üst bant ve bildirim basılmaz; içerik kâğıdın bütün genişliğini
   kullanır, zemin beyazdır. Ekrana özgü baskı kuralları (PDF önizleme, Hızlı Teklif, Kullanım
   Kılavuzu) yalnız kendi ekranlarında geçerlidir: başka ekranın başlık bandını ya da bilgi
   kutularını gizlemez, renklerini zorla bastırmaz, kâğıdını değiştirmez. */
@media print {
  .app-sidebar, .app-header, .sidebar-backdrop, .toast-stack { display: none !important; }
  html, body { background: var(--white); }
  .app { display: block; min-height: 0; }
}

/* ============================================================ CONTAINER (concept page) ============================================================ */
.container { max-width: var(--container-max); margin: 0 auto; }
.section { margin-bottom: var(--sp-16); }
.section-head { margin-bottom: var(--sp-6); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--slate-200); }
.section-head .eyebrow { display: block; margin-bottom: var(--sp-1); }
.section-head h2 { color: var(--primary-700); }
.section-head .desc { color: var(--slate-600); margin-top: var(--sp-1); font-size: var(--fs-md); max-width: 640px; }

.subsection { margin-bottom: var(--sp-10); }
.subsection-head {
  margin-bottom: var(--sp-4);
  display: flex; align-items: baseline; gap: var(--sp-3);
}
.subsection-head h4 { color: var(--slate-800); }
.subsection-head .pill {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  background: var(--slate-100); color: var(--slate-600);
  padding: 2px 8px; border-radius: var(--r-sm);
  font-weight: 500;
}

/* ============================================================ HERO ============================================================ */
.hero {
  background:
    linear-gradient(135deg, var(--primary-700) 0%, var(--primary-800) 60%, var(--primary-900) 100%);
  color: white;
  border-radius: var(--r-lg);
  padding: var(--sp-12);
  margin-bottom: var(--sp-12);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; right: -80px; top: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(216,155,27,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '01010 11001 00110 10010';
  position: absolute; bottom: var(--sp-4); right: var(--sp-6);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: rgba(255,255,255,0.08);
  letter-spacing: 0.2em;
}
.hero .eyebrow { color: var(--accent-300); margin-bottom: var(--sp-3); }
.hero h1 { color: white; margin-bottom: var(--sp-3); max-width: 720px; }
.hero p { font-size: var(--fs-lg); color: rgba(255,255,255,0.78); max-width: 640px; margin: 0; }
.hero .meta {
  margin-top: var(--sp-8);
  display: flex; gap: var(--sp-8);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.hero .meta div { display: flex; flex-direction: column; }
.hero .meta .label { color: rgba(255,255,255,0.5); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.hero .meta .value { color: white; font-weight: 600; font-size: var(--fs-md); }

/* ============================================================ COLOR PALETTE ============================================================ */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
}
.palette-group {
  background: white;
  border-radius: var(--r-md);
  border: 1px solid var(--slate-200);
  padding: var(--sp-4);
}
.palette-group h6 { margin-bottom: var(--sp-3); }
.swatch {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-1);
  border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--fs-xs);
}
.swatch .chip {
  width: 24px; height: 24px; border-radius: var(--r-sm);
  border: 1px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
}
.swatch .label { color: var(--slate-700); flex: 1; }
.swatch .hex { color: var(--slate-500); }

/* ============================================================ TYPOGRAPHY DEMO ============================================================ */
.type-demo {
  background: white;
  border-radius: var(--r-md);
  border: 1px solid var(--slate-200);
  padding: var(--sp-6);
}
.type-row {
  display: grid;
  grid-template-columns: 80px 1fr 200px;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--slate-100);
}
.type-row:last-child { border-bottom: none; }
.type-row .name {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--accent-600); font-weight: 600;
}
.type-row .meta {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--slate-500);
  text-align: right;
}

/* ============================================================ TOKEN GRID ============================================================ */
.token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.token-card {
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.token-card h6 { margin-bottom: var(--sp-3); }
.token-row {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  padding: var(--sp-1) 0;
  border-bottom: 1px solid var(--slate-100);
}
.token-row:last-child { border-bottom: none; }
.token-row .key { color: var(--slate-700); }
.token-row .val { color: var(--slate-500); }
.token-preview {
  height: 40px;
  background: var(--slate-100);
  border: 1px solid var(--slate-200);
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--slate-600);
}

/* ============================================================ BUTTONS ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  height: var(--row-h);
  padding: 0 var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: var(--transition);
  white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: var(--sh-focus); }

.btn-primary {
  background: var(--primary-700);
  color: white;
  border-color: var(--primary-700);
}
.btn-primary:hover { background: var(--primary-800); border-color: var(--primary-800); }
.btn-primary:active { background: var(--primary-900); }

.btn-secondary {
  background: white;
  color: var(--primary-700);
  border-color: var(--slate-300);
}
.btn-secondary:hover { background: var(--slate-50); border-color: var(--slate-400); }

.btn-tertiary {
  background: transparent;
  color: var(--primary-700);
  border-color: transparent;
}
.btn-tertiary:hover { background: var(--slate-100); }

.btn-danger {
  background: var(--danger-500);
  color: white;
  border-color: var(--danger-500);
}
.btn-danger:hover { background: var(--danger-700); }

.btn-accent {
  background: var(--accent-500);
  color: var(--primary-900);
  border-color: var(--accent-500);
  font-weight: 600;
}
.btn-accent:hover { background: var(--accent-600); border-color: var(--accent-600); }

.btn-ghost {
  background: transparent;
  color: var(--slate-700);
  border-color: var(--slate-300);
}
.btn-ghost:hover { background: var(--slate-100); }

.btn-disabled, .btn:disabled {
  opacity: 0.5; cursor: not-allowed;
  pointer-events: none;
}

.btn-sm { height: var(--row-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn-lg { height: var(--row-h-lg); padding: 0 var(--sp-6); font-size: var(--fs-lg); }

.btn-loading::before {
  content: ''; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.btn-secondary.btn-loading::before { border: 2px solid rgba(19,75,133,0.3); border-top-color: var(--primary-700); }
@keyframes spin { to { transform: rotate(360deg); } }

.btn-icon {
  width: var(--row-h); padding: 0; aspect-ratio: 1;
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* ============================================================ INPUTS ============================================================ */
.field { margin-bottom: var(--sp-4); max-width: 360px; }
.field-label {
  display: block;
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--slate-700);
  margin-bottom: var(--sp-1);
}
.field-label .req { color: var(--danger-500); }
.field-helper {
  font-size: var(--fs-xs);
  color: var(--slate-500);
  margin-top: var(--sp-1);
}
.field-error {
  font-size: var(--fs-xs);
  color: var(--danger-500);
  margin-top: var(--sp-1);
  display: flex; align-items: center; gap: 4px;
}

.input, .textarea, .select {
  width: 100%;
  height: var(--row-h);
  padding: 0 var(--sp-3);
  background: white;
  border: 1px solid var(--slate-300);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  color: var(--slate-900);
  transition: var(--transition);
}
.input::placeholder, .textarea::placeholder { color: var(--slate-400); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--slate-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: var(--sh-focus);
}
.input.error, .select.error, .textarea.error {
  border-color: var(--danger-500);
}
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--slate-50);
  color: var(--slate-400);
  cursor: not-allowed;
}
.textarea { height: auto; min-height: 80px; padding: var(--sp-2) var(--sp-3); resize: vertical; line-height: 1.5; }
.input.mono { font-family: var(--font-mono); }

.input-with-icon { position: relative; }
.input-with-icon .input { padding-left: 36px; }
.input-with-icon .leading-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--slate-400); pointer-events: none;
}
.input-with-suffix .input { padding-right: 56px; }
.input-with-suffix .suffix {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--slate-500);
  pointer-events: none;
}

.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--slate-500) 50%), linear-gradient(135deg, var(--slate-500) 50%, transparent 50%); background-position: calc(100% - 16px) center, calc(100% - 12px) center; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; padding-right: 32px; cursor: pointer; }

/* CHECKBOX */
.check {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  cursor: pointer; user-select: none;
  font-size: var(--fs-md);
}
.check input { display: none; }
.check .box {
  width: 16px; height: 16px;
  border: 1.5px solid var(--slate-400);
  border-radius: 3px;
  background: white;
  transition: var(--transition);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.check input:checked + .box {
  background: var(--primary-700); border-color: var(--primary-700);
}
.check input:checked + .box::after {
  content: ''; width: 4px; height: 8px;
  border: solid white; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.check.indeterminate .box { background: var(--primary-700); border-color: var(--primary-700); }
.check.indeterminate .box::after {
  content: ''; width: 8px; height: 2px; background: white; transform: none;
}

/* RADIO */
.radio {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  cursor: pointer; user-select: none;
  font-size: var(--fs-md);
}
.radio input { display: none; }
.radio .dot {
  width: 16px; height: 16px;
  border: 1.5px solid var(--slate-400);
  border-radius: 50%; background: white;
  transition: var(--transition);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.radio input:checked + .dot { border-color: var(--primary-700); border-width: 5px; }

/* TOGGLE */
.toggle {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  cursor: pointer; user-select: none;
}
.toggle input { display: none; }
.toggle .track {
  width: 36px; height: 20px;
  background: var(--slate-300);
  border-radius: 999px;
  position: relative;
  transition: var(--transition);
}
.toggle .track::after {
  content: ''; position: absolute;
  width: 16px; height: 16px;
  background: white; border-radius: 50%;
  top: 2px; left: 2px;
  transition: var(--transition);
  box-shadow: var(--sh-sm);
}
.toggle input:checked + .track { background: var(--primary-700); }
.toggle input:checked + .track::after { left: 18px; }

/* SLIDER */
.slider-field {
  display: grid; grid-template-columns: 1fr 64px;
  gap: var(--sp-3); align-items: center;
}
.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: var(--slate-200);
  border-radius: 999px;
  outline: none;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--primary-700);
  cursor: pointer;
  border: 3px solid white;
  box-shadow: var(--sh-sm);
}
.slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--primary-700); cursor: pointer;
  border: 3px solid white; box-shadow: var(--sh-sm);
}
.slider-value {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  text-align: right; color: var(--slate-700);
  background: var(--slate-100); padding: 4px 8px;
  border-radius: var(--r-sm); font-weight: 500;
}

/* FILE UPLOAD */
.file-drop {
  border: 1.5px dashed var(--slate-300);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  text-align: center;
  background: var(--slate-25);
  transition: var(--transition);
  cursor: pointer;
}
.file-drop:hover { border-color: var(--primary-500); background: var(--primary-50); }
.file-drop .icon { font-size: 24px; color: var(--slate-400); margin-bottom: var(--sp-2); }
.file-drop .title { font-weight: 500; color: var(--slate-700); margin-bottom: 4px; }
.file-drop .hint { font-size: var(--fs-sm); color: var(--slate-500); }

/* SEARCH */
.search-input {
  position: relative;
}
.search-input .input { padding-left: 36px; background: white; }
.search-input::before {
  content: '🔍'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 14px; opacity: 0.5;
}

/* AUTOCOMPLETE PREVIEW */
.autocomplete {
  position: relative;
  max-width: 360px;
}
.autocomplete .input { padding-right: 32px; }
.autocomplete .panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  max-height: 280px; overflow-y: auto;
  z-index: 10;
}
.autocomplete .item {
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--slate-100);
}
.autocomplete .item:last-child { border-bottom: none; }
.autocomplete .item:hover, .autocomplete .item.active {
  background: var(--primary-50);
}
.autocomplete .item .name { font-weight: 500; color: var(--slate-800); }
.autocomplete .item .sub { font-size: var(--fs-xs); color: var(--slate-500); }
.autocomplete .item mark { background: var(--accent-100); color: var(--accent-700); padding: 0 2px; border-radius: 2px; }

/* MULTISELECT CHIPS */
.chip-input {
  min-height: var(--row-h);
  padding: 4px 8px;
  border: 1px solid var(--slate-300);
  border-radius: var(--r-md);
  background: white;
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px 2px 8px;
  background: var(--primary-50);
  color: var(--primary-700);
  border: 1px solid var(--primary-200);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.chip .x {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 2px;
  cursor: pointer;
}
.chip .x:hover { background: var(--primary-100); }

/* PASSWORD */
.password-field {
  position: relative;
}
.password-field .input { padding-right: 80px; }
.password-field .toggle-vis {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: var(--fs-xs); color: var(--slate-500);
  background: transparent; border: none; cursor: pointer;
  padding: 4px 8px; border-radius: var(--r-sm);
}
.password-field .toggle-vis:hover { background: var(--slate-100); }
.password-strength {
  display: flex; gap: 4px; margin-top: var(--sp-2);
}
.strength-bar {
  flex: 1; height: 4px; border-radius: 2px;
  background: var(--slate-200);
}
.strength-bar.active { background: var(--success-500); }
.strength-bar.weak { background: var(--danger-500); }
.strength-bar.medium { background: var(--accent-500); }
.strength-label { font-size: var(--fs-xs); font-weight: 600; margin-top: 6px; }
.strength-label.weak { color: var(--danger-600); }
.strength-label.medium { color: var(--accent-600); }
.strength-label.strong { color: var(--success-700); }
/* Sifre politikasi listesi (03 ekraninin gostergesi, G4.4 ortak betigiyle boyanir). */
.pw-rules { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: 5px; }
.pw-rules li {
  font-size: var(--fs-xs); color: var(--slate-500);
  display: flex; align-items: center; gap: 7px;
  transition: color var(--transition);
}
.pw-rules li::before { content: '\25CB'; font-size: 11px; color: var(--slate-300); }
.pw-rules li.is-ok { color: var(--success-700); }
.pw-rules li.is-ok::before { content: '\25CF'; color: var(--success-500); }

/* ===== H11.5 hesap ===== */
/* Sifre Degistir (06): onayli sayfanin kendi stil blogundaki kurallar. Kapsam .pw-card; giris (01)
   ve sifre belirleme (03) ekranlarinin genel "Goster" gorunumu degismez. */
.pw-card { max-width: 560px; }
.pw-card .input-wrap .toggle-vis {
  background: none; border: 0; color: var(--primary-600);
  font-size: var(--fs-xs); font-weight: 600; padding: 4px 6px;
}
.pw-card .input-wrap .toggle-vis:hover { color: var(--primary-800); }
.pw-card .input-wrap .input { padding-right: 62px; }

/* ============================================================ TABLE ============================================================ */
.table-wrap {
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  /* Yatay/dikey kaydirma icteki .grid-scroll'a devredildi (bkz. GRID blogu);
     burada yalnizca yuvarlak kose kirpmasi kaliyor. */
  overflow: hidden;
}
.table-toolbar {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--slate-200);
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--slate-25);
}
.table-toolbar .left { flex: 1; display: flex; gap: var(--sp-2); align-items: center; }
.table-toolbar .right { display: flex; gap: var(--sp-2); align-items: center; }
.table {
  font-size: var(--fs-md);
}
.table thead {
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
}
.table th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--slate-600);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.table th:hover { color: var(--primary-700); }
.table th .sort-arrow { display: inline-block; margin-left: 4px; opacity: 0.5; font-size: var(--fs-xs); }
.table th.sorted .sort-arrow { opacity: 1; color: var(--primary-700); }
/* Sunucuda siralanan tablo (karar T3, teklif listesi): baslik sunucuya giden bir
   baglantidir. Gorunumu tarayicida siralanan baslikla aynidir; butun hucre tiklanir. */
.table th > a.th-sort {
  display: block; color: inherit; text-decoration: none;
  margin: calc(var(--sp-3) * -1) calc(var(--sp-4) * -1);
  padding: var(--sp-3) var(--sp-4);
}
.table th > a.th-sort:hover { text-decoration: none; }

/* ============================================================ GRID
   Tum listeler icin ortak davranis (shared/app.js · initGrids):
     · kolon basligina tiklayinca siralama
     · asagi kaydirinca baslik satiri yapiskan kalir
     · 50 satirlik sonsuz kaydirma (numarali sayfalama kaldirildi)
   Tablo <table class="table"> otomatik devralir.
   Kapatmak icin: data-nogrid · yalniz siralamayi kapatmak icin: data-nosort
   ============================================================ */
.grid-scroll {
  max-height: 62vh;   /* sabit: --grid-max-h degiskenini hicbir sayfa/JS yazmiyordu */
  overflow: auto;
}
/* Yapiskan baslik: border-collapse ile kenarlik kaybolur, inset shadow ile ciziliyor */
.grid-scroll .table thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--slate-50);
  box-shadow: inset 0 -1px 0 var(--slate-200);
}
.table th[data-nosort], .table th.no-sort { cursor: default; }
.table th[data-nosort]:hover, .table th.no-sort:hover { color: inherit; }
/* Sonsuz kaydirmada henuz gosterilmeyen satirlar */
.table tbody tr.grid-more { display: none !important; }
.grid-status {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--slate-200);
  font-size: var(--fs-xs); color: var(--slate-500);
}
.grid-status .spin {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--slate-300); border-top-color: var(--primary-600);
  animation: gridspin .7s linear infinite;
}
@keyframes gridspin { to { transform: rotate(360deg); } }
.table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--slate-100);
  vertical-align: middle;
}
.table tr:hover td { background: var(--slate-25); }
.table tr:last-child td { border-bottom: none; }
.table .num { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
/* Satir islem butonlari (2026-09-08): sola hizali · kucuk ikon · sigmazsa alt
   satira sarar. Amac: dar ekranda tablonun yatay kaydirmaya zorlanmamasi.
   line-height:0 -> sarma sirasinda satir arasi bosluk olusmasin, satir
   yuksekligi kontrolde kalsin. */
.table .actions {
  text-align: left;
  white-space: normal;
  line-height: 0;
  padding-block: 6px;
}
.table .actions > * { margin: 2px 4px 2px 0; }
.table .actions .btn-icon,
.table .actions .icon-btn {
  width: 28px; height: 28px; font-size: 13px; border-radius: var(--r-sm);
}
.table .ellipsis { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================ CARD ============================================================ */
.card {
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  transition: var(--transition);
}
.card-action:hover { border-color: var(--primary-300); cursor: pointer; box-shadow: var(--sh-md); }

/* KPI CARD */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
}
.kpi-card {
  background: white;
  border: 1px solid var(--slate-200);
  border-left: 3px solid var(--primary-500);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.kpi-card.accent { border-left-color: var(--accent-500); }
.kpi-card.success { border-left-color: var(--success-500); }
.kpi-card.danger { border-left-color: var(--danger-500); }
.kpi-card .label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate-500);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.kpi-card .value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  color: var(--slate-900);
  letter-spacing: -0.02em;
}
.kpi-card .delta {
  font-size: var(--fs-xs);
  font-weight: 500;
  margin-top: var(--sp-1);
  display: flex; align-items: center; gap: 4px;
}
.kpi-card .delta.up { color: var(--success-700); }
.kpi-card .delta.down { color: var(--danger-700); }

/* ============================================================ BADGE / STATUS ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--r-sm);
}
.badge-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.b-draft    { background: var(--status-draft-bg);    color: var(--status-draft-fg); }
.b-progress { background: var(--status-progress-bg); color: var(--status-progress-fg); }
.b-approved { background: var(--status-approved-bg); color: var(--status-approved-fg); }
.b-rejected { background: var(--status-rejected-bg); color: var(--status-rejected-fg); }
.b-sent     { background: var(--status-sent-bg);     color: var(--status-sent-fg); }
.b-won      { background: var(--status-won-bg);      color: var(--status-won-fg); }
.b-lost     { background: var(--status-lost-bg);     color: var(--status-lost-fg); }
.b-cancel   { background: var(--status-cancel-bg);   color: var(--status-cancel-fg); }
.b-archive  { background: var(--status-archive-bg);  color: var(--status-archive-fg); }
/* Arşivdeki teklifin korunan sonucu, rozetin yanında (karar S13) */
.q-sonuc { margin-left: 6px; font-size: var(--fs-xs); color: var(--slate-500); white-space: nowrap; }

/* role badges */
.b-role-admin    { background: var(--primary-700); color: white; }
.b-role-master   { background: var(--accent-500); color: var(--primary-900); }
.b-role-estim    { background: var(--info-500); color: white; }
.b-role-manager  { background: var(--success-700); color: white; }

/* AVATAR */
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primary-500);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: var(--fs-sm);
  flex-shrink: 0;
}
.avatar-sm { width: 24px; height: 24px; font-size: var(--fs-xs); }
.avatar-lg { width: 48px; height: 48px; font-size: var(--fs-lg); }

/* TOOLTIP */
.tooltip-wrap { position: relative; display: inline-block; }
.tooltip-wrap .tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%; transform: translateX(-50%);
  background: var(--slate-900); color: white;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition);
}
.tooltip-wrap:hover .tooltip { opacity: 1; }
.tooltip-wrap .tooltip::after {
  content: '';
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--slate-900);
}

/* EMPTY STATE */
.empty-state {
  text-align: center;
  padding: var(--sp-12);
  color: var(--slate-500);
}
.empty-state .icon { font-size: 36px; opacity: 0.3; margin-bottom: var(--sp-3); }
.empty-state h5 { color: var(--slate-700); margin-bottom: var(--sp-1); }

/* SKELETON */
.skel {
  background: linear-gradient(90deg, var(--slate-100) 0%, var(--slate-200) 50%, var(--slate-100) 100%);
  background-size: 200% 100%;
  animation: skeleton 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
  display: block;
}
@keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ============================================================ ALERT ============================================================ */
.alert {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  display: flex; gap: var(--sp-3);
  border-left: 3px solid;
  font-size: var(--fs-md);
}
.alert .icon { flex-shrink: 0; font-size: 16px; line-height: 1.4; }
.alert .body strong { display: block; margin-bottom: 2px; }
.alert.info    { background: var(--info-50);    border-left-color: var(--info-500);    color: var(--info-700); }
.alert.success { background: var(--success-50); border-left-color: var(--success-500); color: var(--success-700); }
.alert.warning { background: var(--warning-50); border-left-color: var(--warning-500); color: var(--warning-700); }
.alert.danger  { background: var(--danger-50);  border-left-color: var(--danger-500);  color: var(--danger-700); }

/* TOAST */
.toast-stack {
  position: fixed; top: var(--sp-5); right: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
  z-index: 1100; pointer-events: none;
}
.toast-stack .toast { pointer-events: auto; }
.toast {
  background: white;
  border: 1px solid var(--slate-200);
  border-left: 3px solid;
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--sh-md);
  display: flex; gap: var(--sp-3); align-items: flex-start;
  max-width: 360px;
}
.toast .icon { font-size: 16px; }
.toast .body { flex: 1; font-size: var(--fs-sm); }
/* Yalniz baslik (ilk strong) blok; mesaj icindeki vurgular satir kirmasin */
.toast .body > strong:first-child { display: block; color: var(--slate-900); margin-bottom: 2px; }
.toast .body strong { color: var(--slate-900); }
.toast.success { border-left-color: var(--success-500); }
.toast.danger  { border-left-color: var(--danger-500); }
.toast.info    { border-left-color: var(--info-500); }
.toast.warning { border-left-color: var(--warning-500); }
.toast .x { color: var(--slate-400); cursor: pointer; padding: 0 4px; }

/* MODAL */
.modal-preview {
  background: rgba(14,22,32,0.5);
  padding: var(--sp-6);
  border-radius: var(--r-md);
}
.modal-card {
  background: white;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
}
.modal-card .head {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--slate-200);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-card .head h5 { margin: 0; }
.modal-card .body { padding: var(--sp-5); font-size: var(--fs-md); color: var(--slate-700); }
.modal-card .foot {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--slate-200);
  display: flex; justify-content: flex-end; gap: var(--sp-2);
  background: var(--slate-25);
}

/* ============================================================ TABS ============================================================ */
.tabs-bar {
  display: flex;
  border-bottom: 1px solid var(--slate-200);
  background: white;
  border-radius: var(--r-md) var(--r-md) 0 0;
  padding: 0 var(--sp-3);
  overflow-x: auto;
}
.tab {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--slate-600);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  white-space: nowrap;
  transition: var(--transition);
}
.tab:hover { color: var(--slate-800); }
.tab.active {
  color: var(--primary-700);
  border-bottom-color: var(--primary-700);
  font-weight: 600;
}
.tab .num {
  width: 22px; height: 22px;
  background: var(--slate-100);
  color: var(--slate-600);
  border-radius: 50%;
  font-size: var(--fs-xs);
  font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.tab.active .num { background: var(--primary-700); color: white; }
.tab.completed .num { background: var(--success-500); color: white; }
.tab.completed .num::after { content: '✓'; }
.tab.completed .num.has-text { display: none; }

/* BREADCRUMB */
.breadcrumb {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--slate-500);
}
.breadcrumb a { color: var(--slate-600); }
.breadcrumb .sep { color: var(--slate-300); font-weight: 400; }
.breadcrumb .current { color: var(--slate-800); font-weight: 500; }

/* PAGINATION */

/* STEPPER */
.stepper { display: flex; gap: 0; align-items: center; }
.step { display: flex; align-items: center; gap: var(--sp-2); }
.step .circle {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--slate-100);
  color: var(--slate-500);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: var(--fs-sm);
  border: 2px solid var(--slate-200);
}
.step.active .circle { background: var(--primary-700); color: white; border-color: var(--primary-700); }
.step.done .circle { background: var(--success-500); color: white; border-color: var(--success-500); }
.step .label { font-size: var(--fs-sm); color: var(--slate-600); font-weight: 500; }
.step.active .label { color: var(--primary-700); font-weight: 600; }
.step-line {
  flex: 1; height: 2px; background: var(--slate-200); margin: 0 var(--sp-3);
  min-width: 32px;
}
.step-line.done { background: var(--success-500); }

/* ============================================================ DATA VIZ ============================================================ */
.bar-chart {
  display: flex; align-items: flex-end; gap: var(--sp-2);
  height: 140px; padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--slate-200);
}
.bar-chart .bar {
  flex: 1; background: var(--primary-500);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  position: relative;
  min-width: 32px;
  transition: var(--transition);
}
.bar-chart .bar:hover { background: var(--primary-700); }
.bar-chart .bar .v {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--slate-600);
}
.bar-chart-labels {
  display: flex; gap: var(--sp-2);
  margin-top: var(--sp-1);
}
.bar-chart-labels span {
  flex: 1; text-align: center;
  font-size: var(--fs-xs); color: var(--slate-500);
  min-width: 32px;
}

/* DONUT (CSS only) */
.donut {
  --d-1: 36; --d-2: 28; --d-3: 22; --d-4: 14;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: conic-gradient(
    var(--primary-700) 0% 36%,
    var(--accent-500) 36% 64%,
    var(--info-500) 64% 86%,
    var(--success-500) 86% 100%
  );
  position: relative;
  display: inline-block;
}
.donut::after {
  content: ''; position: absolute;
  inset: 22px;
  background: white;
  border-radius: 50%;
}
.donut-legend {
  display: flex; flex-direction: column; gap: var(--sp-1);
  font-size: var(--fs-sm);
}
.donut-legend .item { display: flex; align-items: center; gap: var(--sp-2); }
.donut-legend .dot { width: 10px; height: 10px; border-radius: 2px; }

/* ---- Ana sayfa (04): rol panelleri ve teklif satirlari ---- */
/* Karar S24: cok rollu kullanicida paneller alt alta; baslik yalniz birden fazla panel acikken. */
.panel-head {
  display: none; align-items: baseline; gap: var(--sp-3);
  margin: var(--sp-8) 0 var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--slate-200);
}
.panel-head h3 { font-size: var(--fs-lg); margin: 0; }
.panel-head .ph-sub { font-size: var(--fs-xs); color: var(--slate-500); }
.dash-multi .panel-head { display: flex; }
/* Ilk panelin basligi ust bosluk almaz; hangi rol basta olursa olsun (Estimator rolu olmayan kullanici). */
.dash-multi section[data-panel]:first-of-type .panel-head { margin-top: 0; }
.dash-list { display: flex; flex-direction: column; }
.dash-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-4); border-bottom: 1px solid var(--slate-100);
  text-decoration: none; color: inherit; transition: var(--transition);
}
.dash-row:hover { background: var(--slate-25); text-decoration: none; }
.dash-row:last-child { border-bottom: 0; }
.dash-row .no { font-family: var(--font-mono); font-weight: 600; color: var(--primary-700); min-width: 62px; }
.dash-row .main { flex: 1; min-width: 0; }
.dash-row .main .t { font-weight: 500; color: var(--slate-800); }
.dash-row .main .s { font-size: var(--fs-xs); color: var(--slate-500); }
.dash-row .amt { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.dash-row .when { font-size: var(--fs-xs); color: var(--slate-500); white-space: nowrap; min-width: 92px; text-align: right; }
@media (max-width: 768px) {
  .dash-row .when, .dash-row .amt { display: none; }
}

/* ============================================================ PROJECT SUMMARY ============================================================ */
.summary-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.stat-tile {
  background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-800) 100%);
  color: white;
  border-radius: var(--r-md);
  padding: var(--sp-5);
  position: relative;
  overflow: hidden;
}
.stat-tile.accent {
  background: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-600) 100%);
  color: var(--primary-900);
}
.stat-tile .num {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat-tile .note {
  font-size: 11px;
  font-style: italic;
  opacity: 0.7;
  margin-top: var(--sp-2);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
.stat-tile .label {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
  margin-top: var(--sp-2);
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
}
.module-card {
  background: white;
  border: 1px solid var(--slate-200);
  border-top: 3px solid var(--primary-500);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.module-card .code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent-600);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.module-card h5 { color: var(--primary-700); margin: var(--sp-1) 0 var(--sp-2); }
.module-card p { color: var(--slate-600); font-size: var(--fs-sm); line-height: 1.5; margin: 0 0 var(--sp-3); }
.module-card .pages-count {
  font-size: var(--fs-xs); color: var(--slate-500);
  font-family: var(--font-mono);
  display: flex; gap: var(--sp-3);
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.role-card {
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  position: relative;
}
.role-card .role-tag {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
}
.role-card h5 { margin: 0 0 var(--sp-1); color: var(--slate-900); }
.role-card .duty { font-size: var(--fs-sm); color: var(--slate-600); margin-bottom: var(--sp-3); line-height: 1.5; }
.role-card ul { margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.role-card ul li { padding: 2px 0; color: var(--slate-700); display: flex; align-items: flex-start; gap: 6px; }
.role-card ul li::before { content: '▸'; color: var(--accent-500); font-weight: 700; flex-shrink: 0; }

/* WORKFLOW DIAGRAM */
.flow {
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  overflow-x: auto;
}
.flow-row {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: nowrap;
  margin-bottom: var(--sp-4);
}
.flow-node {
  flex-shrink: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  border: 1px solid;
  white-space: nowrap;
}
.flow-arrow {
  color: var(--slate-400); flex-shrink: 0;
  font-family: var(--font-mono); font-size: var(--fs-md);
}

/* DEFINITION LIST */
.dlist { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-md); }
.dlist dt { font-weight: 500; color: var(--slate-600); }
.dlist dd { margin: 0; color: var(--slate-800); }

/* ---- Profil (05): hesap basligi ---- */
.profile-head {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-5); background: white;
  border: 1px solid var(--slate-200); border-radius: var(--r-md);
  margin-bottom: var(--sp-4); flex-wrap: wrap;
}
.profile-head .avatar-xl {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--primary-700); color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; letter-spacing: 0.02em; flex: none;
}
.profile-head .pi { flex: 1; min-width: 200px; }
.profile-head .pi h2 { font-size: var(--fs-2xl); margin: 0 0 4px; }
.profile-head .pi .sub { color: var(--slate-500); font-size: var(--fs-sm); }
.role-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--sp-3); }
.readonly-note { font-size: var(--fs-xs); color: var(--slate-500); margin-top: 4px; }
/* Bosluksuz uzun e-posta telefonda kartin disina tasip kesiliyordu; adres kartin icinde kirilir. */
.profile-head .pi .sub { overflow-wrap: anywhere; }

/* ---- Kullanici ekle/duzenle (08): rol secici ---- */
.role-picker { display: grid; gap: var(--sp-2); }
.role-option {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  border: 1px solid var(--slate-200); border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4); cursor: pointer; transition: var(--transition);
  background: white;
}
.role-option:hover { border-color: var(--primary-400); background: var(--slate-25); }
.role-option.is-checked { border-color: var(--primary-600); background: var(--primary-50); }
.role-option .ro-main { flex: 1; min-width: 0; }
.role-option .ro-title { font-weight: 600; color: var(--slate-800); display: flex; align-items: center; gap: 8px; }
.role-option .ro-desc { font-size: var(--fs-xs); color: var(--slate-500); margin-top: 3px; }

/* ===== H11.5 kullanicilar ===== */
/* Kullanicilar (07): pasif kullanicinin adi soluk. Onayli sayfanin kendi stil blogundaki kural
   ortak dosyaya tasinirken dusmustu; tabloya baglandi, cunku musteri/tedarikci/preset satirlari
   da data-status="inactive" tasir ve onlarin adlari degismemeli. */
#userTbody tr[data-status="inactive"] td:first-child strong { color: var(--slate-500); }

/* ---- Tedarikci detay (10): kimlik karti, ozet paneli, katalog tablosu ---- */
/* Arac cubugunun altindaki uyarilar (yazma yetkisi notu, islem iletisi) kimlik kartina yapismaz.
   Onayli sayfadaki ".page-toolbar + .alert" kurali; secici yalniz bu ekranda eslesir (H11.5). */
.alert:has(~ .sup-head) { margin-bottom: var(--sp-4); }
.sup-head {
  display: flex; gap: var(--sp-5); align-items: flex-start;
  background: white; border: 1px solid var(--slate-200);
  border-radius: var(--r-md); padding: var(--sp-5);
  margin-bottom: var(--sp-4); flex-wrap: wrap;
}
.sup-head .mark {
  width: 56px; height: 56px; border-radius: var(--r-md);
  background: var(--primary-700); color: white; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-lg); font-family: var(--font-mono);
}
.sup-head .sh-main { flex: 1; min-width: 260px; }
.sup-head h2 { font-size: var(--fs-2xl); margin: 0 0 6px; }
.sup-head .tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: var(--sp-3); }
.sup-head .rel-line {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px dashed var(--slate-200);
  font-size: var(--fs-xs);
}
.sup-grid {
  display: grid; grid-template-columns: 1fr 1fr 320px;
  gap: var(--sp-4); align-items: start;
}
@media (max-width: 1200px) {
  .sup-grid { grid-template-columns: 1fr 1fr; }
  .sup-grid .sum-panel { grid-column: 1 / -1; }
}
@media (max-width: 780px) {
  .sup-grid { grid-template-columns: 1fr; }
  .sup-grid .dlist { grid-template-columns: 1fr; gap: 2px var(--sp-2); }
}

/* ---- Tedarikci penceresi (09, 10): teklif listesi baglari (S26) ---- */
.sup-links { margin-top: var(--sp-3); max-width: none; }
.sup-link-rows { display: grid; gap: var(--sp-2); margin: var(--sp-2) 0; }
.sup-link-rows:empty { display: none; }
.sup-link {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--sp-2); align-items: center;
}
@media (max-width: 720px) {
  .sup-link { grid-template-columns: minmax(0, 1fr) auto; }
  .sup-link [data-repeat-remove] { grid-column: 2; grid-row: 1 / span 2; }
}
/* ===== H11.5 tedarikciler ===== */
/* Tedarikciler (09): onayli ekranin sayfa ici kurallari (09-suppliers.html <style>), ortak
   stile tasinirken dusmustu. Hepsi ekranin kendi kimlikleri ya da sinifiyla sinirli. */
.sup-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
@media (max-width: 900px) { .sup-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* tedarikci adinin altindaki malzeme kategorisi satiri */
#supTbody .sub {
  font-size: var(--fs-xs);
  color: var(--slate-500);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* eskimis fiyat isareti (tabloda ve aciklama kartinda) */
.flag-stale {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--warning-800);
  background: var(--warning-50);
  border: 1px solid var(--warning-300);
  border-radius: var(--r-sm);
  padding: 0 5px;
  margin-left: var(--sp-2);
  white-space: nowrap;
}
#accessCard .flag-stale { margin-left: 0; }

#supTbody td.is-stale { color: var(--warning-800); font-weight: 600; }

/* pasif tedarikci satirlari sonuk gorunur */
#supTbody tr[data-status="inactive"] td:first-child a strong { color: var(--slate-500); }
#supTbody tr[data-status="inactive"] .chip {
  background: var(--slate-50);
  color: var(--slate-500);
  border-color: var(--slate-200);
}

/* "Eskimis fiyat" hizli suzgeci basili durumu */
#staleOnly[aria-pressed="true"] {
  background: var(--warning-50);
  border-color: var(--warning-400);
  color: var(--warning-800);
}

#accessCard .group-title { margin-top: 0; }
#accessCard .dlist dd .badge { margin-right: 4px; }
@media (max-width: 720px) {
  #accessCard .dlist { grid-template-columns: 1fr; gap: var(--sp-1) 0; }
  #accessCard .dlist dd { margin-bottom: var(--sp-3); }
}

.sum-panel {
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.sum-panel h5 { color: var(--primary-800); margin-bottom: var(--sp-3); }
.sum-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-3); padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--primary-200);
  font-size: var(--fs-sm);
}
.sum-row:last-of-type { border-bottom: none; }
.sum-k { color: var(--slate-600); }
.sum-v {
  font-family: var(--font-mono); font-weight: 600;
  color: var(--slate-900); text-align: right; white-space: nowrap;
}
.sum-v.plain { font-family: var(--font-sans); font-weight: 500; }
.sum-v.warn { color: var(--warning-800); }
.sum-v.ok { color: var(--success-700); }
.sum-foot {
  margin: var(--sp-3) 0 0; font-size: var(--fs-xs); font-style: italic;
  color: var(--slate-500); line-height: 1.45;
}
.freshbar {
  display: flex; height: 8px; margin-top: var(--sp-4);
  border-radius: 99px; overflow: hidden; background: var(--slate-200);
}
.freshbar span { display: block; height: 100%; transition: flex-grow var(--transition); }
.freshbar .ok { background: var(--success-500); }
.freshbar .warn { background: var(--warning-500); }
.freshbar-legend {
  display: flex; gap: var(--sp-4); margin-top: 6px;
  font-size: var(--fs-xs); color: var(--slate-600);
}
.freshbar-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.freshbar-legend i.ok { background: var(--success-500); }
.freshbar-legend i.warn { background: var(--warning-500); }
.mat-scroll { overflow-x: auto; }
.mat-scroll .table { min-width: 1120px; }
.mat-name strong { display: block; color: var(--slate-800); line-height: 1.3; }
.mat-en { display: block; font-size: var(--fs-xs); color: var(--slate-500); margin-top: 1px; }
.table tbody tr.is-passive { background: var(--slate-25); }
.table tbody tr.is-passive .mat-name strong { color: var(--slate-500); }
.table tbody tr.is-stale td:first-child { box-shadow: inset 3px 0 0 var(--warning-400); }
.age-cell { white-space: nowrap; }
.age-cell .mono { font-size: var(--fs-sm); }
.age-note { font-size: var(--fs-xs); color: var(--slate-500); margin-left: 6px; white-space: nowrap; }
.b-stale {
  background: var(--warning-50); color: var(--warning-800);
  border: 1px solid var(--warning-300); margin-left: 6px;
  text-transform: none; letter-spacing: 0;
}
.price-cell { position: relative; cursor: pointer; font-weight: 600; }
.price-cell .pen {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  font-size: var(--fs-xs); color: var(--accent-700);
  opacity: 0; transition: opacity var(--transition);
}
.price-cell:hover { background: var(--accent-50); box-shadow: inset 0 0 0 1px var(--accent-300); }
.price-cell:hover .pen { opacity: 1; }
.price-cell:focus-visible { outline: 2px solid var(--primary-500); outline-offset: -2px; }
.price-cell.locked { cursor: not-allowed; color: var(--slate-400); font-weight: 500; }
.price-cell.locked:hover { background: transparent; box-shadow: none; }
.price-cell.locked:hover .pen { opacity: 0; }
/* Yalnizca goruntuleyen rol (Estimator, K19): fiyat duz metindir; tiklanmaz, vurgulanmaz. */
.price-cell.is-readonly { cursor: default; }
.price-cell.is-readonly:hover { background: transparent; box-shadow: none; }
.price-cell.editing { background: var(--accent-50); box-shadow: inset 0 0 0 1px var(--accent-500); padding: 2px 6px; }
.price-cell.editing:hover { background: var(--accent-50); }
.price-input { height: 28px; width: 118px; text-align: right; padding: 0 8px; font-weight: 600; }
.price-cell.flash { animation: priceFlash 1.1s ease-out; }
@keyframes priceFlash {
  0%   { background: var(--success-100); box-shadow: inset 0 0 0 1px var(--success-400); }
  100% { background: transparent; box-shadow: none; }
}
.status-cell { white-space: nowrap; }
.hist-now td { background: var(--success-50); }

/* ===== H11.5 tedarikci-detay ===== */
/* Tanim listesindeki uzun deger (e-posta, adres) kolonunu genisletip sayfayi yatayda tasirmaz: onayli
   sayfada 1440 px'te ozet paneli ekranin disina tasiyordu. Secici yalniz uygulamanin katalog ozetini
   (#sdSummary) tasiyan izgarada eslesir; onayli statik sayfanin gorunumu degismez. */
.sup-grid:has(> #sdSummary) > * { min-width: 0; }
.sup-grid:has(> #sdSummary) .dlist dd { overflow-wrap: anywhere; }
/* Telefonda "Not" alaninin satir ici "span 3" kurali tek kolonlu izgarada uc ortuk kolon aciyordu;
   fiyat kutusu sikisiyor, nakliye degeri kesiliyordu. Her alan tam satir olur. */
@media (max-width: 720px) {
  #matModal .form-grid.cols-4 > .field { grid-column: auto !important; }
}
/* Fiyat gecmisi tablosu dar pencereye sigmaz: Fiyat, Degisim ve Degistiren kolonlari kesilip
   ulasilamaz oluyordu (onayli sayfada da). Tablo kutusu yatayda kayar. */
#sdHistContent .table-wrap { overflow-x: auto; }

/* ---- Veri listeleri (11): iki panelli gezgin ---- */
.vl-duzen { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-4); align-items: start; }
@media (max-width: 1100px) { .vl-duzen { grid-template-columns: 1fr; } }
.vl-yan {
  background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--r-md);
  overflow: hidden; position: sticky; top: 72px; max-height: calc(100vh - 96px);
  display: flex; flex-direction: column;
}
.vl-ara { padding: 10px; border-bottom: 1px solid var(--slate-200); background: var(--slate-25); }
.vl-ara .input { width: 100%; height: 32px; font-size: var(--fs-sm); }
.vl-liste { overflow-y: auto; flex: 1; }
.vl-kat {
  padding: 7px 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--slate-500); background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200); position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 6px;
}
.vl-oge {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer;
  border-bottom: 1px solid var(--slate-100); font-size: var(--fs-sm); color: var(--slate-700);
  text-decoration: none;
}
.vl-oge:hover { background: var(--slate-25); text-decoration: none; }
.vl-oge.is-on {
  background: var(--primary-50); color: var(--primary-800); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--primary-600);
}
.vl-oge .ad { flex: 1; min-width: 0; }
.vl-oge .say {
  font-family: var(--ff-mono); font-size: 11px; color: var(--slate-400);
  background: var(--slate-100); padding: 1px 6px; border-radius: 9px;
}
.vl-oge.is-on .say { background: var(--primary-100); color: var(--primary-700); }
.vl-oge .kilit { font-size: 10px; color: var(--slate-400); }
.vl-govde { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--r-md); overflow: hidden; }
.vl-bas {
  padding: 14px 16px; border-bottom: 1px solid var(--slate-200); background: var(--slate-25);
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
}
.vl-bas h3 { margin: 0 0 2px; font-size: 16px; color: var(--slate-900); }
.vl-bas .alt { font-size: var(--fs-xs); color: var(--slate-500); }
.vl-bas .sag { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.vl-kullanim {
  padding: 10px 16px; background: var(--info-100); border-bottom: 1px solid var(--slate-200);
  font-size: var(--fs-xs); color: var(--slate-700);
}
.vl-kullanim b { color: var(--info-700); }
.vl-kullanim .yer {
  display: inline-block; background: var(--white); border: 1px solid var(--slate-300);
  border-radius: 3px; padding: 1px 6px; margin: 2px 3px 0 0; font-size: 11px;
}
.vl-kaynak {
  padding: 10px 16px; background: var(--warning-50); border-bottom: 1px solid var(--slate-200);
  font-size: var(--fs-xs); color: var(--warning-800);
}
.vl-kaynak a { color: var(--warning-800); font-weight: 600; }
.vl-tablo { width: 100%; border-collapse: collapse; }
.vl-tablo th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--slate-600); background: var(--slate-100); padding: 7px 12px; font-weight: 600;
  border-bottom: 1px solid var(--slate-200);
}
.vl-tablo td {
  padding: 7px 12px; border-bottom: 1px solid var(--slate-100); font-size: var(--fs-sm);
  vertical-align: middle;
}
.vl-tablo tr:hover td { background: var(--slate-25); }
.vl-tablo tr.pasif td { color: var(--slate-400); }
.vl-tablo tr.pasif .deger { text-decoration: line-through; }
.vl-tablo .sira { font-family: var(--ff-mono); color: var(--slate-400); width: 42px; }
.vl-tablo .deger { font-weight: 500; color: var(--slate-900); }
.vl-tablo .ted { color: var(--slate-600); }
.vl-tablo .islem { width: 116px; text-align: right; white-space: nowrap; }
.vl-tablo .islem .btn-icon { width: 26px; height: 26px; font-size: 12px; margin-left: 3px; }
.vl-tablo .korunan {
  margin-left: 6px; font-size: 10px; font-weight: 600; color: var(--slate-500);
  background: var(--slate-100); border-radius: 999px; padding: 1px 7px;
}
tr.vl-flash td { animation: vlFlash 1.1s ease; }
@keyframes vlFlash { 0% { background: var(--accent-100); } 100% { background: transparent; } }
.vl-alt {
  padding: 11px 16px; border-top: 1px solid var(--slate-200); background: var(--slate-25);
  display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); color: var(--slate-500);
}
.vl-alt .bosluk { flex: 1; }
.vl-bos { padding: 30px 16px; text-align: center; color: var(--slate-400); font-size: var(--fs-sm); }
.vl-anlik { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--success-700); }
.vl-anlik::before { content: '\25CF'; font-size: 8px; color: var(--success-500); }

/* ===== H11.5 veri-listeleri ===== */
/* Telefonda onaylı ekranın dört sütunu (#, Değer, Durum, İşlemler) kartın içinde kalır; kullanım sayısı
   sütun değil, yeniden adlandırma penceresinin uyarısıdır (K30, S30). Tedarikçi listesinin ek sütunu
   sığmazsa tablo kendi kabında kayar — kart kırpmaz, sayfa kaymaz. */
@media (max-width: 600px) {
  #vlIcerik { overflow-x: auto; }
}

/* ---- Geometri preset'leri (12) ---- */
.gp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
@media (max-width: 900px) { .gp-stats { grid-template-columns: repeat(2, 1fr); } }
.gp-access {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  background: var(--slate-25); border: 1px solid var(--slate-200);
  border-radius: var(--r-md); font-size: var(--fs-xs); color: var(--slate-600);
}
.gp-access .sep { color: var(--slate-300); }
.gp-access .spacer { flex: 1; }
@media (max-width: 900px) { .gp-access .spacer { flex: 0 0 100%; } }
/* .pill ortak katmanda yalniz .subsection-head altinda tanimli; tablo seridinde de kullaniliyor. */
.table-toolbar .pill {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  background: var(--slate-100); color: var(--slate-600);
  padding: 2px 8px; border-radius: var(--r-sm); font-weight: 500;
}
.gp-name {
  background: none; border: 0; padding: 0;
  font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 600;
  color: var(--primary-700); cursor: pointer; text-align: left;
}
.gp-name:hover { text-decoration: underline; color: var(--primary-800); }
/* Yalnizca goruntuleyen rol (K19): preset adi pencere acan bir dugme degildir. */
.gp-name.is-readonly { cursor: default; }
.gp-name.is-readonly:hover { text-decoration: none; color: var(--primary-700); }
.gp-sub { font-size: var(--fs-xs); color: var(--slate-500); margin-top: 2px; }
/* Pencere altbilgisi: "Kopya Olarak Kaydet" sola yaslanir (onayli sayfanin kendi kurali, H11.5). */
.modal-overlay .modal-card .foot #gpSaveAsCopy { margin-right: auto; }

/* ---- Sistem parametreleri (14) ---- */
.sp-grid {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--sp-4); align-items: start; margin-bottom: var(--sp-8);
}
.sp-side { display: grid; gap: var(--sp-4); position: sticky; top: 84px; }
@media (max-width: 1080px) {
  .sp-grid { grid-template-columns: 1fr; }
  .sp-side { position: static; }
}
.sp-title { color: var(--primary-700); margin: 0 0 2px; }
.sp-sub { font-size: var(--fs-xs); color: var(--slate-500); margin-bottom: var(--sp-4); line-height: 1.6; }
.param-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 210px;
  gap: var(--sp-4); align-items: start; padding: var(--sp-4) 0;
  border-top: 1px solid var(--slate-100);
}
.param-row:first-of-type { border-top: 0; padding-top: 0; }
.param-row .p-main { min-width: 0; }
.param-row .p-name {
  font-size: var(--fs-md); font-weight: 600; color: var(--slate-800);
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.param-row .p-name .chip { font-size: 11px; font-weight: 500; }
.param-row .p-desc { font-size: var(--fs-sm); color: var(--slate-500); margin-top: 4px; line-height: 1.55; }
.param-row .p-input .input { text-align: right; font-weight: 600; }
/* Yalnizca goruntuleyen rol (K19): oran kutusu salt okunurdur ve degistirilebilir gibi gorunmez. */
.param-row .p-input .input[readonly] { background: var(--slate-50); cursor: default; }
.param-row .p-input .input[readonly]:hover,
.param-row .p-input .input[readonly]:focus { border-color: var(--slate-300); box-shadow: none; }
.param-row .p-input .field-helper { margin-top: 6px; }
.param-row .p-input .input-with-suffix { position: relative; }
.param-row.locked .input:disabled, .param-row.locked .select:disabled {
  background-color: var(--slate-50); color: var(--slate-500); cursor: not-allowed;
}
.param-row.changed .input {
  border-color: var(--warning-500); box-shadow: 0 0 0 3px var(--warning-50);
}
.param-row.changed .p-name::after {
  content: 'değişti';
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--warning-800); background: var(--warning-50);
  border: 1px solid var(--warning-300); border-radius: var(--r-sm); padding: 1px 6px;
}
.sp-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  border-top: 1px solid var(--slate-200); margin-top: var(--sp-5); padding-top: var(--sp-4);
}
.sp-stat .num { font-size: 30px; }
.sp-stat .note { font-style: normal; opacity: 0.9; }
.sp-preview { width: 100%; margin-top: calc(-1 * var(--sp-2)); }
.sp-preview td { padding: 5px var(--sp-2); font-size: var(--fs-sm); border: 0; }
.sp-preview tr.subtotal td {
  border-top: 1px solid var(--slate-300); background: var(--slate-25);
  font-weight: 600; color: var(--slate-800);
}
.sp-preview tr.fee td { color: var(--primary-700); }
.sp-preview tr.grand td {
  border-top: 2px solid var(--primary-700); font-weight: 700; font-size: var(--fs-md);
  color: var(--primary-800); padding-top: var(--sp-2); padding-bottom: var(--sp-2);
}
.sp-preview tr.extra td {
  border-top: 1px dashed var(--slate-200); color: var(--slate-500); font-size: var(--fs-xs);
}
#turnoutSection .subsection-head { align-items: center; flex-wrap: wrap; }
#turnoutSection .tb-spacer { flex: 1; }
#turnoutSection .tb-note {
  margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--slate-600); max-width: 90ch;
}

/* ===== H11.5 parametreler ===== */
/* Onayli ekranin sayfa ici kurallari (14-system-params.html): fark notundaki tutar, formul
   blogu ve gecmis tablosu. Degerler onayli ekranla birebir ayni. */
.sp-stat .note strong { color: var(--accent-300); }
.formula-box {
  margin: 0; font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.75;
  background: var(--slate-900); color: var(--slate-200); border-radius: var(--r-md);
  padding: var(--sp-4); overflow-x: auto; white-space: pre;
}
.formula-box b { color: var(--accent-300); font-weight: 700; }
.formula-box .cm { color: var(--slate-500); font-style: italic; }
#hTbody tr.is-new td { background: var(--success-50); }
#hTbody td .badge { margin-top: 3px; }
/* Kilitli para birimi kutusu tiklamayi yutuyordu (kilitli oge olay uretmez): tiklama kapsayiciya
   gecer ve "Tek para birimi" bildirimi cikar, onayli ekrandaki gibi. */
#paramForm .param-row.locked .select:disabled { pointer-events: none; }
#paramForm .param-row.locked .p-input { cursor: not-allowed; }
/* Onayli ekran 390 px'te bozuluyordu: telefonda her .table 720 px genislik aliyor, onizleme
   tablosu tek kolonlu izgarayi (1fr = en az icerik kadar) 720 px'e siserek oran kartini da
   ekranin disina itiyordu; formul blogu da ayni sekilde. Kurallar yalniz uygulama ekranina
   yazilir (#paramForm, .sp-impact), onayli statik sayfa oldugu gibi kalir. */
@media (max-width: 1080px) {
  #paramForm .sp-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .sp-impact > .card { min-width: 0; }
}
@media (max-width: 768px) {
  #paramForm .table.sp-preview { min-width: 0; }
}
@media (max-width: 600px) {
  /* 210 px'lik kutu sutunu aciklamaya 90 px birakiyordu: kutu aciklamanin altina iner. */
  #paramForm .param-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
}

/* ---- Musteri ekranlari (15, 16, 17) ---- */
.cust-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
@media (max-width: 900px) { .cust-stats { grid-template-columns: repeat(2, 1fr); } }
/* Teklif okumayan rolde (Master Data Editor, K37) "Toplam Teklif" kutusu cizilmez: kalan uc kutu
   satiri bosluksuz doldurur, telefonda alt alta dizilir. */
.cust-stats.cs-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) { .cust-stats.cs-3 { grid-template-columns: 1fr; } }
/* Musteri kisa kodu (karar S31) */
.cust-kod { font-size: 10px; padding: 0 6px; margin-left: 4px; vertical-align: 1px; }
/* Arac cubugunun altindaki hata kutusu musteri kartina yapismaz; Tedarikci Detay'daki kuralin
   karsiligi (H11.5). Onayli 16'da kutu yok, secici yalniz bu ekranda eslesir. */
.alert:has(~ .cust-head) { margin-bottom: var(--sp-4); }
.cust-head {
  display: flex; gap: var(--sp-5); align-items: flex-start;
  background: white; border: 1px solid var(--slate-200);
  border-radius: var(--r-md); padding: var(--sp-5);
  margin-bottom: var(--sp-4); flex-wrap: wrap;
}
.cust-head .mark {
  width: 56px; height: 56px; border-radius: var(--r-md);
  background: var(--primary-700); color: white; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px; font-family: var(--font-mono);
}
.cust-head .ch-main { flex: 1; min-width: 220px; }
.cust-head h2 { font-size: var(--fs-2xl); margin: 0 0 6px; }
.cust-head .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--sp-2); }
.radio-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; padding-top: 4px; }

/* ---- Teklifler (18): statu sekmeleri ve sunucu sayfalamasinin alt bilgisi ---- */
.q-tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--slate-200); margin-bottom: 0;
}
.q-tabs a {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 10px 14px; font-size: var(--fs-sm); font-weight: 500; color: var(--slate-600);
  transition: var(--transition); white-space: nowrap; text-decoration: none;
  /* Onaylı sekme bir <button>: tarayıcının "normal" satır yüksekliği. Bağlantı gövdenin 1.5'ini
     alıyor, çubuk ve altındaki her şey 3 px aşağı kayıyordu (H11.5). */
  line-height: normal;
}
.q-tabs a:hover { color: var(--slate-800); }
.q-tabs a.active { color: var(--primary-700); border-bottom-color: var(--primary-700); font-weight: 600; }
.q-tabs .cnt {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--slate-100); color: var(--slate-600); font-size: 10px; font-weight: 600;
}
.q-tabs a.active .cnt { background: var(--primary-700); color: white; }

/* Sunucu sayfalamasi (karar T3): tek sayfalik listede hic gorunmez. */
.q-pager {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--slate-200);
  background: var(--slate-25); font-size: var(--fs-sm); color: var(--slate-600);
}
.q-pager .pages { display: flex; gap: var(--sp-2); }

@media (max-width: 1100px) {
  .q-table td:nth-child(5), .q-table th:nth-child(5),
  .q-table td:nth-child(10), .q-table th:nth-child(10) { display: none; }
}

/* GRID UTILITIES */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .summary-stats { grid-template-columns: repeat(2, 1fr); }
}

/* TOC sticky right */
.toc {
  position: fixed;
  top: 80px; right: 24px;
  width: 200px;
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  font-size: var(--fs-sm);
  box-shadow: var(--sh-md);
  z-index: 50;
}
.toc h6 { margin-bottom: var(--sp-2); }
.toc a { display: block; padding: 4px 0; color: var(--slate-600); border-left: 2px solid transparent; padding-left: 8px; }
.toc a:hover { color: var(--primary-700); border-left-color: var(--primary-300); text-decoration: none; }
/* Global: `hidden` attribute her zaman gizler — display: block/flex override'larını yener */
[hidden] { display: none !important; }
/* Suzgecin gizledigi satir (app-filters.js, onayli ekranlarin kendi sayfa stilinde de vardi).
   Kural olmadan sinif eklenir ama satir gorunmeye devam eder — suzgec sessizce calismaz. */
.is-hidden { display: none !important; }
@media (max-width: 1400px) { .toc { display: none; } }

/* Footer */
.footer {
  margin-top: var(--sp-16);
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--slate-200);
  font-size: var(--fs-sm);
  color: var(--slate-500);
  text-align: center;
}
.footer .mono { color: var(--slate-700); }

/* Example CTA — "Yeni Teklif" sayfa referansı */
.example-cta {
  background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-800) 100%);
  color: white;
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-8);
  margin-bottom: var(--sp-12);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--primary-600);
}
.example-cta::before {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(216,155,27,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.example-cta::after {
  content: '◆';
  position: absolute;
  left: var(--sp-5); top: var(--sp-5);
  color: var(--accent-500);
  font-size: 14px;
  opacity: 0.7;
}
.example-cta-body {
  flex: 1;
  min-width: 280px;
  position: relative;
  padding-left: var(--sp-4);
}
.example-cta-body .eyebrow {
  display: block;
  margin-bottom: var(--sp-1);
  color: var(--accent-300);
}
.example-cta-body h3 {
  color: white;
  margin: 0 0 var(--sp-2);
  letter-spacing: -0.01em;
}
.example-cta-body p {
  color: rgba(255,255,255,0.78);
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.55;
  max-width: 720px;
}
.example-cta-body p strong { color: var(--accent-300); font-weight: 600; }
.example-cta .btn {
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .example-cta { padding: var(--sp-5); }
  .example-cta-body { padding-left: 0; min-width: 100%; }
  .example-cta::after { display: none; }
  .example-cta .btn { width: 100%; justify-content: center; }
}

/* Sidebar footer (logout) */
.sidebar-foot {
  margin-top: auto;
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  border-top: 1px solid var(--primary-600);
  background: var(--primary-800);
}
.logout-btn {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
  padding: 8px 12px;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: inherit;
  transition: var(--transition);
}
.logout-btn:hover {
  background: var(--danger-500);
  border-color: var(--danger-500);
  color: white;
}
.logout-btn .icon { font-size: 14px; opacity: 0.85; }
.sidebar-foot-meta {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.4);
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  text-align: center;
}

/* Sub nav-item (alt-link altyapısı) */
.nav-item.nav-sub {
  padding-left: 44px;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.65);
}
.nav-item.nav-sub::before {
  content: '└';
  margin-right: 6px;
  opacity: 0.5;
}
.nav-item.nav-sub.active {
  background: var(--primary-800);
  color: white;
  border-left-color: var(--accent-500);
  font-weight: 500;
}

/* ============================================================
   HAMBURGER — telefonda menuyu acar/kapatir, masaustunde
   menuyu ikon seridine daraltir/genisletir (H9.3)
   ============================================================ */
.menu-toggle {
  display: inline-flex;
  width: 36px; height: 36px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  color: var(--slate-700);
}
.menu-toggle:hover { background: var(--slate-100); }
.menu-toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--slate-700);
  border-radius: 2px;
  transition: var(--transition);
}

/* Sidebar backdrop (mobile overlay) */
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(2, 19, 41, 0.5);
  z-index: 199;
  animation: fadeIn 200ms ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.sidebar-backdrop.open { display: block; }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   1280px : large desktop ↓ (tighter padding)
   1024px : tablet         (3-col grids → 2-col)
    768px : tablet/landscape phone (sidebar hidden, hamburger)
    600px : phone           (single column, compact hero)
    420px : small phone
   ============================================================ */

/* ---------- ≤ 1280px : tighter ---------- */
@media (max-width: 1280px) {
  .app-main { padding: var(--sp-6) var(--sp-6); }
  .hero { padding: var(--sp-10); }
  .hero h1 { font-size: 32px; }
  .summary-stats { grid-template-columns: repeat(4, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- ≤ 1024px : tablet ---------- */
@media (max-width: 1024px) {
  .app { grid-template-columns: 220px 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .summary-stats { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 28px; }
  .hero p { font-size: var(--fs-md); }
  .hero .meta { gap: var(--sp-5); flex-wrap: wrap; }
  .type-row { grid-template-columns: 60px 1fr 140px; gap: var(--sp-3); }
  .type-row .meta { font-size: 10px; }
  .palette-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .module-grid, .role-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .user-menu .user-meta { display: none; }  /* hide name/role, keep avatar */
}

/* ---------- ≤ 768px : sidebar hidden, hamburger active ---------- */
@media (max-width: 768px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "main";
  }

  /* Sidebar becomes off-canvas drawer */
  .app-sidebar {
    grid-area: unset;
    position: fixed; top: 0; left: 0;
    height: 100vh;
    width: 260px;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 250ms ease;
    overflow-y: auto;
    box-shadow: var(--sh-lg);
  }
  .app-sidebar.open { transform: translateX(0); }

  /* Show hamburger */
  .menu-toggle { display: inline-flex; }

  /* Adjust header */
  .app-header {
    padding: 0 var(--sp-3);
    gap: var(--sp-2);
  }
  .crumbs { font-size: var(--fs-xs); }
  .crumbs a:not(:last-of-type) { display: none; }  /* keep current page only */
  .crumbs .sep:nth-of-type(-n+1) { display: none; }

  /* Main padding */
  .app-main { padding: var(--sp-4) var(--sp-4); }

  /* Hero */
  .hero { padding: var(--sp-6); border-radius: var(--r-md); margin-bottom: var(--sp-6); }
  .hero h1 { font-size: 24px; line-height: 1.2; }
  .hero p { font-size: var(--fs-base); }
  .hero .meta { gap: var(--sp-3); margin-top: var(--sp-5); }
  .hero .meta div { min-width: 45%; }
  .hero::before { width: 200px; height: 200px; right: -60px; top: -60px; }
  .hero::after { display: none; }

  /* Section spacing */
  .section { margin-bottom: var(--sp-10); }
  .section-head { margin-bottom: var(--sp-4); }
  .section-head h2 { font-size: 22px; }
  .subsection { margin-bottom: var(--sp-6); }
  .subsection-head { flex-wrap: wrap; gap: var(--sp-2); }

  /* Grids → single column */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: var(--sp-3); }
  .summary-stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .palette-grid { grid-template-columns: 1fr; }
  .token-grid { grid-template-columns: 1fr; }

  .stat-tile .num { font-size: 28px; }
  .stat-tile { padding: var(--sp-4); }

  /* KPI cards */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-card .value { font-size: 22px; }

  /* Form fields */
  .field { max-width: none; }

  /* Tables : horizontal scroll */
  .table-wrap { overflow-x: auto; }
  .table { min-width: 720px; }
  .table-toolbar { flex-wrap: wrap; gap: var(--sp-2); }
  .table-toolbar .left, .table-toolbar .right { flex: 1; min-width: 100%; }
  .table-toolbar .left .search-input { width: 100%; }
  .table-toolbar .left .search-input .input { width: 100%; }

  /* Tabs : sticky scroll */
  .tabs-bar { padding: 0 var(--sp-2); }
  .tab { padding: var(--sp-3) var(--sp-3); font-size: var(--fs-sm); }

  /* Stepper : compact */
  .stepper { overflow-x: auto; padding-bottom: var(--sp-2); }
  .step .label { display: none; }
  .step.active .label { display: inline; font-size: var(--fs-xs); }

  /* Tipografi tablosu mobil */
  .type-demo { padding: var(--sp-3); }
  .type-row {
    grid-template-columns: 1fr;
    gap: var(--sp-1);
    padding: var(--sp-3) 0;
  }
  .type-row .meta { text-align: left; opacity: 0.7; }
  .type-row .name { font-size: 9px; color: var(--accent-600); }

  /* Toast preview row */
  .toast { max-width: 100%; }

  /* Bar chart : maintain min */
  .bar-chart .bar { min-width: 24px; }
  .bar-chart-labels span { font-size: 10px; }

  /* Donut + legend stack */
  .grid-2 .card > div[style*="display:flex"] { flex-direction: column; align-items: center; gap: var(--sp-3) !important; }

  /* Workflow flow */
  .flow { padding: var(--sp-4); }
  .flow-row { flex-wrap: wrap; gap: var(--sp-2); }
  .flow-arrow { display: none; }
  .flow-node { font-size: var(--fs-xs); padding: var(--sp-2) var(--sp-3); }

  /* Modal */
  .modal-preview { padding: var(--sp-3); }
  .modal-card { max-width: 100%; }
  .modal-card .head, .modal-card .body, .modal-card .foot { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .modal-card .foot { flex-wrap: wrap; }
  .modal-card .foot .btn { flex: 1; }

  /* Buttons row : stack at small */
  .btn-row { gap: var(--sp-2); }

  /* Definition list */
  .dlist { grid-template-columns: 1fr; gap: var(--sp-1); }
  .dlist dt { color: var(--accent-600); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; margin-top: var(--sp-2); }
  .dlist dd { margin-bottom: var(--sp-2); }

  /* Footer */
  .footer { padding: var(--sp-6) 0; }
}

/* ---------- ≤ 600px : phone ---------- */
@media (max-width: 600px) {
  .summary-stats { grid-template-columns: 1fr; }
  .stat-tile .num { font-size: 32px; }
  .kpi-grid { grid-template-columns: 1fr; }

  .hero h1 { font-size: 20px; }
  .hero .meta { flex-direction: column; gap: var(--sp-3); }
  .hero .meta div { min-width: 100%; }

  .section-head h2 { font-size: 20px; }
  h1 { font-size: 26px; }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; }

  .palette-group { padding: var(--sp-3); }

  /* Toolbar buttons compact */
  .btn-row .btn { font-size: var(--fs-sm); padding: 0 var(--sp-3); }

  /* Tab numbers smaller */
  .tab .num { width: 18px; height: 18px; font-size: 10px; }

  /* Donut smaller */
  .donut { width: 110px; height: 110px; }
  .donut::after { inset: 18px; }

  /* Bar chart compact */
  .bar-chart { height: 110px; }

  /* Avatar spacing in table cells */
  .table td .avatar.avatar-sm { display: none; }
}

/* ---------- ≤ 420px : small phone ---------- */
@media (max-width: 420px) {
  .app-main { padding: var(--sp-3) var(--sp-3); }
  .hero { padding: var(--sp-5); }
  .hero h1 { font-size: 18px; }
  .crumbs { display: none; }
  .app-sidebar { width: 86%; }
  .brand-name small { display: none; }
  .stat-tile { padding: var(--sp-3); }
  .stat-tile .num { font-size: 26px; }

  .kpi-card { padding: var(--sp-3); }
  .kpi-card .value { font-size: 20px; }

  /* TOC zaten gizli */
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}


/* =====================================================================
   AUTH SAYFALARI — 01-login · 02-forgot-password · 03-reset-password
   Görsel dil kaynağı: login.html (demo erişim kapısı).
   Kullanım: <body class="is-auth"> + .auth-shell > .auth-card
   ===================================================================== */
body.is-auth {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--slate-800);
  background:
    radial-gradient(ellipse at top right, rgba(216,155,27,0.10) 0%, transparent 45%),
    linear-gradient(135deg, var(--primary-700) 0%, var(--primary-800) 50%, var(--primary-900) 100%);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}
body.is-auth::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(circle at 15% 85%, rgba(95,141,190,0.08) 0%, transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(216,155,27,0.06) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}
.auth-shell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  position: relative;
  z-index: 1;
}
.auth-card {
  width: 100%;
  max-width: 460px;
  background: white;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  position: relative;
  animation: cardIn 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.auth-head {
  padding: 32px 32px 24px;
  background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-800) 100%);
  color: white;
  position: relative;
  overflow: hidden;
}
.auth-head::after {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(216,155,27,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.auth-brand {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.auth-brand .brand-logo {
  background: white; border-radius: var(--r-sm); padding: 7px 11px;
}
.auth-brand .brand-logo img { height: 24px; }
.auth-brand .brand-name { padding: 0; opacity: 0.85; }
.auth-eyebrow {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-300);
  position: relative; z-index: 1;
  margin-bottom: 6px;
}
/* Global 'h1..h6 { color: slate-900 }' kurali, koyu zeminde miras alinan
   beyaz rengi eziyordu — koyu bantlarda baslik rengi acikca miras alinir. */
.auth-head h1, .auth-head h2, .auth-head h3,
.auth-head h4, .auth-head h5, .auth-head h6 { color: inherit; }

.auth-head h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.3;
  position: relative; z-index: 1;
}
.auth-body {
  padding: 24px 32px 28px;
}
.auth-info {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-left: 3px solid var(--primary-500);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--slate-700);
  line-height: 1.55;
  margin-bottom: 22px;
}
.auth-info strong { color: var(--primary-700); }
.auth-info .icon { font-size: 14px; margin-right: 4px; vertical-align: -1px; }
.input-wrap {
  position: relative;
}
.toggle-vis {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none;
  font-size: 11px; color: var(--slate-500); font-weight: 500;
  cursor: pointer; padding: 6px 10px;
  border-radius: var(--r-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.toggle-vis:hover { background: var(--slate-100); color: var(--slate-700); }
.btn-submit {
  width: 100%;
  height: 46px;
  background: var(--accent-500);
  color: var(--primary-900);
  border: 1px solid var(--accent-500);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 150ms ease;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-submit:hover:not(:disabled) {
  background: var(--accent-600);
  border-color: var(--accent-600);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(216,155,27,0.35);
}
.btn-submit:active:not(:disabled) { transform: translateY(0); }
.btn-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn-submit.loading::before {
  content: '';
  width: 14px; height: 14px;
  border: 2px solid rgba(2,17,41,0.25);
  border-top-color: var(--primary-900);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-submit.success {
  background: var(--success-500);
  border-color: var(--success-500);
  color: white;
}
.shake { animation: shake 0.45s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.auth-foot {
  background: var(--slate-50);
  padding: 14px 32px;
  border-top: 1px solid var(--slate-200);
  font-size: 11px;
  color: var(--slate-500);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 6px;
}
.auth-foot strong { color: var(--slate-700); }
.auth-foot .mono { font-family: var(--font-mono); }
.outside-foot {
  text-align: center;
  padding: 16px;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}
.outside-foot strong { color: var(--accent-300); }
@media (max-width: 480px) {
  .auth-shell { padding: 16px 12px; }
  .auth-head { padding: 24px 22px 18px; }
  .auth-head h1 { font-size: 19px; }
  .auth-body { padding: 18px 22px 22px; }
  .auth-foot { padding: 12px 22px; flex-direction: column; align-items: flex-start; }
}
/* ===== H11.5 giris ===== */
/* Kart ile alt not yan yana sığmayınca (gerçek 390 px telefon, dar tablet) alt not kartın altına
   iner ve kart ekranın enini alır. Önceden kart üçte bire eziliyor, logo kayboluyor, yazılar
   kartın kenarında kesiliyordu. Geniş ekranda onaylı yan yana düzen aynen kalır. */
.auth-shell { flex-wrap: wrap; align-content: center; }
.auth-brand .brand-logo { flex: none; }
/* "Göster" düğmesi uzun şifrenin üstüne binmez; uzun, bölünemeyen e-posta adresi bilgi ve
   uyarı kutusundan taşıp kartın kenarında kesilmez. */
.auth-body .input-wrap .input { padding-right: 80px; }
.auth-info, .auth-body .alert { overflow-wrap: anywhere; }
/* "E-posta gönderildi" bildirimi adresi taşır: kutu ekranın içinde kalır, adres satıra kırılır. */
body.is-auth .toast { max-width: min(360px, calc(100vw - 2 * var(--sp-5))); }
body.is-auth .toast .body { min-width: 0; overflow-wrap: anywhere; }

/* Form yardim metni durum varyantlari (kaynak: login.html) */
.field-helper.success { color: var(--success-700); }
.field-helper.warning { color: var(--warning-700); }
.field-helper.danger  { color: var(--danger-700); font-weight: 500; }

/* ============================================================ PAGE TOOLBAR (sayfa başlığı + aksiyonlar) ============================================================ */
.page-toolbar {
  background: white;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--slate-200);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.page-toolbar .info { flex: 1; min-width: 240px; }
.page-toolbar h1 {
  font-size: 22px;
  margin: 4px 0;
  letter-spacing: -0.01em;
}
.page-toolbar .meta {
  font-size: var(--fs-sm);
  color: var(--slate-500);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: 4px;
}
.page-toolbar .meta .mono { color: var(--slate-700); }
.page-toolbar .actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
}
.page-toolbar .autosave {
  font-size: var(--fs-xs);
  color: var(--slate-500);
  font-family: var(--font-mono);
  margin-right: var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.page-toolbar .autosave::before {
  content: '●';
  color: var(--success-500);
  font-size: 8px;
}

/* ============================================================ INFO CARD (sayfa içi bilgi kutusu) ============================================================ */
.info-card {
  background: var(--info-50);
  border-left: 3px solid var(--info-500);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--info-700);
}
.info-card a { color: var(--info-700); text-decoration: underline; }
.info-card.warn { background: var(--warning-50); border-left-color: var(--warning-500); color: var(--warning-800); }

/* ============================================================ FILTER BAR (liste sayfaları) ============================================================ */
.filter-bar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: var(--slate-25);
  border: 1px solid var(--slate-200);
  border-bottom: 0;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.filter-bar .fb-label {
  font-size: var(--fs-xs); color: var(--slate-500); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
}
/* Etiket kutusuyla tek parça: sarılan esnek satırda etiket bir satırın sonunda, kutusu alt satırın
   başında kalıyordu (tablet ve masaüstü). Parça çubukla aynı aralığı kullanır; sarılmayan çubukta
   görünüm değişmez. Tarih aralığında iki kutu ve "–" da parçanın içindedir. */
.filter-bar .fb-pair { display: inline-flex; align-items: center; gap: var(--sp-3); }
.filter-bar .select, .filter-bar .input { height: 32px; font-size: var(--fs-sm); }
.filter-bar .spacer { flex: 1; }
.filter-bar + .table-wrap { border-top-left-radius: 0; border-top-right-radius: 0; }
/* Telefonda süzgeç çubuğu iki kolonlu ızgaradır: her etiket kendi kutusunun solunda; arama, tek
   başına duran düğme ve sayaç tam satırda. Sarılan esnek satırda etiket bir satırın sonunda, kutusu
   alt satırın başında kalıyordu (önce yalnız tedarikçi kataloğunda düzeltilmişti). Etiket-kutu
   parçası burada kutu çizmez: etiket ve kutusu ızgaranın kendi hücrelerine oturur. */
@media (max-width: 560px) {
  .filter-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .filter-bar .fb-pair { display: contents; }
  .filter-bar .search-input { grid-column: 1 / -1; width: auto !important; }
  .filter-bar .select, .filter-bar > .input, .filter-bar .fb-pair > .input { width: 100% !important; }
  .filter-bar > .btn { grid-column: 1 / -1; justify-self: start; }
  .filter-bar .spacer { display: none; }
  .filter-bar > .spacer ~ * { grid-column: 1 / -1; justify-self: end; }
}

/* ============================================================ GROUP TITLE (form bölüm başlığı) ============================================================ */
/* NOT: teklif editöründe .tab-panel .group-title daha spesifik bir Excel bandı
   olarak override ediyor; bu genel form sayfaları içindir. */
.group-title {
  display: block;
  color: var(--accent-700);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-xs);
  font-weight: 700;
  margin: var(--sp-5) 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--slate-100);
}

/* ============================================================ HATA SAYFALARI (24 / 25 / 26) ============================================================ */
.err-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 56px - var(--sp-8) * 2);
  padding: var(--sp-6) 0;
}
.err-card {
  background: white; border: 1px solid var(--slate-200); border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  max-width: 620px; width: 100%; padding: var(--sp-8) var(--sp-8) var(--sp-6);
  text-align: center;
}
.err-code {
  font-family: var(--font-mono); font-weight: 700; line-height: 1;
  font-size: 76px; letter-spacing: -0.03em; color: var(--primary-700);
}
.err-code .dim { color: var(--slate-200); }
.err-badge {
  display: inline-block; margin: var(--sp-3) 0 var(--sp-4);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
}
.err-card h1 { font-size: var(--fs-2xl); margin: 0 0 var(--sp-3); }
.err-card p.lead { color: var(--slate-600); font-size: var(--fs-md); margin: 0 auto var(--sp-5); max-width: 460px; }
.err-actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.err-meta {
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid var(--slate-100);
  font-size: var(--fs-xs); color: var(--slate-500);
  display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap;
}

/* ===== H11.5 denetim-hata ===== */
/* Oturumsuz ziyaretçinin hata ekranı menüsüz koyu zeminde durur (girişsiz kabuk). Kart, giriş
   kartı gibi telefonda iki yanda 16 px boşluk bırakır ve zeminin süsleme katmanının üstündedir. */
body.is-auth .err-wrap { position: relative; z-index: 1; padding-left: 16px; padding-right: 16px; }

/* ============================================================ YATAY BAR (raporlar) ============================================================ */
.hbar-list { display: grid; gap: 9px; }
.hbar { display: grid; grid-template-columns: 170px 1fr 78px; gap: var(--sp-3); align-items: center; font-size: var(--fs-sm); }
.hbar .hb-name { color: var(--slate-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .hb-track { background: var(--slate-100); border-radius: 999px; height: 14px; overflow: hidden; }
.hbar .hb-fill { display: block; height: 100%; border-radius: 999px; background: var(--primary-600); }
.hbar .hb-fill.accent { background: var(--accent-500); }
.hbar .hb-val { text-align: right; font-family: var(--font-mono); font-weight: 600; color: var(--slate-700); }
@media (max-width: 700px) { .hbar { grid-template-columns: 110px 1fr 70px; } }

/* ============================================================ BACK LINK + MODAL (native dialog) ============================================================ */
.back-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--slate-500);
  text-decoration: none;
  margin-bottom: 6px;
  font-weight: 500;
}
.back-link:hover { color: var(--primary-700); text-decoration: underline; }
.modal-overlay {
  border: 0;
  padding: 0;
  background: transparent;
  width: 540px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
}
.modal-overlay::backdrop { background: rgba(14,22,32,0.55); }
.modal-overlay .modal-card {
  width: 100%;
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
}
.modal-overlay .modal-card .body { overflow-y: auto; }
/* Her pencerede başlık ve alt bant (Kaydet) yerinde kalır, aradaki gövde kayar. Kartın yüksekliği
   pencereninkiyle sınırlıdır: yüzde değer içeriğine göre boyutlanan pencerede çözülmüyordu, kısa
   ekranda bütün pencere kayıyor, başlık ekrandan çıkıyordu. Gövdeyle alt bandı saran form da kartın
   sütununa katılır; katılmazsa gövde küçülmez ve Kaydet kartın kırpılan kısmında kalırdı. */
.modal-overlay .modal-card > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.modal-overlay .modal-card > form > .body { flex: 1 1 auto; min-height: 0; }
body.modal-open { overflow: hidden; }

/* ---- Form modali (genis varyant) ----------------------------------------
   09-suppliers · 10-supplier-detail · 11-materials · 12-geometry-presets
   ayni kalibi kullanir. Dar onay modallari icin sade .modal-overlay yeterli. */
.modal-overlay.is-wide { width: 860px; max-height: calc(100vh - 48px); }
.modal-overlay.is-wide .modal-card { max-width: none; max-height: calc(100vh - 48px); }

/* Modal ici form izgarasi */
.form-grid { display: grid; gap: var(--sp-3) var(--sp-4); }
.form-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.form-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.form-grid .field { margin-bottom: 0; max-width: none; }
@media (max-width: 720px) {
  .form-grid.cols-2, .form-grid.cols-3, .form-grid.cols-4 { grid-template-columns: 1fr; }
}

/* Modal basindaki "duzenlenen kayit" bandi */
.modal-target {
  background: var(--slate-25);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--slate-600);
  margin-bottom: var(--sp-2);
}
.modal-target .sep { color: var(--slate-300); margin: 0 4px; }
.modal-target .mono { color: var(--primary-700); font-weight: 600; }

/* Modal ici aciklama kutusu */
.form-hint {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--info-50);
  border-left: 3px solid var(--info-500);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  color: var(--info-700);
  line-height: 1.55;
}
.form-hint.warn {
  background: var(--warning-50);
  border-left-color: var(--warning-500);
  color: var(--warning-800);
}

/* Kaydetme sonrasi ilgili satiri kisa sure vurgular */
.table tbody tr.row-flash > td { background: var(--accent-50); transition: background 600ms ease; }

/* =====================================================================
   UYGULAMA KATMANI BILESENLERI (G1, G4)
   Onayli ekranlarin tasarim dilini bozmadan, uygulamanin ihtiyac duydugu
   parcalar: panel basligi, duz liste, form aksiyon satiri, hatali alan,
   sifre kurali durumu ve otomatik tamamlama kutusu.
   ===================================================================== */
.plain-list { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); }
.plain-list li { font-size: var(--fs-sm); color: var(--slate-700); line-height: 1.7; }
.plain-list li.is-ok { color: var(--success-700); }
.plain-list li.is-ok::marker { content: '✓  '; }
.plain-list li.is-missing { color: var(--slate-500); }

.form-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.input.is-invalid, .select.is-invalid {
  border-color: var(--danger-500);
  box-shadow: 0 0 0 3px var(--danger-50);
}

/* Otomatik tamamlama (G4.5): en fazla 8 oneri, klavyeyle secilir */
.ac-box {
  position: absolute; z-index: 30; min-width: 220px; max-width: 420px;
  margin-top: 2px; padding: 4px;
  background: var(--white); border: 1px solid var(--slate-200);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
}
.ac-item {
  display: block; width: 100%; text-align: left;
  padding: 6px var(--sp-2); border: 0; border-radius: var(--r-sm);
  background: none; font: inherit; font-size: var(--fs-sm); color: var(--slate-700);
  cursor: pointer;
}
.ac-item:hover, .ac-item.is-active { background: var(--primary-50); color: var(--primary-700); }

/* Kutunun konumlandigi kap; sinifi betik ekler, boylece diger alanlarin
   yerlesimi degismez. */
.ac-host { position: relative; }

/* ============================================================
   TEKLİF EDİTÖRÜ (19) ve HIZLI TEKLİF köprüsü — onaylı ekranın
   sayfa içi stili buraya taşındı. Uygulamada sayfa içi <style>
   bloğu yoktur (içerik güvenlik politikası); ekranın görünümü
   değişmedi, yeri değişti.
   ============================================================ */
/* Hizli gecis cubugu: onayli ekranin sayfa ici kurali tasinirken dusmustu — dugmeler
   alt alta diziliyor, cubuk yapismiyordu (H9.2). Sekmeler bir satir, dugmeler saga
   yasli ikinci satir; cubuk ust bandin altina yapisir (bolum basliklari top:104px). */
.tabs-bar.scroll-tabs {
  flex-wrap: wrap;
  row-gap: 0;
  overflow-x: visible;
  position: sticky;
  top: 56px;
  z-index: 50;
  background: white;
  align-items: center;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  margin-bottom: var(--sp-4);
}
.tabs-bar .bar-spacer { flex: 1 1 auto; }
.tabs-bar .bar-actions {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) 0;
}
.tabs-bar .tab { background: none; border-top: 0; border-left: 0; border-right: 0; }
/* Onayli sayfa ici kural tasinirken dusmustu: etkin sekme yalniz kalin yazi ve lacivert
   numarayla ayrilir, alt cizgisi yoktur (.tab.active'in cizgisini ezer). */
.tabs-bar.scroll-tabs .tab { border-bottom: 2px solid transparent; margin-bottom: -1px; }

/* =========================================================
   TEK SAYFA FORM — eski sekmeler artik acilir/kapanir bolum
   NOT: .tab-panel sinifi ve data-tab nitelikleri KORUNDU;
   hesap motoru (getCostGroup) bunlara bagli.
   ========================================================= */
.tab-panel {
  display: block;
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  padding: 0 var(--sp-6) var(--sp-6);
  margin-bottom: var(--sp-4);
  scroll-margin-top: 116px;   /* app-header 56px + hizli gecis cubugu */
}
.tab-panel.is-collapsed { padding-bottom: 0; }
.tab-panel.is-collapsed > *:not(.section-head) { display: none !important; }

/* Bolum basligi — malzeme grubu basliklariyla ayni gorsel dil */
.tab-panel .section-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 calc(-1 * var(--sp-6)) var(--sp-5);
  padding: var(--sp-4) var(--sp-6);
  background: linear-gradient(180deg, var(--slate-50) 0%, white 100%);
  border-bottom: 1px solid var(--slate-200);
  border-radius: var(--r-md) var(--r-md) 0 0;
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: 104px;          /* app-header + hizli gecis cubugu altina yapisir */
  z-index: 30;
}
.tab-panel .section-head:hover { background: var(--slate-50); }
.tab-panel .section-head:focus-visible { outline: 2px solid var(--primary-500); outline-offset: -2px; }
.tab-panel.is-collapsed .section-head {
  margin-bottom: 0;
  border-bottom: none;
  border-radius: var(--r-md);
}
.tab-panel .section-head .sec-num {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary-700);
  color: white;
  font-size: var(--fs-sm);
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.tab-panel .section-head .sec-titles { flex: 1; min-width: 0; }
.tab-panel .section-head h3 {
  color: var(--primary-700);
  margin: 0;
  font-size: var(--fs-lg);
}
.tab-panel .section-head .panel-desc {
  color: var(--slate-500);
  font-size: var(--fs-sm);
  margin: 2px 0 0;
}
.tab-panel .section-head .sec-caret {
  flex: none;
  color: var(--accent-600);
  font-size: 12px;
  transition: transform .2s ease;
}
.tab-panel.is-collapsed .section-head .sec-caret { transform: rotate(-90deg); }
@media (max-width: 768px) {
  .section-head { position: static; }
  .section-head .panel-desc { display: none; }
}
/* Grup basligi — Excel'deki birlestirilmis bolum satiri karsiligi */
.tab-panel .group-title {
  display: block;
  color: var(--accent-700);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-xs);
  font-weight: 700;
  margin: var(--sp-5) 0 0;
  padding: 7px var(--sp-3);
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-left: 3px solid var(--accent-500);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.tab-panel .group-title:first-of-type { margin-top: 0; }

/* Hesap ozeti tablosu — Bolum 4 */
.cost-summary { background: white; }
.cost-summary td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--slate-100); }
.cost-summary tr:last-child td { border-bottom: none; }
.cost-summary tr.subtle td { color: var(--slate-500); font-size: var(--fs-sm); }
.cost-summary tr.total td {
  border-top: 2px solid var(--primary-700);
  background: var(--primary-50);
  font-size: var(--fs-md);
  color: var(--primary-700);
  font-weight: 700;
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}

/* =========================================================
   EXCEL BENZERI SATIR DUZENI
   Solda etiket, sagda giris — her satirda TEK alan.
   (Excel ESTIMATING sayfasi: A sutunu etiket, B sutunu deger)
   ========================================================= */
.tab-panel {
  --fld-label-w: 280px;   /* etiket sutunu — en uzun etiket 32 karakter */
  --fld-value-w: 400px;   /* deger sutunu — Excel B sutunu karsiligi */
}

/* field-row artik yatay izgara DEGIL; her alan kendi satirinda */
.tab-panel .field-row {
  display: block;
}

.tab-panel .field {
  display: grid;
  grid-template-columns: var(--fld-label-w) minmax(0, var(--fld-value-w)) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--sp-4);
  row-gap: 2px;
  margin: 0;
  max-width: none;
  padding: 5px var(--sp-2);
  border-bottom: 1px solid var(--slate-100);
  transition: background var(--transition);
}
.tab-panel .field:hover { background: var(--slate-25); }

.tab-panel .field > .field-label {
  grid-column: 1;
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--slate-700);
  line-height: 1.35;
}
/* etiket disindaki her cocuk deger sutununa */
.tab-panel .field > *:not(.field-label) { grid-column: 2; }
.tab-panel .field > .field-helper {
  grid-column: 2 / -1;
  margin: 0 0 2px;
}
/* uzun metin alanlari deger sutunundan tasabilir */
.tab-panel .field > textarea { grid-column: 2 / -1; max-width: 760px; }
/* Oneri paneli (Proje Adi, Musteri, Geometri) sonraki bolumun yapiskan basliginin (30) ustunde,
   hizli gecis cubugunun (50) altinda kalir; yoksa Geometri'nin son onerileri basligin altina girer. */
.tab-panel .autocomplete .panel { z-index: 40; }

/* Dar sutunda (grid-2 icinde: maliyet girdileri / EBIT) etiket sutunu daralir */
.tab-panel .grid-2 .field {
  grid-template-columns: 190px minmax(0, 1fr);
}

@media (max-width: 900px) {
  .tab-panel .field {
    grid-template-columns: 1fr;
    row-gap: 4px;
    padding: var(--sp-2) var(--sp-2) var(--sp-3);
  }
  .tab-panel .field > *:not(.field-label),
  .tab-panel .field > .field-helper,
  .tab-panel .field > textarea { grid-column: 1; max-width: none; }
}

/* Section nudge */
.tab-panel .info-card {
  background: var(--info-50);
  border-left: 3px solid var(--info-500);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--info-700);
}

/* Toast govdesi: shared/styles.css yalnizca .toast kabugunu (.icon/.body/.x) tanimliyor,
   sayfalar toast-body/toast-title/toast-msg basiyordu -> govde stilsiz kaliyordu. */
.toast-body { flex: 1; font-size: var(--fs-sm); }
.toast-title { display: block; color: var(--slate-900); font-weight: 600; margin-bottom: 2px; }
.toast-msg { color: var(--slate-600); line-height: 1.45; }
/* ===== YENİ EXCEL DÜZENİ (10.09.2026) ===== */
.field-row.tek-kolon { grid-template-columns: 1fr; }
.para-alan { display:flex; align-items:stretch; }
.para-alan .para-sim {
  display:flex; align-items:center; padding:0 10px; font-size:var(--fs-sm); font-weight:600;
  color:var(--slate-500); background:var(--slate-50);
  border:1px solid var(--slate-300); border-right:0;
  border-radius:var(--r-sm) 0 0 var(--r-sm);
}
.para-alan .para-sim.son { border:1px solid var(--slate-300); border-left:0; border-radius:0 var(--r-sm) var(--r-sm) 0; }
/* Kose yuvarlama simgenin YERINE gore: onunde € varsa saga, ardinda %/birim varsa
   sola yuvarlanir. Simgesiz sayi alanlari formun geri kalaniyla ayni koseyi korur. */
.para-alan .para-sim + .input { border-radius:0 var(--r-sm) var(--r-sm) 0; }
.para-alan .input.para-sol { border-radius:var(--r-sm) 0 0 var(--r-sm); }

/* Izgara kolonu varsayilan olarak icerigin min-content genisligi kadar SISER;
   Bolum 4'te .table min-width'i kolonu buyutup .app-main{overflow-x:hidden}
   altinda kirpiyordu. min-width:0 kolonu 1fr'de tutar, tasan tablo kendi
   .table-wrap kabinda kaydirilir. */
.tab-panel .grid-2 > div { min-width: 0; }

.sec-toplam { margin-left:auto; font-size:var(--fs-sm); color:var(--slate-600); white-space:nowrap; }
.sec-toplam strong { font-family:var(--ff-mono); color:var(--primary-700); }

.malz-akordeon { display:flex; flex-direction:column; gap:6px; }
.malz-grup { border:1px solid var(--slate-200); border-radius:var(--r-md); overflow:hidden; background:var(--white); }
.malz-bas {
  display:flex; align-items:center; gap:10px; padding:9px 12px; cursor:pointer;
  background:var(--slate-25); border-bottom:1px solid transparent;
}
.malz-bas:hover { background:var(--slate-50); }
.malz-grup.acik .malz-bas { border-bottom-color:var(--slate-200); }
.malz-ok { color:var(--slate-400); font-size:11px; transition:transform .15s; }
.malz-grup.acik .malz-ok { transform:rotate(90deg); }
.malz-ad { font-weight:600; font-size:var(--fs-sm); color:var(--slate-800); }
.malz-say { font-size:var(--fs-xs); color:var(--slate-400); }
.malz-tutar { margin-left:auto; font-size:var(--fs-sm); font-weight:600; color:var(--primary-700); }
/* Onayli 19: maliyeti girilmemis grubun tutari soluk; tutar girilince lacivert (app-quote.js). */
.malz-tutar.bos { color:var(--slate-300); }
.malz-govde { display:none; padding:12px; }
.malz-grup.acik .malz-govde { display:block; }

.malz-toplam-bant {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:var(--sp-4); padding:12px 16px; border-radius:var(--r-md);
  background:var(--primary-700); color:var(--white);
}
.malz-toplam-bant .etiket { font-size:var(--fs-sm); font-weight:600; letter-spacing:.02em; }
.malz-toplam-bant .deger { font-size:18px; font-weight:700; color:var(--accent-300); }

.oz-pct { font-family:var(--ff-mono); font-size:var(--fs-xs); color:var(--slate-400); margin-left:4px; }
.hesap-not {
  margin-top:var(--sp-3); padding:9px 12px; border-left:3px solid var(--warning-500);
  background:var(--warning-100); border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--fs-xs); color:var(--slate-700);
}
.dogrulama { list-style:none; margin:0 0 var(--sp-4); padding:0; display:flex; flex-direction:column; gap:5px; }
.dogrulama li { display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--slate-700); }
.dogrulama li .ik { width:18px; text-align:center; }
.dogrulama li.ok .ik { color:var(--success-500); }
.dogrulama li.uyari .ik { color:var(--warning-500); }
.dogrulama li.hata .ik { color:var(--danger-600); }

.ozet-dl { display:grid; grid-template-columns:220px 1fr; gap:6px 16px; margin:0 0 var(--sp-4); font-size:var(--fs-sm); }
.ozet-dl dt { color:var(--slate-500); }
.ozet-dl dd { margin:0; color:var(--slate-800); font-weight:500; }
.ozet-dl dd.strong { font-weight:700; color:var(--primary-700); font-size:15px; }

.kaydet-bant { display:flex; gap:var(--sp-3); align-items:center; justify-content:flex-end;
  padding-top:var(--sp-4); border-top:1px solid var(--slate-200); }
.btn-hold { display:inline-flex; }

/* ===== 22.09.2026 KARARLARI ===== */
/* S14 · teklif numarasi sistem tarafindan atanir, degistirilemez */
.tab-panel .input[readonly] { background:var(--slate-50); color:var(--slate-600); cursor:default; }
.tab-panel .input[readonly]:focus { border-color:var(--slate-300); box-shadow:none; }
/* S8 · musteri yalniz kayitli musterilerden */
.field-helper.hata-not { color:var(--danger-700); font-weight:500; }
/* S12 · otomatik taslak gostergesi: degisiklik bekliyorsa sari nokta */
.page-toolbar .autosave.kirli { color:var(--warning-800); }
.page-toolbar .autosave.kirli::before { color:var(--warning-500); }
/* S3 + S4 · gonderilmis teklif kaydinda versiyon sorusu */
.surum-secim { display:flex; flex-direction:column; gap:var(--sp-2); }
.surum-sec {
  display:flex; align-items:flex-start; gap:var(--sp-3); padding:10px 12px; cursor:pointer;
  border:1px solid var(--slate-200); border-radius:var(--r-md); transition:var(--transition);
  font-size:var(--fs-sm); color:var(--slate-800);
}
.surum-sec:hover { border-color:var(--primary-500); background:var(--slate-25); }
.surum-sec:has(input:checked) { border-color:var(--primary-700); background:var(--primary-50); }
.surum-sec > input { flex:none; margin-top:3px; }
.surum-sec .alt { display:block; margin-top:2px; font-size:var(--fs-xs); color:var(--slate-500); }

/* ===== MOD KOPRÜSÜ · mod göstergesi + devralma şeridi =====
   19b (hızlı teklif) sayfasıyla aynı kalıp: üst bantta küçük bir "Mod:" rozeti,
   sayfanın başında ise devralma şeridi (19b’deki .cmp-context’in karşılığı). */
.mod-gostergesi {
  display:inline-flex; align-items:center; gap:4px; padding:1px 8px;
  border:1px solid var(--accent-300); border-radius:999px;
  background:var(--accent-50); color:var(--accent-800);
  font-size:var(--fs-xs); font-weight:600; white-space:nowrap;
}
.mod-gostergesi .mg-ik { color:var(--accent-600); }

.mod-context {
  padding:7px var(--sp-4); margin-bottom:var(--sp-3);
  background:var(--accent-50);
  border:1px solid var(--slate-200); border-left:3px solid var(--accent-300);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--fs-sm); color:var(--slate-700);
}
/* Devralma yokken şerit boştur: dolgu/kenarlık çizmesin diye tamamen kalkar. */
.mod-context:empty { display:none; }
.mod-context .cc-ic { margin-right:4px; color:var(--accent-600); font-weight:700; }
/* JS devralmada 'is-on' bırakır — şerit dolu haliyle daha belirgin bir kenar alır. */
.mod-context.is-on { border-left-color:var(--accent-600); }
.mod-context .mod-warn { color:var(--warning-800); font-weight:600; margin-left:var(--sp-2); }
/* Teklif İçe Aktar raporu (E7.3): pencere kapandıktan sonra da şeritte kalır — editörde bu şerit,
   Hızlı Teklif'te bağlam şeridi. Elle tamamlanacak alanlar satır satır: alan · değer — neden. */
.cmp-context .mod-warn { color:var(--warning-800); font-weight:600; margin-left:var(--sp-2); }
.mod-context .ice-rapor,
.cmp-context .ice-rapor {
  margin:4px 0 0; padding-left:var(--sp-5);
  font-size:var(--fs-xs); line-height:1.55; color:var(--warning-800);
}
.mod-context .ice-rapor strong,
.cmp-context .ice-rapor strong { font-weight:600; }
/* Hızlı Teklif'te şerit matrisin üstündeki banttır: uzun rapor matrisi itmez, kendi içinde kayar. */
.cmp-context .ice-rapor { max-height:6.4em; overflow-y:auto; }

/* Editör açılışında kaydedilmemiş taslak sorusu: metin solda, Geri yükle / Yok say sağda. */
.taslak-kurtar { align-items:center; flex-wrap:wrap; margin-bottom:var(--sp-3); }
.taslak-kurtar .body { flex:1 1 280px; }
.taslak-kurtar .tk-actions { display:flex; gap:var(--sp-2); flex-shrink:0; }
/* Hızlı Teklif'te aynı soru ekranın bantlarından biridir: köşesiz ve boşluksuz, kendi boyunda kalır;
   matris kalan alanı alır, araç çubuğu ve alt bant yerinden oynamaz. */
.compare-page > .taslak-kurtar {
  flex:0 0 auto; margin:0; border-radius:0; border-bottom:1px solid var(--slate-200);
  padding:7px var(--sp-4); font-size:var(--fs-sm);
}
/* Soru ekranındır; kâğıda basılmaz. */
@media print { .taslak-kurtar { display:none !important; } }

/* ===== ARAÇ ÇUBUĞU · içe aktarma (M6 + M7) ===== */
.arac-cubugu {
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2);
  padding:10px var(--sp-4); margin-bottom:var(--sp-4);
  background:var(--white); border:1px solid var(--slate-200);
  border-radius:var(--r-md); box-shadow:var(--sh-sm);
}
.arac-cubugu .ac-etiket { font-size:var(--fs-sm); font-weight:600; color:var(--slate-700); }
.arac-cubugu .ac-ipucu { flex:1 1 260px; font-size:var(--fs-xs); color:var(--slate-500); }
.arac-cubugu .ac-temizle { margin-left:auto; }
/* Hizli gecis cubugu sarildiginda eylem butonlari kendi satirinda saga yaslansin.
   Cubuk artik 4 eylem tasiyor (Tumunu Kapat / Karsilastir / Mod / Kaydet); dar
   ekranda butonlar kirpilmasin diye sarma her genislikte aciktir. */
.tabs-bar .bar-actions { margin-left:auto; flex-wrap:wrap; }
.tabs-bar .bar-actions .btn { white-space:nowrap; }

/* ===== İÇE AKTARMA DİYALOGLARI ===== */
.modal-aciklama { margin:0 0 var(--sp-3); font-size:var(--fs-sm); color:var(--slate-600); }
/* Onayli 19'un sayfa ici kurali: pencere basligindaki ve dosya satirindaki kapat dugmeleri 28 px,
   kenarliksiz ve gri (ortak .icon-btn 36 px); Hizli Teklif'teki kuralin esi. */
html:has(.tabs-bar.scroll-tabs) .modal-overlay .icon-btn {
  width:28px; height:28px; border:0; border-radius:var(--r-sm);
  color:var(--slate-500); font-size:16px; cursor:pointer;
}
html:has(.tabs-bar.scroll-tabs) .modal-overlay .icon-btn:hover { background:var(--slate-100); color:var(--slate-700); }
.dosya-birak {
  display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  padding:var(--sp-6) var(--sp-4); cursor:pointer;
  border:2px dashed var(--slate-300); border-radius:var(--r-md);
  background:var(--slate-25); color:var(--slate-600); transition:var(--transition);
}
.dosya-birak:hover { border-color:var(--primary-500); background:var(--primary-50); }
.dosya-birak:focus-visible { outline:2px solid var(--primary-500); outline-offset:2px; }
.dosya-birak.uzerinde { border-color:var(--primary-700); background:var(--primary-50); }
.dosya-birak .ikon { font-size:26px; line-height:1; }
.dosya-birak strong { color:var(--slate-800); font-size:var(--fs-md); }
.dosya-birak .alt { font-size:var(--fs-xs); color:var(--slate-500); }

.dosya-bilgi {
  display:flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-3);
  padding:7px 10px; border:1px solid var(--success-500); border-radius:var(--r-sm);
  background:var(--success-50); font-size:var(--fs-sm); color:var(--slate-800);
}
.dosya-bilgi[hidden] { display:none; }
.dosya-bilgi .ikon { flex:none; }
.dosya-bilgi .ad { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.uyari-bant {
  margin-top:var(--sp-3); padding:9px 12px; border-left:3px solid var(--info-500);
  background:var(--info-50); border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--fs-xs); color:var(--info-700);
}

.eski-liste { display:flex; flex-direction:column; gap:var(--sp-2); }
.eski-teklif {
  display:flex; align-items:flex-start; gap:var(--sp-3); padding:10px 12px; cursor:pointer;
  border:1px solid var(--slate-200); border-radius:var(--r-md); transition:var(--transition);
}
.eski-teklif:hover { border-color:var(--primary-500); background:var(--slate-25); }
.eski-teklif.secili { border-color:var(--primary-700); background:var(--primary-50); }
.eski-teklif > input { flex:none; margin-top:4px; }
.eski-teklif .et-govde { flex:1; min-width:0; }
.eski-teklif .et-ust { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.eski-teklif .et-no { font-family:var(--ff-mono); font-weight:600; color:var(--primary-700); }
.eski-teklif .et-proje { font-weight:600; font-size:var(--fs-sm); color:var(--slate-800); }
.eski-teklif .et-tutar {
  margin-left:auto; font-family:var(--ff-mono); font-weight:700;
  color:var(--slate-800); white-space:nowrap;
}
.eski-teklif .et-alt { display:block; margin-top:3px; font-size:var(--fs-xs); color:var(--slate-500); }

/* Eski teklif penceresinde canlı arama (19b'deki .compare-search kutusunun bu
   pencereye uyarlanmış hali; süzme normalizasyonu da aynı — teklif_js · araNrm). */
.eski-ara { display:flex; flex-direction:column; gap:4px; margin-bottom:var(--sp-3); }
.eski-ara-etiket { font-size:var(--fs-xs); font-weight:600; color:var(--slate-600); }
.eski-ara-kutu { position:relative; }
.eski-ara-kutu .ik {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  font-size:14px; color:var(--slate-500); pointer-events:none;
}
.eski-ara-kutu .input { width:100%; padding-left:32px; padding-right:32px; }
/* type="search" alaninda WebKit kendi ✕ dugmesini basiyor; kutuda zaten
   #eskiAraTemizle var, ikisi sag kenarda ust uste biniyordu. */
.eski-ara-kutu .input::-webkit-search-cancel-button,
.eski-ara-kutu .input::-webkit-search-decoration {
  -webkit-appearance:none; appearance:none;
}
.eski-ara-sil {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  display:none; padding:4px; border:0; background:transparent;
  color:var(--slate-400); font-size:14px; line-height:1; cursor:pointer;
}
.eski-ara-sil.is-visible { display:block; }
.eski-ara-sil:hover { color:var(--slate-700); }
.eski-ara-sayac { font-size:var(--fs-xs); color:var(--slate-500); }
.eski-bos { padding:var(--sp-4); text-align:center; font-size:var(--fs-sm); color:var(--slate-500); }

/* ===== YAPIŞKAN ÜST BOŞLUK =====
   Hizli gecis cubugu dar ekranda sarildikca yukselir; bolum basliginin yapiskan
   ofseti sabit kalirsa cubugun altina giriyordu. Deger JS'te olculup buraya yazilir
   (teklif_js · yapiskanAyarla), asagidaki 116px yalnizca ilk boyamanin degeri. */
:root { --yapiskan-ust: 116px; }
.tab-panel { scroll-margin-top: calc(var(--yapiskan-ust) + 8px); }
.tab-panel .section-head { top: var(--yapiskan-ust); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1280px) {
  .tab-panel { --fld-label-w: 240px; --fld-value-w: 360px; }
}
@media (max-width: 1024px) {
  .tab-panel { --fld-label-w: 200px; --fld-value-w: 320px; }
  .tab-panel .grid-2 { grid-template-columns: 1fr; }
  .malz-bas { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .ozet-dl { grid-template-columns:1fr; gap:2px 0; }
  .ozet-dl dt { margin-top:8px; }
  /* .tab-panel .grid-2 .field 190px etiket sutunu tek kolonda da uygulaniyordu */
  .tab-panel .grid-2 .field { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .tab-panel { padding: 0 var(--sp-4) var(--sp-4); }
  /* Cubuk sarildiginda yapiskan baslik ekranin yarisini yiyor — burada birakilir */
  .tab-panel .section-head {
    position: static;
    margin: 0 calc(-1 * var(--sp-4)) var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
  }
  .sec-toplam { flex-basis: 100%; margin-left: 0; white-space: normal; }
  .malz-toplam-bant { flex-direction: column; align-items: flex-start; gap: 4px; }
  .kaydet-bant { flex-direction: column; align-items: stretch; }
  .kaydet-bant .btn { width: 100%; }
  /* Kabuk .table{min-width:720px} kurali genis VERI tablolari icin; hesap ozeti
     iki kolonluk kucuk bir tablo — kendi alt siniri yeter, daha darinda
     .table-wrap kendi icinde yatay kaydirir. */
  .tab-panel .cost-summary { min-width: 320px; }
  .arac-cubugu { padding: var(--sp-3); }
  .arac-cubugu .btn { flex: 1 1 auto; justify-content: center; }
  .arac-cubugu .ac-temizle { margin-left: 0; }
  .eski-teklif .et-tutar { margin-left: 0; flex-basis: 100%; }
}
/* Onayli 19'un sayfa ici <=768 kurallari kabugun <=420 kuralini eziyordu: telefonda yan bosluk
   16px, hesap kartlarinin tutari 22px. Oteki ekranlar kabugun 12px'inde kalir. */
@media (max-width: 420px) {
  html:has(.tabs-bar.scroll-tabs) .app-main { padding: var(--sp-4); }
  .tab-panel .kpi-card .value { font-size: 22px; }
}

/* ============================================================
   TEKLİF DETAY (20) — onaylı ekranın sayfa içi stili
   ============================================================ */
/* ===== SAYFAYA ÖZEL — Teklif Detay ===== */
.ro-note {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--slate-100); color: var(--slate-600);
  border-radius: 999px; padding: 3px 12px; font-size: var(--fs-xs); font-weight: 600;
}
.sec-card { background: white; border: 1px solid var(--slate-200); border-radius: var(--r-md); margin-bottom: var(--sp-4); }
.sec-card > .sc-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--slate-200);
  background: linear-gradient(180deg, var(--slate-50) 0%, white 100%);
  border-radius: var(--r-md) var(--r-md) 0 0; cursor: pointer; user-select: none;
}
.sec-card > .sc-head .n {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--primary-700); color: white; font-size: var(--fs-xs); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.sec-card > .sc-head h4 { flex: 1; font-size: var(--fs-md); margin: 0; color: var(--primary-700); }
.sec-card > .sc-head .car { color: var(--accent-600); font-size: 12px; transition: transform .2s ease; }
.sec-card.collapsed > .sc-head .car { transform: rotate(-90deg); }
.sec-card.collapsed > .sc-body { display: none; }
.sec-card > .sc-body { padding: var(--sp-4); }
.cost-line { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--slate-100); font-size: var(--fs-sm); }
.cost-line:last-child { border-bottom: 0; }
.cost-line.total { font-weight: 700; color: var(--primary-800); border-top: 2px solid var(--slate-300); margin-top: 6px; padding-top: 10px; }
.cost-line.hot { font-weight: 700; color: var(--success-700); font-size: var(--fs-md); }
.cost-line .v { font-family: var(--font-mono); }
/* Bölüm 1 (9 alan) ve Bölüm 2 (52 alan) tam genişlikte: satır başına iki alan */
.dlist.cols2 { grid-template-columns: 220px minmax(0, 1fr) 220px minmax(0, 1fr); column-gap: var(--sp-5); }
.dlist.cols2 dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 1280px) { .dlist.cols2 { grid-template-columns: 220px minmax(0, 1fr); } }
@media (max-width: 768px)  { .dlist.cols2 { grid-template-columns: 1fr; } }
.sc-body > .group-title:first-child { margin-top: 0; }
/* Kayıt geçmişi, versiyonlar ve denetim izinde zaman tek satır */
.table td.mono { white-space: nowrap; }
.sc-note { font-size: var(--fs-xs); color: var(--slate-500); margin: var(--sp-3) 0 0; line-height: 1.5; }
/* Hesaplama ile Kayıt Geçmişi yan yana (.grid-2). Dar ekranda tablonun en az genişliği ızgara
   sütununu şişirip kartları ekranın dışına itiyordu, tutarlar görünmüyordu (onaylı sayfada da;
   H11.5). Kart sütunda kalır, geniş tablo kendi kabında kayar — editördeki kuralın aynısı.
   Yalnız uygulamanın işaretlediği ızgara: onaylı statik sayfanın çizimi değişmez. */
.grid-2.sc-ikili > .sec-card { min-width: 0; }
.ver-now { font-size: 10px; font-weight: 700; color: var(--success-700); background: var(--success-50); border-radius: 999px; padding: 1px 8px; margin-left: 6px; }

/* Statü değiştir menüsü (S1) — statü rozetinin yanında */
.st-wrap { position: relative; display: inline-flex; }
.st-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px;
  background: white; border: 1px solid var(--slate-300); border-radius: 999px; cursor: pointer;
  font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--primary-700);
}
.st-chip:hover { background: var(--slate-50); border-color: var(--primary-300); }
.st-chip:focus-visible { outline: 2px solid var(--primary-300); outline-offset: 1px; }
.st-chip[aria-expanded="true"] { background: var(--primary-50); border-color: var(--primary-300); }
.st-menu .st-head, .st-menu .st-foot, #stItems { display: block; }
.st-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  width: 300px; max-width: calc(100vw - 32px);
  background: white; border: 1px solid var(--slate-200); border-radius: var(--r-md);
  box-shadow: var(--sh-lg); padding: 6px;
}
.st-menu[hidden] { display: none; }
.st-menu .st-head { font-size: var(--fs-xs); color: var(--slate-500); padding: 6px 8px 8px; border-bottom: 1px solid var(--slate-100); margin-bottom: 4px; }
.st-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; border-radius: var(--r-sm); padding: 7px 8px;
  font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; color: var(--slate-800);
}
.st-item:hover:not(:disabled), .st-item:focus-visible { background: var(--slate-50); outline: none; }
.st-item:focus-visible { box-shadow: inset 0 0 0 2px var(--primary-300); }
.st-item:disabled { cursor: not-allowed; color: var(--slate-400); }
.st-item:disabled .badge { opacity: .45; }
.st-item .badge { min-width: 96px; justify-content: center; }
.st-item .st-why { font-size: 11px; color: var(--slate-400); line-height: 1.3; }
.st-menu .st-foot { font-size: 11px; color: var(--slate-500); padding: 8px 8px 4px; border-top: 1px solid var(--slate-100); margin-top: 4px; line-height: 1.5; }
.btn-hold { display: inline-flex; }

/* ============================================================
   TEKLİFLER (18) — içe aktarılan satır işareti ve eski teklif
   içe aktarma penceresi (onaylı ekranın sayfa içi stili)
   ============================================================ */
/* ---- Marker on an imported quote row ---- */
tr[data-imported] td:first-child { white-space: nowrap; }
.imp-tag {
  display: inline-block; margin-left: 4px; padding: 0 4px;
  border-radius: var(--r-sm); background: var(--accent-100); color: var(--accent-700);
  font-size: 10px; font-weight: 700; line-height: 16px; cursor: help;
}

/* ---- Legacy quote import dialog ---- */
/* Onaylı sayfanın kendi kuralı: penceredeki pasif düğmeler %40 opak (ortak kural %50). */
#impDlg .btn-disabled { opacity: .4; }
.imp-lead { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--slate-600); line-height: 1.6; }
.imp-drop {
  position: relative; text-align: center; cursor: pointer;
  border: 2px dashed var(--slate-300); border-radius: var(--r-md);
  background: var(--slate-25); padding: var(--sp-6) var(--sp-4);
  transition: var(--transition);
}
.imp-drop:hover { border-color: var(--slate-400); }
.imp-drop.is-over { border-color: var(--primary-400); background: var(--primary-50); }
.imp-drop-icon { font-size: 26px; line-height: 1; color: var(--slate-400); margin-bottom: var(--sp-2); }
.imp-drop.is-over .imp-drop-icon { color: var(--primary-500); }
.imp-drop-main { font-size: var(--fs-md); font-weight: 600; color: var(--slate-700); }
.imp-drop-sub { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--slate-500); }
.imp-pick {
  background: none; border: 0; padding: 0 2px; font: inherit; font-weight: 600;
  color: var(--primary-500); text-decoration: underline; cursor: pointer;
}
.imp-pick:hover { color: var(--primary-700); }
.imp-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.imp-listhead {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--slate-700);
}
.imp-cnt {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--slate-100); color: var(--slate-600); font-size: 10px; font-weight: 600;
}
.imp-list { border: 1px solid var(--slate-200); border-radius: var(--r-md); overflow: hidden; }
.imp-empty { padding: var(--sp-5) var(--sp-4); text-align: center; font-size: var(--fs-sm); color: var(--slate-500); }
.imp-row {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3); background: var(--white); border-bottom: 1px solid var(--slate-100);
}
.imp-row:last-child { border-bottom: 0; }
.imp-main { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.imp-name {
  font-size: var(--fs-sm); font-weight: 600; color: var(--slate-800);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.imp-meta { margin-top: 3px; font-size: var(--fs-xs); color: var(--slate-500); }
.imp-meta .sep { color: var(--slate-300); margin: 0 5px; }
.imp-from { color: var(--info-700); font-weight: 600; }
.imp-date { flex: 0 0 190px; display: flex; flex-direction: column; gap: 3px; }
.imp-lbl { font-size: var(--fs-xs); color: var(--slate-500); }
.imp-date .input { height: var(--row-h-sm); font-size: var(--fs-sm); }
.imp-need { margin-top: 2px; padding: 3px var(--sp-2); line-height: 1.4; }
.imp-x { flex: 0 0 auto; }
.imp-row.is-bad { background: var(--danger-50); }
.imp-row.is-bad .imp-name { color: var(--danger-700); }
.imp-reason { color: var(--danger-700); font-weight: 600; }
/* ---- Server report on the row of each file (S10) ---- */
.imp-row.is-done { background: var(--success-50); }
.imp-done { color: var(--success-700); font-weight: 600; }
.imp-done a { color: inherit; text-decoration: underline; }
.imp-when { font-size: var(--fs-sm); color: var(--slate-700); }
.imp-notes { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--warning-800); line-height: 1.55; }
.imp-notes-head { font-weight: 600; }
.imp-notes ul { margin: 2px 0 0; padding-left: var(--sp-4); }
.imp-notes strong { font-weight: 600; }
.imp-result { margin-top: var(--sp-3); }
@media (max-width: 768px) {
  .imp-row { flex-wrap: wrap; }
  .imp-main { flex: 1 1 100%; }
  .imp-date { flex: 1 1 auto; }
  .imp-drop { padding: var(--sp-5) var(--sp-3); }
}

/* ============================================================
   HIZLI TEKLİF (19b) — karşılaştırma matrisi ve pencereleri
   (onaylı ekranın sayfa içi stili buraya taşındı)
   ============================================================ */
/* =====================================================================
   COMPARE MODAL — Geçmiş Teklif Karşılaştırması (full-screen)
   Geçmiş teklifleri yan-yana sütun olarak gösteren tam sayfa matris.
   ===================================================================== */
/* Eksik CSS değişkenlerini bu scope için doldur — sayfa root'unda tanımlı olmayanlar
   var(...) → unset → transparent fallback'e düşüyordu, bu yüzden dropdown ve
   sütun başlıkları saydam görünüyordu. */
.modal-overlay.is-fullscreen,
.compare-modal {
  --white:        #FFFFFF;
  --accent-50:    #FBF3DC;
  --accent-200:   #F2D783;
  --accent-800:   #6B4708;
  --info-100:     #C7D7EA;
  --warning-300:  #F2C654;
  --warning-400:  #DDA82A;
  --warning-800:  #6B4708;
  --success-100:  #D4EFDE;
  --success-300:  #76C795;
  --success-400:  #3FB07B;
  --danger-100:   #FAD9D9;
  --danger-300:   #ED9A9A;
  --danger-600:   #A12020;
  --sh-2xl:       0 16px 48px rgba(14,22,32,0.18), 0 4px 12px rgba(14,22,32,0.08);
  --ff-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.compare-modal {
  /* Flex kolon: bantlar kendi boyunda kalir, kaydirilan govde
     kalan alani doldurur. Konuma bagli grid satir sablonu
     kullanilmiyor: bant sayisi degisebiliyor (bos baglam seridi
     gizlenir) ve sablon o durumda kayip alt bandi kirpiyordu. */
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--slate-300);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2xl);
  overflow: hidden;
}

/* ---------- HEADER ---------- */
.compare-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--slate-200);
  background: linear-gradient(135deg, var(--primary-800) 0%, var(--primary-700) 100%);
  color: var(--white);
}

.compare-head .ch-count {
  font-size: var(--fs-xs);
  color: var(--slate-200);
  background: rgba(255,255,255,.1);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
}
.compare-head .icon-btn {
  color: var(--white);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
}
.compare-head .icon-btn:hover { background: rgba(255,255,255,.2); }
/* Onayli ekranda bu sayfanin ikon dugmeleri 28 px'tir (Yazdir ve pencerelerin kapat dugmesi);
   ortak .icon-btn 36 px. Ust banttaki dugme kenarligini ve yari saydam zeminini korur, pencere
   basligindaki kenarliksiz ve gri kalir. */
body:has(.compare-page) .icon-btn {
  width: 28px; height: 28px; border-radius: var(--r-sm); font-size: 16px; cursor: pointer;
}
body:has(.compare-page) .modal-overlay .icon-btn { border: 0; color: var(--slate-500); }
body:has(.compare-page) .modal-overlay .icon-btn:hover { color: var(--slate-700); }

/* ---------- SEARCH/FILTER BAND ---------- */
.compare-search {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--slate-200);
  background: var(--slate-25);
  position: relative;
  z-index: 10;  /* dropdown'ın containing context'i — matrix-wrap'in sticky çocuklarının üstünde */
}
.compare-search-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
}
.compare-search .search-input {
  flex: 1;
  min-width: 280px;
  position: relative;
}
.compare-search .search-input .icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--slate-500);
  pointer-events: none;
  font-size: 14px;
}
.compare-search .search-input .input {
  width: 100%;
  padding: 8px 32px 8px 32px;
  border: 1px solid var(--slate-300);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  background: var(--white);
  height: 36px;
}
.compare-search .search-input .input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
}
.compare-search .search-input .clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--slate-400);
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  display: none;
}
.compare-search .search-input .clear-btn.is-visible { display: block; }
.compare-search .search-input .clear-btn:hover { color: var(--slate-700); }

.compare-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: var(--sp-2);
  align-items: center;
}
.cmp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--slate-300);
  background: var(--white);
  border-radius: 999px;
  font-size: 12px;
  color: var(--slate-700);
  cursor: pointer;
  transition: all .15s ease;
  font-family: inherit;
}
.cmp-chip:hover {
  border-color: var(--primary-400);
  background: var(--primary-50);
  color: var(--primary-700);
}
.cmp-chip.is-active {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: var(--white);
}
.cmp-chip.is-active:hover {
  background: var(--primary-700);
}

/* ---------- SEARCH RESULTS DROPDOWN ---------- */
.compare-results {
  position: absolute;
  left: var(--sp-4);
  right: var(--sp-4);
  top: calc(100% + 4px);
  background: var(--white);
  border: 1px solid var(--slate-300);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-lg);
  max-height: 280px;
  overflow-y: auto;
  z-index: 20;
  display: none;
}
.compare-results.is-open { display: block; }
.cmp-result {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: var(--sp-3);
  align-items: center;
  padding: 10px var(--sp-3);
  border-bottom: 1px solid var(--slate-100);
  cursor: pointer;
  transition: background .12s ease;
}
.cmp-result:last-child { border-bottom: 0; }
.cmp-result:hover { background: var(--slate-50); }
.cmp-result.is-added {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--slate-25);
}
.cmp-result .r-no {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--primary-700);
  font-weight: 600;
  background: var(--primary-50);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.cmp-result .r-main { min-width: 0; }
.cmp-result .r-main .r-proj {
  font-size: var(--fs-sm);
  color: var(--slate-900);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmp-result .r-main .r-sub {
  font-size: 11px;
  color: var(--slate-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  gap: 6px;
  align-items: center;
}
.cmp-result .r-main .r-sub .mono { font-family: var(--ff-mono); color: var(--slate-600); }
.cmp-result .r-date {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--slate-500);
  white-space: nowrap;
}
.cmp-result .r-status {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Taslak: sütun başlığındaki hapın tonu. Panel koyu üst bandın içinde olduğundan renksiz hap
   bandın beyaz yazısını alıyor, beyaz zeminde görünmüyordu. */
.cmp-result .r-status.s-draft  { background: var(--slate-200); color: var(--slate-700); }
.cmp-result .r-status.s-won    { background: var(--success-100); color: var(--success-700); }
.cmp-result .r-status.s-lost   { background: var(--danger-100);  color: var(--danger-700); }
.cmp-result .r-status.s-sent   { background: var(--info-100);    color: var(--info-700); }
.cmp-result .r-status.s-archived { background: var(--slate-200); color: var(--slate-700); }
.cmp-result .r-status.s-inprogress { background: var(--warning-100); color: var(--warning-800); }
.cmp-result .r-status.s-cancelled  { background: var(--slate-100);   color: var(--slate-600); }
.cmp-result .r-add {
  font-size: 11px;
  color: var(--primary-600);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.cmp-result.is-added .r-add { color: var(--slate-400); }
.cmp-result.is-added .r-add::before { content: "✓ "; }
.cmp-noresult {
  padding: var(--sp-4);
  text-align: center;
  color: var(--slate-500);
  font-size: var(--fs-sm);
}

/* ---------- MATRIX AREA ---------- */
.compare-matrix-wrap {
  overflow: auto;
  background: var(--slate-25);
  position: relative;
  z-index: 0;
  min-height: 0;     /* grid 1fr çocuk olduğu için flex/grid overflow shrink sorunu çözer */
  /* Firefox için belirgin scrollbar */
  scrollbar-width: auto;
  scrollbar-color: var(--primary-500) var(--slate-100);
}
/* Webkit (Chrome/Edge/Safari) için belirgin scrollbar — yatay kaydırmanın görünür olması için */
.compare-matrix-wrap::-webkit-scrollbar {
  height: 14px;
  width: 12px;
}
.compare-matrix-wrap::-webkit-scrollbar-track {
  background: var(--slate-50);
  border-top: 1px solid var(--slate-200);
  border-left: 1px solid var(--slate-200);
}
.compare-matrix-wrap::-webkit-scrollbar-thumb {
  background: var(--primary-400);
  border-radius: 7px;
  border: 2px solid var(--slate-50);
  min-width: 60px;
  min-height: 60px;
}
.compare-matrix-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--primary-600);
}
.compare-matrix-wrap::-webkit-scrollbar-corner {
  background: var(--slate-100);
}
.compare-matrix {
  display: grid;
  /* template-columns set inline-style by JS based on column count */
  font-size: 12.5px;
  min-width: 100%;
}
.cm-cell {
  padding: 6px 10px;
  border-right: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-100);
  background: var(--white);
  display: flex;
  align-items: center;
  min-height: 32px;
  line-height: 1.3;
  word-break: break-word;
  position: relative;
  z-index: 0;        /* sticky cm-colhead/cm-label'in altında kalsın (Chrome grid+sticky paint-order bug fix) */
}
.cm-cell:last-child { border-right: 0; }

/* ---------- GROUP HEADER ROW (full-width) ---------- */
/* NOT sticky — kolon başlığı (cm-colhead) ile çakışmasın diye normal akışta. */
.cm-group {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--primary-700);
  color: var(--white);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--primary-800);
  border-top: 1px solid var(--primary-900);
}
.cm-group .cm-chevron {
  display: inline-block;
  transition: transform .2s ease;
  font-size: 9px;
  color: var(--accent-300);
}
.cm-group.is-collapsed .cm-chevron { transform: rotate(-90deg); }
.cm-group .cm-group-count {
  margin-left: auto;
  font-size: 10px;
  color: var(--accent-200);
  background: rgba(255,255,255,.1);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}

/* ---------- COLUMN HEADER ROW ---------- */
.cm-colhead {
  position: sticky;
  top: 0;
  z-index: 6;
  background-color: var(--slate-100) !important;
  border-bottom: 2px solid var(--slate-300);
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 72px;     /* kompakt: alttaki satırları açılışta kapatmasın */
  box-sizing: border-box;
  overflow: hidden;     /* iç içerik taşıp altındaki satırlara basmasın */
}
.cm-colhead .ch-no {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--primary-700);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cm-colhead .ch-rm {
  background: transparent;
  border: 0;
  color: var(--slate-400);
  cursor: pointer;
  padding: 2px 4px;
  font-size: 12px;
  border-radius: var(--r-sm);
}
.cm-colhead .ch-rm:hover { background: var(--danger-50); color: var(--danger-600); }
.cm-colhead .ch-status {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cm-colhead .ch-status.s-draft    { background: var(--slate-200); color: var(--slate-700); }
.cm-colhead .ch-status.s-won      { background: var(--success-100); color: var(--success-700); }
.cm-colhead .ch-status.s-lost     { background: var(--danger-100);  color: var(--danger-700); }
.cm-colhead .ch-status.s-sent     { background: var(--info-100);    color: var(--info-700); }
.cm-colhead .ch-status.s-archived { background: var(--slate-200); color: var(--slate-700); }
.cm-colhead .ch-status.s-inprogress { background: var(--warning-100); color: var(--warning-800); }
.cm-colhead .ch-status.s-cancelled  { background: var(--slate-100);   color: var(--slate-600); }

/* ---------- LABEL COL (sticky left) ---------- */
.cm-label {
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--slate-50);
  border-right: 2px solid var(--slate-300);
  font-weight: 500;
  color: var(--slate-700);
  font-size: 12px;
  padding: 6px 12px;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---------- FOOTER ---------- */
.compare-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--slate-200);
  background: var(--slate-25);
}
.compare-foot .cf-info {
  flex: 1;
  font-size: 11px;
  color: var(--slate-500);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.compare-foot .cf-legend {
  display: flex;
  align-items: center;
  gap: 8px;
}
.compare-foot .cf-legend .swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 4px;
}
.compare-foot .cf-legend .sw-current { background: var(--accent-500); }
.compare-foot .cf-legend .sw-same    { background: var(--success-400); }
.compare-foot .cf-legend .sw-diff    { background: var(--warning-400); }


/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  .compare-search .search-input { min-width: 100%; }
  .compare-foot { flex-wrap: wrap; gap: var(--sp-2); }
  .compare-foot .cf-info { flex: 1 0 100%; order: 3; }
}


/* =====================================================================
   KARSILASTIRMA SAYFASI — modal degil, tam sayfa
   Eksik CSS degiskenleri modal scope'undan :root'a tasindi.
   ===================================================================== */
:root {
  --white:        #FFFFFF;
  --accent-50:    #FBF3DC;
  --accent-200:   #F2D783;
  --accent-800:   #6B4708;
  --info-100:     #C7D7EA;
  --warning-300:  #F2C654;
  --warning-400:  #DDA82A;
  --warning-800:  #6B4708;
  --success-100:  #D4EFDE;
  --success-300:  #76C795;
  --success-400:  #3FB07B;
  --danger-100:   #FAD9D9;
  --danger-300:   #ED9A9A;
  --danger-600:   #A12020;
  --sh-2xl:       0 16px 48px rgba(14,22,32,0.18), 0 4px 12px rgba(14,22,32,0.08);
  --ff-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* SABIT KOLON ENI — tek yerden ayarlanir */
  --cmp-label-w: 300px;
  --cmp-col-w:   240px;
}

/* ---------- Sidebar ikon seridi (matrise yatay alan kazandirir) ---------- */
.app.is-rail { grid-template-columns: 64px 1fr; }
.app.is-rail .nav-label,
.app.is-rail .nav-badge,
.app.is-rail .brand-name,
.app.is-rail .sidebar-foot-meta,
.app.is-rail .nav-item.nav-sub:not(.active) { display: none; }
.app.is-rail .nav-item.nav-sub.active { justify-content: center; font-size: 0; }
.app.is-rail .nav-item.nav-sub.active::before { content: "⇄"; font-size: 14px; }
.app.is-rail .nav-item > span:not(.nav-icon) { display: none; }
.app.is-rail .logout-btn > span:not(.icon) { display: none; }
.app.is-rail .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
.app.is-rail .brand { justify-content: center; padding: 0; }
/* Dar (ray) modda 64px'e logo yazisi sigmaz: marka blogu gizlenir.
   Logo kirpilarak kullanilmaz (kurumsal kilavuz elimizde yok). */
.app.is-rail .brand { display: none; }
.app.is-rail .logout-btn { justify-content: center; }

/* Ayni ikon seridi, ust banttaki menu dugmesiyle secildiginde (html.menu-dar).
   Telefonda menu kayan paneldir; orada dar kurallar uygulanmaz, panel tam acilir. */
@media (min-width: 769px) {
  .menu-dar .app { grid-template-columns: 64px 1fr; }
  .menu-dar .app .nav-label,
  .menu-dar .app .nav-badge,
  .menu-dar .app .brand,
  .menu-dar .app .sidebar-foot-meta,
  .menu-dar .app .nav-item.nav-sub:not(.active) { display: none; }
  .menu-dar .app .nav-item.nav-sub.active { justify-content: center; font-size: 0; }
  .menu-dar .app .nav-item.nav-sub.active::before { content: "⇄"; font-size: 14px; }
  .menu-dar .app .nav-item > span:not(.nav-icon) { display: none; }
  .menu-dar .app .logout-btn > span:not(.icon) { display: none; }
  .menu-dar .app .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
  .menu-dar .app .logout-btn { justify-content: center; }
}

/* Baslik bandindaki metinli buton (.icon-btn 36px sabit — metin sigmaz) */
.compare-head .ch-btn {
  width: auto;
  height: 32px;
  padding: 0 var(--sp-3);
  color: var(--white);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: var(--transition);
}
.compare-head .ch-btn:hover { background: rgba(255,255,255,.22); }

/* ---------- Tam sayfa yerlesimi: matris viewport'un kalanini kaplar ---------- */
.app-main.is-compare {
  height: calc(100vh - 56px);
  height: calc(100dvh - 56px);
  overflow: hidden;
  padding: 0;
}
.compare-modal.compare-page {
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* Dikey bantlar: ust bant (arama + aksiyonlar) · baglam ·
     filtre seridi · MATRIS (kalan alan) · alt bant. */
}
/* Sabit kolon eni: izgara tam olarak sutunlar kadar genis, fazlasi zemin */
.compare-matrix { width: max-content; min-width: 0; }

/* Baglam seridi */
.cmp-context {
  padding: 7px var(--sp-4);
  background: var(--accent-50);
  border-bottom: 1px solid var(--slate-200);
  font-size: var(--fs-sm);
  color: var(--slate-700);
}


/* ---------- Duzeltmeler (analizde tespit edilen gorsel hatalar) ---------- */
/* 1. Cift buyutec: global .search-input::before '🔍' + markup '🔎' ust uste biniyordu */
.compare-search .search-input::before { content: none; }
/* 2. Legend kareleri global .swatch'in padding/margin'ini miras aliyordu */
.compare-foot .cf-legend .swatch { padding: 0; margin-bottom: 0; }

/* ---------- Yazdirma: A4 YATAY + sayfaya sigdir ---------- */
/* Yatay A4 kâğıdı adıyla tanımlıdır ve yalnız Hızlı Teklif'e verilir (@page hizli-yatay). Kabuk
   (menü, üst bant) hiçbir ekranda basılmaz: ortak baskı kuralı, uygulama kabuğunun yanında. */
@media print {
  /* ekrana ait etkilesim ogeleri cikar */
  .compare-search, .compare-foot, .cmp-context,
  .compare-head .icon-btn, .compare-head .ch-btn,
  .cm-colhead .ch-rm { display: none !important; }

  /* yukseklik kilitlerini coz — tum satirlar bassin */
  .app-main.is-compare { height: auto !important; overflow: visible !important; padding: 0; }
  .compare-modal.compare-page {
    display: block !important;
    height: auto !important;
  }
  .compare-matrix-wrap {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }
  .compare-matrix { width: max-content; }

  /* sticky ogeler yazdirmada kaymasin */
  .cm-colhead, .cm-label, .compare-matrix-wrap { position: static !important; }
  .cm-colhead { break-inside: avoid; }
  .cm-group   { break-inside: avoid; break-after: avoid; }

  .compare-head {
    background: var(--primary-700) !important;
    border-radius: 0;
  }
  /* zemin renkleri (yesil=ayni / sari=farkli) yazdirmada korunsun — yalniz Hizli Teklif'te */
  html:has(.compare-page) *, html:has(.compare-page) *::before, html:has(.compare-page) *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

@media (max-width: 900px) {
  .app.is-rail { grid-template-columns: 1fr; }
  .app-main.is-compare { height: auto; overflow: visible; }
  .compare-modal.compare-page { height: auto; }
  .compare-matrix-wrap { max-height: 70vh; }
}

/* Toast govdesi: shared/styles.css yalnizca .toast kabugunu (.icon/.body/.x) tanimliyor,
   sayfalar toast-body/toast-title/toast-msg basiyordu -> govde stilsiz kaliyordu. */
.toast-body { flex: 1; font-size: var(--fs-sm); }
.toast-title { display: block; color: var(--slate-900); font-weight: 600; margin-bottom: 2px; }
.toast-msg { color: var(--slate-600); line-height: 1.45; }

/* ===== HIZLI TEKLİF OLUŞTURMA (10.09.2026) ===== */
/* Sayfaya ozgu renk jetonlari: shared/styles.css'te karsiligi yok. Sabit hex
   kullanmamak icin tek yerde tanimlanir — yeni teklif kolonunun altin zemini. */
:root {
  --nk-head-bg: #FAEED1;   /* yeni teklif kolon basligi */
  --nk-cell-bg: #FFFDF6;   /* yeni teklif giris hucresi */
  --nk-calc-bg: #FDF6E3;   /* yeni teklif hesap hucresi */
  --nk-fg:      #10243C;   /* altin zemin uzerinde okunur koyu ton */
}

/* --- ust bant: arama kutusu + aksiyonlar (baslik blogu kaldirildi) --- */
.compare-head { align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.compare-head .compare-search {
  flex: 1 1 260px; min-width: 0; max-width: 520px;
  padding: 0; background: transparent; border-bottom: 0;
}
.compare-head .compare-search .search-input { min-width: 0; }
/* Sonuc listesi arama kutusundan genis olabilir: kutu ust banda tasindigi icin
   dar kaldi, satirlar ust uste biniyordu. */
.compare-head .compare-results { left: 0; right: auto; top: calc(100% + 6px);
  width: min(720px, calc(100vw - 120px)); }
/* .r-proj bir <span>: inline oldugu icin nowrap/ellipsis islemiyordu. */
.cmp-result .r-main .r-proj { display: block; }
.ch-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.ch-actions .ch-sep { width: 1px; height: 20px; background: rgba(255,255,255,.22); }
.ch-btn.is-accent { background: var(--accent-500); border-color: var(--accent-500); color: var(--nk-fg); font-weight: 600; }
.ch-btn.is-accent:hover { background: var(--accent-600); border-color: var(--accent-600); }

/* --- mod gostergesi: hangi teklif modunda oldugumuz + tek tikla digerine gecis ---
   Sol taraf ICINDE BULUNULAN mod (bu sayfa: Hizli), sag taraf gecis dugmesi.
   Gecis 'vt_mode_ctx' anahtarini yazip AYNI SEKMEDE 19-quote-editor.html'e gider. */
.cmp-mod {
  display: inline-flex; align-items: center; gap: 4px;
  height: 32px; padding: 0 4px 0 8px; box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-md);
  background: rgba(255,255,255,.08);
}
.cmp-mod .cmp-mod-et {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.72); white-space: nowrap;
}
.cmp-mod .cmp-mod-akt {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px;
  border-radius: var(--r-sm); background: var(--accent-500); color: var(--nk-fg);
  font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
}
.cmp-mod .cmp-mod-btn {
  height: 24px; padding: 0 8px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--white); font-family: inherit;
  font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
  cursor: pointer; transition: var(--transition);
}
.cmp-mod .cmp-mod-btn:hover { background: rgba(255,255,255,.22); }
.cmp-mod .cmp-mod-btn:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 1px; }

/* --- filtre seridi (arama serididen kalan chip'ler) --- */
.cmp-filterbar {
  display: flex; align-items: center;
  padding: 5px var(--sp-4);
  background: var(--slate-25);
  border-bottom: 1px solid var(--slate-200);
}
.cmp-filterbar .compare-chips { margin-top: 0; flex: 1; }
.chip-spacer { flex: 1; }
.cmp-chip.is-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cmp-chip.is-toggle input { margin: 0; }

/* --- dikey yerlesim (#comparePage flex kolon; bkz. sablon_temizle 9. adim) ---
   Bantlar kendi boyunda kalir, matris kalan alani doldurur. Bant sayisi
   degisse de (bos baglam seridi gizlenir) alt bant asla kirpilmaz. */
.compare-page > .compare-head,
.compare-page > .cmp-context,
.compare-page > .cmp-filterbar,
.compare-page > .compare-foot { flex: 0 0 auto; }
.compare-page > .compare-matrix-wrap { flex: 1 1 auto; min-height: 0; }

/* Baglam seridi ancak icerik varsa gorunur (bos halde dolgu/kenarlik cizmesin) */
.cmp-context:empty { display: none; }
.cmp-context .cc-ic { margin-right: 4px; color: var(--accent-600); font-weight: 700; }
/* Baglam devralindiginda JS 'is-on' isaretini birakir. Gorunurlugu yukaridaki :empty
   kurali yonetir; bu kural yalnizca isaretin gorsel karsiligini verir (dolu serit). */
.cmp-context.is-on { border-bottom-color: var(--accent-300); }

/* Deger girilmemis matris hucresi (JS '<span class="bos">-</span>' basiyor) */
.cm-cell .bos { color: var(--slate-400); }

/* --- kolon basliklari: 1 satir kimlik + (dolu ise) 1 satir Ray/Dil profili ---
   Sablonun 4 satirlik basligi tek satira indirilmisti; profil bilgisi eklenince
   EN FAZLA 2 satir olur: ustte kimlik, altta profil (kucuk punto, ikincil renk).
   Iki profil de bossa profil satiri HIC basilmaz -> baslik yine tek satirdir. */
.cm-colhead {
  position: sticky;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 1px;
  min-height: 34px;
  padding: 4px 8px;
}
.cm-colhead .ch-kimlik { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* "Ray Profili - Dil Rayi Profili"; kolon 240px, tasarsa kirpilir (tam deger title'da) */
.cm-colhead .ch-geo {
  display: block; max-width: 100%; min-width: 0; margin-top: 2px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 500; line-height: 1.3;
  color: var(--slate-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cm-colhead.is-yeni .ch-geo { color: var(--slate-600); }
.cm-colhead.is-alanbaslik { z-index: 8; }
.cm-colhead.is-yeni { background-color: var(--nk-head-bg) !important; background-image: none !important;
  border-left: 2px solid var(--accent-500); border-right: 2px solid var(--accent-500); }
.cm-colhead .ch-tag { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 1px 6px; border-radius: 3px; background: var(--accent-500);
  color: var(--nk-fg); white-space: nowrap; }
.cm-colhead .ch-tag.is-alan { background: var(--slate-700); color: var(--white); }
.cm-colhead .ch-sayac { font-size: 10.5px; color: var(--slate-500); white-space: nowrap; }
.cm-colhead .ch-no { display: inline-block; font-family: var(--ff-mono); font-size: 12px;
  font-weight: 600; color: var(--slate-900); white-space: nowrap; }
.cm-colhead .ch-status { white-space: nowrap; }
.cm-colhead .ch-rm { margin-left: auto; flex: 0 0 auto; }

/* "ALAN" baslik hucresindeki kompakt ice aktar dugmesi */
.cm-imp-mini {
  margin-left: auto; flex: 0 0 auto;
  width: 24px; height: 24px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--slate-300); border-radius: var(--r-sm);
  background: var(--white); color: var(--primary-700);
  font-size: 13px; cursor: pointer; transition: var(--transition);
}
.cm-imp-mini:hover { background: var(--primary-50); border-color: var(--primary-400); }

/* --- hücre içi giriş --- */
.cm-cell.is-yeni { background: var(--nk-cell-bg); border-left: 2px solid var(--accent-500);
  border-right: 2px solid var(--accent-500); padding: 3px 6px; }
.cm-cell.is-yeni .input,
.cm-cell.is-yeni select,
.cm-cell.is-yeni textarea { width: 100%; height: 26px; padding: 2px 6px; font-size: 12px;
  border-radius: var(--r-sm); border: 1px solid var(--slate-300); background: var(--white); }
.cm-cell.is-yeni textarea { height: 40px; padding: 4px 6px; resize: vertical; }
.cm-cell.is-yeni .input:focus, .cm-cell.is-yeni select:focus { outline: 2px solid var(--accent-600);
  outline-offset: -1px; border-color: var(--accent-500); }
.cm-cell.is-yeni .para { display: flex; align-items: center; gap: 0; width: 100%; }
.cm-cell.is-yeni .para .sim { font-size: 10.5px; color: var(--slate-500); padding: 0 4px;
  background: var(--slate-50); border: 1px solid var(--slate-300); border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm); height: 26px; display: flex; align-items: center; }
.cm-cell.is-yeni .para .sim.son { border: 1px solid var(--slate-300); border-left: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.cm-cell.is-yeni .para .input { border-radius: 0; }
.cm-cell.is-yeni .para .sim + .input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.cm-cell.is-yeni .para .input:has(+ .sim.son) { border-radius: var(--r-sm) 0 0 var(--r-sm); }
/* S14 · teklif numarasi sistem tarafindan atanir, degistirilemez */
.cm-cell.is-yeni .input[readonly] { background: var(--slate-50); color: var(--slate-600); cursor: default; }
.cm-cell.is-yeni .input[readonly]:focus { outline: 0; border-color: var(--slate-300); }
/* S8 · musteri yalniz kayitli musterilerden */
.cm-cell.is-yeni .input.error { border-color: var(--danger-500); background: var(--danger-50); }

/* --- S15 · bos acilis: arama panelindeki surgec basligi + yonlendirme notu --- */
.cmp-res-suzgec {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 8px var(--sp-3); background: var(--slate-25); border-bottom: 1px solid var(--slate-200);
}
.cmp-res-suzgec .et { font-size: 11px; color: var(--slate-500); margin-right: 2px; white-space: nowrap; }
.cmp-res-suzgec .cmp-chip .n { font-family: var(--ff-mono); font-size: 10.5px; opacity: .75; margin-left: 2px; }
.cmp-bos-not {
  padding: 8px var(--sp-4); background: var(--info-50); color: var(--info-700);
  border-bottom: 1px solid var(--slate-200); font-size: var(--fs-sm); line-height: 1.5;
}
.cmp-bos-not[hidden] { display: none; }

/* --- alt grup satırı --- */
.cm-sub { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 22px;
  background: var(--slate-100); color: var(--slate-700); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; border-bottom: 1px solid var(--slate-200); cursor: pointer; user-select: none; }
.cm-sub .ok { font-size: 10px; color: var(--slate-400); transition: transform .15s; display: inline-block; }
.cm-sub.acik .ok { transform: rotate(90deg); }
.cm-sub .tut { margin-left: auto; font-family: var(--ff-mono); font-size: 11px; color: var(--primary-700); }

/* --- hesaplanan satır --- */
.cm-label.is-hesap { background: var(--slate-100); font-weight: 600; color: var(--slate-800); }
.cm-label.is-guclu { background: var(--primary-700); color: var(--white); font-weight: 700;
  font-size: 11.5px; letter-spacing: .04em; }
.cm-cell.is-hesap { background: var(--slate-50); font-family: var(--ff-mono); font-weight: 600;
  justify-content: flex-end; color: var(--slate-800); }
.cm-cell.is-hesap.is-yeni { background: var(--nk-calc-bg); }
.cm-cell.is-guclu { background: var(--primary-50); color: var(--primary-800); font-weight: 700; }
.cm-cell.is-guclu.is-yeni { background: var(--nk-head-bg); color: var(--nk-fg); }
.cm-label.is-alt { padding-left: 26px; font-size: 11px; color: var(--slate-500); }
/* Zorunlu alan yildizi (satir ici stil yerine sinif) */
.cm-label .cm-req { color: var(--danger-500); }

/* --- fark vurgusu --- */
.cm-cell.diff-ayni { box-shadow: inset 2px 0 0 var(--success-400); }
.cm-cell.diff-farkli { background: var(--warning-100); box-shadow: inset 2px 0 0 var(--warning-500); }
.cm-delta { margin-left: auto; font-family: var(--ff-mono); font-size: 10px; font-weight: 600;
  padding: 0 4px; border-radius: 3px; }
.cm-delta.artan { color: var(--danger-700); background: var(--danger-100); }
.cm-delta.azalan { color: var(--success-700); background: var(--success-100); }
.cm-row-gizli { display: none !important; }
/* "Yalnizca farkli satirlar" acikken hic fark yoksa matris bos gorunmesin */
.cm-bos-uyari { grid-column: 1 / -1; padding: var(--sp-4); text-align: center;
  font-size: var(--fs-sm); color: var(--slate-500); background: var(--slate-25);
  border-bottom: 1px solid var(--slate-200); }

/* --- alt bant --- */
.cf-info { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--slate-500); }
.cf-label { text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.compare-foot .cf-legend { font-size: 11px; color: var(--slate-500); gap: var(--sp-3); }
.compare-foot .cf-saved { flex: 0 0 auto; }

/* --- lejant kareleri: matriste GERCEKTEN gorunen isaretin minyaturu ---
   Oncesinde 'Yeni teklif' (--accent-500 #D89B1B) ile 'Farkli deger'
   (--warning-400 #DDA82A) neredeyse ayni altin tondu ve 'Farkli deger' karesi
   hucrenin gercek gorunumune (--warning-100 zemin + --warning-500 sol cubuk)
   benzemiyordu. Artik her kare kendi hucresinin kucultulmus halidir. */
.compare-foot .cf-legend .swatch {
  width: 15px; height: 12px; border-radius: 2px; box-sizing: border-box;
  background: var(--white); border: 1px solid var(--slate-300);
}
.compare-foot .cf-legend .sw-current {
  background: var(--nk-cell-bg); border-color: var(--accent-500);
  box-shadow: inset 2px 0 0 var(--accent-500), inset -2px 0 0 var(--accent-500);
}
.compare-foot .cf-legend .sw-same {
  background: var(--white); box-shadow: inset 3px 0 0 var(--success-400);
}
.compare-foot .cf-legend .sw-diff {
  background: var(--warning-100); box-shadow: inset 3px 0 0 var(--warning-500);
}

/* --- ice aktar penceresi ---
   .imp-drop adi Teklifler ekraninin toplu aktarim penceresinde de var (onun kendi gorunumuyle);
   bu sayfanin birakma alani, sayfanin pencerelerine kapsanir. Gizli dosya secici (.imp-file)
   iki pencerede aynidir, kurali ortaktir. */
.compare-page ~ .modal-overlay .imp-drop {
  position: static;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; width: 100%; padding: var(--sp-6) var(--sp-4); text-align: center; cursor: pointer;
  border: 2px dashed var(--slate-300); border-radius: var(--r-md);
  background: var(--slate-25); color: var(--slate-600);
  font-family: inherit; transition: var(--transition);
}
.compare-page ~ .modal-overlay .imp-drop:hover, .compare-page ~ .modal-overlay .imp-drop:focus-visible {
  border-color: var(--primary-400); background: var(--primary-50); color: var(--primary-700); outline: none;
}
.compare-page ~ .modal-overlay .imp-drop.is-over {
  border-color: var(--accent-500); background: var(--accent-50); color: var(--accent-700);
}
.imp-drop .imp-ic { font-size: 26px; line-height: 1; }
.imp-drop .imp-t { font-size: var(--fs-md); font-weight: 600; color: var(--slate-800); }
.imp-drop .imp-s { font-size: var(--fs-sm); color: var(--slate-500); }
.imp-secili { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--slate-200); border-radius: var(--r-sm);
  background: var(--white); font-size: var(--fs-sm); }
.imp-secili .imp-fi { color: var(--primary-600); }
.imp-secili .imp-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--slate-800); }
.imp-secili .imp-x { border: 0; background: transparent; color: var(--slate-400);
  cursor: pointer; font-size: 12px; padding: 2px 4px; }
.imp-secili .imp-x:hover { color: var(--danger-600); }

/* --- eski tekliften klonla penceresi --- */
.taban-liste { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.taban-sec { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left;
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--slate-200); border-radius: var(--r-sm);
  background: var(--white); cursor: pointer; font-family: inherit; font-size: var(--fs-sm);
  color: var(--slate-700); transition: var(--transition); }
.taban-sec:hover { border-color: var(--primary-400); background: var(--primary-50); }
.taban-sec.is-secili { border-color: var(--primary-600); background: var(--primary-50);
  box-shadow: inset 3px 0 0 var(--primary-600); }
.taban-sec .t-no { font-family: var(--ff-mono); font-weight: 600; color: var(--primary-700); }
.taban-sec .t-ana { flex: 1; min-width: 0; }
.taban-sec .t-proje { display: block; font-weight: 600; color: var(--slate-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taban-sec .t-alt { display: block; font-size: 11px; color: var(--slate-500); }
.taban-sec .t-tutar { font-family: var(--ff-mono); font-weight: 600; color: var(--slate-800); white-space: nowrap; }

/* Chrome/Edge, type="search" alanina kendi temizleme dugmesini basar; bu sayfadaki
   iki arama kutusunun da OZEL ✕ dugmesi var -> kutu doluyken yan yana CIFT ✕
   gorunuyordu. Yerli dugme kapatilir; temizleme tek yerden (.clear-btn /
   .taban-ara-x) yurur, Esc davranisi da tek elden kalir. */
#cmpSearchInput::-webkit-search-cancel-button,
#cmpSearchInput::-webkit-search-decoration,
.taban-ara-kutu .input::-webkit-search-cancel-button,
.taban-ara-kutu .input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* Pencere ici arama: ust banttaki kutunun kucuk kardesi. Global
   '.search-input::before' cift buyutec basacagi icin AYRI sinif adlari
   kullanilir; bos durum ile liste 'hidden' ile degistirilir
   (shared/styles.css: [hidden] { display: none !important; }). */
.taban-ara { margin-bottom: var(--sp-3); }
.taban-ara-et { display: block; margin-bottom: 4px; font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--slate-500); }
.taban-ara-kutu { position: relative; }
.taban-ara-ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: var(--slate-500); pointer-events: none; }
.taban-ara-kutu .input { width: 100%; height: 36px; padding: 8px 32px; font-family: inherit;
  font-size: var(--fs-sm); border: 1px solid var(--slate-300); border-radius: var(--r-sm);
  background: var(--white); }
.taban-ara-kutu .input:focus { outline: none; border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100); }
.taban-ara-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: none; padding: 4px; border: 0; background: transparent; color: var(--slate-400);
  font-size: 14px; cursor: pointer; }
.taban-ara-x.is-visible { display: block; }
.taban-ara-x:hover { color: var(--slate-700); }
.taban-ara-not { margin: 4px 0 0; font-size: 11px; color: var(--slate-500); }
.taban-bos { padding: var(--sp-4); text-align: center; font-size: var(--fs-sm);
  color: var(--slate-500); }

/* --- yazdirma basligi: yalnizca cikti uzerinde gorunur --- */
.cmp-print-baslik { display: none; }

/* --- RESPONSIVE --- */
@media (max-width: 1280px) {
  .compare-head .compare-search { flex: 1 1 200px; max-width: 380px; }
  .compare-head .ch-btn { padding: 0 var(--sp-2); }
  .cmp-mod { padding-left: 6px; }
  .cmp-mod .cmp-mod-akt, .cmp-mod .cmp-mod-btn { padding: 0 6px; }
}
@media (max-width: 1024px) {
  .compare-head { padding: var(--sp-2) var(--sp-3); }
  .compare-head .compare-search { flex: 1 1 100%; max-width: none; }
  .compare-head .compare-results { width: 100%; }
  .ch-actions { margin-left: 0; width: 100%; }
  .ch-actions .ch-sep { display: none; }
}
@media (max-width: 768px) {
  /* dar ekranda etiket kolonu deger kolonlarini bogmasin */
  /* Kolon genisligi daraltilmaz: basliktaki Geometri adi tek satira sigmali
     (musteri notu 2026-09-15); matris kendi kabinda yatay kayar. */
  :root { --cmp-label-w: 190px; }
  .cmp-filterbar { padding: 5px var(--sp-3); }
  .compare-head .ch-btn { height: 30px; font-size: 11px; }
  /* dar ekranda mod gostergesi: "MOD" etiketi duser, iki durum kalir */
  .cmp-mod { height: 30px; padding-left: 4px; }
  .cmp-mod .cmp-mod-et { display: none; }
  .cmp-mod .cmp-mod-akt, .cmp-mod .cmp-mod-btn { height: 22px; font-size: 11px; }
  /* alt bant iki satira insin: (lejant + kaydeden) / kaynak */
  .compare-foot { flex-wrap: wrap; gap: 4px var(--sp-3); }
  .compare-foot .cf-legend { order: 1; flex: 1 1 auto; flex-wrap: wrap; }
  .compare-foot .cf-saved { order: 2; flex: 0 0 auto; margin-left: auto; }
  .modal-overlay .modal-card .body { padding: var(--sp-4); }
  .imp-drop { padding: var(--sp-4) var(--sp-3); }
  .compare-page ~ .modal-overlay .imp-drop { padding: var(--sp-4) var(--sp-3); }
}

@media print {
  .compare-head, .cmp-filterbar, .compare-foot, .app-sidebar,
  .modal-overlay { display: none !important; }
  .cm-cell.is-yeni .input, .cm-cell.is-yeni select { border: 0; background: transparent; }
  .cm-imp-mini, .cm-colhead .ch-rm { display: none !important; }
  .cmp-print-baslik { display: block; margin-bottom: 6px; font-size: 12px;
    font-weight: 600; color: var(--slate-900); }
}

/* ============================================================
   PDF ÖNİZLEME (21) — müşteriye gidecek çıktının ekranı
   ============================================================ */
/* ===== SAYFAYA ÖZEL — PDF Önizleme ===== */
/* ---------- Kağıt (A4 oranli) ---------- */
.paper-wrap { display: flex; justify-content: center; padding-bottom: var(--sp-8); }
.paper {
  background: white;
  width: 100%; max-width: 820px;
  border: 1px solid var(--slate-200);
  box-shadow: var(--sh-lg);
  padding: 40px 46px 32px;
  color: var(--slate-800);
  font-size: 12.5px;
  line-height: 1.55;
}

/* ---------- Belge başlığı ---------- */
.pdf-head {
  display: flex; align-items: flex-start; gap: var(--sp-5);
  padding-bottom: 18px; border-bottom: 3px solid var(--primary-700);
}
/* Antet: voestalpine kurumsal logosu (yerel dosya). İletişim bilgisi, doğrulanmış bilgi
   gelene kadar antette yer almaz — uydurma adres/telefon yazılmaz (kullanıcı kararı 22.09.2026). */
.pdf-logo { height: 44px; width: auto; flex: none; display: block; margin-top: 2px; }
.pdf-co { flex: 1; }
.pdf-co .co-name { font-size: 17px; font-weight: 700; color: var(--primary-800); letter-spacing: -0.01em; }
.pdf-co .co-sub { font-size: 11px; color: var(--slate-500); margin-top: 2px; }
.pdf-ref { text-align: right; font-size: 11px; min-width: 168px; }
.pdf-ref .r-line { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.pdf-ref .r-line .k { color: var(--slate-500); }
.pdf-ref .r-line .v { font-family: var(--font-mono); font-weight: 600; }

.pdf-title {
  margin: 24px 0 18px; text-align: center;
  font-size: 16px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-800);
}

/* ---------- Bölümler ---------- */
.pdf-sec { margin-bottom: 20px; }
.pdf-sec > h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent-700); font-weight: 700;
  padding-bottom: 5px; margin-bottom: 9px;
  border-bottom: 1px solid var(--slate-200);
}
.pdf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.pdf-dl { display: grid; grid-template-columns: 132px 1fr; gap: 3px 10px; font-size: 11.5px; }
.pdf-dl dt { color: var(--slate-500); }
.pdf-dl dd { margin: 0; font-weight: 500; }

/* ---------- Maliyet tablosu ---------- */
.pdf-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.pdf-table th {
  background: var(--slate-50); text-align: left;
  padding: 7px 10px; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--slate-600);
  border-bottom: 1px solid var(--slate-300);
}
.pdf-table td { padding: 6px 10px; border-bottom: 1px solid var(--slate-100); }
.pdf-table td.n { text-align: right; font-family: var(--font-mono); }
.pdf-table tr.sub td { font-weight: 700; border-top: 1px solid var(--slate-300); background: var(--slate-25); }
.pdf-table tr.grand td {
  font-weight: 700; font-size: 13px; color: white;
  background: var(--primary-700); border: 0;
}
.pdf-table tr.unit td { font-weight: 600; background: var(--accent-50); }

/* ---------- Notlar / imza / footer ---------- */
.pdf-note {
  background: var(--slate-25); border-left: 3px solid var(--accent-500);
  padding: 10px 13px; font-size: 11px; color: var(--slate-600); border-radius: var(--r-sm);
}
.pdf-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 34px; }
.pdf-sign .s-box { font-size: 11px; }
.pdf-sign .s-line { border-bottom: 1px solid var(--slate-400); height: 46px; margin-bottom: 6px; }
.pdf-sign .s-lbl { color: var(--slate-500); }
.pdf-foot {
  margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--slate-200);
  display: flex; justify-content: space-between; gap: var(--sp-3);
  font-size: 10px; color: var(--slate-500);
}
.lang-pill { display: inline-flex; gap: 2px; background: var(--slate-100); border-radius: 999px; padding: 3px; }
.lang-pill button {
  border: 0; background: none; border-radius: 999px;
  padding: 3px 12px; font-size: var(--fs-xs); font-weight: 600; color: var(--slate-600);
}
.lang-pill button.active { background: var(--primary-700); color: white; }

/* ---------- YAZDIRMA ---------- */
/* Belgeyi (.paper) taşıyan sayfa — önizleme ve sunucudaki PDF — dikey A4'e basılır ve yalnız kâğıt
   çıkar. Kurallar o sayfaya bağlıdır: kapsamsız durduklarında her ekranın baskısında başlık bandı
   ve bilgi kutuları kayboluyor, renkler zorla basılıyor, kâğıt dikey A4'e kilitleniyordu. */
@page pdf-dikey { size: A4 portrait; margin: 14mm; }
@media print {
  html:has(.paper) body { page: pdf-dikey; }
  html:has(.paper) .page-toolbar, html:has(.paper) .info-card { display: none !important; }
  html:has(.paper) .app-main { padding: 0 !important; height: auto !important; overflow: visible !important; }
  .paper-wrap { padding: 0; }
  .paper { box-shadow: none; border: 0; max-width: none; width: 100%; padding: 0; }
  .pdf-sec { break-inside: avoid; }
  .pdf-table tr { break-inside: avoid; }
  html:has(.paper) *, html:has(.paper) *::before, html:has(.paper) *::after {
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
  }
}

/* ===== H11.5 pdf ===== */
/* Telefonda belge. Onaylı sayfa 390 px'te kırılıyordu: künye kâğıdın sağından taşıyor, iki sütunlu
   blokların sağ sütunu (Adres, Vergi No, Ray Profili …) ekranın dışında kalıyordu. Künye logonun
   altına iner, sütunlar alt alta dizilir. Yalnız ekran içindir: A4 baskının (önizlemeden Yazdır ve
   sunucudaki PDF) sayfa genişliği bu eşiğin üstündedir. */
@media screen and (max-width: 600px) {
  .paper { padding: 26px 20px 22px; }
  .pdf-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); }
  .pdf-logo { height: 36px; }
  .pdf-ref { grid-column: 1 / -1; min-width: 0; }
  .pdf-two { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .pdf-dl { grid-template-columns: 104px minmax(0, 1fr); }
  .pdf-dl dd { overflow-wrap: break-word; }
  .pdf-table th, .pdf-table td { padding-left: 6px; padding-right: 6px; }
  .pdf-sign { gap: var(--sp-5); }
}

/* Hızlı Teklif (19b) yatay A4'e basılır. Adsız @page kuralı bu dosyaya iki ekrandan geldi (19b yatay,
   yukarıdaki 21 dikey) ve sonra gelen kazandığı için Hızlı Teklif de dikey basılıyordu. İki kâğıt da
   adlıdır: yatay sayfa yalnız Hızlı Teklif'e, dikey sayfa (pdf-dikey) yalnız PDF belgesine verilir;
   öbür ekranlar tarayıcının kâğıt ayarıyla basılır. */
@page hizli-yatay { size: A4 landscape; margin: 10mm; }
@media print {
  body:has(.compare-page) { page: hizli-yatay; }
}

/* ============================================================
   RAPORLAR (22) — dönem çubuğu, KPI ızgarası ve grafikler
   ------------------------------------------------------------
   Statü halkası sabit bir gradyan DEĞİLDİR: dilimler o dönemin
   gerçek dağılımından üretilir ve öğenin kendi style'ına yazılır.
   ============================================================ */
/* ===== SAYFAYA ÖZEL — Raporlar ===== */
.period-bar { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-4); }
.period-bar button {
  border: 1px solid var(--slate-200); background: white; color: var(--slate-600);
  border-radius: var(--r-sm); padding: 6px 14px; font-size: var(--fs-sm); font-weight: 500;
  transition: var(--transition);
}
.period-bar button:hover { background: var(--slate-50); color: var(--slate-800); }
.period-bar button.active { background: var(--primary-700); border-color: var(--primary-700); color: white; }
/* ===== H11.5 raporlar ===== */
/* Özel aralığın iki tarih alanı (onaylı ekrana kararla eklendi; statik sayfada yok). Ortak .input
   tam genişliktir: burada Audit Log'daki tarih aralığı gibi 150 px ve dar alan yüksekliğinde,
   köşeleri dönem düğmeleriyle aynı; çift olarak birlikte satır değiştirir. */
.period-bar .period-range { display: inline-flex; align-items: center; gap: var(--sp-2); }
.period-bar .period-range .input {
  width: 150px; height: var(--row-h-sm); font-size: var(--fs-sm); border-radius: var(--r-sm);
}
.kpi-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-5); }
@media (max-width: 1000px) { .kpi-6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kpi-6 { grid-template-columns: 1fr; } }

/* Geometry names are long (longest = 37 mono chars ≈ 266px at 12px); keep the name
   column fixed and let the bar track flex, so this chart scales like the shared
   .hbar rule the customer chart next to it uses. */
.geo-list .hbar { grid-template-columns: 280px 1fr 44px; }
@media (max-width: 700px) { .geo-list .hbar { grid-template-columns: 150px 1fr 34px; } }

/* Value labels sit at top:-20px inside .bar (shared/styles.css:1196). With the
   shared 8px top padding the tallest bar pushes its label ~2px above the chart
   box, and a 100% bar would push it over the caption. Reserve the label row here
   instead; the box height is unchanged, so every bar keeps its relative height. */
.bar-chart { padding-top: 24px; }

/* ============================================================
   DENETİM İZİ (23) — önce/sonra penceresi
   ============================================================ */
/* ===== SAYFAYA ÖZEL — Audit Log ===== */
tr.is-hidden { display: none; }
.diff-box {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: 11.5px;
}
@media (max-width: 640px) { .diff-box { grid-template-columns: 1fr; } }
.diff-box .d-col { border: 1px solid var(--slate-200); border-radius: var(--r-sm); overflow: hidden; }
.diff-box .d-head {
  padding: 6px 10px; font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.diff-box .d-before .d-head { background: var(--danger-100); color: var(--danger-600); }
.diff-box .d-after  .d-head { background: var(--success-100); color: var(--success-700); }
.diff-box pre { margin: 0; padding: 10px; white-space: pre-wrap; word-break: break-word; color: var(--slate-700); }
/* Sunucuda siralanan baslik (T3): baslik bir baglantidir, suzgecler adreste kalir ve sayfa basa
   sarar. Gorunum ortak tablo modulunun basligiyla ayni: baglanti rengi ve alt cizgi yok, hucrenin
   tamami tiklanir. */
.table th a.th-sort {
  display: block; color: inherit; text-decoration: none;
  margin: calc(-1 * var(--sp-3)) calc(-1 * var(--sp-4));
  padding: var(--sp-3) var(--sp-4);
}
.table th a.th-sort:hover { color: var(--primary-700); text-decoration: none; }

/* ===== H11.5 denetim-hata ===== */
/* Onaylı pencerenin üst bilgisi kısa değerlerle çizilmişti; gerçek bir kullanıcı kaydının anahtarı
   tek parça bir e-posta adresidir. Satır kendi sütununda kırılır, kartın dışına taşmaz. */
#diffModal .dlist dd { min-width: 0; overflow-wrap: anywhere; }

/* ============================================================
   KULLANIM KILAVUZU (H10.1, karar K9) — statik demodaki kılavuzun
   sayfa içi stili buraya taşındı; uygulamada sayfa içi <style> yok.
   ============================================================ */
.kv-wrap { max-width: 980px; margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-8); }
.kv-head { border-bottom: 2px solid var(--slate-200); padding-bottom: var(--sp-4); margin-bottom: var(--sp-6); }
.kv-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.kv-head h1 { margin: 0 0 var(--sp-2); font-size: var(--fs-2xl); color: var(--primary-900); }
.kv-head .sub { color: var(--slate-500); font-size: var(--fs-sm); line-height: 1.7; }

.kv-toc { background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--r-md);
  padding: var(--sp-4); margin-bottom: var(--sp-6); }
.kv-toc ol { margin: 0; padding-left: var(--sp-5); columns: 2; column-gap: var(--sp-6); }
.kv-toc li { margin-bottom: 6px; font-size: var(--fs-sm); break-inside: avoid; }
.kv-toc a { color: var(--primary-700); text-decoration: none; }
.kv-toc a:hover { text-decoration: underline; }

.kv-sec { margin-bottom: var(--sp-8); scroll-margin-top: 72px; }
.kv-sec > h2 { font-size: var(--fs-lg); color: var(--primary-800); margin: 0 0 var(--sp-3);
  padding-bottom: 6px; border-bottom: 1px solid var(--slate-200); }
.kv-sec h3 { font-size: var(--fs-base); color: var(--primary-700); margin: var(--sp-4) 0 var(--sp-2); }
.kv-sec p, .kv-sec li { font-size: var(--fs-sm); line-height: 1.75; color: var(--slate-700); }
.kv-sec ol li, .kv-sec ul li { margin-bottom: 6px; }

.kv-role { border: 1px solid var(--slate-200); border-left: 3px solid var(--accent-500);
  border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-4); background: white; }
.kv-role h3 { margin-top: 0; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.kv-role .who { font-size: var(--fs-xs); color: var(--slate-500); margin-bottom: var(--sp-3); }
/* Okuyanın kendi rolü: başta durur ve belirgin çerçeveyle işaretlenir. */
.kv-role.is-mine { border-color: var(--primary-700); border-left-width: 4px; background: var(--primary-50); }
.kv-mine { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  background: var(--primary-700); color: white; font-size: var(--fs-xs); font-weight: 600; }

.kv-note { background: #FFF9E8; border: 1px solid #F0DCA0; border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0; font-size: var(--fs-sm); color: #6B5415; line-height: 1.7; }
.kv-note b { color: #4A3A0C; }

.kv-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: var(--sp-3) 0; }
.kv-flow .arrow { color: var(--slate-400); }

table.kv-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: var(--sp-3) 0; }
table.kv-table th, table.kv-table td { border: 1px solid var(--slate-200); padding: 8px 10px; text-align: left; vertical-align: top; }
table.kv-table th { background: var(--slate-50); color: var(--primary-800); font-weight: 600; }

@media (max-width: 720px) {
  .kv-toc ol { columns: 1; }
  .kv-wrap { padding: var(--sp-4) 0 var(--sp-6); }
}

/* Yazdırırken yalnız kılavuz basılır: menü, üst bant ve Yazdır düğmesi çıkmaz. */
@media print {
  html:has(.kv-wrap) .app-sidebar,
  html:has(.kv-wrap) .app-header,
  html:has(.kv-wrap) .sidebar-backdrop,
  .kv-yazdir { display: none !important; }
  html:has(.kv-wrap) .app { display: block; }
  html:has(.kv-wrap) .app-main { padding: 0; }
  .kv-wrap { max-width: none; padding: 0; }
  .kv-role, .kv-note, table.kv-table { break-inside: avoid; }
}