/* Base64 — araca özel ayrıntılar; temel bileşenler shared/toolbox.css'te */

.b64-disclaimer { margin: -6px 0 20px; max-width: 72ch; }

/* Ayar çubuğu */
.b64-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 22px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.b64-bar__group { display: grid; gap: 6px; min-width: 0; }
.b64-bar__group .tb-select { width: auto; min-width: 0; max-width: 100%; padding: 7px 10px; font-size: 14px; }
.b64-bar .tb-seg code { font: 12px/1 var(--tb-mono); color: var(--tb-muted); margin-left: 4px; }
.b64-pad { padding: 7px 12px; }
.b64-pad code { margin-left: 4px; }

/* İki bölme */
.b64-panes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 860px) { .b64-panes { grid-template-columns: minmax(0, 1fr); } }
.b64-pane { display: flex; flex-direction: column; min-width: 0; }
.b64-area { min-height: 240px; flex: 1 1 auto; word-break: break-all; }
.b64-area--out { background: var(--tb-surface-2); }
.b64-actions { margin-top: 12px; }
.b64-pane .tb-note { margin-top: 12px; }

.b64-binary { display: grid; gap: 14px; padding: 14px; border: 1px dashed var(--tb-border-strong); border-radius: var(--tb-radius-sm); background: var(--tb-surface-2); }
.b64-hex { font-size: 12.5px !important; letter-spacing: .02em; }
.b64-preview {
  display: block;
  max-width: 100%;
  max-height: 220px;
  width: auto;
  height: auto;
  border-radius: var(--tb-radius-sm);
  border: 1px solid var(--tb-border);
  background: repeating-conic-gradient(var(--tb-checker-a) 0 25%, var(--tb-checker-b) 0 50%) 0 0 / 16px 16px;
}

/* Dosya bırakma alanı */
.b64-drop {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 28px 16px;
  border: 1.5px dashed var(--tb-border-strong);
  border-radius: var(--tb-radius);
  background: var(--tb-surface-2);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.b64-drop:hover, .b64-drop.is-over { border-color: var(--tb-accent); background: var(--tb-accent-soft); }
.b64-drop:focus-within { box-shadow: var(--tb-focus); border-color: var(--tb-accent); }
.b64-drop svg { width: 28px; height: 28px; fill: none; stroke: var(--tb-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.b64-drop__title { font-weight: 600; }
.b64-drop__hint { font-size: 13px; color: var(--tb-muted); }

#f-result, #d-result { display: grid; gap: 14px; margin-top: 16px; }
#f-result[hidden], #d-result[hidden] { display: none; }
.b64-filemeta dd { overflow-wrap: anywhere; }
#d-note { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) { .b64-drop { transition: none; } }