/* Betimleme Glass — component stylesheet. Framework-free: plain HTML + these classes + tokens.css.
   Every value comes from tokens.css. Load order: tokens.css → bundle.css → bundle.js (optional helpers). */

/* ───────── base ───────── */
.bt-root, .bt-page {
  font-family: var(--font-sans); font-size: 13px; line-height: 19px; font-weight: 500;
  color: var(--ink-100); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
.bt-page {
  min-height: 100vh; background-color: var(--page);
  background-image:
    radial-gradient(60% 50% at 0% 0%, var(--glow-blue), transparent 70%),
    radial-gradient(55% 45% at 100% 0%, var(--glow-green), transparent 70%),
    radial-gradient(55% 45% at 0% 100%, var(--glow-violet), transparent 70%),
    radial-gradient(50% 40% at 100% 100%, var(--glow-amber), transparent 70%);
  background-attachment: fixed;
}
.bt-root *, .bt-page *, .bt-root *::before, .bt-page *::before, .bt-root *::after, .bt-page *::after { box-sizing: border-box; }
.bt-mono { font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.bt-label { font-size: 11.5px; line-height: 14px; font-weight: 600; color: var(--ink-label); }
.bt-muted { color: var(--ink-300); }
.bt-row { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.bt-col { display: flex; flex-direction: column; gap: var(--space-8); }
.bt-grow { flex: 1; min-width: 0; }
.bt-icon { flex: none; display: block; width: 16px; height: 16px; }
.bt-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.bt-link:hover { color: var(--accent-hover); text-decoration: underline; }
.bt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:where(.bt-root, .bt-page) :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bt-spin { animation: bt-spin 1s linear infinite; }
@keyframes bt-spin { to { transform: rotate(360deg); } }

/* ───────── glass surfaces ───────── */
.bt-glass { background: var(--glass-card); backdrop-filter: var(--backdrop-card); -webkit-backdrop-filter: var(--backdrop-card); box-shadow: var(--shadow-glass); border-radius: var(--radius-panel); }
.bt-glass--shell { background: var(--glass-shell); backdrop-filter: var(--backdrop-shell); -webkit-backdrop-filter: var(--backdrop-shell); }
.bt-glass--menu { background: var(--glass-menu); backdrop-filter: var(--backdrop-menu); -webkit-backdrop-filter: var(--backdrop-menu); }
.bt-panel { padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-12); min-width: 0; }
.bt-panel--flush { padding: 0; overflow: auto; }
.bt-panel__head { display: flex; align-items: center; gap: var(--space-8); }
.bt-panel__title { font-size: 14.5px; line-height: 18px; font-weight: 650; letter-spacing: -0.01em; margin: 0; flex: 1; }

/* ───────── buttons ─────────
   states: :hover · :focus-visible · :active · :disabled / [aria-disabled=true] · .is-loading */
.bt-btn { height: var(--h-36); padding: 0 var(--space-16); border-radius: var(--radius-pill); border: 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-6);
  font: inherit; font-weight: 600; font-size: 13px; line-height: 1; cursor: pointer; white-space: nowrap; text-decoration: none; position: relative;
  transition: background-color var(--duration-fast) var(--ease-calm), box-shadow var(--duration-fast) var(--ease-calm), color var(--duration-fast) var(--ease-calm), transform var(--duration-fast) var(--ease-calm); }
.bt-btn:active { transform: translateY(1px); }
.bt-btn--primary { color: var(--on-dark); background: linear-gradient(180deg, var(--accent-top), var(--accent)); box-shadow: var(--shadow-primary); }
.bt-btn--primary:hover { background: linear-gradient(180deg, var(--accent), var(--accent-hover)); }
.bt-btn--secondary { color: var(--ink-100); background: var(--glass-pill); backdrop-filter: var(--backdrop-pill); -webkit-backdrop-filter: var(--backdrop-pill); box-shadow: var(--shadow-pill); padding-left: var(--space-12); }
.bt-btn--secondary:hover { background: var(--glass-menu); }
.bt-btn--text { color: var(--accent); background: transparent; padding: 0 var(--space-8); }
.bt-btn--text:hover { background: var(--accent-select); color: var(--accent-hover); }
.bt-btn--danger { color: var(--danger); background: transparent; padding: 0 var(--space-8); }
.bt-btn--danger:hover { background: var(--danger-bg); }
.bt-btn--sm { height: var(--h-30); font-size: 12.5px; padding: 0 var(--space-12); }
.bt-btn--sm.bt-btn--text, .bt-btn--sm.bt-btn--danger { padding: 0 var(--space-8); }
.bt-btn--xs { height: var(--h-26); font-size: 12px; padding: 0 var(--space-8); gap: var(--space-4); }
.bt-btn--icon { width: var(--h-36); padding: 0; }
.bt-btn--sm.bt-btn--icon { width: var(--h-30); padding: 0; }
.bt-btn--block { width: 100%; height: var(--h-46); }
.bt-btn:disabled, .bt-btn[aria-disabled="true"] { color: var(--ink-disabled); background: var(--glass-pill); box-shadow: var(--shadow-pill); cursor: not-allowed; transform: none; }
.bt-btn--text:disabled, .bt-btn--danger:disabled { background: transparent; box-shadow: none; }
.bt-btn.is-loading { cursor: progress; pointer-events: none; }
.bt-btn.is-loading > .bt-icon:first-child { animation: bt-spin 1s linear infinite; }

/* decision toggle (Onay / Red) — pressed = filled */
.bt-decision { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--radius-pill); background: var(--segment-track); }
.bt-decision button { height: var(--h-26); padding: 0 var(--space-12) 0 var(--space-8); border: 0; border-radius: var(--radius-pill); background: transparent; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--ink-200); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-4); transition: background-color var(--duration-fast) var(--ease-calm), color var(--duration-fast) var(--ease-calm); }
.bt-decision button .bt-icon { width: 14px; height: 14px; }
.bt-decision button:hover { background: var(--glass-menu); color: var(--ink-100); }
.bt-decision__ok[aria-pressed="true"], .bt-decision__ok[aria-pressed="true"]:hover { background: var(--ok); color: var(--on-dark); }
.bt-decision__no[aria-pressed="true"], .bt-decision__no[aria-pressed="true"]:hover { background: var(--no); color: var(--on-dark); }
.bt-decision button:disabled { color: var(--ink-disabled); cursor: not-allowed; background: transparent; }

