/* azatech – YÖNETİM / AYARLAR TASARIMI (Ayarlar, Güvenlik, Hesap, Resepsiyon, SaaS, giriş)
 * Yalnız görünüm: veri, işlev, yetki ve çeviri anahtarları değişmez. Renk tanımlamaz; mevcut değişkenler kullanılır.
 * Aralık ölçeği: 4 / 8 / 12 / 16 / 24. Yazı: 12 (not) / 13 (etiket) / 14 (gövde) / 16 (kutu başlığı). */

/* ---- Ayarlar kartı = standart kutu ---- */
#main .ay-card { border-radius: var(--r-lg, 12px); box-shadow: var(--g-1, 0 1px 2px rgba(0,0,0,.06)); padding: 20px 24px; box-sizing: border-box; min-width: 0; }
#main .ay-card + .ay-card { margin-top: 16px; }
#main .ay-card > h2 { margin: 0 0 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 650; line-height: 1.3; color: var(--ink); display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
#main .ay-card > h2 small { margin: 0; font-size: 12px; color: var(--mut); font-weight: 400; }
#main .ay-card > h3 { margin: 24px 0 8px; font-size: 14px; font-weight: 650; color: var(--ink); }

/* yardım yazısı: okunabilir satır uzunluğu, tek tip gri */
#main .ay-card .help { max-width: 72ch; margin: 12px 0; font-size: 13px; line-height: 1.5; color: var(--mut); }

/* ---- form düzeni: üstte etiket, eşit sütun, 40px alan ---- */
#main .ay-grid { gap: 16px 24px; margin-top: 12px; align-items: start; }
#main .ay-grid input[type=checkbox], #main .ay-grid input[type=radio] { display: inline-block; width: 16px; height: 16px; margin: 0; padding: 0; flex: none; }
#main .ay-grid > label > :is(input:not([type=checkbox]), select, textarea), #main .ay-pf label > input { margin-top: 6px; }
#main .ay-grid > label, #main .ay-pf label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); min-width: 0; }
#main .ay-grid > label small { font-size: 12px; color: var(--mut); font-weight: 400; }
#main .ay-grid input:not([type=checkbox]):not([type=radio]), #main .ay-grid select, #main .ay-pf input:not([type=checkbox]) { margin: 0; height: 40px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--r-md, 8px); background: var(--panel, #fff); color: var(--ink); font: inherit; font-weight: 400; }
#main .ay-grid textarea { margin: 0; padding: 10px 12px; box-sizing: border-box; width: 100%; border: 1px solid var(--line); border-radius: var(--r-md, 8px); background: var(--panel, #fff); font: inherit; }
#main .ay-grid input:focus, #main .ay-grid select:focus, #main .ay-grid textarea:focus { outline: 2px solid color-mix(in srgb, var(--navy) 35%, transparent); outline-offset: 1px; border-color: var(--navy); }
#main .ay-a { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); grid-column: 1 / -1; justify-content: flex-end; flex-wrap: wrap; gap: 8px 12px; }

/* para birimi / dil: iki gruplu kutu, satırlar sıkı */
#fParaDil > div:not(.ay-a) { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-md, 8px); background: color-mix(in srgb, var(--line) 18%, var(--panel, #fff)); }
#fParaDil > div > b { font-size: 13px; margin-bottom: 4px; }
#fParaDil .chk { display: flex; align-items: center; gap: 10px; min-height: 32px; font-size: 14px; font-weight: 400; margin: 0; }
#fParaDil .chk input { margin: 0; flex: none; }
#main .ay-ol { gap: 8px 24px; }
#main .ay-ol .chk { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }

#main .ay-img button, #main .ay-img .link { white-space: nowrap; }
#main .ay-img > * { min-width: 0; }

/* ---- Güvenlik / Hesap / Resepsiyon: ortak yazı genişliği ---- */
#main .kutu .help { max-width: 72ch; }

/* ---- yükleniyor / hata ---- */
#main .loading { padding: 32px 16px; text-align: center; color: var(--mut); font-size: 14px; }
#main .loading.err { color: var(--red); }

