/* Töre tasarım sistemi — tek stil dosyası. Derleme adımı yok; Tauri kasası da aynı dosyayı kullanır.
   Bölümler: 1 token · 2 temel · 3 kabuk · 4 bileşenler · 5 kalıplar · 6 yardımcılar

   BAKIM KURALI (2026-09-24): bir seçici bu dosyada BİR KEZ tanımlanır.
   Dosya uzun süre "sona yama ekleyerek" büyüdü; aynı seçicinin 3-5 ayrı tanımı
   oluştu ve hangi kuralın geçerli olduğu okunamaz hale geldi (liste satırının
   üzerine gelince zemin pembeleşiyordu; sebebi üçüncü bir .table tbody tr:hover
   tanımıydı). Tekrarlar birleştirildi: 4929 → 4439 satır.

   Bilinçli istisna: .btn, .btn--ghost, .btn--primary, .search-trigger, .kpis,
   .dashboard-grid ve .till-table thead th ayrı bloklar halinde DURUR. Bunların
   tanımları arasında varyantları (.btn--sm gibi) tanımlıdır; tek bloğa toplayıp
   sona taşımak varyantı ezer. Değişiklik yapmadan önce sırayı kontrol edin. */

/* 1 ─ Token ─────────────────────────────────────────────────────────── */
/* Tasarım jetonları. Değerler tek yerde; bileşenler yalnız buradan okur.

   KAĞIT PALETİ (kullanıcı kararı 2026-09-29): palet "modern editoryal" yöne
   taşındı. Sıcak tonlar kaldı ama açıldı ve sarıdan arındı; kartlar saf beyaza
   geçti, marka kırmızısı korundu. Fikir şu: zemin "kağıt", kartlar onun üstünde
   duran beyaz "sayfalar" — ayıran şey çizgi değil zeminin kendisi.

   Bu değişiklik İKİ KONTRAST HATASINI da düzeltti: --color-text-subtle 3,0:1'den
   4,6:1'e, --color-warning 4,5:1'den 5,9:1'e çıktı. İkisi de gövde metninde WCAG
   AA sınırının altındaydı.

   JETONLAR BU BÖLÜMDE DURUR. Bir dönem dosyanın sonundaki bir yama bloğunun
   içindeydiler (satır 3874) — yapı onları burada beklerken. 2026-09-29'da
   buraya taşındı.

   SİTENİN PALETİ (Arayüz — KARAR, 2026-10-05; uygulandı 10E-1, 2026-10-15): değerler
   karar metnindedir — zemin #F6F4F1, kart #FFFFFF, kenar #E7E2DC, metin #2A2420 / #6E655E,
   birincil espresso #2E2622, marka kırmızısı #A50E02 (aktif menü zemini #F9ECEA), eski
   altın #B08D4A, durum #2E7D4F / #B4690E / #2F5D8A. 2026-11-12'DE AÇILDI (kullanıcı: "erp koyu
   krem gibi hissettiriyor"; sitenin stil rehberinin "Modern Klasik" değerleri): zemin #FCFBF9,
   çukur #F5F2ED, kenar #E9E4DC / #D3CBBF, metin #26211D / #5F574F, aktif menü zemini #F6E6E4.
   TEK SAPMA: uyarı rengi #B4690E kendi
   açık zemininde 3,9:1'de kalıyor (metin için AA 4,5:1); metinde aynı tonun koyusu
   #8F530B kullanılır (5,7:1).

   RENK DİSİPLİNİ (kullanıcı kararı 2026-09-22, 2026-10-05'te teyit):
   - Marka kırmızısı YALNIZ: logo, aktif menü, odak halkası, grafik ana serisi ve
     YIKICI işlem (Sil/İptal). Takvimde kırmızı kullanılmaz.
   - Birincil eylem düğmeleri espressodur; böylece dolu kırmızı = TEHLİKE anlamını korur
     (kasada yanlış düğmeye basma riski azalır).
   - Eski altın YALNIZ süs: üst tarih satırı, takvimde etkinlik noktası, önemli gün.
   Ölçüler akışkandır: clamp() ile ekran genişliğine göre nefes alır.

   KOYU TEMA YOK (karar paleti açıktır, kenar menü açık kalır): `color-scheme: light`
   işletim sistemi koyu moddayken tarayıcının form öğelerini ve kaydırma çubuğunu
   koyulaştırıp açık sayfada sırıtmasını önler. */

:root {
  color-scheme: light;

  /* Yazı. Source Sans 3 yerel dosyadır (design/vendor/); yüklenemezse sistem
     yığınına düşer ve ekran bozulmaz. Playfair Display YALNIZ sayfa başlığında ve
     ana sayfa selamında (Arayüz — KARAR); yerel dosyadır, yüklenemezse Georgia'ya düşer. */
  --font-sans: "Source Sans 3", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-mono: "Cascadia Mono", Consolas, "SFMono-Regular", monospace;

  /* Yazı ölçeği — Kağıt: gövde 14px'ten 15px'e çıktı. Kasa fişi satırı bundan
     etkilenmez, orada 32px'te kalır (8 satır kaydırmadan görünmeli). */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.1875rem;
  --text-2xl: clamp(1.3125rem, 1.14rem + 0.55vw, 1.6875rem);
  --text-3xl: clamp(1.5625rem, 1.26rem + 1.1vw, 2.0625rem);

  /* Boşluk ölçeği DEĞİŞMEDİ. Kağıt yalnız kullanımı değiştirir: form alanları
     arası space-3 yerine space-4, alan grupları arası space-4 yerine space-5. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --gutter: clamp(var(--space-4), 1rem + 1vw, var(--space-6));

  /* Köşe — Kağıt: 6/8/14 tam ortada duruyordu ve "kararsız" okunuyordu.
     Belirgin yuvarlak taraf seçildi. */
  --radius-sm: 10px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Yüzeyler: zemin sıcak kırık beyaz, kartlar saf beyaz. */
  --color-bg: #fcfbf9;
  --color-surface: #ffffff;
  --color-surface-muted: #faf8f5;
  --color-surface-sunken: #f5f2ed;
  --color-border: #e9e4dc;
  --color-border-strong: #d3cbbf;

  /* Metin. subtle beyaz kartta 4,6:1. */
  --color-text: #26211d;
  --color-text-muted: #5f574f;
  --color-text-subtle: #736a60;

  /* Marka kırmızısı: sitenin rengi (#A50E02). */
  --color-brand: #a50e02;
  --color-brand-hover: #870b02;
  --color-brand-soft: #f6e6e4;
  --color-brand-line: #ebc6c1;

  /* Eylem: espresso (kırmızı DEĞİL). */
  --color-action: #2e2622;
  --color-action-hover: #1f1915;
  --color-action-text: #ffffff;
  --color-action-soft: #efebe7;
  --color-accent: var(--color-action);
  --color-accent-hover: var(--color-action-hover);
  --color-accent-soft: var(--color-action-soft);
  --color-accent-text: var(--color-action-text);

  /* Eski altın: yalnız süs (üst tarih satırı, takvim noktası, önemli gün). */
  --color-gold: #b08d4a;
  --color-gold-soft: #f6efe1;
  /* Sandık grafikleri (kullanıcı 2026-11-05): hibe açık yeşil, harcamanın açılan kırmızı tonları,
     durum çubuğunun amberi (uyarı metninin koyusu değil, #B4690E). */
  --color-grant: #8dbf9e;
  --color-brand-mid: #c2564c;
  --color-brand-light: #d9958e;
  --color-warning-bar: #b4690e;

  /* Durum renkleri. Uyarı metni #B4690E'nin koyusudur (bkz. bölüm notu): 5,7:1.
     Yıkıcı işlem marka kırmızısıdır (karar). */
  --color-success: #2e7d4f;
  --color-success-soft: #ebf5ef;
  --color-success-line: #c4e0cf;
  --color-warning: #8f530b;
  --color-warning-soft: #fbf3e6;
  --color-warning-line: #ecd3ab;
  --color-danger: #a50e02;
  --color-danger-hover: #870b02;
  --color-danger-soft: #fbeceb;
  --color-danger-line: #efc9c4;
  --color-info: #2f5d8a;
  --color-info-soft: #ebf1f7;
  --color-info-line: #c8d8e8;
  /* Mor: kasada havale tuşu, fişte İşlem tuşu (renkli tuş dizisinin beşinci rengi). */
  --color-violet: #6d28d9;
  --color-violet-soft: #f3effc;
  --color-violet-line: #d9cdf4;

  /* Pano etiketleri (10E-5): açık zemin, koyu yazı (okunur kalsın). Marka kırmızısı YOKTUR:
     renk disiplini gereği kırmızı yalnız logo, etkin menü, odak, grafik ve yıkıcı işlemde. */
  --tag-blue-bg: #e3ecf5;
  --tag-blue-fg: #234a6e;
  --tag-green-bg: #e2f1e8;
  --tag-green-fg: #23603d;
  --tag-amber-bg: #fbecd9;
  --tag-amber-fg: #7d4708;
  --tag-gold-bg: #f3ead7;
  --tag-gold-fg: #6b5426;
  --tag-purple-bg: #ece6f3;
  --tag-purple-fg: #4f3c6e;
  --tag-teal-bg: #def0ef;
  --tag-teal-fg: #1f5b58;
  --tag-gray-bg: #ece9e5;
  --tag-gray-fg: #4a433e;

  /* Kenar çubuğu: kartlar gibi beyaz; ayıran şey zeminin kendisi. */
  --color-sidebar: #ffffff;
  --color-sidebar-text: #3f3931;
  --color-sidebar-muted: #7d7469;
  --color-sidebar-active: var(--color-brand-soft);

  --shadow-sm: 0 1px 2px rgb(40 32 24 / 0.04);
  --shadow: 0 4px 12px rgb(40 32 24 / 0.06);
  --shadow-lg: 0 20px 48px rgb(40 32 24 / 0.14);
  --focus-ring: 0 0 0 3px rgb(165 14 2 / 0.18);

  /* Geçiş (2026-09-29). Bu dosyada 4.700 satır boyunca yalnız 4 geçiş vardı;
     üzerine gelme, odak ve menü açılışı anında sıçrıyordu. */
  --ease-fast: 120ms;
  --ease-base: 160ms;
  --ease-curve: cubic-bezier(0.2, 0, 0, 1);

  /* Kabuk ölçüleri. Sabit genişlik yok. */
  --sidebar-width: 244px;
  /* 48 px: fişte ve kasada eski sekme şeridinin (üst boşluğuyla) kapladığı yer; satır eksilmez. */
  --topbar-height: 48px;
  --brand-width: 13rem;
  --content-max: 1600px;
  --row-height: 46px;
  /* Fiş ve kasa şeridindeki alanların ortak boyu (seçim kutusu, arama, belge no). */
  --strip-height: 36px;
}

/* Source Sans 3 — yerel değişken font (2026-09-29).

   CDN'den yüklenmez: kasa çevrimdışı çalışmak zorunda. Dosyalar design/vendor/
   içinde, sürüm ve SHA-256 özeti design/vendor/README.md tablosunda — htmx ve
   Alpine için uygulanan düzenin aynısı.

   İKİ ALTKÜME DE GEREKLİ: ş (U+015F), ğ (U+011F) ve İ (U+0130) latin-ext
   altkümesindedir. Yalnız latin alınsa Türkçe metin bozuk görünürdü.
   (ç, ö, ü ve ı latin altkümesinde.)

   Tek dosya iki uçtan da (200–900) ağırlık verir; ayrı kalın/ince dosya yok.
   font-display: swap — font gelene kadar sistem yazısıyla okunur, metin
   hiçbir zaman görünmez kalmaz. */

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../vendor/source-sans-3-latin-ext-wght-normal.c6ba61588d7d.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../vendor/source-sans-3-latin-wght-normal.30164609c163.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* Playfair Display — yalnız sayfa başlığı ve ana sayfa selamı (Arayüz — KARAR, 10E-1).
   Source Sans 3 ile aynı düzen: yerel değişken font, iki altküme (ş ğ İ latin-ext'te),
   sürüm ve özet design/vendor/README.md'de. Ağırlık 400–900. */

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../vendor/playfair-display-latin-ext-wght-normal.319e6b2aad48.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../vendor/playfair-display-latin-wght-normal.ef05b30d6e5c.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* 2 ─ Temel ─────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.25;
  font-weight: 600;
}

h1 {
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--text-lg);
}

h3 {
  font-size: var(--text-md);
}

p {
  margin: 0;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

code,
kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

kbd {
  display: inline-block;
  padding: 0 var(--space-1);
  border: 1px solid var(--color-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  line-height: 1.4;
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent);
  color: var(--color-accent-text);
  border-radius: var(--radius);
}

.skip-link:focus {
  top: var(--space-3);
}

/* hidden özniteliği her zaman gizler: display veren bileşenler (.empty gibi) onu ezmesin. */
[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Geçişler (2026-09-29). Tek kural, her bileşene yayılır: durum değişimi
   sıçramaz. Hareket duyarlılığı olan kullanıcıda kendiliğinden kapanır. */
a,
button,
input,
select,
textarea,
.btn,
.badge,
.chip,
.card,
.table tbody tr {
  transition:
    background-color var(--ease-fast) var(--ease-curve),
    border-color var(--ease-fast) var(--ease-curve),
    color var(--ease-fast) var(--ease-curve),
    box-shadow var(--ease-fast) var(--ease-curve);
}

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

/* 3 ─ Kabuk ─────────────────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

/* TEMEL KURAL DAR EKRAN KURALLARINDAN ÖNCE DURMALI (2026-10-04). Önceden
   dosyanın sonlarındaydı ve aynı özgüllükte olduğu için 900 px altındaki
   "üstte şerit" kurallarını eziyordu: menü 100vh yüksekliğinde kalıyor, yarım
   pencerede bütün ekranı kaplıyor, sayfa içeriği ekranın altına itiliyordu. */
.sidebar {
  position: sticky;
  top: var(--topbar-height);
  height: calc(100vh - var(--topbar-height));
  overflow-y: auto;
  background: var(--color-sidebar);
  color: var(--color-sidebar-text);
  border-right: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-3);
}

/* Logo ve kutu adı ÜST ÇUBUĞUN sol köşesindedir (kullanıcı 2026-11-12): kenar menü fişte ve
   kasada gizlense de yerinde kalır, sekmeler hep aynı yerden başlar. Genişliği kenar menünün
   açık-kapalı hâline BAĞLI DEĞİLDİR (bağlı olsaydı sekmeler yine kayardı). */
.topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  width: var(--brand-width);
  padding-left: var(--space-4);
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--color-text);
}

.brand:hover {
  text-decoration: none;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}

.brand__text strong {
  font-size: var(--text-lg);
  color: var(--color-brand);
}

.brand__text small {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Marka işareti AYRI DOSYADIR (brand/logo-mark.webp): kaynak logo çerçeveli ve
   altında "TÖRE-DEVLET YAYINLARI" yazısı var. Eskiden o kaynak dosya 34×34 kareye
   `object-fit: cover` ile kırpılıyordu — çerçeve çizgisi kareye giriyor, monogram
   da ortadan kesiliyordu (kullanıcı 2026-09-29: "logo düzgün gözükmüyor").
   Şimdi monogram tam oturuyor; oranı 298×502 olduğu için kutu da dikey. */

.nav-group + .nav-group {
  margin-top: var(--space-5);
}

.nav-group__title {
  padding: 0 var(--space-3) var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--color-sidebar-text);
  font-weight: 500;
}

.nav-link .icon {
  color: var(--color-text-subtle);
  flex: none;
}

.nav-link:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
  text-decoration: none;
}

.nav-link:hover .icon {
  color: var(--color-text-muted);
}

.nav-link[aria-current="page"] {
  background: var(--color-sidebar-active);
  color: var(--color-brand);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--color-brand);
}

.nav-link[aria-current="page"] .icon {
  color: var(--color-brand);
}

.nav-sublist {
  list-style: none;
  margin: var(--space-1) 0 var(--space-2);
  padding: 0 0 0 calc(var(--space-3) + 12px);
  border-left: 1px solid var(--color-border);
  margin-left: var(--space-4);
}

