/* OtoSOR portal bilesenleri -- tek kaynak gocunde (2026-09-25..28) paralel gruplarin
   DS paketine ekledigi bilesen/varyantlar. Tum bilesen dosyalarindan SONRA yuklenir;
   bolum sirasi eski yukleme sirasidir (kaskad korunur). Yeni bilesen buraya degil, ilgili
   bilesen dosyasina eklenir; bu dosya zamanla o dosyalara dagitilir. */

/* ── Bilesen API ozellikleri: varsayilanlar (JS / satir ici --x ile ezilir; :root en dusuk oncelik).
   --sw / --sw-collapsed: kenar cubugu genisligi (os-sidebar-resize.js yazar; eskiden v4c-mono :root'ta).
   --nd-top: yapiskan not paneli ust ofseti (_header.html yazar). --barrow-*: os-barrow etiket/deger kolonu.
   --media-img: os-videocard gorseli (satir ici). */
:root {
  /* --sw 240→264 (2026-10-26): "Anlaşmalı Galeri …" adlandırmasından sonra menü etiketleri iki satıra düşüyordu. */
  --sw: 264px; --sw-collapsed: 68px; --nd-top: 72px;
  --barrow-label: 60px; --barrow-value: 80px; --media-img: none;
}



/* ════════ ek-g1-hub ════════ */
/* GECICI PAKET UZANTISI (g1-hub) -- tek kaynak gocu 2026-09-25.
   Bu grubun ihtiyac duydugu YENI DS bilesen/varyantlari. Goc bitince asil bilesen
   dosyalarina (controls/data/feedback/navigation/workflow...) birlestirilir, bu dosya silinir.
   KURAL: yalniz os-* secici, yalniz semantik token (tokens/colors.css), sayfa sinifi YOK. */

/* ── Kart: ic bosluk kartin kendisinde (baslik + serbest icerik, __body sarmalayicisi yok) ──
   JS'in parca parca urettigi kartlarda govdeyi ayri sarmalamak mumkun degil; baslik bu
   varyantta ince bir alt cizgiyle ayrilir. */
.os-card--padded { padding: var(--space-4) var(--space-5); }
.os-card--padded > .os-card__header { padding: 0 0 var(--space-2); margin-bottom: var(--space-3); }
@media (max-width: 639px) { .os-card--padded { padding: var(--space-3) var(--space-4); } }
/* Baslik ikonu marka tonunda (os-card__title--icon ile) */
.os-card__title--icon > .bi { color: var(--text-brand); }
/* Tonlu kart: kenarlik + baslik zemini durumu tasir (onayli / suresi dolmus / danisma) */
.os-card--tone-success { border-color: var(--status-success-solid); }
.os-card--tone-warning { border-color: var(--status-warning-solid); }
.os-card--tone-brand   { border-color: var(--interactive-primary); }
.os-card--tone-success > .os-card__header { background: var(--status-success-bg); border-bottom-color: var(--status-success-solid); }
.os-card--tone-warning > .os-card__header { background: var(--status-warning-bg); border-bottom-color: var(--status-warning-solid); }
.os-card--tone-brand   > .os-card__header { background: var(--surface-selected); border-bottom-color: var(--interactive-primary); }
/* Uyari aksanli kart (sol serit + soluk zemin): acik karsi teklif gibi dikkat isteyen blok */
.os-card--attention { border-left: 4px solid var(--status-warning-solid); background: var(--status-warning-bg); }
.os-card--attention .os-card__title { color: var(--status-warning-fg); }
/* Pasif / gecmis kart: kesikli kenar + batik zemin */
.os-card--muted { border-style: dashed; border-color: var(--border-strong); background: var(--surface-sunken); box-shadow: none; }
.os-card--muted .os-card__title { color: var(--text-muted); }
.os-card--dashed { border-style: dashed; }

/* ── Uyari: kucuk (notr ton os-alert--neutral g8 uzantisinda) (yogun panel ici yonlendirme satiri) + yuzen (sabit konumlu) ── */
.os-alert--sm { padding: var(--space-2) var(--space-3); gap: var(--space-2); font-size: var(--text-xs); line-height: 1.5; }
.os-alert > .bi, .os-alert__icon[class*="bi-"] { flex: none; width: auto; height: auto; font-size: 16px; line-height: 1.25; }
.os-alert--float { box-shadow: var(--shadow-lg); font-weight: var(--weight-semibold); }

/* ── Cip: bilgi etiketi / tiklanabilir kisayol (link veya dugme) ──
   os-tag (kaldirilabilir filtre) ve os-badge (durum) disinda: notr zeminli, kenarlikli bilgi
   cipi. Ton varyantlari yalniz zemin + metin rengi. */
.os-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.os-chips--divided { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-default); }
.os-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0;
  padding: 4px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-sunken); color: var(--text-primary);
  font: inherit; font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1.4;
  text-decoration: none; white-space: nowrap;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.os-chip > .bi { color: var(--text-muted); font-size: 12px; }
.os-chip b { font-weight: var(--weight-semibold); }
a.os-chip, button.os-chip { cursor: pointer; }
a.os-chip:hover, button.os-chip:hover { border-color: var(--text-primary); color: var(--text-primary); text-decoration: none; }
button.os-chip:focus-visible, a.os-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.os-chip--pill { border-radius: var(--radius-pill); }
.os-chip--dashed { border-style: dashed; }
.os-chip--plain { background: var(--surface-card); color: var(--text-secondary); }
/* Kucuk cip: yogun kart/tablo hucresi icindeki sinyal cipleri (js/risk-signals.js — is listesi, ekip havuzu) */
.os-chip--sm { gap: 4px; padding: 1px 7px; font-size: var(--text-2xs); font-weight: var(--weight-semibold); }
.os-chip--sm > .bi { font-size: 10px; }
.os-chip--success { background: var(--status-success-bg); border-color: var(--green-100); color: var(--status-success-fg); }
.os-chip--warning { background: var(--status-warning-bg); border-color: var(--yellow-100); color: var(--status-warning-fg); }
.os-chip--danger  { background: var(--status-danger-bg);  border-color: var(--red-100);    color: var(--status-danger-fg); }
.os-chip--info    { background: var(--status-info-bg);    border-color: var(--cyan-100);   color: var(--status-info-fg); }
.os-chip--brand   { background: var(--surface-selected);  border-color: var(--blue-100);   color: var(--text-brand); }
.os-chip--success > .bi, .os-chip--warning > .bi, .os-chip--danger > .bi,
.os-chip--info > .bi, .os-chip--brand > .bi { color: currentColor; }
/* Cip icindeki kucuk sayi kutusu (puan) */
.os-chip__count {
  padding: 1px 6px; border-radius: var(--radius-sm); background: var(--surface-card);
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
/* Uzun serbest metin (sebep): kirpilir, tam metin title'da */
.os-chip__note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; }

/* ── Puan kutusu: not + puan (360 degerlendirme, boyut karti, simulasyon) ──
   Ton durumdan gelir; zemin soluk, metin koyu ton (beyaz yazi amber zeminde AA gecmez). */
.os-score {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 90px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg);
  border: 1px solid transparent; font-feature-settings: var(--numeric-features);
  background: var(--surface-sunken); color: var(--text-secondary);
}
.os-score__grade { font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: 1; }
.os-score__value { font-size: var(--text-md); font-weight: var(--weight-bold); margin-top: 2px; }
/* Satir ici kucuk puan (kart basligi, metin icinde) */
.os-score--sm {
  flex-direction: row; min-width: 0; padding: 1px 8px; border-radius: var(--radius-md);
  font-size: var(--text-md); font-weight: var(--weight-bold); line-height: 1.4; vertical-align: middle;
}
.os-score--xs { flex-direction: row; min-width: 0; padding: 0 6px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.os-score--success { background: var(--status-success-bg); border-color: var(--green-100); color: var(--status-success-fg); }
.os-score--warning { background: var(--status-warning-bg); border-color: var(--yellow-100); color: var(--status-warning-fg); }
.os-score--danger  { background: var(--status-danger-bg);  border-color: var(--red-100);    color: var(--status-danger-fg); }
.os-score--neutral { background: var(--surface-sunken);    border-color: var(--border-default); color: var(--text-secondary); }

/* ── Olcek satiri: etiket + deger + ilerleme cubugu (+ not) ── */
.os-meter { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.os-meter + .os-meter { margin-top: var(--space-2); }
.os-meter__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: var(--text-sm); }
.os-meter__label { min-width: 0; color: var(--text-primary); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.os-meter__weight { color: var(--text-muted); font-size: var(--text-2xs); font-weight: var(--weight-semibold); }
.os-meter__value { color: var(--text-secondary); font-weight: var(--weight-semibold); white-space: nowrap; font-feature-settings: var(--numeric-features); }
.os-meter__note { font-size: var(--text-2xs); color: var(--text-muted); overflow-wrap: anywhere; }
/* Ilerleme cubugu ek tonlari */
.os-progress__bar--neutral { background: var(--text-muted); }
.os-progress--thin { height: 3px; }

/* ── Kayit numarasi (kunye): on ek soluk, seri blok vurgulu; tiklayinca panoya kopyalanir ──
   Kopyalandi geri bildirimi `os-recordno--copied` durumuyla gorunur (JS ~1.4 sn tutar). */
.os-recordno {
  display: inline-flex; align-items: baseline; gap: 2px;
  font-family: var(--font-mono); font-size: var(--text-xl); font-weight: var(--weight-bold);
  letter-spacing: .03em; line-height: 1.1; color: var(--text-primary);
  cursor: copy; user-select: text; flex-wrap: wrap; max-width: 100%;
}
.os-recordno > span { white-space: nowrap; }
.os-recordno__prefix { color: var(--text-muted); font-weight: var(--weight-semibold); }
.os-recordno:hover .os-recordno__prefix { color: var(--text-primary); }
/* Geri bildirim etiketi secime girmez: uclu tiklamada "ACT-… kopyalandi" kopyalanmasin. */
.os-recordno__copied {
  margin-left: var(--space-2); opacity: 0; user-select: none;
  transition: opacity var(--duration-fast) var(--ease-standard);
  font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: 0; color: var(--status-success-fg);
}
.os-recordno--copied .os-recordno__copied { opacity: 1; }

/* ── Rakam sutunlari (kunye kutusu): kucuk buyuk-harf etiket + es-genislikli deger,
   sutunlar ince dikey cizgiyle ayrilir. --lead ana rakam (tutar), --sm ikincil (tarih/ad). ── */
.os-figures { display: flex; align-items: stretch; flex-wrap: wrap; row-gap: var(--space-3); }
.os-figure { padding: 0 22px; border-left: 1px solid var(--border-default); min-width: 0; }
.os-figure:first-child { padding-left: 0; border-left: 0; }
.os-figure__label {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted);
}
.os-figure__value {
  margin-top: 3px; font-family: var(--font-mono); font-size: var(--text-lg); font-weight: var(--weight-semibold);
  font-feature-settings: var(--numeric-features); line-height: 1.3; color: var(--text-primary);
}
.os-figure--lead .os-figure__value { font-size: var(--text-2xl); letter-spacing: -.01em; }
.os-figure--sm .os-figure__value { font-size: var(--text-md); }
@media (max-width: 767px) {
  .os-figure { padding: 0 16px; }
  .os-figure--lead .os-figure__value { font-size: var(--text-xl); }
}

/* ── Alt bolum: kart icinde ince cizgiyle ayrilan ikincil blok (Hasar Detayi, SmartIQ...) ── */
.os-subsection { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-default); min-width: 0; }
.os-subsection__title {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary);
}
.os-subsection__title > .bi { color: var(--text-brand); }
.os-score--info { background: var(--status-info-bg); border-color: var(--cyan-100); color: var(--status-info-fg); }

/* ── Ikon kutusu: bolum/adim basindaki kare ikon (tonlu zemin) ── */
.os-iconbox {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--radius-md);
  background: var(--surface-selected); color: var(--text-brand); font-size: 16px; line-height: 1;
}
.os-iconbox--sm { width: 24px; height: 24px; font-size: 12px; border-radius: var(--radius-sm); }
.os-iconbox--success { background: var(--status-success-bg); color: var(--status-success-fg); }
.os-iconbox--warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.os-iconbox--danger  { background: var(--status-danger-bg);  color: var(--status-danger-fg); }
.os-iconbox--muted   { background: var(--surface-sunken);    color: var(--text-muted); }

/* ── Stepper: cok adimli akista satir sarar (yatay kaydirma yerine) + kapali grup adimi ── */
.os-stepper--pill.os-stepper--wrap { flex-wrap: wrap; overflow-x: visible; border-radius: var(--radius-lg); row-gap: 4px; }
.os-step--group .os-step__circle { border-style: dashed; }
.os-step--group .os-step__label { font-style: italic; }

/* ── Uzerine gelince / odakta acilan popover (ikon + liste): os-popover'i barindirir ──
   Ikon ile kutu arasindaki bosluk gorunmez kopruyle kapanir (hover kopmaz). */
.os-hoverpop { position: relative; display: inline-flex; align-items: center; margin-left: 4px; cursor: pointer; }
.os-hoverpop > .os-popover {
  left: 50%; transform: translateX(-50%); width: auto; min-width: 260px; white-space: nowrap;
  visibility: hidden; opacity: 0; pointer-events: none; animation: none;
  transition: opacity var(--duration-fast) var(--ease-standard), visibility var(--duration-fast) var(--ease-standard);
}
.os-hoverpop > .os-popover::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 10px; }
.os-hoverpop:hover > .os-popover, .os-hoverpop:focus-within > .os-popover { visibility: visible; opacity: 1; pointer-events: auto; }
.os-hoverpop:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.os-popover .os-menu__item { color: var(--text-primary); text-decoration: none; }

/* ── Karar paneli uzantilari: Bootstrap Icons baslik ikonu, sonraki-adim eki,
   yan yana ikincil satir, bilgi tonu (evrak yukleme bekliyor) ──
   Ortalama artik tabanda (workflow.css .os-decision__body .os-btn) — birincil
   karar icin ayri bir kural yok, panelin tamami ortali. */
.os-decision__title > .bi { color: var(--text-brand); font-size: 14px; }
.os-decision__step > .bi { color: var(--text-muted); font-size: 12px; }
.os-decision__next { font-weight: var(--weight-medium); opacity: .85; font-size: var(--text-xs); }
.os-decision__row { display: flex; gap: 6px; flex-wrap: wrap; }
.os-decision__body .os-decision__row > .os-btn { width: auto; flex: 1 1 auto; }
.os-decision__sep + .os-card__eyebrow { margin: 2px 2px 0; }
.os-decision--info { border-left: 4px solid var(--status-info-solid); }
.os-decision--info > .os-decision__header { background: var(--status-info-bg); }
.os-decision--info .os-decision__title { color: var(--status-info-fg); }
.os-decision--info .os-decision__title > .bi { color: currentColor; }

/* ── Tonlu deger karosu: izgara icinde vurgulanan tek deger (bayi marji, azami satis, karsilastirma) ── */
.os-tile { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); min-width: 0; }
.os-tile--lg { padding: var(--space-4) 18px; border-radius: 0; }
.os-tile--plain   { background: var(--surface-card); }
.os-tile--brand   { background: var(--surface-selected); }
.os-tile--success { background: var(--status-success-bg); }
.os-tile--warning { background: var(--status-warning-bg); }
.os-tile--danger  { background: var(--status-danger-bg); }
.os-tile__value { font-family: var(--font-mono); font-weight: var(--weight-bold); font-feature-settings: var(--numeric-features); overflow-wrap: anywhere; }
.os-tile--brand .os-tile__value   { color: var(--text-brand); }
.os-tile--success .os-tile__value { color: var(--status-success-fg); }
.os-tile--warning .os-tile__value { color: var(--status-warning-fg); }
.os-tile--danger .os-tile__value  { color: var(--status-danger-fg); }

/* ── Parcali secici: tonlu secim (Evet = basari, Hayir = tehlike); secili = aria-pressed ── */
.os-segmented__btn:disabled { cursor: not-allowed; opacity: .6; }
.os-segmented__btn--success[aria-pressed="true"] { background: var(--status-success-solid); color: var(--text-inverse); }
.os-segmented__btn--danger[aria-pressed="true"]  { background: var(--status-danger-solid);  color: var(--text-inverse); }

/* ── Akordeon adim listesi (kontrol listesi): baslik (ikon + ad + sayac + ok) + ince ilerleme + govde ──
   Durum: --done / --active / --future ; acik: --open. Govde yalniz acikken gorunur. */
.os-acc__item { border-top: 1px solid var(--border-default); }
.os-acc__head { display: flex; align-items: center; gap: 9px; padding: 11px 18px 9px; cursor: pointer; user-select: none; }
.os-acc__head:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.os-acc__title { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-primary); }
.os-acc__item--future .os-acc__title { color: var(--text-muted); }
.os-acc__count { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--text-muted); }
.os-acc__chev { font-size: 12px; color: var(--text-muted); transition: transform var(--duration-fast) var(--ease-standard); }
.os-acc__item--open .os-acc__chev { transform: rotate(180deg); }
.os-acc__progress { margin: 0 18px; }
.os-acc__body { display: none; padding: 10px 18px 14px; }
.os-acc__item--open .os-acc__body { display: block; }
.os-acc__sub {
  margin: 8px 0 2px; padding-top: 6px; border-top: 1px dashed var(--border-default);
  font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
}

/* ── Goruntuleyici diyalog (belge onizleme / yan yana karsilastirma): buyuk kutu + esnek gorunum alani ── */
.os-dialog--viewer { width: 95vw; max-width: 1200px; height: 90vh; max-height: 90vh; overflow: hidden; }
.os-dialog__viewport {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto;
  background: var(--surface-sunken);
}
.os-dialog__viewport > img, .os-dialog__panebody > img { max-width: 100%; max-height: 100%; object-fit: contain; background: var(--surface-card); }
.os-dialog__viewport > iframe, .os-dialog__panebody > iframe { flex: 1; width: 100%; height: 100%; border: 0; background: var(--surface-card); }
.os-dialog__viewport--split { align-items: stretch; justify-content: stretch; overflow: hidden; }
.os-dialog__pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.os-dialog__pane + .os-dialog__pane { border-left: 1px solid var(--border-default); }
.os-dialog__panehead {
  padding: var(--space-2) var(--space-3); background: var(--surface-card); border-bottom: 1px solid var(--border-default);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-primary);
}
.os-dialog__panebody { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); color: var(--text-muted); }
/* Uzun govdeli diyalog: baslik + alt bar sabit, YALNIZ govde kayar (uzun secim listesi olan
   "Evrak Iste" gibi formlarda onay dugmesi kaydirmadan gorunur). Govde ile baslik/alt bari
   saran <form> ara katmani da esner. */
.os-dialog--scrollbody { overflow: hidden; }
.os-dialog--scrollbody > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.os-dialog--scrollbody .os-dialog__header, .os-dialog--scrollbody .os-dialog__footer { flex: none; }
.os-dialog--scrollbody .os-dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
@media (max-width: 639px) {
  .os-dialog--viewer { width: 100%; height: 92vh; }
  .os-dialog__viewport--split { flex-direction: column; }
  .os-dialog__pane + .os-dialog__pane { border-left: 0; border-top: 1px solid var(--border-default); }
}

/* Kayan liste icinde yapiskan bolum basligi (kategori basligi liste kayarken ustte kalir) */
.os-menu__section--sticky { position: sticky; top: 0; z-index: 1; background: var(--surface-card); border-bottom: 1px dashed var(--border-default); }

/* ── Bootstrap .modal iskeleti icindeki diyalog (3. dalga): bootstrap.Modal JS'i ac/kapa/odak/backdrop'u
   yonetir, ICERIK os-dialog'dur (.modal-content kalkti). .modal-dialog pointer-events:none verir ->
   diyalog tiklanabilir olmali; genislik .modal-dialog'dan (modal-sm/lg/xl) gelir. Dar ekranda eski
   .modal-content gibi tam ekran. ── */
.os-dialog--modal { position: relative; max-width: none; pointer-events: auto; }
@media (max-width: 768px) {
  .os-dialog--modal { height: 100%; max-height: none; border-radius: 0; }
  .os-dialog--modal > .os-dialog__body, .os-dialog--modal > form > .os-dialog__body { flex: 1 1 auto; overflow-y: auto; }
}
/* Dialog basligi: basari / tehlike tonu (onay / iptal eylemi); uyari tonu g9'da */
.os-dialog__header--success { background: var(--status-success-bg); }
.os-dialog__header--success > .os-dialog__title { color: var(--status-success-fg); }
.os-dialog__header--danger { background: var(--status-danger-bg); }
.os-dialog__header--danger > .os-dialog__title { color: var(--status-danger-fg); }
/* Sekme: Bootstrap Tab JS'i (data-bs-toggle="tab") ile surulen os-tabs -- secili sekme aria-selected'tan
   (JS .active + aria-selected'i kendisi yazar; os-tabs__tab--active ile ayni gorunum). */
.os-tabs__tab[aria-selected="true"] { color: var(--text-brand); font-weight: var(--weight-semibold); border-bottom-color: var(--interactive-primary); }
/* ── Arac kimlik blogu (Arac Gosterim Standardi; uretici js/vehicle-display.js, elle kurulmaz) ──
   Gramer: [ikon] YIL MARKA MODEL / kasa · yakit · vites (m,l,row) / versiyon (paket koyu) /
   kimlik seridi: os-plate + km rozeti. Yogunluk: --s tablo, --m kart, --l detay basligi,
   --row tek satir (hero), --chip tek cip (baslik + plaka + km). Koyu zemin: --on-dark.
   Kaynak: v4c-mono.css `.veh/.veh-*` (3. dalga gocu). */
.os-vehid { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.os-vehid__txt { min-width: 0; display: flex; flex-direction: column; }
.os-vehid__icon { flex: none; width: 20px; margin-top: 1px; color: var(--text-muted); opacity: .85; }
.os-vehid__icon svg { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
.os-vehid__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-vehid__year { font-family: var(--font-mono); font-weight: var(--weight-semibold); color: var(--text-muted); margin-right: 5px; }
.os-vehid__spec, .os-vehid__ver { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-vehid__ver { font-size: var(--text-2xs); margin-top: 1px; }
.os-vehid__dot { color: var(--border-strong); margin: 0 5px; }
.os-vehid__spec--missing { font-style: italic; }
.os-vehid__packet { color: var(--text-primary); font-weight: var(--weight-semibold); }
.os-vehid__idrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.os-vehid__km {
  display: inline-flex; align-items: center; flex: none; padding: 3px 7px; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 10px; font-weight: var(--weight-semibold);
  font-feature-settings: var(--numeric-features); text-transform: uppercase; white-space: nowrap;
}
/* m / l: metin sarar (kart ve baslikta kimlik kirpilmaz) */
.os-vehid--m .os-vehid__txt, .os-vehid--l .os-vehid__txt { flex: 1 1 auto; }
.os-vehid--m .os-vehid__title, .os-vehid--l .os-vehid__title,
.os-vehid--m .os-vehid__spec, .os-vehid--l .os-vehid__spec,
.os-vehid--m .os-vehid__ver, .os-vehid--l .os-vehid__ver { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.os-vehid--m .os-vehid__icon { width: 26px; }
.os-vehid--m .os-vehid__title { font-size: var(--text-md); }
.os-vehid--m .os-vehid__spec, .os-vehid--m .os-vehid__ver { font-size: var(--text-xs); margin-top: 2px; }
.os-vehid--m .os-vehid__idrow { margin-top: 9px; }
.os-vehid--l .os-vehid__icon { width: 38px; margin-top: 3px; }
.os-vehid--l .os-vehid__title { font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: -.02em; }
.os-vehid--l .os-vehid__year { color: var(--text-primary); }
.os-vehid--l .os-vehid__spec, .os-vehid--l .os-vehid__ver { font-size: var(--text-sm); margin-top: 2px; }
.os-vehid--l .os-vehid__idrow { margin-top: 11px; }
/* tek satir (hero/banner) */
.os-vehid--row { align-items: center; gap: 10px; }
.os-vehid--row .os-vehid__icon { margin-top: 0; }
.os-vehid--row .os-vehid__txt { flex-direction: row; align-items: center; flex-wrap: wrap; row-gap: 4px; }
.os-vehid--row .os-vehid__txt > * { min-width: 0; max-width: 100%; }
.os-vehid--row .os-vehid__spec, .os-vehid--row .os-vehid__ver { font-size: var(--text-xs); margin: 0; }
.os-vehid--row .os-vehid__spec::before, .os-vehid--row .os-vehid__ver::before { content: '\00B7'; color: var(--border-strong); margin: 0 8px; }
.os-vehid--row .os-vehid__idrow { margin: 0 0 0 12px; }
/* cip (hero cip seridi): tek satir, cerceveli */
.os-vehid--chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 480px; padding: 3px 10px 3px 8px;
  border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-sunken);
  font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1.4;
}
.os-vehid--chip .os-vehid__icon { width: 17px; margin-top: 0; opacity: .7; }
.os-vehid--chip .os-vehid__title { font-size: var(--text-xs); min-width: 0; }
.os-vehid--chip .os-vehid__km { padding: 2px 6px; }
.os-vehid--chip > .os-plate { flex: none; }
/* koyu zemin (kullandirma hero'su): plaka BEYAZ kalir (fiziksel nesne) */
.os-vehid--on-dark .os-vehid__title, .os-vehid--on-dark .os-vehid__packet { color: var(--text-inverse); }
.os-vehid--on-dark .os-vehid__year { color: var(--on-dark-faint); }
.os-vehid--on-dark .os-vehid__spec, .os-vehid--on-dark .os-vehid__ver { color: var(--on-dark-muted); }
.os-vehid--on-dark .os-vehid__dot { color: var(--on-dark-border); }
.os-vehid--on-dark .os-vehid__icon { color: var(--on-dark-faint); }
.os-vehid--on-dark .os-vehid__km { color: var(--text-inverse); background: var(--on-dark-fill); border-color: var(--on-dark-border); }

/* ── Plaka rozeti uzantilari: plaka yok (bantsiz kesik cip), tikla-kopyala, kopyalandi geri bildirimi ── */
.os-plate--empty { border-style: dashed; border-color: var(--border-strong); background: var(--surface-sunken); }
.os-plate--empty .os-plate__text { color: var(--text-muted); font-family: var(--font-sans); font-weight: var(--weight-medium); font-style: italic; letter-spacing: .02em; }
.os-plate--copy { position: relative; overflow: visible; cursor: copy; }
.os-plate--copy > .os-plate__band { border-radius: 3px 0 0 3px; }
.os-plate--copy:hover { border-color: var(--interactive-primary); }
.os-plate--copy:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.os-plate--copied::after {
  content: 'Kopyaland\0131'; position: absolute; top: -27px; left: 50%; transform: translateX(-50%); z-index: 5;
  padding: 3px 8px; border-radius: var(--radius-sm); background: var(--gray-900); color: var(--text-inverse);
  font-family: var(--font-sans); font-size: 10px; font-weight: var(--weight-semibold); font-style: normal; letter-spacing: .02em; white-space: nowrap;
}
/* ── Bilgi hucresi: bilgi izgarasinda etiket + deger hucresi; duzeltilebilir varyantta kosede kalem
   (os-infocell__pen) ve uzerine gelince hafif golge; kayit sonrasi ~2 sn degisiklik vurgusu (--flash).
   Kaynak: components.css `.info-item/.alloc-editable/.alloc-pen/.alloc-flash` (3. dalga gocu). ── */
.os-infocell { position: relative; min-width: 0; }
.os-infocell__pen { position: absolute; top: 6px; right: 6px; }
.os-infocell--editable { border-radius: var(--radius-sm); }
.os-infocell--editable:hover { box-shadow: var(--shadow-sm); }
@keyframes os-infocell-flash { 0% { background: var(--status-warning-bg); } 100% { background: transparent; } }
.os-infocell--flash { animation: os-infocell-flash 2.2s ease forwards; }
@media (prefers-reduced-motion: reduce) { .os-infocell--flash { animation: none; } }


/* ════════ ek-g2-musteri-bayi ════════ */
/* GECICI PAKET UZANTISI (g2-musteri-bayi) -- tek kaynak gocu 2026-09-25.
   Bu grubun ihtiyac duydugu YENI DS bilesen/varyantlari. Goc bitince asil bilesen
   dosyalarina (controls/data/feedback/navigation/workflow...) birlestirilir, bu dosya silinir.
   KURAL: yalniz os-* secici, yalniz semantik token (tokens/colors.css), sayfa sinifi YOK. */

/* ── Salt-okunur alan degeri (controls.css os-field'a birlesecek) ─────────
   Detay ekranlarinda "etiket ustte, deger altta" gosterim: duzenleme modunda ayni
   os-field'in icine os-input girer, goruntu modunda bu deger kutusu. Kopyala dugmesi
   gibi ek ogeler degerin yaninda durur (flex). */
.os-field__value {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0;
  font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--text-primary);
  overflow-wrap: anywhere;
}

/* ── Katlanir kart basligi (data.css os-card'a birlesecek) ────────────────
   Kart basligi BUTON olarak: tiklaninca govde acilir/kapanir. Durum aria-expanded'dan
   okunur (sinif degil): acikken alt cizgi govdeyi ayirir. */
.os-card__toggle {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-lg);
  background: transparent; font: inherit; color: var(--text-primary); text-align: left; cursor: pointer;
}
.os-card__toggle:hover { background: var(--surface-sunken); }
.os-card__toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.os-card__toggle[aria-expanded="true"] {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 1px solid var(--border-default);
}