/* kbd */
.bt-kbd { font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 550; min-width: 20px; height: 20px; padding: 0 var(--space-6);
  display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--glass-menu); box-shadow: var(--shadow-pill); color: var(--ink-200); }

/* ───────── badges ───────── */
.bt-badge { height: 24px; padding: 0 var(--space-8); border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: var(--space-4);
  font-size: 11.5px; line-height: 14px; font-weight: 650; white-space: nowrap; }
.bt-badge .bt-icon { width: 13px; height: 13px; }
.bt-badge--neutral { color: var(--ink-200); background: var(--segment-track); }
.bt-badge--info, .bt-badge--new { color: var(--accent); background: var(--accent-bg); }
.bt-badge--success, .bt-badge--ok { color: var(--ok); background: var(--ok-bg); }
.bt-badge--warning { color: var(--warning); background: var(--warning-bg); }
.bt-badge--edited { color: var(--ed); background: var(--ed-bg); box-shadow: inset 0 0 0 0.5px var(--note); }
.bt-badge--danger, .bt-badge--no { color: var(--no); background: var(--no-bg); }
.bt-badge--output { color: var(--outgoing); background: var(--outgoing-bg); font-family: var(--font-mono); font-weight: 600; }
.bt-badge--mono { font-family: var(--font-mono); font-weight: 600; }
.bt-signal { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.bt-signal i { width: 2.5px; border-radius: 1px; background: currentColor; }
.bt-signal i.off { background: var(--hairline); }
.bt-signal i:nth-child(1) { height: 4px; } .bt-signal i:nth-child(2) { height: 6px; } .bt-signal i:nth-child(3) { height: 8px; } .bt-signal i:nth-child(4) { height: 10px; }
.bt-badge--p1 { color: var(--p1); background: var(--p1-bg); }
.bt-badge--p2 { color: var(--p2); background: var(--p2-bg); }
.bt-badge--p3 { color: var(--p3); background: var(--p3-bg); }

/* ───────── info cards ───────── */
.bt-infocards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-12); }
.bt-infocard { height: var(--h-52); display: flex; align-items: center; gap: var(--space-8); padding: 0 var(--space-16) 0 var(--space-12); border-radius: var(--radius-menu); border: 0; font: inherit; color: inherit; text-align: left;
  background: var(--glass-card); backdrop-filter: var(--backdrop-card); -webkit-backdrop-filter: var(--backdrop-card); box-shadow: var(--shadow-glass); }