.nav-sublink {
  display: block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.nav-sublink:hover {
  color: var(--color-text);
  background: var(--color-surface-sunken);
  text-decoration: none;
}

.nav-sublink[aria-current="page"] {
  color: var(--color-brand);
  font-weight: 600;
}

.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.search-trigger {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Sorun bildir (10K): üst çubukta sessiz durur, dar ekranda yalnız ikon. */
.issue-trigger {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Bildirimle gelen ekran görüntüsü: tıklayınca tam boyu açılır. */
.issue-shot {
  display: block;
  max-width: 720px;
}

.issue-shot img {
  display: block;
  max-width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.topbar__spacer {
  flex: 1;
}

.content {
  width: 100%;
  max-width: var(--content-max);
  padding: var(--gutter) var(--gutter) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.menu {
  position: relative;
}

.menu > summary {
  list-style: none;
  cursor: pointer;
}

.menu > summary::-webkit-details-marker {
  display: none;
}

.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 20;
  min-width: 240px;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.menu__panel--left {
  left: 0;
  right: auto;
}

.menu__label {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.menu__item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: none;
  font: inherit;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.menu__item:hover {
  background: var(--color-surface-muted);
  text-decoration: none;
}

.menu__item[aria-current="true"] {
  font-weight: 600;
  color: var(--color-accent);
}

/* Kutu değiştirme oku: kutunun adı logonun altında yazar, burada yalnız ok durur. */
.company-switch {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2);
  min-height: 24px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  cursor: pointer;
  list-style: none;
}

.company-switch::-webkit-details-marker {
  display: none;
}

.company-switch:hover {
  color: var(--color-brand);
  border-color: var(--color-brand);
}

.company-switch__kind {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

@media (max-width: 900px) {
  /* Telefon: menü üstte tek satır, yatay kaydırılır; içerik tam genişlik (1B.6). */
  .app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    overflow-x: auto;
  }

  .sidebar__brand {
    padding: 0 var(--space-2) 0 0;
  }

  .sidebar nav {
    display: flex;
    gap: var(--space-3);
  }

  .nav-group + .nav-group {
    margin-top: 0;
  }

  .nav-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .nav-group__title {
    display: none;
  }

  .nav-list {
    display: flex;
    gap: var(--space-1);
  }

  .nav-link {
    white-space: nowrap;
  }

  /* Telefonda üst şerit kısa kalsın: modülün alt girişleri sayfa başlığının altındaki
     modül menüsünde zaten var. */
  .nav-sublist {
    display: none;
  }

  .content,
  .topbar {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* Dokunmatikte hedefler büyür. */
  .btn,
  .nav-link,
  .menu__item {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}

/* Kayıt sekmeleri (Faz 7). Şerit yalnız sekme açıkken görünür: menüde
   gezinmek sekme açmaz, boş bir şerit de yer kaplamamalı. Renk disiplini
   gereği etkin sekmeyi ayıran şey marka kırmızısı değil ZEMİN ve ÇİZGİDİR;
   kırmızı yalnız odak halkasında kalır. */
/* ŞERİT ÜST ÇUBUĞUN İÇİNDEDİR (kullanıcı 2026-11-12): çubuğun ortasını doldurur, her ekranda aynı
   yerde ve aynı boydadır. Sığmayınca sekmeler eşit daralır (ad "…" ile kısalır), etkin sekme
   tam adıyla kalır; alt satıra SARMAZ (sarsaydı çubuk büyür, sayfa kayardı). */
.tabstrip {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
}

.tabstrip[hidden] {
  display: none;
}

.tabstrip:not([hidden]) + .topbar__spacer {
  display: none;
}

.tabstrip__row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
  min-width: 0;
  width: 100%;
}

.tabstrip__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 1 auto;
  min-width: 3.5rem;
  max-width: 16rem;
  padding: 0 var(--space-1) 0 var(--space-3);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}

.tabstrip__tab:hover {
  background: var(--color-surface-muted);
}

.tabstrip__tab--current,
.tabstrip__tab--current:hover {
  flex-shrink: 0;
  border-color: var(--color-border);
  background: var(--color-bg);
  /* Etkin sekme çubuğun alt çizgisini "deler": sayfanın zeminiyle aynı düzlemde durur. */
  box-shadow: 0 1px 0 0 var(--color-bg);
}

.tabstrip__label {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  padding: var(--space-2) 0;
  font: inherit;
  color: var(--color-text-subtle);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabstrip__tab--current .tabstrip__label {
  color: var(--color-text);
  font-weight: 600;
}

/* Kaydedilmemiş değişikliği olan sekme: adın önünde küçük bir nokta (kapatırken sorulur). */
.tabstrip__tab--dirty .tabstrip__label::before {
  content: "●";
  margin-right: var(--space-1);
  color: var(--color-warning);
  font-size: var(--text-xs);
  vertical-align: middle;
}

.tabstrip__close {
  border: 0;
  background: none;
  padding: 0 var(--space-1);
  font-size: var(--text-md);
  line-height: 1;
  color: var(--color-text-subtle);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.tabstrip__close:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

/* Şeridin bilgisi (sekme sınırı) çubuğun ALTINA asılır; çubuğun boyunu değiştirmez. */
.tabstrip__note {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  margin: var(--space-1) 0 0;
  white-space: nowrap;
  box-shadow: var(--shadow);
}

/* Sekmede söylenecek şeyler (dosya seçimi geri yüklenemedi, kayıt silinmiş…).
   Uyarı değil BİLGİdir: kullanıcı yanlış bir şey yapmadı. */
.tabnote {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-border-strong);
  background: var(--color-surface-sunken);
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

/* 4 ─ Bileşenler ────────────────────────────────────────────────────── */

/* Düğme */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn .icon {
  color: var(--color-text-muted);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Birincil eylem nötr koyudur: dolu kırmızı "tehlike" anlamına ayrılmıştır. */
.btn--primary {
  background: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-action-text);
}

.btn--primary .icon {
  color: currentColor;
}

.btn--danger .icon {
  color: currentColor;
}

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

.btn--ghost {
  background: none;
  border-color: transparent;
}

.btn--sm {
  min-height: 30px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
}

.btn--lg {
  min-height: 48px;
  padding: 0 var(--space-5);
  font-size: var(--text-lg);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.btn-row--end {
  justify-content: flex-end;
}

.inline-form {
  display: inline;
  margin: 0;
}

/* Kart */

.card__body {
  padding: var(--space-5);
}

.card__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Altında birden çok küçük form duran kart (ürün kartı › Site › önizleme yükleme). */
.card__footer--stack {
  flex-direction: column;
  align-items: flex-start;
}

.card--flush .card__body {
  padding: 0;
}

/* Sayfa başlığı */

.page-header__text {
  min-width: 0;
}

.page-header__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--color-text-subtle);
}

/* Rozet */

/* Uyarı / bildirim */
.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--color-info-soft);
  color: var(--color-info);
}

.alert + .alert {
  margin-top: var(--space-2);
}

.alert--success {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.alert--warning {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.alert--error {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.messages {
  margin-bottom: var(--space-5);
}

/* Tablo */
.table-wrap {
  overflow-x: auto;
}

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.table tfoot td {
  font-weight: 600;
  background: var(--color-surface-muted);
  border-top: 2px solid var(--color-border);
  border-bottom: 0;
}

.table .num,
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Satır işlemleri sağ kenara sabit: tablo dar ekranda yana kaysa da "⋮" ve tek düğme
   (ör. borç tablosunda "Öde") görünür kalır (kabul denemesi 2026-10-10, 1024 px). */
.table .actions {
  text-align: right;
  white-space: nowrap;
  position: sticky;
  right: 0;
  background: var(--color-surface);
}

.table--compact th,
.table--compact td {
  padding: var(--space-2) var(--space-3);
}

.muted {
  color: var(--color-text-muted);
}

/* Satır sonları korunan düz metin (tanıtım metni, biyografi). */
.text-lines {
  white-space: pre-line;
}

.subtle {
  color: var(--color-text-subtle);
}

/* Fiş giriş ekranı (2E.9): kasayla aynı dili konuşur, satırlar yerinde düzenlenir. */
.doc-entry {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 100%;
}

/* Satır alanı boşluğu yer; toplam şeridi hep en altta kalır. Satır alanı DIŞINDAKİ parçalar
   (cari şeridi, arama, toplam) ezilmez: yer yetmezse içerik kayar (2026-10-20, şerit 2 px'e
   iniyordu). Satır alanının kendi kuralı aşağıda, sonra geldiği için o yine esner. */
.doc-entry > *,
.doc-entry__table,
.doc-entry .empty {
  flex: 0 0 auto;
}

.cell-input {
  width: 10ch;
  padding: 2px var(--space-2);
  text-align: right;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.dl--tight > div {
  padding-block: 2px;
}

.is-warning {
  color: var(--color-warning-text, var(--color-text));
  font-weight: 600;
}

/* Müşteri fiyat sorgu terminali (2E.8): uzaktan okunacak kadar büyük, sade. */
.terminal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 60vh;
  text-align: center;
  padding: var(--space-5);
}

.terminal__prompt {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

.terminal__input {
  width: min(24ch, 100%);
  padding: var(--space-3);
  font-size: var(--text-xl);
  text-align: center;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.terminal__input:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 2px;
}

.terminal__result {
  display: grid;
  gap: var(--space-2);
}

/* Kapak (10E-4a F): müşteri kitabı kapağından tanır. */
.terminal__cover {
  max-height: 220px;
  width: auto;
  justify-self: start;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.terminal__title {
  font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  font-weight: 600;
  line-height: 1.2;
}

.terminal__meta {
  color: var(--color-text-muted);
}

.terminal__price {
  font-size: clamp(2rem, 1.2rem + 4vw, 4rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.terminal__list {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.terminal__shelf,
.terminal__stock {
  font-size: var(--text-lg);
}

.terminal__empty {
  color: var(--color-text-muted);
  max-width: 40ch;
}

/* Müşteri telefonundan fiyat sorgu (10E-7): programdan ayrı, girişsiz sayfa. Telefon için tek
   sütun; düğme parmakla basılacak kadar büyük, fiyat uzaktan okunacak kadar iri. */
.pricecheck-page {
  background: var(--color-bg);
}

.pricecheck {
  display: grid;
  gap: var(--space-4);
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--space-4);
}

.pricecheck__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.pricecheck__mark {
  width: 2.5rem;
  height: 2.5rem;
}

.pricecheck__title {
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.1;
}

.pricecheck__place {
  color: var(--color-text-muted);
}

.pricecheck__scan {
  width: 100%;
  min-height: 3.25rem;
  font-size: var(--text-lg);
}

.pricecheck__note,
.pricecheck__hint {
  color: var(--color-text-muted);
}

.pricecheck__camera {
  display: grid;
  gap: var(--space-2);
}

.pricecheck__video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-lg);
}

.pricecheck__row {
  display: flex;
  gap: var(--space-2);
}

.pricecheck__row .input {
  flex: 1;
  min-width: 0;
}

.pricecheck__result {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* Fiyat gör sepeti, ad araması ve uzaktan talep (10E-8). */
.pricecheck__panel {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.pricecheck__panel-title {
  font-weight: 600;
  font-size: var(--text-lg);
}

.pricecheck__items {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pricecheck__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.pricecheck__item-text {
  min-width: 0;
}

.pricecheck__item-meta {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.pricecheck__qty {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-variant-numeric: tabular-nums;
}

.pricecheck__total {
  font-size: var(--text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pricecheck__code {
  font-size: clamp(3rem, 2rem + 6vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Kayıtlı filtre çubuğu: süzmeyi adıyla saklama ve CSV indirme (her listede aynı) */

.filter-bar__label {
  color: var(--color-text-muted);
}

.filter-bar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip__link {
  color: var(--color-text);
  text-decoration: none;
}

.chip__link:hover {
  text-decoration: underline;
}

.chip__form {
  display: inline;
}

.chip__remove {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0 2px;
  color: var(--color-text-muted);
  line-height: 1;
}

.chip__remove:hover {
  color: var(--color-danger);
}

.filter-bar__save {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.filter-bar__export {
  margin-inline-start: auto;
}

/* Toplu işlem: seçim sütunu ve işlem çubuğu */
.table td.select,
.table th.select {
  width: 36px;
  text-align: center;
}

.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-muted);
}

.bulk-bar__count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  min-width: 10ch;
}

.bulk-bar .field {
  min-width: 160px;
}

/* Boş durum */
.empty-state {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
}

.empty-state__title {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.empty-state .btn-row {
  justify-content: center;
  margin-top: var(--space-4);
}

/* Sayfalama (ONSO'nun listeleri gibi, 2026-10-20): toplam, sayfa numarası, sayfa boyu;
   tablonun üstünde ve altında. */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.pagination--top {
  padding-block: var(--space-2);
  border-top: 0;
  border-bottom: 1px solid var(--color-border);
}

.pagination__count b {
  color: var(--color-text);
}

.pagination__jump,
.pagination__size {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.pagination__number {
  width: 5ch;
  text-align: center;
}

.pagination__size select {
  width: auto;
}

/* Süzgeç paneli ve seçili süzgeçler (kullanıcı 2026-10-21: "yayınevleri çok yer kaplıyor"):
   sık kullanılanlar araç çubuğunda, ötekiler "Süzgeçler" panelinde; seçili olanlar etiket. */
.toolbar__more {
  flex-basis: 100%;
}

.toolbar__more > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  cursor: pointer;
}

.toolbar__more > summary::-webkit-details-marker {
  display: none;
}

.toolbar__panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.filter-chips__chip {
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-info-soft);
  border-color: var(--color-info-line);
}

.filter-chips__label {
  color: var(--color-text-muted);
}

.filter-chips__clear {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* Form */

.form-grid > .field--wide {
  grid-column: 1 / -1;
}

@media (max-width: 700px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.fieldset + .fieldset {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.fieldset__help {
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.field__required {
  color: var(--color-danger);
  margin-left: 2px;
}

.field__help {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.field__error {
  font-size: var(--text-sm);
  color: var(--color-danger);
  font-weight: 500;
}

/* Şifre alanı + Göster düğmesi yan yana (Faz 10A). */
.password-input {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}

.password-input > input {
  flex: 1 1 auto;
  min-width: 0;
}

.password-input__caps {
  color: var(--color-warning);
  font-weight: 600;
}

.input,
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="search"],
.field input[type="date"],
.field input[type="datetime-local"],
.field input[type="tel"],
.field input[type="url"],
.field select,
.field textarea {
  width: 100%;
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

.field textarea {
  min-height: 88px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.field--invalid input,
.field--invalid select,
.field--invalid textarea {
  border-color: var(--color-danger);
}

.choice-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.choice-list--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-weight: 400;
}

.choice input {
  margin-top: 3px;
  accent-color: var(--color-accent);
}

/* Yetki matrisi: gruplanmış onay kutuları */
.check-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}

.check-matrix__group {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-muted);
}

.check-matrix__title {
  margin-bottom: var(--space-2);
  font-weight: 600;
}

/* Sekmeler (sunucu tarafı; her sekme bir bağlantı) */

.tabs__link:hover {
  color: var(--color-text);
  text-decoration: none;
}

/* Tanım listesi (detay özetleri) */
.dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4) var(--space-5);
  margin: 0;
}

/* Araç çubuğu (filtreler) */

.toolbar .field {
  min-width: 180px;
}

.toolbar .field:first-child,
.toolbar .field--grow {
  flex: 1;
  min-width: 240px;
}

/* Diyalog (yerel <dialog>) */
.dialog {
  width: min(480px, calc(100vw - 2rem));
  text-align: left;
  white-space: normal;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
}

.dialog::backdrop {
  background: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.dialog__body {
  padding: var(--space-5);
}

.dialog__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
}

.dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-muted);
  border-top: 1px solid var(--color-border);
}

/* Sipariş merkezi (kullanıcı 2026-10-25: "tasarımı amatör olmasın, modern olsun, renk
   paletimizi yansıtsın"). Solda filtreler; sağda üstte SEPET ŞERİDİ (dolu sepet fiş ekranında
   açılır: "50 sipariş gelse … sepete basınca fiş ekranına dönebilir"), altında öneriler ve kapaklı
   vitrin. Renk disiplini: kart beyaz, altın yalnız "Yeni çıktı" süsünde, sepetler renkle değil ikon
   ve adla ayrılır. "Sepete ekle" DOLU MARKA KIRMIZISIDIR — bilinçli istisna (kullanıcı 2026-10-25,
   seçenek 2; dolu kırmızı başka yerde yalnız yıkıcı işlemdedir). */
.order-center .workspace__main {
  min-height: 0;
  overflow: hidden;
}

.order-center__search {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-2);
  max-width: 34rem;
  height: 2.5rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.order-center__search:focus-within {
  border-color: var(--color-action);
  box-shadow: var(--focus-ring);
}

.order-center__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--color-text);
  outline: none;
}

.order-center__layout {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.order-center__filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-4);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
}

/* Filtre sütununun görünüme göre bölmesi (Vitrin / Öteki kitabevleri). */
.order-center__pane:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.order-center__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--text-sm);
}

.order-center__group legend,
.order-center__label {
  margin-bottom: var(--space-1);
  padding: 0;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.order-center__choice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
}

.order-center__choice:hover {
  background: var(--color-action-soft);
}

.order-center__choice input {
  accent-color: var(--color-action);
}

.order-center__shelf {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
  padding: var(--space-5);
  overflow-y: auto;
}

.order-center__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.order-center__heading {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
}

.order-center__more {
  display: flex;
  justify-content: center;
  padding: var(--space-4) 0;
}

/* Vitrin kartları: kapak önde, 2:3 kitap oranı. */
.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: var(--space-5) var(--space-4);
}

.shelf-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--ease-base) var(--ease-curve),
    transform var(--ease-base) var(--ease-curve);
}

.shelf-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.shelf-card__cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  padding: 0;
  border: 0;
  background: var(--color-surface-sunken);
  cursor: zoom-in;
}

.shelf-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shelf-card__placeholder {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-4);
  border-left: 6px solid rgb(0 0 0 / 0.12);
  text-align: left;
}

.shelf-card__placeholder span {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.shelf-card__placeholder small {
  font-size: var(--text-xs);
  opacity: 0.85;
}

/* Kapağı olmayan kitabın tonu paletten: espresso, eski altın, mavi, yeşil etiket tonları. */
.shelf-card__placeholder--0 {
  background: var(--color-action);
  color: var(--color-gold-soft);
}

.shelf-card__placeholder--1 {
  background: var(--tag-gold-bg);
  color: var(--tag-gold-fg);
}

.shelf-card__placeholder--2 {
  background: var(--tag-blue-bg);
  color: var(--tag-blue-fg);
}

.shelf-card__placeholder--3 {
  background: var(--tag-green-bg);
  color: var(--tag-green-fg);
}

.shelf-card__badges {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.shelf-badge {
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-xs);
  font-weight: 600;
}

.shelf-badge--new {
  background: var(--color-gold);
  color: var(--color-action-text);
}

.shelf-badge--hot {
  background: var(--color-action);
  color: var(--color-action-text);
}

.shelf-badge--pool {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.shelf-badge--out {
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.shelf-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
}

.shelf-card__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.shelf-card__author,
.shelf-card__meta,
.shelf-card__source {
  margin: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shelf-card__meta,
.shelf-card__source {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.shelf-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
  font-variant-numeric: tabular-nums;
}

.shelf-card__price strong {
  font-size: var(--text-lg);
}

/* --- Töre Akademi (10N) ---------------------------------------------------------------------
   Trendyol Akademi örnek alındı (kullanıcı 2026-11-03): üstte Akademi şeridi, altında dört eşit
   filtre, satırda dört büyük kapaklı kart. Kapak yoksa kategorinin tonunda başlıklı kapak çizilir
   (içerik görselidir, arayüz rengi değil; renk disiplini düğme ve menüde geçerli). */
.academy-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.academy-bar__brand {
  color: inherit;
  text-decoration: none;
}

.academy-bar__brand h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
}

.academy-bar__brand span {
  color: var(--color-brand);
}

.academy-bar__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.academy-bar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}

.academy-bar__link:hover {
  background: var(--color-surface-muted);
  text-decoration: none;
}

.academy-bar__link[aria-current="page"] {
  background: var(--color-surface-sunken);
}

.academy-cats__panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(14rem, 1fr));
  gap: var(--space-2) var(--space-4);
  min-width: min(36rem, 90vw);
}

.academy-cats__count {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.academy-cats__empty {
  margin: 0;
  padding: var(--space-2) var(--space-3);
}

.academy-bar__search {
  position: relative;
  display: flex;
  flex: 1 1 16rem;
  justify-content: flex-end;
  min-width: 12rem;
}

.academy-bar__search input {
  width: 100%;
  max-width: 24rem;
  height: 2.75rem;
  padding: 0 2.5rem 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface-muted);
  font: inherit;
  color: var(--color-text);
}

.academy-bar__search input:focus {
  border-color: var(--color-text-muted);
  background: var(--color-surface);
}

.academy-bar__search-btn {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  display: inline-flex;
  padding: var(--space-1);
  border: 0;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transform: translateY(-50%);
}

/* Eğitim düğmesiyle gelinen ekranın rehberi: eski altın şeritle ayrılır (süs; kırmızı değil). */
.academy-here {
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-gold);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.academy-here__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.academy-here__head h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.academy-here .course-grid {
  padding: 0;
}

.academy-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.7fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* Filtre kutuları hücreyi doldurur ve şeritten iridir (Trendyol: dört eşit kutu). */
.academy-filters .combo {
  display: flex;
  width: 100%;
  height: 2.75rem;
}

.academy-count {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
}

.academy-count__clear {
  margin-left: auto;
  font-size: var(--text-sm);
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-5);
}

.course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--ease-base) var(--ease-curve),
    transform var(--ease-base) var(--ease-curve);
}

.course-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.course-card__cover {
  position: relative;
  display: flex;
  align-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  color: var(--color-action-text);
  text-decoration: none;
}

.course-card__cover:hover {
  text-decoration: none;
}

.course-card__cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-card__cover--0 {
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-action) 100%);
}

.course-card__cover--1 {
  background: linear-gradient(135deg, var(--color-info) 0%, var(--color-violet) 100%);
}

.course-card__cover--2 {
  background: linear-gradient(135deg, var(--color-success) 0%, var(--tag-teal-fg) 100%);
}

.course-card__cover--3 {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-warning) 100%);
}

.course-card__cover--4 {
  background: linear-gradient(135deg, var(--color-violet) 0%, var(--color-brand) 100%);
}

.course-card__cover--5 {
  background: linear-gradient(135deg, var(--color-action) 0%, var(--color-info) 100%);
}

.course-card__cover-title {
  display: -webkit-box;
  max-width: 85%;
  overflow: hidden;
  padding: var(--space-5);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.course-card__kind,
.course-card__draft {
  position: absolute;
  bottom: var(--space-3);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: rgb(0 0 0 / 0.55);
  color: var(--color-action-text);
  font-size: var(--text-xs);
  font-weight: 700;
}

.course-card__kind {
  right: var(--space-3);
}

.course-card__draft {
  left: var(--space-3);
}

.course-card__save {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  margin: 0;
}

.course-card__star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow);
  color: var(--color-text-muted);
  cursor: pointer;
}

.course-card__star.is-saved {
  color: var(--color-gold);
}

.course-card__star.is-saved svg {
  fill: currentColor;
}

.course-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.course-card__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-xs);
}

.course-card__flag {
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-weight: 700;
}

.course-card__flag--required {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.course-card__category {
  color: var(--color-text-muted);
  font-weight: 600;
}

.course-card__flag + .course-card__category {
  padding-left: var(--space-2);
  border-left: 1px solid var(--color-border-strong);
}

.course-card__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.course-card__title a {
  color: inherit;
  text-decoration: none;
}

.course-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

/* İlerleme: işletim sisteminin çubuğu değil, ince yeşil şerit (kartta ve ders listesinde). */
.course-card__progress {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  appearance: none;
}

.course-card__progress::-webkit-progress-bar {
  background: var(--color-surface-sunken);
}

.course-card__progress::-webkit-progress-value {
  background: var(--color-success);
}

.course-card__progress::-moz-progress-bar {
  background: var(--color-success);
}

.course-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-brand);
  font-weight: 700;
  text-decoration: none;
}

.course-card__cta:hover {
  text-decoration: underline;
}

.course-card__cta--done {
  color: var(--color-success);
}

.course-shelf {
  margin-bottom: var(--space-6);
}

.course-shelf__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: 600;
}

@media (max-width: 900px) {
  .academy-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .academy-cats__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .academy-bar__search {
    justify-content: stretch;
  }

  .academy-bar__search input {
    max-width: none;
  }
}

/* Eğitim sayfası: solda dersler, sağda açık ders. */
.course-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
}

.lesson-nav {
  position: sticky;
  top: var(--space-4);
  padding: var(--space-3);
}

.lesson-nav__head {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
}

.lesson-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.lesson-nav__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
}

.lesson-nav__item:hover,
.lesson-nav__item.is-current {
  background: var(--color-surface-sunken);
}

.lesson-nav__item.is-current {
  font-weight: 600;
}

.lesson-nav__mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.lesson-nav__mark.is-seen {
  border-color: var(--color-success-line);
  background: var(--color-success-soft);
  color: var(--color-success);
}

.lesson-nav__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lesson-nav__text small {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: 400;
}

.lesson {
  padding: var(--space-5);
}

.lesson__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.lesson__kind {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: 600;
}

.lesson__title {
  margin: 0;
  font-size: var(--text-xl);
}

.lesson__body,
.guide-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.guide-steps__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: var(--text-lg);
}

.guide-steps__no {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-action);
  color: var(--color-action-text);
  font-size: var(--text-sm);
}

.guide-steps__figure {
  margin: 0;
}

.guide-steps__figure img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.guide-steps__figure figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Slayt ve PDF tarayıcının kendi görüntüleyicisinde; video çerçevesi 16:9. */
.lesson-frame {
  width: 100%;
  height: min(78vh, 56rem);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
}

.lesson-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.lesson-frame--video {
  height: auto;
  aspect-ratio: 16 / 9;
}

.lesson-video {
  width: 100%;
  max-height: 78vh;
  border-radius: var(--radius-sm);
  background: var(--color-text);
}

.lesson__add-image {
  margin-top: var(--space-4);
}

.lesson__add-image form {
  margin-top: var(--space-3);
}

.lesson__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.lesson__done {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-success);
  font-weight: 600;
}

.lesson__feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
}

.lesson__feedback-q {
  flex-basis: 100%;
  margin: 0;
  font-weight: 600;
}

.lesson__feedback .field {
  flex: 1;
  min-width: 14rem;
}

.assign-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .course-layout,
  .assign-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .lesson-nav {
    position: static;
  }
}

/* `.btn` dosyanın sonunda yeniden tanımlanıyor; kartın içinde ondan özgül olmalı. */
.shelf-card .shelf-card__add {
  justify-content: center;
  width: 100%;
  margin-top: var(--space-2);
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-action-text);
}

.shelf-card .shelf-card__add:hover {
  border-color: var(--color-brand-hover);
  background: var(--color-brand-hover);
}

/* Sepetteki kitap: düğmenin yerinde "− Sepette 2 +" (açık yeşil, sepette olduğu bir bakışta). */
.shelf-card__stepper {
  justify-content: space-between;
  width: 100%;
  margin-top: var(--space-2);
  border-color: var(--color-success-line);
  background: var(--color-success-soft);
  color: var(--color-success);
}

.shelf-card__stepper .stepper__btn {
  background: transparent;
  color: var(--color-success);
}

.shelf-card__stepper .stepper__btn:hover {
  background: var(--color-success-line);
}

/* Görünüm seçici (Vitrin | Öteki kitabevleri): espresso dolgulu etkin parça. */
.segmented {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.segmented__item {
  padding: var(--space-1) var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.segmented__item:hover {
  color: var(--color-text);
}

.segmented__item.is-active {
  background: var(--color-action);
  color: var(--color-action-text);
}

/* Öteki kitabevleri (10C-13b): köşedeki özet ve kartın adet satırı. */
.store-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.store-summary__total {
  display: flex;
  flex-direction: column;
  min-width: 11rem;
}

.store-summary__label {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.store-summary__value {
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
}

.store-summary__top {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: top;
  font-size: var(--text-sm);
}

.store-summary__top li {
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  counter-increment: top;
}

.store-summary__top li::before {
  content: counter(top) ". ";
  color: var(--color-text-subtle);
}

.shelf-card__stock {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 600;
}

.shelf-card__mine {
  color: var(--color-success);
}

.shelf-card__mine--none {
  color: var(--color-text-subtle);
}

.shelf-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: auto;
}

.shelf-card__actions .shelf-card__add,
.shelf-card__actions .shelf-card__stepper {
  margin-top: var(--space-1);
}

.shelf-card__suggest {
  justify-content: center;
  width: 100%;
}

/* Öneriler: müşteri talebi, eksik gelen, kritik stok. */
.center-suggest {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.center-suggest__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  list-style: none;
  cursor: pointer;
}

.center-suggest__summary::-webkit-details-marker {
  display: none;
}

.center-suggest__lead {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-right: var(--space-2);
  font-weight: 700;
}

.center-suggest__lead .icon {
  color: var(--color-gold);
}

.center-suggest__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  font-size: var(--text-sm);
}

.center-suggest[open] .center-suggest__toggle .icon {
  transform: rotate(180deg);
}

.center-suggest__rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

.center-suggest__row {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.center-suggest__row + .center-suggest__row {
  border-top: 1px solid var(--color-border);
}

.center-suggest__kind {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
}

.center-suggest__kind--request {
  background: var(--tag-blue-bg);
  color: var(--tag-blue-fg);
}

.center-suggest__kind--short {
  background: var(--tag-amber-bg);
  color: var(--tag-amber-fg);
}

.center-suggest__kind--critical {
  background: var(--tag-gray-bg);
  color: var(--tag-gray-fg);
}

.center-suggest__kind--mine {
  background: var(--tag-gold-bg);
  color: var(--tag-gold-fg);
}

.center-suggest__buttons {
  display: inline-flex;
  gap: var(--space-1);
}

.center-suggest__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.center-suggest__source {
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Sepet şeridi: kaynak başına bir kutu + Hatırlat. Dolu sepetin ikonu espresso zemine döner. */
.cart-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-3);
}

.cart-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  text-decoration: none;
}

.cart-chip--full {
  border-color: var(--color-action);
  box-shadow: var(--shadow-sm);
}

.cart-chip--full:hover,
.cart-chip--remind:hover {
  box-shadow: var(--shadow);
}

.cart-chip--remind {
  border-style: dashed;
  background: transparent;
  cursor: pointer;
}

.cart-chip__icon {
  display: inline-flex;
  flex: none;
  padding: 7px;
  border-radius: var(--radius-sm);
  background: var(--color-action-soft);
  color: var(--color-action);
}

.cart-chip--full .cart-chip__icon {
  background: var(--color-action);
  color: var(--color-gold-soft);
}

.cart-chip__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.cart-chip__name {
  font-weight: 700;
}

.cart-chip__count {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-chip__go {
  color: var(--color-text-muted);
}

.stepper {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
}

.stepper__btn {
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-md);
  cursor: pointer;
}

.stepper__btn:hover {
  background: var(--color-action-soft);
}

.stepper__value {
  min-width: 1.75rem;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: center;
}

/* Kitabın büyük kartı (vitrinde kapağa tıklayınca). */
.book-sheet {
  width: min(52rem, calc(100vw - 2rem));
}

.book-sheet__body {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-5);
}

.book-sheet__cover {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.book-sheet__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.book-sheet__title {
  margin: 0;
  font-size: var(--text-2xl);
}

.book-sheet__author {
  margin: var(--space-1) 0 var(--space-4);
  color: var(--color-text-muted);
}

.book-sheet__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
}

.book-sheet__facts dt {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.book-sheet__facts dd {
  margin: 0;
}

.book-sheet__blurb {
  max-height: 12rem;
  overflow-y: auto;
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .order-center__layout {
    grid-template-columns: 1fr;
  }

  .order-center__filters {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .center-suggest__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .book-sheet__body {
    grid-template-columns: 1fr;
  }
}

/* Kasada yeni müşteri (10G-1): telefon kutusu "Ara" düğmesiyle aynı satırda. */
.customer-phone input {
  flex: 1;
  min-width: 0;
}

/* Doğum günü (2026-11-04): gün ve ay seçilir, yıl yazılır; üçü tek satırda, hepsi isteğe bağlı. */
.birthday-field {
  margin-inline: 0;
  padding: 0;
  border: 0;
}

.birthday-field__row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 6rem;
  gap: var(--space-2);
}

/* Aydınlatma ve onay metni (KVKK): kasada ve izin ekranında okunur, kaydırılır. */
.notice-text {
  max-height: 14rem;
  overflow-y: auto;
  padding: var(--space-3);
  background: var(--color-surface-muted);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* 5 ─ Kalıplar ──────────────────────────────────────────────────────── */

/* Detay: özet + sekmeler */
.detail-summary {
  margin-bottom: var(--space-5);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Form: gövde + yapışkan alt çubuk */

/* Sihirbaz: adım göstergesi */
.steps {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps__item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-weight: 500;
  counter-increment: step;
}

.steps__item::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-strong);
  font-size: var(--text-xs);
  font-weight: 700;
}

.steps__item--done {
  color: var(--color-success);
}

.steps__item--done::before {
  content: "✓";
  background: var(--color-success-soft);
  border-color: var(--color-success);
}

.steps__item[aria-current="step"] {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.steps__item[aria-current="step"]::before {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-action-text);
}

/* Pano: gösterge kartları */
/* Kısayol kutuları — ana sayfanın en üstü (kitabevi personeli, 2026-09-29).
   Şube personeli ana sayfaya "ne yapmalıyım" diye değil "şunu açayım" diye
   geliyor; kullandıkları programda da ana sayfa böyle kutulardan oluşuyor.
   Kutular yetkiye göre süzülür (apps/ui/workdesk.py).

   İkonlar NÖTR renktedir: renk disiplini gereği marka kırmızısı yalnız logo,
   aktif menü, odak halkası ve grafikte kullanılır. Kutuları ayıran şey renk
   değil ikon biçimi ve etikettir. */
.shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.shortcut {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 108px;
  padding: var(--space-4) var(--space-3);
  text-align: center;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition:
    border-color var(--ease-fast) var(--ease-curve),
    color var(--ease-fast) var(--ease-curve),
    box-shadow var(--ease-fast) var(--ease-curve),
    transform var(--ease-fast) var(--ease-curve);
}

/* Üstüne gelince sitedeki gibi (kullanıcı 2026-11-12): kenar ve ikon marka kırmızısına döner,
   kutu hafifçe yükselir (sitenin ikon düğmesi ve kitap kartı). */
.shortcut:hover {
  color: var(--color-brand);
  border-color: var(--color-brand);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .shortcut:hover {
    transform: none;
  }
}

.shortcut:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.shortcut__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.shortcut:hover .shortcut__icon {
  background: var(--color-brand-soft);
  color: var(--color-brand);
}

.shortcut__label {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.3;
}

/* Ana sayfa (10E-3, Arayüz — KARAR): rolün en sık işi BÜYÜK VE KOYU kutu (espresso);
   ilk kutular açık durur, gerisi "Tüm kısayollar"da. */
.shortcut--primary {
  grid-column: span 2;
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  text-align: left;
  /* Marka kırmızısı (kullanıcı 2026-11-12): ana sayfanın en sık kullanılan tek kutusu; renk
     disiplininin bilinçli istisnası — ana sayfada yıkıcı işlem yok, karışmaz. */
  color: var(--color-action-text);
  background: var(--color-brand);
  border-color: var(--color-brand);
}

.shortcut--primary:hover {
  color: var(--color-action-text);
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
}

.shortcut--primary .shortcut__icon,
.shortcut--primary:hover .shortcut__icon {
  background: color-mix(in srgb, var(--color-action-text) 14%, transparent);
  color: var(--color-action-text);
}

.shortcut--primary .shortcut__label {
  font-size: var(--text-lg);
  font-weight: 600;
}

.shortcuts__more {
  grid-column: 1 / -1;
}

.shortcuts__more > summary {
  width: max-content;
  list-style: none;
  cursor: pointer;
}

.shortcuts__more > summary::-webkit-details-marker {
  display: none;
}

.shortcuts__more .shortcuts {
  margin: var(--space-3) 0 0;
}

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-5);
  align-items: start;
}

.home-grid__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

/* Üst tarih satırı: eski altın yalnız süs (renk disiplini). */
.home-date {
  margin: 0 0 var(--space-1);
  color: var(--color-gold);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-section-title {
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
}

.home-subtitle {
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .home-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Tek sütunda en sık iş (hızlı işlemler, günün işleri) takvimden önce gelir. */
  .home-grid__col:last-child {
    order: -1;
  }
}

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: var(--space-5);
}

/* Adım listesi (kurulum rehberleri) */
.steps-list {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Görev ayrıntıları: alt maddeler, yorum akışı, dosya listesi */
.checklist,
.filelist,
.thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.checklist__item--done span {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.filelist li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.thread__item {
  padding: var(--space-3);
  background: var(--color-surface-muted);
  border-radius: var(--radius);
}

.thread__meta {
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Pano (kanban) — 10M GÖRÜNÜMÜ (kullanıcı 2026-11-01: "tasarımı çok kötü geldi"; Trello ve
   Odoo'dan onaylanan taslak). Pano TAM EKRANDIR (fiş kipi): renkli zemin (pano başına, kırmızı
   yok), ince üst şerit, gri ve yuvarlak listeler (yükseklik içerikten; "+ Kart ekle" son kartın
   altında), beyaz kart ve hafif gölge, dolu renkli etiketler, kişiye göre renklenen daireler.
   Konumlandırma kabıdır: sütunlardaki gizli etiketler (visually-hidden, mutlak konumlu) kayan
   kutunun içinde kalsın; kalmazsa telefonda bütün sayfayı yana genişletiyordu (10E-5). */
.board-page {
  --board-bg: #2f5d8a;
  --board-list: #f1f2f4;
  --board-ink: #172b4d;
  --board-ink-muted: #44546f;
  --board-card-shadow: 0 1px 1px rgb(9 30 66 / 25%), 0 0 1px rgb(9 30 66 / 31%);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: calc(100dvh - var(--topbar-height) - 2 * var(--space-2));
  padding: 0 0 var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--board-bg);
  color: var(--board-ink);
}

.board-page--blue { --board-bg: #2f5d8a; }
.board-page--teal { --board-bg: #1f6f6b; }
.board-page--green { --board-bg: #2e6b4f; }
.board-page--purple { --board-bg: #5b4b8a; }
.board-page--brown { --board-bg: #6b4f3a; }
.board-page--slate { --board-bg: #4b5866; }

/* Üst şerit: panonun adı, görünüm seçici, ekip, Filtre ve ⋯. Zemin rengin üstünde koyu tül. */
.board-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: rgb(0 0 0 / 18%);
  color: #fff;
}

.board-bar__title {
  margin: 0;
  font-family: inherit;
  font-size: var(--text-lg);
  font-weight: 700;
  color: #fff;
}

.board-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius);
  background: rgb(255 255 255 / 20%);
  color: #fff;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.board-bar__btn::-webkit-details-marker {
  display: none;
}

.board-bar__btn:hover,
.board-pop[open] > .board-bar__btn {
  background: rgb(255 255 255 / 32%);
  color: #fff;
}

.board-bar__btn .icon {
  width: 16px;
  height: 16px;
}

/* Şeridin ana işi ("Görev oluştur"): beyaz dolu, zeminin renginde yazı. */
.board-bar__btn--main,
.board-bar__btn--main:hover {
  background: #fff;
  color: var(--board-bg);
}

.board-bar__count {
  min-width: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #fff;
  color: var(--board-bg);
  font-size: var(--text-xs);
  text-align: center;
}

.board-bar__views {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--radius);
  background: rgb(255 255 255 / 20%);
}

.board-bar__view {
  padding: 2px var(--space-3);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.board-bar__view:hover {
  background: rgb(255 255 255 / 18%);
  color: #fff;
}

.board-bar__view.is-active {
  background: #fff;
  color: var(--board-bg);
}

.board-bar__spacer {
  flex: 1;
}

.board-bar__people {
  display: inline-flex;
}

.board-bar__people .avatar {
  margin-left: -6px;
  box-shadow: 0 0 0 2px var(--board-bg);
}

/* Filtre ve ⋯ açılır panelleri (işletim sisteminin açılır kutusu yok: kullanıcı "Windows 95"). */
.board-pop {
  position: relative;
}

.board-pop__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: var(--space-2);
  width: min(340px, 90vw);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
}

.board-pop__panel--menu {
  width: auto;
  min-width: 220px;
  gap: 0;
  padding: var(--space-1);
}

.board-pop__label {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
}

.board-pop__search {
  width: 100%;
}

.board-pop__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* Filtrede seçilebilen çip: radyo/onay kutusu gizli değil, çipin içinde küçük durur. */
.chip-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--text-xs);
  cursor: pointer;
}

.chip-toggle:has(input:checked) {
  border-color: var(--color-action);
  background: var(--color-surface-sunken);
  font-weight: 600;
}

/* İşaret kutusu gizlidir ama klavyeyle seçilir; seçili çip kenarıyla belli olur. */
.chip-toggle input {
  position: absolute;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.chip-toggle:has(input:focus-visible) {
  box-shadow: var(--focus-ring);
}

.chip-toggle .icon {
  width: 14px;
  height: 14px;
  color: var(--color-gold);
}

.board-notice {
  margin: 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 88%);
  font-size: var(--text-sm);
}

.board {
  position: relative;
  display: flex;
  flex: 1;
  gap: var(--space-3);
  align-items: flex-start;
  min-height: 0;
  padding: var(--space-1) var(--space-3) var(--space-2);
  overflow-x: auto;
}

/* Boş pano (ör. henüz kimseye görev verilmedi): beyaz kutu, açıklama ve ana iş düğmesi. */
.board__empty {
  max-width: 420px;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--board-card-shadow);
}

.board__column {
  display: flex;
  flex-direction: column;
  flex: 0 0 272px;
  max-height: 100%;
  padding: var(--space-2);
  border-radius: 12px;
  background: var(--board-list);
  box-shadow: var(--board-card-shadow);
}

.board__column--over {
  box-shadow: 0 0 0 2px #fff;
}

.board__column-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
}

.board__column-title {
  flex: 1;
  margin: 0;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--board-ink);
}

.board__column-count {
  font-size: var(--text-xs);
  color: var(--board-ink-muted);
}

/* Kişi sütununda uyarı ("2 gecikti · 1 onayda"). */
.board__column-alert {
  padding: 0 6px;
  border-radius: 999px;
  background: #ffe2bd;
  color: #8f530b;
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.board__column-count--over {
  padding: 0 6px;
  border-radius: 999px;
  background: #ffe2bd;
  color: #8f530b;
  font-weight: 700;
}

.board__column-note {
  margin: 0;
  padding: 0 var(--space-2) var(--space-1);
  font-size: var(--text-xs);
  color: var(--board-ink-muted);
}

/* Durum çubuğu (Odoo): her kart bir dilim; dilim eşit esner, oran kendiliğinden çıkar. */
.board__bar {
  display: flex;
  gap: 2px;
  height: 4px;
  margin: 0 var(--space-2) var(--space-2);
  overflow: hidden;
  border-radius: 2px;
}

.board__bar:empty {
  display: none;
}

.board__bar-seg {
  flex: 1 1 0;
  background: #b4b2a9;
}

.board__bar-seg--success { background: #22a06b; }
.board__bar-seg--warning { background: #e2a03f; }
.board__bar-seg--info { background: #579dff; }

.board__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 4px;
  margin: 0;
  padding: 2px;
  list-style: none;
  overflow-y: auto;
}

.board__add {
  padding: var(--space-1) 0 0;
}

.board__add input {
  width: 100%;
  padding: 6px var(--space-2);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--board-ink-muted);
  font: inherit;
  font-size: var(--text-sm);
}

.board__add input:hover {
  background: rgb(9 30 66 / 8%);
}

.board__add input:focus {
  background: var(--color-surface);
  box-shadow: var(--board-card-shadow);
  color: var(--board-ink);
}

.board__add input::placeholder {
  color: var(--board-ink-muted);
}

.board__fold {
  display: inline-flex;
  padding: 2px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--board-ink-muted);
  cursor: pointer;
  opacity: 0;
}

.board__column:hover .board__fold,
.board__fold:focus-visible {
  opacity: 1;
}

.board__fold:hover {
  background: rgb(9 30 66 / 8%);
}

.board__fold .icon {
  width: 16px;
  height: 16px;
}

/* Daraltılmış sütun ince bir şerittir: adı dikey, kart sayısı görünür. */
.board__column--folded {
  position: relative;
  flex: 0 0 44px;
  align-self: flex-start;
  padding: var(--space-2) 0;
  background: rgb(255 255 255 / 30%);
  cursor: pointer;
}

.board__column--folded .board__column-head {
  flex-direction: column;
  gap: var(--space-2);
  padding: 0;
}

.board__column--folded .board__column-title {
  writing-mode: vertical-rl;
  color: #fff;
}

.board__column--folded .board__column-count {
  color: #fff;
}

/* Şeridin tamamı açma düğmesidir (görünmez; klavyeyle odaklanınca halka çıkar). */
.board__column--folded .board__fold {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
}

.board__column--folded .board__fold:focus-visible {
  opacity: 1;
  background: transparent;
  box-shadow: var(--focus-ring);
}

.board__column--folded .board__cards,
.board__column--folded .board__add,
.board__column--folded .board__bar,
.board__column--folded .board__column-note {
  display: none;
}

.board__column--done:not(.board__column--folded) .board__column-title::after {
  content: " ✓";
  color: #22a06b;
}

.board__status {
  margin: 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: var(--text-sm);
}

.board__status[data-tone="error"] {
  box-shadow: inset 3px 0 0 var(--color-danger);
}

.board__status[data-tone="warning"] {
  box-shadow: inset 3px 0 0 var(--color-warning);
}

/* Kart (Trello): beyaz, yuvarlak, hafif gölge; sürüklenirken eğilir. */
.board-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--color-surface);
  box-shadow: var(--board-card-shadow);
  cursor: pointer;
}

.board-card:hover {
  box-shadow: 0 0 0 2px #388bff;
}

.board-card__body {
  padding: var(--space-2) var(--space-3) var(--space-2);
}

.board-card--dragging {
  opacity: 0.6;
  transform: rotate(3deg);
}

/* Sürüklenen kartın bırakılacağı yer. */
.board-card--placeholder {
  min-height: 36px;
  border-radius: 8px;
  background: rgb(9 30 66 / 10%);
  box-shadow: none;
}

.board-card__cover {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
  background: var(--color-surface-sunken);
}

.board-card__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 var(--space-1);
  padding: 0;
  list-style: none;
}

/* Pano etiketi kartta ve filtrede DOLU renktir (Trello); kart penceresindeki `.tag` açık kalır. */
.card-label {
  display: inline-block;
  min-width: 40px;
  padding: 0 var(--space-2);
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 18px;
  background: #dcdfe4;
  color: #44546f;
}