/* ── Bolunmus liste (kayit satirlari arasinda ince cizgi) ─────────────────
   Adres / iletisim / gecmis satirlari: her satir kart DEGIL, ayni kartin icinde cizgiyle
   ayrilan kayit. --inset: kart govdesi olmadan (kenardan ice dolgulu) kullanim. */
.os-divlist { display: flex; flex-direction: column; min-width: 0; }
.os-divlist > * { min-width: 0; padding: var(--space-3) 0; }
.os-divlist > * + * { border-top: 1px solid var(--border-default); }
.os-divlist > :first-child { padding-top: 0; }
.os-divlist > :last-child { padding-bottom: 0; }
.os-divlist--inset > *,
.os-divlist--inset > :first-child,
.os-divlist--inset > :last-child { padding: var(--space-3) var(--space-4); }

/* ── Ikon karosu (liste satiri / kart basligi basinda tonlu ikon) ─────────── */

/* ── KPI karosu (kart icindeki metrik izgarasi: performans, aksiyon sayaclari) ──
   os-kpi zeminsizdir (kart icinde tek basina durur); izgarada yan yana dizildiginde
   her metrik kendi soluk karosunu alir. Ton os-kpi--* ile ayni (sol aksan + deger rengi). */
.os-kpi--tile {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.os-kpi--tile .os-kpi__value { font-size: var(--text-xl); }

/* ── Timeline: ikonlu noktanin tonlari (g9 os-timeline__dot--icon uzerine) ── */
.os-timeline__dot--icon.os-timeline__dot--success { background: var(--status-success-bg); color: var(--status-success-fg); }
.os-timeline__dot--icon.os-timeline__dot--warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.os-timeline__dot--icon.os-timeline__dot--danger  { background: var(--status-danger-bg);  color: var(--status-danger-fg); }
.os-timeline__dot--icon.os-timeline__dot--info    { background: var(--status-info-bg);    color: var(--status-info-fg); }
.os-timeline__dot--icon.os-timeline__dot--muted   { background: var(--surface-sunken);    color: var(--text-secondary); }

/* ── Bar grafik: yigilmis cubuk (toplam icinde alt kume: basvuru icinde onayli) ──
   Cubugun kendisi TOPLAM'i soluk tonda cizer; __seg alt kumeyi seri 1 renginde tabandan
   doldurur (yukseklik % JS'ten dinamik). Lejant noktasi --muted toplam serisini gosterir. */
.os-chart__bar--stack {
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  background: var(--border-default);
}
.os-chart__seg { width: 100%; flex: none; background: var(--chart-1); }
.os-chart__dot--muted { --series-color: var(--border-default); background: var(--border-default); }

/* ── Tiklanir rozet (<button class="os-badge os-badge--action">): gerekce baloncugu acan durum
   rozeti, kirilima goturen puan rozeti. Tarayicinin dugme kenarligi/yazi tipi sifirlanir;
   gorunum rozetle ayni kalir, uzerine gelince bir ton koyulasir. */
.os-badge--action { border: 0; font-family: inherit; line-height: 1; cursor: pointer; }
.os-badge--action:hover { filter: brightness(0.96); }
.os-badge--action:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.os-badge--action > .bi { font-size: 10.5px; opacity: .75; }

/* ── Girdi grubu: bitisik ek kutusu (controls.css os-inputgroup'a birlesecek) ──
   os-inputgroup__affix girdinin ICINDE (absolute) kisa birim icindir; uzun sabit on/son ek
   ("https://" … ".sahibinden.com/") icin girdiye BITISIK kutu gerekir. Grup flex'tir; ek kutusu
   ve girdi yan yana, ortak kenarlarin kosesi sifirlanir. */
.os-inputgroup--addons { align-items: stretch; }
.os-inputgroup__addon {
  flex: none; display: inline-flex; align-items: center; padding: 0 var(--space-3);
  border: 1px solid var(--border-strong); background: var(--surface-sunken);
  color: var(--text-muted); font-size: var(--text-sm); white-space: nowrap;
}
.os-inputgroup__addon:first-child { border-right: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); }
.os-inputgroup__addon:last-child  { border-left: 0;  border-radius: 0 var(--radius-md) var(--radius-md) 0; }
/* Gecis eki (2026-10-25): tek yonlu esik alaninin karsilastirma isareti (>= / <=, > / <) bir
   DUGMEDIR; tiklaninca yon degisir (hukuki takip sepeti sureci). Tarayici dugme gorunumu sifirlanir,
   olcu/kenarlik/zemin eklenin kendisinden gelir; hover zemini ve odak halkasi token'dan. Yazi rengi
   ikonun okunabilmesi icin birincil metin (ek varsayilani soluk). --changed: yon varsayilandan farkli --
   simge zaten degisir (R-25), renk yalniz destekler. Sayfa bu ekin isaretlemesini LegalBatch.cmp* ile boyar. */
.os-inputgroup__addon--toggle {
  appearance: none; -webkit-appearance: none; margin: 0; font-family: inherit; font-weight: inherit;
  line-height: 1; justify-content: center; min-width: 2em;
  color: var(--text-primary); cursor: pointer; transition: background-color .12s ease, color .12s ease;
}
.os-inputgroup__addon--toggle:hover { background: var(--surface-selected); color: var(--text-brand); }
.os-inputgroup__addon--toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); position: relative; z-index: 1; }
.os-inputgroup__addon--toggle.os-inputgroup__addon--changed { color: var(--text-brand); font-weight: var(--weight-semibold); }
.os-inputgroup--addons > .os-input { flex: 1 1 auto; min-width: 0; border-radius: 0; }
.os-inputgroup--addons > .os-input:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.os-inputgroup--addons > .os-input:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

/* ── Eylem seridi: sayfanin altina yapisan form eylem cubugu (yeni bayi / yeni musteri) ──
   Gorunum burada; KONUM (fixed, sol bosluk = kenar cubugu genisligi) sayfanin duzenidir. */
.os-actionbar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-6);
  background: var(--surface-card); border-top: 1px solid var(--border-default);
  box-shadow: var(--shadow-md);
}
.os-actionbar__info { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.os-actionbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
/* Sayfa icinde (sticky) duran serit: ekran kenarina dayanmadigi icin kart gibi kenarlik + kose alir.
   Sag altta sabit os-scrollnav (44px, sagdan 24px) son dugmenin ustune biniyordu (evrak yetki matrisi, gercek
   tiklama testi 2026-11-11) -> serit sagda dugme kadar bos birakir. Iki sinif: <640 padding kisaltmasini da yener. */
.os-actionbar.os-actionbar--inline {
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  padding-right: calc(44px + var(--space-6) + var(--space-3));
}
/* Dar ekranda dugmeler sigmazsa alt satira iner (sag rezerv + iki dugme 320px'te tasabiliyordu) */
.os-actionbar--inline .os-actionbar__actions { flex-wrap: wrap; }
@media (max-width: 639px) {
  .os-actionbar { padding: var(--space-2) var(--space-4); }
  .os-actionbar__actions { width: 100%; }
  .os-actionbar__actions > .os-btn { flex: 1 1 auto; }
}

/* ── Avatar: buyuk boy + marka dolgusu (data.css os-avatar'a birlesecek) ─────
   Musteri kartviziti / ozet basligi: 56px bas harf dairesi. --brand: soluk mavi yerine
   dolu marka zemini (kartvizitin odak ogesi; kart basliginin soluk zemininde okunur). */
.os-avatar--xl { width: 56px; height: 56px; font-size: var(--text-xl); font-weight: var(--weight-bold); }
.os-avatar--brand { background: var(--interactive-primary); color: var(--text-inverse); }


/* ════════ ek-g3-talep ════════ */
/* GECICI PAKET UZANTISI (g3-talep) -- tek kaynak gocu 2026-09-25.
   Bu grubun ihtiyac duydugu YENI DS bilesen/varyantlari. Goc bitince asil bilesen
   dosyalarina (controls/data/feedback/navigation/workflow...) birlestirilir, bu dosya silinir.
   KURAL: yalniz os-* secici, yalniz semantik token (tokens/colors.css), sayfa sinifi YOK. */

/* ── Key-value: satir cizgili varyant ──────
   Kaynak: tramer-query `.vehicle-detail-item`, attach-vehicle/evaluate ozet satirlari.
   Taban .os-kv gibi BASLIK USTTE, ICERIK ALTTA (2026-10-08); her cift degerin altindaki
   cizgiyle bir sonrakinden ayrilir. */
.os-kv--rows { row-gap: 0; }
.os-kv--rows > dt { padding-top: var(--space-2); }
.os-kv--rows > dd { padding: 2px 0 var(--space-2); border-bottom: 1px solid var(--border-default); }
.os-kv--rows > dd + dt { margin-top: 0; }
.os-kv--rows > dd:last-of-type { border-bottom: 0; }

/* ── Gorsel karti (fotograf/belge kucuk resmi + alt yazi + kose eylemi) ──
   Kaynak: expertise-conformity `.photo-card`. Kart = os-card yuzeyi; gorsel ust kisimda sabit
   yukseklikte kirpilir (object-fit), tiklaninca buyutulur (sayfa JS'i). Gorseli olmayan dosya
   (PDF) icin __media--file: ortalanmis buyuk ikon, kesikli kenar. Kose eylemi (indir) __action. */
.os-mediacard {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
}
.os-mediacard__media { display: block; width: 100%; height: 200px; object-fit: cover; cursor: pointer; background: var(--surface-sunken); }
.os-mediacard__media--file {
  display: flex; align-items: center; justify-content: center; height: 140px;
  color: var(--text-muted); font-size: 48px; line-height: 1;
  border-bottom: 1px dashed var(--border-strong);
}
.os-mediacard__caption {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: var(--space-3); background: var(--gray-25); border-top: 1px solid var(--border-default);
}
.os-mediacard__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); overflow-wrap: anywhere; }
.os-mediacard__meta { font-size: var(--text-xs); color: var(--text-muted); }
.os-mediacard__action { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2; }
.os-mediacard__action.os-iconbtn { border-radius: 50%; box-shadow: var(--shadow-sm); }

/* ── Isik kutusu: onceki/sonraki gezinme (taban .os-lightbox portal.css'te) ──
   Kaynak: expertise-conformity `.lightbox .nav-btn`. Coklu gorselde sol/sag ok dugmeleri. */
.os-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.os-lightbox__nav.os-iconbtn { width: 56px; height: 56px; }
.os-lightbox__nav.os-iconbtn i[class*="bi-"] { font-size: 32px; }
.os-lightbox__nav--prev { left: var(--space-5); }
.os-lightbox__nav--next { right: var(--space-5); }

/* ── Marka paneli: kart bicimi (koyu lacivert ozet karti; disburse arac karti) ──
   Taban .os-brandpanel zemin + filigran verir ama kose/dolgu vermez (login paneli tam ekran).
   Kart icinde kullanildiginda kose + ic bosluk bu varyantla gelir. __label: koyu zeminde
   ust-etiket (kucuk harf araligi genis, soluk beyaz). */
.os-brandpanel--card { border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); background-size: 220px; background-position: right -60px bottom -80px; }
.os-brandpanel__label {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted);
}
@media (max-width: 639px) { .os-brandpanel--card { padding: var(--space-4); } }

/* ── Sonuc ikonu (islem sonucu ekrani: basarili / hatali / bekliyor) ──
   Kaynak: disburse `.success-animation .checkmark`, findeks-query `.result-wrap .ico`.
   Iri yuvarlak ton ikonu; gorunurken kisa bir olcek animasyonu (azaltilmis harekette yok). */
.os-resulticon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 80px; height: 80px; border-radius: 50%;
  font-size: 44px; line-height: 1;
  background: var(--surface-sunken); color: var(--text-secondary);
  animation: os-resulticon-in var(--duration-normal) var(--ease-standard);
}
.os-resulticon--lg { width: 100px; height: 100px; font-size: 50px; }
.os-resulticon--success { background: var(--status-success-bg); color: var(--status-success-fg); }
.os-resulticon--danger  { background: var(--status-danger-bg);  color: var(--status-danger-fg); }
.os-resulticon--warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.os-resulticon--info    { background: var(--status-info-bg);    color: var(--status-info-fg); }
@keyframes os-resulticon-in { 0% { transform: scale(0); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .os-resulticon { animation: none; } }

/* ── Dialog: dosya onizleme (resim / PDF iframe / bilgi metni) ──────────
   Kaynak: preapproval-docs / return-docs `#filePreviewModal` (tamami satir ici stildi).
   --xl: genis kutu (900px) · __media: esneyen, kendi icinde kayan, ortalayan onizleme alani ·
   backdrop--front: sayfanin en ust katmani (kabuk ve Bootstrap modallarinin da ustunde). */
.os-dialog-backdrop--front { z-index: 9999; }
.os-dialog--xl { max-width: 900px; max-height: 90vh; overflow: hidden; }
.os-dialog__media {
  flex: 1; min-height: 0; overflow: auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-sunken);
}
.os-dialog__media > img { max-width: 100%; max-height: 80vh; object-fit: contain; }
.os-dialog__media > iframe { width: 100%; height: 80vh; border: 0; background: var(--surface-card); }
.os-dialog__header > .os-dialog__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-dialog__headactions { display: flex; align-items: center; gap: var(--space-2); flex: none; }

/* ── Tek haneli kod kutusu (SMS PIN / OTP: 6 ayri kutu) ──
   Kaynak: findeks-query `.pin-input`. Taban .os-input'un kenar/odak/hata durumlarini alir;
   burada yalniz kare olcu + ortali iri rakam. Kutular arasi bosluk kabin gap'i (sayfa duzeni). */
.os-input--pin {
  width: 44px; height: 54px; padding: 0; flex: none;
  text-align: center; font-size: var(--text-xl); font-weight: var(--weight-semibold);
  font-feature-settings: var(--numeric-features);
}
@media (max-width: 639px) { .os-input--pin { width: 40px; height: 50px; } }

/* ── Tonlu kart: tehlike (g1'in os-card--success/--warning/--brand ailesinin eksik tonu) ──
   Kaynak: evaluate `.validation-header.invalid` (hata bulunan dogrulama paneli). */

/* ── Form bolumu: ust-etiket basligi + sagina uzanan ince cizgi + aciklama ──
   Kaynak: create / attach-vehicle `.form-section-title` (::after cizgi) ve `.form-section-hint`.
   Uzun formu karta bolmeden gruplar; os-card__eyebrow'un cizgili bolum-basligi bicimi. */
.os-formsection { margin-bottom: var(--space-6); min-width: 0; }
.os-formsection:last-child { margin-bottom: 0; }
.os-formsection__title {
  display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted);
}
.os-formsection__title::after { content: ""; flex: 1; height: 1px; background: var(--border-default); }
.os-formsection__hint { margin-bottom: var(--space-3); font-size: var(--text-xs); line-height: 1.5; color: var(--text-muted); }

/* ── Secim karti: ikonlu, baslikli, aciklamali tek-secim karti (radyo gibi davranir) ──
   Kaynak: create `.rtype-card` / `.vmode-card`, attach-vehicle `.rtype-card`. os-radiocard
   (ek-g9) tonlu ve metin-agirlikli iki-uc secenek icindir; bu kart ikon + baslik + aciklama
   tasiyan genis secenek karosudur. Secili durum UC yoldan okunur (hangisini isaretleme verirse):
   `os-choicecard--selected` sinifi · `aria-checked="true"` (role=radio dugme) · icindeki
   native radyo `:checked`. Secilince ikon kutusu dolar, sagdaki isaret belirir. */
.os-choicecard {
  position: relative; display: flex; align-items: flex-start; gap: var(--space-3); width: 100%;
  padding: 14px var(--space-4); text-align: left; font: inherit; color: var(--text-primary);
  background: var(--surface-card); border: 1.5px solid var(--border-default); border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.os-choicecard:hover { border-color: var(--border-strong); }
.os-choicecard:focus-visible, .os-choicecard:focus-within { outline: none; box-shadow: var(--focus-ring); }
.os-choicecard > input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.os-choicecard--selected, .os-choicecard[aria-checked="true"], .os-choicecard:has(> input:checked) {
  border-color: var(--interactive-primary); background: var(--surface-selected);
}
.os-choicecard__icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: var(--radius-md); font-size: 18px; line-height: 1;
  background: var(--surface-sunken); color: var(--text-secondary);
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.os-choicecard--selected .os-choicecard__icon, .os-choicecard[aria-checked="true"] .os-choicecard__icon,
.os-choicecard:has(> input:checked) .os-choicecard__icon { background: var(--interactive-primary); color: var(--text-inverse); }
.os-choicecard__body { flex: 1; min-width: 0; }
.os-choicecard__title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); }
.os-choicecard__desc { margin-top: 3px; font-size: var(--text-xs); line-height: 1.5; color: var(--text-secondary); }
/* Sag ustte secim isareti: bos halka; secilince marka dolgulu nokta */
.os-choicecard__check {
  position: relative; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); background: var(--surface-card);
}
.os-choicecard--selected .os-choicecard__check, .os-choicecard[aria-checked="true"] .os-choicecard__check,
.os-choicecard:has(> input:checked) .os-choicecard__check { border-color: var(--interactive-primary); }
.os-choicecard--selected .os-choicecard__check::after, .os-choicecard[aria-checked="true"] .os-choicecard__check::after,
.os-choicecard:has(> input:checked) .os-choicecard__check::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--interactive-primary);
}
.os-choicecard:disabled, .os-choicecard[aria-disabled="true"] { cursor: not-allowed; opacity: .6; }
/* Coklu secim varyanti (2026-10-22, Mesaj Gonderimi hazir gruplar): icinde native checkbox; isaret kare
   kutu + tik. Radyo halkasi coklu secimde "tek secilir" izlenimi veriyordu. */
.os-choicecard > input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.os-choicecard--multi .os-choicecard__check { border-radius: var(--radius-sm); }
.os-choicecard--multi.os-choicecard--selected .os-choicecard__check, .os-choicecard--multi:has(> input:checked) .os-choicecard__check {
  background: var(--interactive-primary);
}
.os-choicecard--multi.os-choicecard--selected .os-choicecard__check::after, .os-choicecard--multi:has(> input:checked) .os-choicecard__check::after {
  inset: 2px 5px 4px; border-radius: 0; background: none;
  border: solid var(--text-inverse); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ── Segmentli secici: native radyo tabanli kullanim (os-segmented, ek-g9) ──
   Kaynak: requests/create `.seg-switch` (Mevcut/Yeni Musteri, Bireysel/Kurumsal, kefil modu).
   Taban os-segmented dugme + aria-pressed ile calisir; form alani gerektiren secimde radyo
   gizlenir, bagli <label class="os-segmented__btn"> dugme gibi gorunur, secili durum
   `:checked`tan okunur (JS sinif senkronu gerekmez). Isaretleme:
   <div class="os-segmented" role="group"><input type="radio" id="a" name="n"><label for="a" class="os-segmented__btn">..</label>..</div> */
.os-segmented > input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.os-segmented > input[type="radio"]:checked + .os-segmented__btn {
  background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-xs);
}
.os-segmented > input[type="radio"]:focus-visible + .os-segmented__btn { outline: none; box-shadow: var(--focus-ring); }
.os-segmented > input[type="radio"]:disabled + .os-segmented__btn { cursor: not-allowed; opacity: .6; }
label.os-segmented__btn { margin: 0; user-select: none; }

/* ── Acilir liste: girdiye yapisik tam genislik oneriler (autocomplete sonuc paneli) ──
   Kaynak: requests/create `.search-results` (musteri / kefil arama). Taban os-menu'nun yuzeyi;
   kapsayici `position:relative` (girdi sarmalayicisi) altina tam genislikte oturur. Gorunurluk
   Bootstrap `.show` kalibiyla acilir (arama JS'i sinifi ekler/kaldirir). */
/* taban ek-g9'da SONRA yuklenir: ayni ozgulukte ezilmemek icin cift sinif */
.os-menu.os-menu--attached {
  top: 100%; left: 0; right: 0; max-width: none; max-height: 360px; margin-top: 4px; z-index: 1060;
}
.os-menu--attached:not(.show) { display: none; }

/* ── Nokta: marka tonu (os-dot ailesinin eksik tonu; etkin grup / adim isareti) ── */
.os-dot.os-dot--brand { background: var(--interactive-primary); }

/* ── Sonuc ikonu: kucuk olcu + islem suruyor (donen halka) ──
   Kaynak: requests/create Findeks popup'i `.fdx-spinner`, merkezi uyari `.wzalert-icon`.
   --sm: diyalog ici 56px · --busy: ikonun cevresinde donen marka halkasi (bekleme durumu). */
.os-resulticon--sm { width: 56px; height: 56px; font-size: 26px; }
.os-resulticon--busy { position: relative; overflow: visible; }
.os-resulticon--busy::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 3px solid var(--surface-selected); border-top-color: var(--interactive-primary);
  animation: os-spin .9s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .os-resulticon--busy::after { animation: none; } }

/* ── Kabuksuz sayfa kabi (oturumsuz baglanti sayfalari: acik riza, evrak yukleme) ──
   Kaynak: requests/consent-public, requests/upload-public (her biri kendi :root/header/footer
   stilini tasiyordu). Mobil oncelikli dar sutun: marka seridi (__header: __mark harf isareti +
   __brand ad + __sub alt baslik), icerik (__main), alt not (__note). Sayfa arka plani zemin tonu. */
.os-publicshell {
  display: flex; flex-direction: column; width: 100%; max-width: 520px; min-height: 100vh; margin: 0 auto;
  background: var(--surface-card); box-shadow: var(--shadow-sm); color: var(--text-primary);
}
.os-publicshell__header {
  display: flex; align-items: center; gap: var(--space-3); padding: 18px var(--space-5);
  background: var(--surface-header); color: var(--text-inverse);
}
.os-publicshell__mark {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: var(--radius-md);
  background: var(--on-dark-fill); color: var(--text-inverse);
  font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: 1;
}
.os-publicshell__brand { display: block; font-size: var(--text-md); font-weight: var(--weight-bold); line-height: 1.3; }
.os-publicshell__sub { display: block; font-size: var(--text-xs); color: var(--on-dark-muted); }
.os-publicshell__main { flex: 1; padding: var(--space-5) var(--space-5) var(--space-8); min-width: 0; }
.os-publicshell__note {
  padding: 14px var(--space-5); text-align: center; font-size: var(--text-2xs); color: var(--text-muted);
  border-top: 1px solid var(--border-default);
}
@media (max-width: 639px) { .os-publicshell { box-shadow: none; } }

/* ── Erisilebilirlik: gorsel olarak gizli, ekran okuyucuya acik metin ──
   Kaynak: consent-public / upload-public `.sr-only` (components.css'teydi; kabuksuz sayfalar
   o dosyayi yuklemedigi icin gizli H1 ekranda gorunuyordu). */
.os-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Stepper: gizlenen adimin ayraci da gizlenir (kosullu adim, orn. Kefil) ──
   Kaynak: wizard.css `.wizard-step-item[style*="display:none"] + .step-sep`. Adim JS ile
   `style.display='none'` ya da `hidden` ile kapatilir; ardindaki ayrac bos kalmasin. */
.os-stepper > .os-step[hidden] + .os-stepper__sep,
.os-stepper > .os-step[style*="display: none"] + .os-stepper__sep,
.os-stepper > .os-step[style*="display:none"] + .os-stepper__sep { display: none; }

/* ── Belge yuvasi: satir ici (yatay) kompakt varyant ──
   Kaynak: smart-intake.css `.dz` (Akilli Baslangic kimlik on/arka yuz, ruhsattan doldur).
   Taban os-docslot dikey ve iri (min 172px) bir karodur; formun icinde tek satirlik secim
   alani gerektiginde ikon solda, etiket + ipucu sagda alt alta durur. Durumlar (--uploaded,
   --rejected, hover) tabandan gelir. Tam genislik icin kapsayicida `w-100`. */
.os-docslot.os-docslot--inline {
  flex-direction: row; align-items: center; justify-content: flex-start; text-align: left;
  min-height: 0; min-width: 230px; max-width: 100%; gap: var(--space-3);
  padding: var(--space-4); border-width: 1.5px;
}
.os-docslot--inline .os-docslot__icon[class*="bi-"] { font-size: 20px; }
.os-docslot--inline .os-docslot__label { justify-content: flex-start; font-weight: var(--weight-medium); }

/* ── Akordeon: baslik <button> ise tarayici dugme gorunumu sifirlanir; kart icindeki ilk
   ogenin ust cizgisi kartin kenarligiyla cakismasin ──
   Kaynak: smart-intake.css `.proc-acc` (Akilli Baslangic kontrol adimlari ozeti). */
button.os-acc__head { width: 100%; margin: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
.os-card > .os-acc__item:first-child { border-top: 0; }


/* ════════ ek-g4-isakisi ════════ */
/* GECICI PAKET UZANTISI (g4-isakisi) -- tek kaynak gocu 2026-09-25.
   Bu grubun ihtiyac duydugu YENI DS bilesen/varyantlari. Goc bitince asil bilesen
   dosyalarina (controls/data/feedback/navigation/workflow...) birlestirilir, bu dosya silinir.
   KURAL: yalniz os-* secici, yalniz semantik token (tokens/colors.css), sayfa sinifi YOK. */

/* ══ TON AILESI (sureç diyagrami / serit / cubuk) ═══════════════════════════════
   Departman / faz gibi KATEGORIK ayrimlar icin alti ton: brand · info · neutral ·
   success · danger · muted (+ warning yalniz faz/uyari icin). Renk tek bilgi kanali
   degildir: her kutu departman adini METIN olarak da tasir. */

/* ══ Surec diyagrami (BPMN benzeri akis) — workflow.css'e birlesecek ═══════════
   Yapi: .os-flow (konumlanmis yuzey) > .os-flow__row (ana akis) + .os-flow__branch
   (mutlak konumlu dal kutulari). Konum/boyut SAYFANIN (JS'in hesapladigi) duzenidir;
   renk, kenarlik, yazi burada. Diyagram yogundur: yazi boyutlari bilincli olarak kucuk
   (8-11px) -- kutu genislikleri dal hizalamasini belirliyor, buyutmek hizayi bozar. */
.os-flow { position: relative; font-feature-settings: var(--numeric-features); }
.os-flow__row { display: flex; align-items: center; position: relative; z-index: 2; }
.os-flow__branch { position: absolute; display: flex; flex-direction: column; align-items: center; z-index: 1; }
/* Baslangic olayindan ONCEKI adim (orn. Tamamlanacak Talep): seridi saga iter; dallar
   data-bpmn-left + genislik kadar otelenir (workflow-monitor.js shiftStaticBranches). */
.os-flow__prestart { display: flex; align-items: center; flex-shrink: 0; }

/* Olay (baslangic / bitis) */
.os-flow__event {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-card); font-size: 14px;
}
.os-flow__event--start { border: 2px solid var(--status-success-solid); color: var(--status-success-fg); }
.os-flow__event--end { border: 3px solid var(--status-danger-solid); color: var(--status-danger-fg); }
.os-flow__event--end.os-flow__event--success { border-color: var(--status-success-solid); color: var(--status-success-fg); }