button.bt-infocard { cursor: pointer; transition: box-shadow var(--duration-fast) var(--ease-calm), background-color var(--duration-fast) var(--ease-calm); }
button.bt-infocard:hover { background: var(--glass-menu); }
.bt-infocard__icon { width: var(--h-28); height: var(--h-28); border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--segment-track); color: var(--ink-200); flex: none; }
.bt-infocard__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bt-infocard__label { font-size: 12.5px; line-height: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-infocard__note { font-size: 11.5px; line-height: 14px; color: var(--ink-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-infocard__value { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }
.bt-infocard--warning, button.bt-infocard--warning:hover { background: var(--warning-bg); }
.bt-infocard--warning .bt-infocard__icon, .bt-infocard--warning .bt-infocard__value { color: var(--warning); background: transparent; }
.bt-infocard--danger, button.bt-infocard--danger:hover { background: var(--danger-bg); }
.bt-infocard--danger .bt-infocard__icon, .bt-infocard--danger .bt-infocard__value { color: var(--danger); background: transparent; }
.bt-infocard--ok .bt-infocard__icon { color: var(--ok); background: var(--ok-bg); }
.bt-infocard--no .bt-infocard__icon { color: var(--no); background: var(--no-bg); }
.bt-infocard[aria-pressed="true"] { box-shadow: var(--shadow-glass), inset 0 0 0 1.5px var(--accent); }

/* ───────── filters ───────── */
.bt-pill { height: var(--h-30); padding: 0 var(--space-12); border-radius: var(--radius-pill); border: 0; display: inline-flex; align-items: center; gap: var(--space-4);
  font: inherit; font-size: 12.5px; line-height: 16px; color: var(--ink-300); cursor: pointer;
  background: var(--glass-pill); backdrop-filter: var(--backdrop-pill); -webkit-backdrop-filter: var(--backdrop-pill); box-shadow: var(--shadow-pill); }
.bt-pill:hover { background: var(--glass-menu); }
.bt-pill .bt-icon { width: 14px; height: 14px; }
.bt-pill b { font-weight: 650; color: var(--accent); }
.bt-pill--filled { background: var(--accent-fill); color: var(--accent); box-shadow: inset 0 0 0 0.5px var(--accent); }
.bt-pill--filled:hover { background: var(--accent-bg); }
.bt-search { height: var(--h-36); min-width: 220px; padding: 0 var(--space-6) 0 var(--space-12); border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: var(--space-6);
  background: var(--glass-pill); backdrop-filter: var(--backdrop-pill); -webkit-backdrop-filter: var(--backdrop-pill); box-shadow: var(--shadow-pill); color: var(--ink-300); }
.bt-search:focus-within { box-shadow: var(--shadow-pill), 0 0 0 3px var(--accent-bg); }
.bt-search input { border: 0; background: transparent; outline: none; font: inherit; color: var(--ink-100); flex: 1; min-width: 0; }
.bt-search input::placeholder { color: var(--ink-300); }
.bt-segment { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--radius-pill); background: var(--segment-track); }
.bt-segment button { height: var(--h-28); padding: 0 var(--space-12); border: 0; border-radius: var(--radius-pill); background: transparent; font: inherit; font-size: 12.5px; color: var(--ink-200); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-6); }
.bt-segment button:hover { color: var(--ink-100); }
.bt-segment button[aria-pressed="true"] { background: var(--on-dark); box-shadow: var(--shadow-segment); color: var(--ink-100); font-weight: 600; }
.bt-segment__n { font-size: 11px; font-weight: 650; color: var(--ink-300); }

/* switch: <button role="switch" aria-checked> */
.bt-switch { display: inline-flex; align-items: center; gap: var(--space-8); cursor: pointer; font: inherit; font-size: 12.5px; color: var(--ink-200); border: 0; background: none; padding: 0; white-space: nowrap; }
.bt-switch__track { width: 28px; height: 17px; border-radius: var(--radius-pill); background: var(--segment-track); position: relative; transition: background-color var(--duration-fast) var(--ease-calm); flex: none; }
.bt-switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--on-dark); box-shadow: var(--shadow-segment); transition: transform var(--duration-fast) var(--ease-calm); }
.bt-switch[aria-checked="true"] { color: var(--ink-100); }
.bt-switch[aria-checked="true"] .bt-switch__track { background: var(--accent); }
.bt-switch[aria-checked="true"] .bt-switch__track::after { transform: translateX(11px); }
.bt-switch:disabled { color: var(--ink-disabled); cursor: not-allowed; }

/* ───────── form fields ─────────  states: hover · focus · error · disabled */
.bt-field { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.bt-input, .bt-textarea { width: 100%; border: 0; font: inherit; color: var(--ink-100); background: var(--glass-menu); box-shadow: var(--shadow-pill); outline: none;
  transition: box-shadow var(--duration-fast) var(--ease-calm), background-color var(--duration-fast) var(--ease-calm); }
.bt-input { height: var(--h-36); padding: 0 var(--space-12); border-radius: var(--radius-inline); }
.bt-input--lg { height: var(--h-46); }
.bt-input--sm { height: var(--h-30); font-size: 12.5px; padding: 0 var(--space-8); }
.bt-textarea { padding: var(--space-8) var(--space-12); border-radius: var(--radius-inline); resize: vertical; line-height: 20px; min-height: 48px; display: block; }
.bt-input::placeholder, .bt-textarea::placeholder { color: var(--ink-300); }
.bt-input:hover, .bt-textarea:hover { background: var(--on-dark); }
.bt-input:focus, .bt-textarea:focus { background: var(--on-dark); box-shadow: var(--shadow-pill), inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-bg); }
.bt-input[aria-invalid="true"], .bt-textarea[aria-invalid="true"] { box-shadow: var(--shadow-pill), inset 0 0 0 1px var(--danger); }
.bt-input:disabled, .bt-textarea:disabled { color: var(--ink-disabled); background: var(--glass-pill); cursor: not-allowed; }
.bt-field__hint { font-size: 11.5px; line-height: 14px; color: var(--ink-300); }
.bt-field__hint--error { color: var(--danger); font-weight: 600; }
.bt-alert { display: flex; gap: var(--space-8); align-items: center; padding: var(--space-8) var(--space-12); border-radius: var(--radius-inline); background: var(--danger-bg); color: var(--danger); font-weight: 600; }
.bt-alert[hidden] { display: none; }
/* time / number field: mono input + unit + optional "Şu an" */
.bt-num { display: inline-flex; align-items: center; height: var(--h-30); border-radius: var(--radius-inline); background: var(--glass-menu); box-shadow: var(--shadow-pill); padding: 0 3px 0 var(--space-8); gap: var(--space-4); }
.bt-num:focus-within { background: var(--on-dark); box-shadow: var(--shadow-pill), inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-bg); }
.bt-num__label { font-size: 11.5px; font-weight: 600; color: var(--ink-label); white-space: nowrap; }
.bt-num input { width: 58px; border: 0; background: transparent; outline: none; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--ink-100); text-align: right; padding: 0; }
.bt-num .bt-btn { height: 24px; }