.card-label--blue { background: #8fb8f6; color: #09326c; }
.card-label--green { background: #7ee2b8; color: #164b35; }
.card-label--amber { background: #fec57b; color: #5f3811; }
.card-label--gold { background: #f5cd47; color: #533f04; }
.card-label--purple { background: #b8acf6; color: #352c63; }
.card-label--teal { background: #6cc3e0; color: #164555; }

.board-card__title {
  display: block;
  color: var(--board-ink);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.board-card__title:hover {
  color: var(--board-ink);
}

.board-card__star {
  display: inline-flex;
  margin-right: 4px;
  vertical-align: -2px;
  color: var(--color-gold);
}

.board-card__star .icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Açıklamanın ilk iki satırı; sığmayan "…" ile kesilir. */
.board-card__excerpt {
  display: -webkit-box;
  margin: 2px 0 0;
  overflow: hidden;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--board-ink-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.board-card__meta,
.board-card__badges,
.board-card__next {
  margin: 4px 0 0;
  font-size: var(--text-xs);
  color: var(--board-ink-muted);
}

.board-card__next-label {
  font-weight: 600;
}

/* Bekleyen kart (10M-C): önündeki iş bitmedi. Kilit değil uyarı; bilgi rengi. */
.board-card__wait {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0 0;
  font-size: var(--text-xs);
  color: #0c66e4;
}

.board-card__wait .icon {
  width: 13px;
  height: 13px;
}

.board-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--board-ink-muted);
}

.board-card__stat,
.board-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.board-card__stat .icon,
.board-card__chip .icon {
  width: 13px;
  height: 13px;
}

.board-card__stat--done {
  padding: 0 4px;
  border-radius: 3px;
  background: #22a06b;
  color: #fff;
}

.board-card__stat--idle {
  color: var(--color-text-subtle);
}

/* Tarih ve durum çipi: gecikti turuncu (uyarıdır, kırmızı değil), bitti/onaylandı yeşil,
   değişiklik istendi sarı, bekliyor mavi. */
.board-card__chip {
  padding: 0 4px;
  border-radius: 3px;
}

.board-card__chip--late { background: #ffe2bd; color: #8f530b; }
.board-card__chip--done,
.board-card__chip--approved { background: #dcfff1; color: #216e4e; }
.board-card__chip--changes { background: #fff7d6; color: #7f5f01; }
.board-card__chip--waiting { background: #e9f2ff; color: #0055cc; }

.board-card__people {
  display: inline-flex;
  margin-left: auto;
}

.board-card__people .avatar + .avatar {
  margin-left: -4px;
}

/* Kartın üstündeki düğmeler (Onayla, Geri gönder): kart açılmadan basılır. */
.board-card__actions {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

/* Görev penceresinde durum satırı ve durum düğmeleri. */
.task-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}

.task-actions form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.task-actions input[type="text"] {
  flex: 1 1 140px;
}

/* Tablo ve takvim görünümünün seçicisi (10M): aynı pano, sayfa kalıbında. */
.board-views {
  margin-bottom: var(--space-3);
}

.board-views .segmented__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  text-decoration: none;
}

.board-views .icon {
  width: 16px;
  height: 16px;
}

/* Renkli etiket (pano etiketi). Renk `LabelColor`; zemin açık, yazı koyu. */
.tag {
  display: inline-block;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
  background: var(--tag-gray-bg);
  color: var(--tag-gray-fg);
}

.tag--blue { background: var(--tag-blue-bg); color: var(--tag-blue-fg); }
.tag--green { background: var(--tag-green-bg); color: var(--tag-green-fg); }
.tag--amber { background: var(--tag-amber-bg); color: var(--tag-amber-fg); }
.tag--gold { background: var(--tag-gold-bg); color: var(--tag-gold-fg); }
.tag--purple { background: var(--tag-purple-bg); color: var(--tag-purple-fg); }
.tag--teal { background: var(--tag-teal-bg); color: var(--tag-teal-fg); }

/* Kişinin baş harfleri (kart yüzü); adı ekran okuyucuya ve ipucuna yazılır. */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--space-1);
  border-radius: 999px;
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.avatar--named {
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Kişiye göre renk (10M; Trello ve Odoo gibi): ton kimlikten türer, aynı kişi her yerde aynı
   renktir (`apps.ui.boards.BoardPersonView.tone`). Koyu zemin, beyaz yazı (4.5:1 üstü). */
.avatar--t1 { background: #2f5d8a; color: #fff; }
.avatar--t2 { background: #2e7d4f; color: #fff; }
.avatar--t3 { background: #8f530b; color: #fff; }
.avatar--t4 { background: #5b4b8a; color: #fff; }
.avatar--t5 { background: #1f6f6b; color: #fff; }
.avatar--t6 { background: #6b4f3a; color: #fff; }
.avatar--t7 { background: #4b5866; color: #fff; }
.avatar--t8 { background: #8a3f6b; color: #fff; }

.avatar--more {
  background: rgb(255 255 255 / 30%);
  color: #fff;
}

/* --- Proje sayfası: tek iş yeri (10M; kullanıcı 2026-11-01) ------------------------------------
   Aşama şeridi (geçilen yeşil, şimdiki vurgulu, Stokta kilitli: baskıyla gelinir), sıradaki aşamanın
   kapısı (kilit ve uyarılar, eksik iş tek tıkla) ve İşler sekmesi (görev penceresi bu sayfada). */
.stage-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.stage-steps__item {
  display: inline-flex;
  flex: 1 1 110px;
  align-items: center;
  gap: var(--space-1);
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.stage-steps__item--done {
  border-color: var(--color-success-line);
  background: var(--color-success-soft);
  color: var(--color-success);
}

.stage-steps__item--current {
  border: 2px solid var(--color-info);
  background: var(--color-info-soft);
  color: var(--color-info);
  font-weight: 700;
}

.stage-steps__item--aside {
  border: 2px solid var(--color-warning-line);
  background: var(--color-warning-soft);
  color: var(--color-warning);
  font-weight: 700;
}

.stage-steps__item--closed {
  border-color: var(--color-danger-line);
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-weight: 700;
}

.gate {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-warning-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.gate--alert {
  border-color: var(--color-danger-line);
  background: var(--color-danger-soft);
}

.gate__title {
  margin: 0 0 var(--space-2);
  font-weight: 700;
  color: var(--color-warning);
}

.gate--alert .gate__title {
  color: var(--color-danger);
}

.gate__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gate__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.gate__item > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.gate__item--lock {
  font-weight: 600;
}

.gate__actions {
  display: inline-flex;
  gap: var(--space-2);
}

.project-board-line {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* İşler listesindeki görev yüzleri pano kartıdır: panonun yazı ve gölge değişkenleri burada da. */
.project-work {
  --board-ink: #172b4d;
  --board-ink-muted: #44546f;
  --board-card-shadow: 0 1px 1px rgb(9 30 66 / 25%), 0 0 1px rgb(9 30 66 / 31%);
}

.project-work__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.project-work__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4);
  list-style: none;
}

.project-work__empty {
  margin: 0;
  padding: 0 var(--space-4) var(--space-4);
}

.project-work__done summary {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
}

/* Maliyet ekle penceresi (10M; kullanıcı 2026-11-01, ikinci taslak): ikonlu tür seçimi, iki sütun
   (kalem · ödeme planı), ₺/%/gün kutunun içinde, tek parça seçiciler, önizleme ve özet. */
.card-window:has(.cost-window) {
  width: min(880px, calc(100vw - 2rem));
}

.cost-window {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cost-window__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.cost-window__title {
  margin: 0;
  font-family: inherit;
  font-size: var(--text-lg);
  font-weight: 700;
}

.cost-window__label {
  display: block;
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
}

/* Kalem türleri: ilk satır görünür, gerisi "Tümü"nde; "Tür ekle" ve "Sırala" başlığın sağında. */
.cost-kinds__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.cost-kinds__tools {
  display: inline-flex;
  gap: var(--space-3);
  font-size: var(--text-xs);
}

.cost-kinds__tools .icon {
  width: 12px;
  height: 12px;
}

.cost-window__kinds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-2);
}

.cost-kinds__new {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.cost-kinds__new[hidden] {
  display: none;
}

.cost-kinds__new .input {
  flex: 1 1 14rem;
}

.cost-kind-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--space-1) var(--space-2);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius);
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}

.cost-kind-more span {
  font-weight: 400;
  color: var(--color-text-muted);
}

/* Sırala: türler sürüklenir. */
.cost-kinds.is-sorting .cost-kind span {
  border-style: dashed;
  cursor: grab;
}

.cost-kinds.is-sorting .cost-kind.is-dragging {
  opacity: 0.4;
}

.cost-kind {
  position: relative;
}

.cost-kind input {
  position: absolute;
  opacity: 0;
}

.cost-kind span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  height: 100%;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-align: center;
  cursor: pointer;
}

.cost-kind input:checked + span {
  border: 2px solid var(--color-info);
  background: var(--color-info-soft);
  color: var(--color-info);
  font-weight: 700;
}

.cost-kind input:focus-visible + span {
  outline: 3px solid var(--color-brand);
  outline-offset: 2px;
}

.cost-window__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.cost-window__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.cost-field {
  min-width: 0;
}

.cost-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.cost-row--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cost-row--amount {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.cost-row[hidden],
.cost-field[hidden] {
  display: none;
}

.cost-input {
  position: relative;
  display: block;
}

.cost-input .input {
  width: 100%;
  padding-right: 2.6rem;
}

.cost-input > span {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  pointer-events: none;
}

.cost-input--big .input {
  min-height: 44px;
  font-size: var(--text-lg);
  font-weight: 700;
}

.cost-input--short {
  max-width: 140px;
}

.cost-royalty {
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--color-surface-sunken);
}

.cost-royalty[hidden] {
  display: none;
}

/* Tek parça seçici (stopaj, ödeme): radyo düğmeleri bitişik düğme olur. */
.seg {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
}

.seg label {
  position: relative;
  flex: 1 1 0;
}

.seg input {
  position: absolute;
  opacity: 0;
}

.seg span {
  display: block;
  padding: var(--space-2) var(--space-1);
  border-left: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-sm);
  text-align: center;
  cursor: pointer;
}

.seg label:first-child span {
  border-left: 0;
}

.seg input:checked + span {
  background: var(--color-info-soft);
  color: var(--color-info);
  font-weight: 700;
}

.seg input:focus-visible + span {
  outline: 3px solid var(--color-brand);
  outline-offset: -3px;
}

.cost-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.cost-plan {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-surface-sunken);
  list-style: none;
}

.cost-plan:empty {
  display: none;
}

.cost-plan li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.cost-plan li:first-child {
  border-top: 0;
}

.cost-sum {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.cost-sum > div {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-surface-sunken);
}

.cost-sum span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.cost-sum strong {
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
}

.cost-window__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.cost-window__hint {
  flex: 1 1 220px;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (max-width: 760px) {
  .cost-window__body,
  .cost-row--amount {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Kart penceresi (10E-5): kart panonun üstünde açılır ------------------ */
.card-window {
  width: min(960px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}

.task-new__label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
}

.task-new__dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.task-new__dates .chip-toggle {
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-xs);
}

.task-new__dates .chip-toggle.is-active {
  border-color: var(--color-action);
  background: var(--color-surface-sunken);
  font-weight: 600;
}

.task-new__check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

/* Birden çok kişi seçilince çalışma şekli (herkes ayrı / biri yeter). */
.task-new__mode {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-sunken);
}

.task-new__mode[hidden] {
  display: none;
}

.task-new__mode .task-new__check {
  align-items: flex-start;
}

/* "Kime": yazarak aranan çoklu kişi seçimi; seçilenler etiket olur (10M). */
.people-pick {
  position: relative;
  display: grid;
  gap: var(--space-1);
}

.people-pick__chosen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.people-pick__chosen:empty {
  display: none;
}

.people-pick__chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px 2px 10px;
  border-radius: 999px;
  background: var(--color-surface-sunken);
  font-size: var(--text-sm);
  font-weight: 600;
}

.people-pick__chip button {
  display: inline-flex;
  padding: 2px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.people-pick__chip button:hover {
  background: var(--color-border);
  color: var(--color-text);
}

.people-pick__list {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 5;
  max-height: 240px;
  margin: 2px 0 0;
  padding: var(--space-1);
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow);
  list-style: none;
}

.people-pick__list button {
  display: block;
  width: 100%;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.people-pick__list button:hover,
.people-pick__list button:focus {
  background: var(--color-surface-sunken);
}

/* "@" yazınca açılan kişi listesi (10M): kutunun altına, betik konumlar. */
.mention-list {
  position: fixed;
  z-index: 50;
  max-width: min(360px, calc(100vw - 2rem));
  max-height: 280px;
  margin: 0;
  padding: var(--space-1);
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  list-style: none;
}

.mention-list__item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}

.mention-list__item span {
  color: var(--color-text-muted);
}

.mention-list__item:hover,
.mention-list__item.is-active {
  background: var(--color-surface-sunken);
}

.mention-list__empty {
  padding: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.card-window__frame {
  padding: var(--space-5);
}

.card-window__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

.card-window__crumb {
  flex: 1 0 100%;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.card-window__title {
  flex: 1 1 auto;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  font: inherit;
  font-size: var(--text-xl);
  font-weight: 600;
}

.card-window__title:hover,
.card-window__title:focus {
  border-color: var(--color-border);
  background: var(--color-surface);
}

.card-window__alert {
  margin-bottom: var(--space-3);
}

.card-window__saved {
  min-height: 1.2em;
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.card-window__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--space-5);
}

.card-window__main,
.card-window__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.card-window__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.card-window__section textarea,
.card-window__comment textarea {
  width: 100%;
}

.card-window__label--sub {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-weight: 400;
}

.card-window__heading,
.card-window__label {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

.card-window__count {
  margin-left: var(--space-2);
  color: var(--color-text-muted);
  font-weight: 400;
}

.card-window__progress {
  width: 100%;
  height: 6px;
  margin-bottom: var(--space-3);
  accent-color: var(--color-success);
}

.card-window__checklist .checklist__item {
  flex-wrap: wrap;
}

.checklist__text {
  flex: 1 1 12rem;
}

.checklist__who,
.checklist__due {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.checklist__due--late {
  color: var(--color-warning);
  font-weight: 600;
}

.checklist__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.checklist__form input[type="text"] {
  flex: 1 1 12rem;
}

.checklist__form--new {
  margin-top: var(--space-3);
}

/* Alt görevin tamamlama işareti (10M): yuvarlak; boşken gri halka, üstüne gelince tik belirir,
   tamamlanınca yeşil dolar. Görevin kendisi yan sütundaki yeşil "Görevi tamamla"yla biter. */
.task-check {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-surface);
  color: transparent;
  cursor: pointer;
}

.task-check .icon {
  width: 16px;
  height: 16px;
}

.task-check:hover {
  border-color: var(--color-success);
  color: var(--color-success);
}

.task-check.is-done {
  border-color: var(--color-success);
  background: var(--color-success);
  color: var(--color-surface);
}

.task-check--sm {
  width: 22px;
  height: 22px;
}

.task-check--sm .icon {
  width: 13px;
  height: 13px;
}

.subtasks {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.subtasks__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  background: var(--color-surface-sunken);
}

.subtasks__item form {
  display: flex;
}

.subtasks__title {
  flex: 1 1 12rem;
  text-align: left;
  font-weight: 600;
}

.subtasks__item--done .subtasks__title {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.subtasks__who {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Bağlantı görünümlü düğme (pencere açar; adres değiştirmez). */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-info);
  font: inherit;
  cursor: pointer;
}

.link-button:hover {
  text-decoration: underline;
}

.subtasks__title.link-button {
  color: var(--color-text);
}

/* Kontrol listesinde işaret düğmesi: tıklayınca madde (ve görevi) tamamlanır. */
.checkbox-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-success);
  cursor: pointer;
}

.checkbox-button .icon {
  width: 16px;
  height: 16px;
}

.checklist__item--done .checkbox-button {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.card-window__comment {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.card-window__group > select,
.card-window__group > input,
.card-window__move select,
.card-window__move input {
  width: 100%;
}

.card-window__move {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.card-window__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 11rem;
  overflow-y: auto;
}

.card-window__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.card-window__star .icon {
  width: 16px;
  height: 16px;
  color: var(--color-gold);
}

/* Panoya özel alanlar (10M-D): ad üstte, kutu altta; salt okunurda tanım listesi. */
.card-window__fields {
  display: grid;
  gap: var(--space-2);
}

.card-window__field {
  display: grid;
  gap: 2px;
  font-size: var(--text-sm);
}

.card-window__field > span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.card-window__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  font-size: var(--text-sm);
}

.card-window__facts dt {
  color: var(--color-text-muted);
}

.card-window__facts dd {
  margin: 0;
}

.card-window__new-label form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Görev penceresinin yan sütun sonu (10M; kullanıcı 2026-11-01): fiş ekranının renkli tuşları
   (`doc-key`) — görevin sayfası mavi, "Görevi iptal et" Kapat gibi kırmızı ton, altında büyük
   yeşil kenarlı "Görevi tamamla" (Tamamla gibi); tamamlanmışta amber "Yeniden aç". */
.task-side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.task-side form {
  display: flex;
}

.task-side .btn {
  flex: 1 1 auto;
  justify-content: center;
}

.card-window__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (max-width: 760px) {
  .card-window__body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .board__column {
    flex: 0 0 85vw;
  }

  .board-bar__people {
    display: none;
  }
}

/* İşlem ekranı: tam ekran, klavye odaklı (kasa, hızlı giriş) */

.workspace__bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* İşlem ekranının adı: tam ekranda <strong>, çerçevedeki fişte <h1> (sekmenin adı oradan
   okunur, 10E-4b). İkisi aynı görünür. */
.workspace__bar strong,
.workspace__title {
  color: var(--color-brand);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.workspace__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
}

.workspace__main .card--grow {
  flex: 1;
  overflow: auto;
}

.workspace__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.scan-input {
  width: 100%;
  min-height: 56px;
  padding: 0 var(--space-4);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  font: inherit;
  font-size: var(--text-xl);
  background: var(--color-surface);
}

.scan-input:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.total-panel {
  padding: var(--space-5);
}

.total-panel__row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) 0;
  font-variant-numeric: tabular-nums;
}

.total-panel__grand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 2px solid var(--color-border);
  font-size: var(--text-3xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  margin-right: var(--space-1);
}

.status-dot--offline {
  background: var(--color-warning);
}

@media (max-width: 1000px) {
  .workspace__body {
    grid-template-columns: 1fr;
  }
}

/* Etiket çıktısı: yazdırmaya hazır sayfa */

.sheet__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.labels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}

.label {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-align: center;
  break-inside: avoid;
}

.label__title {
  font-weight: 600;
  font-size: var(--text-sm);
}

.label__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.label__price {
  margin: var(--space-2) 0;
  font-size: var(--text-xl);
  font-weight: 700;
}

.barcode {
  max-width: 100%;
  height: auto;
}

@media print {
  .no-print {
    display: none;
  }

  .sheet {
    padding: 0;
  }

  .label {
    border-color: var(--color-border-strong);
  }
}

/* Kimlik doğrulama (giriş) */
.auth__title {
  margin-bottom: var(--space-5);
  font-size: var(--text-xl);
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* 6 ─ Yardımcılar ───────────────────────────────────────────────────── */
.mt-0 {
  margin-top: 0;
}

.mt-4 {
  margin-top: var(--space-4);
}

.mb-4 {
  margin-bottom: var(--space-4);
}

.mb-5 {
  margin-bottom: var(--space-5);
}

.nowrap {
  white-space: nowrap;
}

.text-right {
  text-align: right;
}

/* --- Kasa ekranı (Faz 2) ------------------------------------------------ */

.hidden {
  display: none !important;
}

.mt-3 {
  margin-top: var(--space-3);
}

.input-sm {
  width: 88px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  text-align: right;
}

.list-row {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.list-row:hover,
.list-row:focus-visible {
  background: var(--color-bg);
}

.receipt {
  max-width: 420px;
  margin: 0 auto;
  padding: var(--space-5);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.receipt h1 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.receipt p {
  margin: var(--space-1) 0;
}

.receipt hr {
  border: 0;
  border-top: 1px dashed var(--color-border);
  margin: var(--space-3) 0;
}

@media print {
  .no-print {
    display: none;
  }
}

/* --- Arayüz cilası (2026-09-22): ikon, yüzey, tablo, gösterge ------------ */

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  vertical-align: -0.25em;
}

.icon--sm {
  width: 16px;
  height: 16px;
}

.icon--lg {
  width: 24px;
  height: 24px;
}

/* Sayılar tablo ve göstergede alt alta hizalanır. */
.table .num,
.kpi__value,
.total-panel,
.receipt {
  font-variant-numeric: tabular-nums;
}

/* Tablo: yapışkan başlık, sakin satır vurgusu, rahat satır yüksekliği. */

.table tbody a:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

/* Gösterge kartı: değer iri, etiket sakin, trend renkli. */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
}

.kpi__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kpi__hint {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.kpi__trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
}

.kpi__trend--up {
  color: var(--color-success);
}

.kpi__trend--down {
  color: var(--color-danger);
}

.kpi__trend--flat {
  color: var(--color-text-subtle);
}

/* Artması kötü olan gösterge (gider): yukarı ok ama uyarı renginde. */
.kpi__trend--warn {
  color: var(--color-warning);
}

/* Azalması iyi olan gösterge (gider): aşağı ok ama başarı renginde. */
.kpi__trend--good {
  color: var(--color-success);
}

/* Boş durum: ikon + başlık + açıklama + (varsa) eylem. */

/* Sayfa başlığı: nefes ve hiyerarşi. */

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-4);
  align-items: start;
}

/* Geniş tablo paneli ızgarada tam satır kaplar (sandık raporunun kutular ve projeler tablosu). */
.dashboard-grid > .card--wide {
  grid-column: 1 / -1;
}

/* Grafik: tek rengin tonları, soluk ızgara. */
.chart {
  width: 100%;
  height: auto;
  display: block;
}

.chart__grid {
  stroke: var(--color-border);
  stroke-width: 1;
}

.chart__axis {
  fill: var(--color-text-subtle);
  font-size: 11px;
}

.chart__bar {
  fill: var(--color-brand);
  opacity: 0.85;
}

.chart__bar--muted {
  fill: var(--color-border-strong);
}

/* İki serili çubuk (10O-7): giriş yeşil, çıkış marka kırmızısı (kullanıcı 2026-11-05: "renkler bizi
   yansıtsın"; grafiğin ana serisi kırmızıdır); lejant grafiğin üstünde. */
.chart__bar--in {
  fill: var(--color-success);
  opacity: 1;
}

.chart__bar--out {
  fill: var(--color-brand);
  opacity: 1;
}

.chart-legend {
  display: flex;
  gap: var(--space-4);
  margin: 0 0 var(--space-2);
  padding: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  list-style: none;
}

.chart-legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.chart-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--color-brand);
}

.chart-legend__swatch--in {
  background: var(--color-success);
}

.chart-legend__swatch--out {
  background: var(--color-brand);
}

.chart-legend__swatch--muted {
  background: var(--color-border-strong);
}

.chart-legend__swatch--loan {
  background: var(--color-gold);
}

.chart-legend__swatch--grant {
  background: var(--color-grant);
}

.chart__line {
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart__area {
  fill: var(--color-brand);
  opacity: 0.08;
}

/* Önceki dönem (10R): kesik gri çizgi; ana seri marka kırmızısıdır. */
.chart__line--before {
  stroke: var(--color-text-subtle);
  stroke-dasharray: 5 5;
  stroke-width: 1.5;
}

.chart-legend__swatch--now {
  background: var(--color-brand);
}

.chart-legend__swatch--before {
  background: var(--color-text-subtle);
}

.chart__dot {
  fill: var(--color-brand);
}

/* Dar ekranlarda kenar çubuğu daralır, sonra üstte şerit olur. */
/* Kullanıcı menüyü kapattığında (Ctrl+B) ya da ekran darken yalnız ikonlar kalır.
   İkonun üstüne gelince adı yan balonda görünür, böylece menü kaybolmuş olmaz. */
.app--menu-kapali {
  --sidebar-width: 72px;
}

.app--menu-kapali .sidebar__name,
.app--menu-kapali .nav-link > span:not(.badge),
.app--menu-kapali .nav-sublist {
  display: none;
}

.app--menu-kapali .sidebar__brand {
  justify-content: center;
  padding-inline: 0;
}

.app--menu-kapali .nav-link {
  justify-content: center;
  padding: var(--space-3);
  position: relative;
}

.app--menu-kapali .nav-link:hover::after,
.app--menu-kapali .nav-link:focus-visible::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + var(--space-2));
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-action);
  color: var(--color-action-text);
  font-size: var(--text-sm);
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
}

.btn--icon {
  padding: 0;
  width: 36px;
  min-height: 36px;
}

@media (max-width: 1280px) {
  :root {
    --sidebar-width: 72px;
    --brand-width: 11.5rem;
  }

  /* Dar ekranda önce arama kutusu ikona iner; Eğitim ve Sorun bildir yazılı kalır. */
  .search-trigger {
    min-width: 0;
  }

  .search-trigger__label {
    display: none;
  }

  .sidebar__name,
  .nav-link > span:not(.badge),
  .nav-sublist {
    display: none;
  }

  .nav-link {
    justify-content: center;
    padding: var(--space-3);
    position: relative;
  }

  .nav-link:hover::after,
  .nav-link:focus-visible::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + var(--space-2));
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius);
    background: var(--color-action);
    color: var(--color-action-text);
    font-size: var(--text-sm);
    white-space: nowrap;
    box-shadow: var(--shadow-lg);
  }

  .sidebar__brand {
    justify-content: center;
    padding-inline: 0;
  }

  /* KULLANICI ELLE AÇTIYSA DAR EKRANDA DA AÇIK KALIR (2026-09-29).
     Eskiden bu medya sorgusu etiketleri KOŞULSUZ gizliyordu: 1280 altında
     aç/kapa düğmesi ve Ctrl+B hiçbir şey yapmıyordu, menü hiç genişlemiyordu.
     Yukarıdaki kurallar artık yalnız VARSAYILAN; açık işareti onları ezer. */
  body.app--menu-acik {
    --sidebar-width: 244px;
  }

  body.app--menu-acik .sidebar__name {
    display: flex;
  }

  body.app--menu-acik .nav-link > span:not(.badge) {
    display: inline;
  }

  body.app--menu-acik .nav-sublist {
    display: block;
  }

  body.app--menu-acik .nav-link {
    justify-content: flex-start;
    padding: var(--space-2) var(--space-3);
  }

  /* Açıkken ad zaten yazılı; yan balon gereksiz tekrar olurdu. */
  body.app--menu-acik .nav-link:hover::after,
  body.app--menu-acik .nav-link:focus-visible::after {
    content: none;
  }

  body.app--menu-acik .sidebar__brand {
    justify-content: flex-start;
    padding-inline: var(--space-2);
  }
}

@media (max-width: 900px) {
  :root {
    --sidebar-width: 0px;
  }

  .app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .sidebar__name,
  .nav-link span:not(.badge) {
    display: inline;
  }

  .nav-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .nav-link {
    justify-content: flex-start;
  }

  /* Dar üst çubuk taşıyordu (700 px'te yatay kaydırma çıkıyordu): klavye
     kısayolu ipucu ve işletme türü dar ekranda yer kaplamasın. */
  .issue-trigger span {
    display: none;
  }

  /* Üst şeritte modülün alt girişleri açılmaz: 1280 bloğundaki "elle açık"
     kuralı bunları gösteriyordu ve Stok'ta 18 satırlık liste sayfanın üstünü
     kaplıyordu. Alt girişler sayfa başlığının altındaki modül menüsünde var. */
  body.app--menu-acik .nav-sublist {
    display: none;
  }
}

/* Telefonda başlıklar üst çubuktaki menü düğmesiyle açılır (10K, bulgu 4): 375 px'te 13 başlık
   alt alta sarılıp sayfanın ilk ekranını dolduruyordu. Tablette (700–900) üstte dizili kalır. */
@media (max-width: 700px) {
  body:not(.app--menu-acik) .sidebar nav {
    display: none;
  }
}

/* --- Grafik kutusu ------------------------------------------------------- */

.chart-figure {
  margin: 0;
}

.chart-figure .chart {
  max-height: 200px;
}

/* --- İşlem ekranı ölçeği (kasa, fiş, terminal ortak) ---------------------

   Bu ekranlar ayakta, hızlı ve bazen dokunmatik kullanılır: yazı ve hedefler
   programın geri kalanından bir ölçek büyüktür. Kasaya özel bileşenler aşağıdaki
   "Kasa ekranı" bölümündedir; burada ikinci kez tanımlanmaz.                     */

.workspace {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  background: var(--color-bg);
  position: relative;
  font-size: var(--text-lg);
}

/* Fiş programın çerçevesinde (10E-4b): fiş sekmede de çalışır; menü, üst çubuk ve sekme şeridi
   görünür kalır. Geniş ekranda içerik alanı pencere boyuna sabitlenir ve fiş KALAN yüksekliği
   doldurur — satır tablosu kendi içinde kayar, toplam şeridi ve kısayollar hep görünür (tam
   ekrandaki gibi). Dar ekranda sayfa doğal boyunda kayar. Yalnız GÖRÜNEN panel fişse uygulanır:
   arkadaki sekmede fiş açıkken liste kendi boyunda kalır. */
.workspace--framed {
  height: auto;
  min-height: 0;
  /* Orta bölüm en az içeriği kadar: yer yetmezse içerik kayar, toplam şeridi alttaki kısayol
     çubuğunun altına girmez (2026-10-20, sayım fişinde görüldü). */
  grid-template-rows: auto minmax(min-content, 1fr) auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* Pano da tam ekrandır (10E-5, "Pano tam ekran"): içerik genişlik sınırı kalkar, geniş ekranda
   pano pencere boyunu doldurur ve her sütun kendi içinde kayar. */
.content:has(> [data-tabpanels] > :not([hidden]) > .board-page) {
  max-width: none;
}

@media (min-width: 901px) {
  .content:has(> [data-tabpanels] > :not([hidden]) > .workspace--framed),
  .content:has(> [data-tabpanels] > :not([hidden]) > .board-page) {
    height: calc(100dvh - var(--topbar-height));
    padding-bottom: var(--gutter);
    /* Pencere fişe yetmezse (dizüstü, üstte ileti) içerik kayar; satır alanı sıkışmaz. */
    overflow-y: auto;
  }

  /* Satır alanı en az beş satır (2026-10-20, kullanıcı: dizüstünde sekmedeki fişte tek satır
     görünüyordu — üst çubuk, sekmeler, ileti ve toplam şeridi kalan yüksekliği yiyordu). */
  .workspace--framed .doc-entry__surface {
    min-height: 15rem;
    /* Yüksekliğini satırlardan ALMAZ: 3.000 satırlık sayımda tablo kendi içinde kayar, toplam
       şeridi görünür kalır (yoksa bütün sayfa kayıyordu). */
    contain: size;
  }

  .content:has(> [data-tabpanels] > :not([hidden]) > .workspace--framed) > [data-tabpanels],
  .content:has(> [data-tabpanels] > :not([hidden]) > .board-page) > [data-tabpanels],
  [data-tabpanels] > :not([hidden]):has(> .workspace--framed),
  [data-tabpanels] > :not([hidden]):has(> .board-page) {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 0;
  }

  .workspace--framed {
    flex: 1;
  }

  .board-page {
    flex: 1;
    min-height: 0;
  }
}

/* Dar ekranda fişin satır tablosu ve cari şeridi pencereden geniştir: SAYFA yatay kaymasın,
   fiş kendi kutusunda kaysın (telefonda 375 px'te ölçüldü, 10E-4b). */
@media (max-width: 900px) {
  .workspace--framed {
    overflow-x: auto;
  }
}

.workspace__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 24vw, 340px);
  gap: var(--space-3);
  padding: var(--space-3);
  min-height: 0;
}

/* Yan paneli olmayan işlem ekranı (sahaf hızlı düzenleme): tablo bütün genişliği alır. */
.workspace__body--wide {
  grid-template-columns: minmax(0, 1fr);
}

.workspace .btn--lg {
  min-height: 56px;
  font-size: var(--text-lg);
  font-weight: 600;
}

/* Dar ekranda tek sütuna iner: ödeme düğmeleri altta, parmakla basılır. */
@media (width <= 1024px) {
  .workspace__body {
    grid-template-columns: 1fr;
  }

  .workspace__side {
    position: sticky;
    bottom: 0;
    background: var(--color-bg);
    padding-top: var(--space-3);
  }
}

/* --- Form ve giriş ------------------------------------------------------- */

.field__label {
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.field input,
.field select,
.field textarea {
  min-height: 38px;
  border-radius: var(--radius);
  border-color: var(--color-border-strong);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--color-action);
  box-shadow: var(--focus-ring);
}

.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: var(--color-bg);
}