/* Karar kapisi (baklava) */
.os-flow__gateway {
  width: 30px; height: 30px; flex: none; position: relative; transform: rotate(45deg);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--status-warning-solid); background: var(--status-warning-bg);
}
.os-flow__gateway > i { transform: rotate(-45deg); font-size: 12px; color: var(--status-warning-fg); }

/* Gorev kutusu: ust serit departman tonunda, govdede ad */
.os-flow__task {
  min-width: 100px; flex: none; position: relative; cursor: pointer;
  background: var(--surface-card); border: 2px solid var(--border-default); border-radius: 8px;
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}
.os-flow__task:hover { box-shadow: var(--shadow-md); }
.os-flow__task:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.os-flow__task--optional { border-style: dashed; }
.os-flow__task--selected { outline: 3px solid var(--border-focus); outline-offset: 2px; }
.os-flow__taskhead {
  display: flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 5px 5px 0 0;
  background: var(--text-secondary); color: var(--text-inverse);
  font-size: 8px; font-weight: var(--weight-semibold); letter-spacing: .03em;
}
.os-flow__taskhead > .bi { font-size: 16px; line-height: 1; }
.os-flow__taskbody { padding: 6px 8px; text-align: center; }
.os-flow__taskname { font-size: 10px; font-weight: var(--weight-semibold); line-height: 1.2; color: var(--text-primary); }
.os-flow--roomy .os-flow__taskbody { padding: 8px; }
.os-flow--roomy .os-flow__taskname { font-size: 11px; }
.os-flow__task--brand   { border-color: var(--interactive-primary); }
.os-flow__task--info    { border-color: var(--status-info-solid); }
.os-flow__task--neutral { border-color: var(--text-secondary); }
.os-flow__task--success { border-color: var(--status-success-solid); }
.os-flow__task--danger  { border-color: var(--status-danger-solid); }
.os-flow__task--muted   { border-color: var(--text-muted); }
.os-flow__task--brand   .os-flow__taskhead { background: var(--interactive-primary); }
.os-flow__task--info    .os-flow__taskhead { background: var(--status-info-solid); }
.os-flow__task--neutral .os-flow__taskhead { background: var(--text-secondary); }
.os-flow__task--success .os-flow__taskhead { background: var(--status-success-solid); }
.os-flow__task--danger  .os-flow__taskhead { background: var(--status-danger-solid); }
.os-flow__task--muted   .os-flow__taskhead { background: var(--text-muted); }
/* Yogunluk (aktif kayit sayisi) halkasi */
.os-flow__task--heat-med  { box-shadow: 0 0 0 1px color-mix(in srgb, var(--status-warning-solid) 30%, transparent); }
.os-flow__task--heat-high { box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-warning-solid) 45%, transparent); }
.os-flow__task--heat-crit { box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-danger-solid) 40%, transparent); animation: os-flow-pulse 2s infinite; }
@keyframes os-flow-pulse {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-danger-solid) 40%, transparent); }
  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--status-danger-solid) 20%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .os-flow__task--heat-crit { animation: none; } }

/* Sayac jetonu (kutunun sol alt kosesi) — takilma oranina gore ton */
.os-flow__token {
  position: absolute; bottom: -7px; left: -7px; z-index: 3;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--status-info-solid); color: var(--text-inverse);
  font-size: 9px; font-weight: var(--weight-bold); box-shadow: var(--shadow-sm);
}
.os-flow__token--warning { background: var(--status-warning-fg); }
.os-flow__token--danger  { background: var(--status-danger-solid); }
/* Aciklama (lejant) icinde: akista yer alir, kose konumu yok */
.os-flow__token--static { position: static; height: 14px; min-width: 18px; padding: 0 4px; font-size: 8px; box-shadow: none; }

/* Baglanti oku (yatay) ve dal cizgisi (dikey) */
.os-flow__seq { width: 24px; height: 2px; flex: none; position: relative; background: var(--border-strong); }
.os-flow__seq::after {
  content: ""; position: absolute; right: -1px; top: -3px;
  border: 4px solid transparent; border-left: 5px solid var(--border-strong);
}
.os-flow__seq--short { width: 14px; }
.os-flow__vline { width: 1.5px; background: var(--border-strong); }
.os-flow__vline--dashed { background: repeating-linear-gradient(to bottom, var(--border-strong) 0, var(--border-strong) 4px, transparent 4px, transparent 7px); }
/* Asagi bakan ok ucu (dal donusu) — konumu JS verir */
.os-flow__arrowhead { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--border-strong); }

/* Yol frekansi / kisa etiket cipi */
.os-flow__freq {
  display: inline-block; padding: 1px 5px; border-radius: 3px; white-space: nowrap;
  font-size: 9px; font-weight: var(--weight-semibold);
  background: var(--surface-sunken); color: var(--text-secondary);
}
.os-flow__freq:empty { display: none; }
.os-flow__freq--success  { background: var(--status-success-bg);  color: var(--status-success-fg); }
.os-flow__freq--warning  { background: var(--status-warning-bg);  color: var(--status-warning-fg); }
.os-flow__freq--danger   { background: var(--status-danger-bg);   color: var(--status-danger-fg); }
.os-flow__freq--returned { background: var(--status-returned-bg); color: var(--status-returned-fg); }
.os-flow__freq--neutral  { background: var(--surface-sunken);     color: var(--text-secondary); }

/* Dal alt yazisi */
.os-flow__note { font-size: 8px; line-height: 1.35; color: var(--text-muted); text-align: center; }
.os-flow__note--danger  { color: var(--status-danger-fg); }
.os-flow__note--success { color: var(--status-success-fg); }
.os-flow__note--strong  { font-weight: var(--weight-bold); }

/* Faz kusagi (bir grup gorevi cevreleyen kesik cerceve) + ust etiket + alt ozet */
.os-flow__phase {
  position: absolute; z-index: 1; pointer-events: none; border-radius: 12px;
  border: 1.5px dashed var(--border-strong); background: color-mix(in srgb, var(--surface-sunken) 30%, transparent);
  --flow-tone: var(--text-secondary);
}
.os-flow__phase--brand   { --flow-tone: var(--interactive-primary); }
.os-flow__phase--info    { --flow-tone: var(--status-info-fg); }
.os-flow__phase--neutral { --flow-tone: var(--text-secondary); }
.os-flow__phase--success { --flow-tone: var(--status-success-fg); }
.os-flow__phase--warning { --flow-tone: var(--status-warning-fg); }
.os-flow__phase[class*="os-flow__phase--"] {
  border-color: color-mix(in srgb, var(--flow-tone) 20%, transparent);
  background: color-mix(in srgb, var(--flow-tone) 4%, transparent);
}
.os-flow__phaselabel {
  position: absolute; top: -10px; left: 12px; padding: 1px 8px; border-radius: 4px; white-space: nowrap;
  background: var(--flow-tone); color: var(--text-inverse);
  font-size: 9px; font-weight: var(--weight-bold); letter-spacing: .03em; text-transform: uppercase;
}
.os-flow__phasesum {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 1px 8px; border-radius: 4px; font-size: 9px; font-weight: var(--weight-semibold);
  color: var(--flow-tone); border: 1px solid color-mix(in srgb, var(--flow-tone) 20%, transparent);
  background: color-mix(in srgb, var(--flow-tone) 6%, var(--surface-card));
}
.os-flow__phasesum--empty { background: var(--surface-page); }
.os-flow__chevron { position: absolute; z-index: 1; pointer-events: none; font-size: 12px; color: var(--text-muted); }

/* Lejant seridi (kartin altinda) */
.os-flow__legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  padding: 10px var(--space-5); border-top: 1px solid var(--border-default);
  font-size: 10px; color: var(--text-muted);
}
.os-flow__legenditem { display: flex; align-items: center; gap: 4px; }
.os-flow__legendline { width: 24px; height: 2px; border-radius: 2px; background: var(--border-strong); }
.os-flow__legendline--success { height: 4px; background: var(--status-success-solid); }
.os-flow__legendline--warning { background: var(--status-warning-fg); }
.os-flow__legendline--danger  { background: var(--status-danger-fg); }
.os-flow__legendphase {
  width: 24px; height: 16px; border-radius: 4px;
  border: 1.5px dashed color-mix(in srgb, var(--interactive-primary) 20%, transparent);
  background: color-mix(in srgb, var(--interactive-primary) 4%, transparent);
}

/* ══ Departman seridi (swimlane) — workflow.css'e birlesecek ═══════════════════
   .os-lane (satir) > .os-lane__label (tonlu sol etiket) + .os-lane__body (yatay kayan
   adim kolonlari .os-lane__step) > .os-lane__card (tiklanan mini kayit karti). */
.os-lane { display: flex; border-bottom: 1px solid var(--border-default); }
.os-lane:last-child { border-bottom: 0; }
.os-lane__label {
  width: 110px; flex: none; display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; background: var(--surface-page);
  border-right: 3px solid var(--border-strong); color: var(--text-secondary);
  font-size: 11px; font-weight: var(--weight-semibold);
}
.os-lane__label--brand   { border-right-color: var(--interactive-primary);   color: var(--text-brand); }
.os-lane__label--info    { border-right-color: var(--status-info-solid);     color: var(--status-info-fg); }
.os-lane__label--neutral { border-right-color: var(--text-secondary);        color: var(--text-secondary); }
.os-lane__label--success { border-right-color: var(--status-success-solid);  color: var(--status-success-fg); }
.os-lane__label--danger  { border-right-color: var(--status-danger-solid);   color: var(--status-danger-fg); }
.os-lane__label--muted   { border-right-color: var(--text-muted);            color: var(--text-muted); }
.os-lane__body { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: var(--space-2); padding: 10px; overflow-x: auto; }
.os-lane__arrow { flex: none; display: flex; align-items: center; font-size: 14px; color: var(--text-muted); }
.os-lane__step {
  min-width: 130px; max-width: 160px; flex: none;
  background: var(--surface-page); border: 1px solid var(--border-default); border-radius: 8px;
}
.os-lane__step--optional { border-style: dashed; }
.os-lane__step--warning { border-color: var(--status-warning-solid); }
.os-lane__step--danger  { border-color: var(--status-danger-solid); }
.os-lane__step--selected { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.os-lane__stephead {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 6px 8px; border-bottom: 1px solid var(--border-default); border-radius: 7px 7px 0 0;
  font-size: 10px; font-weight: var(--weight-semibold); color: var(--text-primary);
}
.os-lane__step--warning .os-lane__stephead,
.os-lane__step--heat-high .os-lane__stephead { background: var(--status-warning-bg); }
.os-lane__step--danger .os-lane__stephead,
.os-lane__step--heat-crit .os-lane__stephead { background: var(--status-danger-bg); }
.os-lane__count {
  flex: none; padding: 1px 6px; border-radius: 6px;
  background: var(--text-secondary); color: var(--text-inverse);
  font-size: 10px; font-weight: var(--weight-bold); font-feature-settings: var(--numeric-features);
}
.os-lane__count--brand   { background: var(--interactive-primary); }
.os-lane__count--info    { background: var(--status-info-solid); }
.os-lane__count--neutral { background: var(--text-secondary); }
.os-lane__count--success { background: var(--status-success-solid); }
.os-lane__count--danger  { background: var(--status-danger-solid); }
.os-lane__count--muted   { background: var(--text-muted); }
.os-lane__stepbody { padding: 4px 6px; max-height: 150px; overflow-y: auto; }
.os-lane__empty { padding: 4px; text-align: center; font-size: 9px; color: var(--text-muted); }
.os-lane__empty--danger { text-align: left; color: var(--status-danger-fg); }
.os-lane__summary {
  display: flex; justify-content: space-between; gap: 4px;
  padding: 4px 6px; border-bottom: 1px solid var(--border-default);
  font-size: 9px; color: var(--text-muted);
}
.os-lane__paging {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 4px 6px; border-top: 1px solid var(--border-default);
  font-size: 9px; color: var(--text-muted);
}
.os-lane__paginginfo { font-weight: var(--weight-semibold); }
.os-lane__more {
  padding: 2px 8px; border: 1px solid var(--border-default); border-radius: 4px; cursor: pointer;
  background: var(--surface-page); color: var(--text-brand);
  font: inherit; font-size: 9px; font-weight: var(--weight-semibold);
}
.os-lane__more:hover { background: var(--surface-selected); border-color: var(--border-focus); }
.os-lane__more:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.os-lane__card {
  display: block; width: 100%; margin-bottom: 3px; padding: 5px 7px; cursor: pointer; text-align: left;
  background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 5px;
  font: inherit; font-size: 10px; color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.os-lane__card:hover { border-color: var(--border-focus); box-shadow: var(--shadow-sm); }
.os-lane__card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.os-lane__card--selected { border-color: var(--border-focus); background: var(--surface-selected); }
.os-lane__card--stuck { border-left: 3px solid var(--status-danger-solid); }
.os-lane__cardid { font-weight: var(--weight-bold); }
.os-lane__cardsub { font-size: 9px; color: var(--text-muted); }
.os-lane__cardtime { font-size: 9px; }
.os-lane__cardtime--danger { color: var(--status-danger-fg); }

/* ══ KPI: ikonlu satir varyanti — data.css os-kpi'ye birlesecek ═══════════════
   Ikon karosu (os-icontile — g2/g8 uzantilarinda tanimli) solda, deger + etiket sagda. */
.os-kpi--row { flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.os-kpi--row .os-kpi__value { font-size: var(--text-2xl); }

/* ══ Progress: kalin cubuk + ic etiket + kategorik ton — data.css'e birlesecek ═══
   Yatay cubuk grafik satiri (ortalama adim suresi): deger cubugun ICINDE yazilir. */
.os-progress--lg { height: 20px; border-radius: var(--radius-sm); }
.os-progress--lg .os-progress__bar {
  display: flex; align-items: center; min-width: fit-content; padding-left: 6px; border-radius: var(--radius-sm);
  font-size: 9px; font-weight: var(--weight-semibold); color: var(--text-inverse); white-space: nowrap;
}
/* --brand / --info / --neutral: portal.css'te tanimli (tekrar tanimlanmadi) */
.os-progress__bar--success { background: var(--status-success-solid); }

/* ══ Kart ici arac seridi (arama kutusu, filtre) — data.css os-card'a birlesecek ═══ */
.os-card__toolbar { padding: 10px var(--space-4); border-bottom: 1px solid var(--border-default); }

/* ══ BulkBar: yuzen varyant (icerik ustunde sabit konumlu secim seridi) — feedback.css'e birlesecek ═══
   Konumu (fixed/bottom/left) sayfa duzenidir; bilesen yalniz yukseltiyi verir. */
.os-bulkbar--float { box-shadow: var(--shadow-lg); }

/* ══ Avatar: bos (atanmamis) varyant — data.css'e birlesecek ═══ */
.os-avatar--empty { background: transparent; border: 1.5px dashed var(--border-strong); color: var(--text-muted); }

/* ══ Akis ogesi: acil varyant (ek-g6 os-feeditem'a) — sol kenarda durum aksani ═══
   --accent (havuz) ile birlikte kullanilabilir: kirmizi aksan baskin, secili zemin kalir. */
.os-feeditem--danger { border-left: 3px solid var(--status-danger-solid); }

/* ══ Nokta: halkali varyant (avatar kosesindeki durum noktasi — ek-g9 os-dot'a) ═══ */
.os-dot--ring { box-shadow: 0 0 0 2px var(--surface-card); }


/* ════════ ek-g5-tahsilat ════════ */
/* GECICI PAKET UZANTISI (g5-tahsilat) -- tek kaynak gocu 2026-09-25.
   Bu grubun ihtiyac duydugu YENI DS bilesen/varyantlari. Goc bitince asil bilesen
   dosyalarina (controls/data/feedback/navigation/workflow...) birlestirilir, bu dosya silinir.
   KURAL: yalniz os-* secici, yalniz semantik token (tokens/colors.css), sayfa sinifi YOK. */

/* ── Tablo: gruplu satirlar (ust kayit + alt kayitlar; talep -> senet) ──────────────
   Ust satir kart zemininde, ustten guclu cizgiyle ayrilir; secim hucresinde marka seridi.
   Alt satirlar soluk zeminde, agac cizgili hucreyle (os-cell--tree) girintili okunur.
   Kaynak: avukata devir aday listesi / devir sepeti (css/legal-batch-list.css'in DS karsiligi). */
.os-table tbody tr.os-row--group td {
  background: var(--surface-card);
  border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-default);
  padding-top: var(--space-3); padding-bottom: var(--space-3);
  white-space: normal;
}
.os-table tbody tr.os-row--group:first-child td { border-top: 0; }
.os-table tbody tr.os-row--group:hover td { background: var(--surface-card); }
.os-table tbody tr.os-row--group td.os-cell--select { box-shadow: inset 3px 0 0 var(--interactive-primary); }
.os-table tbody tr.os-row--child td { background: var(--gray-25); }
.os-table tbody tr.os-row--child:hover td { background: var(--gray-50); }
.os-table tbody tr.os-row--child.os-row--selected td { background: var(--surface-selected); }
/* Alt satirin secim kutusu ust satirinkinden iceride: hiyerarsi hizadan okunur.
   transform yerlesimi etkilemez (kolon genisligi degismez). */
.os-table tbody tr.os-row--child td.os-cell--select .os-check { transform: translateX(16px); position: relative; z-index: 1; }
/* Durum tonlu satirlar: --warning (dikkat: borcu kapanmis kalem), --muted (artik gecerli degil) */
.os-table tbody tr.os-row--warning td { background: var(--status-warning-bg); }
.os-table tbody tr.os-row--warning td.os-cell--select { box-shadow: inset 3px 0 0 var(--status-warning-solid); }
/* Agac cizgisi hucresi: son halka disindakiler (--mid) dikey hatti surdurur */
.os-table td.os-cell--tree { position: relative; padding-left: 40px; white-space: nowrap; }
.os-table td.os-cell--tree::before {
  content: ""; position: absolute; left: 20px; top: 0; height: 50%; width: 11px;
  border-left: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong);
  border-bottom-left-radius: 5px;
}
.os-table td.os-cell--tree.os-cell--tree-mid::after {
  content: ""; position: absolute; left: 20px; top: 50%; bottom: 0;
  border-left: 1px solid var(--border-strong);
}
/* Siralanabilir kolon basligi (sunucuda siralanan listeler) */
.os-table th.os-cell--sortable { cursor: pointer; user-select: none; }
.os-table th.os-cell--sortable:hover,
.os-table th.os-cell--sorted { color: var(--text-brand); }
.os-sortind { font-size: 10px; margin-left: 2px; }
/* Hucre ici sabit girdiler (satir ici tutar/gun) tabloyu sisirmesin */
.os-table .os-input--sm, .os-table .os-select--sm { min-width: 0; }

/* ── Metrik kumesi (satir sonunda sag yasli etiket / deger / alt satir) ─────────────
   os-kpi'den farki: kutusuz, satir ici, sag yasli. Tablo grup satirinda 2-3 tane yan yana. */
.os-metrics { display: flex; justify-content: flex-end; gap: var(--space-6); }
.os-metric { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.35; min-width: 0; }
.os-metric__label { font-size: var(--text-2xs); color: var(--text-muted); }
.os-metric__value {
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--text-primary); white-space: nowrap; font-feature-settings: var(--numeric-features);
}
.os-metric__value--danger { color: var(--status-danger-fg); }
.os-metric__value--muted { color: var(--text-muted); }
.os-metric__sub {
  font-size: var(--text-2xs); color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* ── Bilgi satiri (kayit basliginin altinda: plaka · il/ilce · kefil ...) ── */
.os-metaline {
  display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--space-3); row-gap: 2px;
  margin-top: 3px; font-size: var(--text-xs); color: var(--text-muted);
}
.os-metaline b { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* ── Rozet: satir sarabilen varyant (uzun gerekce metni kirpilmasin) ── */
.os-badge--wrap { white-space: normal; overflow-wrap: break-word; height: auto; min-height: 22px; padding-top: 2px; padding-bottom: 2px; }
/* Kod rozeti (kural/filtre kodu: ISU, AKS, 2.1.1): es-genislikli, kucuk */
.os-badge--code { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .04em; }

/* ── Stepper: adim alt aciklamasi ("Cuma · arama + sepete ekleme") ── */
.os-step__sub { font-size: var(--text-2xs); font-weight: var(--weight-regular); color: var(--text-muted); margin-left: var(--space-1); }
.os-step--active .os-step__sub { color: var(--on-dark-text); }
@media (max-width: 639px) {
  .os-stepper--pill .os-step:not(.os-step--active) .os-step__sub { display: none; }
}

/* ── Yan yana paneller + ayirici (form kutusunda iki kural grubu) ──
   Dar kapta (<1100px) alt alta duser, ayirici yataya doner. */
.os-panes { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: stretch; }
.os-panes > * { flex: 1 1 360px; min-width: min(320px, 100%); }
.os-panes > * + * { border-left: 1px solid var(--border-default); padding-left: var(--space-5); }
@media (max-width: 1100px) {
  .os-panes > * + * { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-default); padding-top: var(--space-3); }
}

/* ── Belirsiz ilerleme (suresi bilinmeyen hesap: "bakiyeler guncelleniyor") ── */
.os-progress--indeterminate { position: relative; }
.os-progress--indeterminate .os-progress__bar {
  position: absolute; top: 0; left: 0; width: 38%; background: var(--interactive-primary);
  animation: os-progress-slide 1.25s ease-in-out infinite;
}
@keyframes os-progress-slide { from { transform: translateX(-100%); } to { transform: translateX(265%); } }
@media (prefers-reduced-motion: reduce) { .os-progress--indeterminate .os-progress__bar { animation: none; } }

/* ── Koyu zemin (BulkBar) uzerinde pozitif tutar ── */
.os-bulkbar .os-num--pos { color: var(--status-success-on-dark); }

/* Stepper hap seridi SARMAZ: tabandaki flex-wrap hapi ikiye boluyordu (390px); serit kendi icinde kayar */
.os-stepper--pill { flex-wrap: nowrap; }

/* ── Ayirici cizgi (kart icinde bolum ayirma: toplam satiri, ikincil blok) ── */
.os-divider { border: 0; border-top: 1px solid var(--border-default); margin: var(--space-3) 0; opacity: 1; }
.os-divider--strong { border-top-color: var(--border-strong); border-top-width: 2px; }
.os-divider--dashed { border-top-style: dashed; }

/* ── Kuyu (well): kart icinde gomuk zeminli kucuk panel (hesap kalemi, onay ozeti) ── */
.os-well { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); min-width: 0; }

/* Uyari basligi baslik etiketiyle (h3/h4) cagrildiginda tarayici/Bootstrap baslik boyu almaz */
h2.os-alert__title, h3.os-alert__title, h4.os-alert__title, h5.os-alert__title {
  font-family: inherit; font-size: var(--text-md); line-height: var(--leading-tight);
}

/* Tablo satiri sonuc tonu (ice aktarma onizlemesi: gecerli / hatali satir) */
.os-table tbody tr.os-row--success td { background: var(--status-success-bg); }
.os-table tbody tr.os-row--danger td { background: var(--status-danger-bg); }

/* KV etiketi Bootstrap reboot'un `dt { font-weight: 700 }` kuralini ezer: etiket ikincil ve normal agirlikta
   (paket niyeti -- data.css .os-kv dt agirlik belirtmiyordu, reboot kaliyordu) */
.os-kv dt, .os-kv__label { font-weight: var(--weight-regular); }

/* Kart: tehlike kenari (hukuki takip gibi dikkat isteyen bilgi karti) */
/* KPI: yogun kart izgarasi (7+ kart yan yana) -- deger bir boy kucuk */
.os-kpi--compact .os-kpi__value { font-size: var(--text-xl); }
/* Dikkat nabzi: kullaniciyi bir kontrole yonlendirme (3 kez odak halkasi) */
@keyframes os-attn { 0%, 100% { box-shadow: none; } 50% { box-shadow: var(--focus-ring); } }
.os-attn { animation: os-attn .7s ease-in-out 3; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) { .os-attn { animation: none; box-shadow: var(--focus-ring); } }

/* ── Durum seridi: kart/satir solunda 3px dikey ton cizgisi (dosya secici, liste karti) ── */
.os-stripe { width: 3px; align-self: stretch; flex: none; border-radius: 3px; background: var(--border-strong); }
.os-stripe--success { background: var(--status-success-solid); }
.os-stripe--warning { background: var(--status-warning-solid); }
.os-stripe--danger  { background: var(--status-danger-solid); }
.os-stripe--info    { background: var(--status-info-solid); }

/* Acilir liste ogesi <button> ile cagrildiginda tarayici dugme gorunumu sifirlanir; pasif oge soluk */
button.os-menu__item { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; }
.os-menu__item:disabled, .os-menu__item[aria-disabled="true"] { opacity: .45; cursor: not-allowed; background: transparent; }


/* ════════ ek-g6-odeme-arac ════════ */
/* GECICI PAKET UZANTISI (g6-odeme-arac) -- tek kaynak gocu 2026-09-25.
   Bu grubun ihtiyac duydugu YENI DS bilesen/varyantlari. Goc bitince asil bilesen
   dosyalarina (controls/data/feedback/navigation/workflow...) birlestirilir, bu dosya silinir.
   KURAL: yalniz os-* secici, yalniz semantik token (tokens/colors.css), sayfa sinifi YOK. */

/* ── Lightbox: tam ekran gorsel onizleme ortusu ─────────────────────
   Belge/foto kutucugundaki "Onizle" buyuk gorseli acar. Ortu tiklaninca kapanir
   (davranis sayfanin), kapatma dugmesi os-iconbtn--on-dark. Acik durum: --open. */
.os-lightbox {
  position: fixed; inset: 0; z-index: 1200;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-4); padding: var(--space-6);
  background: var(--overlay-backdrop);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.os-lightbox--open { display: flex; }
.os-lightbox__img {
  max-width: 90%; max-height: 80%; object-fit: contain;
  border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-lg);
}
.os-lightbox__close { position: absolute; top: var(--space-5); right: var(--space-6); }
.os-lightbox__caption {
  max-width: 90%; text-align: center; overflow-wrap: anywhere;
  font-size: var(--text-sm); color: var(--text-inverse);
}

/* ── DocSlot izgarasi: az kutucuklu satir (2-3 evrak) kabi doldurur ──
   os-docgrid auto-fill bos kolonlar birakir (2 evrakta 3. kolon bos kalir);
   auto-fit bos izleri eritir, kutucuklar satiri paylasir. */
