/* bateri penceresinin birebir kopyası.
   Bütün ölçüler punto (CSS px = pt). Kaynak: gerçek pencerenin 2x ekran
   görüntüsü ve bateri kaynak kodu (bt-gpu/frame.rs, bt-atlas/font.rs,
   bt-core/dock.rs, bt-core/color.rs). Ayarlar: SF Mono 14pt, satır 1.2.

   Pencere 900 × 520:
     0–32    başlık çubuğu (macOS Tahoe)
     32–432  ızgara, 20 satır × 20pt, sol boşluk 8pt, hücre 8.5pt
     432–448 artık (satıra bölünmeyen piksel)
     448     ayırıcı (1 cihaz pikseli, #404041)
     456–476 giriş satırı
     484     ayırıcı
     492–512 durum satırı (0.8 ölçekli küçük yüz)
*/

.btw {
  --bg: #000000;
  --fg: #d8d9dd;
  --dim: #909093;
  --quiet: #606062;
  --sep: #404041;
  --accent: #7a9cc6;
  --cursor: #d9b063;
  --ok: #8bb58b;
  --err: #d16d6a;
  --a2: #8bb58b;  --a6: #79b3b3;  --a3: #d6b16a;  --a1: #d16d6a;  --a4: #7a9cc6;
  --cw: 8.5px;
  --ch: 20px;
  --mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --base: 14.75px;      /* taban çizgisi, hücre üstünden */
  --shift: 0px;         /* JS: fontun kendi taban çizgisini buna oturtur */
  --shift-s: 0px;       /* küçük yüz için aynısı */
  --ls: 0px;            /* JS: hücre − fontun ilerlemesi */
  --ls-s: 0px;

  position: relative;
  width: 900px; height: 520px;
  background: var(--bg);
  color: var(--fg);
  border-radius: 16px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 14px;
  font-kerning: none;
  font-variant-ligatures: none;
  /* CoreText gibi hafif kalınlaştırma: antialiased değil, auto. */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  user-select: none;
  contain: layout paint;
  transform-origin: 0 0;
}
/* macOS pencere kenarı: yanlarda %20 beyaz, üstte iki kat parlak. */
.btw::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, .2),
    inset 0 0.5px 0 0 rgba(255, 255, 255, .36),
    inset 0 1px 0 0 rgba(255, 255, 255, .08);
  z-index: 10;
}

/* Başlık çubuğu */
.btw-lights { position: absolute; left: 9px; top: 9px; display: flex; gap: 9px; }
.btw-lights i { width: 14px; height: 14px; border-radius: 50%; display: block; }
.btw-lights i:nth-child(1) { background: #ff5c60; }
.btw-lights i:nth-child(2) { background: #fac800; }
.btw-lights i:nth-child(3) { background: #35c759; }
.btw-title {
  position: absolute; left: 84px; top: 0; height: 32px;
  font: 700 13px/32px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  color: #8c8c8c;
  transform: translateY(var(--shift-t, 0px));
}

/* Satırlar: her satır bir hücre yüksekliği; metin taban çizgisine oturur. */
.btw-row {
  position: absolute; left: 8px; right: 0;
  height: var(--ch);
  white-space: pre;
  line-height: var(--ch);
}
.btw-txt {
  position: absolute; left: 0; top: 0;
  letter-spacing: var(--ls);
  padding-left: calc(var(--ls) / 2);
  transform: translateY(var(--shift));
}
.btw-grid { position: absolute; left: 0; right: 0; top: 32px; height: 400px; }
.btw-grid-inner { position: absolute; inset: 0; will-change: transform; }

/* Komut işareti: fonttan değil, prosedürel ›. */
.btw-mark { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); overflow: visible; }
.btw-mark path { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: butt; stroke-linejoin: miter; }
.btw-mark.ok { color: var(--ok); }
.btw-mark.err { color: var(--err); }
.btw-mark.run, .btw-mark.idle { color: var(--accent); }
.btw-dur { position: absolute; top: 0; color: var(--dim); }

/* Dock */
.btw-sep { position: absolute; left: 0; right: 0; height: 0.5px; background: var(--sep); }
.btw-in { position: absolute; left: 8px; right: 0; top: 0; height: 100%; pointer-events: none; }
.btw-layer { position: absolute; inset: 0; }
.btw-band { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bg); }
.btw-sel { position: absolute; height: var(--ch); background: #283042; border-radius: 4.4px; }   /* SELECTION_RADIUS 0.22 */
.btw-ch.under { color: var(--bg); }   /* imlecin altındaki harf zemin renginde */
.btw-in .btw-mark { position: absolute; left: 0; }
.btw-ch {
  position: absolute; top: 456px;
  width: var(--cw); height: var(--ch);
  line-height: var(--ch);
  text-align: center;
}
.btw-ch > span { display: inline-block; transform: translateY(var(--shift)); }
.btw-caret {
  position: absolute; top: 0; left: 0;
  width: var(--cw); height: var(--ch);
  border-radius: 1px;               /* cursor_radius 0.05 × 20pt */
  background: var(--cursor);
  will-change: transform;
}
.btw-status {
  position: absolute; left: 8px; top: 492px; height: var(--ch);
  font-size: 11.2px;                 /* CONTEXT_SCALE 0.8 */
  line-height: var(--ch);
  white-space: pre;
}
.btw-status .btw-txt { letter-spacing: var(--ls-s); padding-left: calc(var(--ls-s) / 2); transform: translateY(var(--shift-s)); }

/* Renk sınıfları */
.c-fg { color: var(--fg); } .c-dim { color: var(--dim); } .c-quiet { color: var(--quiet); }
.c-g { color: var(--a2); } .c-c { color: var(--a6); } .c-y { color: var(--a3); } .c-r { color: var(--a1); } .c-b { color: var(--a4); }
.b { font-weight: 700; }

/* Yazma / silme efektlerinin hayaletleri */
.btw-ghost { position: absolute; top: 0; width: var(--cw); height: var(--ch); line-height: var(--ch); text-align: center; pointer-events: none; }
.btw-ghost > span { display: inline-block; transform: translateY(var(--shift)); }
.btw-frag { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }