/* V2 bileşenleri (Agency CRM görünümü). Değişkenler tokens.css'ten gelir.
 * Kapsam: :is(#app, dialog, ...) uygulama kabuğu + pencereler; özgüllük #app düzeyinde tutulur, !important yalnız zorunlu yerde.
 * Belge alanları (.stage .page .pl .pg) her genel kuraldan :not(...) ile hariç tutulur. Yönlü özellik yerine mantıksal özellik. */

html[data-v2-kabuk] body { background: var(--v2-canvas); }
#app { font-family: var(--v2-font); font-size: var(--v2-fs); color: var(--v2-ink); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
#app :is(a, .link) { text-underline-offset: 2px; }
#app a:not([class]):not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host) *) { color: var(--v2-brand); }
#app :is(h1, h2, h3):not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host) *) { color: var(--v2-ink); }

/* ---- odak halkası (tüm etkileşimli öğeler) ---- */
:is(#app, dialog, .ara-k, .drw) :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--v2-focus); outline-offset: 2px; }
#app :is(.side, .side-cekmece) :is(a, button):focus-visible { outline: 2px solid var(--v2-side-ink-strong); outline-offset: -2px; }

/* ================= ÜST ÇUBUK ================= */
#app .top { height: var(--v2-top-h); background: var(--v2-surface); color: var(--v2-ink); border-bottom: 1px solid var(--v2-line); box-shadow: none; gap: var(--v2-s3); padding-inline: var(--v2-page-px); }
#app .top .brand { gap: var(--v2-s3); }
#app .top .brand select, #app .top #projSel { height: var(--v2-h-btn); border: 1px solid var(--v2-line); border-radius: var(--v2-r); background-color: var(--v2-surface-2); color: var(--v2-ink); font-weight: 600; font-size: 13px; padding-block: 0; }
#app .top .ap-rozet { background: var(--v2-gold-soft); color: #6b4c0f; border: 1px solid color-mix(in srgb, var(--v2-gold) 35%, transparent); border-radius: 999px; font-weight: 650; }
#app .top .ara-alan { height: var(--v2-h-btn); border: 1px solid var(--v2-line); border-radius: var(--v2-r); background: var(--v2-surface-2); color: var(--v2-muted); }
#app .top .ara-alan:hover { background: var(--v2-surface); border-color: var(--v2-faint); }
#app .top .ara-alan kbd, #app kbd { font: 600 .68rem var(--v2-font); padding: 2px 6px; border: 1px solid var(--v2-line); border-bottom-width: 2px; border-radius: 5px; background: var(--v2-surface); color: var(--v2-muted); opacity: 1; }
#app .top .yeni-btn { height: var(--v2-h-btn); border-radius: var(--v2-r); background: var(--v2-brand); color: var(--v2-brand-ink); border: 0; font-weight: 600; box-shadow: var(--v2-sh-sm); }
#app .top .yeni-btn:hover { background: color-mix(in srgb, var(--v2-brand) 86%, #000); }
#app .top :is(.zil-btn, .mnu-btn) { color: var(--v2-ink-2); border-radius: var(--v2-r); }
#app .top :is(.zil-btn, .mnu-btn):hover { background: var(--v2-surface-3); color: var(--v2-ink); }
#app .top .zil-say { border-color: var(--v2-surface); background: var(--v2-bad); color: #fff; }
#app .top .um-btn { color: var(--v2-ink); border: 1px solid var(--v2-line); border-radius: 999px; background: var(--v2-surface); }
#app .top .um-btn:hover, #app .top .um-btn[aria-expanded="true"] { background: var(--v2-surface-2); }
#app .top .um-av { background: var(--v2-brand); color: var(--v2-brand-ink); box-shadow: none; font-weight: 700; }
#app .top .um-ad { font-weight: 600; }

/* uyarı şeridi (alarm) */
#app .kirmizi-bar { background: var(--v2-bad-soft); color: #8f1f19; border-bottom: 1px solid color-mix(in srgb, var(--v2-bad) 25%, transparent); font-weight: 500; }
#app .kirmizi-bar :is(a, b, u) { color: #8f1f19; }

/* ================= YAN MENÜ ================= */
#app .side:not(.side-cekmece), #app .side-cekmece { background: var(--v2-side); color: var(--v2-side-ink); border: 0; border-inline-end: 1px solid var(--v2-side-line); }
@media (min-width: 1181px) { #app:not([data-dar="1"]) .side:not(.side-cekmece) { width: var(--v2-side-w); } }
#app .side .si { color: var(--v2-side-ink); font-size: 14px; font-weight: 500; border-radius: var(--v2-r-sm); }
#app .side .si .ik { color: inherit; opacity: .9; }
#app .side .si:hover { background: var(--v2-side-line); color: var(--v2-side-ink-strong); }
#app .side .si.on { background: var(--v2-side-2); color: var(--v2-side-ink-strong); font-weight: 600; }
#app .side .si.on::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 8px; width: 3px; border-radius: 2px; background: var(--v2-gold-bright); }
#app :is(h1, h2, h3, main)[tabindex="-1"]:focus { outline: none; }
#app .side .nav-grp, #app .side button.nav-grp-t { color: color-mix(in srgb, var(--v2-side-ink) 78%, transparent); font-size: .66rem; font-weight: 650; letter-spacing: .1em; }
#app .side button.nav-grp-t:hover { color: var(--v2-side-ink-strong); }
#app .side .nav-gunluk { color: var(--v2-gold-bright); }
#app .side .nav-alt, #app .side .si-f { color: color-mix(in srgb, var(--v2-side-ink) 85%, transparent); }
#app .side :is(.bdg, .nav-grp-b) { background: var(--v2-gold-bright); color: var(--v2-side-badge-ink, #1b1405); font-weight: 800; border-radius: 4px; letter-spacing: .02em; }
#app .side .side-tog { color: var(--v2-side-ink); border-top: 1px solid var(--v2-side-line); }
#app .side .side-tog:hover { background: var(--v2-side-line); color: var(--v2-side-ink-strong); }
#app .side .si-yildiz { color: var(--v2-side-ink); }
#app .side .si-yildiz.on, #app .side .si-yildiz:hover { color: var(--v2-gold-bright); }

/* ================= SAYFA İSKELETİ ================= */
#app .icerik { min-width: 0; }
#app .pg-bas { max-width: var(--v2-max); padding-block: var(--v2-s5) var(--v2-s2); }
#app .pg-bas h1 { font-size: var(--v2-fs-h1); font-weight: 650; letter-spacing: -.02em; color: var(--v2-ink); }
#app .pg-bas-et { color: var(--v2-muted); font-size: .68rem; letter-spacing: .08em; }
#app :is(.page-head, .e2-bas, .gt-bas, .sy-bar) h1 { letter-spacing: -.02em; }
#app main { max-width: var(--v2-max); margin-inline: auto; }
#app .help, #app .hint, #app .fine { color: var(--v2-muted); }

/* ================= KART VE KPI ================= */
#app :is(.box, .e2-kart, .kutu, .ay-card, .a2-bolum, .fp-kart, .alr-kutu, .mt-kart):not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host) *) {
  background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: var(--v2-r); box-shadow: var(--v2-sh-sm);
}
#app .box h3, #app .e2-kart-bas { color: var(--v2-ink); font-weight: 650; }
#app :is(.kpi, .e2-k, .f4-kpi, .gt-kpi-s, .bg-oz-c):not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host) *) { background: var(--v2-surface); border-color: var(--v2-line); color: var(--v2-ink); }
#app :is(.kpi, .e2-k, .f4-kpi) :is(b, strong, .k-val, .f4-kpi-v) { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
#app :is(.num, .n, td.n, .mono) { font-variant-numeric: tabular-nums; }

/* ================= TABLO ================= */
#app :is(.tbl-x, .grid-wrap) { background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: var(--v2-r); box-shadow: var(--v2-sh-sm); }
#app table:not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host, .grid, .sg-app, .inv-app, .sema-app, .pl2-takvim, .crm-kayit-grid)):not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host, .grid, .sg-app, .inv-app, .sema-app, .pl2-takvim, .crm-kayit-grid) *) { border-color: var(--v2-line); }
#app table:not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host, .grid, .sg-app, .inv-app, .sema-app, .pl2-takvim, .crm-kayit-grid)):not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host, .grid, .sg-app, .inv-app, .sema-app, .pl2-takvim, .crm-kayit-grid) *) thead th,
#app table:not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host, .grid, .sg-app, .inv-app, .sema-app, .pl2-takvim, .crm-kayit-grid)):not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host, .grid, .sg-app, .inv-app, .sema-app, .pl2-takvim, .crm-kayit-grid) *) tr:first-child > th:is(:first-child, :not(:first-child)) {
  background: var(--v2-surface-2); color: var(--v2-muted); font-size: var(--v2-th-fs); font-weight: 650; letter-spacing: var(--v2-th-ls); text-transform: uppercase;
  border-bottom: 1px solid var(--v2-line); position: sticky; top: 0; z-index: 1;
}
#app table:not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host, .grid, .sg-app, .inv-app, .sema-app, .pl2-takvim, .crm-kayit-grid)):not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host, .grid, .sg-app, .inv-app, .sema-app, .pl2-takvim, .crm-kayit-grid) *) thead th :is(small, span, i, em) { color: inherit; opacity: .85; }
#app table:not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host, .grid, .sg-app, .inv-app, .sema-app, .pl2-takvim, .crm-kayit-grid)):not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host, .grid, .sg-app, .inv-app, .sema-app, .pl2-takvim, .crm-kayit-grid) *) td { border-color: var(--v2-line-2); color: var(--v2-ink); }
#app table:not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host, .grid, .sg-app, .inv-app, .sema-app, .pl2-takvim, .crm-kayit-grid)):not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host, .grid, .sg-app, .inv-app, .sema-app, .pl2-takvim, .crm-kayit-grid) *) tbody tr:hover > td { background: color-mix(in srgb, var(--v2-brand) 5%, var(--v2-surface)); }