.os-docgrid--fit { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

/* ── Kart: tiklanabilir secim karti (iki/cok secenekli mod secimi) ──
   Secili durum mevcut os-card--selected ile; bu varyant yalniz imlec + uzerine gelme + odak verir. */
.os-card--clickable {
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.os-card--clickable:hover { border-color: var(--border-focus); }
.os-card--clickable:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Akis ogesi (bildirim / gelen kutusu satiri) ─────────────────────
   Satir kart gibi durur ve TIKLANIR; solda secim + ton ikonu (os-toneicon), ortada baslik/zaman/metin,
   sagda satir eylemleri. Durumlar: --unread (okunmamis: marka aksani + secili zemin),
   --accent (bahsetme: ayni aksan, okunsa da kalir), --muted (ertelenmis: kesikli + soluk). */
.os-feeditem {
  position: relative; display: flex; align-items: flex-start; gap: var(--space-3);
  padding: 14px var(--space-4);
  background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.os-feeditem + .os-feeditem { margin-top: var(--space-2); }
.os-feeditem:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.os-feeditem--unread, .os-feeditem--accent { border-left: 3px solid var(--interactive-primary); background: var(--surface-selected); }
.os-feeditem--muted { opacity: .75; border-style: dashed; }
.os-feeditem__body { flex: 1; min-width: 0; }
.os-feeditem__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.os-feeditem__title { margin-bottom: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); overflow-wrap: anywhere; }
.os-feeditem__time { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); white-space: nowrap; }
.os-feeditem__text { font-size: var(--text-sm); color: var(--text-secondary); overflow-wrap: anywhere; }
.os-feeditem__actions { display: flex; align-items: center; gap: 2px; flex: none; }
.os-feeditem > .os-check { margin-top: 10px; }
.os-feeditem__head > .os-feeditem__title { flex: 1 1 auto; min-width: 0; }
/* Dar ekran: eylemler kendi satirina iner; baslik ile zaman alt alta akar (baslik harf harf kirilmaz). */
@media (max-width: 639px) {
  .os-feeditem { flex-wrap: wrap; }
  .os-feeditem__body { flex: 1 1 calc(100% - 96px); }
  .os-feeditem__head { flex-wrap: wrap; }
  .os-feeditem__actions { width: 100%; justify-content: flex-end; }
}

/* ── Buyuk harf girdi: yer tutucu buyuge DONMEZ ──
   os-input--upper deger icin; ipucu metni ("Plaka Degisikligi") kucuk harfle okunur kalir. */
.os-input--upper::placeholder { text-transform: none; letter-spacing: normal; }

/* ── Ton ikonu: yumusak zeminli ikon kutusu (kategori / tur / eslesme durumu) ──
   Varsayilan kose yuvarlatilmis kare; --round daire. Ton yalniz zemin+ikon rengi. */
.os-toneicon {
  width: 32px; height: 32px; flex: none; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1;
  background: var(--surface-sunken); color: var(--text-secondary);
}
.os-toneicon--round { width: 36px; height: 36px; border-radius: 50%; font-size: 16px; }
.os-toneicon--lg { width: 36px; height: 36px; font-size: 18px; }
.os-toneicon--brand   { background: var(--surface-selected);  color: var(--text-brand); }
.os-toneicon--success { background: var(--status-success-bg); color: var(--status-success-fg); }
.os-toneicon--warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.os-toneicon--danger  { background: var(--status-danger-bg);  color: var(--status-danger-fg); }
.os-toneicon--info    { background: var(--status-info-bg);    color: var(--status-info-fg); }
.os-toneicon--solid   { background: var(--interactive-primary); color: var(--text-inverse); }

/* ══ LISTE ISKELETI (w3-liste, 2026-09-28) ══════════════════════════════
   Eski ortak CSS'teki (v4c-mono .chip-bar/.toolbar/.filter-panel/.applied-bar/
   .pagination/.tbl-state/.bulk-bar/.dt--dense ...) liste iskeletinin DS karsiligi.
   ~25 liste sayfasi + js/list-standard.js ayni isaretlemeyi uretir; gorunum YALNIZ burada. */

/* ── Durum cip seridi: etiket + os-tag--toggle gruplari ── */
.os-chipbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.os-chipbar__group { display: inline-flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.os-chipbar__sep { width: 1px; height: 16px; background: var(--border-default); }
.os-chipbar__label, .os-appliedbar__label {
  flex-shrink: 0;
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}

/* ── Uygulanan filtre seridi: bos iken yer kaplamaz (list-standard icerigi bosaltir) ── */
.os-appliedbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-3); }
.os-appliedbar:empty { display: none; }
/* Filtreye uyan kayit sayisi: satirin sagina yaslanir (list-standard appliedCount yazar) */
.os-appliedbar__count {
  margin-left: auto; white-space: nowrap;
  font-size: var(--text-sm); color: var(--text-secondary);
}
.os-appliedbar__count b { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* ── Liste arac cubugu: arama kutusu kalan genisligi doldurur, eylemler sagda ── */
.os-toolbar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.os-toolbar__search { flex: 1; min-width: 0; }
.os-toolbar__search > .os-input { width: 100%; }
.os-toolbar__search--range { display: flex; align-items: center; gap: var(--space-2); }
.os-toolbar__search--range > .bi { color: var(--text-muted); }
.os-toolbar__search--range > .os-input { flex: 1; min-width: 0; }
.os-toolbar__actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Arac cubugundaki secim (siralama vb.) icerik genisliginde; temel .os-select tam genislik olup yanindaki dugmeyi alt satira itiyordu */
.os-toolbar__actions > .os-select { width: auto; }

/* ── Acilir filtre paneli: dugmenin altinda, saga yasli. Acik durum: .open ──
   Kapsayici .os-dropdown konum kokudur (disari tiklama da onunla ayirt edilir). */
.os-dropdown { position: relative; }
.os-filterpanel {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 100;
  width: 340px; max-width: calc(100vw - 32px); padding: 18px;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.os-filterpanel.open, .os-filterpanel.show { display: block; animation: os-popover-in var(--duration-fast) var(--ease-standard); }
/* Satir ici (daraltilabilir) varyant: arac cubugunun altinda akista acilir */
.os-filterpanel--inline { position: static; width: auto; max-width: none; margin-bottom: var(--space-4); box-shadow: var(--shadow-xs); }
.os-filterpanel__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border-default);
}
.os-filterpanel__title { font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--text-primary); }
.os-filterpanel__section { margin-bottom: 14px; }
.os-filterpanel__range { display: flex; align-items: center; gap: var(--space-2); }
.os-filterpanel__range > .os-input { flex: 1; min-width: 0; }
.os-filterpanel__range > .os-select { flex: 1 1 0; min-width: 0; }   /* secimli aralik (Model yili: R-40 os-select) */
.os-filterpanel__opts { display: flex; flex-direction: column; gap: 6px; }
.os-filterpanel__actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px;
  padding-top: 14px; border-top: 1px solid var(--border-default);
}
@media (max-width: 1199px) { .os-filterpanel { right: -8px; } }
/* Dar ekran (olcum 2026-09-28, 390px): saga yasli 340px panel dugmenin solundan ekran disina
   tasiyor, arama kutusu da eylem dugmeleriyle ayni satirda "Muster" genisligine eziliyordu.
   Arama tam satir; panel alttan acilan tabaka (os-tabbar'in ustunde, kendi icinde kayar). */
@media (max-width: 639px) {
  .os-toolbar__search { flex-basis: 100%; }
  .os-filterpanel:not(.os-filterpanel--inline):not(.os-filterpanel--compact) {
    position: fixed; top: auto; left: var(--space-3); right: var(--space-3);
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    width: auto; max-width: none; max-height: calc(100dvh - 96px); overflow-y: auto; z-index: 1050;
  }
}
@media (prefers-reduced-motion: reduce) { .os-filterpanel.open, .os-filterpanel.show { animation: none; } }

/* ── Kompakt suzgec paneli (2026-10-07, Spec 031 FR-036): sayfada akista duran, satir satir dizilen
   ince alanlar. Ilk kullanim: Avukata Devir + Devir Sepeti (ayni bilesen). Uc satir duzeni:
   kural haplari + secimler + eylemler / sayi-tarih alanlari / uygulanan cipler (os-appliedbar).
   Kapali durum (--collapsed): alan satirlari gizlenir, uygulanan cip yoksa panel tamamen kaybolur.
     <div class="os-filterpanel os-filterpanel--compact">
       <div class="os-filterpanel__row">
         <label class="os-filterpanel__field os-filterpanel__field--md"><span class="os-filterpanel__label">..</span>
           <select class="os-select os-select--sm">..</select></label>
         <span class="os-filterpanel__sep"></span>
         <div class="os-filterpanel__actions">..</div></div>
       <div class="os-appliedbar"></div></div>
   Alan genisligi yalniz --sm/--md/--lg/--xl ile (satir ici width yazilmaz); <640px'te alanlar iki
   sutuna, --wide ve --xl tam satira duser (R-36). */
.os-filterpanel--compact {
  display: flex; flex-direction: column; gap: 10px;
  position: static; width: auto; max-width: none; z-index: auto;
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); box-shadow: var(--shadow-xs);
}
.os-filterpanel--compact.os-filterpanel--collapsed .os-filterpanel__row { display: none; }
.os-filterpanel--compact.os-filterpanel--collapsed:not(:has(.os-appliedbar:not(:empty))) { display: none; }
.os-filterpanel__row { display: flex; align-items: flex-end; gap: 10px 14px; flex-wrap: wrap; min-width: 0; }
.os-filterpanel__row + .os-filterpanel__row { border-top: 1px dashed var(--border-default); padding-top: 10px; }
.os-filterpanel__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; }
.os-filterpanel__field--sm { width: 120px; }
.os-filterpanel__field--md { width: 150px; }
.os-filterpanel__field--lg { width: 190px; }
.os-filterpanel__field--xl { width: 270px; }
.os-filterpanel__label {
  font-size: var(--text-2xs); font-weight: var(--weight-medium); color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.os-filterpanel__label b { font-family: var(--font-mono); font-weight: var(--weight-medium); color: var(--text-muted); }
.os-filterpanel__sep { width: 1px; align-self: stretch; flex: none; background: var(--border-default); }
/* ── Alan grubu (2026-10-25, kullanıcı isteği): benzer süzgeçler tek çerçevede, küçük başlıkla.
   Satır içinde gruplar yan yana dizilir; --grow kalan genişliği alır. İlk kullanım: Avukata Devir +
   Devir Sepeti ("Devir kuralı", "Senet", "Önceki senetler", "Hukuki takip · talep toplamları", "Araç satışı").
     <div class="os-filterpanel__group" role="group" aria-labelledby="gX">
       <span class="os-filterpanel__grouptitle" id="gX">Senet</span>
       <div class="os-filterpanel__groupbody"> ..os-filterpanel__field.. </div></div> */
.os-filterpanel__group {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 5px 8px 8px; border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.os-filterpanel__group--grow { flex: 1 1 auto; }
.os-filterpanel__grouptitle {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--text-muted);
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.os-filterpanel__groupbody { display: flex; align-items: flex-end; gap: 8px 10px; flex-wrap: wrap; min-width: 0; }
@media (max-width: 639px) { .os-filterpanel__group { width: 100%; } }
.os-filterpanel--compact .os-filterpanel__actions {
  margin-left: auto; align-items: center; padding-top: 0; border-top: 0;
}
/* Eylem satırı (2026-10-25): Temizle/Filtrele süzgeçlerin altında, sağa yaslı; üst ayraç yok. */
.os-filterpanel--compact .os-filterpanel__row--actions { justify-content: flex-end; border-top: 0; padding-top: 0; }
.os-filterpanel--compact .os-filterpanel__range { gap: var(--space-1); }
.os-filterpanel--compact .os-filterpanel__range > .os-meta { flex: none; }
.os-filterpanel--compact .os-inputgroup__addon { padding: 0 var(--space-2); font-size: var(--text-2xs); }
.os-filterpanel--compact .os-appliedbar { margin: 0; padding-top: var(--space-2); border-top: 1px solid var(--border-default); }
.os-filterpanel--compact.os-filterpanel--collapsed .os-appliedbar { padding-top: 0; border-top: 0; }
@media (max-width: 639px) {
  .os-filterpanel__field { width: calc(50% - 7px); }
  .os-filterpanel__field--xl, .os-filterpanel__field--wide { width: 100%; }
  .os-filterpanel__sep { display: none; }
  .os-filterpanel--compact .os-filterpanel__actions { margin-left: 0; width: 100%; justify-content: flex-end; }
  /* Dokunmatik: panel icinde girdi ile secim ayni boyda (portal.css'teki .os-input--sm tabani girdiyi 28px'te birakiyordu) */
  .os-filterpanel--compact .os-input--sm, .os-filterpanel--compact .os-select--sm { height: var(--control-h-md); }
}

/* ── Kural hapi: acilip kapanan kural + adi + kodu + esik girdisi tek hapta
   ("Ilk senet odenmedi · ISU > [3] g"). Acik: marka tonu; kapali: notr, esik soluk.
   <label class="os-rulechip"><input type="checkbox" class="os-rulechip__check">
     <span class="os-rulechip__name">..</span><span class="os-rulechip__code">ISU</span>
     <span class="os-rulechip__days">&gt;<input type="number" class="os-rulechip__input">g</span></label> */
.os-rulechips { display: flex; gap: 6px; flex-wrap: wrap; }
.os-rulechip {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--control-h-sm); margin: 0;
  padding: 0 var(--space-2) 0 var(--space-2); border-radius: var(--radius-pill);
  border: 1px solid var(--blue-100); background: var(--surface-selected); color: var(--text-brand);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); cursor: pointer; max-width: 100%;
}
.os-rulechip__check { width: 14px; height: 14px; margin: 0; flex: none; accent-color: var(--interactive-primary); cursor: pointer; }
.os-rulechip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-rulechip__code { font-family: var(--font-mono); font-size: var(--text-2xs); opacity: .8; white-space: nowrap; }
.os-rulechip__code::before { content: "·"; margin-right: 4px; font-family: var(--font-sans); }
.os-rulechip__days {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  font-size: var(--text-2xs); font-weight: var(--weight-medium); color: var(--text-secondary);
}
.os-rulechip__input {
  width: 40px; height: 22px; padding: 0 4px; text-align: right;
  font: var(--weight-regular) var(--text-xs)/1 var(--font-mono); font-feature-settings: var(--numeric-features);
  color: var(--text-primary); background: var(--surface-card);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.os-rulechip__input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring); }
.os-rulechip:has(> .os-rulechip__check:not(:checked)) {
  border-color: var(--border-default); background: var(--surface-card); color: var(--text-muted);
}
.os-rulechip:has(> .os-rulechip__check:not(:checked)) .os-rulechip__days { opacity: .45; }

/* ── Coklu secim acilir listesi (js/multi-check.js isaretlemesi): tetik os-select gorunumlu
   dugme, panel onay kutulu secenekler (os-check). Acik durum: panel `hidden` ozniteligiyle. */
.os-multicheck { position: relative; display: block; min-width: 0; }
.os-multicheck__btn { display: flex; align-items: center; text-align: left; }
.os-multicheck__txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-multicheck__txt.is-empty { color: var(--text-muted); }
.os-multicheck__panel {
  position: absolute; z-index: 100; top: calc(100% + 4px); left: 0;
  min-width: 100%; width: max-content; max-width: min(360px, 90vw); max-height: 320px; overflow: auto;
  padding: 6px; background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.os-multicheck__group {
  padding: 8px 8px 4px; font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.os-multicheck__opt { display: flex; width: 100%; padding: 6px 8px; border-radius: var(--radius-md); font-size: var(--text-sm); margin: 0; }
.os-multicheck__opt:hover { background: var(--surface-sunken); }
.os-multicheck__foot {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
  margin-top: 4px; padding: 6px 8px 2px; border-top: 1px solid var(--border-default);
  font-size: var(--text-xs); color: var(--text-muted);
}
.os-multicheck__empty { padding: 8px; font-size: var(--text-xs); color: var(--text-muted); }
/* Yazinca suzme kutusu (opt-in searchable; R-40 il/ilce "yazinca suzer") — panelin ustunde yapisik */
.os-multicheck__search { position: sticky; top: 0; z-index: 1; padding: 4px 4px 6px; background: var(--surface-card); }
.os-multicheck__search > .os-input { width: 100%; }

/* ── Tablo kabinin kaydirma alani: baslik yapiskan kalir, sayfa yatay kaymaz ── */
.os-tablewrap__scroll { overflow: auto; max-height: calc(100vh - 360px); min-width: 0; }
@media (max-width: 639px) { .os-tablewrap__scroll { max-height: none; overflow: visible; } }

/* ── Sabit yerlesimli tablo: kolon genisligi icerikten bagimsiz, tasan hucre "…" ──
   --nowrap: hucre metni satir kirmaz (kolon icerige gore genisler, tablo kabinda kayar).
   Ikisi de yalniz >=640px: altinda satir karta doner ve metin serbestce sarar. */
@media (min-width: 640px) {
  .os-table--nowrap td, .os-table--fixed td { white-space: nowrap; }
  .os-table--fixed { table-layout: fixed; }
  .os-table--fixed th { white-space: normal; }
  .os-table--fixed td { overflow: hidden; text-overflow: ellipsis; }
  .os-table--fixed td > * { min-width: 0; max-width: 100%; }
  /* İçeriğe göre boyutlanan tablo (js/os-table-fit.js --oto): sabit yerleşimli tablo kabına SIĞIYOR ama sabit kolonlar
     hücreyi kesiyorsa yerleşim içeriğe döner ve metin kelime aralarından sarar; kod/tarih/tutar tek satır kalır.
     Hiçbir kolon en uzun kelimesinin altına inmez (2026-10-26). Sayfa kendi table-layout:fixed + hücre "…" kuralını
     yazmış olabilir (talep/müşteri listesi) — sınıf iki kez yazılarak özgüllükte sayfa kuralının önüne geçilir. */
  .os-table.os-table--oto { table-layout: auto !important; }
  .os-table.os-table--oto.os-table--oto tbody td { white-space: normal; overflow: visible; text-overflow: clip; }
  .os-table.os-table--oto.os-table--oto tbody td.os-mono, .os-table.os-table--oto.os-table--oto tbody td .os-mono,
  .os-table.os-table--oto.os-table--oto tbody td.os-cell--num,
  .os-table.os-table--oto.os-table--oto tbody td .os-badge, .os-table.os-table--oto.os-table--oto tbody td .os-badge *,
  .os-table.os-table--oto.os-table--oto tbody td .os-tag { white-space: nowrap; }   /* rozet tek satır (DS: rozet kırılmaz) */
  /* Kısaltılabilir serbest metin (data.css os-cell--clip): kolonu şişirmez (max-width:0 → katkısı yok, kolon kalan alanı
     alır), tek satırda "…" ile kısalır; tam metin title'da. */
  .os-table.os-table--oto.os-table--oto tbody td.os-cell--clip { max-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* İç öğeler de tek satır: saran tablonun "td * { white-space: normal }" kuralı (çok :not'lu, yüksek özgüllük) iç bloğu sarıyordu. */
  .os-table.os-table--oto tbody td.os-cell--clip * { white-space: nowrap !important; }
}

/* ── Satir eylem kolonu: baslik ve dugmeler saga yasli (masaustu; kartta data.css devralir) ── */
.os-table th.os-cell--actions, .os-table td.os-cell--actions { text-align: right; }

/* ── Sayfalama seridi (tablo alti): bilgi | boyut + sayfa + oklar ── */
.os-pagination--wrap { flex-wrap: wrap; gap: 10px; }
.os-pagination__group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.os-pagination__nav { display: flex; gap: 2px; }
.os-pagination__size { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: var(--text-2xs); color: var(--text-muted); }
.os-pagination__size > .os-select { width: auto; }
.os-pagination__page:disabled { opacity: .35; cursor: not-allowed; background: none; }

/* ── Bos/hata durumu ikonu (os-empty icinde); renk os-icon--* ile ── */
.os-empty__icon { font-size: 30px; line-height: 1; }

/* ── Sabit konumlu menu (satir tasma menusu): konum JS'in hesapladigi dinamik deger; ek-g9 .os-menu sonra yuklendigi icin iki sinifli ── */
.os-menu.os-menu--fixed { position: fixed; z-index: 300; min-width: 190px; max-height: none; }

/* ── StatBar: marka tonu (3. dalga, document-sign-list) ─────────────────
   workflow.css danger/warning/success/info/returned tonlarina ek: "islenen/tamamlanan" gibi
   notr-vurgulu sayac marka rengini tasir. Yalniz DEGER boyanir (StatBar kurali). */
.os-statbar__item--brand .os-statbar__value { color: var(--text-brand); }


/* ════════ ek-g7-admin-araclar ════════ */
/* GECICI PAKET UZANTISI (g7-admin-araclar) -- tek kaynak gocu 2026-09-25.
   Bu grubun ihtiyac duydugu YENI DS bilesen/varyantlari. Goc bitince asil bilesen
   dosyalarina (controls/data/feedback/navigation/workflow...) birlestirilir, bu dosya silinir.
   KURAL: yalniz os-* secici, yalniz semantik token (tokens/colors.css), sayfa sinifi YOK. */

/* ── Es-genislikli metin alani (anahtar/deger, parametre degeri) -- os-input--mono'nun textarea esi ── */
.os-textarea--mono { font-family: var(--font-mono); }

/* ── Gomulu bilgi kutusu (kart/diyalog icinde gri zeminli ozet: cihaz listesi, sonuc ozeti) ── */
.os-inset {
  padding: var(--space-3); background: var(--surface-sunken);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  font-size: var(--text-sm); color: var(--text-primary);
}

/* ── Tablo: surukle-birak ile siralama (tutamak hucresi + surukleme/birakma isaretleri) ──
   JS satira os-row--dragging / os-row--drop-before / os-row--drop-after sinifini yazar. */
.os-table td.os-cell--drag { width: 22px; padding-right: 0; color: var(--text-muted); cursor: grab; text-align: center; user-select: none; }
.os-table td.os-cell--drag:hover { color: var(--text-primary); }
.os-table tr.os-row--dragging { opacity: .35; }
.os-table tr.os-row--drop-before td { box-shadow: inset 0 2px 0 var(--interactive-primary); }
.os-table tr.os-row--drop-after td { box-shadow: inset 0 -2px 0 var(--interactive-primary); }

/* ── Sayac rozeti: sifir / etkisiz deger (os-count'un soluk tonu) ── */
.os-count--muted { background: var(--surface-sunken); color: var(--text-muted); }

/* ── Tablo: soluk satir (kaydi eksik / ikincil satir) + grup baslangici ayiraci ── */
.os-table tbody tr.os-row--groupstart td { border-top: 2px solid var(--border-default); }

/* ── Derece (rating) cipi A..G + renk kutucugu ──
   Ton olcegi iyi→kotu: A koyu yesil · B yesil · C sari · D amber · E turuncu · F kirmizi · G gri.
   Cip: <span class="os-grade os-grade--a">Derece A</span> · kutucuk: <span class="os-grade os-grade--swatch os-grade--a"></span> */
.os-grade {
  --os-grade-c: var(--text-muted);
  display: inline-block; padding: 3px 12px; border-radius: var(--radius-pill);
  background: var(--os-grade-c); color: var(--text-inverse);
  font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: 1.4;
}
.os-grade--swatch { width: 10px; height: 10px; padding: 0; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.os-grade--a { --os-grade-c: var(--status-success-fg); }
.os-grade--b { --os-grade-c: var(--status-success-solid); }
.os-grade--c { --os-grade-c: var(--chart-4); color: var(--text-primary); }  /* acik sari zeminde koyu metin (kontrast) */
.os-grade--d { --os-grade-c: var(--status-warning-solid); }
.os-grade--e { --os-grade-c: var(--status-returned-solid); }
.os-grade--f { --os-grade-c: var(--status-danger-solid); }
.os-grade--g { --os-grade-c: var(--text-muted); }

/* ── Kaydirici (input[type=range]) -- marka tonu ── */
.os-range { accent-color: var(--interactive-primary); }

/* ── Etiket kutusu (secili ogeler os-tag listesi; bos iken data-empty metni) ──
   <div class="os-tagbox" data-empty="Hic secim yok"><span class="os-tag">X<button class="os-tag__x">…</button></span></div> */
.os-tagbox {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2);
  min-height: 52px; padding: var(--space-3) 14px;
  background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
}
.os-tagbox:empty::before { content: attr(data-empty); align-self: center; color: var(--text-muted); font-size: var(--text-sm); font-style: italic; }

/* ── Agac listesi (secilebilir hiyerarsik kaynak listesi: UI kaynaklari, kategori agaci) ──
   Kap yuksekligi/kaydirma sayfanin duzenidir; gorunum burada. Secili = os-tree__item--selected. */
.os-tree { padding: var(--space-4); background: var(--surface-sunken); border-radius: var(--radius-md); }
.os-tree__item {
  display: flex; align-items: center; gap: var(--space-2); margin-bottom: 2px;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.os-tree__item:hover { background: var(--surface-selected); }
.os-tree__item--selected, .os-tree__item--selected:hover { background: var(--interactive-primary); color: var(--text-inverse); }
.os-tree__label { font-size: var(--text-md); font-weight: var(--weight-medium); }
.os-tree__sub { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); }
.os-tree__item--selected .os-tree__sub { color: var(--on-dark-faint); }
.os-tree__children { margin-left: var(--space-6); padding-left: var(--space-2); border-left: 2px solid var(--border-default); }

/* ── Tur ikonu (kucuk tonlu kare ikon: MENU / PAGE / BUTTON / FIELD / REPORT) ── */
.os-typeicon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; border-radius: var(--radius-sm);
  background: var(--surface-sunken); color: var(--text-secondary); font-size: 10px;
}
.os-typeicon--info    { background: var(--status-info-bg);    color: var(--status-info-fg); }
.os-typeicon--brand   { background: var(--surface-selected);  color: var(--text-brand); }
.os-typeicon--success { background: var(--status-success-bg); color: var(--status-success-fg); }
.os-typeicon--warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }

/* ── KPI: sikisik varyant (hesap sonucu izgarasi; deger 18px) + marka tonlu deger ── */
.os-kpi--compact { gap: 2px; }
.os-kpi--compact .os-kpi__value { font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.os-kpi__value--brand { color: var(--text-brand); }

/* ── Kilitli kart: on kosul saglanana kadar etkilesime kapali bolum (soluk + tiklanamaz).
   JS kilidi acinca sinifi kaldirir: el.classList.toggle('os-card--locked', !acik) ── */
.os-card--locked { opacity: .45; pointer-events: none; }

/* ── Rozet: suren islem (yavas nabiz) -- "CALISIYOR" durum rozeti ── */
.os-badge--pulse { animation: os-badge-pulse 1.4s ease-in-out infinite; }
@keyframes os-badge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .os-badge--pulse { animation: none; } }

/* ── Konsol / olay gunlugu: es-genislikli satir akisi, kendi kabinda kayar.
   Yukseklik sayfa duzenidir (sayfa verir). Satir tonu: os-msg--success|info|warning|danger.
   <div class="os-console"><div class="os-console__line"><span class="os-console__time">12:00:01</span> <span class="os-msg os-msg--success">...</span></div></div> */
.os-console {
  overflow-y: auto; min-width: 0;
  padding: var(--space-3) var(--space-4); background: var(--surface-sunken);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6; color: var(--text-primary);
}
.os-console__line { padding: 1px 0; overflow-wrap: anywhere; }
.os-console__time { color: var(--text-muted); }

/* ── Bicimli duz metin blogu (koşum ozeti, hata dokumu): es-genislikli, satir sonlari korunur ── */
.os-pre {
  margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-secondary);
}


/* ════════ ek-g8-rapor-pano ════════ */
/* GECICI PAKET UZANTISI (g8-rapor-pano) -- tek kaynak gocu 2026-09-25.
   Bu grubun ihtiyac duydugu YENI DS bilesen/varyantlari. Goc bitince asil bilesen
   dosyalarina (controls/data/feedback/navigation/workflow...) birlestirilir, bu dosya silinir.
   KURAL: yalniz os-* secici, yalniz semantik token (tokens/colors.css), sayfa sinifi YOK. */

/* ── Ikincil metin (kart alt basligi, sayac, aciklama satiri) ──
   Sayfalarda en sik tekrarlanan satir ici stil: "font-size:12px;color:muted".
   --xs: tablo/ızgara altı dipnot (11px). --strong: ayni olcekte vurgulu. */
.os-meta { font-size: var(--text-xs); color: var(--text-secondary); line-height: var(--leading-normal); }
.os-meta--xs { font-size: var(--text-2xs); }

/* ── Bolum ayirici: blogun ustune ince cizgi + nefes (grid icinde tam satir basligi, panel alt blogu) ── */
.os-divided { border-top: 1px solid var(--border-default); padding-top: var(--space-3); }
.os-divided--dashed { border-top-style: dashed; border-top-color: var(--border-strong); }

/* ── Buyuk ikon (bos durum / karsilama gorseli) ── */
.os-icon--xl { font-size: 32px; }

/* ── Bolum basligi (form/kart icinde alt bolum: "Musteri Bilgileri", "Bayi Bilgileri") ──
   Kart basligindan kucuk, eyebrow'dan buyuk: buyuk harf + ikon. */
.os-sectionhead {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-3); font-family: var(--font-sans);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary);
}