/* ───────── upload ───────── */
.bt-upload { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: var(--space-12); align-items: stretch; }
.bt-slot { border-radius: var(--radius-menu); border: 1px dashed var(--hairline); padding: var(--space-12); display: flex; gap: var(--space-8); align-items: center; min-width: 0; background: var(--glass-pill); cursor: pointer; position: relative;
  transition: background-color var(--duration-fast) var(--ease-calm), border-color var(--duration-fast) var(--ease-calm); }
.bt-slot:hover { background: var(--glass-menu); }
.bt-slot:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.bt-slot input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bt-slot--drag { border-color: var(--accent); border-style: solid; background: var(--accent-select); }
.bt-slot--filled { border-style: solid; border-color: var(--divider); }
.bt-slot--error { border-color: var(--danger); background: var(--danger-bg); }
.bt-slot__icon { width: var(--h-32); height: var(--h-32); border-radius: var(--radius-inline); display: grid; place-items: center; background: var(--segment-track); color: var(--ink-200); flex: none; }
.bt-slot--drag .bt-slot__icon { background: var(--accent-bg); color: var(--accent); }
.bt-slot--filled .bt-slot__icon { background: var(--ok-bg); color: var(--ok); }
.bt-slot--error .bt-slot__icon { background: transparent; color: var(--danger); }
.bt-slot__text { display: flex; flex-direction: column; min-width: 0; }
.bt-slot__name { font-weight: 600; }
.bt-slot__file { font-family: var(--font-mono); font-size: 12px; color: var(--ink-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-slot--error .bt-slot__file { color: var(--danger); font-family: var(--font-sans); font-weight: 600; }
.bt-upload__go { display: flex; align-items: center; }

/* ───────── table ───────── */
.bt-table { width: 100%; border-collapse: collapse; }
.bt-table th { text-align: left; font-size: 11.5px; line-height: 14px; font-weight: 600; color: var(--ink-label); padding: var(--space-12) var(--space-12) var(--space-8); border-bottom: 0.5px solid var(--hairline); white-space: nowrap; }
.bt-table td { padding: 0 var(--space-12); height: 52px; border-bottom: 1px solid var(--divider); white-space: nowrap; }
.bt-table tbody tr:last-child td { border-bottom: 0; }
.bt-table tbody tr { transition: background-color var(--duration-fast) var(--ease-calm); }
.bt-table tbody tr:hover { background: var(--glass-pill); }
.bt-table tbody tr[aria-selected="true"] { background: var(--accent-select); }
.bt-table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bt-table .num { text-align: right; }
.bt-table__id { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: var(--space-8); }
.bt-table__sub { font-size: 11.5px; color: var(--ink-300); }
.bt-table__actions { display: flex; gap: var(--space-4); justify-content: flex-end; }
.bt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; flex: none; }
.bt-dot--off { background: transparent; }

/* skeleton */
.bt-skel { display: inline-block; height: 12px; border-radius: 6px; background: var(--segment-track); position: relative; overflow: hidden; vertical-align: middle; }
.bt-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--glass-pill), transparent); animation: bt-shimmer 1.4s var(--ease-calm) infinite; }
.bt-skel--pill { height: 24px; border-radius: var(--radius-pill); }
.bt-skel--block { display: block; width: 100%; }
.bt-skel--thumb { width: var(--w-thumb); aspect-ratio: 16 / 9; height: auto; border-radius: var(--radius-inline); display: block; }
@keyframes bt-shimmer { to { transform: translateX(100%); } }