/* ================= FORM ALANLARI ================= */
:is(#app, body > dialog, .ara-k) :is(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden]), select, textarea):not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host) *):not(.ara-i *) {
  font-family: inherit; font-size: var(--v2-fs); color: var(--v2-ink); background-color: var(--v2-surface);
  border: 1px solid var(--v2-line); border-radius: var(--v2-r-sm); transition: border-color var(--v2-hizli), box-shadow var(--v2-hizli);
}
:is(#app, body > dialog) :is(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden]), select):not(table *):not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host) *):not(.ara-i *) { min-height: var(--v2-h-ctl); }
:is(#app, body > dialog) :is(input, select, textarea):not([type=checkbox], [type=radio]):hover:not(:disabled) { border-color: var(--v2-faint); }
:is(#app, body > dialog) :is(input, select, textarea):not([type=checkbox], [type=radio]):not(.ara-i *):focus { outline: 2px solid transparent; border-color: var(--v2-brand); box-shadow: var(--v2-ring); }
:is(#app, body > dialog) :is(input, select, textarea)::placeholder { color: var(--v2-ph); }
:is(#app, body > dialog) :is(input, select, textarea):disabled { background: var(--v2-surface-3); color: var(--v2-muted); }
:is(#app, body > dialog) :is(input[type=checkbox], input[type=radio], input[type=range]) { accent-color: var(--v2-brand); }
:is(#app, body > dialog) label { color: var(--v2-ink-2); }

/* ================= DÜĞMELER ================= */
:is(#app, body > dialog) :is(.primary, .ghost, .danger, .btn-k):not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host) *) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--v2-h-btn); padding-block: 0; padding-inline: 14px;
  border-radius: var(--v2-r-sm); font-size: 13.5px; font-weight: 600; line-height: 1.2; transition: background var(--v2-hizli), border-color var(--v2-hizli), color var(--v2-hizli);
}
:is(#app, body > dialog) :is(.primary, .btn-k-ana):not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host) *) { background: var(--v2-brand); border: 1px solid var(--v2-brand); color: var(--v2-brand-ink); box-shadow: var(--v2-sh-sm); }
:is(#app, body > dialog) :is(.primary, .btn-k-ana):not(:disabled):hover { background: color-mix(in srgb, var(--v2-brand) 86%, #000); border-color: transparent; }
:is(#app, body > dialog) .primary:disabled { background: var(--v2-surface-3); border-color: var(--v2-line); color: var(--v2-muted); box-shadow: none; }
:is(#app, body > dialog) :is(.ghost, .btn-k:not(.btn-k-ana)):not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host) *) { background: var(--v2-surface); border: 1px solid var(--v2-line); color: var(--v2-ink); }
:is(#app, body > dialog) :is(.ghost, .btn-k:not(.btn-k-ana)):not(:disabled):hover { background: var(--v2-surface-2); border-color: var(--v2-brand); color: var(--v2-brand); }
:is(#app, body > dialog) .danger { background: var(--v2-bad); border: 1px solid var(--v2-bad); color: #fff; }
:is(#app, body > dialog) .danger:not(:disabled):hover { background: color-mix(in srgb, var(--v2-bad) 86%, #000); }
:is(#app, body > dialog) :is(.primary, .ghost, .danger).sm { min-height: 30px; padding-inline: 10px; font-size: 12.5px; }
:is(#app, body > dialog) :is(.primary, .ghost, .danger):disabled { cursor: not-allowed; }
:is(#app, body > dialog) .link { color: var(--v2-brand); }

/* ================= ROZET VE ÇİP ================= */
#app .chip:not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host) *) { background: var(--v2-surface); border: 1px solid var(--v2-line); color: var(--v2-muted); border-radius: var(--v2-chip-r); padding: var(--v2-chip-pad); font-size: var(--v2-chip-fs); font-weight: 500; }
#app .chip.on, #app .chip[aria-pressed="true"], #app .chip[aria-selected="true"] { background: color-mix(in srgb, var(--v2-brand) 12%, var(--v2-surface)); border-color: var(--v2-brand); color: var(--v2-brand); box-shadow: none; }
#app .chip.on b { color: inherit; }
/* alt çizgili sekme (ayrı bileşen): <div class="v2-sekme"><button class="on">..</button></div> */
#app .v2-sekme { display: flex; gap: var(--v2-s1); border-bottom: 1px solid var(--v2-line); overflow-x: auto; }
#app .v2-sekme > :is(button, a) { padding: 10px 14px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--v2-muted); font: 600 13.5px var(--v2-font); cursor: pointer; white-space: nowrap; }
#app .v2-sekme > :is(button, a):hover { color: var(--v2-ink); }
#app .v2-sekme > :is(.on, [aria-selected="true"], [aria-current]) { color: var(--v2-brand); border-bottom-color: var(--v2-brand); }
#app :is(.main .bdg, .mbar .bdg) { border-radius: 8px; }

/* ================= SEKME ================= */
#app :is(.crm-seg, .a2-sekme, .hesap-sekme, .f4-seg) { border-color: var(--v2-line); }
#app :is(.crm-seg, .hesap-sekme) button { color: var(--v2-muted); font-weight: 600; }
#app :is(.crm-seg, .hesap-sekme) button:hover { color: var(--v2-ink); background: var(--v2-surface-3); }
#app :is(.crm-seg, .hesap-sekme) button.on { color: var(--v2-brand); border-bottom-color: var(--v2-brand); background: color-mix(in srgb, var(--v2-brand) 8%, transparent); }

/* ================= AÇILIR MENÜLER ================= */
#app :is(.um-menu, .yeni-menu, .acts-menu), .zil-panel, .fp-menu { background: var(--v2-surface); color: var(--v2-ink); border: 1px solid var(--v2-line); border-radius: 10px; box-shadow: var(--v2-sh-lg); }
#app :is(.um-menu button[role=menuitem], .yeni-menu button, .acts-menu button):hover,
#app :is(.um-menu button[role=menuitem], .yeni-menu button, .acts-menu button):focus-visible { background: var(--v2-surface-3); }
#app .yeni-menu button .ik { color: var(--v2-brand); }

/* ================= MODAL / DİYALOG (.dlg, .dg, .pn) ================= */
dialog:is(.dlg, .dg, .pn) { background: var(--v2-surface); color: var(--v2-ink); border: 0; border-radius: var(--v2-r-lg); box-shadow: var(--v2-sh-lg); font-family: var(--v2-font); }
dialog:is(.dlg, .dg, .pn)::backdrop { background: rgba(14, 21, 48, .5); }
dialog:is(.dlg, .dg, .pn) :is(h2, .dg-ust h2) { font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; color: var(--v2-ink); }
dialog:is(.dlg, .dg, .pn) .dg-ust { border-bottom: 1px solid var(--v2-line-2); }
dialog:is(.dlg, .dg, .pn) .dg-alt, dialog.dlg .dlg-a { border-top: 1px solid var(--v2-line-2); background: var(--v2-surface-2); }

/* ================= TOAST ================= */
:is(#toast, .tst) { background: var(--v2-ink); color: #fff; border-radius: var(--v2-r); font-family: var(--v2-font); box-shadow: var(--v2-sh-lg); }
:is(#toast, .tst).bad { background: var(--v2-bad); }

/* ================= KOMUT PALETİ ================= */
.ara-k { background: var(--v2-surface); color: var(--v2-ink); border-radius: var(--v2-r-lg); box-shadow: var(--v2-sh-lg); font-family: var(--v2-font); }
.ara-k .ara-i { border-bottom: 1px solid var(--v2-line); }
.ara-k .ara-o:is(:hover, .on, [aria-selected="true"]) { background: color-mix(in srgb, var(--v2-brand) 9%, transparent); }
.ara-k .ara-b { color: var(--v2-muted); }

/* ================= İSKELET / BOŞ DURUM ================= */
#app .durum { color: var(--v2-muted); } #app .durum b { color: var(--v2-ink); }
.v2-iskelet { display: block; min-height: 1em; border-radius: var(--v2-r-sm); background: linear-gradient(90deg, var(--v2-surface-3) 25%, var(--v2-line-2) 37%, var(--v2-surface-3) 63%); background-size: 400% 100%; animation: v2Parla 1.4s ease infinite; }
@keyframes v2Parla { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ================= ALT ÇUBUK (mobil) ================= */
#app .mbar { background: var(--v2-surface); border-top: 1px solid var(--v2-line); }
#app .mbar :is(a, button) { color: var(--v2-muted); }
#app .mbar :is(a.on, a[aria-current], button.on) { color: var(--v2-brand); }

/* ================= DUYARLILIK ================= */
@media (max-width: 1100px) { #app .top { padding-inline: var(--v2-s4); } #app .pg-bas { padding-inline: var(--v2-s4); } }
@media (max-width: 900px) { #app .pg-bas h1 { font-size: 1.3rem; } #app .pg-bas { padding-block-start: var(--v2-s4); } }
@media (max-width: 640px) {
  #app .top { padding-inline: var(--v2-s3); gap: var(--v2-s2); }
  #app .pg-bas h1 { font-size: 1.2rem; }
  :is(#app, body > dialog) :is(input:not([type=checkbox],[type=radio]), select, textarea) { font-size: 16px; }   /* iOS yakınlaştırmasını önler */
}

/* ================= HAREKET AZALTMA ================= */
@media (prefers-reduced-motion: reduce) {
  #app *, dialog *, #toastKap *, .ara-k * { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .v2-iskelet { animation: none; }
}

/* ================= #app dışı yüzeyler (body'ye eklenenler) ================= */
.zil-panel, .fp-menu { background: var(--v2-surface); color: var(--v2-ink); border: 1px solid var(--v2-line); border-radius: 10px; box-shadow: var(--v2-sh-lg); font-family: var(--v2-font); }
.zil-panel :is(h2, h3, b) { color: var(--v2-ink); }
.zil-panel li:hover, .fp-menu button:is(:hover, :focus-visible) { background: var(--v2-surface-3); }
.fp-menu button { color: var(--v2-ink); font-family: inherit; }
.sh-toast { background: var(--v2-ink); color: #fff; border-radius: var(--v2-r); box-shadow: var(--v2-sh-lg); font-family: var(--v2-font); }
.iy-perde .iy-yan { background: var(--v2-surface); color: var(--v2-ink); font-family: var(--v2-font); box-shadow: var(--v2-sh-lg); }
.iy-perde :is(input, select, textarea):not([type=checkbox], [type=radio]) { font-family: inherit; border: 1px solid var(--v2-line); border-radius: var(--v2-r-sm); min-height: var(--v2-h-ctl); background: var(--v2-surface); color: var(--v2-ink); }
.iy-perde :is(input, select, textarea):focus { outline: 2px solid transparent; border-color: var(--v2-brand); box-shadow: var(--v2-ring); }
.iy-perde :is(button.primary, .primary) { background: var(--v2-brand); color: var(--v2-brand-ink); border-radius: var(--v2-r-sm); }
.pwa-bnr { font-family: var(--v2-font); border-color: var(--v2-line); }
.zil-panel :is(a, button):focus-visible, .fp-menu button:focus-visible, .iy-perde :is(a, button):focus-visible { outline: 2px solid var(--v2-focus); outline-offset: 2px; }

/* ================= düzeltmeler ================= */
/* liste kapsayıcısı: dar alanda sütun kesilmesin, yatay kaydır */
/* Müşteriler: .tbl-x zaten yatay kaydırılır (eski tasarımda da böyle); V2 yalnız kaydırma çubuğunu inceltir */
#app .tbl-x { scrollbar-width: thin; }
/* tarih ile ad arasında boşluk */
#app li > .bg-saat, #app .bg-l li .bg-saat { margin-inline-end: var(--v2-s3); white-space: nowrap; }
/* mobil alt çubuk rozeti ekran dışına taşmasın */
#app .mbar .bdg { left: auto; right: 4px; max-width: 40px; overflow: hidden; text-overflow: ellipsis; padding-inline: 4px; }
[dir="rtl"] #app .mbar .bdg { right: auto; left: 4px; }
/* menü sağda (data-menu="R"): çizgi kenarı içe bakar */
#app[data-menu="R"] .side:not(.side-cekmece) { border-inline-end: 0; border-inline-start: 1px solid var(--v2-side-line); }

/* =====================================================================================================
   AGENCY KABUĞU (yapısal). Yalnız kabuk.js #app[data-v2] işaretini koyduğunda ve ≥821 px'te geçerli;
   JS yoksa ya da dar ekranda eski düzen (alt çubuk + çekmece) aynen çalışır.
   ===================================================================================================== */
@media (min-width: 820px) {
  #app[data-v2] { --v2-col: var(--v2-side-w); padding-inline-start: var(--v2-col); min-height: 100vh; }
  #app[data-v2][data-dar="1"] { --v2-col: 68px; }
  #app[data-v2][data-menu="R"] { padding-inline-start: 0; padding-inline-end: var(--v2-col); }
  #app[data-v2] .govde { display: block; }
  /* yan menü: tüm yükseklik, sabit; üst çubuk yalnız içerik sütununun üstünde */
  #app[data-v2] .govde > .side:not(.side-cekmece) {
    position: fixed; inset-block: 0; inset-inline-start: 0; inset-inline-end: auto; width: var(--v2-col); height: 100vh; height: 100dvh; max-height: none; top: 0; z-index: 40;
  }
  #app[data-v2][data-menu="R"] .govde > .side:not(.side-cekmece) { inset-inline-start: auto; inset-inline-end: 0; }
  #app[data-v2] .top { position: sticky; top: 0; z-index: 30; }
}
@media (min-width: 820px) and (max-width: 1180px) { #app[data-v2] { --v2-col: 68px; } }

/* marka bloğu (yan menünün başı) */

/* gruplu düz menü */
#app .side-ust { gap: 0; padding: var(--v2-s2) var(--v2-s2) var(--v2-s4); }
#app .v2-grp { display: flex; align-items: center; gap: 6px; width: 100%; margin: 0; padding: 16px 10px 6px; border: 0; background: none; color: color-mix(in srgb, var(--v2-side-ink) 75%, transparent); font: 650 .66rem var(--v2-font); letter-spacing: .1em; text-transform: uppercase; text-align: start; cursor: pointer; }
#app .v2-grp:hover { color: var(--v2-side-ink-strong); }
#app .v2-grp-ad { flex: 1; min-width: 0; }
#app .v2-grp .ik { flex: none; transition: transform .15s ease; }
#app .v2-grp[aria-expanded="false"] .ik { transform: rotate(-90deg); }
[dir="rtl"] #app .v2-grp[aria-expanded="false"] .ik { transform: rotate(90deg); }
#app .v2-grp-rz { flex: none; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--v2-gold-bright); color: var(--v2-side-badge-ink, #1b1405); font-size: .62rem; letter-spacing: 0; text-align: center; line-height: 1.4; }
#app .v2-grp-rz[hidden] { display: none; }
#app .v2-sec { display: block; }
#app .v2-sec.v2-kapali { display: none; }
#app .v2-sec > .si-w { margin: 1px 0; }
#app .side .si .bdg { margin-inline-start: auto; border-radius: 999px; padding-inline: 7px; min-width: 20px; line-height: 18px; }
#app .nav-fav { padding: 16px 10px 6px; font: 650 .66rem var(--v2-font); letter-spacing: .1em; text-transform: uppercase; color: var(--v2-gold-bright); }
#app .side .side-tog { margin: 0; padding: var(--v2-s3) var(--v2-s4); border-top: 1px solid var(--v2-side-line); font-size: 13px; font-weight: 500; }

/* simge modu (68 px): başlıklar ince çizgiye iner, tüm bölümler açık görünür */
#app[data-dar="1"] .v2-grp { visibility: hidden; height: 10px; padding: 0; overflow: hidden; }
#app[data-dar="1"] .v2-sec.v2-kapali { display: block; }
@media (min-width: 820px) and (max-width: 1180px) {
  #app .side:not(.side-cekmece) .v2-grp { visibility: hidden; height: 10px; padding: 0; overflow: hidden; }
  #app .side:not(.side-cekmece) .v2-sec.v2-kapali { display: block; }
}
/* çekmece: başlıklar görünür kalır */
#app[data-dar="1"] .side-cekmece .v2-grp { visibility: visible; height: auto; padding: 16px 10px 6px; }

/* ================= SAYFA BAŞLIĞI (Agency kalıbı: h1 + alt yazı solda, eylem sağda) ================= */
#app .pg-bas { align-items: center; gap: var(--v2-s3) var(--v2-s4); }
#app .pg-bas-m { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--v2-s3); }
#app .pg-bas-m h1 { order: 1; }
#app .pg-bas-m .pg-bas-et { order: 2; margin: 0; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--v2-muted); }
#app .pg-bas-m .pg-bas-et a { color: inherit; }
#app .pg-bas-m .pg-bas-et a:hover { color: var(--v2-brand); }
#app .pg-bas-act .pg-yildiz { border: 1px solid var(--v2-line); border-radius: var(--v2-r-sm); background: var(--v2-surface); color: var(--v2-ink-2); min-height: 32px; padding-inline: var(--v2-s3); }

/* ================= KPI KARTLARI: bitişik şerit yerine ayrı kartlar (Agency .kpi) ================= */
#app main[data-v] :is(.kpis, .oz-kpi, .oz-para, .sl-k, .f4-kpis, .r2-kpi, .gt-kpi-s, .e2-kpi:not(.e2-env-kpi):not(.e2-sema-kpi)) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--v2-s4);
  background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; overflow: visible; margin-block: 0 var(--v2-s4);
}
#app main[data-v] :is(.kpis, .oz-kpi, .oz-para, .sl-k, .f4-kpis, .r2-kpi, .gt-kpi-s, .e2-kpi:not(.e2-env-kpi):not(.e2-sema-kpi)) > :is(.kpi, .f4-kpi, .r2-k, .gt-kpi, .e2-k) {
  background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: var(--v2-r); box-shadow: var(--v2-sh-sm);
  padding: var(--v2-kpi-pad); margin: 0; min-width: 0;
}
#app main[data-v] :is(.kpis, .oz-kpi, .oz-para, .sl-k, .f4-kpis, .r2-kpi) > :is(.kpi, .f4-kpi, .r2-k) :is(b, strong) { font-size: var(--v2-kpi-val-size); font-weight: var(--v2-kpi-val-weight); letter-spacing: -.02em; line-height: 1.2; }
#app main[data-v] .oz-kpi > .oz-dagilim { grid-column: 1 / -1; }
#app main[data-v] .oz-kpi > .kpi::before { display: none; }

/* ================= KART İÇ BOŞLUĞU VE TABLO YOĞUNLUĞU ================= */
#app main :is(.box, .e2-kart, .ay-card) { padding: var(--v2-s4) 20px; }
#app main :is(.box, .e2-kart) > h3:first-child { font-size: .95rem; margin-bottom: var(--v2-s3); }
#app table:not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host, .grid, .sg-app, .inv-app, .sema-app, .pl2-takvim, .crm-kayit-grid)):not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host, .grid, .sg-app, .inv-app, .sema-app, .pl2-takvim, .crm-kayit-grid) *) :is(td) { padding: var(--v2-td-pad); }
#app main:not(#_) table:not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host, .grid, .sg-app, .inv-app, .sema-app, .pl2-takvim, .crm-kayit-grid)):not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host, .grid, .sg-app, .inv-app, .sema-app, .pl2-takvim, .crm-kayit-grid) *) th { padding: var(--v2-th-pad); }   /* :not(#_) = ID özgüllüğü: ekran CSS'lerinin 10px 8px/12px dolgusunu ezer */
#app table:not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host, .grid, .sg-app, .inv-app, .sema-app, .pl2-takvim, .crm-kayit-grid)):not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host, .grid, .sg-app, .inv-app, .sema-app, .pl2-takvim, .crm-kayit-grid) *) tbody tr:last-child td { border-bottom: 0; }

/* üst çubuk: Agency düzeni (solda arama, sağda Yeni + zil + kullanıcı) */
@media (min-width: 1181px) { #app[data-v2] .top .ara-alan { flex: 0 1 560px; max-width: 560px; } }   /* RU/AZ uzun placeholder sığsın */
#app[data-v2] .top .who { margin-inline-start: auto; gap: var(--v2-s2); }

/* simge modunda rozet küçük kalır (4 haneli sayı simgeyi kapatmasın) */
#app[data-dar="1"] .side:not(.side-cekmece) .si .bdg { padding-inline: 3px; min-width: 16px; font-size: 10px; line-height: 15px; right: 2px; top: 2px; max-width: 38px; overflow: hidden; }
[dir="rtl"] #app[data-dar="1"] .side:not(.side-cekmece) .si .bdg { right: auto; left: 2px; }
@media (min-width: 820px) and (max-width: 1180px) {
  #app .side:not(.side-cekmece) .si .bdg { padding-inline: 3px; min-width: 16px; font-size: 10px; line-height: 15px; right: 2px; top: 2px; max-width: 38px; overflow: hidden; }
  [dir="rtl"] #app .side:not(.side-cekmece) .si .bdg { right: auto; left: 2px; }
  /* dar masaüstü: üst çubuk tek satırda kalsın; arama simgeye iner */
  #app[data-v2] .top { flex-wrap: nowrap; }
  #app[data-v2] .top .ara-alan { flex: 0 0 36px; width: 36px; padding: 0; justify-content: center; }
  #app[data-v2] .top .ara-alan :is(span, kbd) { display: none; }
  #app[data-v2] .top .brand { min-width: 0; flex: 0 1 auto; }
  #app[data-v2] .top .brand select { max-width: 150px; }
  #app[data-v2] .top .um-ad { display: none; }
}

/* ================= YAZDIRMA: V2'nin eklediği görünümü geri al (belge CSS'ine dokunulmaz) ================= */
@media print {
  #app[data-v2] { padding-inline: 0 !important; }   /* !important: ekran/menü kuralları (#app[data-menu] ...) aynı özgüllükte; yazdırmada yan menü boşluğu kesin sıfırlanmalı */
  #app[data-v2] .top, #app[data-v2] .govde > .side:not(.side-cekmece) { position: static; }
  #app table thead th, #app table tr:first-child > th { position: static; z-index: auto; text-transform: none; letter-spacing: normal; }
  #app :is(.box, .kpi, .e2-kart, .tbl-x) { box-shadow: none; }
  #app table tbody tr:hover > td { background: transparent; }
}

/* ================= TEMA DÜĞMESİ (üst çubuk) ================= */
#app .top .v2-tema-btn { flex: none; width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: var(--v2-r); background: transparent; color: var(--v2-ink-2); cursor: pointer; }
#app .top .v2-tema-btn:hover { background: var(--v2-surface-3); color: var(--v2-ink); }

/* ================= MOBİL ÇEKMECE: üst blok kırpılmasın ================= */
.drw .side-cekmece { overflow: hidden; display: flex; flex-direction: column; }
.drw .side-cekmece .drw-ust, .drw .side-cekmece .drw-proj { flex: none; height: auto; overflow: visible; }
.drw .side-cekmece .drw-proj { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v2-s2); padding: var(--v2-s3) var(--v2-s4); }
.drw .side-cekmece .drw-proj small { flex: 1 1 100%; }
.drw .side-cekmece .drw-proj select { flex: 1 1 auto; min-width: 0; }
.drw .side-cekmece .side-ust { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* ================= SEÇİLİ ÇİP: tema rengini (--v2-brand) izler; ekran CSS'lerinin koyu/beyaz seçili çipini ezer ================= */
#app main:not(#_) .chip.on { background: color-mix(in srgb, var(--v2-brand) 12%, var(--v2-surface)); border-color: var(--v2-brand); color: var(--v2-brand); box-shadow: none; }
#app main:not(#_) .chip.on b { background: var(--v2-brand); color: var(--v2-brand-ink); }

/* ================= KOYU TEMA ÖZEL GEÇERSİZ KILMALAR (:root[data-v2-mod=koyu]) =================
   Değişken köprüsü (tokens.css) çoğu yüzeyi zaten koyultur; burada eski CSS'lerin sabit yazdığı yerler düzeltilir.
   Belge alanları (.stage .scaler .page .pl .pg .pg-sema .vsc .xk-t .ts-kagit .pdf-host) hiçbir zaman koyulaşmaz. */
:root[data-v2-mod="koyu"] #app { --alr-kirmizi: #ff8b80; --alr-sari: #f0b14d; --alr-kirmizi-yazi: #ff8b80; --alr-sari-yazi: #f0b14d; }
:root[data-v2-mod="koyu"] #app .kirmizi-bar { background: var(--v2-bad-soft); color: var(--v2-bad-text); border-bottom-color: color-mix(in srgb, var(--v2-bad) 35%, transparent); }
:root[data-v2-mod="koyu"] #app .kirmizi-bar :is(a, b, u) { color: var(--v2-bad-text); }
:root[data-v2-mod="koyu"] #app :is(.kisi-av, .gt-av, .mt-sor-av, .fp-av, .um-av, .avatar) { background: var(--v2-surface-3); color: var(--v2-brand); }
:root[data-v2-mod="koyu"] #app .top .um-av { background: var(--v2-brand); color: var(--v2-brand-ink); }
:root[data-v2-mod="koyu"] #app .top .ap-rozet { color: var(--v2-gold); }
:root[data-v2-mod="koyu"] :is(dialog, .ara-k, .zil-panel, .fp-menu, .iy-yan) { background: var(--v2-surface); color: var(--v2-ink); }
:root[data-v2-mod="koyu"] dialog::backdrop { background: rgba(0, 0, 0, .65); }
:root[data-v2-mod="koyu"] :is(#toast, .tst, .sh-toast) { background: var(--v2-surface-3); color: var(--v2-ink); border: 1px solid var(--v2-line); }
:root[data-v2-mod="koyu"] :is(#toast, .tst).bad { background: var(--v2-bad-soft); color: var(--v2-bad-text); }
:root[data-v2-mod="koyu"] select option { background: var(--v2-surface); color: var(--v2-ink); }
:root[data-v2-mod="koyu"] #app :is(.um-menu, .yeni-menu, .acts-menu) { background: var(--v2-surface); color: var(--v2-ink); }
:root[data-v2-mod="koyu"] #app .primary:disabled { color: var(--v2-muted); }
:root[data-v2-mod="koyu"] #app :is(.box, .e2-kart, .kutu, .ay-card, .a2-bolum, .fp-kart, .alr-kutu, .mt-kart, .kpi, .f4-kpi, .r2-k, .gt-kpi) { background: var(--v2-surface); color: var(--v2-ink); }
:root[data-v2-mod="koyu"] #app :is(.mbar, .pwa-bnr) { background: var(--v2-surface); }
html[data-v2-kabuk][data-v2-mod="koyu"] body { background: var(--v2-canvas); }
/* belge alanı koyuda da beyaz kâğıt kalır */
:root[data-v2-mod="koyu"] :is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host) { color-scheme: light; }
:root[data-v2-mod="koyu"] :is(.page, .pl, .pg, .pg-sema, .ts-kagit) { background-color: #fff; }
:is(#app, body > dialog) :is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host) { color: var(--v2-ink0, #232323); }   /* belge metni kabuğun (koyuda açık) rengini miras almasın */
:root[data-v2-mod="koyu"] #app .mk { background: var(--v2-surface-3); color: var(--v2-ink-2); }
.drw .side-cekmece .drw-proj select { height: var(--v2-h-btn); border: 1px solid var(--v2-side-line); border-radius: var(--v2-r); background-color: var(--v2-side-2); color: var(--v2-side-ink-strong); font-weight: 600; padding-inline: var(--v2-s3); }
.drw .side-cekmece .drw-proj .ap-rozet { background: color-mix(in srgb, var(--v2-gold-bright) 22%, transparent); color: var(--v2-gold-bright); border: 1px solid color-mix(in srgb, var(--v2-gold-bright) 45%, transparent); border-radius: 999px; }
@media (max-width: 480px) {
  #app .top { gap: 4px; padding-inline: var(--v2-s2); }
  #app .top .v2-tema-btn { width: 32px; height: 36px; }
  #app .top .brand img { height: 20px; max-width: 96px; object-fit: contain; }
  #app .top .who { gap: 2px; }
}

/* ================= SAYFA ALTI, ALT BİLGİ, ROZET KONTRASTI ================= */
html[data-v2-kabuk] { background: var(--v2-canvas); }
html[data-v2-kabuk] body { color: var(--v2-ink); }
html[data-v2-kabuk] body footer.azt-alt, html[data-v2-kabuk] body footer.azt-alt a { color: var(--v2-muted); }
html[data-v2-kabuk] body footer.azt-alt .azt-surum { color: var(--v2-ink-2); background: color-mix(in srgb, var(--v2-brand) 12%, transparent); }
#app .top .zil-say, #app .bdg.bdg-alarm, #app :is(.side, .mbar, .nav-grp) .bdg.bdg-alarm { background: var(--v2-bad-solid); color: #fff; }

/* ================= ORTAK TUTARLILIK ================= */
/* sayfa yan boşluğu: tüm ekranlarda tek değer (sohbet/inbox tam yükseklik ekranları ve belge sahneleri hariç) */
#app[data-v2] main[data-v]:not([data-v="sohbet"]):not(.stage):not(:has(> .stage)) { padding-inline: var(--v2-page-px); }
/* çip: pill ve ortak ölçü; sekme/segment gibi çubuk içindeki çipler (kendi köşeli biçimi) hariç */
#app main:not(#_) .chip:not(:is([class*="seg"], [class*="sekme"], [class*="tab"], [role="tablist"]) > .chip) { padding: var(--v2-chip-pad); font-size: var(--v2-chip-fs); border-radius: var(--v2-chip-r); }

/* ================= KOYU: beyaz yazılı dolu (navy) düğme/etiketler okunur kalsın ================= */
:root[data-v2-mod="koyu"] #app :is(.sy-d.on, .fp-cip.on, .bugun .e2-tv-d) { color: var(--v2-brand-ink); }
:root[data-v2-mod="koyu"] #app :is(.sy-d.on, .fp-cip.on, .bugun .e2-tv-d) :is(b, span, i) { color: inherit; }
:root[data-v2-mod="koyu"] #app main:not(#_) .why { color: var(--v2-warn-text); }
:root[data-v2-mod="koyu"] #app :is(.primary, .btn-k-ana):not(:disabled) { color: var(--v2-brand-ink); }
:root[data-v2-mod="koyu"] #app main:not(#_) :is(.fx-z, .iy-r-tamamlandi) { color: var(--v2-good-text); }
:root[data-v2-mod="koyu"] #app main:not(#_) .fx-z { color: var(--v2-bad-text); }


/* =====================================================================================================
   AGENCY BİREBİR (ölçüler agency-gercek/YAPI.md + olcum*.json): yan menü, üst çubuk, sayfa başlığı, kart, KPI,
   tablo, çip, sekme, düğme, form, modal, menü, palet. Bu bölüm yukarıdaki genel kuralları ince ayarlar.
   ===================================================================================================== */
/* ---- yan menü: marka bloğu (56px, altın gradyanlı işaret + ad + alt yazı) ---- */
#app .v2-marka { flex: none; border-bottom: 1px solid var(--v2-side-line); }
#app .v2-brand { display: flex; align-items: center; gap: 11px; height: 56px; padding: 8px 10px 8px 18px; color: var(--v2-side-ink-strong); font-weight: 650; letter-spacing: -.01em; text-decoration: none; }
#app .v2-brand:hover { text-decoration: none; }
#app .v2-brand-mark { flex: none; width: 30px; height: 30px; border-radius: 7px; background: linear-gradient(140deg, #d9b25f, #b98a2f); color: #1b1405; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
#app .v2-brand .bt { font-size: 14px; font-weight: 500; line-height: 1.2; min-width: 0; }
#app .v2-brand .bt small { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-side-ink); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
/* proje seçici ve ana kur rozeti: bloğun altında, küçük */
#app .v2-marka-ek { padding: 0 var(--v2-s3) var(--v2-s3); }
#app:not([data-v2marka]) .v2-marka-ek { display: none; }
#app .v2-marka-ek .brand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; color: var(--v2-side-ink-strong); }
#app .v2-marka-ek .brand img { display: none; }
#app .v2-marka .v2-marka-ek .brand select { flex: 1 1 100%; min-width: 0; height: 30px; padding-block: 0; border: 1px solid var(--v2-side-line); border-radius: 6px; background-color: var(--v2-side-2); color: var(--v2-side-ink-strong); font-size: 12px; font-weight: 600; }
#app .v2-marka-ek .brand > span:not(.ap-rozet) { display: none; }   /* tek projede ad zaten alt yazıda */
#app .v2-marka .v2-marka-ek .brand .ap-rozet { margin: 0; padding: 1px 8px; font-size: 10.5px; background: color-mix(in srgb, var(--v2-gold-bright) 20%, transparent); color: var(--v2-gold-bright); border: 1px solid color-mix(in srgb, var(--v2-gold-bright) 40%, transparent); border-radius: 999px; }
/* ---- yan menü: liste ---- */
#app .side-ust { padding: 10px 10px 16px; gap: 0; }
#app .v2-grp { padding: 16px 10px 6px; font: 650 10.5px var(--v2-font); letter-spacing: .08em; color: var(--v2-side-grup); }
#app .v2-grp:hover { color: var(--v2-side-ink); }
#app .v2-grp .ik { opacity: 0; width: 12px; height: 12px; transition: opacity var(--v2-hizli), transform .15s ease; }   /* ok yalnız üzerine gelince/odakta (Agency'de yok; kapanma işlevi kalır) */
#app .v2-grp:is(:hover, :focus-visible) .ik, #app .v2-grp[aria-expanded="false"] .ik { opacity: .7; }
#app .v2-grp-rz { border-radius: 4px; font-size: 10.5px; font-weight: 800; padding: 1px 6px; text-transform: none; }
#app .side .si { min-height: 37px; padding: 8px 10px; margin: 0; gap: 11px; border-radius: 7px; font-size: 14px; font-weight: 500; line-height: 1.4; }
#app .v2-sec > .si-w { margin: 1px 0; }
#app .side .si .ik { width: 18px; height: 18px; opacity: .9; }
#app .side .si.on { background: var(--v2-side-2); color: var(--v2-side-ink-strong); box-shadow: inset 2px 0 0 var(--v2-gold-bright); font-weight: 500; }
[dir="rtl"] #app .side .si.on { box-shadow: inset -2px 0 0 var(--v2-gold-bright); }
#app .side .si.on::before { display: none; }
#app .side .si .bdg { margin-inline-start: auto; padding: 1px 6px; min-width: 0; border-radius: 4px; font-size: 10.5px; font-weight: 800; line-height: 1.6; letter-spacing: .04em; }
#app .side .side-tog { padding: 10px; margin: 0; border-top: 1px solid var(--v2-side-line); gap: 11px; font-size: 14px; font-weight: 400; border-radius: 0; min-height: 57px; }
#app .side .side-tog span { padding-inline: 0; }
/* daraltılmış: yalnız işaret */
#app[data-dar="1"] .v2-brand { padding-inline: 19px; } #app[data-dar="1"] .v2-brand .bt, #app[data-dar="1"] .v2-marka-ek { display: none; }
@media (min-width: 820px) and (max-width: 1180px) { #app .side:not(.side-cekmece) .v2-brand { padding-inline: 19px; } #app .side:not(.side-cekmece) .v2-brand .bt, #app .side:not(.side-cekmece) .v2-marka-ek { display: none; } }

/* ---- üst çubuk ---- */
#app .top { gap: 10px; padding-inline: 24px; }
#app .top .ara-alan { height: 36px; padding: 0 12px; gap: 9px; border-radius: 8px; font-size: 14px; }
#app .top .ara-alan kbd { font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 5px; }
#app .top .yeni-btn { height: 37px; padding: 7px 13px; gap: 7px; border-radius: 6px; font-size: 14px; font-weight: 550; }
#app .top .who { gap: 6px; }
#app .top :is(.zil-btn, .v2-tema-btn, .mnu-btn) { width: 36px; height: 36px; border-radius: 8px; }
#app .top .zil-say { min-width: 18px; height: 18px; font-size: 10.5px; font-weight: 700; border: 2px solid var(--v2-surface); border-radius: 8px; line-height: 14px; }
#app .top .um-btn { padding: 3px 8px 3px 3px; gap: 9px; border-radius: 999px; min-height: 43px; }
#app .top .um-av { width: 30px; height: 30px; font-size: 10.08px; font-weight: 700; }
#app .top .um-ad { font-size: 12.04px; font-weight: 600; }
@media (max-width: 640px) { #app .top .ara-alan { width: 40px; min-width: 40px; padding: 0; justify-content: center; } #app .top .ara-alan :is(span, kbd) { display: none; } }

/* ---- sayfa başlığı: h1 + alt yazı solda, eylemler sağda; kırıntı Agency'de yok (görsel gizli, erişilebilir), Favori küçük ---- */
#app .pg-bas { padding-block: 24px 0; gap: 12px; margin-bottom: 20px; }
#app .pg-bas h1 { font-size: 21px; font-weight: 650; letter-spacing: -.02em; line-height: 1.5; }
#app .pg-bas-m .pg-bas-et { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#app .pg-bas-act .pg-yildiz { min-height: 28px; padding: 3px 10px; font-size: 11.48px; font-weight: 550; }
#app main { padding-block-start: 0; }

/* ---- kart, KPI ---- */
#app :is(.box, .e2-kart, .ay-card) { padding: 18px 20px; margin-bottom: 16px; }
#app main :is(.box, .e2-kart) > h3:first-child, #app main .card > h2 { font-size: 13.3px; font-weight: 650; letter-spacing: -.005em; margin-bottom: 14px; }
#app main[data-v] :is(.kpis, .oz-kpi, .oz-para, .sl-k, .f4-kpis, .r2-kpi, .gt-kpi-s) { gap: 16px; margin-bottom: 16px; }
#app main[data-v] :is(.kpis, .oz-kpi, .oz-para, .sl-k, .f4-kpis, .r2-kpi, .gt-kpi-s) > :is(.kpi, .f4-kpi, .r2-k, .gt-kpi) { display: flex; flex-direction: column; gap: 4px; }
#app main[data-v] :is(.kpi, .f4-kpi, .r2-k, .gt-kpi) :is(small, .k-l, .f4-kpi-l, .kpi-label) { font-size: var(--v2-kpi-label); font-weight: 550; color: var(--v2-muted); }
#app main[data-v] :is(.kpis, .oz-kpi, .oz-para, .sl-k, .f4-kpis, .r2-kpi) > :is(.kpi, .f4-kpi, .r2-k) :is(b, strong) { letter-spacing: -.025em; }

/* ---- tablo: sarmalayıcı 8px, satır ≈48px, hover ---- */
#app table:not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host, .grid, .sg-app, .inv-app, .sema-app, .pl2-takvim, .crm-kayit-grid)):not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host, .grid, .sg-app, .inv-app, .sema-app, .pl2-takvim, .crm-kayit-grid) *) thead th { font-size: var(--v2-th-fs); letter-spacing: var(--v2-th-ls); }

/* ---- çip (Agency: köşeli 6px, 11.76px/550; seçili koyu, vurgu temasında tema rengi) ---- */
#app .chip:not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host) *) { font-weight: 550; gap: 6px; }
#app main:not(#_) .chip.on, #app .chip[aria-pressed="true"] { background: var(--v2-chip-on-bg); border-color: var(--v2-chip-on-bg); color: var(--v2-chip-on-fg); }
#app main:not(#_) .chip.on b { background: transparent; color: inherit; }

/* ---- sekme (Agency: 9px 14px, 14px/550, alt çizgi 2px, gap 2px) ---- */
#app :is(.crm-seg, .hesap-sekme, .a2-sekme, .v2-sekme) { gap: 2px; border-bottom: 1px solid var(--v2-line); margin-bottom: 16px; }
#app :is(.crm-seg, .hesap-sekme) button, #app .v2-sekme > :is(button, a) { padding: 9px 14px; margin-bottom: -1px; font-size: 14px; font-weight: 550; border-bottom-width: 2px; background: none; }
#app :is(.crm-seg, .hesap-sekme) button.on { background: none; }

/* ---- düğme (Agency: 37px, 7px 13px, radius 6, 14px/550; sm 28px) ---- */
:is(#app, body > dialog) :is(.primary, .ghost, .danger, .btn-k):not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host) *) { min-height: 36px; padding: 7px 13px; font-size: 14px; font-weight: 550; line-height: 1.5; gap: 7px; }
:is(#app, body > dialog) :is(.primary, .ghost, .danger).sm { min-height: 28px; padding: 3px 10px; font-size: 11.48px; }
/* ---- form (Agency: 39px, padding 8px 11px, radius 6) ---- */
:is(#app, body > dialog) :is(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden]), select) { padding-block: 8px; padding-inline: 11px; }
:is(#app, body > dialog) label { font-size: 11.2px; font-weight: 550; }

/* ---- modal / menü / palet / toast ---- */
dialog:is(.dlg, .dg, .pn) :is(h2, .dg-ust h2) { font-size: 14.7px; font-weight: 650; }
dialog:is(.dg, .pn) .dg-ust { padding: 18px 22px 12px; }
:is(.um-menu, .yeni-menu, .acts-menu, .zil-panel) { border-radius: 10px; padding: 6px; }
:is(.um-menu button[role=menuitem], .yeni-menu button, .acts-menu button) { min-height: 37px; padding: 8px 10px; gap: 10px; border-radius: 7px; font-size: 14px; }
.ara-k { width: min(640px, 100%); border-radius: 12px; }
.ara-k .ara-o:is(:hover, .on, [aria-selected="true"]) { background: var(--v2-brand-soft); }
.ara-k .ara-o:is(.on, [aria-selected="true"]) { color: var(--v2-brand); }
:root[data-v2-mod="koyu"] .ara-k .ara-o:is(:hover, .on, [aria-selected="true"]) { background: color-mix(in srgb, var(--v2-brand) 16%, var(--v2-surface)); }
:is(#toast, .tst) { border-radius: 8px; }

/* ---- ID özgüllüğü (:not(#_)): ekran/eski CSS'lerin (#app:has(main[data-satis]) .pg-bas h1, #app[data-tasarim] .side .si-w .si ...) Agency ölçüsünü bozmasını engeller ---- */
#app .pg-bas:not(#_) h1 { font-size: 21px; line-height: 1.5; letter-spacing: -.02em; }
#app .side:not(#_) .si { font-size: 14px; font-weight: 500; min-height: 37px; padding: 8px 10px; gap: 11px; }
:is(#app, body > dialog) :is(.primary, .ghost, .danger, .btn-k):not(#_):not(.login *):not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc, .xk-t, .ts-kagit, .pdf-host) *):not(.sm) { min-height: 36px; border-radius: 6px; font-size: 14px; font-weight: 550; padding: 7px 13px; }
:is(#app, body > dialog) :is(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden]), select):not(#_):not(table *):not(.ara-i *):not(.login *):not(:is(.stage, .scaler, .page, .pl, .pg, .pg-sema, .vsc) *) { min-height: 39px; border-radius: 6px; }
#app .top .zil-say:not(#_) { padding: 0 4px; min-width: 18px; width: auto; }
/* .sm: Sales sayfa eylemlerinde de .sm kullanıyor. Başlık/araç çubuğundaki eylemler tam boy (Agency .btn 37px), satır içi eylemler küçük (Agency .btn-small 28px) */
#app :is(.primary, .ghost, .danger).sm:not(#_) { min-height: 28px; padding: 3px 10px; font-size: 11.48px; border-radius: 6px; }
#app :is(.tk-bar, .page-head-a, .page-head, .pg-bas-act, .e2-eylem, .sy-bar, .e2-bas, .gt-bas) :is(.primary, .ghost, .danger).sm:not(#_) { min-height: 36px; padding: 7px 13px; font-size: 14px; }
@media (max-width: 480px) { #app .top .brand { flex: 0 0 auto; min-width: 0; } #app .top .brand img { height: 18px; max-width: none; width: auto; flex: none; } #app .top .ara-alan { flex: 0 0 36px; width: 36px; min-width: 36px; } }


/* =====================================================================================================
   DENETİM DÜZELTMELERİ (son tur)
   ===================================================================================================== */
/* 1) odak/kaydırma yapışkan üst çubuğun altında kalmasın; kısa sayfada gereksiz kaydırma olmasın (yapışkan altbilgi düzeni) */
html { scroll-padding-top: calc(var(--v2-top-h) + 16px); scroll-padding-bottom: 80px; }
#app :is(main, .pg-bas, .pg-bas h1) { scroll-margin-top: calc(var(--v2-top-h) + 16px); }
/* yapışkan altbilgi: body flex yerine #app min-yüksekliği (body flex'i html2canvas/PDF klonunu 30 sn'ye çıkarıyordu) */
#app[data-v2] { min-height: calc(100vh - var(--v2-foot-h, 41px)); min-height: calc(100dvh - var(--v2-foot-h, 41px)); }
html[data-v2-kabuk] body > footer.azt-alt { flex: none; padding-top: 12px; }
@media (max-width: 819px) { html[data-v2-kabuk] body > footer.azt-alt { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
/* 2) mobil üst çubuk: kullanıcı düğmesi yalnız avatar */
@media (max-width: 640px) {
  #app .top .um-btn { padding: 3px; gap: 0; min-height: 36px; min-width: 36px; }
  #app .top .um-btn :is(.um-ad, svg) { display: none; }
  #app .top .who { min-width: 0; }
}
/* 3) yan menü etiketleri: kesme yok, en çok 2 satıra sarılır (tam metin title'da) */
#app .side:not(#_) .si > span:not(.bdg) { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; overflow-wrap: anywhere; min-width: 0; }
#app .side:not(#_) .si { height: auto; }
/* 4) favori yıldızı: satırın dikey ortası */
#app .side .si-w { position: relative; }
#app .side .si-w > .si-yildiz { position: absolute; top: 50%; bottom: auto; transform: translateY(-50%); inset-inline-end: 6px; margin: 0; }
@media (hover: none), (max-width: 819px) { #app .side .si-w > .si-yildiz { width: 44px; height: 44px; inset-inline-end: 0; } }
/* 5) mobil alt çubuk altbilgiyi örtmesin; Menü rozeti simgenin sağ üstünde küçük */
@media (max-width: 819px) {
  #app .mbar :is(a, button) { position: relative; }
  #app .mbar .bdg { top: -2px; left: calc(50% + 11px); right: auto; max-width: 34px; min-width: 16px; padding-inline: 4px; font-size: 10px; line-height: 15px; }
}
/* 7) yapışkan kaydet çubukları: opak zemin */
#app :is(.a2 .ay-a, .a2 .a2-kayit, .a2-kayit-genel, .hesap-kutu > .hesap-alt, .bm-bar):not(#_) { background: var(--v2-surface); border-top: 1px solid var(--v2-line); }
/* 8) açıklama satırları sarılsın; uzun kod/URL metinleri taşmasın */
#app .bilgi-oz:not(#_) { white-space: normal; overflow: visible; text-overflow: clip; -webkit-line-clamp: unset; display: block; overflow-wrap: anywhere; }
#app main :is(code, pre, .mono, .kod) { overflow-wrap: anywhere; word-break: break-word; }
#app main :is(input, textarea)[readonly] { text-overflow: ellipsis; }
/* 10) palet odak halkası kesilmesin; hız sınırı şeridi üst çubuğu örtmesin; ortak hata sayfası Agency kartı */
.ara-k .ara-i input:focus-visible { outline-offset: -3px; }
.ortak-hiz { top: calc(var(--v2-top-h) + 12px); background: var(--v2-surface); color: var(--v2-ink); border-color: var(--v2-line); border-radius: var(--v2-r); box-shadow: var(--v2-sh-lg); font-family: var(--v2-font); }
.ortak-hiz p { color: var(--v2-muted); }
#app .fatal { max-width: 520px; margin: 14vh auto 0; padding: 24px; background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: var(--v2-r); box-shadow: var(--v2-sh-sm); color: var(--v2-ink); font-size: 14px; line-height: 1.5; text-align: center; }
/* 12) koyu: html/body ve altbilgi tamamen koyu */
:root[data-v2-mod="koyu"] :is(html, body) { background: var(--v2-canvas); color: var(--v2-ink); }
:root[data-v2-mod="koyu"] footer.azt-alt { background: transparent; color: var(--v2-muted); }
:root[data-v2-mod="koyu"] footer.azt-alt a { color: var(--v2-muted); }
/* kısa sayfada kaydırma çıkmasın: eski .govde min-yüksekliği (100vh-56px) yapışkan altbilgiyi ekranın dışına itiyordu */
#app[data-v2] .govde { min-height: 0; }
/* favori yıldızı rozetle çakışmasın: yıldız için sağda yer ayır (simge modunda yıldız yok) */
@media (min-width: 820px) { #app:not([data-dar="1"]) .side:not(#_) .si-w > .si { padding-inline-end: 34px; } }
@media (min-width: 820px) and (max-width: 1180px) { #app .side:not(.side-cekmece):not(#_) .si-w > .si { padding-inline-end: 0; } }
.side-cekmece .si-w > .si { padding-inline-end: 44px; }
:root[data-v2-mod="koyu"] #app { background: var(--v2-canvas); }

/* ---- 2. tur denetim düzeltmeleri ---- */
/* palet arama kutusu: odak halkası içeri alınır (kutu overflow:clip ile kesiliyordu) */
.ara-k .ara-i input:focus-visible { outline: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--v2-focus); border-radius: var(--v2-r-sm); }
/* rapor not çizgisi kartın tamamına uzansın */
#app .r2-alt:not(#_) { max-width: none; }
/* koyu: birincil düğmeler brand zemin + brand-ink yazı (hover/disabled dahil, vurgu temalarında da) */
:root[data-v2-mod="koyu"] #app :is(.primary, .btn-k-ana, .btn-primary, .yeni-btn):not(:disabled):not(#_) { background: var(--v2-brand-solid, var(--v2-brand)); border-color: var(--v2-brand-solid, var(--v2-brand)); color: var(--v2-brand-solid-ink, var(--v2-brand-ink)); }
:root[data-v2-mod="koyu"] #app :is(.primary, .btn-k-ana, .btn-primary, .yeni-btn):not(:disabled):not(#_):hover { background: color-mix(in srgb, var(--v2-brand-solid, var(--v2-brand)) 84%, #fff); border-color: transparent; color: var(--v2-brand-solid-ink, var(--v2-brand-ink)); }
:root[data-v2-mod="koyu"] #app :is(.primary, .btn-k-ana, .btn-primary):disabled:not(#_) { background: var(--v2-surface-3); border-color: var(--v2-line); color: var(--v2-muted); opacity: .6; }
/* uzun dil (RU/AZ/FA/AR): alt çubuk etiketleri 2 satıra sarar, 5 öğe sığar; çekmece son öğesi tam görünür */
@media (max-width: 819px) {
  #app .mbar :is(a, button) > span:not(.bdg) { font-size: 10px; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; word-break: break-word; text-overflow: clip; line-height: 1.15; display: block; }
  #app .mbar :is(a, button) { min-width: 0; padding-inline: 1px; }
  .drw .side-cekmece .side-ust { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
/* AR/FA: tarih ve sayılar tablo hücrelerinde doğru sırada kalsın */
[dir="rtl"] #app :is(td, th, time, .num, .bg-saat, .mono) { unicode-bidi: plaintext; }

/* ---- mobil çekmece: üst blok, PROJE etiketi, kapat düğmesi yan menü zeminine (--v2-side) göre okunur (her tema: varsayılan, 9 vurgu, "Açık", koyu) ---- */
.drw .side-cekmece:not(#_) { background: var(--v2-side); color: var(--v2-side-ink); }
.drw .side-cekmece:not(#_) :is(.drw-ust, .drw-ust b, .drw-proj) { color: var(--v2-side-ink-strong); }
.drw .side-cekmece:not(#_) .drw-proj small { color: var(--v2-side-ink); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.drw .side-cekmece:not(#_) #drwX { color: var(--v2-side-ink-strong); opacity: 1; }
.drw .side-cekmece:not(#_) :is(.drw-ust, .drw-proj) { border-color: var(--v2-side-line); }

#app .top .ara-alan kbd:not(#_) { font-size: 10.5px; }

/* =====================================================================================================
   TABLET (iPad 744–1366 px) + İÇERİK TAŞMASI GÜVENLİK AĞI
   ===================================================================================================== */
/* ---- simge şeridi (rail): 821–1180 px ya da kullanıcı "Daralt" dediğinde etiket, grup başlığı ve marka yazısı TAMAMEN gizli.
   (ekran dosyaları bazı öğelerin etiketine display:-webkit-box veriyordu; ID özgüllüğü ile ezilir) ---- */
#app[data-dar="1"] .side:not(.side-cekmece):not(#_) :is(.si > span:not(.bdg), .v2-grp, .v2-marka-ek, .v2-brand .bt, .si-alt, .si-t, .si-f, .fav-tum, .nav-fav, .side-tog > span) { display: none; }
@media (min-width: 820px) and (max-width: 1180px) {
  #app .side:not(.side-cekmece):not(#_) :is(.si > span:not(.bdg), .v2-grp, .v2-marka-ek, .v2-brand .bt, .si-alt, .si-t, .si-f, .fav-tum, .nav-fav, .side-tog > span) { display: none; }
  #app .side:not(.side-cekmece):not(#_) .si { justify-content: center; padding: 9px 0; min-height: 40px; }
  #app .side:not(.side-cekmece):not(#_) .si-yildiz { display: none; }
  #app .side:not(.side-cekmece):not(#_) .side-tog { justify-content: center; }
}
/* rail: rozet simgenin sağ üstünde küçük (iki durumda da) */
#app[data-dar="1"] .side:not(.side-cekmece) .si .bdg { position: absolute; top: 2px; right: 4px; margin: 0; }
[dir="rtl"] #app[data-dar="1"] .side:not(.side-cekmece) .si .bdg { right: auto; left: 4px; }

/* ---- taşma güvenlik ağı (belge/PDF alanları hariç: #app dışı ve .stage/.page içi) ---- */
#app[data-v2] { overflow-x: clip; }
#app[data-v2] :is(main, .icerik, .govde) { min-width: 0; max-width: 100%; }
#app[data-v2] main :is(.cols, .oz-grid, .gt-iki, .r2-sayfa, .tk-bar, .page-head, .crm-body) > * { min-width: 0; }
#app[data-v2] main { overflow-wrap: break-word; word-break: normal; hyphens: none; }
/* yalnız tablo taşıyan kap yatay kaydırılır (sayfa değil) */
#app[data-v2] main :is(div, section):has(> table):not(.stage, .page, .pl, .pg):not(.tbl-x) { overflow-x: auto; max-width: 100%; }
#app[data-v2] .tbl-x { max-width: 100%; }
/* dar kartlarda metin harf harf kırılmasın: yan yana düzen sıkışırsa metin sütunu en az 10ch alır */
#app[data-v2] main :is(.bg-l li, .alr-sat, .mt-sor, .kisi-ad) > div { min-width: 10ch; }

/* ---- yapışkan (sticky) ilk/son sütunlu tablolar: opak ve satırla tutarlı zemin; açık ⋯ menüsü sonraki satırların yapışkan hücrelerinin altında kalmasın ---- */
#app .tbl-x.kaydirilir > table:not(#_) :is(th, td):is(:first-child, :last-child) { background-clip: padding-box; }
#app .tbl-x.kaydirilir > table:not(#_) tbody td:is(:first-child, :last-child) { background-color: var(--v2-surface); }
#app .tbl-x.kaydirilir > table:not(#_) tbody tr:hover > td:is(:first-child, :last-child) { background-color: color-mix(in srgb, var(--v2-brand) 5%, var(--v2-surface)); }
#app .tbl-x.kaydirilir > table:not(#_) thead th:is(:first-child, :last-child) { background-color: var(--v2-surface-2); }
#app .tbl-x td.acts:is(:focus-within, :has(.acts-menu:not([hidden]), .acts-more[aria-expanded="true"])) { z-index: 50; }
#app .tbl-x { overflow-y: visible; }
/* rail: rozet yalnız küçük nokta (sayı title/aria'da; simgeyi örtmez) */
#app[data-dar="1"] .side:not(.side-cekmece):not(#_) .si .bdg { font-size: 0; line-height: 0; width: 9px; height: 9px; min-width: 0; padding: 0; border-radius: 50%; top: 6px; right: calc(50% - 16px); }
@media (min-width: 820px) and (max-width: 1180px) { #app .side:not(.side-cekmece):not(#_) .si .bdg { position: absolute; font-size: 0; line-height: 0; width: 9px; height: 9px; min-width: 0; padding: 0; border-radius: 50%; top: 6px; right: calc(50% - 16px); margin: 0; } }

/* sayfa açıklaması yan yana düzende 1px'e çökmesin (harf harf dikey yazı) */
#app main .page-head-o:not(#_), #app main .bilgi-oz:not(#_) { min-width: 28ch; max-width: 100%; flex: 1 1 32ch; }

/* tablet: yapışkan ilk/son sütunlar içeriği örtüyordu (Geçerlilik, Durum kesiliyordu) → ≤1280px'te normal akış; tablo yatay kaydırılır */
@media (max-width: 1280px) {
  #app .tbl-x.kaydirilir > table:not(#_) :is(th, td):is(:first-child, :last-child) { position: static; }
}
/* tablet üst çubuğu: kur rozeti kesilmesin; rail'de "S" işareti olduğu için logo yazısı gizlenir (820–1100px) */
#app .top .brand .ap-rozet { flex: none; white-space: nowrap; }
@media (min-width: 820px) and (max-width: 1100px) { #app[data-v2] .top .brand img { display: none; } }

/* ================= YAZDIRMA: Teklif oluştur (önizleme) ekranı = tek sayfa belge kâğıdı =================
   Kabuk (üst/yan/alt çubuk, sihirbaz, başlık) gizlenir; kâğıt ölçeksiz 210x297 mm basılır. Yalnız #page içeren ekran (plan-view). */
@page { size: A4 portrait; margin: 0; }
@media print {
  body:has(main.plan-view #page) .atla, #app:has(main.plan-view #page) :is(.sr, .top, .kirmizi-bar, nav.side, nav.mbar, .drw, .icerik > .pg-bas, main.plan-view > :not(.stage)) { display: none !important; }
  body:has(main.plan-view #page) :is(footer, .alt-bilgi, .surum) { display: none !important; }
  #app:has(main.plan-view #page), #app:has(main.plan-view #page) :is(.govde, .icerik, main.plan-view) { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; width: auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important; background: #fff !important; }
  main.plan-view .stage { display: block !important; padding: 0 !important; overflow: visible !important; background: #fff !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
  main.plan-view .stage .scaler { width: 210mm !important; height: 297mm !important; overflow: hidden; break-after: avoid; }
  main.plan-view .stage .page { transform: none !important; box-shadow: none !important; margin: 0 !important; }
  main.plan-view .stage .page, main.plan-view .stage .page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}