/* ── Yatay ayirici cizgi (<hr>): Bootstrap hr'nin opakligi/currentColor'u yerine DS kenarligi ── */
.os-rule { border: 0; border-top: 1px solid var(--border-default); opacity: 1; margin: var(--space-5) 0; }

/* ── Kart: sol aksan (form/odak paneli; os-kpi--* ile ayni dil, 3px sol kenar) ── */

/* ── Ikon karosu (bağlantı kartı / KPI basi: renkli zemin uzerinde ikon) ──
   Ton yalniz zemin + ikon rengini degistirir; boyut --sm ile 36px. */

/* ── KPI: yogun varyant (kucuk mini-KPI izgarasi, kart icinde 4-6'li) ── */
.os-kpi--compact { padding: var(--space-3); gap: 2px; }
.os-kpi--compact .os-kpi__value { font-size: var(--text-xl); }
.os-kpi--center { align-items: center; text-align: center; }

/* ── Liste satiri (aktivite / kayit akisi: ikon + baslik/alt satir + sagda zaman) ── */
.os-listrow {
  display: flex; align-items: center; gap: var(--space-3); min-width: 0;
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default);
}
.os-listrow:last-child { border-bottom: 0; }
.os-listrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.os-listrow__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); overflow-wrap: anywhere; }
.os-listrow__meta { font-size: var(--text-2xs); color: var(--text-secondary); overflow-wrap: anywhere; }
.os-listrow__side { flex: none; font-size: var(--text-2xs); color: var(--text-muted); font-feature-settings: var(--numeric-features); }

/* ── Grafik serisi rengi: lejant noktasi rengi JS'ten --series-color ile gelir (Chart.js paleti) ── */
.os-chart__dot { background: var(--series-color, var(--chart-1)); }

/* ── Ilerleme cubugu: marka tonu (oran/pay gosterimi -- durum anlami tasimayan) ── */
.os-progress__bar--brand { background: var(--interactive-primary); }
.os-progress__bar--info  { background: var(--status-info-solid); }

/* ── KPI seridi: tek kart icinde yan yana KPI hucreleri (rapor ozet bandi) ── */
/* Ayirici cizgiler 1px bosluktan gorunen kenarlik zemininden gelir: hucre kac satira
   sarilirsa sarilsin yatay/dikey cizgi eksiksiz kalir (sayfa grid-template-columns verebilir). */
.os-kpistrip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 1px;
  background: var(--border-default); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); overflow: hidden;
}
.os-kpistrip > * { background: var(--surface-card); min-width: 0; }
/* Dar hucreli serit (pano KPI bandi): telefonda da iki sutun kalir */
.os-kpistrip--tight { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
@media (max-width: 639px) {
  .os-kpistrip--tight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* tek sayida hucrede son hucre satiri doldurur -- bos (kenarlik renginde) karo kalmaz */
  .os-kpistrip--tight > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* One cikan (hero) hucre: secili-yuzey zemini */
.os-kpistrip > .os-kpi--highlight { background: var(--surface-selected); }
.os-kpi__sub { font-size: var(--text-2xs); color: var(--text-secondary); }
/* Tiklanan liste satiri (siralama listesi -> kayda gider) */
.os-listrow--link { cursor: pointer; border-radius: var(--radius-md); }
.os-listrow--link:hover { background: var(--surface-sunken); }
.os-listrow--dense { padding: var(--space-2) var(--space-2); }

/* ── Sira rozeti (siralama listesi: 1., 2., 3. ...) ── ilk uc ton farkiyla ayrisir */
.os-rank {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: var(--text-xs); font-weight: var(--weight-bold); font-feature-settings: var(--numeric-features);
  background: var(--surface-sunken); color: var(--text-secondary); border: 1px solid var(--border-default);
}
.os-rank--1 { background: var(--status-warning-bg);  color: var(--status-warning-fg);  border-color: var(--status-warning-solid); }
.os-rank--2 { background: var(--surface-selected);   color: var(--text-brand);         border-color: var(--border-focus); }
.os-rank--3 { background: var(--status-returned-bg); color: var(--status-returned-fg); border-color: var(--status-returned-solid); }

/* ── Tablo: grup basligi satiri (ayni tabloda bolumleri ayirir: "Satis", "Portfoy"...) ── */

/* ── Kart basligi damgasi: basligin sagina kucuk harfli not ("donem geneli") --
   JS data-stamp'i koyar/kaldirir; metin isaretlemede, gorunum burada. */
.os-card__title[data-stamp] { display: flex; align-items: center; }
.os-card__title[data-stamp]::after {
  content: attr(data-stamp); margin-left: auto; padding-left: var(--space-2);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* ── Derin baglanti hedefi (#rapor-x) olan kart: gelindiginde odak halkasiyla vurgulanir ── */
.os-card:target { box-shadow: var(--focus-ring); border-color: var(--border-focus); }

/* ── Secilebilir kart (rapor tipi / secenek karti): tiklanir, secili hali os-card--selected (g9) ── */
.os-card--interactive { cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
.os-card--interactive:hover { border-color: var(--border-focus); }
.os-card--interactive:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Adim numarasi (sihirbaz basligi: 1 Rapor Tipi, 2 Ayarlar ...) ── */
.os-stepnum {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--interactive-primary); color: var(--text-inverse);
  font-size: var(--text-xs); font-weight: var(--weight-bold); font-feature-settings: var(--numeric-features);
}

/* ── Uyari: notr ton (ikincil/soluk bant -- durum anlami tasimayan bilgi) ── */
.os-alert--neutral { background: var(--surface-sunken); border-color: var(--border-default); color: var(--text-secondary); }

/* ── Aralik kaydirici (input[type=range]): marka tonunda iz + beyaz tutamak ── */
.os-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; cursor: pointer;
  border-radius: var(--radius-pill); background: var(--interactive-primary); outline: none;
}
.os-range:focus-visible { box-shadow: var(--focus-ring); }
.os-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-card); border: 3px solid var(--interactive-primary); box-shadow: var(--shadow-sm); cursor: pointer;
}
.os-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-card); border: 3px solid var(--interactive-primary); box-shadow: var(--shadow-sm); cursor: pointer;
}

/* ── Kart basligi: renkli bant (zemin rengi VERIDEN gelir -- style ile; metin ters renk, kucuk kalin) ── */
.os-card__header--band {
  color: var(--text-inverse); background: var(--interactive-primary); border-bottom: 0;
  font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: 0.03em;
}

/* ══ Kabuk: sayfanin kendi basina kurdugu kabuk (topbar ana kolonun icinde, sidebar tam boy) ══
   Kaynak: rol panolari (dashboards/*.html) -- ana portal kabugunun (_sidebar/_header) DS esi.
   >=1024px sidebar kaydirmada yerinde kalir ve alt ogesi (mt-auto) dibe oturur; <1024px
   navigation.css'in kayan panel + os-tabbar davranisi aynen gecerli (bu kural devreye girmez). */
@media (min-width: 1024px) {
  .os-sidebar--sticky { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
}
/* Koyu seritte konum yolu ve rozet: on-dark tonlari (os-userbtn__role ile ayni dolgu) */
.os-topbar .os-breadcrumb { color: var(--on-dark-muted); }
.os-badge--on-dark { background: var(--on-dark-fill); color: var(--on-dark-text); }
/* Koyu seritten acilan menu (kullanici menusu) acik yuzeydedir: ters metin rengini miras almaz */
.os-topbar .os-menu { color: var(--text-primary); }

/* ── Otomatik izgara: esit karolar, sigdigi kadar sutun (bilgi karolari, baglanti kartlari) ──
   Yalniz duzen; karo gorunumu cocuktan gelir (os-tile, os-card). Aralik Bootstrap gap-* ile acilabilir. */
.os-autogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--space-2); }
/* --fit: az sayida genis kart (detay sayfasi bilgi kartlari) -- bos izler erir, kartlar satiri paylasir */
.os-autogrid--fit { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

/* ── Baglanti karti: <a> olarak cizilen kart -- link rengi/alt cizgisi yerine kart metni ── */
.os-card--link { display: block; color: var(--text-primary); font-weight: var(--weight-regular); text-decoration: none; }
.os-card--link:hover { color: var(--text-primary); text-decoration: none; }
.os-card--link:focus-visible { outline: none; box-shadow: var(--focus-ring); }


/* ════════ ek-g9-js-include ════════ */
/* GECICI PAKET UZANTISI (g9-js-include) -- tek kaynak gocu 2026-09-25.
   Bu grubun ihtiyac duydugu YENI DS bilesen/varyantlari. Goc bitince asil bilesen
   dosyalarina (controls/data/feedback/navigation/workflow...) birlestirilir, bu dosya silinir.
   KURAL: yalniz os-* secici, yalniz semantik token (tokens/colors.css), sayfa sinifi YOK. */

/* ── Toast uzantilari (notify.js) ───────────────────────── */
/* Ust katman: Bootstrap modal (z 1055) acikken de bildirim gorunur kalir. */
.os-toast-region--top-layer { z-index: 1100; }
/* Uzun mesaj (URL, hata metni) toast'u tasirmaz. */
.os-toast__msg { overflow-wrap: anywhere; }
/* Toast ici eylem baglantisi ("Bildir"): koyu zeminde okunur. */
.os-toast__action {
  display: inline-flex; align-items: center; gap: var(--space-1);
  margin-left: var(--space-2);
  color: var(--text-inverse); font-weight: var(--weight-semibold);
  text-decoration: underline; text-underline-offset: 2px;
}
.os-toast__action:hover { color: var(--on-dark-text); text-decoration: none; }
.os-toast__action:focus-visible { outline: 2px solid var(--text-inverse); outline-offset: 1px; border-radius: var(--radius-sm); }

/* ── Dialog uzantilari (confirm-dialog.js) ──────────────── */
/* Ust katman: Bootstrap modal (1055) icinden acilan onay modalin ustunde kalir; eski duzen gibi toast (1100) ustunde. */
.os-dialog-backdrop--top-layer { z-index: 1110; }
/* Uzun / cok satirli mesaj icin genis kutu. */
.os-dialog--wide { max-width: 560px; }
/* Onay govdesinin metin sutunu: baslik + mesaj + (istege bagli) tek satir girdi + hata. */
.os-dialog__confirmtext { flex: 1; min-width: 0; }
.os-dialog__confirmtext > .os-input { margin-top: var(--space-3); }
.os-dialog__confirmtext > .os-field__error { margin: var(--space-1) 0 0; }
.os-dialog__confirmtitle { margin: 0 0 2px; color: var(--text-primary); }
.os-dialog__confirmmsg { margin: 0; line-height: var(--leading-normal); }
/* Satir sonlarini koruyan mesaj (cok satirli onay metinleri). */
.os-dialog__confirmmsg--pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Ton ikonu Bootstrap Icons glifi ise boyutu: */
.os-dialog__toneicon > .bi { font-size: var(--text-lg); line-height: 1; }

/* ── Kontrol boyut varyantlari ──────────────────────────── */
.os-input--sm { height: var(--control-h-sm); padding: 0 var(--space-2); font-size: var(--text-sm); }
/* Yogun satirdaki onay kutusu (composer, filtre satiri) */
.os-check--sm { font-size: var(--text-2xs); color: var(--text-secondary); gap: var(--space-1); }
.os-check--sm .os-check__box { width: 14px; height: 14px; }

/* ── Bos durum: dar kap (yan panel, cekmece, kart ici liste) ── */
.os-empty--compact { padding: var(--space-5) var(--space-4); gap: var(--space-1); }
.os-empty--compact > .bi { font-size: 22px; }

/* ── Not karti uzantilari (sticky-notes.js) ─────────────── */
/* Genel (ozel olmayan) not: notr zemin, aksan yok. Varsayilan .os-note = sari aksan = "Otosor'a ozel". */
.os-note--plain { background: var(--surface-card); border-left-color: transparent; }
.os-note--plain + .os-note, .os-note + .os-note--plain { border-top: 1px solid var(--border-default); }
.os-note__head { flex-wrap: wrap; }
.os-note__head .os-badge { height: 18px; font-size: var(--text-2xs); }
.os-note__subject { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); margin-bottom: 2px; }
/* Satir sonlarini koruyan govde (kullanicinin yazdigi not) */
.os-note__body--pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Duzenleme formu (kart yerinde acilir) */
.os-note--edit { display: flex; flex-direction: column; gap: var(--space-2); }
.os-note__formactions { display: flex; justify-content: flex-end; gap: var(--space-2); }
/* Metin ici @bahsetme */
.os-mention {
  display: inline-block; padding: 0 5px; border-radius: var(--radius-sm);
  background: var(--surface-selected); color: var(--text-brand);
  font-weight: var(--weight-semibold); font-size: 0.92em;
}

/* ── Acilir secim listesi (autocomplete / bahsetme / kucuk menu) ─
   Konum (left/top) JS'in hesapladigi dinamik degerdir; gorunum burada. */
.os-menu {
  position: absolute; z-index: 1100;
  min-width: 240px; max-width: 320px; max-height: 240px; overflow-y: auto;
  padding: var(--space-1); background: var(--surface-card);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.os-menu__item {
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--text-primary); cursor: pointer;
}
.os-menu__item:hover, .os-menu__item--active { background: var(--surface-selected); }
/* Tek satir menu ogesi (os-tabs-more 'Diger' menusu): ikon solda sabit genislikte, sayac sagda. */
.os-menu__item--row { flex-direction: row; align-items: center; gap: var(--space-2); }
.os-menu__item--row > .bi, .os-menu__item--row > .os-menu__slot { flex: none; width: 1.1em; text-align: center; }
.os-menu__item--row > .os-tabs__count { margin-left: auto; }
.os-menu__label { font-weight: var(--weight-semibold); }
.os-menu__sub { font-size: var(--text-2xs); color: var(--text-muted); }
.os-menu__empty { padding: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); text-align: center; }

/* ── Dock: sag sutunda yapiskan, daraltilabilir yan panel (Yorumlar) ──
   Kart (.os-card) uzerine kurulur. Daraltilinca 46px dikey serit (__rail).
   <=1100px: tek sutun, daima acik (serit gizli). */
.os-docklayout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); align-items: start; }
/* Dock yan sutundaki yuvaya tasininca (talep merkezi placeNotesDock) bos kalan ikinci sutunun araligi
   icerigi 20px daraltiyordu — dock yoksa tek sutun (2026-09-30). */
.os-docklayout:not(:has(> [data-notes-dock])) { grid-template-columns: minmax(0, 1fr); }
.os-dock {
  position: sticky; top: 74px; width: 300px; max-height: calc(100vh - 98px);
  display: flex; flex-direction: column; overflow: hidden;
  transition: width var(--duration-normal) var(--ease-standard);
}
.os-dock__rail { display: none; }
.os-dock--collapsed { width: 46px; cursor: pointer; }
.os-dock--collapsed:hover { border-color: var(--border-focus); }
.os-dock--collapsed > :not(.os-dock__rail) { display: none; }
.os-dock--collapsed > .os-dock__rail {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%; padding: var(--space-3) 0 14px; border: 0; background: transparent; cursor: pointer;
}
.os-dock__icon {
  width: 26px; height: 26px; flex: none; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-selected); color: var(--text-brand); font-size: 13px;
}
.os-dock__vlabel {
  writing-mode: vertical-rl; font-size: var(--text-2xs); font-weight: var(--weight-bold);
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted);
}
.os-dock__head {
  display: flex; align-items: center; gap: var(--space-2); flex: none;
  padding: 10px 14px; border-bottom: 1px solid var(--border-default); background: var(--gray-25);
}
.os-dock__title { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-primary); }
.os-dock__count {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold); line-height: 1.5;
  padding: 0 8px; border-radius: var(--radius-pill);
  background: var(--surface-selected); color: var(--text-brand);
}
.os-dock__count--solid { background: var(--interactive-primary); color: var(--text-inverse); }
.os-dock__spacer { flex: 1; }
/* Bağlam hapı (2026-10-19): ad uzunsa hap TEK satırda kalır — "Bu kayda bağlı:" kırılmaz, ad hapın içinde "…" ile
   kısalır (tam ad title'da). Eskiden dar yan sütunda (bayi) etiket kelime kelime üç satıra kırılıyordu. */
.os-dock__ctx { padding: var(--space-2) 14px; border-bottom: 1px solid var(--border-default); background: var(--gray-25); }
.os-dock__ctxtag { max-width: 100%; min-width: 0; height: auto; min-height: 22px; border-radius: var(--radius-pill); font-size: var(--text-2xs); white-space: nowrap; overflow: hidden; }
.os-dock__ctxtag > .bi, .os-dock__ctxtag > span { flex: none; }
.os-dock__ctxtag b { min-width: 0; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-dock__composer { flex: none; padding: 10px 14px; border-bottom: 1px solid var(--border-default); }
.os-dock__input {
  height: 36px; min-height: 36px; resize: none; font-size: var(--text-sm);
  transition: height var(--duration-normal) var(--ease-standard);
}
.os-dock__input:focus, .os-dock__composer--expanded .os-dock__input { height: 68px; }
.os-dock__row { display: none; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); }
.os-dock__row > .os-check { min-width: 0; }
.os-dock__row > .os-btn { flex: none; }
.os-dock__composer--expanded .os-dock__row { display: flex; }
.os-dock__hint { color: var(--text-muted); }
.os-dock__list { flex: 1; min-height: 60px; overflow-y: auto; }
@media (max-width: 1100px) {
  .os-docklayout { grid-template-columns: minmax(0, 1fr); }
  .os-dock { position: static; width: 100% !important; max-height: none; cursor: default; }
  /* Dar ekranda dock tam genişlik: DARALT = yalnız başlık şeridi (yukarı-aşağı katlanır), yan sütundaki
     davranışla aynı (navigation.css). Önceden burada katlı dock'un bütün bölümleri yeniden açılıyordu ->
     Daralt/Genişlet dar ekranda hiçbir şey yapmıyordu (2026-10-15). */
  .os-dock--collapsed:hover { border-color: var(--border-default); }
  .os-dock--collapsed > .os-dock__rail { display: none; }
  .os-dock--collapsed > .os-dock__head { display: flex; border-bottom: 0; cursor: pointer; }
  .os-dock [data-dock-collapse] > .bi { transform: rotate(-90deg); transition: transform var(--duration-normal) var(--ease-standard); }
  .os-dock--collapsed [data-dock-collapse] > .bi { transform: rotate(90deg); }
}

/* ── FAB + yan cekmece (sayfada dock yeri yoksa Yorumlar) ── */
.os-fab {
  position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 1040;
  height: var(--control-h-lg); padding: 0 18px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
}
.os-fab__count {
  min-width: 18px; padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--text-brand);
  font-size: var(--text-2xs); font-weight: var(--weight-bold); text-align: center; line-height: 1.4;
}
.os-drawer-backdrop {
  position: fixed; inset: 0; z-index: 1041; background: var(--overlay-backdrop);
  opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-standard);
}
.os-drawer-backdrop--open { opacity: 1; pointer-events: auto; }
.os-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1042;
  width: 380px; max-width: 90vw; display: flex; flex-direction: column;
  background: var(--surface-card); box-shadow: var(--shadow-lg);
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--duration-normal) var(--ease-standard), visibility 0s linear var(--duration-normal);
}
.os-drawer--open { transform: none; visibility: visible; transition-delay: 0s; }
.os-drawer__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-4) 18px; border-bottom: 1px solid var(--border-default);
}
.os-drawer__title {
  display: flex; align-items: center; gap: var(--space-2); margin: 0;
  font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary);
}
.os-drawer__count { color: var(--text-muted); font-weight: var(--weight-regular); }
.os-drawer__form {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 18px; border-bottom: 1px solid var(--border-default); background: var(--gray-25);
}
.os-drawer__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.os-drawer__body { flex: 1; overflow-y: auto; }
@media (prefers-reduced-motion: reduce) {
  .os-drawer, .os-drawer-backdrop, .os-dock, .os-dock__input { transition: none; }
}

/* ── Alan gecmisi ikonu (etiket yaninda, field-history.js) ──
   18px satir ici tetik; degismis alanda marka tonu + sayac, degismeyende soluk. */
.os-histbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 6px; padding: 0; flex: none; vertical-align: middle;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent;
  color: var(--text-muted); font-size: 12px; line-height: 1; cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}
.os-histbtn--changed { color: var(--text-brand); background: var(--surface-selected); }
/* Alan bazli duzeltme kalemi (js/os-field-edit.js) — etiketin yaninda, gecmis ikonuyla ayni olcek (18px). */
.os-fieldpen {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex: none;
  width: 18px; height: 18px; margin-left: 6px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted); font-size: 11px; line-height: 1; cursor: pointer;
}
.os-fieldpen:hover { color: var(--text-brand); background: var(--surface-selected); }
.os-fieldpen:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Revize edilen alanin ONCEKI degeri, degerin yaninda parantez icinde (js/field-history.js). */
.os-histprev { display: inline-block; white-space: nowrap; margin-left: 6px; font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--text-muted); font-family: var(--font-sans); letter-spacing: normal; }
.os-histprev[hidden] { display: none; }
.os-histbtn--changed:hover { background: var(--blue-100); }
.os-histbtn--unchanged { opacity: .45; }
.os-histbtn--unchanged:hover { opacity: .8; background: var(--surface-sunken); }
.os-histbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.os-histbtn__count {
  position: absolute; top: -5px; right: -5px; min-width: 13px; height: 13px; padding: 0 2px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--surface-card); border-radius: var(--radius-pill);
  background: var(--interactive-primary); color: var(--text-inverse);
  font-size: 8.5px; font-weight: var(--weight-bold); line-height: 1;
}

/* ── Popover: bir ogeye bagli kucuk acilir kart (konum: kapsayici position:relative) ── */
.os-popover {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1000;
  width: 260px; max-width: 84vw;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: os-popover-in var(--duration-fast) var(--ease-standard);
}
@keyframes os-popover-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.os-popover__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: 4px 6px 4px 13px; border-bottom: 1px solid var(--border-default);
}
.os-popover__title { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--text-primary); }
.os-popover__body { padding: 10px 13px; max-height: 280px; overflow-y: auto; }
.os-popover__empty { padding: 6px 0; text-align: center; font-size: var(--text-xs); color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .os-popover { animation: none; } }

/* ── Timeline: yogun varyant (popover/cekmece ici degisiklik listesi) ── */
.os-timeline--compact::before { left: 4px; top: 4px; width: 2px; }
.os-timeline--compact .os-timeline__item { padding: 0 0 var(--space-2) 16px; }
.os-timeline--compact .os-timeline__item:last-child { padding-bottom: 0; }
.os-timeline--compact .os-timeline__dot { left: 0; top: 4px; width: 10px; height: 10px; border-width: 2px; }
/* Onceki → sonraki deger satiri */
.os-change { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.3; overflow-wrap: anywhere; }
.os-change__from { color: var(--text-muted); text-decoration: line-through; }
.os-change__arrow { margin: 0 3px; color: var(--text-brand); }
.os-change__to { color: var(--text-primary); font-weight: var(--weight-semibold); }
.os-change__new { color: var(--status-success-fg); font-weight: var(--weight-semibold); }
.os-change__action {
  padding: 0 6px; border-radius: var(--radius-pill);
  background: var(--surface-selected); color: var(--text-brand); font-weight: var(--weight-semibold);
}
/* Alan bazli grup (cekmece) */
.os-changegroup { padding: 13px 0; border-bottom: 1px solid var(--border-default); }
.os-changegroup:last-child { border-bottom: 0; }
.os-changegroup__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.os-changegroup__name { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-primary); min-width: 0; }
.os-changegroup__count {
  padding: 0 6px; border-radius: var(--radius-pill); background: var(--interactive-primary);
  color: var(--text-inverse); font-size: var(--text-2xs); font-weight: var(--weight-bold);
}
.os-changegroup__current { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-brand); white-space: nowrap; }

/* ── Cekmece uzantilari ── */
.os-drawer--top-layer { z-index: 1062; }
.os-drawer-backdrop--top-layer { z-index: 1061; }
.os-drawer__titles { min-width: 0; }
.os-drawer__sub { margin-top: 3px; font-size: var(--text-xs); color: var(--text-secondary); }
.os-drawer__filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 11px 20px; border-bottom: 1px solid var(--border-default); }
.os-drawer__body--padded { padding: 4px 20px 30px; }

/* ── Acilir liste: panel varyanti (komut cubugu sonuc paneli, kapsayicinin tam genisligi) ── */
.os-menu-host { position: relative; }
.os-menu--panel {
  top: calc(100% + 6px); left: 0; right: 0; z-index: 1300;
  min-width: 0; max-width: none; max-height: 60vh; overflow: auto;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 5px;
}
.os-menu__section {
  padding: 7px 10px 3px; font-size: var(--text-2xs); font-weight: var(--weight-bold);
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted);
}
/* Ikonlu satir: ikon + (baslik/alt) + kisayol */
.os-menu__item--row { flex-direction: row; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); text-decoration: none; }
.os-menu__item--row:hover, .os-menu__item--row.os-menu__item--active { color: var(--text-primary); }
.os-menu__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.os-menu__item--row .os-menu__label, .os-menu__item--row .os-menu__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-menu__item--row .os-menu__label { font-weight: var(--weight-regular); line-height: 1.25; }
.os-menu__label mark { padding: 0; background: transparent; color: var(--text-brand); font-weight: var(--weight-bold); }
.os-menu__icon {
  width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--text-secondary); font-size: 14px;
}
.os-menu__item--active .os-menu__icon, .os-menu__icon--brand { background: var(--interactive-primary); color: var(--text-inverse); }
.os-menu__icon--strong { background: var(--gray-800); color: var(--text-inverse); }
.os-menu__icon--danger { background: var(--status-danger-solid); color: var(--text-inverse); }
.os-menu__kbd { font-size: var(--text-2xs); color: var(--text-muted); }
.os-menu__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 8px; }
.os-menu__chip {
  padding: 5px 11px; border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--text-secondary); font-size: var(--text-xs); cursor: pointer;
}
.os-menu__chip:hover { background: var(--surface-selected); border-color: var(--border-focus); }
.os-menu__chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.os-menu__loading { display: flex; align-items: center; gap: var(--space-2); padding: 9px 12px; font-size: var(--text-xs); color: var(--text-secondary); }
/* Panel ici onay kapisi (geri alinamaz islem) */
.os-menu__confirm { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.os-menu__confirmhead { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--status-danger-fg); }
.os-menu__confirmbody {
  padding: 9px 11px; border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-sunken); color: var(--text-primary); font-size: var(--text-sm);
  line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
.os-menu__confirmactions { display: flex; gap: var(--space-2); }
.os-menu__confirmmsg { min-height: 16px; font-size: var(--text-xs); }

/* ── Durum metni (satir ici basari/hata/bilgi iletisi) ──
   Renkli ikon os-icon--*; renkli METIN bu bilesenle. */
.os-msg { overflow-wrap: anywhere; }
.os-msg > .bi { margin-right: 2px; }
.os-msg--success { color: var(--status-success-fg); }
.os-msg--danger  { color: var(--status-danger-fg); }
.os-msg--warning { color: var(--status-warning-fg); }
.os-msg--info    { color: var(--status-info-fg); }
.os-msg--brand   { color: var(--text-brand); }
.os-msg--muted   { color: var(--text-muted); }

/* ── Sayac rozeti (baslik yaninda adet: "Gecmis 12") ── */
.os-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px;
  padding: 0 7px; border-radius: var(--radius-pill);
  background: var(--surface-selected); color: var(--text-brand);
  font-size: var(--text-2xs); font-weight: var(--weight-bold); font-feature-settings: var(--numeric-features);
}
/* Kart basligi: ikon + metin + sayac tek satirda */
.os-card__title--icon { display: inline-flex; align-items: center; gap: var(--space-2); }
/* Rozet, nokta (durum isareti) olmadan: kisi/etiket adi gibi durum OLMAYAN bilgi */
.os-badge--plain::before { display: none; }

/* ── Timeline: kayit basligi satiri + govde (denetim kaydi, islem gecmisi) ── */
.os-timeline__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); min-height: 20px; }
.os-timeline__body { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* Degisiklik satiri eklentileri: alan adi, soluk not, hata tonlu eski deger */
.os-change__field { font-weight: var(--weight-bold); color: var(--text-primary); }
.os-change__muted { color: var(--text-muted); }
.os-change__from--danger { color: var(--status-danger-fg); }

/* ── Dialog: iki uclu altlik (sol: ikincil eylem, sag: iptal + onay) ── */
.os-dialog__footer--split { justify-content: space-between; flex-wrap: wrap; }
.os-dialog__title--icon { display: flex; align-items: center; gap: var(--space-2); }
/* Dar form izgarasi (diyalog ici) */
.os-formgrid--tight { gap: var(--space-3); }
/* Kimlik/kod girdisi es-genislikli yazi (sasi, motor, plaka) */
.os-input--mono { font-family: var(--font-mono); }
/* Dikkat: yasal/kritik alan (dogrulanmali) -- hata DEGIL, gozden gecir isareti */
/* Zemin BEYAZ kalir (R-40 yuzey kurali: dolu alanin ici beyaz) — isaret yalniz uyari tonlu kenarlik; kirmizi zemin
   hata gibi okunuyordu (ruhsat onayi, 2026-11-12). Kritikligi alanin ipucu metni anlatir. */
.os-input--attention { border-color: var(--status-warning-solid); }

/* ── Hasar durumu izgarasi (arac ustten gorunum + bolge x durum radyo matrisi) ──
   Tonlar: clean (temiz) · scratched (cizik/gocuk) · painted (boyali) · replaced (degisen).
   SVG bolge dolgusu [data-damage="<STATE>"] ile (sunum ozniteligini CSS ezer). */
.os-damage { display: grid; grid-template-columns: minmax(min(260px, 100%), 340px) 1fr; gap: var(--space-5); align-items: start; }
.os-damage__figure {
  display: flex; align-items: center; justify-content: center; min-height: 320px; padding: var(--space-3);
  background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  font-size: var(--text-xs); color: var(--text-muted);
}
.os-damage__grid { display: grid; row-gap: 6px; }
.os-damage__head, .os-damage__row { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 0.55fr)); align-items: center; gap: var(--space-1); }
.os-damage__head { align-items: end; padding-bottom: var(--space-1); border-bottom: 1px solid var(--border-default); }
.os-damage__colhead { text-align: center; font-size: var(--text-2xs); font-weight: var(--weight-semibold); line-height: 1.2; overflow-wrap: anywhere; }
.os-damage__label { font-size: var(--text-sm); color: var(--text-primary); }
.os-damage__cell { position: relative; display: flex; align-items: center; justify-content: center; padding: 6px 0; cursor: pointer; }
.os-damage__cell input { position: absolute; opacity: 0; pointer-events: none; }
.os-damage__dot {
  --os-damage-c: var(--border-strong);
  width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid var(--os-damage-c); background: var(--surface-card);
  transition: background var(--duration-fast) var(--ease-standard);
}
.os-damage__cell input:checked + .os-damage__dot { background: var(--os-damage-c); box-shadow: inset 0 0 0 3px var(--surface-card), 0 0 0 1.5px var(--os-damage-c); }
.os-damage__cell input:focus-visible + .os-damage__dot { box-shadow: var(--focus-ring); }
.os-damage__legend {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-3);
  padding-top: var(--space-2); border-top: 1px dashed var(--border-default); font-size: var(--text-xs);
}
.os-damage__legenditem { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.os-damage__swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid; display: inline-block; }
/* Tonlar */
.os-damage__colhead--clean { color: var(--text-muted); }
.os-damage__colhead--scratched { color: var(--status-success-fg); }
.os-damage__colhead--painted { color: var(--text-brand); }
.os-damage__colhead--replaced { color: var(--status-danger-fg); }
.os-damage__dot--scratched { --os-damage-c: var(--status-success-solid); }
.os-damage__dot--painted { --os-damage-c: var(--chart-1); }
.os-damage__dot--replaced { --os-damage-c: var(--status-danger-solid); }
.os-damage__swatch--clean { background: var(--surface-sunken); border-color: var(--border-strong); }
.os-damage__swatch--scratched { background: var(--status-success-solid); border-color: var(--status-success-fg); }
.os-damage__swatch--painted { background: var(--chart-1); border-color: var(--text-brand); }
.os-damage__swatch--replaced { background: var(--status-danger-solid); border-color: var(--status-danger-fg); }
.os-damage [data-damage] { cursor: pointer; transition: fill var(--duration-fast) var(--ease-standard); }
.os-damage [data-damage="NO_DAMAGE"] { fill: var(--surface-sunken); }
.os-damage [data-damage="SCRATCHED"] { fill: var(--status-success-solid); }
.os-damage [data-damage="PAINTED"] { fill: var(--chart-1); }
.os-damage [data-damage="REPLACED"] { fill: var(--status-danger-solid); }
/* Kilitli (geri alinabilir) ve salt-okunur durumlar */
.os-damage--locked .os-damage__cell { cursor: not-allowed; }
.os-damage--locked [data-damage], .os-damage--readonly [data-damage], .os-damage--readonly .os-damage__cell { cursor: default; }
@media (max-width: 900px) { .os-damage { grid-template-columns: 1fr; } }

/* ── Yer tutucu cipi (mesaj/sablon govdesine tiklayinca eklenen {token}) ── */
.os-tokenbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.os-token {
  display: inline-block; padding: 2px 7px; border: 0; border-radius: var(--radius-sm);
  background: var(--surface-selected); color: var(--text-brand);
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-bold);
  white-space: nowrap; cursor: pointer;
}
.os-token:hover { background: var(--blue-100); }
.os-token:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Kullanicinin yukledigi listeden gelen kolon */
.os-token--extra { background: var(--status-success-bg); color: var(--status-success-fg); }
.os-token--extra:hover { background: var(--green-100); }

/* ── Karakter sayaci (metin alani alti, saga yasli) ── */
.os-counter { margin-top: 3px; text-align: right; font-size: var(--text-2xs); color: var(--text-muted); font-feature-settings: var(--numeric-features); }
.os-counter--over { color: var(--status-danger-fg); font-weight: var(--weight-bold); }

/* ── Onizleme kutusu (gonderilecek metnin ornek hali) ── */
.os-preview {
  padding: 10px 12px; border: 1px dashed var(--border-default); border-radius: var(--radius-md);
  background: var(--gray-25); color: var(--text-primary); font-size: var(--text-sm);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ── Sozluk tablosu (terim / aciklama / ornek / kaynak) ── */
.os-dict { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.os-dict td { padding: 8px 12px; border-bottom: 1px solid var(--border-default); vertical-align: top; overflow-wrap: anywhere; }
.os-dict__desc { color: var(--text-primary); }
.os-dict__ex { font-size: var(--text-2xs); color: var(--status-success-fg); }
.os-dict__src { font-size: var(--text-2xs); color: var(--text-muted); }
.os-dict__note { padding: 10px 16px; font-size: var(--text-xs); color: var(--text-secondary); }

/* ── Acilir liste: dugme alti menu varyanti (sag kenara yasli) ── */
.os-menu-host--inline { display: inline-block; }
.os-menu--dropdown { top: calc(100% + 4px); right: 0; z-index: 200; min-width: 240px; max-height: none; }
.os-menu__item--danger, .os-menu__item--danger:hover { color: var(--status-danger-fg); }
.os-menu__sep { margin: 4px 0; border: 0; border-top: 1px solid var(--border-default); opacity: 1; }
/* Dugme icindeki acilir-ok (chevron) */
.os-btn__caret { font-size: 10px; opacity: .7; }

/* ── Durum noktasi (liste satiri basinda ton isareti) ── */
.os-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--text-muted); }
.os-dot--success { background: var(--status-success-solid); }
.os-dot--warning { background: var(--status-warning-fg); }
.os-dot--danger  { background: var(--status-danger-solid); }
.os-dot--info    { background: var(--interactive-primary); }

/* ── Ust cubuk durum cipi (entegrasyon mock/QA uyarisi) + uzerine gelince detay paneli ── */
.os-statuschip {
  position: relative; display: inline-flex; align-items: center; gap: 5px; margin-right: var(--space-2);
  padding: 4px 11px; border: 1px solid var(--yellow-100); border-radius: var(--radius-pill);
  background: var(--status-warning-bg); color: var(--status-warning-fg);
  font-size: var(--text-xs); font-weight: var(--weight-bold); cursor: pointer; user-select: none;
}
.os-statuschip__count {
  padding: 0 6px; border-radius: var(--radius-pill); background: var(--status-warning-fg); color: var(--text-inverse);
  font-size: var(--text-2xs); line-height: 16px;
}
.os-statuschip--danger { background: var(--status-danger-bg); color: var(--status-danger-fg); border-color: var(--red-100); }
.os-statuschip--danger .os-statuschip__count { background: var(--status-danger-fg); }
.os-statuschip__panel {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 1050; min-width: 250px;
  padding: var(--space-2) 0; text-align: left;
  background: var(--surface-card); color: var(--text-primary);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
}
.os-statuschip:hover .os-statuschip__panel, .os-statuschip:focus-within .os-statuschip__panel { display: block; }
.os-statuschip__panel .os-menu__section { padding: 6px 14px 3px; }
.os-statuschip__row { display: flex; align-items: center; gap: var(--space-2); padding: 4px 14px; white-space: nowrap; }
.os-statuschip__row--wrap { align-items: flex-start; max-width: 320px; white-space: normal; line-height: 1.45; color: var(--status-danger-fg); }
.os-statuschip__row--wrap .os-dot { margin-top: 5px; }
.os-statuschip__env { margin-left: auto; height: 18px; font-size: var(--text-2xs); }
.os-statuschip__foot { margin-top: 6px; padding: 7px 14px 2px; border-top: 1px solid var(--border-default); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-brand); }

/* ── Dialog katmani: sayfa modali (Bootstrap modal seviyesi) -- toast (1100) USTTE kalir ── */
.os-dialog-backdrop--raised { z-index: 1055; }
/* Ikinci seviye pencere (R-46: en fazla 2 seviye) — sayfa penceresinin (1055) USTUNDE, toast (1100) ve onayin
   (--top-layer 1110) ALTINDA: ustunde acilan ConfirmDialog tiklanabilir kalir (ruhsat onayi + kirli form Esc, 2026-11-12). */
.os-dialog-backdrop--second { z-index: 1080; }

/* ── Kart: yogun baslik + ust-etiket (kucuk harfli bolum adi) ── */
.os-card__header--compact { padding: var(--space-2) var(--space-4); }
.os-card__eyebrow {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
}

/* ── Eylem listesi (kart ici tam genislik dugme satirlari: "Diger Islemler") ── */
.os-actionlist { display: flex; flex-direction: column; }
.os-actionlist__item {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  padding: 10px var(--space-4); border: 0; border-top: 1px solid var(--border-default);
  background: transparent; color: var(--text-primary); font-size: var(--text-sm); text-align: left; cursor: pointer;
}
.os-actionlist__item:first-child { border-top: 0; }
.os-actionlist__item:hover { background: var(--surface-sunken); }
.os-actionlist__item:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.os-actionlist__item:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* ── Uyari: eylemli varyant (mesaj + sagda tek dugme; "Havuza Birak" seridi) ── */
.os-alert--action { align-items: center; flex-wrap: wrap; }
.os-alert__body { flex: 1; min-width: 0; line-height: 1.4; }
.os-alert--action > .os-alert__icon { margin-top: 0; }
.os-alert__action { flex: none; margin-left: auto; }
/* Dar ekranda metin 0 genislige ezilip harf harf sariyordu (flex:1 = taban 0): metne taban
   genislik verilir, sigmazsa dugme alt satira iner (flex-wrap). */
.os-alert--action > .os-alert__body { flex: 1 1 14rem; }

/* Alan hatasi: kendi satirinda (girdinin altinda; JS ile eklenen FieldError metni) */
.os-field__error--block { display: block; margin-top: var(--space-1); }

/* ── Parcali secici (2-4 secenekli mod anahtari: Gorsel / HTML) -- secili = aria-pressed ── */
.os-segmented { display: inline-flex; gap: 4px; padding: 3px; border-radius: var(--radius-md); background: var(--surface-sunken); }
.os-segmented__btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--weight-semibold); cursor: pointer;
}
.os-segmented__btn:hover { color: var(--text-primary); }
.os-segmented__btn[aria-pressed="true"] { background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-xs); }
.os-segmented__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Kod/kaynak metin alani (HTML, JSON) */
.os-textarea--code { min-height: 280px; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.5; }

/* ── Kart yardimcilari ── */
.os-card--clip { overflow: hidden; }
.os-card__title--sm { font-size: var(--text-sm); }

/* ── Kontrol listesi (adim kontrolleri: ikon + etiket/alt + durum rozeti) ── */
.os-checklist { padding: 0 14px; }
.os-checkitem--top { align-items: flex-start; gap: 10px; padding: 10px 0; }
.os-checkitem--top > .os-icon { margin-top: 1px; }
.os-checklist .os-checkitem__label { font-size: var(--text-sm); }
.os-checkitem--clickable { cursor: pointer; }
.os-checkitem--clickable:hover .os-checkitem__label { color: var(--text-brand); }

/* ── ReasonPicker uzantilari: kayan liste, cercevesiz (duz) mod, hiyerarsi ── */
.os-reasons--scroll { max-height: 220px; overflow: auto; padding: 2px; }
.os-reasons--flat { gap: 0; }
.os-reasons--flat > .os-reason { border-color: transparent; padding: 5px 4px; }
.os-reason--parent { font-weight: var(--weight-semibold); }
.os-reason--child { margin-left: 22px; }
/* Tek secimde alt sebep secilince kok satir etkin gorunur (yuvarlagi bos kalir). */
.os-reason--parent.is-active { border-color: var(--interactive-primary); background: var(--surface-selected); }
.os-reasons--scroll > .os-reason { font-size: var(--text-sm); color: var(--text-primary); }

/* Dialog basligi: uyari tonu (geri gonderme, iade gibi dikkat isteyen eylem) */
.os-dialog__header--warning { background: var(--status-warning-bg); }

/* Timeline: ikon tasiyan nokta (aktivite akisi) */
.os-timeline__dot--icon { left: 0; top: 1px; width: 20px; height: 20px; border: 0; display: flex; align-items: center; justify-content: center; background: var(--surface-selected); color: var(--text-brand); font-size: 10px; }

/* ── Tablo uzantilari ── */
/* Kart icindeki tablo kabi: cerceve/kose kartin, tabloya ikinci cerceve cizilmez */
.os-tablewrap--flush { border: 0; border-radius: 0; background: transparent; }
/* Satiri tiklanabilir tablo (satir = kayda git) */
.os-table--clickable tbody tr { cursor: pointer; }
.os-table--clickable tbody tr:hover td { background: var(--surface-selected); }
/* Kod/kimlik hucresi (es-genislikli, kalin) */
.os-cell--mono { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
/* Sayfalama seridi: solda bilgi, sagda gezinme (tablo alti) */
.os-pagination--bar { justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--border-default); }
.os-pagination--bar .os-pagination__info { margin-left: 0; font-size: var(--text-xs); }

/* ── Secili kart (iki/cok secenekli mod karti) ── */
.os-card--selected { border-color: var(--border-focus); background: var(--surface-selected); }
/* ── Hizli secim kutusu (form ustu oneri cipleri: "Sirket Ortaklari -- Hizli Secim") ── */
.os-quickpick { padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-sunken); }

/* ── Satır içi form (2026-10-19): liste ya da kart İÇİNDE açılan ekleme / düzenleme formu (diyalog değil).
   Düzen: .os-inlineform > .os-formsection__title ("Yeni adres" / "Adresi düzenle") + .os-formgrid (her alan
   os-field + label[for]) + .os-inlineform__actions ([Vazgeç os-btn--ghost] [Kaydet os-btn--primary], sağa yaslı,
   ikonsuz — R-10/R-16/R-17). Gri zemin düzenlenen satırı listeden ayırır. os-quickpick'ten AYRI: o, 15 yerde nötr
   kutu olarak kullanılıyor; form kalıbı kendi adını taşır. Örnek: customers/detail.html adresFormuHtml. */
.os-inlineform { padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-sunken); }
.os-inlineform__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* ── Radyo karti (2-3 secenekli tonlu secim: IZIN/YASAK, TAM/MASKELI) ──
   Tek gercek native radyo (R-40); ton secili durumda kenar + zemine yansir. */
.os-radiocard {
  flex: 1; display: flex; align-items: center; gap: var(--space-2); padding: 12px 16px;
  border: 2px solid var(--border-default); border-radius: var(--radius-md);
  color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.os-radiocard input[type="radio"] { flex: none; margin: 0; accent-color: currentColor; }
.os-radiocard input[type="radio"]:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 50%; }
.os-radiocard--success { color: var(--status-success-fg); }
.os-radiocard--warning { color: var(--status-warning-fg); }
.os-radiocard--danger  { color: var(--status-danger-fg); }
.os-radiocard--success:hover, .os-radiocard--success:has(input:checked) { border-color: var(--status-success-solid); background: var(--status-success-bg); }
.os-radiocard--warning:hover, .os-radiocard--warning:has(input:checked) { border-color: var(--status-warning-solid); background: var(--status-warning-bg); }
.os-radiocard--danger:hover,  .os-radiocard--danger:has(input:checked)  { border-color: var(--status-danger-solid); background: var(--status-danger-bg); }

/* Sayfa ustu serit (icerik kenarindan iceride; sahiplik kapisi) */
.os-alert--page { margin: var(--space-3) var(--space-5); }

/* Dialog alt basligi (baslik altinda kisa aciklama) */
.os-dialog__sub { margin-top: 2px; font-size: var(--text-xs); color: var(--text-secondary); }

/* ── Sanal kaydirma listesi / tablosu (virtual-scroll.js; konum/boyut JS'ten dinamik) ── */
.os-vlist { height: 400px; }
.os-vlist__item { box-sizing: border-box; }
.os-vtable { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-card); font-size: var(--text-sm); }
.os-vtable__head { border-bottom: 2px solid var(--border-default); background: var(--gray-50); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.os-vtable__headcell { padding: var(--space-2) var(--space-3); border-right: 1px solid var(--border-default); }
.os-vtable__headcell:last-child { border-right: 0; }
.os-vtable__scroll { height: 400px; }
.os-vtable__row { border-bottom: 1px solid var(--border-default); }
.os-vtable__row:hover { background: var(--surface-sunken); }
.os-vtable__row--clickable { cursor: pointer; }
.os-vtable__cell { padding: var(--space-2) var(--space-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: 1px solid var(--border-default); }
.os-vtable__cell:last-child { border-right: 0; }

/* ── Yukleme durumlari (loading-state.js / lazy-loader.js) ── */
/* Tam sayfa yukleme perdesi */
.os-loading-overlay--page { position: fixed; inset: 0; z-index: 1120; border-radius: 0; flex-direction: column; background: var(--surface-card); opacity: .92; }
/* Dugme islem suruyor: etiket yer tutar (genislik zipla(ma)z), ortada spinner */
.os-btn--loading { position: relative; pointer-events: none; }
.os-btn--loading .os-btn__label { visibility: hidden; }
.os-btn__spinner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; }
/* Tembel yuklenen gorsel: yuklenince yumusak gorunur */
.os-lazy { opacity: 0; transition: opacity var(--duration-normal) var(--ease-standard); }
.os-lazy--loaded { opacity: 1; }

/* Kisa vurgu (otomatik doldurulan alan): 0.5 sn uyari zemini, yumusak donus */
.os-flash { background-color: var(--status-warning-bg) !important; transition: background-color var(--duration-normal) var(--ease-standard); }

/* ── Olay listesi (kayit oynaticisi: zaman + metin + alt satir; hata/uyari tonu) ── */
.os-eventlist { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow: auto; }
.os-eventlist__item { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 4px; border-bottom: 1px solid var(--border-default); font-size: var(--text-sm); }
.os-eventlist__item:last-child { border-bottom: 0; }
.os-eventlist__item--link { cursor: pointer; }
.os-eventlist__item--link:hover { background: var(--surface-sunken); }
.os-eventlist__item--danger .os-eventlist__text { color: var(--status-danger-fg); }
.os-eventlist__item--warning .os-eventlist__text { color: var(--status-warning-fg); }
.os-eventlist__item--empty { justify-content: center; color: var(--text-muted); }
.os-eventlist__time { flex: 0 0 60px; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); }
.os-eventlist__text { flex: 1 1 200px; overflow-wrap: anywhere; }
.os-eventlist__meta { flex: 1 1 100%; font-size: var(--text-2xs); color: var(--text-muted); overflow-wrap: anywhere; }
.os-eventlist__num { display: inline-block; min-width: 20px; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); }
.os-eventlist__subhead { margin: 10px 0 4px; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }

/* ══ UCUNCU DALGA (2026-09-28) — eski ortak CSS'ten cikis (ortak JS modulleri + auth) ══ */

/* ── Yatay cubuk satiri: etiket | cubuk (os-progress) | deger (aylik tahsilat, gecikme histogrami) ──
   Kolon genislikleri --barrow-label / --barrow-value ile ayarlanabilir. Cubuk genisligi JS'ten dinamik. */
.os-barrow {
  display: grid; grid-template-columns: var(--barrow-label, 60px) minmax(0, 1fr) var(--barrow-value, 80px);
  align-items: center; gap: var(--space-2); margin-bottom: 4px; font-size: var(--text-xs);
}
.os-barrow__label { color: var(--text-secondary); font-size: var(--text-2xs); overflow-wrap: anywhere; }
.os-barrow__value { text-align: right; color: var(--text-primary); font-weight: var(--weight-semibold); font-feature-settings: var(--numeric-features); white-space: nowrap; }
/* Cubuk icinde yazi yok: --lg'nin ic etiket payi (min-width/padding) 0 degerde serit birakmasin */
.os-barrow .os-progress__bar { min-width: 0; padding-left: 0; }

/* ── Tonlu sinyal seridi (kart basligi ile sekmeler arasi karar-destek ozeti) ──
   Solda buyuk es-genislikli oran, ortada metin + alt satir, sagda cipler/aksiyon.
   Acilir detay (__detail) seridin altinda; ic tablo os-table. Ton: --danger / --success. */
.os-signalbar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: 10px var(--space-4) 10px 14px;
  border-left: 4px solid var(--border-strong); border-bottom: 1px solid var(--border-default);
  background: var(--gray-25);
}
.os-signalbar--danger  { border-left-color: var(--status-danger-solid); }
.os-signalbar--success { border-left-color: var(--status-success-solid); }
.os-signalbar__value {
  font-family: var(--font-mono); font-feature-settings: var(--numeric-features);
  font-size: 22px; font-weight: var(--weight-semibold); line-height: 1; color: var(--text-primary);
}
.os-signalbar--danger  .os-signalbar__value { color: var(--status-danger-fg); }
.os-signalbar--success .os-signalbar__value { color: var(--status-success-fg); }
.os-signalbar__text { min-width: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
.os-signalbar__sub { display: block; margin-top: 1px; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-secondary); }
.os-signalbar__aside { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.os-signalbar__detail { padding: var(--space-2) 20px 10px; border-bottom: 1px solid var(--border-default); background: var(--gray-25); }
.os-signalbar__detail .os-table tbody tr:hover { background: transparent; }
.os-signalbar__cond { width: 44%; font-weight: var(--weight-semibold); }
.os-signalbar__bar  { width: 34%; }
.os-signalbar__num  { width: 11%; text-align: right; font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; }
.os-signalbar__pct  { font-weight: var(--weight-semibold); }
@media (max-width: 760px) { .os-signalbar__aside { margin-left: 0; } }

/* ── Seffaf tiklama perdesi (acik popover disina tiklayinca kapat; gorunum yok) ── */
.os-scrim { position: fixed; inset: 0; z-index: 1090; background: transparent; }

/* ── Popover: gorunum alanina sabit (position:fixed) varyant -- konum (left/top) JS'ten dinamik.
   Form tasiyan duzeltme popover'i: govde kaydirmasiz (yukseklik icerige gore; JS yukari tasir). */
.os-popover--fixed { position: fixed; top: auto; left: auto; z-index: 1100; width: 360px; max-width: 92vw; }
/* Cok alanli duzeltme penceresi (musteri calisma bilgileri grubu, js/os-field-edit.js genis:true) */
.os-popover--fixed.os-popover--wide { width: 640px; max-height: 86vh; overflow-y: auto; }
.os-popover--fixed .os-popover__header { padding: 8px 8px 8px 14px; }
.os-popover--fixed .os-popover__title { font-size: var(--text-sm); }
.os-popover--fixed .os-popover__body { max-height: none; overflow: visible; padding: 12px 14px 14px; }
/* Basliktan suruklenir (js/os-popover.js); baslikdaki dugmeler normal imlec. */
.os-popover--fixed .os-popover__header { cursor: move; user-select: none; touch-action: none; }
.os-popover--fixed .os-popover__header button { cursor: pointer; }
.os-popover--dragging { opacity: .96; }

/* ── Mod seridi: gorunum alaninin ustune sabit (Yetki Modu / Test Modu) ──
   Ikisi birlikte aciksa DOM'da sonra gelen alta kayar. Sayfa ofseti body durum sinifindan. */
.os-modebar--fixed {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  min-height: 42px; justify-content: space-between; flex-wrap: wrap;
  font-size: var(--text-sm); box-shadow: var(--shadow-sm);
}
.os-modebar--fixed:not([hidden]) ~ .os-modebar--fixed { top: 42px; }

/* ── Dugme: bilgi tonu (outline) + basili/acik durum (aria-pressed) -- mod anahtari ──
   Yetki Modu os-btn--danger, Test Modu os-btn--info; acikken dolgu. */
.os-btn--info { background: var(--surface-card); color: var(--status-info-fg); border-color: var(--cyan-100); }
.os-btn--info:hover:not(:disabled) { background: var(--status-info-bg); border-color: var(--status-info-solid); }
.os-btn--info[aria-pressed="true"] { background: var(--status-info-solid); border-color: var(--status-info-solid); color: var(--text-inverse); }
.os-btn--danger[aria-pressed="true"] { background: var(--status-danger-solid); border-color: var(--status-danger-solid); color: var(--text-inverse); }
.os-btn--info[aria-pressed="true"]:hover:not(:disabled) { background: var(--status-info-fg); }
.os-btn--danger[aria-pressed="true"]:hover:not(:disabled) { background: var(--red-600); }

/* ── Acilir liste uzantilari: sag-tik baglam menusu ──
   Ust katman (mod seridinin ve kenar cubugun ustunde), baslik satiri, tonlu kalemler. */
.os-menu.os-menu--top-layer { z-index: 10001; }
.os-menu__head {
  display: flex; align-items: center; gap: var(--space-2); min-width: 0;
  padding: 8px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border-default);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); overflow-wrap: anywhere;
}
.os-menu__item--success, .os-menu__item--success:hover { color: var(--status-success-fg); }
.os-menu__item--warning, .os-menu__item--warning:hover { color: var(--status-warning-fg); }

/* ── Secim listesi (coklu secim: rol / kullanici) -- kayan, cerceveli; secili satir --selected ── */
.os-picklist {
  max-height: 200px; overflow-y: auto;
  border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card);
}
.os-picklist__item {
  display: flex; align-items: center; gap: var(--space-3); padding: 10px 14px;
  border-bottom: 1px solid var(--border-default); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
/* Ogenin <button> olarak kullanimi (arama sonucu secimi): tarayici dugme gorunumu sifirlanir */
button.os-picklist__item {
  width: 100%; margin: 0; border-width: 0 0 1px; background: transparent;
  font: inherit; color: inherit; text-align: left;
}
button.os-picklist__item:focus-visible { outline: 2px solid var(--interactive-primary); outline-offset: -2px; }
.os-picklist__item:last-child { border-bottom: 0; }
.os-picklist__item:hover { background: var(--surface-sunken); }
.os-picklist__item--selected, .os-picklist__item--selected:hover { background: var(--surface-selected); box-shadow: inset 3px 0 0 var(--interactive-primary); }
.os-picklist__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.os-picklist__name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); overflow-wrap: anywhere; }
.os-picklist__meta { font-size: var(--text-xs); color: var(--text-secondary); overflow-wrap: anywhere; }
.os-picklist__check { display: none; flex: none; font-size: 18px; color: var(--status-success-fg); }
.os-picklist__item--selected .os-picklist__check { display: block; }