/* ───────── shell ───────── */
.bt-shell { display: grid; grid-template-columns: var(--w-menu) minmax(0, 1fr); gap: var(--space-12); padding: var(--space-12); min-width: var(--w-desktop-min); min-height: 100vh; align-items: start; }
.bt-shell--context { grid-template-columns: var(--w-menu) var(--w-menu) minmax(0, 1fr); }
.bt-shell--rail { grid-template-columns: var(--w-rail) minmax(0, 1fr); }
.bt-menu { position: sticky; top: var(--space-12); height: calc(100vh - 24px); padding: var(--space-16) var(--space-12) var(--space-12); display: flex; flex-direction: column; gap: var(--space-16); }
.bt-menu__brand { display: flex; align-items: center; gap: var(--space-8); padding: 0 0 0 var(--space-8); min-height: var(--h-36); }
.bt-menu__name { font-size: 14.5px; line-height: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-100); text-decoration: none; flex: 1; }
.bt-menu__group { display: flex; flex-direction: column; gap: 2px; }
.bt-menu__group > .bt-label { padding: 0 var(--space-8) var(--space-6); }
.bt-menu__spacer { flex: 1; }
.bt-menu__user { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-12) var(--space-4) 0 var(--space-8); border-top: 0.5px solid var(--hairline); }
.bt-menu__userinfo { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-menu__avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); font-size: 11.5px; font-weight: 650; flex: none; }
.bt-menu-row { height: var(--h-32); border-radius: var(--radius-inline); display: flex; align-items: center; gap: var(--space-8); padding: 0 var(--space-8); border: 0; background: transparent; font: inherit; color: var(--ink-200); cursor: pointer; text-align: left; text-decoration: none; width: 100%; }
.bt-menu-row:hover { background: var(--glass-pill); color: var(--ink-100); }
.bt-menu-row[aria-current="page"], .bt-menu-row[aria-current="true"] { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.bt-menu-row__n { margin-left: auto; font-size: 11.5px; font-weight: 650; color: var(--ink-300); }
.bt-menu-row[aria-current] .bt-menu-row__n { color: var(--accent); }
.bt-shell--rail .bt-menu { padding: var(--space-12) 0; align-items: center; border-radius: var(--radius-group); }
.bt-shell--rail .bt-menu__name, .bt-shell--rail .bt-menu-row__text, .bt-shell--rail .bt-menu-row__n, .bt-shell--rail .bt-menu__group > .bt-label,
.bt-shell--rail .bt-menu__userinfo, .bt-shell--rail .bt-menu__shortcuts { display: none; }
.bt-shell--rail .bt-menu__brand { padding: 0; }
.bt-shell--rail .bt-menu-row { width: 44px; height: 44px; justify-content: center; padding: 0; border-radius: 12px; }
.bt-shell--rail .bt-menu-row .bt-icon { width: 20px; height: 20px; }
.bt-shell--rail .bt-menu__user { border: 0; padding: 0; flex-direction: column; }
.bt-context { position: sticky; top: var(--space-12); padding: var(--space-16) var(--space-12); display: flex; flex-direction: column; gap: var(--space-16); max-height: calc(100vh - 24px); overflow: auto; }
.bt-shortcuts { display: grid; grid-template-columns: auto 1fr; gap: var(--space-6) var(--space-8); align-items: center; font-size: 12px; color: var(--ink-300); padding: 0 var(--space-8); margin: 0; }
.bt-shortcuts dt { display: inline-flex; gap: 2px; margin: 0; }
.bt-shortcuts dd { margin: 0; }
.bt-main { display: flex; flex-direction: column; gap: var(--space-12); min-width: 0; }
.bt-pagehead { display: flex; align-items: flex-end; gap: var(--space-12); flex-wrap: wrap; padding: var(--space-8) var(--space-8) 0; }
.bt-pagehead h1 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.028em; margin: 0; }
.bt-pagehead__meta { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; color: var(--ink-300); font-size: 12px; }
.bt-pagehead__actions { margin-left: auto; display: flex; gap: var(--space-8); align-items: center; }
.bt-refresh { font-size: 12px; color: var(--ink-300); display: inline-flex; align-items: center; gap: var(--space-4); }
.bt-refresh .bt-icon { width: 13px; height: 13px; }

/* sticky review top bar + job band */
.bt-sticky { position: sticky; top: var(--space-12); z-index: 5; display: flex; flex-direction: column; gap: var(--space-8); }
.bt-topbar { padding: var(--space-8) var(--space-12) var(--space-8) var(--space-8); border-radius: var(--radius-panel); display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
.bt-topbar__title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bt-topbar__id { display: flex; align-items: center; gap: var(--space-8); }
.bt-topbar__id .bt-mono { font-size: 15px; font-weight: 650; }
.bt-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.bt-saved { font-size: 12px; color: var(--ink-300); display: inline-flex; align-items: center; gap: var(--space-4); white-space: nowrap; }
.bt-saved .bt-icon { width: 13px; height: 13px; color: var(--ok); }
.bt-saved--dirty .bt-icon { color: var(--warning); }

/* ───────── job band ───────── */
.bt-job { border-radius: var(--radius-menu); padding: var(--space-6) var(--space-8) var(--space-6) var(--space-12); display: flex; flex-direction: column; gap: var(--space-8); }
.bt-job__head { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; min-height: var(--h-30); }
.bt-job__title { font-weight: 650; }
.bt-job__meta { color: var(--ink-200); font-size: 12.5px; }
.bt-job__time { margin-left: auto; font-size: 12px; color: var(--ink-300); display: inline-flex; align-items: center; gap: var(--space-4); }
.bt-job__time .bt-icon { width: 13px; height: 13px; }
.bt-job--running { background: var(--job-info-bg); } .bt-job--running .bt-job__icon { color: var(--job-info); }
.bt-job--error { background: var(--job-err-bg); } .bt-job--error .bt-job__icon, .bt-job--error .bt-job__title { color: var(--job-err); }
.bt-job--done { background: var(--job-done-bg); } .bt-job--done .bt-job__icon, .bt-job--done .bt-job__title { color: var(--job-done); }
.bt-job--warn { background: var(--job-warn-bg); } .bt-job--warn .bt-job__icon, .bt-job--warn .bt-job__title { color: var(--job-warn); }
.bt-log { margin: 0 0 var(--space-4); padding: var(--space-8) var(--space-12); border-radius: var(--radius-inline); background: var(--glass-dark); color: var(--on-dark); font-family: var(--font-mono); font-size: 11.5px; line-height: 17px; white-space: pre; overflow: auto; max-height: calc(17px * 12 + 16px); }
.bt-job details summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-200); display: inline-flex; align-items: center; gap: var(--space-4); list-style: none; }
.bt-job--error details summary { color: var(--danger); }
.bt-job details summary::-webkit-details-marker { display: none; }
.bt-job details summary .bt-icon { width: 14px; height: 14px; transition: transform var(--duration-fast) var(--ease-calm); }
.bt-job details[open] summary .bt-icon { transform: rotate(180deg); }
.bt-job details[open] summary { margin-bottom: var(--space-8); }