.auth__card {
  width: min(420px, 100%);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.auth__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* Kenar çubuğundaki işaretle aynı dosya ve aynı kural: kaynak logoyu kareye
   kırpmak çerçeveyi içeri alıyor ve monogramı kesiyordu (2026-09-29). */
.auth__mark {
  width: 33px;
  height: 56px;
  object-fit: contain;
}

.auth__name strong {
  display: block;
  font-size: var(--text-xl);
  color: var(--color-brand);
  line-height: 1.1;
}

.auth__name span {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

/* === Görsel güçlendirme (2026-09-23) ========================================
   Geri bildirim: ekranlar "boş ve seyrek", "renk ve yazı ucuz", "web formu gibi".
   Bu bölüm bunları hedefler ve YALNIZ görünümü değiştirir; kalıplar aynı kalır.

   1. Derinlik: kartın kenarı ve gölgesi olur, zemin kartın altından görünür.
   2. Yoğunluk: tablo satırı sıkışır, filtre ile tablo tek gövdede birleşir.
   3. Tipografi: başlıklar iri ve sıkı, sayılar hizalı, etiketler küçük-kalın.
   4. Renk: durum ve tür bilgisi renkle konuşur; nötr gri denizi azalır.           */

/* --- Derinlik ------------------------------------------------------------ */

.card--flush > .toolbar:first-child {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

/* --- Sayfa başlığı ------------------------------------------------------- */

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.page-header h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  letter-spacing: -0.01em;
  font-weight: 600;
  line-height: 1.15;
}

.page-header__subtitle {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  max-width: 78ch;
  font-size: var(--text-md);
}

/* --- Filtre çubuğu: tek gövde ------------------------------------------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-muted);
}

.toolbar .field__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  background: var(--color-surface);
}

/* --- Tablo: yoğun, okunur, hizalı --------------------------------------- */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
}

.table tbody tr:nth-child(even) {
  background: var(--color-surface-muted);
}

.table tbody a {
  color: var(--color-text);
  font-weight: 600;
}

.table .num {
  font-variant-numeric: tabular-nums;
}

/* Satır içi ikincil bilgi (barkod, kod, tarih) tek satırda küçülür. */
.cell-sub {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

/* --- Boş durum: yol gösterir -------------------------------------------- */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-5);
  color: var(--color-text-muted);
  text-align: center;
}

.empty .icon {
  width: 40px;
  height: 40px;
  color: var(--color-text-subtle);
  padding: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  box-sizing: content-box;
}

.empty__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
}

.empty__text {
  max-width: 44ch;
}

/* --- Gösterge kartları --------------------------------------------------- */

/* --- Rozetler: durum renkle konuşur ------------------------------------- */

/* --- Sekmeler ------------------------------------------------------------ */

.tabs__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--color-text-muted);
  font-weight: 600;
  white-space: nowrap;
}

/* --- Kenar çubuğu: etiketler okunur ------------------------------------- */

/* --- Düğmeler ------------------------------------------------------------ */

.btn {
  font-weight: 600;
}

.btn--primary {
  box-shadow: var(--shadow-sm);
}

/* === Kabuk cilası (2026-09-23) ==============================================
   Palet değişti; kenar çubuğu, üst çubuk ve kart bileşenleri de aynı üç katı
   kullanır: soft zemin → kırık beyaz yüzey → pastel vurgu. Sert kontrast yok.  */

/* --- Kenar çubuğu: temel kural kabuk bölümünde (.app'in hemen altında). --- */

.sidebar__link {
  font-weight: 500;
  border-radius: var(--radius);
  color: var(--color-sidebar-text);
}

.sidebar__link:hover {
  background: var(--color-surface-sunken);
}

.sidebar__link[aria-current="page"] {
  font-weight: 700;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  box-shadow: inset 2px 0 0 var(--color-brand);
}

.sidebar__link[aria-current="page"] .icon {
  color: var(--color-brand);
}

/* --- Üst çubuk ----------------------------------------------------------- */

.topbar {
  grid-column: 1 / -1;
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--topbar-height);
  padding: 0 var(--space-4) 0 0;
  background: var(--color-surface);
  backdrop-filter: none;
  border-bottom: 1px solid var(--color-border);
}

/* Telefon ve yarım pencere: sekmeler çubuğun altında kendi satırına iner (çubuğun temel
   kuralından SONRA durmalı; önce dursaydı sabit yükseklik bunu ezerdi). */
@media (max-width: 900px) {
  .topbar {
    height: auto;
    min-height: var(--topbar-height);
    flex-wrap: wrap;
  }

  .topbar__brand {
    width: auto;
  }

  .topbar .tabstrip {
    order: 10;
    flex: 1 0 100%;
    padding-left: var(--space-3);
  }
}

/* Telefonda üst çubuk sığsın (10K'da ölçüldü: uzun kullanıcı adıyla 375 px'te 510 px'e
   taşıyordu): "Ara" yazısı ve kullanıcı adı gizlenir, ikon kalır; adları aria-label taşır. */
@media (max-width: 480px) {
  .search-trigger__label {
    display: none;
  }

  .topbar {
    gap: var(--space-2);
    padding: 0 var(--space-3);
  }
}

/* Kullanıcı düğmesi baş harfli dairedir (kullanıcı 2026-11-13: "kullanıcı ismi logo olabilir");
   adı ipucunda ve ekran okuyucuda, okunmamış bildirim sayısı dairenin köşesinde. */
.user-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  margin-left: var(--space-1);
  border-radius: 999px;
  background: var(--color-action);
  color: var(--color-action-text);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  list-style: none;
}

.user-chip::-webkit-details-marker {
  display: none;
}

.user-chip:hover {
  background: var(--color-action-hover);
}

.user-chip__count {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 2px solid var(--color-surface);
  border-radius: 999px;
  background: var(--color-info);
  color: var(--color-action-text);
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

/* Kısa arama kutusu (kullanıcı 2026-11-12): üstünde "Ctrl+K" yazmaz, kısayol çalışır. */
.search-trigger {
  justify-content: flex-start;
  min-width: 8rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  padding: 5px var(--space-3);
}

.topbar .issue-trigger {
  padding-inline: var(--space-2);
  white-space: nowrap;
}

.search-trigger:hover {
  background: var(--color-surface-sunken);
}

/* --- Gösterge kartı ------------------------------------------------------ */

.kpi {
  padding: var(--space-4) var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
}

.kpi--link:hover {
  border-color: var(--color-brand-line);
  box-shadow: var(--shadow);
}

.kpi__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.kpi__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: var(--color-brand-soft);
  color: var(--color-brand);
}

.kpi__value,
.kpi__label,
.kpi__hint,
.kpi__trend {
  display: block;
}

.kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--color-brand);
  opacity: 1;
}

.kpi__value {
  margin-top: var(--space-1);
  font-size: var(--text-3xl);
  white-space: nowrap;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-text);
}

/* --- Panel başlığı: ikon ile ------------------------------------------- */

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.card__header h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.card__header h2 .icon {
  color: var(--color-text-muted);
}

.card__more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-brand);
  text-decoration: none;
}

.card__more:hover {
  text-decoration: underline;
}

.card__header h2,
.card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --- Düğmeler ------------------------------------------------------------ */

.btn {
  border-radius: var(--radius);
  border-color: var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
}

.btn:hover {
  background: var(--color-surface-sunken);
  border-color: var(--color-border-strong);
  text-decoration: none;
}

.btn--primary {
  background: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-action-text);
}

.btn--primary:hover {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
}

.btn--ghost {
  border-color: transparent;
  background: none;
  color: var(--color-text-muted);
}

.btn--ghost:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.btn--danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-action-text);
}

/* --- Rozet: pastel zemin + doygun metin + ince kenar -------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  letter-spacing: 0.01em;
}

.badge--success {
  background: var(--color-success-soft);
  color: var(--color-success);
  border-color: var(--color-success-line);
}

.badge--warning {
  background: var(--color-warning-soft);
  color: var(--color-warning);
  border-color: var(--color-warning-line);
}

.badge--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border-color: var(--color-danger-line);
}

.badge--info {
  background: var(--color-info-soft);
  color: var(--color-info);
  border-color: var(--color-info-line);
}

/* --- Form alanları ------------------------------------------------------- */

.field input,
.field select,
.field textarea {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  border-radius: var(--radius);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--color-text-subtle);
}

.fieldset {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.fieldset__legend {
  padding: 0 var(--space-2);
  margin-bottom: var(--space-1);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-text);
}

/* Sürüm notları (P25) */
.release-list {
  display: grid;
  gap: var(--space-4);
  max-width: 900px;
}

.release__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.release__version {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.release__title {
  font-size: var(--text-lg);
  font-weight: 700;
}

.release__highlights {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}

.release__highlights li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.release__highlights .icon {
  flex: none;
  margin-top: 2px;
  color: var(--color-success);
}

.release__notes {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--color-text-muted);
  display: grid;
  gap: var(--space-1);
}

/* Dönem karşılaştırma (P4): artış yeşil, azalış kırmızı. */
.change {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.change--up {
  color: var(--color-success);
}

.change--down {
  color: var(--color-danger);
}

.change--flat {
  color: var(--color-text-muted);
}

/* Uyarı merkezi (P13): her uyarı tıklanabilir bir kart, tonuna göre renkli. */
.alert-list {
  display: grid;
  gap: var(--space-2);
}

.alert-list--flush {
  gap: 0;
}

.alert-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-text-subtle);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
}

.alert-list--flush .alert-card {
  border-radius: 0;
  border-top: 0;
  border-right: 0;
}

.alert-card:hover {
  box-shadow: var(--shadow);
}

.alert-card--danger {
  border-left-color: var(--color-danger);
}

.alert-card--warning {
  border-left-color: var(--color-warning);
}

.alert-card--info {
  border-left-color: var(--color-info);
}

.alert-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  flex: none;
}

.alert-card--danger .alert-card__icon {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.alert-card--warning .alert-card__icon {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.alert-card--info .alert-card__icon {
  background: var(--color-info-soft);
  color: var(--color-info);
}

.alert-card__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.alert-card__detail {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.alert-card__count {
  font-size: var(--text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Form sayfası: alanlar okunabilir genişlikte kalsın, ekranın tamamına yayılmasın. */
.form-page {
  max-width: 900px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
}

/* Proje künyesi (10M, 2026-11-01): solda kapak, sağda alanlar. */
.kunye {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-3);
}

.kunye__actions {
  display: flex;
  justify-content: flex-end;
  grid-column: 1 / -1;
}

.kunye__cover {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 220px;
}

.kunye__img {
  width: 100%;
  aspect-ratio: 2 / 3;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--color-surface-sunken);
}

.kunye__img--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

@media (max-width: 760px) {
  .kunye {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Detay özeti --------------------------------------------------------- */

.detail-summary .dl {
  gap: var(--space-4) var(--space-5);
}

.dl dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  font-weight: 600;
}

.dl dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}

/* --- Sekmeler ------------------------------------------------------------ */

.tabs {
  display: flex;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  overflow-y: hidden;
}

.tabs__link[aria-current="page"] {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
  font-weight: 600;
}

/* --- Kayıtlı filtre çubuğu ---------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-muted);
  border-color: var(--color-border-strong);
}

.filter-bar__save input[type="text"] {
  width: 20ch;
  padding: 4px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font: inherit;
  border-color: var(--color-border-strong);
}

/* --- Kasa ekranı (2026-09-23 · ONSO düzeni referans alındı) ------------------

   Kullanıcı kararı: "ONSO'nun birebir benzeri". Buna göre:
   - SOL YARI fiştir, SAĞ YARI ürün seçimidir; ikisi eşit genişliktedir.
   - Barkod kutusu ekranın en kalın, en büyük öğesidir (ONSO: 20px/800).
   - Ödeme tuşları ekranın ALTINDA sabit bir çubuktadır, hep aynı yerdedir.
   - Ürün kutucukları kapaklıdır: kitabı kapağından tanımak barkodsuz satışta hızlıdır.
   - Yoğunluk yüksektir: boş alan bırakılmaz, satırlar sıkıdır, her bölge doludur.       */

.till {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  height: 100%;
}

/* Üst çubuk parçaları */
.till-bar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.till-bar__receipt {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-text);
}

.till-bar select {
  padding: 4px var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
}

/* --- Cari şeridi --------------------------------------------------------- */

.till-customer select,
.till-customer input {
  flex: 1;
  min-width: 0;
  padding: 4px var(--space-2);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
}

.till-customer select {
  flex: 0 1 46%;
  font-weight: 600;
}

.till-customer > input {
  height: var(--strip-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.till-customer input:focus-visible,
.till-customer select:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- Barkod: ekranın çalışma noktası ------------------------------------- */

.till-scan__multiplier--on {
  background: var(--color-brand);
  color: var(--color-action-text);
}

.till-scan__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.till-scan__input::placeholder {
  color: var(--color-text-subtle);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

.till-scan__input:focus-visible {
  outline: none;
}

.till-scan__icon {
  align-self: center;
  color: var(--color-text-subtle);
  width: 28px;
  height: 28px;
}

.till-scan__pad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  cursor: pointer;
  color: var(--color-text-muted);
}

.till-scan__pad:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

/* Arama sonuçları: tek kutudan gelen ad/yazar eşleşmeleri. KUTUNUN ALTINDA YÜZER (kullanıcı
   2026-10-22: "tam boy açılıyor, tasarımı bozuyor"): liste arama kutusunun İÇİNDEDİR ve kutunun
   altına konumlanır, akıştan çıkar; fişin satırları yerinde durur. Genişlik kutunun %70'i. */
.till-results {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  width: min(680px, 70%);
  max-height: min(60vh, 460px);
  overflow-y: auto;
  margin-top: 2px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.till-results__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background: none;
  font: inherit;
  font-size: var(--text-base);
  text-align: left;
  cursor: pointer;
}

.till-results__main {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.till-results__title {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.till-results__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.till-results__side {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}

.till-results__price {
  min-width: 5.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.till-results__row:hover,
.till-results__row:focus-visible {
  background: var(--color-surface-muted);
}

/* --- Fiş satırları ------------------------------------------------------- */

.till-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.till-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border-strong);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: left;
}

.till-table thead th.num {
  text-align: right;
}

.till-table tbody td.num {
  text-align: right;
}

.till-table tbody td.num .till-qty {
  justify-content: flex-end;
}

.till-table__no {
  width: 34px;
  text-align: center;
}

.till-table__code {
  width: 108px;
}

.till-line__code {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Açıklama hücresi kalan genişliği alır, uzun ad "…" ile kısalır (panel genişleyince tablo
   taşıyor, fişte yatay kaydırma çıkıyordu; 2026-10-22). Kural ve ayırma notu adın yanında akar. */
.till-line__desc {
  width: 100%;
  max-width: 0;
}

.till-table tbody tr:nth-child(even) {
  background: var(--color-surface-muted);
}

.till-table tbody tr.is-new td {
  animation: till-flash 900ms ease-out;
}

@keyframes till-flash {
  from {
    background: var(--color-brand-soft);
  }
  to {
    background: transparent;
  }
}

.till-line__no {
  text-align: center;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.till-line__title {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.till-line__rule {
  margin-left: var(--space-2);
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
}

.till-line__meta {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.till-line__total {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.till-line__list {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.till-qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.till-qty__btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}

.till-qty__btn:hover {
  background: var(--color-surface-sunken);
  border-color: var(--color-border-strong);
}

.till-qty__value {
  width: 42px;
  height: 26px;
  padding: 0 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  text-align: right;
  font: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.till-qty__value.till-line__disc {
  width: 56px;
  color: var(--color-text-muted);
}

.till-qty__value.till-line__unit {
  width: 78px;
  color: var(--color-text);
}

.till-line__remove {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-subtle);
  cursor: pointer;
}

.till-line__remove:hover {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.till-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  color: var(--color-text-subtle);
  text-align: center;
  font-size: var(--text-base);
}

.till-empty .icon {
  width: 32px;
  height: 32px;
}

/* --- Sağ yarı: ürün seçimi ---------------------------------------------- */

.till-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 0;
}

.till-tabs {
  display: grid;
  grid-auto-flow: column;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius);
  background: var(--color-surface-muted);
}

.till-tabs__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.till-tabs__link[aria-current="page"] {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.till-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-2);
}

/* Kapaklı ürün ızgarası: ONSO'daki gibi 4 sütun. */
.till-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-2);
}

.till-tile__title {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.till-tile__price {
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.till-grid__empty,
.till-held__empty {
  grid-column: 1 / -1;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.till-held__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.till-held__row:last-child {
  border-bottom: 0;
}

/* --- Alt sabit çubuk: fiş işlemleri + ödeme ------------------------------ */

.till-dock {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
}

.till-dock__group {
  display: flex;
  gap: var(--space-2);
}

.till-dock__group--pay {
  flex: 1;
  justify-content: flex-end;
}

.till-dock__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--space-3);
  min-height: 46px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
}

.till-dock__btn:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.till-dock__btn--danger {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.till-pay:active {
  filter: brightness(0.97);
}

.till-pay:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 2px;
}

.till-pay kbd {
  background: var(--color-surface-muted);
  border: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0 5px;
}

/* Ödeme tuşları: dört ayrı pastel blok ekranı oyuncak gibi gösteriyordu.
   Hepsi aynı nötr yüzey; yöntem SOL KENARDAKİ İNCE ŞERİTTEN okunur — kasiyer
   yine renge bakarak basar, ekran "sakin ofis" kalır. */

.till-pay .icon {
  width: 22px;
  height: 22px;
  color: var(--tone, var(--color-text-muted));
}

.till-pay--cash {
  --tone: var(--color-success);
}

.till-pay--card {
  --tone: var(--color-info);
}

.till-pay--transfer {
  --tone: var(--color-violet);
}

.till-pay--credit {
  --tone: var(--color-warning);
}

/* Dar ekran: ızgara daralır, ödeme tuşları küçülür ama satırdan çıkmaz. */
@media (width < 1200px) {
  .till-grid {
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  }

  .till-pay {
    min-width: 96px;
  }
}

@media (width < 900px) {
  .till-dock__btn span {
    display: none;
  }
}

/* Son fiş şeridi: satış bitti, kasa ekranı açık kaldı. */
.till-last {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-success-line);
  border-radius: var(--radius);
  background: var(--color-success-soft);
}

.till-last__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.till-last__no {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-success);
}

.till-last__total {
  font-size: var(--text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.till-last__change {
  margin: 0;
  font-weight: 600;
  color: var(--color-success);
}

#fis-cerceve {
  display: none;
}

/* --- Ödeme penceresi: para üstü ve karma ödeme --------------------------
   Kasiyerin en çok baktığı iki sayı KALAN ve PARA ÜSTÜ'dür; ikisi de iridir.
   Tutar kutusu tuş takımının üstündedir, çünkü parmak aşağıda çalışır.         */

/* Pencere KAYMAZ (kullanıcı 2026-10-22: kalandan az tutar yazınca çıkan uyarı kaydırma çubuğu
   açıyordu): açıkken dikey esnek kutudur, uyarı ya da alınan ödemeler eklenince sayı tuşları kısalır. */
.pay-dialog {
  box-sizing: border-box;
  width: min(440px, 94vw);
  max-width: 94vw;
  max-height: 92vh;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.pay-dialog *,
.pay-dialog *::before,
.pay-dialog *::after {
  box-sizing: border-box;
}

.pay-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.pay-dialog__method {
  font-size: var(--text-lg);
  font-weight: 700;
}

.pay-dialog[open] {
  display: flex;
  flex-direction: column;
}

.pay-dialog__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: var(--space-3);
  padding: var(--space-4);
}

.pay-dialog__quick:empty,
.pay-dialog__taken:empty {
  display: none;
}

.pay-dialog__figures {
  display: grid;
  gap: var(--space-2);
}

.pay-figure {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-surface-muted);
}

.pay-figure > * {
  min-width: 0;
}

.pay-figure small {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.pay-figure output {
  font-size: var(--text-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pay-figure--input {
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
}

.pay-figure--input:focus-within {
  border-color: var(--color-brand);
  box-shadow: var(--focus-ring);
}

.pay-figure--input input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: clamp(1.6rem, 1rem + 2vw, 2.25rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--color-text);
}

.pay-figure--input input:focus-visible {
  outline: none;
}

.pay-figure--change {
  background: var(--color-success-soft);
  border: 1px solid var(--color-success-line);
}

.pay-figure--change small,
.pay-figure--change output {
  color: var(--color-success);
}

.pay-dialog__quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pay-dialog__quick .btn {
  flex: 1 1 0;
  min-width: 78px;
  font-variant-numeric: tabular-nums;
}

.pay-dialog #odeme-tuslar {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(36px, 52px));
  width: 100%;
}

.pay-dialog #odeme-tuslar .btn {
  min-height: 0;
  height: 100%;
}

.pay-dialog__taken {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pay-taken {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  font-variant-numeric: tabular-nums;
}

.pay-taken span:first-child {
  flex: 1;
  font-weight: 600;
}

.pay-taken__remove {
  border: 0;
  background: none;
  color: var(--color-text-subtle);
  cursor: pointer;
  padding: 0 4px;
}

.pay-taken__remove:hover {
  color: var(--color-danger);
}

.pay-dialog__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

/* Ödeme penceresinin Tamamla'sı fişinkiyle aynı açık yeşil tuştur, Vazgeç açık kırmızı (kullanıcı
   2026-10-22); Tamamla kalan genişliği alır. */
.pay-dialog__foot .doc-key--done {
  flex: 1;
}

/* Sayı tuşları */
.numpad .dialog__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.numpad__screen {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface-sunken);
  font-size: var(--text-2xl);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.numpad__keys {
  display: grid;
  grid-template-columns: repeat(3, 72px);
  gap: var(--space-2);
}

.numpad__keys .btn {
  min-height: 56px;
  font-size: var(--text-xl);
}

/* ---------------------------------------------------------------------------
   Belge başlık katmanı (⋮) — fiş ekranında tarih, belge no, ayar ve dosya
   işlemleri. ONSO'dan alınan kalıp: belge girerken ekranda yalnız satırlar
   olsun, başlık bilgileri istendiğinde üstten açılsın.
   --------------------------------------------------------------------------- */
.workspace__sheet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  cursor: pointer;
}

.workspace__sheet-btn:hover,
.workspace__sheet-btn[aria-expanded="true"] {
  border-color: var(--color-border-strong);
  background: var(--color-surface-sunken);
}

.sheet {
  padding: var(--space-5);
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
}

.sheet__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
}

.sheet__tabs {
  display: flex;
  gap: var(--space-1);
  flex: 1;
}

.sheet__tab {
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
}

.sheet__tab:hover {
  color: var(--color-text);
}

.sheet__tab.is-active {
  border-bottom-color: var(--color-brand);
  color: var(--color-text);
}

.sheet__close {
  display: inline-flex;
  padding: var(--space-2);
  border: 0;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.sheet__close:hover {
  color: var(--color-danger);
}

.sheet__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
}

.sheet__panel {
  display: none;
  max-width: 760px;
  flex-direction: column;
  gap: var(--space-4);
}

.sheet__panel.is-active {
  display: flex;
}

.sheet__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-sunken);
}

a.sheet__action {
  flex-direction: row;
  align-items: center;
  text-decoration: none;
}

/* Ayar anahtarı: etiket solda, açıklama altında, kutu solda. */
.switch {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
}

.switch:hover {
  border-color: var(--color-border-strong);
}

.switch input {
  grid-row: span 2;
  width: 18px;
  height: 18px;
}

.switch span {
  font-weight: 600;
}

.switch small {
  grid-column: 2;
}

/* Fiş ekranı: cari şeridi ve iki giriş kutusu (ONSO belge kalıbı).
   Sık değişen bilgi (kimden/kime, belge no) ekranda durur; vade gibi seyrek
   dokunulanlar ⋮ katmanındadır. */

.doc-party select {
  min-width: 220px;
  font-weight: 600;
}

.doc-party input {
  max-width: 220px;
}

.doc-table__no {
  width: 40px;
}

.doc-table__code {
  width: 130px;
}

/* Ad ve yazar AYNI SATIRDA (2026-10-20, ONSO'nun sık fiş tablosu gibi): uzun sayımda iki
   satırlık hücre listeyi iki kat uzatıyordu. */
.doc-line__title {
  font-weight: 600;
}

.doc-line__author {
  margin-left: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (width < 1000px) {
  .doc-party {
    flex-wrap: wrap;
  }

  .doc-party__due {
    margin-left: 0;
  }
}

/* Satır ⋮ menüsü (ONSO kalıbı). Liste 6-8 sütunken yan yana düğmeler satırı
   şişiriyordu; işlemler burada toplanır. details/summary ile JS'siz açılır. */
.rowmenu {
  position: relative;
  display: inline-block;
}

.rowmenu__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
}

.rowmenu__btn::-webkit-details-marker {
  display: none;
}

.rowmenu__btn:hover,
.rowmenu[open] .rowmenu__btn {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.rowmenu__list {
  position: absolute;
  right: 0;
  z-index: 20;
  min-width: 180px;
  padding: var(--space-1);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.rowmenu__item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  text-align: left;
  text-decoration: none;
  color: var(--color-text);
  cursor: pointer;
}

.rowmenu__item:hover,
.rowmenu__item:focus-visible {
  background: var(--color-surface-sunken);
}

.rowmenu__item--danger {
  color: var(--color-danger);
}

.rowmenu__list .inline-form {
  display: block;
}

/* Açılınca ekrana göre konumlanır (tore.js): tablonun kaydırma kutusu kırpmasın. */
.rowmenu__list--floating {
  position: fixed;
  right: auto;
  z-index: 60;
}

/* --- Aranabilir seçici + hızlı oluşturma --------------------------------- */
.picker {
  position: relative;
  min-width: 0;
}

/* Çoklu seçim (10E-4a): seçilenler kutunun üstünde etiket olur, × ile kalkar. */
.picker__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.picker__chips:empty {
  display: none;
}

.picker__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-1) 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-muted);
}

.picker__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.picker__chip-remove:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.picker__clear,
.picker__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  color: var(--color-text-muted);
  cursor: pointer;
}

.picker__clear {
  width: 30px;
}

.picker__clear:hover,
.picker__add:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.picker__list {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 260px;
  overflow-y: auto;
  margin-top: 2px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.picker__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.picker__item:hover,
.picker__item.is-active {
  background: var(--color-surface-sunken);
}

.picker__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.picker__none {
  padding: var(--space-3);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.picker__dialog {
  min-width: min(420px, 92vw);
}

/* Satır listesi (10E-4a C): formda birden çok ürün (müşteri talebi) — seçicinin arama kutusu
   ve altında satır tablosu (`design/tore/lines.js`). */
.line-list__table {
  margin-top: var(--space-3);
}

.line-list__search {
  margin: 0;
}

.line-list__qty {
  width: 5rem;
  text-align: right;
}

/* Katalogda olmayan kitabın adı satırda düzeltilir: tablo hücresinin dar sayı kutusu değil. */
.line-list__title {
  width: min(100%, 32rem);
  margin-right: var(--space-2);
  text-align: left;
}

.line-list__empty {
  margin: 0;
  padding: var(--space-3);
}

.field__req {
  font-weight: 400;
  color: var(--color-text-subtle);
}

/* ===========================================================================
   MODERNLEŞTİRME (kullanıcı eleştirisi, 2026-09-24: "Windows 95'i hatırlatıyor")

   Teşhis: ekran KUTULARDAN kuruluydu. Her girdi çerçeveli, her bölme kalın
   çizgiyle ayrılmış, her kutucuk ayrı yüzey. Eski program hissi buradan gelir.

   İlke: ayırmak için ÇİZGİ değil BOŞLUK ve TON kullan. Girdi alanı ancak
   dokunulduğunda kutuya dönüşür. Az çizgi, net hiyerarşi, yumuşak yüzey.
   =========================================================================== 
   NOT (2026-09-29): bu bolumdeki jeton blogu 1. bolume (Token) tasindi;
   ilke notu burada kaldi cunku asagidaki bilesen kurallarini aciklar. */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border-color: color-mix(in srgb, var(--color-border) 70%, transparent);
}

/* --- Tablo içi girdiler: kutu değil, metin --------------------------------
   Satırda üç çerçeveli kutu yan yana durunca tablo forma benziyordu.
   Artık değer düz metin gibi durur; üstüne gelince zemin belirir, tıklayınca
   kenarlık çıkar. Düzenlenebilirlik kaybolmaz, gürültü kaybolur. */
.cell-input,
.till-qty__value,
.till-line__unit,
.till-line__disc {
  border-color: transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  transition: background-color 120ms ease, border-color 120ms ease;
}

.cell-input:hover,
.till-qty__value:hover,
.till-line__unit:hover,
.till-line__disc:hover {
  background: var(--color-surface-sunken);
}

.cell-input:focus,
.till-qty__value:focus,
.till-line__unit:focus,
.till-line__disc:focus {
  border-color: var(--color-border-strong);
  background: var(--color-surface);
  outline: none;
  box-shadow: var(--focus-ring);
}

.cell-input:focus-visible {
  outline: none;
  outline-offset: 1px;
}

/* --- Fiş tablosu: dış çerçeve yok, satır ayırıcı ince ------------------- */
.doc-entry__table {
  width: 100%;
  /* Sık satır (2026-10-20, ONSO'nun fiş tablosu ~24 px): kasa ekranının büyük yazısı fişte
     satırı 36-58 px yapıyordu, 3.000 satırlık sayım iki kat uzuyordu. */
  font-size: var(--text-base);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Zemin ve renk kasayla ortak: `.till-table thead th` (fiş tablosu o sınıfı da taşır). */
.doc-entry__table thead th {
  border-bottom: 1px solid var(--color-border-strong);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.doc-entry__table tbody td {
  padding-block: 1px;
}

/* Çizgili satır: göz uzun fişte satırı kaybetmez. */
.doc-entry__table tbody tr:nth-child(even) td {
  background: var(--color-surface-muted);
}

/* Sütun düzenleyici (⋮ › Ayar › Sütunlar): gizlenen sütunun başlığı ve hücreleri. */
.doc-entry__table[data-hide~="kod"] [data-col="kod"],
.doc-entry__table[data-hide~="liste"] [data-col="liste"],
.doc-entry__table[data-hide~="iskonto"] [data-col="iskonto"],
.doc-entry__table[data-hide~="kdv"] [data-col="kdv"],
.doc-entry__table[data-hide~="matrah"] [data-col="matrah"],
.doc-entry__table[data-hide~="yayinevi"] [data-col="yayinevi"],
.doc-entry__table[data-hide~="yazar"] [data-col="yazar"],
.doc-entry__table[data-hide~="raf"] [data-col="raf"] {
  display: none;
}

.sheet__columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0;
  padding: 0;
  border: 0;
}

.doc-entry__table .cell-input {
  padding-block: 0;
}

.doc-entry__table [data-remove] {
  min-height: 0;
  padding-block: 0;
}

/* Ad ve yazar tek satır; sığmayan "…" ile kısalır, tamamı üstüne gelince görünür. */
.doc-entry__table .doc-line {
  width: 100%;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.doc-entry__table tbody tr:last-child td {
  border-bottom: 0;
}

.doc-entry__table tbody tr:hover td {
  background: color-mix(in srgb, var(--color-bg) 60%, transparent);
}

/* Son okutulan / değişen satır: uzun fişte nerede kalındığı görünür (docentry.js `mark`). */
.doc-entry__table tbody tr.is-last td {
  background: var(--color-info-soft);
}

/* --- Sahaf hızlı düzenleme (10F-2b): okuyucuyla aşağı inen nüsha tablosu --- */
.copy-quick {
  padding: var(--space-3) var(--space-4);
  overflow-y: auto;
}

.copy-quick__message {
  min-height: 1.4em;
  margin: 0 0 var(--space-2);
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

.copy-quick__message.is-error {
  color: var(--color-danger);
}

/* Kontrol / rafa yerleştirme (10F-10): son okutmalar, en yenisi üstte. */
.copy-quick__log {
  max-height: 12rem;
  margin: 0 0 var(--space-3);
  padding: 0;
  overflow-y: auto;
  list-style: none;
  font-size: var(--text-sm);
}

.copy-quick__log li {
  padding: var(--space-1) var(--space-2);
  border-left: 3px solid var(--color-success);
}

.copy-quick__log li.is-warning {
  border-left-color: var(--color-warning);
}

.copy-quick__log li.is-danger {
  border-left-color: var(--color-danger);
  color: var(--color-danger);
}

.copy-quick__shelf {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Sahaf sayımı (2026-11-10): ilerleme üst çubukta, etiketi bağlı nüsha üstteki kutuya okutulur. */
.copy-quick__count {
  font-variant-numeric: tabular-nums;
}

.copy-quick__scan {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.copy-quick__scan .input {
  width: 32ch;
  min-height: 34px;
}

/* Hücre kutuları sık: 2.500 nüsha aşağı inilerek okutulur, satır alçak kalmalı. */
.copy-quick .input {
  min-height: 28px;
  padding: 2px var(--space-2);
}

.copy-quick .table td {
  padding-block: 2px;
  vertical-align: middle;
}

.copy-quick__title {
  min-width: 20ch;
}

.copy-quick__select {
  width: 12ch;
}

.copy-quick__code {
  width: 14ch;
  font-variant-numeric: tabular-nums;
}

.copy-quick__legacy {
  width: 10ch;
  text-transform: uppercase;
}

.copy-quick__price {
  width: 8ch;
  text-align: right;
}

.copy-quick__issue {
  width: 9ch;
}

.copy-quick tbody tr.is-done td {
  background: var(--color-success-soft);
}

.copy-quick tbody tr.is-error td {
  background: var(--color-danger-soft);
}

.copy-quick tbody tr.is-saving {
  opacity: 0.6;
}

/* Eklenti anahtarı bir kez gösterilir: tek tıkla seçilsin, satıra sığmazsa kırılsın. */
.copy-key {
  user-select: all;
  word-break: break-all;
}

/* --- Barkod kutusu: bağırmasın ------------------------------------------ */
.till-scan {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  padding: 5px var(--space-2);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border-width: 1px;
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.till-scan__multiplier {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: var(--text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-subtle);
  letter-spacing: -0.02em;
}

/* --- Aranabilir seçici: üç eklemli kutu değil, tek yüzey ---------------- */
.picker__box {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
}

.picker__box:focus-within {
  border-color: var(--color-action);
  box-shadow: var(--focus-ring);
}

.picker__input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.picker__input:focus,
.picker__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.picker__clear,
.picker__add {
  border: 0;
  background: transparent;
  border-radius: 0;
}

.picker__add {
  border-left: 1px solid var(--color-border);
}

/* --- Kısayol çubuğu: durum çubuğu değil, sessiz ipucu ------------------- */
.workspace__keys {
  display: flex;
  flex-wrap: wrap;
  color: var(--color-text-subtle);
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  font-size: var(--text-xs);
}

.workspace__keys kbd {
  border: 0;
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  padding: 1px 6px;
}

/* --- Cari şeridi: kart değil, ince bant -------------------------------- */
.doc-party {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
}

.doc-party > .icon {
  flex-shrink: 0;
  color: var(--color-text-subtle);
}

/* Satış faturası şeridi (10D-1): müşteri, kaynak, ödeme ve oran yan yana sığmazsa alt
   satıra iner; seçiciler sevk şeridindeki geniş seçici kadar yer kaplamaz. */
.doc-party--sale {
  flex-wrap: wrap;
}

.doc-party--sale select {
  min-width: 0;
}

.doc-party__rate {
  width: 5.5rem;
  text-align: right;
}

.doc-party__due {
  margin-left: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

/* Fiş ekranının yan paneli: iki ayrı kart yerine tek panel, net hiyerarşi.
   Belge türü büyük, yer ve tarih sessiz, eylem altta, ipucu dipnot. */
.doc-side {
  display: flex;
  flex-direction: column;
}

.doc-side__kind {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.doc-side__where {
  margin: 2px 0 0;
  color: var(--color-text-muted);
}

.doc-side__when {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.doc-side__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}

.doc-side__actions .btn {
  width: 100%;
  justify-content: center;
}

.doc-side__hint {
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

/* --- Fiş kipi ve alt şerit (ONSO düzeni, kullanıcı 2026-10-21) ------------------------------
   "Fiş ekranları tam sayfa olsun; fiş ekranındayken gidip başka bir işlem yapabileyim diye
   sekme yaptık." Etkin sekme fişse (`tabs.js` → html.is-fis) kenar menüsü gizlenir (ÜST ÇUBUK
   KALIR, 2026-11-12: sekmeler onun içinde ve her ekranda aynı yerde),
   fiş ekranın tamamını alır; sekme şeridi üstte kalır, başka sekmeye geçince program normal
   görünümüne döner. Satır alanı kalan bütün yüksekliği doldurur (1080 px'te 25+ satır). */
.is-fis .app {
  grid-template-columns: minmax(0, 1fr);
}

.is-fis .sidebar {
  display: none;
}

/* Menü düğmesi fişte işe yaramaz ama YERİ KALIR: kalksaydı sekmeler sola kayardı. */
.is-fis [data-sidebar-toggle] {
  visibility: hidden;
}

/* Özgüllük bilinçli yüksek: çerçevedeki fişin `.content:has(…)` kuralını (üst çubuk payı) ezer. */
:root.is-fis .app .main .content {
  max-width: none;
  height: calc(100dvh - var(--topbar-height));
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
}

/* 1080 px'te en az 25 satır (kullanıcı: "en az 25-30 ürünlük penceresi var"): satır sıklaşır,
   kısayol çubuğu kalkar (F2 Tamamla düğmesinde yazar), bloklar arası boşluk daralır. */
.is-fis .workspace--framed:not(.workspace--till) .workspace__keys {
  display: none;
}

/* Kasa ve fiş tam sayfadır: sayfanın modül menüsü (Satışlar, Gün sonu…) üstte yer kaplamaz;
   modülün öteki ekranlarına sekme şeridindeki tabandan ya da kasadaki "Çık"tan gidilir. */
.is-fis .subnav {
  display: none;
}

.is-fis .workspace--framed .workspace__main {
  gap: var(--space-2);
}

.is-fis .workspace--framed .workspace__body {
  padding: var(--space-2);
}

.is-fis .doc-entry__table {
  font-size: var(--text-sm);
}

/* Cari şeridi üst çubukta, ⋮'nin yanında (ONSO: "⋮ PEŞİN PERAKENDE CARİ HESAP"). TEK SATIR
   (kullanıcı 2026-10-21: belge no alt satıra düşüyordu). Sığmazsa KAYDIRMA ÇUBUĞU ÇIKMAZ
   (kullanıcı 2026-10-22): alanlar en küçük boylarına dek daralır, dar ekranda alt satıra iner;
   kayan kap seçim listesini de keserdi. */
.doc-party--bar {
  flex: 1;
  min-width: 0;
  flex-wrap: nowrap;
  color: var(--color-text);
}

/* Şerit çubuğun boşluğunu kendisi doldurur; kalıbın ara boşluğu ona yer bırakmaz. */
.doc-party--bar + .topbar__spacer {
  display: none;
}

@media (width < 1100px) {
  .doc-party--bar {
    flex-wrap: wrap;
  }
}

/* Ek sütunlar (yayınevi, yazar, raf) tek satır; sığmayan "…" (satır 30 px kalır). */
.doc-line__extra {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
}

.doc-foot {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.doc-foot__left,
.doc-foot__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.doc-foot__actions form {
  display: contents;
}

/* Alt şeridin tuşları RENKLİDİR (kullanıcı 2026-10-22: "tek renk kullanılıyor, Kapat ayrı renk,
   diğer düğmeler başka renk"; kasanın ödeme tuşlarıyla aynı dil): her tuş kendi tonunun açık
   zemini, çizgisi ve koyu yazısıyla; Tamamla dolu yeşil. Kapat yıkıcı değildir ama fişten çıkış
   olduğu için kırmızı tondadır — marka kırmızısının bilinçli istisnası. */
.doc-key {
  --tone: var(--color-text);
  --tone-soft: var(--color-surface);
  --tone-line: var(--color-border-strong);
  border-color: var(--tone-line);
  background: var(--tone-soft);
  color: var(--tone);
  font-weight: 600;
}

.doc-key:hover {
  border-color: var(--tone);
  background: var(--tone-soft);
  color: var(--tone);
}

.doc-key .icon {
  color: var(--tone);
}

.doc-key--close {
  --tone: var(--color-danger);
  --tone-soft: var(--color-danger-soft);
  --tone-line: var(--color-danger-line);
}

.doc-key--new {
  --tone: var(--color-info);
  --tone-soft: var(--color-info-soft);
  --tone-line: var(--color-info-line);
}

.doc-key--menu {
  --tone: var(--color-violet);
  --tone-soft: var(--color-violet-soft);
  --tone-line: var(--color-violet-line);
}

.doc-key--pay {
  --tone: var(--color-warning);
  --tone-soft: var(--color-warning-soft);
  --tone-line: var(--color-warning-line);
}

/* Tamamla da öteki tuşlar gibi açık tonludur (kullanıcı 2026-10-22: dolu yeşil yakışmadı) ama
   onlardan BOYUYLA ayrılır: daha büyük yazı ve dolgu, kalın yeşil kenar — belgenin asıl işi. */
.doc-key--done {
  --tone: var(--color-success);
  --tone-soft: var(--color-success-soft);
  --tone-line: var(--color-success);
  min-height: 46px;
  padding: var(--space-2) var(--space-5);
  border-width: 2px;
  font-size: var(--text-md);
  font-weight: 700;
}

/* Tuşun kısayolu (F2) sakin durur (kullanıcı 2026-10-22: beyaz kutu düğmenin içinde ikinci düğme
   gibiydi): tuşun kendi tonunda yarı saydam, küçük; kasanın ödeme tuşlarındaki F3/F4 gibi. */
.doc-key kbd {
  border: 0;
  background: color-mix(in srgb, currentColor 16%, transparent);
  color: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0 5px;
}

.doc-foot__hint {
  flex: 1;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Toplam AÇIK KUTUDADIR (kullanıcı 2026-10-22: koyu kutuda küçük rakamlar seçilmiyordu; "zemin
   yandaki düğmeler gibi olabilir"): kasa ile fiş aynı, ödeme tuşlarının beyaz zemini ve kenarı;
   küçük rakamlar koyu gri, sonuç iri ve espresso. */
.doc-foot__sum {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-left: auto;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  color: var(--color-action);
}

.doc-foot__detail {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: var(--space-2);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.doc-foot__detail div {
  display: contents;
}

.doc-foot__detail dd {
  margin: 0;
  text-align: right;
}

.doc-foot__grand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}

.doc-foot__grand small {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.doc-foot__grand output {
  font-size: var(--text-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.doc-foot__list {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (width < 1000px) {
  .doc-foot {
    flex-wrap: wrap;
  }
}

/* Ödeme seç (alış fişi): alanlar tek satırda, dar ekranda alt alta. */
.pay-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-3);
  align-items: end;
  margin-bottom: var(--space-4);
}

/* --- Yazarak aranan seçim kutusu (combobox.js; kullanıcı 2026-10-21) ----------------------
   İşletim sisteminin açılır kutusu yerine: aranabilir cari seçicisiyle (`.picker`) AYNI kenar,
   köşe, liste ve odak halkası — şeritte iki tür kutu yan yana durunca aynı görünsün. Gizli
   `<select>` sayfada kalır (değeri okuyan kod değişmez). */
.combo {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  flex: 0 1 auto;
  min-width: 8rem;
  height: var(--strip-height);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.combo:focus-within {
  border-color: var(--color-action);
  box-shadow: var(--focus-ring);
}

/* Öğe seçicisiyle: şeridin `.doc-party select` genişliği gizli kutuya uygulanmasın. */
select.combo__native {
  position: absolute;
  min-width: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.combo__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 var(--space-2) 0 var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-weight: 600;
  color: var(--color-text);
  text-overflow: ellipsis;
}

.combo__input:focus,
.combo__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.combo__input::placeholder {
  color: var(--color-text);
  font-weight: 600;
}

/* Aşağı ok: ikon değil çizgi (ikon dosyasına bir ok daha eklememek için). */
.combo__toggle {
  width: 2rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.combo__toggle::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid var(--color-text-muted);
  border-bottom: 1.5px solid var(--color-text-muted);
  transform: translate(-50%, -50%) rotate(45deg);
}

.combo--open .combo__toggle::after {
  top: 55%;
  transform: translate(-50%, -50%) rotate(225deg);
}

.combo--disabled {
  background: var(--color-surface-sunken);
}

.combo__list {
  position: absolute;
  top: 100%;
  left: -1px;
  min-width: calc(100% + 2px);
  z-index: 30;
  max-height: 18rem;
  overflow-y: auto;
  margin: 2px 0 0;
  padding: var(--space-1) 0;
  list-style: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.combo__option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
  cursor: pointer;
}

.combo__option:hover,
.combo__option.is-active {
  background: var(--color-surface-sunken);
}

.combo__option[aria-selected="true"] {
  font-weight: 600;
}

.combo__empty {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Seçeneğin sağındaki küçük bilgi ("5 alt", `data-hint`) ve listenin başındaki not
   (`data-combo-note`, "Yazarak arayın…") — gelir-gider kategorisi, 2026-11-04. */
.combo__hint {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.combo__note {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: default;
}

/* --- Gelir · gider kaydı PENCERESİ (kullanıcı 2026-11-04; finance/_entry_window.html) ---
   Onaylanan sayfa taslağının aynısı, pencerede (kullanıcı: "pencere düzeni eskisi gibi olmalı"):
   zemin sayfanın kırık beyazı, solda bütün alanları ve tuşları taşıyan beyaz kart, sağda "Bugün bu
   kasada" ve "Son giderler" kartları. Tuşlar fişin renkli tuş dilindedir (`doc-key`): + Gelir yeşil,
   − Gider kırmızı ton; Nakit yeşil, Kart mavi, Havale mor. Tutar yönün rengini alır. Seçili alt
   kategori menünün etkin girişi gibi marka kırmızısının açık tonudur. */
.card-window:has(.cash-window) {
  width: min(1180px, calc(100vw - 2rem));
  background: var(--color-bg);
}

.cash-entry {
  --cash-tone: var(--color-danger);
}

.cash-entry[data-direction="in"] {
  --cash-tone: var(--color-success);
}

.cash-window__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.cash-window__titles {
  flex: 1 1 auto;
  min-width: 0;
}

.cash-window__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.15;
}

.cash-window__status {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-success-soft);
  color: var(--color-success);
  font-size: var(--text-sm);
}

.cash-window__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.cash-window__card {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.cash-window__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cash-entry__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}

.cash-date {
  text-align: right;
}

.cash-entry__block {
  margin-top: var(--space-4);
}

.cash-entry__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* --- Yatırım Sandığı projesi (10O-2) -------------------------------------------------------
   Aşama şeridi ve "Sonraki aşama" tek satırda; genel bakış iki sütunlu kart ızgarası (dar ekranda
   tek sütun); bütçe kalemi satırı + ince çubuk (bütçe aşılınca uyarı rengi); ödeme/harcama listeleri. */
.fund-stage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.fund-stage .stage-steps {
  flex: 1 1 auto;
  margin: 0;
}

.fund-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-4);
}

.fund-line + .fund-line {
  margin-top: var(--space-4);
}

.fund-line__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.fund-line__name {
  font-weight: 600;
}

.fund-line__figures,
.fund-line__note {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.fund-line__note {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
}

.fund-line__bar {
  width: 100%;
  height: 8px;
  margin-top: var(--space-1);
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  appearance: none;
}

.fund-line__bar::-webkit-progress-bar {
  background: var(--color-surface-sunken);
}

.fund-line__bar::-webkit-progress-value {
  background: var(--color-success);
}

.fund-line__bar::-moz-progress-bar {
  background: var(--color-success);
}

.fund-line__bar--over::-webkit-progress-value {
  background: var(--color-warning);
}

.fund-line__bar--over::-moz-progress-bar {
  background: var(--color-warning);
}

.fund-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fund-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.fund-list__item:last-child {
  border-bottom: 0;
}

.fund-list__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.fund-list__sub {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fund-list__amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.fund-installments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

/* Proje türü kartları (yeni proje, 10O-5; onaylı taslak birebir): gri zeminde beyaz kartlar, seçilen
   mavi çerçeveli ve simgesi mavi; "+ Boş proje" kesik çizgili; altında beyaz "Şablondan gelecekler". */
.fund-pick {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border-radius: 12px;
  background: var(--color-surface-sunken);
}

.fund-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.fund-type {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
}

.fund-type:hover,
.fund-type:focus-visible {
  border-color: var(--color-border-strong);
}

.fund-type--selected,
.fund-type--selected:hover {
  padding: 11px;
  border: 2px solid var(--color-info);
}

.fund-type--empty {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  border: 1px dashed var(--color-border-strong);
  color: var(--color-text-muted);
  font-size: 13px;
}

.fund-type__icon {
  color: var(--color-text);
}

.fund-type__icon .icon {
  width: 20px;
  height: 20px;
}

.fund-type--selected .fund-type__icon {
  color: var(--color-info);
}

.fund-type__name {
  margin: 6px 0 2px;
  font-size: 14px;
  font-weight: 600;
}

.fund-type__meta {
  color: var(--color-text-muted);
  font-size: 12px;
}

.fund-template {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  font-size: 13px;
}

.fund-template p {
  margin: 0;
}

.fund-template__title {
  margin-bottom: 6px;
  font-weight: 600;
}

.fund-template__line {
  color: var(--color-text-muted);
}

.fund-template__line + .fund-template__line {
  margin-top: 4px;
}

/* Yol haritası (10O-6; onaylı taslak birebir): tek kart — başlık + "Aşama ekle", ay sütunlu zaman
   çizelgesi (bitti yeşil, sürüyor mavi, sırada gri), altında seçili aşamanın adımları. */
.fund-road {
  padding: 1rem 1.25rem;
  border-radius: 12px;
  font-size: 13px;
}

.fund-road__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 12px;
}

.fund-road__top h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
}

.fund-road__add {
  position: relative;
}

.fund-road__add summary,
.fund-phase__add summary,
.fund-step__edit summary {
  list-style: none;
  cursor: pointer;
}

.fund-road__add summary::-webkit-details-marker,
.fund-phase__add summary::-webkit-details-marker,
.fund-step__edit summary::-webkit-details-marker,
.fund-budget__row--parent::-webkit-details-marker {
  display: none;
}

.fund-road__add[open] .fund-inline {
  position: absolute;
  z-index: 5;
  right: 0;
  min-width: 22rem;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

.fund-timeline {
  margin-bottom: 2px;
}

.fund-timeline__row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  min-height: 20px;
  font-size: 12px;
}

.fund-timeline__row--months {
  margin-bottom: 4px;
  color: var(--color-text-subtle);
  font-size: 11px;
}

.fund-timeline__label {
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fund-timeline__label:hover {
  text-decoration: underline;
}

.fund-timeline__label--on {
  font-weight: 600;
}

.fund-timeline__track {
  position: relative;
  height: 14px;
}

.fund-timeline__month {
  position: absolute;
  top: 0;
  overflow: hidden;
  white-space: nowrap;
}

.fund-timeline__bar {
  position: absolute;
  top: 2px;
  height: 10px;
  border-radius: 4px;
  background: var(--color-border-strong);
}

.fund-timeline__bar--done {
  background: var(--color-success);
}

.fund-timeline__bar--current {
  background: var(--color-info);
}

.fund-phase {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.fund-phase__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
}

.fund-phase__badge {
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 400;
}

.fund-phase__badge--current {
  background: var(--color-info-soft);
  color: var(--color-info);
}

.fund-phase__badge--done {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.fund-phase__badge--todo {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.fund-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fund-step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.fund-step--empty {
  color: var(--color-text-muted);
}

.fund-step__check {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1.5px solid var(--color-text-subtle);
  border-radius: 50%;
  background: transparent;
  color: var(--color-surface);
  cursor: pointer;
}

.fund-step__check .icon {
  width: 12px;
  height: 12px;
}

.fund-step--done .fund-step__check {
  border-color: var(--color-success);
  background: var(--color-success);
}

.fund-step__title {
  flex: 1 1 10rem;
}

.fund-step__meta {
  color: var(--color-text-muted);
}

.fund-step__edit summary.fund-step__meta:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.fund-step__meta--late {
  color: var(--color-danger);
}

.fund-step__state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.fund-step__state--done {
  color: var(--color-success);
}

.fund-step__state--task {
  color: var(--color-info);
}

.fund-step__edit[open] {
  display: contents;
}

.fund-step__edit[open] .fund-step__form {
  flex-basis: 100%;
  order: 10;
  margin: 0 0 0 28px;
}

.fund-phase__add {
  margin-top: 10px;
}

.fund-phase__add summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-muted);
  font-size: 12px;
}

.fund-phase__delete {
  margin-top: var(--space-2);
}

.fund-road__empty {
  margin: 0;
  padding: var(--space-3) 0;
}

.fund-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.fund-inline .input {
  flex: 1 1 10rem;
  width: auto;
}

.fund-inline .fund-inline__num {
  flex: 0 1 9rem;
}

/* Bütçe kalemleri (10O-5; onaylı taslak birebir): Kalem · Miktar · Birim fiyat · Bütçe · Harcanan;
   ana kalem kalın ve açılır, alt kalem 20 px içeride; harcanan yeşil çubuk (aşılınca amber); tek
   ekleme satırı; altta koyu çizgili toplam. */
.fund-budget {
  padding: 1rem 1.25rem;
  border-radius: 12px;
  font-size: 13px;
}

.fund-budget__row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) 0.7fr 1fr 1fr 1.6fr;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
}

.fund-budget__row .num {
  text-align: right;
}

.fund-budget__row > :nth-child(5) {
  padding-left: 8px;
}

.fund-budget__row--head {
  padding: 0 0 6px;
  color: var(--color-text-subtle);
  font-size: 11px;
}

.fund-budget__row--parent {
  padding: 8px 0;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.fund-budget__row--leaf {
  padding: 8px 0;
}

.fund-budget__row--leaf .fund-budget__name > a,
.fund-budget__row--leaf .fund-budget__name {
  font-weight: 600;
}

.fund-budget__row--leaf .fund-budget__meta {
  font-weight: 400;
}

.fund-budget__row--child {
  padding-left: 20px;
}

.fund-budget__name a {
  color: inherit;
  text-decoration: none;
}

.fund-budget__name a:hover {
  text-decoration: underline;
}

.fund-budget__chevron {
  margin-right: 4px;
  transition: transform 0.15s;
}

.fund-budget__group[open] .fund-budget__chevron {
  transform: rotate(90deg);
}

.fund-budget__meta {
  color: var(--color-text-subtle);
  font-size: 12px;
  font-weight: 400;
}

.fund-budget__spent {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 400;
}

.fund-budget__spent--over {
  color: var(--color-warning);
}

.fund-budget__none {
  color: var(--color-text-subtle);
  font-size: 12px;
}

.fund-budget__row .fund-meter {
  height: 6px;
}

.fund-budget__row--add {
  padding: 8px 0;
  border-bottom: 0;
  color: var(--color-text-muted);
}

.fund-budget__row--add .input {
  width: 100%;
  height: 30px;
  font-size: 13px;
}

.fund-budget__total {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: 8px;
  border-top: 1px solid var(--color-border-strong);
  font-weight: 600;
}

.fund-budget__empty {
  margin: 0;
  padding: var(--space-3) 0;
}

@media (max-width: 700px) {
  .fund-budget__row {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .fund-budget__row > :nth-child(2),
  .fund-budget__row > :nth-child(3) {
    display: none;
  }
}

/* Sandık paneli (10O-7; onaylı taslak): "Sandıkta …" ile nakit ihtiyacı yan yana, grafik ile "Nereye
   harcandı" yan yana, dönemin özeti paragraf; çubuklu dağılımlar, aktif proje kartları. */
.fund-period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.fund-period .input {
  width: 10rem;
  height: 32px;
}

.fund-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.fund-hero__money {
  padding: var(--space-4) var(--space-5);
}

.fund-hero__money p {
  margin: 0;
}

.fund-hero__label,
.fund-hero__sub {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.fund-hero__value {
  margin: 2px 0 var(--space-2);
  font-size: 2.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.15;
}

.fund-hero__debts {
  margin-top: var(--space-3);
}

.fund-hero__debts strong {
  color: var(--color-text);
  font-weight: 600;
}

.fund-need {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.fund-need--short {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.fund-need__title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
}

.fund-need__text {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
}

.fund-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-3);
}

@media (max-width: 900px) {
  .fund-hero,
  .fund-pair {
    grid-template-columns: 1fr;
  }
}

/* BÜLTEN HAZIRLA (yayınevi bülten şablonları): solda seçimler, sağda canlı önizleme. */
.bulletin {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.bulletin__fields {
  display: grid;
  gap: var(--space-3);
}

.bulletin__side {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.bulletin__subject {
  margin: 0 0 4px;
  font-weight: 600;
  font-size: var(--text-lg);
}

.bulletin__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-3);
}

.bulletin__preview {
  width: 100%;
  height: 78vh;
  min-height: 520px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
}

@media (max-width: 1100px) {
  .bulletin {
    grid-template-columns: 1fr;
  }
}

/* MÜŞTERİ İLİŞKİLERİ (10S-M1; onaylı taslak 2026-11-13: "daha canlı, CRM hissettiren"). Kimlik bandı,
   aşama şeridi, sayı kutuları, ikonlu hızlı kayıt, aya göre gruplu renkli zaman çizgisi, koyu "sıradaki
   adım" kartı. Renkler durum renkleridir (mavi, yeşil, amber, mor, turkuaz); marka kırmızısı yalnız
   seçili sekmenin çizgisinde. Her şey `.crm` içindedir. */
.crm {
  --crm-teal: #1f6f6b;
  --crm-teal-soft: #e6f3f2;
  display: grid;
  gap: var(--space-3);
}

.crm-card {
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
}

.crm-h2 {
  margin: 0 0 10px;
  font-size: 0.9375rem;
  font-weight: 700;
}

.crm-label {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.71875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.crm-muted {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.crm-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.crm-ava {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--color-info);
  color: var(--color-action-text);
  font-size: 1.375rem;
  font-weight: 700;
}

.crm-name {
  margin: 0;
  font-size: 1.4375rem;
  font-weight: 700;
  line-height: 1.2;
}

.crm-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 4px 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.crm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}

.crm-tag {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.78125rem;
  font-weight: 600;
}

.crm-tag--blue {
  background: var(--color-info-soft);
  color: var(--color-info);
}

.crm-tag--green {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.crm-tag--amber {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.crm-tag--grey {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.crm-heat {
  text-align: right;
}

.crm-heat b {
  display: block;
  font-size: 1.875rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.crm-heat span {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.crm-stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.crm-stage {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: 0.84375rem;
  font-weight: 600;
}

.crm-stage--done {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.crm-stage--now {
  background: var(--color-success);
  color: var(--color-action-text);
}

.crm-stage--passive {
  background: var(--color-warning-bar);
}

.crm-tiles {
  display: grid;
  /* Kutu sayısı ekrana göre değişir (kartta 5, takipte 6): tek satıra sığdıkça yan yana. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.crm-tile {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
}

.crm-tile b {
  display: block;
  margin-top: 2px;
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.crm-tile--accent {
  border-color: transparent;
  background: var(--color-warning-soft);
}

.crm-tile--accent b {
  color: var(--color-warning);
}

.crm-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.crm-col {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

/* Hızlı kayıt: ikonlu büyük seçenekler (radyo düğmesi görünmez, etiket düğme gibi durur). */
.crm-quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
}

.crm-q {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 12px 6px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.84375rem;
  font-weight: 600;
  text-align: center;
}

.crm-q input,
.crm-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.crm-q:hover {
  border-color: var(--color-action);
}

.crm-q:has(input:checked) {
  border-color: var(--color-info);
  box-shadow: 0 0 0 2px var(--color-info-soft);
}

.crm-q:has(input:focus-visible),
.crm-pill:has(input:focus-visible) {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.crm-i,
.crm-dot {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.crm-i svg,
.crm-dot svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.crm-i--blue {
  background: var(--color-info-soft);
  color: var(--color-info);
}

.crm-i--teal {
  background: var(--crm-teal-soft);
  color: var(--crm-teal);
}

.crm-i--violet {
  background: var(--color-violet-soft);
  color: var(--color-violet);
}

.crm-i--amber {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.crm-i--green {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.crm-i--grey {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.crm-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border-strong);
}

.crm-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.crm-form select,
.crm-form textarea,
.crm-form input[type="date"],
.crm-form input[type="text"] {
  width: 100%;
  margin-top: 4px;
}

.crm-seg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.crm-pill span {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 0.84375rem;
}

.crm-pill:has(input:checked) span {
  border-color: var(--color-action);
  background: var(--color-action);
  color: var(--color-action-text);
}

.crm-form .crm-date {
  display: none;
  width: 10rem;
  margin-top: 0;
}

.crm-seg:has(input[value="tarih"]:checked) .crm-date {
  display: block;
}

.crm-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.crm-bar .btn {
  margin-left: auto;
}

.crm-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
}

.crm-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
}

.crm-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: -4px 0 6px;
  border-bottom: 1px solid var(--color-border);
}

.crm-tab {
  padding: 8px 12px;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.crm-tab:hover {
  color: var(--color-text);
  text-decoration: none;
}

.crm-tab[aria-current="page"] {
  border-bottom-color: var(--color-brand);
  color: var(--color-text);
}

.crm-tab small {
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  font-size: 0.75rem;
}

.crm-day {
  margin: 0;
  padding: 8px 0 2px 48px;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.crm-tl {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-tl::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 17px;
  width: 2px;
  background: var(--color-border);
}

.crm-tl li {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
}

.crm-dot {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-surface);
}

.crm-ev {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--color-surface-sunken);
}

.crm-ev--auto {
  border: 1px dashed var(--color-border-strong);
  background: transparent;
}

.crm-ev__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 12px;
}

.crm-ev__top b {
  font-size: 0.90625rem;
}

.crm-ev__top span {
  color: var(--color-text-muted);
  font-size: 0.78125rem;
  font-variant-numeric: tabular-nums;
}

.crm-ev p {
  margin: 4px 0 0;
  font-size: var(--text-sm);
}

.crm-by {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: 0.78125rem;
}

.crm-empty {
  margin: var(--space-3) 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Sıradaki adım: koyu kart. */
.crm-next {
  display: grid;
  gap: 2px;
  border-color: var(--color-action);
  background: var(--color-action);
  color: var(--color-action-text);
}

.crm-next .crm-label,
.crm-next span {
  color: #d9cfc4;
}

.crm-next span {
  font-size: 0.84375rem;
}

.crm-next b {
  font-size: 1.1875rem;
}

.crm-next__btn {
  margin-top: 12px;
  padding: 7px 14px;
  border: 0;
  border-radius: 9px;
  background: var(--color-surface);
  color: var(--color-action);
  cursor: pointer;
  font: inherit;
  font-size: 0.84375rem;
  font-weight: 600;
}

.crm-req {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-surface-sunken);
  font-size: var(--text-sm);
}

.crm-req:last-child {
  border-bottom: 0;
}

.crm-req__end,
.crm-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.crm-inline .input {
  width: 5.5rem;
}

.crm-req small,
.crm-who small {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.78125rem;
}

.crm-who {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: var(--text-sm);
}

@media (max-width: 900px) {
  .crm-cols {
    grid-template-columns: 1fr;
  }

  .crm-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-row {
    grid-template-columns: 1fr;
  }

  .crm-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .crm-heat {
    grid-column: 1 / -1;
    text-align: left;
  }

  .crm-stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* RAPOR EKRANLARI (10R; onaylı "Töre Rapor Taslakları" düzeni, kullanıcı 2026-11-13: "çok daha tutarlı,
   profesyonel ve sunuma uygun"). Sade beyaz kartlar (köşe 12), küçük büyük-harf başlıklar, iri tabular
   rakamlar; kalem satırları ince çizgiyle ayrılır, toplam satırı kalın üst çizgi taşır; tablolar
   zebrasız; toplam sermaye koyu espresso kartta. Her şey `.report` içindedir. */
.report {
  display: grid;
  gap: var(--space-3);
}

.report-card {
  display: block;
  min-width: 0;
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
}

.report-label {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.report-h2 {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
  font-weight: 600;
}

.report-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
}

.report-bar__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.report-bar__group--end {
  margin-left: auto;
}

.report-bar__label {
  margin-right: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.report-chip {
  padding: 4px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.report-chip:hover {
  border-color: var(--color-action);
  text-decoration: none;
}

.report-chip[aria-current="true"] {
  border-color: var(--color-action);
  background: var(--color-action);
  color: var(--color-action-text);
}

.report-bar__range {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.report-bar__range .input {
  width: 10rem;
  height: 32px;
}

/* Göstergeler: sığdığı kadar yan yana (altısı tek satır), sığmayınca alt satıra. */
.report-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
}

.report-kpi {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 16px 18px;
}

.report-kpi__value {
  margin-top: 2px;
  font-size: 1.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.report-kpi__hint {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.report-trend {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.report-trend--up,
.report-trend--good {
  color: var(--color-success);
}

.report-trend--down,
.report-trend--warn {
  color: var(--color-warning);
}

/* Bölümler: iki sütunlu akış (yarım bölümler yan yana, ötekiler tam satır) ya da üç sütun. */
.report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
}

.report-card--wide {
  grid-column: 1 / -1;
}

.report-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.report-col {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.report-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--space-3);
}

.report-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (max-width: 1100px) {
  .report-cols {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .report-grid,
  .report-pair,
  .report-trio {
    grid-template-columns: 1fr;
  }

  .report-bar__group--end {
    margin-left: 0;
  }
}

/* Koyu vurgu kartı: toplam sermaye. */
.report-hero {
  display: grid;
  gap: 2px;
  border-color: var(--color-action);
  background: var(--color-action);
  color: var(--color-action-text);
}

.report-hero__label {
  color: #d9cfc4;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.report-hero__value {
  font-size: 2.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.report-hero__sub {
  color: #d9cfc4;
  font-size: 0.84375rem;
}

.report-hero__sub--good {
  color: #9be0b9;
  font-weight: 600;
}

.report-hero__sub--warn {
  color: #f2c58a;
  font-weight: 600;
}

/* Kalem satırı: solda ad, sağda tutar; son satır kalın toplam. */
.report-ln {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  padding: 5px 0;
  border-bottom: 1px solid var(--color-surface-sunken);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.report-ln > span:last-child {
  white-space: nowrap;
}

.report-ln--muted {
  color: var(--color-text-muted);
}

.report-ln--warn {
  color: var(--color-warning);
}

.report-ln--good > span:last-child {
  color: var(--color-success);
}

.report-ln--sum {
  margin-top: 4px;
  padding-top: 7px;
  border-top: 2px solid var(--color-action);
  border-bottom: 0;
  font-weight: 700;
}

/* Tablo: zebrasız, küçük büyük-harf başlık, ince satır çizgisi, kalın çizgili alt toplam. */
.report-card--table {
  padding: 6px 8px 10px;
}

.report-card--table > .report-h2 {
  padding: 8px 10px 0;
}

.report-card--table > .report-note {
  padding: 0 10px;
}

.report-scroll {
  overflow-x: auto;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.report-table th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

.report-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-surface-sunken);
  text-align: right;
  white-space: nowrap;
}

.report-table .l {
  text-align: left;
  white-space: normal;
}

.report-table tfoot td {
  border-top: 2px solid var(--color-action);
  border-bottom: 0;
  background: var(--color-surface-muted);
  font-weight: 700;
}

.report-row--head td {
  font-weight: 600;
}

.report-row--muted td,
td.report-row--muted {
  color: var(--color-text-muted);
}

.report-row--warn td {
  color: var(--color-warning);
}

.report-row--bad td {
  color: var(--color-danger);
}

.report-row--good td:last-child {
  color: var(--color-success);
  font-weight: 600;
}

.report-money {
  display: flex;
  gap: var(--space-6);
  margin-top: 6px;
}

.report-money p {
  display: grid;
  gap: 2px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.report-money strong {
  color: var(--color-text);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.report-rule {
  margin: var(--space-3) 0 var(--space-2);
  border: 0;
  border-top: 1px solid var(--color-border);
}

.report-note {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.report-line {
  margin: 6px 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.report-line--danger,
.report-line--warning {
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-warning-bar);
}

.report-line--danger {
  border-left-color: var(--color-danger);
}

.report-callout {
  margin: var(--space-3) 0 0;
  padding: 8px 10px;
  border: 1px solid var(--color-warning-line);
  border-radius: 10px;
  background: var(--color-warning-soft);
  color: var(--color-warning);
  font-size: 0.8125rem;
}

.fund-bars {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fund-bars__row {
  display: grid;
  gap: 4px;
  font-size: var(--text-sm);
}

.fund-bars__line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.fund-bars__line small {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* Sandık çubukları (10O-7, kullanıcı 2026-11-05): SVG (dolgu genişliği öznitelikte, satır içi stil yok).
   Harcama kırmızının tonları, katkıda borç altın · hibe açık yeşil, projede iş espresso · para durum
   renginde. */
.fund-meter {
  display: block;
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 4px;
}

.fund-meter--thick {
  height: 9px;
}

.fund-meter__track {
  fill: var(--color-surface-sunken);
}

.fund-meter__fill--out1 {
  fill: var(--color-brand);
}

.fund-meter__fill--out2 {
  fill: var(--color-brand-mid);
}

.fund-meter__fill--out3 {
  fill: var(--color-brand-light);
}

.fund-meter__fill--loan {
  fill: var(--color-gold);
}

.fund-meter__fill--grant {
  fill: var(--color-grant);
}

.fund-meter__fill--work {
  fill: var(--color-action);
}

.fund-meter__fill--ok {
  fill: var(--color-success);
}

.fund-meter__fill--watch {
  fill: var(--color-warning-bar);
}

.fund-meter__fill--over {
  fill: var(--color-brand);
}

.fund-status {
  flex: none;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: var(--text-xs);
}

.fund-status--ok {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.fund-status--watch {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.fund-status--over {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.fund-project__meters {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
  gap: 4px var(--space-2);
  align-items: center;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.fund-project__pct {
  text-align: right;
}

.fund-projects {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fund-project {
  display: grid;
  gap: 4px;
}

.fund-project__title {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.fund-project__title:hover {
  text-decoration: underline;
}

.fund-project__meta {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.fund-project__warn {
  color: var(--color-warning);
  font-size: var(--text-xs);
}

.fund-project__warn--over {
  color: var(--color-danger);
}

.fund-comment__who {
  margin-left: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 400;
}

.fund-comment__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
}

.fund-comment__note {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  margin-top: var(--space-4);
}

.fund-comment__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.fund-comment__note textarea {
  width: 100%;
}

/* Betik çalışmazsa pencere sayfa içinde (finance/entry_page.html). */
.cash-window-page {
  max-width: 1000px;
}

/* Pencere kapanınca kısa bildirim ("Gider kaydedildi: 1.250,00 ₺ · Sabit giderler › Kira"). */
.cash-toast {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 60;
  max-width: min(32rem, calc(100vw - 2rem));
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-success-line);
  border-radius: var(--radius-sm);
  background: var(--color-success-soft);
  box-shadow: var(--shadow);
  color: var(--color-success);
  font-weight: 600;
}

.cash-entry__eyebrow {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.cash-dir {
  display: flex;
  gap: var(--space-2);
}

.cash-dir__key,
.cash-method {
  --tone: var(--color-text);
  --tone-soft: var(--color-surface);
  --tone-line: var(--color-border-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--tone-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--tone);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.cash-dir__key[aria-pressed="true"],
.cash-method:has(input:checked) {
  border-color: var(--tone);
  background: var(--tone-soft);
  box-shadow: inset 0 0 0 1px var(--tone);
}

.cash-dir__key:focus-visible,
.cash-method:has(input:focus-visible) {
  outline: none;
  box-shadow: var(--focus-ring);
}

.cash-dir__key--in,
.cash-method--cash {
  --tone: var(--color-success);
  --tone-soft: var(--color-success-soft);
  --tone-line: var(--color-success-line);
}

.cash-dir__key--out {
  --tone: var(--color-danger);
  --tone-soft: var(--color-danger-soft);
  --tone-line: var(--color-danger-line);
}

.cash-method--card {
  --tone: var(--color-info);
  --tone-soft: var(--color-info-soft);
  --tone-line: var(--color-info-line);
}

.cash-method--transfer {
  --tone: var(--color-violet);
  --tone-soft: var(--color-violet-soft);
  --tone-line: var(--color-violet-line);
}

.cash-method input {
  position: absolute;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.cash-entry__label {
  display: block;
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
}

.cash-amount {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  padding-right: var(--space-5);
  border-bottom: 2px solid var(--cash-tone);
  color: var(--cash-tone);
}

.cash-amount__sign,
.cash-amount input {
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.2;
}

.cash-amount input {
  /* Kutu yazılan tutar kadar genişler ("1.250.000,00" sığsın). */
  field-sizing: content;
  min-width: 5ch;
  max-width: 14ch;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.cash-amount input:focus,
.cash-amount input:focus-visible {
  outline: none;
  box-shadow: none;
}

.cash-amount:focus-within {
  box-shadow: 0 3px 0 -1px var(--cash-tone);
}

.cash-amount__unit {
  font-size: var(--text-xl);
}

.cash-date__text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.cash-date__box {
  margin-top: var(--space-2);
}

.cash-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.cash-entry__hint {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-success);
}

.cash-entry__hint.is-warning,
.cash-entry__note {
  color: var(--color-warning);
}

.cash-entry__account {
  margin-top: var(--space-3);
}

.cash-cat .combo,
.cash-entry__account .combo,
.party-fields .combo {
  display: flex;
  width: 100%;
  height: 2.5rem;
}

/* Cari seçici formun `.field` kabı dışında: kutu öteki alanlarla aynı boyda. */
.cash-entry .picker__box {
  height: 2.5rem;
}

.cash-entry .picker__input {
  padding: 0 var(--space-3);
}

.cash-subs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.cash-chip {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.cash-chip:hover {
  border-color: var(--color-border-strong);
}

.cash-chip[aria-pressed="true"] {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
  color: var(--color-brand);
}

.cash-entry__chosen,
.cash-entry__note,
.cash-entry__warn,
.cash-entry__empty {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
}

.cash-entry__chosen strong {
  font-weight: 600;
}

.cash-entry__note a {
  color: inherit;
  text-decoration: underline;
}

.cash-entry__warn {
  color: var(--color-danger);
}

.cash-entry__optional {
  color: var(--color-text-subtle);
}

.cash-entry__empty {
  color: var(--color-text-muted);
}

.cash-entry__help {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.cash-side {
  padding: var(--space-4) var(--space-5);
}

.cash-side__title {
  margin: 0 0 var(--space-2);
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: 600;
}

.cash-side__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.cash-side__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cash-side__amount,
.cash-side__repeat {
  white-space: nowrap;
}

.cash-side__amount--in {
  color: var(--color-success);
}

.cash-side__amount--out {
  color: var(--color-danger);
}

.cash-side__repeat {
  color: var(--color-info);
}

.cash-side__total {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.cash-side__total strong {
  color: var(--color-text);
  font-weight: 600;
}

.cash-side__empty {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (max-width: 860px) {
  .cash-window__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cash-date {
    text-align: left;
  }

  .cash-window__head {
    flex-wrap: wrap;
  }
}

/* --- Yeni cari penceresi (kullanıcı 2026-11-04; partners/_party_window.html) ---
   Kasa pencerelerinin çerçevesi; önce büyük seçim kartları (Müşteri / Tedarikçi, Kişi / Kurum),
   sonra telefon ya da havuz araması, en son bilgiler. Seçili kart menünün etkin girişi gibi marka
   kırmızısının açık tonudur. */
.card-window:has(.party-window) {
  width: min(880px, calc(100vw - 2rem));
}

.party-window__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.party-choice {
  margin: 0;
  padding: 0;
  border: 0;
}

.party-choice__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.party-choice__card {
  position: relative;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
}

.party-choice__card strong {
  font-size: var(--text-lg);
}

.party-choice__card span:last-child {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.party-choice--small .party-choice__card {
  padding: var(--space-3) var(--space-4);
}

.party-choice--small .party-choice__card strong {
  font-size: var(--text-md);
}

.party-choice__card input {
  position: absolute;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.party-choice__card:has(input:checked) {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
  box-shadow: inset 0 0 0 1px var(--color-brand);
}

.party-choice__card:has(input:focus-visible) {
  box-shadow: var(--focus-ring);
}

.party-choice__icon {
  color: var(--color-text-muted);
}

.party-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
}

.party-fields__wide {
  grid-column: 1 / -1;
}

.party-pool {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.party-pool__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.party-pool__empty {
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.party-pool__chosen {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-success-soft);
  color: var(--color-success);
}

.party-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.party-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  cursor: pointer;
}

.party-tag:has(input:checked) {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
  color: var(--color-brand);
}

.party-tag input {
  margin: 0;
}

.party-consent {
  margin: 0;
  padding: 0;
  border: 0;
}

.party-shared {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-info-soft);
  color: var(--color-info);
  font-size: var(--text-sm);
}

.party-staff {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.party-staff__add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.party-more summary {
  cursor: pointer;
  color: var(--color-text-muted);
}

.party-more[open] summary {
  margin-bottom: var(--space-3);
}

@media (max-width: 640px) {
  .party-choice__row,
  .party-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Gelir-gider kategori ağacı (finance/categories.html): satırlar sürüklenerek sıralanır. */
.cat-tree {
  display: grid;
  gap: var(--space-4);
}

.cat-tree__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cat-tree__list--sub {
  padding-left: var(--space-6);
}

.cat-tree__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-border);
}

.cat-tree__row.is-inactive .cat-tree__name {
  color: var(--color-text-muted);
}

.cat-tree__grip {
  color: var(--color-text-subtle);
  letter-spacing: -0.15em;
  cursor: grab;
}

.cat-tree__name {
  color: var(--color-text);
  font-weight: 600;
}

.cat-tree__list--sub .cat-tree__name {
  font-weight: 400;
}

.cat-tree__count {
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.cat-tree__item.is-dragging {
  background: var(--color-surface-sunken);
}

/* Fiş şeridinde seçici ve belge no seçim kutusuyla aynı boyda (kullanıcı 2026-10-21: kutuların
   boyu ve kenarı tutmuyordu). */
.doc-party .picker__box {
  height: var(--strip-height);
  border-color: var(--color-border-strong);
}

.till-customer .combo {
  flex: 0 1 24rem;
}

/* Satır alanı tek bir yüzeydir ve BOŞLUĞU DOLDURUR. Önceden tablo yalnız
   satırları kadar yer kaplıyor, altında bomboş zemin kalıyordu; ekran terk
   edilmiş görünüyordu. */
.doc-entry__surface {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.doc-entry__surface .doc-entry__table {
  box-shadow: none;
  border-radius: 0;
}

.doc-entry__surface .empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-text-subtle);
}

/* Üst bant: cari ve belge no ekranın en sık dokunulan alanı; soluk kalmasın. */
.doc-party .picker__input,
.doc-party input {
  font-size: var(--text-md);
}

.doc-party .picker {
  flex: 0 1 18rem;
  min-width: 14rem;
}

.doc-party input[data-header="reference"] {
  flex: 0 1 220px;
  min-width: 8rem;
  height: var(--strip-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
}

/* --- Kasa: kutucuk hissini kaldıran rötuşlar (2026-09-24) ---------------- */

/* Ürün kutucukları: kalın çerçeve + büyük gri kapak yer tutucusu eski
   duruyordu. Kart kenarlığı inceldi, kapak alanı küçüldü, baş harfler
   sessiz bir zemine oturdu. */
.till-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  text-align: left;
  cursor: pointer;
  border-color: color-mix(in srgb, var(--color-border) 70%, transparent);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 120ms ease, border-color 120ms ease;
}

.till-tile:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow);
}

.till-tile__cover {
  width: 100%;
  height: 56px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

.till-tile__cover--blank {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Ödeme tuşları: beyaz kutular yerine yüzeyle bütünleşen, renk şeridi ince. */
.till-pay {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 104px;
  min-height: 46px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid;
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 120ms ease;
  position: relative;
  background: var(--color-surface);
  border-color: color-mix(in srgb, var(--color-border) 80%, transparent);
  color: var(--color-text);
  padding-left: calc(var(--space-3) + 4px);
  box-shadow: var(--shadow-sm);
}

.till-pay::before {
  content: "";
  position: absolute;
  inset: 6px auto 6px 6px;
  width: 3px;
  border-radius: 2px;
  background: var(--tone, var(--color-text-subtle));
}

.till-pay:hover {
  background: var(--color-surface-sunken);
  border-color: var(--color-action);
  box-shadow: var(--shadow);
}

/* Fiş tablosu kasada da yüzeyle aynı dili konuşsun. */
.till-cart {
  flex: 1;
  min-height: 286px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

/* Başlık satırı renkli bant (kullanıcı 2026-10-21: "sayfa çok soluk"): uzun fişte ve kasada
   sütun adı kaybolmasın. */
.till-table thead th {
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
}

.till-table tbody td {
  padding: 3px var(--space-2);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  line-height: 1.3;
}

/* Cari şeridi kasada da ince bant. */
.till-customer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-color: color-mix(in srgb, var(--color-border) 70%, transparent);
}

/* --- Kasa: ince şeritler, yüzen sonuçlar, genişleyen panel (kullanıcı 2026-10-22) ----------
   "ONSO olabildiğince üst ve alt şeritleri az tutarak fiş ekranına yer açmış": kasada üst satır
   yoktur (başlık ve lokasyon sekmenin adında), alt şerit tek satırdır, arama sonucu fişi itmez. */
.workspace--till .workspace__bar {
  display: none;
}

/* Üst satır gizlenince ızgara iki satırdır: fiş kalan yüksekliği alır, alt şerit kendi boyunda. */
.workspace--framed.workspace--till {
  grid-template-rows: minmax(0, 1fr) auto;
}

.workspace--till .workspace__body {
  grid-template-columns: minmax(0, 1fr) var(--till-side, clamp(300px, 26vw, 420px));
}

.till-customer__place {
  display: contents;
}

/* Sürükleme tutamağı: panelin sol kenarında ince şerit. */
.till-side {
  position: relative;
}

.till-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--space-3));
  width: var(--space-3);
  cursor: col-resize;
  touch-action: none;
}

.till-resizer::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 48px;
  border-radius: 2px;
  background: var(--color-border-strong);
  transform: translate(-50%, -50%);
}

.till-resizer:hover::after,
.till-resizer:focus-visible::after,
.till-resizer.is-dragging::after {
  background: var(--color-action);
}

/* Okutulan ürünün kartı. */
.till-product {
  display: grid;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.till-product__empty {
  font-size: var(--text-sm);
}

.till-product__head {
  display: flex;
  gap: var(--space-3);
}

.till-product__cover {
  flex: 0 0 56px;
  width: 56px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
}

.till-product__text {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  font-size: var(--text-sm);
}

.till-product__text strong {
  font-size: var(--text-base);
  line-height: 1.25;
}

.till-product__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--space-1);
}

.till-product__held {
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-warning-soft);
  color: var(--color-warning);
  font-size: var(--text-sm);
  font-weight: 600;
}

.till-product__label {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.till-product__others,
.till-customer-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.till-product__others li,
.till-customer-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

.till-product__ask {
  justify-self: start;
}

.till-customer-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

#musteri-ozet {
  display: grid;
  gap: var(--space-2);
}

/* Müşterisine ayrılmış kitap varsa sekme işaretlenir. */
.till-tabs__link--flag::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-warning);
}

.till-quick__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.till-quick__title {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.till-quick__edit {
  font-size: var(--text-sm);
}

/* Eski "Bilgi" sekmesi: bağlantı ve kuyruk panelin dibinde tek satır. */
.till-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.till-status__refresh {
  margin-left: auto;
}

/* Toplam alt şeritte: küçük ayrıntılar, büyük sonuç; kampanya ve parçalı ödemenin kalanı üstünde. */
.till-total {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "hint hint"
    "due due"
    "detail grand";
  align-items: end;
  column-gap: var(--space-4);
  margin-left: var(--space-2);
  padding: var(--space-1) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  color: var(--color-action);
}

.till-total__hint {
  grid-area: hint;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-warning);
}

.till-total__due {
  grid-area: due;
  margin: 0;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-danger);
  color: var(--color-action-text);
  font-size: var(--text-sm);
  font-weight: 700;
}

.till-total__detail {
  grid-area: detail;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: var(--space-2);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.till-total__detail div {
  display: contents;
}

.till-total__detail dd {
  margin: 0;
  text-align: right;
}

.till-total__grand {
  grid-area: grand;
  font-size: clamp(1.6rem, 1rem + 1.4vw, 2.2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* Ödeme penceresi: tutar kalana denk gelmezse kalan kırmızı, denkse yeşil. */
.pay-figure--due output {
  color: var(--color-danger);
}

.pay-figure--done output {
  color: var(--color-success);
}

.pay-dialog__after {
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* Barkod kutusu kasada ve fişte HER ZAMAN odaktadır; odak halkası orada bilgi
   taşımaz, yalnız ekranın en büyük öğesini sürekli renkli gösterir. Odak
   koyulaşan kenarlıkla belirtilir, halka kaldırılır. */
.till-scan:focus-within {
  border-color: var(--color-action);
  box-shadow: var(--shadow-sm);
}

/* Kaydedildi işareti: şeritte, kısa süre görünür. */
.doc-saved {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  color: var(--color-success);
}

.doc-saved .icon {
  width: 16px;
  height: 16px;
}

/* Geri al şeridi: yanlış silinen satır sessizce kaybolmasın. */
.undo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-sunken);
  font-size: var(--text-sm);
}

/* --- Liste tabloları: modernleştirmenin devamı -------------------------- */
/* Not: .table thead th ve .table tbody tr:hover zaman içinde üç kez üst üste
   tanımlanmış; sonuncusu satır üzerine gelince zemini PEMBE yapıyordu
   (--color-brand-soft). Marka kırmızısı vurgu rengi değildir — hover nötrdür. */
.table thead th {
  position: sticky;
  top: 0;
  background: transparent;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
  white-space: nowrap;
  z-index: 1;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.table tbody td {
  height: auto;
  padding-block: var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr:hover {
  background: color-mix(in srgb, var(--color-bg) 70%, transparent);
}

/* Sabit işlem hücresi kendi zeminini taşır; üzerine gelince satırla aynı tonu alır. */
.table tbody tr:hover .actions {
  background: var(--color-surface-muted);
}

/* Sabit hücre kendi katmanını açar: açık ⋮ menüsü alttaki satırların hücrelerinin üstünde kalsın. */
.table .actions:has(.rowmenu[open]) {
  z-index: 3;
}

/* Tablo kartın içindeyse kendi çerçevesini tekrar çizmesin. */
.card--flush .table-wrap {
  border: 0;
}

/* Görseli olmayan kartın yer tutucusu (tanıtım paketi kullanıyor). */
.cover-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 3;
  background: var(--color-surface-sunken);
  border-radius: var(--radius);
  color: var(--color-text-subtle);
}

.cover-placeholder .icon {
  width: 3rem;
  height: 3rem;
}

/* Listede kitap kapağının küçük görseli (Arayüz — KARAR, 10E-1). Satır yüksekliğini
   bozmasın diye satıra sığar; kapağı olmayan kitapta yer tutucu aynı yeri kaplar. */
.cover-cell {
  width: 3rem;
  padding-right: 0;
}

.cover-thumb {
  display: block;
  width: 2rem;
  height: 2.75rem;
  object-fit: cover;
  border-radius: 4px;
  background: var(--color-surface-sunken);
  box-shadow: var(--shadow-sm);
}

.cover-thumb--blank {
  display: grid;
  place-items: center;
  color: var(--color-text-subtle);
  box-shadow: none;
}

.cover-thumb--blank .icon {
  width: 1rem;
  height: 1rem;
}

/* Ürün kartı › Görseller (10E-6). Kapak oranı (2:3) korunur, görsel kırpılmaz: ek görsel
   (kutu oyununun içi, arka kapak) yatay olabilir. */
.gallery {
  display: grid;
  /* 8rem: telefonda (375 px) iki sütun sığar; tek sütunda her görsel bir ekran boyu oluyordu. */
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.gallery__frame {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 3;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.gallery__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.gallery__caption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.gallery-external {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* --- Takvim (10E-3) -------------------------------------------------------------------
   Renk türden gelir: toplantı/etkinlik/fuar mavi, mali amber, üretim/teslim yeşil, önemli gün
   ve kampanya altın, görev nötr. KIRMIZI TAKVİMDE KULLANILMAZ. Bugün espresso dairedir. */
.month {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 2px;
}

.month th {
  padding: var(--space-1);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
}

.month__day {
  height: 6.5rem;
  padding: var(--space-1) var(--space-2);
  overflow: hidden;
  vertical-align: top;
  background: var(--color-surface-muted);
  border-radius: var(--radius-sm);
}

.month__day--out {
  color: var(--color-text-subtle);
  background: transparent;
}

.month__num {
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.month__day--today .month__num {
  color: var(--color-action-text);
  background: var(--color-action);
}

.month__entries {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}

.month--compact th {
  text-align: center;
}

.month--compact .month__day {
  height: auto;
  padding: 2px;
  text-align: center;
  background: transparent;
}

.month__dots {
  display: flex;
  justify-content: center;
  gap: 3px;
  min-height: 6px;
  margin-top: 2px;
}

.month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.cal-entry {
  display: block;
  padding: 1px var(--space-2);
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--text-xs);
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: var(--tone-soft, var(--color-surface-sunken));
  border-left: 3px solid var(--tone, var(--color-border-strong));
  border-radius: 4px;
}

a.cal-entry:hover {
  text-decoration: none;
  filter: brightness(0.97);
}

.cal-entry__time {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.cal-entry--info {
  --tone: var(--color-info);
  --tone-soft: var(--color-info-soft);
}

.cal-entry--success {
  --tone: var(--color-success);
  --tone-soft: var(--color-success-soft);
}

.cal-entry--warning {
  --tone: var(--color-warning);
  --tone-soft: var(--color-warning-soft);
}

.cal-entry--gold {
  --tone: var(--color-gold);
  --tone-soft: var(--color-gold-soft);
}

.cal-entry--neutral {
  --tone: var(--color-border-strong);
  --tone-soft: var(--color-surface-sunken);
}

.dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border-strong);
}

.dot--info {
  background: var(--color-info);
}

.dot--success {
  background: var(--color-success);
}

.dot--warning {
  background: var(--color-warning);
}

.dot--gold {
  background: var(--color-gold);
}

.dot--neutral {
  background: var(--color-text-subtle);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  list-style: none;
}

.legend li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.agenda-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.agenda-list__item {
  display: grid;
  grid-template-columns: auto 7rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-3);
}

.agenda-list__date {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.agenda-list__kind {
  display: block;
  font-size: var(--text-xs);
}

@media (max-width: 700px) {
  .month__day {
    height: 4.5rem;
    padding: 2px;
  }

  .agenda-list__item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .agenda-list__date,
  .agenda-list__title {
    grid-column: 2;
  }
}

/* Günün işleri (10E-3): kutu işaretlenince görev tamamlanır (form gönderimi, JS yok). */
.todo {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.todo__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.todo__item:last-child {
  border-bottom: 0;
}

.todo__check {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  cursor: pointer;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: 6px;
}

.todo__check:hover {
  background: var(--color-action-soft);
  border-color: var(--color-action);
}

.todo__check:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.todo__check--off {
  cursor: default;
  border-style: dashed;
}

.todo__check--done {
  color: var(--color-action-text);
  background: var(--color-success);
  border-color: var(--color-success);
}

.todo__title {
  flex: 1;
  min-width: 0;
  color: var(--color-text);
}

.todo__item--done .todo__title {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.todo__meta {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  white-space: nowrap;
}

/* Başka kutunun görevi: kutunun adı başlığın yanında soluk (Günün işleri bütün kutuları gösterir). */
.todo__box {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: 400;
}

.icon--flip {
  transform: scaleX(-1);
}

/* --- vitrin ve yönetim ekranlarının paylaştığı küçük parçalar -------------- */

/* Açıklama notu: uyarı değil, bilgi. Kırmızı kullanılmaz. */
.note {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-border-strong);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.note--success {
  border-left-color: var(--color-success, #2f6b4f);
  color: var(--color-text);
}

/* Okunacak uzun metin (KVKK, mesafeli satış): satır uzunluğu sınırlanır. */
.prose {
  max-width: 68ch;
}

.list-plain {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.image-grid img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--color-surface-sunken);
}

.image-grid p {
  margin: var(--space-2) 0;
  font-size: var(--text-sm);
}

/* Toplam şeridi: ayrıntı küçük, sonuç büyük (fiş ekranındaki kural). */
.totals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.totals__grand {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0;
}

.totals__grand span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.totals__grand strong {
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   BELGE ZİNCİRİ (P14): "bu kayıt nereden geldi?"
   Ağaç çizimi değil, iki kademeli liste. Başlangıç kaydı sol çizgiyle ayrılır.
   --------------------------------------------------------------------------- */

.chain {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.chain__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-border);
  background: var(--color-surface-muted);
  border-radius: var(--radius-sm);
}

.chain__item--current {
  border-left-color: var(--color-action);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.chain__kind {
  min-width: 9rem;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chain__title {
  font-weight: 600;
}

.chain__date,
.chain__detail {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.chain--nested {
  flex-basis: 100%;
  margin-top: var(--space-2);
  padding-left: var(--space-4);
}

/* Koli etiketi (P9): yazdırılıp koliye yapıştırılır. Ekranda da okunaklı durur. */
.parcel-label {
  max-width: 28rem;
  padding: var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
}

.parcel-label__to {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xl);
}

.parcel-label__address {
  margin: 0 0 var(--space-3);
}

.parcel-label__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.parcel-label__barcode {
  margin-block: var(--space-4);
}

/* Tanıtım paketi (P19): dağıtımcıya gönderilen kapaklı künye kartları. */
.promo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-5);
}

.promo-card {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.promo-card__cover {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-sm);
}

.promo-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-card__body h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-lg);
}

.promo-card__author {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.promo-card__blurb {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Tutar dökümü: ayrıntı küçük, sonuç büyük (fiş ekranındaki kural). */
.totals-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
}

.totals-list > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.totals-list dt,
.totals-list dd {
  margin: 0;
}