/* ── Liste satiri: yururlukte olmayan kayit (soluk; eylem dugmesi tam opak) ── */
.os-listrow--muted { background: var(--gray-25); }
.os-listrow--muted > :not(.os-iconbtn) { opacity: .62; }

/* ── Dikey yigin: cocuklar arasinda esit bosluk (Bootstrap yuklenmeyen oturumsuz sayfalar) ── */
.os-stack { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.os-stack--lg { gap: var(--space-6); }
.os-stack--xs { gap: var(--space-1); }   /* sıkı yığın: bulkbar sayaç + toplam gibi iki satırlık bloklar */
.os-stack--sm { gap: var(--space-2); }   /* orta yığın: pencere içi alan grupları, kart listeleri */
.os-stack > .os-stack__start { align-self: flex-start; }

/* ── Girdi eki: tiklanabilir (sifre goster/gizle) -- os-inputgroup__affix--end ile ── */
.os-inputgroup__affix--action {
  pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center;
  padding: 2px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted);
}
.os-inputgroup__affix--action:hover { color: var(--text-primary); }
.os-inputgroup__affix > svg { display: block; }
/* Buyuk girdi grubu (os-input--lg ile): ek konumu ve girdi ic boslugu buyur */
.os-inputgroup--lg > .os-inputgroup__affix { left: var(--space-4); }
.os-inputgroup--lg > .os-inputgroup__affix--end { left: auto; right: var(--space-4); }
.os-inputgroup--lg > .os-input--affix-start { padding-left: 42px; }
.os-inputgroup--lg > .os-input--affix-end { padding-right: 42px; }

/* ── Oturumsuz kimlik sayfasi (giris / parola sifirlama / MFA): ortalanmis logo + kart ── */
.os-authpage {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px var(--space-4); background: var(--surface-page);
}
.os-authpage__logo { display: flex; justify-content: center; margin-bottom: var(--space-6); }
.os-authpage__logo img { display: block; height: 72px; width: auto; max-width: 100%; }
.os-authpage__logo--sm { margin-bottom: 0; }
.os-authpage__logo--sm img { height: 56px; }
.os-authpage__card { width: 100%; max-width: 420px; overflow: hidden; box-shadow: var(--shadow-md); }
.os-authpage__card--wide { max-width: 480px; }
.os-authpage__card > .os-card__body { padding: var(--space-8); }
.os-authpage__hint { text-align: center; }
.os-authpage__options { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-sm); }
.os-authpage__options--split { justify-content: space-between; }
.os-authpage__link { color: var(--text-primary); }
@media (max-width: 480px) { .os-authpage__card > .os-card__body { padding: var(--space-5); } }

/* ── Oturumsuz bolunmus giris ekrani (anlasmali galeri): ust logo seridi + sol form + sag marka paneli ──
   Sag panel os-brandpanel ile (koyu zemin + filigran) cagrilir; __decor ust-sag dekor gorseli. */
.os-authsplit { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface-card); color: var(--text-primary); }
.os-authsplit__header {
  display: flex; align-items: center; height: 89px; padding: 0 80px;
  background: var(--surface-card); border-bottom: 1px solid var(--border-default);
}
.os-authsplit__header img { display: block; height: 32px; width: auto; }
.os-authsplit__main { flex: 1; display: grid; grid-template-columns: 0.4fr 0.6fr; min-height: 755px; }
.os-authsplit__form { align-self: start; padding: 180px 80px 40px; min-width: 0; }
.os-authsplit__title { margin: 0; font-size: 36px; line-height: 48px; font-weight: var(--weight-bold); }
.os-authsplit__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; padding: 80px; min-width: 0; isolation: isolate; }
.os-authsplit__decor { position: absolute; top: 0; right: 0; width: 600px; max-width: 100%; height: auto; z-index: -1; pointer-events: none; user-select: none; object-fit: contain; }
.os-authsplit__promo { max-width: 920px; display: flex; flex-direction: column; gap: 12px; }
.os-authsplit__promotitle { font-size: 28px; line-height: 40px; font-weight: var(--weight-bold); color: var(--text-inverse); }
.os-authsplit__promosub { font-size: var(--text-sm); line-height: 20px; color: var(--on-dark-muted); margin-bottom: var(--space-6); }
.os-authsplit__cards { width: 100%; max-width: 920px; display: grid; grid-template-columns: repeat(3, minmax(min(260px, 100%), 1fr)); gap: 24px; }
@media (max-width: 1024px) {
  .os-authsplit__header { padding: 0 var(--space-6); }
  .os-authsplit__main { grid-template-columns: 1fr; }
  .os-authsplit__form { padding: 40px var(--space-6); }
  .os-authsplit__aside { align-items: center; text-align: center; padding: 40px var(--space-6); }
  .os-authsplit__cards { grid-template-columns: 1fr; }
}

/* ── Video karti (koyu zeminde oynat simgeli dikey gorsel + baslik) ──
   Gorsel --media-img ozel ozelligiyle verilir: style="--media-img: url('...')" (icerik verisi). */
.os-videocard {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
  border: 1.6px solid var(--text-inverse); border-radius: var(--radius-lg); color: var(--text-inverse);
  transition: transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
}
.os-videocard:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.os-videocard__media {
  width: 100%; aspect-ratio: 9 / 16; display: grid; place-items: center;
  background: var(--media-img, none) center / cover no-repeat, var(--blue-800);
}
.os-videocard__play { width: 56px; height: 56px; filter: drop-shadow(var(--shadow-md)); }
.os-videocard__title { padding: 12px 10px 14px; text-align: center; font-size: 15px; font-weight: var(--weight-semibold); color: var(--text-inverse); }

/* ── KPI seridi: yogun hucre (8+ kucuk metrik tek satirda; 180px esigi 6+2 kiriyordu) ── */
.os-kpistrip--dense { grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); }

/* ══════════════════════════════════════════════════════════════════════════
   PORTAL KABUGU (3. dalga, 2026-09-28) -- includes/_sidebar|_header|_footer|_scripts
   + js/bug-report.js. Eski layout.css / v4c-mono.css / os-portal.css kabuk
   kurallarinin TEK tanimi. Olculer eski HESAPLANMIS degerlerle ayni tutuldu
   (kenar cubugu 240/68px, menu satiri 30px, marka 56px, sayfa dolgusu 28/32/60...).
   --sw / --sw-collapsed: sayfalarin sabit alt cubuklari da (form-footer, bulkBar)
   okuyor; js/os-sidebar-resize.js --sw'yi <html>'e yazar. Varsayilan burada.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Kenar cubugu: sabit sol panel (masaustu) / kayan panel (<=1023, DS) ── */
.os-sidebar--fixed { display: flex; flex-direction: column; }
@media (min-width: 1024px) {
  .os-sidebar--fixed {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 30;
    width: var(--sw, 240px); overflow: hidden;
    transition: width .22s cubic-bezier(.4, 0, .2, 1);
  }
  .os-sidebar--fixed.os-sidebar--collapsed {
    width: var(--sw-collapsed, 68px); padding: var(--space-4) 10px; overflow: visible;
  }
}
/* Yetki / Test modu / "kullanici olarak gir" bandi (admin-mode.js, test-mode.js,
   _scripts.html body durum siniflari) kabugu asagi iter -- admin-mode.css'teki
   .sidebar kurallarinin karsiligi. */
.admin-mode .os-sidebar--fixed,
.test-mode .os-sidebar--fixed,
.impersonating .os-sidebar--fixed { margin-top: 50px; height: calc(100vh - 50px); }
.admin-mode.test-mode .os-sidebar--fixed { margin-top: 92px; height: calc(100vh - 92px); }
/* Suruklerken gecis kapali (os-sidebar-resize.js <html>'e yazar). */
.os-resizing, .os-resizing body { cursor: col-resize; user-select: none; }
.os-resizing .os-sidebar--fixed, .os-resizing .os-main { transition: none; }
/* Kayan panel acikken sayfa kaymaz (eski body.sidebar-open). */
@media (max-width: 1023px) {
  body:has(> .os-sidebar--fixed[data-open]) { overflow: hidden; }
}

/* Marka */
.os-sidebar__brand {
  display: flex; align-items: center; gap: 10px; flex: none;
  height: 56px; padding: 4px 6px 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border-default);
}
.os-sidebar__logo {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1);
  flex: none; width: 128px; margin: 0 auto; overflow: hidden; text-decoration: none;
}
.os-sidebar__logo:hover { text-decoration: none; }
.os-sidebar__logo > img { display: block; width: 128px; height: 33px; }
.os-sidebar__mark { display: none; align-items: center; justify-content: center; }   /* yalnız daraltılmış halde görünür */
.os-sidebar__mark > img { display: block; width: 32px; height: 33px; }
.os-sidebar__logosub {
  width: 128px; text-align: center; line-height: 1;
  font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-secondary);
}

/* Yeni kayit dugmesi (sayfaya gore JS acar) */
.os-sidebar__compose { flex: none; padding: var(--space-4) var(--space-4) 21px; margin-bottom: var(--space-2); }
.os-sidebar__cta {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; margin-bottom: var(--space-4);
  background: var(--surface-card); color: var(--text-primary);
  border: 1px solid var(--text-primary); border-radius: 12px; box-shadow: var(--shadow-xs);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.5;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.os-sidebar__cta:hover { background: var(--surface-page); box-shadow: var(--shadow-sm); color: var(--text-primary); text-decoration: none; }
.os-sidebar__cta:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.os-sidebar__cta > .bi { flex: none; font-size: 16px; color: var(--text-primary); }
.os-sidebar__cta > .os-sidebar__label { flex: 1 1 0%; text-align: left; }
/* Daraltilinca gizlenen metin (CTA, "Daralt") */
.os-sidebar__label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Yetki/yetki modu kurallari uygulanana kadar menu gorunmez (titreme onleme, 2026-10-26);
   JS acamazsa 3 sn sonra kendiliginden gorunur — fail-open, menu asla kilitli kalmaz. */
.os-sidenav[data-perm-pending] { visibility: hidden; animation: os-perm-reveal 0s linear 3s forwards; }
@keyframes os-perm-reveal { to { visibility: visible; } }

/* Menu listesi: kendi icinde kayar (marka ustte, "Daralt" tabanda sabit kalir) */
.os-sidenav--scroll {
  flex: 1 1 0%; min-height: 0; overflow-y: auto; margin: 0; padding: 0; list-style: none;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.os-sidenav--scroll::-webkit-scrollbar { width: 6px; }
.os-sidenav--scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); }
.os-sidenav--scroll::-webkit-scrollbar-track { background: transparent; }
/* Yogun satir: 30px menu satiri (portal olcusu) */
.os-sidenav--dense li { margin: 2px var(--space-2); list-style: none; }
.os-sidenav--dense .os-sidenav__item { position: relative; min-width: 0; gap: 10px; padding: 5px 11px; font-size: var(--text-sm); line-height: 1.5; }
.os-sidenav--dense .os-sidenav__item > .bi:first-child {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 18px; height: 20px; margin-right: var(--space-3); font-size: 15px; line-height: 1.5; color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-standard);
}
.os-sidenav--dense .os-sidenav__item:hover > .bi:first-child { color: var(--text-primary); }
.os-sidenav--dense .os-sidenav__item--active > .bi:first-child { color: var(--text-brand); }
.os-sidenav__label { flex: 1 1 0%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* (0,3,0): eski .sidebar-menu > li > a > span:not(.badge) {flex:1} kurali (0,2,3) sayaci da buyutmesin. */
.os-sidenav--dense .os-sidenav__item > .os-sidenav__count,
.os-sidenav__count {
  display: inline-flex; flex: none; padding: 1px 5px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 10px; font-weight: var(--weight-medium); line-height: 1; letter-spacing: .02em;
  color: var(--text-muted);
}
.os-sidenav__item--active .os-sidenav__count { color: var(--text-brand); font-weight: var(--weight-semibold); background: var(--blue-100); }
/* (0,3,0): eski .sidebar-menu a i {font-size:16px} kurali (0,1,2) oku buyutmesin. */
.os-sidenav--dense .os-sidenav__item > .os-sidenav__caret,
.os-sidenav__caret {
  display: flex; height: 20px; align-items: center; justify-content: center; flex: none;
  width: 20px; margin-left: auto; margin-right: var(--space-3); font-size: 11px; line-height: 1.5; color: var(--text-muted);
  transition: transform .15s var(--ease-standard);
}
/* Alt menu grubu (li.os-sidenav__branch); acik durum JS: OtosorApp.setMenuBranchOpen */
.os-sidenav__branch--open > .os-sidenav__item--parent .os-sidenav__caret { transform: rotate(180deg); }
.os-sidenav__submenu { display: none; margin: 0; padding: 4px 0 4px 20px; list-style: none; overflow: hidden; }
.os-sidenav__branch--open > .os-sidenav__submenu { display: block; }
.os-sidenav__submenu a {
  display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.5;
  color: var(--text-secondary); text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.os-sidenav__submenu a:hover { background: var(--gray-50); color: var(--text-primary); text-decoration: none; }
.os-sidenav__submenu a.os-sidenav__item--active { background: var(--surface-selected); color: var(--text-brand); }
/* Alt menü grubu (Ayarlar, 2026-10-26) — açılır/kapanır. Başlık satırı (li.os-sidenav__subhead) bir düğme taşır;
   grubun bağlantıları başlığın ardındaki kardeş <li>'lerdir (yetki servisi li/a'yı gizlediği için iç içe <ul> kurulmadı).
   Durum JS: _scripts.html menuGruplari() — kapalı grubun satırlarına --collapsed yazar; bulunulan sayfanın grubu açık gelir.
   Grubundaki bağlantıların hepsi yetkiyle gizlenince başlık `hidden` olur (menuAltBasliklari). */
.os-sidenav__subhead { list-style: none; margin: 0; padding: 0; }
.os-sidenav__subhead[hidden] { display: none; }
.os-sidenav__subtoggle {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; margin: 0;
  padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent;
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.5; text-align: left;
  color: var(--text-primary); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.os-sidenav__subtoggle:hover { background: var(--gray-50); }
.os-sidenav__subtoggle:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.os-sidenav__subtoggle > .bi { margin-left: auto; flex: none; font-size: 11px; color: var(--text-muted); transition: transform .15s var(--ease-standard); }
.os-sidenav__subtoggle[aria-expanded="true"] > .bi { transform: rotate(180deg); }
/* Grubun satırları: başlığın altında sol kılavuz çizgisiyle girintili */
.os-sidenav__submenu > .os-sidenav__groupitem { margin-left: var(--space-2); border-left: 1px solid var(--border-default); }
.os-sidenav__submenu > .os-sidenav__groupitem > a { padding-left: var(--space-2); }
.os-sidenav__submenu > .os-sidenav__groupitem--collapsed { display: none; }

/* Daraltilmis hal (yalniz masaustu; <=1023 kabuk kayan panele doner) */
@media (min-width: 1024px) {
  .os-sidebar--collapsed .os-sidebar__brand { padding: 0 var(--space-2); justify-content: center; }
  .os-sidebar--collapsed .os-sidebar__logo { display: none; }
  /* 2026-10-26: daraltılmış halde logo gizleniyor, marka alanı boş kalıyordu — yerine işaret (mark) görünür */
  .os-sidebar--collapsed .os-sidebar__mark { display: flex; }
  /* Liste dikeyde kendi içinde kayar; overflow-y:auto yatayı da 'auto' yapar ve 68px'lik dar sütunda 2px'lik
     taşma Windows'ta altta ◀ ▶ kaydırma çubuğu çiziyordu. Dar halde yatay kaydırma kapalı. */
  .os-sidebar--collapsed .os-sidenav--scroll { overflow-x: hidden; }
  /* Sayaç (ör. İş Listesi) dar halde ikonun yanına dizilip sütundan taşıyor, "342" kesiliyordu — ikonun sağ üst
     köşesinde küçük rozet olur. (0,4,0): açık haldeki (0,3,0) yoğun satır kuralını ezer. */
  .os-sidebar--collapsed .os-sidenav--dense .os-sidenav__item > .os-sidenav__count {
    position: absolute; top: -5px; right: -7px; min-width: 16px; padding: 2px 3px; justify-content: center;
    border-radius: var(--radius-pill); background: var(--interactive-primary); color: var(--text-inverse);
    font-size: 9px; font-weight: var(--weight-semibold); pointer-events: none;
  }
  .os-sidebar--collapsed .os-sidebar__compose { display: flex; justify-content: center; padding: var(--space-3) var(--space-2); margin-bottom: var(--space-1); }
  .os-sidebar--collapsed .os-sidebar__cta { flex: none; width: 40px; height: 40px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; }
  .os-sidebar--collapsed .os-sidebar__label { display: none; }
  .os-sidebar--collapsed .os-sidenav--dense .os-sidenav__item { justify-content: center; padding: 10px 0; }
  .os-sidebar--collapsed .os-sidenav--dense .os-sidenav__item > .bi:first-child { margin-right: 0; }
  .os-sidebar--collapsed .os-sidenav__label,
  .os-sidebar--collapsed .os-sidenav__caret,
  .os-sidebar--collapsed .os-sidenav--dense .os-sidenav__item > .os-sidenav__caret { display: none; }
  .os-sidebar--collapsed .os-sidenav__item:hover { background: var(--surface-selected); }
  .os-sidebar--collapsed .os-sidenav__item--active { box-shadow: inset 0 0 0 1px var(--interactive-primary); }
  /* Alt menu: tiklayinca acilan yuzen panel (konum JS: left/top satir ici, dinamik) */
  .os-sidebar--collapsed .os-sidenav__branch { position: relative; }
  .os-sidebar--collapsed .os-sidenav__branch > .os-sidenav__submenu { display: none; }
  .os-sidebar--collapsed .os-sidenav__branch--flyout > .os-sidenav__submenu {
    display: block; position: fixed; z-index: 9999; min-width: 220px; margin: 0; padding: 0;
    background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    /* 2026-10-26: uzun alt menü (Araçlar, 29 öğe) ekrana sığmıyordu — panel ekranla sınırlı, içinde kayar
       (üst konumu _scripts.html ekrana sığacak şekilde kenetler). */
    max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain;
  }
  /* Katman: menü (fixed, z 30) kendi katman kutusunu kurar; paneldeki z-index 9999 onu aşamıyor, üst çubuk (z 50)
     ve görüşme çubuğu (z 40) panelin ÜSTÜNE çıkıyordu. Alt menü açıkken menü, çubukların üstüne alınır
     (diyalog katmanının — 1055 — altında kalır). */
  .os-sidebar--collapsed:has(.os-sidenav__branch--flyout) { z-index: 1040; }
  .os-sidebar--collapsed .os-sidenav__branch--flyout > .os-sidenav__submenu::before {
    content: attr(data-flyout-title); display: block; padding: var(--space-2) 14px;
    border-bottom: 1px solid var(--border-default);
    position: sticky; top: 0; z-index: 1; background: var(--surface-card);   /* panel kayarken başlık üstte kalır */
    font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .03em; text-transform: uppercase;
    color: var(--text-secondary);
  }
  .os-sidebar--collapsed .os-sidenav__branch--flyout > .os-sidenav__submenu > li { margin: 0; }
  .os-sidebar--collapsed .os-sidenav__branch--flyout > .os-sidenav__submenu .os-sidenav__subtoggle { padding: 9px 14px; white-space: nowrap; }
  .os-sidebar--collapsed .os-sidenav__branch--flyout > .os-sidenav__submenu > .os-sidenav__groupitem { margin-left: 14px; }
  .os-sidebar--collapsed .os-sidenav__branch--flyout > .os-sidenav__submenu a { padding: 9px 14px; font-weight: var(--weight-medium); white-space: nowrap; }
  .os-sidebar--collapsed .os-sidenav__branch--flyout > .os-sidenav__submenu a:hover { background: var(--surface-selected); color: var(--text-brand); }
}

/* Taban: "Daralt" dugmesi */
.os-sidebar__footer { flex: none; margin-top: auto; padding: var(--space-3) var(--space-3) var(--space-2); border-top: 1px solid var(--border-default); }
.os-sidebar__collapse {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-lg);
  background: transparent; color: var(--text-muted); cursor: pointer;
  font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1.5; text-align: left;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.os-sidebar__collapse:hover { background: var(--surface-page); color: var(--text-primary); }
.os-sidebar__collapse:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.os-sidebar__collapse > .bi { flex: none; width: 18px; font-size: 14px; }
.os-sidebar__collapse > .os-sidebar__label { flex: 1 1 0%; }
/* Kayan panelde (<=992) daraltma calismaz (toggleSidebarCollapse) -- dugme gizli */
@media (max-width: 992px) { .os-sidebar__footer { display: none; } }
@media (min-width: 1024px) {
  .os-sidebar--collapsed .os-sidebar__collapse { justify-content: center; padding: 9px 0; }
  .os-sidebar--collapsed .os-sidebar__collapse > .bi { transform: rotate(180deg); }
}

/* Genislik tutamagi (role=separator; klavye ile de calisir). Paket kapsami disi,
   kullanici karariyla portalde. 6px yakalama alani, ince gorunen cizgi. */
.os-sidebar__resizer {
  position: absolute; top: 0; right: 0; z-index: 31; width: 6px; height: 100%;
  padding: 0; border: 0; background: transparent; cursor: col-resize;
}
.os-sidebar__resizer::before {
  content: ""; position: absolute; inset: 0 2px; border-radius: 2px; background: transparent;
  transition: background var(--duration-fast) var(--ease-standard);
}
.os-sidebar__resizer:hover::before,
.os-sidebar__resizer:focus-visible::before,
.os-resizing .os-sidebar__resizer::before { background: var(--interactive-primary); }
.os-sidebar__resizer:focus-visible { outline: none; }
.os-sidebar--collapsed .os-sidebar__resizer { display: none; }
@media (max-width: 1023px) { .os-sidebar__resizer { display: none; } }

/* TabBar ikonu glif (DS svg varsayiyor) -- os-portal.css'teki kuralin karsiligi */
@media (max-width: 1023px) {
  .os-tabbar__item i[class*="bi-"] { font-size: 18px; line-height: 1; }
}

/* ── Ust cubuk ogeleri ──────────────────────────────────────────────────── */
/* Sol kume: hamburger + arama kutusu (eski .topbar-left) */
.os-topbar__start { display: flex; align-items: center; gap: var(--space-4); flex: 0 1 auto; min-width: 0; }
/* Arama kutusu __start ICINDE: DS kutusu container-type:inline-size tasidigi icin kendi
   icerik genisligi 0'dir -- genislik acikca verilir (eski .topbar-search 460px). */
.os-topbar__start > .os-topbar__search { width: 460px; max-width: 100%; }
@media (max-width: 1100px) {
  .os-topbar--searchable .os-topbar__start { flex: 1 1 100%; }
  .os-topbar--searchable .os-topbar__start > .os-topbar__search { width: auto; }
}
/* Hamburger: yalniz kabuk kayan panele dondugunde (<=1023) gorunur */
.os-topbar__menubtn { display: none; }
/* <1024px menu TEK yerden acilir: alt serit (os-tabbar) "Menu" ogesi. Ust bardaki hamburger ikinci bir
   giris noktasiydi (kullanici 2026-09-30: "iki yerden de sidebar acilmamali"). Yalniz alt seridi OLMAYAN
   bir sayfada gorunur — menusuz sayfa kalmasin. */
@media (max-width: 1023px) { body:not(:has(.os-tabbar)) .os-topbar__menubtn { display: inline-flex; } }
/* Mod bandi acikken yapiskan cubuk bandin altina iner (admin-mode.css .top-header karsiligi) */
.admin-mode .os-topbar, .test-mode .os-topbar { top: 50px; }
.admin-mode.test-mode .os-topbar { top: 92px; }
/* Profil dugmesindeki ok */
.os-userbtn__caret { flex: none; font-size: 11px; }

/* Acilir panel: sag kenara yasli + genis panel (bildirim menusu) */
.os-popover--end { left: auto; right: 0; }
.os-popover--panel {
  width: 360px; max-width: calc(100vw - 32px); overflow: hidden;
  color: var(--text-primary); font-size: var(--text-sm); line-height: 1.5;
}
.os-popover--panel .os-popover__header { padding: var(--space-3) var(--space-4); background: var(--surface-page); }
.os-popover--panel .os-popover__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.os-popover__actions { display: flex; align-items: center; gap: 2px; }
.os-popover__body--flush { padding: 0; max-height: 380px; }
.os-popover__footer {
  padding: var(--space-2) var(--space-3); border-top: 1px solid var(--border-default);
  background: var(--surface-page); text-align: center;
}
.os-popover__footer a { display: block; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-brand); text-decoration: none; }
.os-popover__footer a:hover { text-decoration: underline; }
/* Mobil: panel ekrana sabitlenir; ust kenar --nd-top (_header.html acilista olcer) */
@media (max-width: 639px) {
  .os-popover--panel { position: fixed; inset: var(--nd-top, 72px) 16px auto 16px; width: auto; max-width: none; }
}
/* Koyu ust cubuk ICINDEKI acik yuzey: ikon dugmeleri acik yuzey kuralina doner.
   Onceden .os-topbar .os-iconbtn beyaz ikonu bildirim panelinde beyaz zemine dusuruyordu. */
.os-topbar .os-popover .os-iconbtn { color: var(--text-secondary); }
.os-topbar .os-popover .os-iconbtn:hover { background: var(--surface-sunken); color: var(--text-primary); }
.os-topbar .os-popover .os-iconbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Ayni ters-cevirme ikonlar icin (controls.css .os-topbar .os-icon--*): acik panelde acik yuzey tonlari */
.os-topbar .os-popover .os-icon--muted, .os-topbar .os-menu .os-icon--muted { color: var(--text-muted); }
.os-topbar .os-popover .os-icon--danger, .os-topbar .os-menu .os-icon--danger { color: var(--status-danger-fg); }

/* Acilir liste: <ul>/<li> ile kurulan menu (kullanici menusu) */
.os-menu--list { margin: 0; list-style: none; color: var(--text-primary); line-height: 1.5; }
.os-menu--list > li { list-style: none; }
.os-menu--list .os-menu__item--row { color: var(--text-primary); }
.os-menu--list .os-menu__item--row:hover,
.os-menu--list .os-menu__item--row:focus-visible { color: var(--text-primary); text-decoration: none; background: var(--surface-selected); outline: none; }
/* Dugme uzerinde kurulan menu ogesi */
.os-menu__item--button { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; }
/* Menu satirinda yalin ikon (kutusuz) */
.os-menu__glyph { flex: none; width: 20px; font-size: 14px; color: var(--text-muted); }
.os-menu__item--danger .os-menu__glyph { color: inherit; }
.os-menu__item--danger:hover { background: var(--status-danger-bg); }
/* Tetikleyicinin USTUNE acilan menu (diyalog alt cubugu) */
.os-menu--up { top: auto; bottom: calc(100% + 6px); left: 0; z-index: 10; min-width: 250px; max-height: none; }

/* Liste satiri baglanti olarak (bildirim ogesi) + iki satirla sinirli baslik */
.os-listrow--anchor { color: var(--text-primary); text-decoration: none; cursor: pointer; }
.os-listrow--anchor:hover { color: var(--text-primary); text-decoration: none; background: var(--surface-page); }
.os-listrow--anchor:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.os-listrow__title--clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Durum noktasi: nabiz (kayit suruyor) */
.os-dot--pulse { animation: os-pulse 1.4s infinite; }
@keyframes os-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .os-dot--pulse { animation: none; } }

/* ── Oturum kaydi gostergesi (os-recpill) ogeleri -- bug-report.js ──────── */
.os-recpill[data-state="hidden"] { display: none; }
.os-recpill[data-state="recording"] { box-shadow: inset 0 0 0 1px var(--status-danger-on-dark); }
.os-recpill[data-state="ready"] .os-recpill__dot { background: var(--on-dark-faint); }
.os-recpill[data-state="recording"] .os-recpill__dot { animation: os-pulse 1.4s infinite; }
.os-recpill__label { font-weight: var(--weight-medium); white-space: nowrap; }
.os-recpill[data-state="recording"] .os-recpill__label {
  font-size: 10px; font-weight: var(--weight-bold); letter-spacing: .06em; color: var(--status-danger-on-dark);
}
.os-recpill__timer { min-width: 40px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.os-recpill__fb { display: none; align-items: center; gap: var(--space-1); font-size: 11px; font-weight: var(--weight-semibold); color: var(--status-success-on-dark); }
.os-recpill--marked .os-recpill__fb { display: inline-flex; }
.os-recpill__btn {
  display: inline-flex; align-items: center; gap: var(--space-1); height: 26px; padding: 0 var(--space-2);
  border: 1px solid var(--on-dark-border); border-radius: var(--radius-md); background: transparent; color: inherit;
  font: inherit; font-size: var(--text-xs); font-weight: var(--weight-medium); cursor: pointer;
}
.os-recpill__btn:hover { background: var(--on-dark-fill-hover); }
.os-recpill__btn:focus-visible { outline: 2px solid var(--text-inverse); outline-offset: 1px; }
.os-recpill__btn > .bi { font-size: 12px; }
.os-recpill__btn--stop { background: var(--status-danger-solid); border-color: var(--status-danger-solid); color: var(--text-inverse); }
.os-recpill__btn--stop:hover { background: var(--interactive-accent-hover); border-color: var(--interactive-accent-hover); }
.os-recpill__count { font-family: var(--font-mono); font-size: 10px; font-weight: var(--weight-bold); color: var(--status-danger-on-dark); }
.os-recpill[data-state="ready"] .os-recpill__timer,
.os-recpill[data-state="ready"] .os-recpill__btn--mark,
.os-recpill[data-state="ready"] .os-recpill__btn--help,
.os-recpill[data-state="ready"] .os-recpill__btn--stop,
.os-recpill[data-state="recording"] .os-recpill__btn--start,
.os-recpill[data-state="recording"] .os-recpill__btn--close { display: none; }
/* Dar/orta ekranda metinler duser, islev kalir (olcumle bulunan esik 1340px) */
@media (max-width: 1340px) {
  .os-recpill { gap: 6px; padding-left: var(--space-2); padding-right: var(--space-2); }
  .os-recpill__label, .os-recpill__stoptext, .os-recpill__btn--help { display: none; }
  .os-recpill[data-state="ready"] .os-recpill__label { display: inline; }
}
/* Kayit cercevesi: tiklamayi engellemez */
.os-recframe { position: fixed; inset: 0; z-index: 10050; border: 2px solid var(--status-danger-solid); pointer-events: none; }

/* ── Altlik: uygulama kabugunda icerik kabinin dibine iner ─────────────── */
.os-footer--app { margin-top: auto; }

/* ── Sayfa kabugu (koordinator .main-content/.page/.breadcrumb-bar -> os-* cevirecek) ──
   Degerler eski layout.css + v4c-mono.css + os-portal.css hesaplanmis sonucuyla BIREBIR. */
.os-main {
  display: flex; flex-direction: column; min-height: 100vh;
  margin-left: var(--sw, 240px); background: var(--surface-page);
  transition: margin-left .22s cubic-bezier(.4, 0, .2, 1);
}
.os-main--collapsed { margin-left: var(--sw-collapsed, 68px); }
@media (max-width: 1023px) {
  .os-main, .os-main--collapsed { margin-left: 0; padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}
.admin-mode .os-main, .test-mode .os-main, .impersonating .os-main { margin-top: 50px; }
.admin-mode.test-mode .os-main { margin-top: 92px; }
/* Icerik kabi: 1360px'te ortalanir, kendi kabindan genis olamaz (R-35) */
.os-page { box-sizing: border-box; max-width: min(1360px, 100%); margin-inline: auto; padding: 28px 32px 60px; }
/* width:100% — .os-main flex sutunu; genislik verilmezse sayfa icerigi kadar daralir (ilan listesi 1440'ta 863px idi) */
.os-page--wide { width: 100%; max-width: min(1760px, 100%); padding-left: var(--space-4); padding-right: var(--space-4); }
/* Kabin kalan yuksekligini doldurur (eski .page-content) */
.os-page--fill { flex: 1 1 0%; width: 100%; }
/* Tavan yok (eski .page-content--wide) */
.os-page--fluid { max-width: none; }
@media (max-width: 992px) {
  .os-page, .os-page--wide { padding: 18px; }
  .os-page--fill { padding: 28px 32px 60px; }   /* eski .page-content daralmiyordu: ayni kalir */
}
/* Gezinti seridi (eski .breadcrumb-bar); icindeki <nav> kalan genisligi alir */
.os-breadcrumbbar {
  display: flex; align-items: center; gap: var(--space-3); box-sizing: border-box;
  height: 38px; padding: 18px 32px 0;
  background: color-mix(in srgb, var(--surface-page) 80%, transparent);
  border-bottom: 1px solid var(--border-default);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.os-breadcrumbbar > nav { flex: 1 1 0%; min-width: 0; }
.os-breadcrumbbar__back {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: var(--radius-md);
  font-size: 14px; color: var(--text-secondary); text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.os-breadcrumbbar__back:hover { background: var(--surface-sunken); color: var(--text-brand); text-decoration: none; }
/* Liste bicimli yol (<ol>/<li>): "/" ayraclari CSS'ten */
.os-breadcrumb--list { margin: 0; padding: 0; list-style: none; flex-wrap: wrap; gap: 6px; }
.os-breadcrumb__item { display: inline-flex; align-items: center; gap: 6px; }
.os-breadcrumb__item + .os-breadcrumb__item { padding-left: var(--space-2); }
.os-breadcrumb__item + .os-breadcrumb__item::before { content: "/"; margin-right: 4px; padding: 0 6px; font-size: var(--text-xs); color: var(--border-strong); }
.os-breadcrumb--list a { color: var(--text-muted); font-weight: var(--weight-semibold); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); }
.os-breadcrumb--list a:hover { color: var(--text-brand); text-decoration: none; }
/* Dar ekran: 38px sabit yukseklikte yol 3 satira kirilip ust barin altinda kirpiliyordu (olcum 2026-09-30, 390px).
   Mobil kalibi: geri · BULUNULAN sayfa · Takip Et; ara adimlar gizlenir (geri dugmesi zaten ust adima gider). */
@media (max-width: 639px) {
  .os-breadcrumbbar { height: auto; min-height: 44px; padding: var(--space-2) var(--space-4); }
  .os-breadcrumbbar .os-breadcrumb__item:not(.os-breadcrumb__current) { display: none; }
  .os-breadcrumbbar .os-breadcrumb__current { padding-left: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .os-breadcrumbbar .os-breadcrumb__current::before { display: none; }
}
.os-breadcrumb__item .bi { font-size: 13px; }

@media print {
  .os-sidebar--fixed, .os-sidebar__scrim, .os-tabbar, .os-topbar, .os-breadcrumbbar { display: none !important; }
  .os-main { margin-left: 0 !important; }
  .os-page--fill { padding: 0 !important; }
}

/* ── Bootstrap .modal icindeki os-dialog (bootstrap.Modal JS'i surer) ──────
   Iskelet .modal > .modal-dialog kalir; ICERIK os-dialog__*. .modal-content kalktigi icin
   tiklanabilirlik (pointer-events) ve kaydirilabilir govde burada. Genislik Bootstrap'in
   kendi degiskeninden (--bs-modal-width) -- .modal ogesine os-modalhost--* verilir. */
.os-modalhost--wide  { --bs-modal-width: 560px; }
.os-modalhost--roomy { --bs-modal-width: 660px; }
.os-dialog--fill { position: relative; max-width: none; max-height: 100%; overflow: hidden; pointer-events: auto; }
.os-dialog--fill > .os-dialog__body,
.os-dialog--fill .os-dialog__section > .os-dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.os-dialog__section { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
@media (max-width: 639px) { .os-dialog--fill { border-radius: var(--radius-lg); } }
/* Govde metinleri */
.os-dialog__lead { margin: 0 0 var(--space-4); font-size: var(--text-sm); line-height: 1.6; color: var(--text-primary); }
.os-dialog__hint { color: var(--text-muted); }
.os-dialog__note {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 0 var(--space-4) 14px; font-size: var(--text-xs); color: var(--text-muted);
}
.os-dialog__footnote { display: flex; align-items: center; gap: 6px; width: 100%; padding-top: var(--space-1); font-size: var(--text-xs); color: var(--text-muted); }
/* Metin baglantisi gibi gorunen dugme */
.os-linkbtn {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; border: 0; background: transparent;
  color: var(--text-brand); font: inherit; font-weight: var(--weight-semibold); cursor: pointer;
}
.os-linkbtn:hover { color: var(--interactive-primary-hover); text-decoration: underline; }
.os-linkbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
/* Kabinin rengini koruyan varyant: uyari/durum rengiyle boyanmis bir hucrede baglanti,
   marka mavisine donup o durumu silmemeli (ornek: kirmizi bayi adi -> bayi detayi). */
.os-linkbtn--inherit { color: inherit; }
.os-linkbtn--inherit:hover { color: inherit; text-decoration: underline; }
/* Pasif bağlantı düğmesi (ör. salt okunur matris hücresi): tıklanamadığı görünür; hover tepkisi yok */
.os-linkbtn:disabled { opacity: .45; cursor: not-allowed; text-decoration: none; }
/* Klavye / dugme adi rozeti (metin icinde) */
.os-kbd {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 6px;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-page);
  font-size: 11px; font-weight: var(--weight-medium); color: var(--text-primary); white-space: nowrap;
}
.os-kbd > .bi { font-size: 11px; }
/* Numarali adim listesi (numara: os-stepnum) */
.os-steplist { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.os-steplist__item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-3); padding-bottom: var(--space-4); }
.os-steplist__item:last-child { padding-bottom: 0; }
.os-steplist__item > .os-stepnum { margin-top: 2px; }
.os-steplist__title { margin: 2px 0 3px; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
.os-steplist__text { margin: 0; font-size: var(--text-xs); line-height: 1.55; color: var(--text-secondary); }
.os-steplist__text b { color: var(--text-primary); font-weight: var(--weight-semibold); }
/* Uyari icinde vurgulu olcu metni (sure, sayfa, hata sayisi) */
.os-alert__data { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); color: var(--text-primary); }
/* Acilip kapanan ayrinti kutusu (<details>) */
.os-details { border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.os-details__summary {
  display: flex; align-items: center; gap: var(--space-2); padding: 10px var(--space-3);
  list-style: none; cursor: pointer; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-primary);
}
.os-details__summary::-webkit-details-marker { display: none; }
.os-details__summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-lg); }
.os-details__chev { color: var(--text-muted); transition: transform var(--duration-fast) var(--ease-standard); }
.os-details[open] .os-details__chev { transform: rotate(90deg); }
.os-details__hint { margin-left: auto; font-size: 11px; font-weight: var(--weight-regular); color: var(--text-muted); }
.os-details__body { padding: var(--space-3); border-top: 1px solid var(--border-default); }
/* Kayit numarasi: kopyalama davranisi olmayan duragan gosterim */
.os-recordno--static { cursor: auto; user-select: text; }
/* Kaydin asil kimligi kisiyse (musteri detayi) numara ikincil: ad os-card__title--xl, no kucuk. */
.os-recordno--sm { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.os-card__title--xl { font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: 1.2; }

/* ── Mod bandi: ekranin ustune sabit serit ("kullanici olarak goruntuluyorsunuz") ── */
.os-modebar--fixed {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000; height: 42px; box-sizing: border-box;
  justify-content: space-between; padding: var(--space-2) var(--space-5); font-size: var(--text-md);
  box-shadow: var(--shadow-md);
}
.os-modebar--inverse { background: var(--gray-900); color: var(--text-inverse); border-bottom-color: var(--on-dark-border); }


/* ════════ ek-ortak ════════ */
/* GECICI PAKET UZANTISI (koordinator) -- gruplar arasi CAKISMA cozumu, 2026-09-25.
   Paralel goc gruplari ayni sinif adini farkli degerlerle tanimladi; hepsi birlikte yuklendigi icin
   SONRA yuklenen digerini eziyor, bir grubun dogruladigi sayfa baska grubun tanimiyla ciziliyordu.
   Buradaki her sinif TEK tanimdir; grup dosyalarindaki kopyalari silindi. Goc bitince asil bilesen
   dosyalarina (data.css ...) birlestirilir. */

/* ── Tonlu kart: renkli kenarlik + 3px sol aksan; basligi varsa baslik da tonlanir.
   Iki niyet birlesti: g3/g5 "tam kenarlik + tonlu baslik" (talep degerlendirme karar kartlari),
   g8 "3px sol aksan" (rapor/pano odak paneli). Tek anlam: "bu kart bir tonu tasir". */
.os-card--brand, .os-card--info, .os-card--success, .os-card--warning, .os-card--danger, .os-card--returned {
  border-left-width: 3px;
}
.os-card--brand    { border-color: var(--border-focus);          border-left-color: var(--interactive-primary); }
.os-card--info     { border-color: var(--status-info-solid); }
.os-card--success  { border-color: var(--status-success-solid); }
.os-card--warning  { border-color: var(--status-warning-solid); }
.os-card--danger   { border-color: var(--status-danger-solid); }
.os-card--returned { border-color: var(--status-returned-solid); }
.os-card--brand    > .os-card__header { background: var(--surface-selected);    border-bottom-color: var(--border-focus); }
.os-card--info     > .os-card__header { background: var(--status-info-bg);      border-bottom-color: var(--status-info-solid); }
.os-card--success  > .os-card__header { background: var(--status-success-bg);   border-bottom-color: var(--status-success-solid); }
.os-card--warning  > .os-card__header { background: var(--status-warning-bg);   border-bottom-color: var(--status-warning-solid); }
.os-card--danger   > .os-card__header { background: var(--status-danger-bg);    border-bottom-color: var(--status-danger-solid); }
.os-card--returned > .os-card__header { background: var(--status-returned-bg);  border-bottom-color: var(--status-returned-solid); }
.os-card--brand    > .os-card__header .os-card__title { color: var(--text-brand); }
.os-card--info     > .os-card__header .os-card__title { color: var(--status-info-fg); }
.os-card--success  > .os-card__header .os-card__title { color: var(--status-success-fg); }
.os-card--warning  > .os-card__header .os-card__title { color: var(--status-warning-fg); }
.os-card--danger   > .os-card__header .os-card__title { color: var(--status-danger-fg); }
.os-card--returned > .os-card__header .os-card__title { color: var(--status-returned-fg); }

/* ── Ikon karosu: tek olcu dizisi. Taban 48 (pano/rapor baglanti karti), --sm 36, --xs 28
   (kart basligi / liste satiri). g2 32/26, g8 48/36 tanimlamisti; ekranda g8'inki gorunuyordu. */
.os-icontile {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: var(--radius-lg);
  background: var(--surface-sunken); color: var(--text-secondary); font-size: 22px; line-height: 1;
}
.os-icontile--sm { width: 36px; height: 36px; font-size: 17px; border-radius: var(--radius-md); }
.os-icontile--xs { width: 28px; height: 28px; font-size: 14px; border-radius: var(--radius-md); }
.os-icontile--brand    { background: var(--surface-selected);   color: var(--text-brand); }
.os-icontile--info     { background: var(--status-info-bg);     color: var(--status-info-fg); }
.os-icontile--success  { background: var(--status-success-bg);  color: var(--status-success-fg); }
.os-icontile--warning  { background: var(--status-warning-bg);  color: var(--status-warning-fg); }
.os-icontile--danger   { background: var(--status-danger-bg);   color: var(--status-danger-fg); }
.os-icontile--returned { background: var(--status-returned-bg); color: var(--status-returned-fg); }

/* ── KPI deger boyu: --sm 20px (g8), --xs 14px (g2'nin "kucuk" niyeti). */
.os-kpi__value--sm { font-size: var(--text-xl); line-height: 1.2; }
.os-kpi__value--xs { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-normal); }

/* ── Soluk (pasif/elenmis) tablo satiri: tek tanim (g5 + g7). */
.os-table tbody tr.os-row--muted td { background: var(--surface-sunken); color: var(--text-muted); }
.os-table tbody tr.os-row--muted td.os-cell--select { box-shadow: inset 3px 0 0 var(--border-strong); }

/* ── Tablo ara basligi (rapor gruplari: "BU HAFTA" ...). os-row--group (talep grubu satiri,
   hukuk listeleri) BASKA bir bilesendir; ayni adi tasiyordu. */
.os-table tbody tr.os-row--caption td {
  background: var(--surface-sunken); font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary);
}
.os-table tbody tr.os-row--caption:hover td { background: var(--surface-sunken); }

/* ── Soluk ilerleme cubugu dolgusu: tek tanim. */
.os-progress__bar--muted { background: var(--border-strong); }

/* ── Diyalog genislik olcegi (legal-case-detail gocu; ozgun .modal-box.lg 780 / .xl 980).
   Mevcut: taban 480, --wide 560 (g9), --xl 900 (g3). Eksik iki basamak burada. */
.os-dialog--lg  { max-width: 780px; }
.os-dialog--xxl { max-width: 980px; }

/* ── Uyari: duz metin + satir ici vurgu tasiyan govde (ikon yok) -- flex yerine normal akis;
   flex'te her <b> ayri kolon olup metni parcaliyordu. */
.os-alert--block { display: block; }

/* ── Alt sekme cubugu ikonu: portal ikonu <i> glifidir, boyutu font-size'dan (navigation.css svg
   varsayiyor). os-portal.css'ten tasindi (2026-09-28). Cubuk yalniz <1024px'te gorunur. */
.os-tabbar__item i[class*="bi-"] { font-size: 18px; line-height: 1; }

/* ── Ust cubuk birlesik arama: tek yuzey dis sarmalayicidir, ic girdi seffaf/kenarliksiz.
   os-bridge.css'ten tasindi (2026-09-28). */
.os-topbar__search > input { background: transparent !important; border: 0; border-radius: 0; box-shadow: none; padding: 0; min-width: 0; }
.os-topbar__search > input:focus { background: transparent !important; border: 0; box-shadow: none; }

/* ── Yetki modu: yetki kaynagi tasiyan kenar menu ogesinde kilit isareti (admin-mode.js body durum
   sinifi `admin-mode`). admin-mode.css'ten tasindi; ham renk yerine tehlike tonu. */
.admin-mode .os-sidenav > li > a[data-permission-resource] { position: relative; }
.admin-mode .os-sidenav > li > a[data-permission-resource]::after {
  content: "\F130"; font-family: "bootstrap-icons"; position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%); font-size: 10px; color: var(--status-danger-fg); opacity: .7;
}
.admin-mode .os-sidenav > li > a[data-permission-resource]:hover::after { opacity: 1; }