/* ---- Güvenlik (.dt-b kutuları, .dt-form): iki eşit sütun, alt bölüm ayracı ---- */
#main .dt-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; align-items: start; margin-top: 12px; }
#main .dt-form > .tam { grid-column: 1 / -1; }
#main .dt-form .cfld > :is(select, input, textarea) { display: block; margin-top: 6px; }
#main .dt-form .cfld { display: block; font-size: 13px; font-weight: 600; color: var(--ink); min-width: 0; margin: 0; }
#main .dt-form .cfld small.help { display: block; margin-top: 2px; font-weight: 400; max-width: 72ch; margin: 0; }
#main .dt-form .cfld select, #main .dt-form .cfld input:not([type=checkbox]) { height: 40px; width: 100%; box-sizing: border-box; }
#main .dt-form .cfld:has(input[type=checkbox]) { display: flex; align-items: center; min-height: 40px; align-self: end; }
#main .dt-form .cfld:has(input[type=checkbox]) span { display: flex; align-items: center; gap: 10px; font-weight: 400; font-size: 14px; }
#main .dt-form textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; }
#main .dt-b h4 { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--ink); }
@media (max-width: 720px) { #main .dt-form { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

@media (max-width: 720px) {
  #main .ay-card { padding: 16px; }
  #main .ay-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #main .ay-a { justify-content: stretch; }
  #main .ay-a > button { flex: 1 1 auto; min-height: 44px; }
  #fParaDil { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
 * YÖNETİM 2 – ortak sayfa dili (5 Kasım): sayfa başlığı + tek satır özet + tek ana eylem, kısayol kartları, sekmeler.
 * Yalnız görünüm; renk yalnız mevcut değişkenlerden (--navy, --ink, --mut, --line, --panel).
 * Bileşenler: .y2-bas (başlık satırı) · .y2-ozet (özet) · .y2-hizli/.y2-hk (kısayol kartları) · .y2-bos (boş durum) · .y2-yukle (yükleniyor)
 * ===================================================================== */
.y2-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 0 0 var(--b-4, 16px); }
.y2-bas > div { min-width: 0; flex: 1 1 320px; }
.y2-bas h2 { margin: 0; font-size: 20px; font-weight: 650; line-height: 1.25; color: var(--ink); }
.y2-ozet { margin: 4px 0 0; max-width: 68ch; font-size: 14px; line-height: 1.5; color: var(--mut); }
.y2-bas > button { flex: none; }
.er-app > .y2-bas { margin-bottom: var(--b-3, 12px); }
.er-app > .y2-bas .y2-ozet { margin: 0; }
.er-app .yt3, .er-app .grp-app { padding-inline: 0; }

/* kısayol kartları (Ayarlar tepesi) */
.y2-hizli { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--b-3, 12px); margin: 0 0 var(--b-4, 16px); }
.y2-hk { display: flex; align-items: flex-start; gap: 12px; text-align: start; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg, 12px); background: var(--panel, #fff); box-shadow: var(--g-1, 0 1px 2px rgba(0,0,0,.06)); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.y2-hk:hover { border-color: color-mix(in srgb, var(--navy) 45%, var(--line)); box-shadow: 0 2px 8px color-mix(in srgb, var(--navy) 12%, transparent); }
.y2-hk:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.y2-hk > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.y2-hk b { font-size: 14px; font-weight: 650; line-height: 1.3; }
.y2-hk small { font-size: 12px; line-height: 1.4; color: var(--mut); font-weight: 400; }
.y2-hk-ik { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--navy) 10%, var(--panel, #fff)); color: var(--navy); }
.y2-hk-ik svg { width: 18px; height: 18px; }

/* kullanıcılar ve roller: tablodaki ikinci "Yeni kullanıcı" düğmesi gizli (ana eylem sayfanın üstünde; öğe işlev için durur) */
.er-app #ytEkle { display: none; }
.er-yok-kutu { max-width: 560px; }

/* durum kutuları */
.y2-bos { padding: 32px 16px; text-align: center; color: var(--mut); font-size: 14px; }
.y2-yukle { padding: 32px 16px; text-align: center; color: var(--mut); font-size: 14px; }

@media (max-width: 720px) {
  .y2-bas { align-items: stretch; }
  .y2-bas > button { width: 100%; min-height: 44px; }
  .y2-hizli { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
 * ORTAK DENETİM DİLİ (Satış ekranlarıyla AYNI ölçü ve görünüm): düğme, girdi, çip, tablo, rozet, boş durum, kutu.
 * satis-tasarim.css'in genel kısmının, bu ekranların <main data-y2> öğesine bağlanmış hâli: iki takımın ekranları yan yana aynı görünür.
 * ===================================================================== */
#app main[data-y2] {
  --y2-h: 36px;                       /* denetim (girdi, düğme, süzgeç) yüksekliği */
  --y2-r: 8px;                        /* denetim köşesi */
  --y2-kutu: var(--r-lg, 12px);       /* kutu / tablo köşesi */
  --y2-zemin: color-mix(in srgb, var(--navy) 4%, var(--panel, #fff));    /* tablo başlığı, soluk yüzey */
  --y2-cizgi: color-mix(in srgb, var(--navy) 9%, var(--line));            /* satır ayracı */
  --y2-vurgu: color-mix(in srgb, var(--navy) 8%, var(--panel, #fff));     /* seçili süzgeç, üzerine gelinen satır */
}

/* ================= SAYFA BAŞLIĞI (kabuktaki .pg-bas; yalnız bu ekranlarda) ================= */
#app:has(main[data-y2]) .pg-bas { padding-top: 20px; padding-bottom: 4px; gap: 12px 16px; }
#app:has(main[data-y2]) .pg-bas h1 { font-size: 24px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
#app:has(main[data-y2]) .pg-bas-et { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--mut); }
#app:has(main[data-y2]) .pg-yildiz { min-height: 32px; border-color: transparent; background: transparent; color: var(--mut); font-weight: 550; border-radius: var(--y2-r, 8px); }
#app:has(main[data-y2]) .pg-yildiz:hover { background: color-mix(in srgb, var(--navy) 6%, transparent); border-color: transparent; color: var(--ink); }
#app:has(main[data-y2]) .pg-yildiz.on { background: color-mix(in srgb, var(--amber, #a86a00) 10%, transparent); border-color: transparent; color: var(--amber, #8a5a00); }
@media (max-width: 760px) { #app:has(main[data-y2]) .pg-bas h1 { font-size: 22px; } }

/* sayfa içi başlık bandı (.page-head): özet cümlesi solda, tek ana eylem sağda */
#app main[data-y2] .page-head { min-height: 0; margin: 4px 0 var(--b-4, 16px); gap: var(--b-2, 8px) var(--b-4, 16px); align-items: center; }
#app main[data-y2] .page-head-m { flex: 1 1 320px; }
#app main[data-y2] .page-head-o { font-size: 14px; line-height: 1.45; color: var(--mut); white-space: normal; overflow: visible; text-overflow: clip; max-width: 68ch; }
#app main[data-y2] .page-head-a { gap: var(--b-2, 8px); }

/* ================= DENETİMLER: düğme, girdi, seçici (ortak ölçü) ================= */
#app main[data-y2] :is(.primary, .ghost, .link-d):not(.sy-dz *):not(.acts-menu *) { border-radius: var(--y2-r); }
#app main[data-y2] :is(.tk-bar, .list-bar, .page-head-a, .kutu-bas) :is(.primary, .ghost) { min-height: var(--y2-h); padding-block: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; }
#app main[data-y2] :is(.tk-bar, .list-bar) :is(.primary, .ghost).sm { padding-inline: 14px; }
#app main[data-y2] .ghost { background: var(--panel, #fff); border: 1px solid var(--line); color: var(--ink); }
#app main[data-y2] .ghost:hover { background: var(--y2-zemin); border-color: color-mix(in srgb, var(--navy) 30%, var(--line)); }
#app main[data-y2] .primary:hover:not(:disabled) { filter: brightness(1.12); }
#app main[data-y2] :is(input[type=search], input[type=text], input[type=number], input[type=date], input[type=email], input[type=tel], select, textarea):not(.grid *):not(.fl-ed *) {
  min-height: var(--y2-h); border: 1px solid var(--line); border-radius: var(--y2-r); background-color: var(--panel, #fff); padding-inline: 12px; font-size: 14px; color: var(--ink);
  transition: border-color var(--hrk, 150ms), box-shadow var(--hrk, 150ms);
}
#app main[data-y2] :is(input, select, textarea):not([type=checkbox]):not([type=radio]):focus-visible { outline: 0; border-color: var(--navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 18%, transparent); }
#app main[data-y2] input::placeholder { color: color-mix(in srgb, var(--mut) 80%, transparent); }
/* arama kutusu: sol içinde büyüteç (mantıksal: RTL'de sağa geçer) */
#app main[data-y2] input[type=search], #app main[data-y2] :is(#tq, #slq, #bvQ, #cq, #lQ, #invQ) {
  padding-inline-start: 36px; width: min(100%, 320px); flex: 0 1 320px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2367615B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px 50%; background-size: 16px;
}
[dir="rtl"] #app main[data-y2] :is(input[type=search], #tq, #slq, #bvQ, #cq, #lQ, #invQ) { background-position: calc(100% - 12px) 50%; padding-inline-start: 12px; padding-inline-end: 36px; }
#app main[data-y2] input[type=search]::-webkit-search-cancel-button { cursor: pointer; }
#app main[data-y2] .chk { display: inline-flex; align-items: center; gap: 8px; min-height: var(--y2-h); padding-inline: 12px; border: 1px solid var(--line); border-radius: var(--y2-r); background: var(--panel, #fff); font-size: 13px; color: var(--ink); cursor: pointer; }
#app main[data-y2] .chk:hover { background: var(--y2-zemin); }
#app main[data-y2] .chk:has(input:checked) { border-color: color-mix(in srgb, var(--navy) 45%, var(--line)); background: var(--y2-vurgu); color: var(--navy); font-weight: 600; }
#app main[data-y2] .chk input { margin: 0; accent-color: var(--navy); }

/* ================= ARAÇ ÇUBUĞU: arama + süzgeç çipleri + eylemler ================= */
#app main[data-y2] .tk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-2, 8px) var(--b-3, 12px); margin: 0 0 var(--b-3, 12px); padding: 0; }
#app main[data-y2] :is(.inv-bar, .list-bar) { align-items: center; }
#app main[data-y2] :is(.inv-bar, .list-bar) input[type=search], #app main[data-y2] :is(#invQ, #lQ) { flex: 0 1 240px; width: min(100%, 240px); }   /* tam genişlik, yapışkan çubuklar: yerleşim eski kuralda kalır */
#app main[data-y2] :is(.tk-bar, .list-bar) > .sp { flex: 1 1 0; }
#app main[data-y2] .tk-bar > :is(#bvYeni, #tvEkle, .xls) { order: 20; margin-inline-start: auto; }
#app main[data-y2] .tk-bar > :is(#bvH, .chk, #yetimTemizle, [id*=ilen]) { order: 10; }
#app main[data-y2] .tk-bar:has(> #bvYeni) > .chips { order: 30; flex: 1 1 100%; }   /* potansiyel müşteriler: 1. satır arama + eylemler, 2. satır süzgeçler */
#app main[data-y2] .chips { display: flex; flex-wrap: wrap; gap: 6px; }
#app main[data-y2] .chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel, #fff); color: var(--ink); font-size: 13px; font-weight: 550; line-height: 1; transition: background var(--hrk, 150ms), border-color var(--hrk, 150ms);
}
#app main[data-y2] .chip:hover { background: var(--y2-zemin); border-color: color-mix(in srgb, var(--navy) 30%, var(--line)); }
#app main[data-y2] .chip.on { background: var(--y2-vurgu); border-color: color-mix(in srgb, var(--navy) 55%, var(--line)); box-shadow: none; color: var(--navy); font-weight: 650; }
#app main[data-y2] .chip b { margin: 0; min-width: 20px; padding: 3px 6px; border-radius: 999px; background: color-mix(in srgb, var(--navy) 8%, transparent); color: var(--mut); font-size: 12px; font-weight: 650; text-align: center; line-height: 1; font-variant-numeric: tabular-nums; }
#app main[data-y2] .chip.on b { background: var(--navy); color: #fff; }
#app main[data-y2] .chip.hot:not(.on) { border-color: color-mix(in srgb, var(--amber, #a86a00) 45%, var(--line)); }
#app main[data-y2] .chip.hot b { background: color-mix(in srgb, var(--amber, #a86a00) 14%, transparent); color: var(--amber, #8a5a00); }
#app main[data-y2] .chip.hot.on b { background: var(--navy); color: #fff; }
/* envanter durum çipleri: yalnız sayının rengi (zemin değişmez) */
#app main[data-y2] .chip.st-ok b { color: var(--green, #1a7f4b); } #app main[data-y2] .chip.st-opt b, #app main[data-y2] .chip.st-res b { color: var(--amber, #8a5a00); } #app main[data-y2] .chip.st-sold b { color: var(--red); }
#app main[data-y2] .chip.on[class*="st-"] b { color: #fff; }
#app main[data-y2] .tk-bar .help, #app main[data-y2] .lcount { font-size: 13px; color: var(--mut); }

/* ================= TABLO: tek görünüm (40-52 px satır, sabit başlık, hafif ayraç) ================= */
#app main[data-y2] .tbl-x { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--y2-kutu); box-shadow: var(--g-1); }
#app main[data-y2] :is(table.tk, table.ltab) thead th:first-child { border-start-start-radius: calc(var(--y2-kutu) - 1px); } #app main[data-y2] :is(table.tk, table.ltab) thead th:last-child { border-start-end-radius: calc(var(--y2-kutu) - 1px); }
#app main[data-y2] :is(table.tk, table.ltab) { font-size: 14px; }
#app main[data-y2] :is(table.tk, table.ltab) thead th {
  background: var(--y2-zemin); color: var(--mut); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 10px 12px; line-height: 1.3;
  border-top: 0; border-bottom: 1px solid var(--y2-cizgi); white-space: nowrap;
}
#app main[data-y2] :is(table.tk, table.ltab) thead th:hover { background: color-mix(in srgb, var(--navy) 7%, var(--panel, #fff)); }
#app main[data-y2] :is(table.tk, table.ltab) tbody td { padding: 12px; border-top: 0; border-bottom: 1px solid var(--y2-cizgi); vertical-align: middle; line-height: 1.4; background: transparent; }
#app main[data-y2] :is(table.tk, table.ltab) tbody tr:last-child td { border-bottom: 0; }
#app main[data-y2] :is(table.tk, table.ltab) tbody tr:hover td { background: var(--y2-vurgu); }
#app main[data-y2] :is(table.tk, table.ltab) td small, #app main[data-y2] :is(table.tk, table.ltab) .by { color: var(--mut); font-size: 12px; line-height: 1.35; }
#app main[data-y2] :is(table.tk, table.ltab) td.n, #app main[data-y2] :is(table.tk, table.ltab) th.n { text-align: end; font-variant-numeric: tabular-nums; }
#app main[data-y2] table.tk td .mono, #app main[data-y2] table.tk td.mono { font-size: 13px; font-weight: 600; letter-spacing: 0; }
#app main[data-y2] table.tk td.acts { padding-block: 8px; }
#app main[data-y2] table.tk td.acts .sm, #app main[data-y2] table.tk td.acts select { min-height: 32px; border-radius: var(--y2-r); }
#app main[data-y2] table.tk td.acts .primary.sm { padding-inline: 12px; }
#app main[data-y2] .tk tr.bekliyor td { background: color-mix(in srgb, var(--amber, #a86a00) 6%, var(--panel, #fff)); }
#app main[data-y2] .tk .crm { background: var(--y2-vurgu); color: var(--navy); border-radius: 4px; padding: 1px 5px; font-size: 11px; font-weight: 650; letter-spacing: .02em; }
#app main[data-y2] .tk .why { color: var(--amber, #8a5a00); }
/* eylem bağlantısı (Sil gibi): sade, tehlike rengi yalnız üzerine gelince tam */
#app main[data-y2] table.tk td.acts :is(a.danger-l, .danger-l, button.link) { text-decoration: none; font-size: 13px; font-weight: 550; padding: 4px 8px; border-radius: 6px; color: var(--mut); }
#app main[data-y2] table.tk td.acts :is(a.danger-l, .danger-l):hover { background: color-mix(in srgb, var(--red) 9%, transparent); color: var(--red); }
#app main[data-y2] table.tk td.acts a[href] { text-decoration: none; }
#app main[data-y2] table.tk td.acts a[style*="color"], #app main[data-y2] table.tk td.acts a.del { color: var(--mut); }
/* uzun metin hücreleri okunur genişlikte kalır; satır ikinci satıra yalnız gerektiğinde iner */
#app main[data-y2] table.tk td { max-width: 46ch; }
#app main[data-y2] table.tk td.acts, #app main[data-y2] table.tk td.n, #app main[data-y2] table.tk td.dst { max-width: none; }

/* dar ekranda (tablet) yoğunluk: yatay kayma çıkmadan sığsın; kayıyorsa sabit eylem sütunu arkasını kapatır */
@media (min-width: 761px) and (max-width: 1240px) {
  #app main[data-y2] :is(table.tk, table.ltab) { font-size: 13px; }
  #app main[data-y2] :is(table.tk, table.ltab) thead th { padding-inline: 8px; }
  #app main[data-y2] :is(table.tk, table.ltab) tbody td { padding-inline: 8px; }
}
#app main[data-y2] .tbl-x.kaydirilir > table :is(th, td):is(:first-child, :last-child):where(.acts, :first-child) { background-color: var(--panel, #fff); }
#app main[data-y2] .tbl-x.kaydirilir > table thead :is(th):is(:first-child, :last-child) { background-color: var(--y2-zemin); background-image: linear-gradient(var(--y2-zemin), var(--y2-zemin)); }
#app main[data-y2] .tbl-x.kaydirilir > table td.acts:last-child { box-shadow: -1px 0 0 var(--y2-cizgi); }

/* ================= DURUM ROZETİ (nokta + metin; renk anlamı: bekliyor=amber, tamam=yeşil, red/iptal=kırmızı) ================= */
#app main[data-y2] .ts, #app main[data-y2] .st { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.3; background: color-mix(in srgb, var(--mut) 12%, transparent); color: var(--ink); white-space: nowrap; }
#app main[data-y2] .ts::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
#app main[data-y2] .ts-bekliyor { background: color-mix(in srgb, var(--amber, #a86a00) 13%, transparent); color: var(--amber, #8a5a00); }
#app main[data-y2] .ts-onaylandi { background: color-mix(in srgb, var(--green, #1a7f4b) 13%, transparent); color: var(--green, #17683e); }
#app main[data-y2] .ts-reddedildi, #app main[data-y2] .ts-iptal { background: color-mix(in srgb, var(--red) 11%, transparent); color: var(--red); }
#app main[data-y2] td.dur, #app main[data-y2] td.dst { white-space: nowrap; }

/* ================= BOŞ DURUM / YÜKLENİYOR ================= */
#app main[data-y2] td.none { text-align: center; padding: 40px 16px; color: var(--mut); font-size: 14px; background: transparent; }
#app main[data-y2] td.none::before { content: ""; display: block; width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 12px; background: color-mix(in srgb, var(--navy) 7%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2367615B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7l8-4 8 4v10l-8 4-8-4z'/%3E%3Cpath d='M4 7l8 4 8-4M12 11v10'/%3E%3C/svg%3E") center / 20px no-repeat; }
#app main[data-y2] tr:hover td.none { background: transparent; }
#app main[data-y2] :is(.side-empty, .tv-bos) { display: grid; place-items: center; text-align: center; min-height: 160px; padding: 24px 16px; color: var(--mut); font-size: 14px; border: 1px dashed var(--line); border-radius: var(--y2-kutu); background: transparent; box-shadow: none; }

/* ================= KUTU / KART ızgarası ================= */
#app main[data-y2] :is(.box, .kutu, .dt-b) { border-radius: var(--y2-kutu); }
#app main[data-y2] .box { background: var(--panel, #fff); border: 1px solid var(--line); box-shadow: var(--g-1); padding: var(--b-4, 16px) 20px; margin: 0 0 var(--b-3, 12px); }
#app main[data-y2] :is(.box, .dt-b) h3 { margin: 0 0 var(--b-3, 12px); font-size: 16px; font-weight: 650; line-height: 1.3; color: var(--ink); }
#app main[data-y2] :is(.box, .dt-b) h3 small { margin-inline-start: 8px; font-size: 12px; font-weight: 400; color: var(--mut); }
#app main[data-y2] :is(.box, .dt-b) p.help { margin: 0; font-size: 14px; color: var(--mut); max-width: 68ch; }
#app main[data-y2] .oz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--b-3, 12px); align-items: start; }
#app main[data-y2] .oz-grid > .box { margin: 0; }
#app main[data-y2] .kpis { margin-bottom: var(--b-3, 12px); }

/* ================= MOBİL (≤ 760 px): kart, tam genişlik, 40 px dokunma hedefi ================= */
@media (max-width: 760px) {
  #app main[data-y2] { --y2-h: 40px; }
  #app main[data-y2] :is(.tk-bar, .list-bar) { gap: 8px; }
  #app main[data-y2] input[type=search], #app main[data-y2] :is(#tq, #slq, #bvQ, #cq, #lQ, #invQ) { flex: 1 1 100%; width: 100%; }
  #app main[data-y2] .tk-bar > :is(#bvYeni, #tvEkle) { order: -1; flex: 1 1 100%; margin: 0; }
  #app main[data-y2] .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -2px; padding: 2px; scrollbar-width: none; max-width: 100%; flex: 1 1 100%; }
  #app main[data-y2] .chip { flex: none; min-height: 36px; }
  #app main[data-y2] .page-head { flex-direction: column; align-items: stretch; }
  #app main[data-y2] .page-head-m { flex: 0 0 auto; } #app main[data-y2] .page-head-o { flex: 1 1 auto; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
  #app main[data-y2] .page-head-a { margin: 0; width: 100%; }
  #app main[data-y2] .page-head-a > .primary { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { #app main[data-y2] * { transition: none !important; } }


/* =====================================================================
 * YÖNETİM 2 – denetim ölçüsü ve yerleşim düzeltmeleri
 * Ölçek: formdaki girdi / seçici 40 px; araç çubuğu ve tablo içi 36 px; dokunmada 44 px. Köşe 8, kutu 12. Aralık 4·8·12·16·24.
 * ===================================================================== */
#app main[data-y2] :is(input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=hidden]), select):not(.mt-app *) { height: 40px; min-height: 0; box-sizing: border-box; }
#app main[data-y2] :is(.sayfa-araci, .tk-bar, .list-bar, table) :is(input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=hidden]), select) { height: 36px; }
#app main[data-y2] :is(textarea) { border: 1px solid var(--line); border-radius: var(--y2-r, 8px); padding: 10px 12px; font: inherit; font-size: 14px; background: var(--panel, #fff); color: var(--ink); box-sizing: border-box; }
#app main[data-y2] :is(textarea):focus-visible { outline: 0; border-color: var(--navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 18%, transparent); }
#app main[data-y2] select { padding-inline: 12px 28px; }
/* arama kutusu: ayar.css'in dar iç boşluğu büyüteç simgesini ezmesin */
#app main[data-y2] .er-k .sayfa-araci input[type=search], #app main[data-y2] input[type=search]:not(.grid *):not(.fl-ed *) { padding-inline-start: 36px; }
[dir="rtl"] #app main[data-y2] input[type=search]:not(.grid *):not(.fl-ed *) { padding-inline-start: 12px; padding-inline-end: 36px; }

/* Kullanıcılar ve roller: üç sekme ortak kabuk; iç ekranların kendi yan boşluğu çift olmasın */
#app main[data-y2].er-app > #erIc > :is(.yt3, .grp-app, .tk-app, .er-takim) { padding: 0 0 var(--b-6, 32px); }
#app main[data-y2].er-app { padding-top: var(--b-3, 12px); }
.er-sekme { margin-bottom: var(--b-4, 16px); }
.er-sekme button { font-size: 14px; font-weight: 600; padding: 10px 14px; }

/* her ayar/yönetim ekranı: kökün üst boşluğu tek ölçü, alt boşluk 32 px */
#app main[data-y2] > :is(.tk-app, .ay-app, .yd-app, .ls-app, .otl-app, .rs-app, .hesap-ekran, .mt-app, .ym) { padding-top: var(--b-3, 12px); padding-bottom: var(--b-6, 32px); }
#app main[data-y2] .ay-app { gap: var(--b-3, 12px); }

/* tablo kutuya sarılı değilse bile kutu gibi görünsün (Görev otomasyonu, Prim oranları) */
#app main[data-y2] table.mx, #app main[data-y2] table.ay-pr { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--y2-kutu, 12px); overflow: hidden; box-shadow: var(--g-1); }
#app main[data-y2] table.mx th { background: var(--y2-zemin); color: var(--mut); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--y2-cizgi); }
#app main[data-y2] table.mx td { padding: 10px 12px; border-bottom: 1px solid var(--y2-cizgi); vertical-align: middle; }
#app main[data-y2] table.mx tr:last-child td { border-bottom: 0; }

/* "Nasıl çalışır" ve yardım yazıları: tek tip, okunur genişlik */
#app main[data-y2] .help { max-width: 68ch; font-size: 13px; line-height: 1.5; color: var(--mut); }

/* boş durum kutusu (tablosuz): tek görünüm */
#app main[data-y2] :is(.loading, .y2-bos):not(.err) { padding: 40px 16px; text-align: center; color: var(--mut); font-size: 14px; }
#app main[data-y2] .loading.err { color: var(--red); }

/* ana eylem düğmesi: ölçü her ekranda aynı (kutu başlığı ve sayfa başlığı yanında) */
#app main[data-y2] :is(.y2-bas, .kutu-bas, .ay-a, .sayfa-araci) > :is(.primary, .ghost) { min-height: 36px; padding-block: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; border-radius: var(--y2-r, 8px); }
#app main[data-y2] .y2-bas > .primary { min-height: 40px; padding-inline: 20px; font-size: 14px; }

@media (max-width: 760px) {
  #app main[data-y2] :is(input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=hidden]), select):not(.mt-app *) { height: 44px; }
  #app main[data-y2] :is(.sayfa-araci, .tk-bar, table) :is(input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=hidden]), select) { height: 44px; }
}

#app main[data-y2].er-app #ytEkle { display: none; }
#app main[data-y2].er-app { padding-top: 0; }
#app main[data-y2] .kutu .tbl-x, #app main[data-y2] .er-k .tbl-x { border: 0; border-top: 1px solid var(--y2-cizgi); border-radius: 0; box-shadow: none; background: transparent; }
#app main[data-y2] .kutu .tbl-x > table thead th:first-child, #app main[data-y2] .kutu .tbl-x > table thead th:last-child { border-radius: 0; }

/* sayfa içi içindekiler (Ayarlar): bölümler arasında tek tıkla geçiş */
.y2-ic { display: flex; flex-wrap: wrap; gap: var(--b-2, 8px); margin: 0 0 var(--b-4, 16px); }
.y2-ic a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel, #fff); color: var(--ink); font-size: 13px; font-weight: 550; text-decoration: none; transition: background .15s, border-color .15s; }
.y2-ic a:hover { background: color-mix(in srgb, var(--navy) 6%, var(--panel, #fff)); border-color: color-mix(in srgb, var(--navy) 35%, var(--line)); }
.y2-ic a:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
@media (max-width: 760px) { .y2-ic { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -2px; padding: 2px; } .y2-ic a { flex: none; } }
#main .ay-card { scroll-margin-top: calc(var(--top-h, 56px) + 16px); }

/* form: etiket üstte, girdi tam genişlik; seçici ile girdi aynı hizada (satır kutusu boşluğu yok) */
#main .ay-grid > label > :is(input:not([type=checkbox], [type=radio]), select, textarea), #main .ay-pf label > :is(input:not([type=checkbox]), select) { display: block; width: 100%; margin-top: 6px; box-sizing: border-box; }
#main .ay-grid > label { line-height: 1.4; }