/* ───────── modal ───────── */
.bt-scrim { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--space-24); background: var(--glass-pill); backdrop-filter: var(--backdrop-pill); -webkit-backdrop-filter: var(--backdrop-pill); }
.bt-scrim[hidden] { display: none; }
.bt-scrim--inline { position: relative; inset: auto; z-index: auto; min-height: 260px; border-radius: var(--radius-panel); }
.bt-modal { width: min(440px, 100%); padding: var(--space-20); display: flex; flex-direction: column; gap: var(--space-12); border-radius: var(--radius-panel);
  background: var(--glass-menu); backdrop-filter: var(--backdrop-menu); -webkit-backdrop-filter: var(--backdrop-menu); box-shadow: var(--shadow-float); }
.bt-modal__icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--warning-bg); color: var(--warning); }
.bt-modal__icon .bt-icon { width: 20px; height: 20px; }
.bt-modal__icon--info { background: var(--accent-bg); color: var(--accent); }
.bt-modal__title { margin: 0; font-size: 17px; line-height: 22px; font-weight: 650; }
.bt-modal__text { margin: 0; color: var(--ink-200); }
.bt-modal__actions { display: flex; justify-content: flex-end; gap: var(--space-8); margin-top: var(--space-4); }

/* ───────── toast ───────── */
.bt-toast { display: inline-flex; align-items: center; gap: var(--space-12); height: var(--h-44); padding: 0 var(--space-8) 0 var(--space-12); border-radius: var(--radius-pill);
  background: var(--glass-dark); backdrop-filter: var(--backdrop-dark); -webkit-backdrop-filter: var(--backdrop-dark); color: var(--on-dark); box-shadow: var(--shadow-float); white-space: nowrap; }
.bt-toast__ok { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--on-dark); color: var(--success-strong); flex: none; }
.bt-toast__ok .bt-icon { width: 14px; height: 14px; }
.bt-toast__undo { height: var(--h-30); padding: 0 var(--space-12); border-radius: var(--radius-pill); border: 0; font: inherit; font-weight: 600; color: var(--on-dark); background: transparent; box-shadow: inset 0 0 0 1px var(--on-dark); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-4); }
.bt-toast__undo .bt-icon { width: 14px; height: 14px; }
.bt-toast:not(:has(.bt-toast__undo)) { padding-right: var(--space-16); }
.bt-toaster { position: fixed; left: 50%; bottom: var(--space-24); transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
.bt-toaster .bt-toast { animation: bt-rise var(--duration-slow) var(--ease-calm); }
@keyframes bt-rise { from { transform: translateY(12px); opacity: 0; } }

/* ───────── empty state ───────── */
.bt-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-8); padding: var(--space-24) var(--space-16); }
.bt-empty__icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: var(--glass-card); box-shadow: var(--shadow-glass); margin-bottom: var(--space-8); }
.bt-empty__icon .bt-icon { width: 26px; height: 26px; }
.bt-empty__title { font-size: 17px; line-height: 22px; font-weight: 650; margin: 0; }
.bt-empty__text { color: var(--ink-300); max-width: 360px; margin: 0; }
.bt-empty__actions { display: flex; gap: var(--space-8); margin-top: var(--space-8); }

/* ───────── video player ───────── */
.bt-player { display: flex; flex-direction: column; gap: var(--space-8); }
.bt-player__screen { aspect-ratio: 16 / 9; border-radius: var(--radius-menu); background: var(--ink-100); color: var(--on-dark); display: grid; place-items: center; position: relative; overflow: hidden; }
.bt-player__screen video { width: 100%; height: 100%; object-fit: contain; display: block; }
.bt-player__screen > .bt-icon { width: 40px; height: 40px; opacity: .8; }
.bt-player__flag { position: absolute; left: var(--space-12); top: var(--space-12); }
.bt-player__cue { position: absolute; left: 50%; bottom: var(--space-16); transform: translateX(-50%); max-width: 82%; text-align: center; padding: var(--space-4) var(--space-12); border-radius: var(--radius-inline);
  background: var(--glass-dark); color: var(--on-dark); font-size: 14px; line-height: 20px; font-weight: 550; }