/* ── Eski ortak CSS'ten (components.css / layout.css / admin-mode.css / os-portal.css) DS'e alinan
   son canli kurallar (2026-09-28). Calisma ani taramasi (tools/ui-std-canli-eski.py, 132 sayfa)
   DOM'da yalniz bunlarin bulundugunu gosterdi; eski dosyalar bunlar alindiktan sonra kaldirilir. */

/* Ekran okuyucuya acik, gorsel olarak gizli metin (Bootstrap 5'te yok; portal 69 sayfada kullaniyor). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Durum kancalari: bos karar seridi ve JS'in gizledigi bildirim sayaci. */
#decisionStrip:empty { display: none; }
#notificationCount[style*="display: none"] { display: none !important; }

/* Yetki modu: yetki kaynagi tasiyan her oge kesikli cerceveyle isaretlenir; uzerine gelince dolu.
   Yetki modunun kendi pencerelerinde vurgu kapali (odak cercevesi korunur -- Y-11). */
.admin-mode [data-permission-resource] {
  outline: 2px dashed color-mix(in srgb, var(--status-danger-solid) 40%, transparent); outline-offset: 2px;
  position: relative; transition: all 0.2s ease; pointer-events: auto !important;
}
.admin-mode [data-permission-resource]:hover {
  outline-color: var(--status-danger-solid); outline-style: solid;
  background-color: color-mix(in srgb, var(--status-danger-solid) 10%, transparent) !important; cursor: context-menu;
}
/* Kosula bagli gizli oge (ör. profil menusunde "Anlasmali Galeri Detayim" yalniz galeri kullanicisinda acilir):
   Yetki Modu'nda yetkiyi verecek kisi ogeyi goremedigi icin tanimlayamiyordu (2026-11-13). Mod acikken
   [data-perm-mode-reveal] her zaman gorunur; altinda kimde gorunecegi yazar. Satir ici display:none'i ezmek
   icin !important SART. */
.admin-mode li[data-perm-mode-reveal] { display: list-item !important; }
.admin-mode [data-perm-mode-reveal]::after {
  content: attr(data-perm-mode-reveal); display: block; padding: 0 var(--space-3) var(--space-2) calc(var(--space-3) + 24px);
  font-size: var(--text-xs); color: var(--text-muted);
}
/* 'Diger' sekme tasma menusu (2026-11-14): menu ogesinin odak stili yetki cercevesini siliyordu — menu acilinca
   ilk oge odaklandigi icin o oge cercevesiz kaliyordu. Cerceve ICE cizilir: menu overflow-y:auto oldugu icin
   disa tasan cizgi kenarda kirpilir. Odak durumunu ezmek icin !important SART. */
.admin-mode [data-os-tabs-more] [data-permission-resource],
.admin-mode [data-os-tabs-more] [data-permission-resource]:focus,
.admin-mode [data-os-tabs-more] [data-permission-resource]:focus-visible {
  outline: 2px dashed color-mix(in srgb, var(--status-danger-fg) 40%, transparent) !important; outline-offset: -2px !important;
}
.admin-mode [data-os-tabs-more] [data-permission-resource]:hover { outline-style: solid !important; outline-color: var(--status-danger-fg) !important; }
/* Spec 102 (2026-11-13): sayfa diyaloglarindaki tuslar da yetki modunda tanimlanabildigi icin vurgu ARTIK
   yalniz yetki modunun KENDI pencerelerinde kapali (eskiden .modal / .os-dialog-backdrop icinde de kapaliydi). */
.admin-mode #adminPermissionModal [data-permission-resource]:not(:focus-visible),
.admin-mode #permissionsListModal [data-permission-resource]:not(:focus-visible) {
  outline: none !important; background-color: transparent !important; cursor: default;
}
.admin-mode #adminPermissionModal [data-permission-resource]:hover:not(:focus-visible),
.admin-mode #permissionsListModal [data-permission-resource]:hover:not(:focus-visible) {
  outline: none !important; background-color: transparent !important;
}

/* ── ComboBox (yazinca suzen secim) ───────────────────────────────────────
   PAKET BOSLUGU. BILESEN-SOZLESMESI.md:20 ComboBox icin "etiketli
   input/secim, POPUP ve secenek semantigi" paketten gelir diyor; ayrica
   UI-STANDARDI.md:494 il/ilce alanini ComboBox'a bagliyor ("7 kopya -> 1").
   Ama `css/os/` icinde listbox/popup bileseni YOK -- arandi: combobox,
   listbox, popup, __menu => 0 sonuc. Yani kural var, bileseni yok.

   Bu yuzden gorunum burada, YALNIZ DS token'lariyla kuruldu. Paket bileseni olarak os-portal.css'ten tasindi (2026-09-28).

   Native <select> DOM'da KALIR (R-40 tek gercek kontrol, R-38 id, R-39
   yetki) -- yalnizca gorsel olarak gizlenir. */
.os-combobox { position: relative; }
/* GIZLEME SAYFA KURALIYLA BOZULMAMALI (2026-09-24). Onceki `width:1px`, sayfanin
 * kendi alan kurali tarafindan eziliyordu (dealers/create: `.dc-field{width:100%}`,
 * ayni ozgulluk, sayfa stili sonra yukleniyor) -- gorunmez select 269px'e buyuyup
 * dar ekranda sayfayi yatay kaydiriyordu. Standart ekran-okuyucu-gizleme kalibi;
 * !important burada bilincli: amac tam olarak ezilmeyi onlemek. */
.os-combobox__native {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    min-width: 0 !important; max-width: 1px !important;
    padding: 0 !important; margin: -1px !important; border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
    white-space: nowrap !important;
    opacity: 0; pointer-events: none;
}
.os-combobox__list {
    position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
    max-height: 260px; overflow-y: auto;
    margin: 0; padding: var(--space-1); list-style: none;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: none;
}
.os-combobox--open .os-combobox__list { display: block; }
/* Acik liste <body>'ye tasinir, girdinin altina SABIT konumlanir (os-combobox.js yerlestir()): pencere
   (os-dialog overflow:auto, z 90) ya da kayan kart icinde kesilmez. Konum/genislik JS'ten gelir.
   Katman: liste <body> altinda oldugundan onu acan pencerenin ustunde olmak ZORUNDA; en yuksek
   pencere katmani backdrop--front (9999), ustunde mod seridi (10000) ve baglam menusu (10001) var.
   10002 hepsinin ustu. (2026-10-17: Ekip Havuzu "Birine Ata" penceresinde liste arkada kaliyordu.) */
.os-combobox__list--portal { position: fixed; display: block; right: auto; z-index: 10002; }
.os-combobox__option {
    padding: 6px var(--space-3); border-radius: var(--radius-sm);
    font-size: var(--text-sm); color: var(--text-primary); cursor: pointer;
}
.os-combobox__option:hover,
.os-combobox__option.is-active { background: var(--surface-selected); }
.os-combobox__option[aria-selected="true"] {
    background: var(--interactive-primary); color: var(--text-inverse);
}
.os-combobox__empty {
    padding: 6px var(--space-3);
    font-size: var(--text-sm); color: var(--text-muted);
}
/* Coklu secim (onay kutulu) varyanti: tetikleyici native select degil, os-select gorunumlu
   bir dugme; secenekler os-check satiri. Ekranin altinda acilinca liste yukari acilir. */
.os-combobox > .os-select { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-combobox__option.os-check { display: flex; }
.os-combobox--up .os-combobox__list { top: auto; bottom: calc(100% + 4px); }
/* Boy esitleme (2026-10-09): os-combobox.js girdiyi hep `os-input` (md) kurar; `os-select--sm` tasiyan
   select'in combobox'i ayni formdaki --sm denetimlerden uzun kaliyordu (vehicles/customers/dealers detay). */
.os-combobox:has(> .os-select--sm) > .os-input { height: var(--control-h-sm); font-size: var(--text-sm); }
@media (max-width: 639px) { .os-combobox:has(> .os-select--sm) > .os-input { height: var(--control-h-md); } }

/* ── Etiket: satira sigmayan uzun metin (yetki kodu, uzun aksiyon adi) alt satira kirilir; yukseklik
   icerige gore, taban yukseklik korunur. admin/roles ve admin/action-reasons kendi kuraliyla yaziyordu. */
.os-tag--wrap { height: auto; min-height: 24px; max-width: 100%; white-space: normal; }
.os-tag--toggle.os-tag--wrap { min-height: var(--control-h-sm); }

/* ── Surukleme tutamagi hucresi kartta (<640px) gizlenir: basligi bilincli bos (uydurma etiket
   yazilmaz, D-135) ve dokunmatikte HTML5 surukle-birak calismadigi icin islevsiz kalir. */
/* Kart gorunumu: .os-table--stacked (js/os-table-fit.js tablo kabina sigmayinca ve <640px'te koyar). */
.os-table.os-table--stacked tbody td.os-cell--drag { display: none; }


/* ── Kart basligi: basik + eylem grubu dar ekrana sigmayinca eylemler alt satira iner (R-35).
   Tek satir zorunlulugu 320px'te taşma uretiyordu (legal-case-detail Teminatlar karti, 36px). */
.os-card__header { flex-wrap: wrap; }

/* ── Uzun etiketli dugme: dar ekranda metin satir kirar (gorunur metin kisaltilmaz). Yukseklik
   icerige gore; ikon ilk satira hizali. */
.os-btn--wrap { white-space: normal; height: auto; min-height: var(--control-h-md); line-height: 1.3; text-align: center; padding-top: 6px; padding-bottom: 6px; }