.bt-player__bar { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.bt-player__time { font-family: var(--font-mono); font-size: 13px; font-weight: 650; padding: 0 var(--space-8); white-space: nowrap; }
.bt-player__time small { font-size: 11.5px; font-weight: 500; color: var(--ink-300); font-family: var(--font-sans); }
.bt-player__time--output { color: var(--outgoing); }
.bt-player__stretch { margin-left: auto; font-size: 12.5px; color: var(--ink-300); display: inline-flex; align-items: center; gap: var(--space-4); white-space: nowrap; }
.bt-player__stretch b { color: var(--warning); font-weight: 650; }
.bt-player__stretch .bt-icon { width: 14px; height: 14px; }

/* ───────── timeline ───────── */
.bt-timeline { display: flex; flex-direction: column; gap: var(--space-6); }
.bt-timeline__rail { position: relative; height: var(--h-28); border-radius: 8px; background: var(--segment-track); overflow: hidden; cursor: pointer; }
.bt-timeline__gap { position: absolute; top: 0; bottom: 0; background: var(--glass-menu); box-shadow: inset 0 0 0 0.5px var(--divider); pointer-events: none; }
.bt-timeline__mark { position: absolute; top: 5px; width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; border: 0; padding: 0; cursor: pointer; background: var(--ink-300); }
.bt-timeline__mark:hover { box-shadow: 0 0 0 2px var(--on-dark); }
.bt-timeline__mark--approved { background: var(--success-strong); }
.bt-timeline__mark--edited { background: var(--note); }
.bt-timeline__mark--new { background: var(--accent); }
.bt-timeline__mark--rejected { background: var(--danger-strong); height: 8px; top: 10px; }
.bt-timeline__mark[aria-current="true"] { box-shadow: 0 0 0 2px var(--on-dark), 0 0 0 4px var(--accent); }
.bt-timeline__head { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink-100); pointer-events: none; }
.bt-timeline__legend { display: flex; gap: var(--space-12); flex-wrap: wrap; font-size: 11.5px; color: var(--ink-300); }
.bt-timeline__legend span { display: inline-flex; align-items: center; gap: var(--space-4); }
.bt-timeline__legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* ───────── transcript ───────── */
.bt-transcript { display: flex; flex-direction: column; gap: 1px; overflow: auto; max-height: 240px; }
.bt-transcript__line { display: grid; grid-template-columns: 52px auto 1fr; gap: var(--space-8); align-items: baseline; min-height: var(--h-32); padding: 6px var(--space-8);
  border-radius: var(--radius-inline); border: 0; background: transparent; text-align: left; font: inherit; color: var(--ink-200); cursor: pointer; width: 100%; }
.bt-transcript__line:hover { background: var(--glass-menu); }
.bt-transcript__line[aria-current="true"] { background: var(--accent-bg); color: var(--ink-100); }
.bt-transcript__time { font-family: var(--font-mono); font-size: 12px; color: var(--ink-300); }
.bt-transcript__line[aria-current="true"] .bt-transcript__time { color: var(--accent); font-weight: 650; }
.bt-transcript__who { font-weight: 650; color: var(--ink-100); }

/* ───────── speakers ───────── */
.bt-speakers { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-8); }
.bt-speaker { display: flex; align-items: center; gap: var(--space-6); }
.bt-speaker label { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-300); white-space: nowrap; }

/* ───────── description card ─────────
   data-state: pending | approved | edited | new | rejected · aria-current="true" = selected */
.bt-desc { display: grid; grid-template-columns: var(--w-thumb) minmax(0, 1fr); gap: var(--space-8) var(--space-16); padding: var(--space-12); border-radius: var(--radius-panel);
  background: var(--glass-card); backdrop-filter: var(--backdrop-card); -webkit-backdrop-filter: var(--backdrop-card); box-shadow: var(--shadow-glass);
  transition: box-shadow var(--duration-fast) var(--ease-calm), background-color var(--duration-fast) var(--ease-calm); }
.bt-desc[aria-current="true"] { box-shadow: var(--shadow-glass), inset 0 0 0 1.5px var(--accent); }
.bt-desc[data-state="rejected"] { background: var(--glass-shell); }
.bt-desc[data-state="rejected"] .bt-thumb img, .bt-desc[data-state="rejected"] .bt-thumb > .bt-icon { filter: grayscale(1); opacity: .5; }
.bt-desc[data-state="rejected"] .bt-desc__text { background: transparent; box-shadow: inset 0 0 0 0.5px var(--hairline); color: var(--ink-200); }
.bt-desc__side { display: flex; flex-direction: column; gap: 2px; }
.bt-thumb { width: var(--w-thumb); aspect-ratio: 16 / 9; border-radius: var(--radius-inline); background: var(--ink-100); color: var(--on-dark); border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; overflow: hidden; position: relative; margin-bottom: var(--space-4); }
.bt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-thumb > .bt-icon { width: 22px; height: 22px; opacity: .7; }
.bt-thumb__play { position: absolute; right: var(--space-6); bottom: var(--space-6); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--glass-dark); color: var(--on-dark); }
.bt-thumb__play .bt-icon { width: 12px; height: 12px; }
.bt-thumb:hover .bt-thumb__play { background: var(--accent); }
.bt-desc__time { font-family: var(--font-mono); font-size: 13px; font-weight: 650; }
.bt-desc__meta { font-size: 11.5px; color: var(--ink-300); line-height: 16px; }
.bt-desc__side .bt-badge { align-self: flex-start; margin-top: var(--space-4); }
.bt-desc__main { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.bt-desc__top { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.bt-desc__gap { font-size: 12px; color: var(--ink-300); display: inline-flex; align-items: center; gap: var(--space-4); margin-left: auto; white-space: nowrap; }
.bt-desc__gap .bt-icon { width: 14px; height: 14px; }
.bt-desc__gap--inside { color: var(--warning); font-weight: 600; }
.bt-desc__text { font-size: 13.5px; min-height: 48px; }
.bt-desc__orig { font-size: 12px; line-height: 17px; color: var(--ink-300); margin-top: -2px; display: flex; flex-wrap: wrap; gap: 2px var(--space-12); }
.bt-desc__orig b { font-weight: 600; color: var(--ink-label); }
.bt-desc__actions { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.bt-desc__actions .bt-spacer { flex: 1; }
.bt-desc__note { flex: 1 1 140px; width: auto; min-width: 120px; }
.bt-desc__notes { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; padding-top: var(--space-8); border-top: 1px solid var(--divider); }
.bt-desc__notes .bt-input { flex: 1 1 260px; width: auto; }
.bt-desc__sysnote { font-size: 11.5px; line-height: 16px; color: var(--ink-300); display: inline-flex; align-items: center; gap: var(--space-4); }
.bt-desc__sysnote .bt-icon { width: 13px; height: 13px; }

/* ───────── review & watch layout ───────── */
.bt-next { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-6) var(--space-8) var(--space-6) var(--space-16); border-radius: var(--radius-panel); }
.bt-next__text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-review { display: grid; grid-template-columns: minmax(440px, 5fr) minmax(0, 6fr); gap: var(--space-12); align-items: start; }
.bt-review__left { position: sticky; top: var(--sticky-offset, 96px); display: flex; flex-direction: column; gap: var(--space-12); max-height: calc(100vh - var(--sticky-offset, 96px) - var(--space-12)); max-height: calc(100dvh - var(--sticky-offset, 96px) - var(--space-12)); }
/* oynatıcı hep görünür; transkript ve diğer paneller sol sütunun içinde kendi başına kayar */
.bt-review__left > .bt-panel:first-child { flex: none; }
.bt-review__leftscroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--space-12); }
.bt-review__right { display: flex; flex-direction: column; gap: var(--space-12); min-width: 0; }
.bt-listbar { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }

/* downloads */
.bt-downloads { display: flex; flex-direction: column; }
.bt-download { display: flex; align-items: center; gap: var(--space-12); min-height: var(--h-52); padding: 0 var(--space-4); border-bottom: 1px solid var(--divider); }
.bt-download:last-child { border-bottom: 0; }
.bt-download__type { width: 36px; height: 36px; border-radius: var(--radius-inline); display: grid; place-items: center; background: var(--segment-track); color: var(--ink-200); flex: none; }
.bt-download__type--video { background: var(--accent-bg); color: var(--accent); }
.bt-download__type--sub { background: var(--outgoing-bg); color: var(--outgoing); }
.bt-download__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bt-download__name { font-weight: 600; }
.bt-download__file { font-family: var(--font-mono); font-size: 12px; color: var(--ink-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-download__size { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-200); white-space: nowrap; }

/* watch: under 900px a single column (prompt: phones are for watching only) */
@media (max-width: 899px) {
  .bt-shell--watch { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .bt-shell--watch > .bt-menu { display: none; }
  .bt-shell--watch .bt-review { grid-template-columns: minmax(0, 1fr); }
  .bt-shell--watch .bt-review__left { position: static; max-height: none; }
  .bt-shell--watch .bt-review__leftscroll { overflow: visible; }
  .bt-shell--watch .bt-topbar__actions { display: none; }
  .bt-shell--watch .bt-infocards { grid-template-columns: minmax(0, 1fr); }
  .bt-shell--watch .bt-desc { grid-template-columns: 120px minmax(0, 1fr); }
  .bt-shell--watch .bt-thumb { width: 120px; }
  .bt-shell--watch .bt-btn, .bt-shell--watch .bt-segment button { min-height: var(--h-44); }
}

@media (prefers-reduced-motion: reduce) {
  .bt-spin, .bt-btn.is-loading > .bt-icon:first-child, .bt-skel::after { animation: none; }
  .bt-root *, .bt-page * { transition: none !important; animation-duration: 0s !important; }
}
.bt-desc__text[readonly] { resize: none; }