* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.ct-page { margin: 0; min-height: 100vh; padding: 12px; background: #f6f8fc; }
@media (prefers-color-scheme: dark) { body.ct-page { background: #0f131b; } }
#ct-app {
  --ct-bg: #f6f8fc;
  --ct-card: #ffffff;
  --ct-card-soft: #f4f6fb;
  --ct-text: #111827;
  --ct-soft: #475467;
  --ct-muted: #667085;
  --ct-border: #dfe4ec;
  --ct-accent: var(--accent, #3155ee);
  --ct-success: #067647;
  --ct-danger: #b42318;
  --ct-warning: #b54708;
  width: min(900px, 100%);
  margin: 0 auto;
  padding: 18px 0 40px;
  color: var(--ct-text) !important;
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#ct-app[data-ct-theme="dark"] {
  --ct-bg: #0f131b;
  --ct-card: #171d28;
  --ct-card-soft: #1d2431;
  --ct-text: #f7f9fc;
  --ct-soft: #d0d5dd;
  --ct-muted: #98a2b3;
  --ct-border: #303949;
  --ct-accent: #5f79ff;
  --ct-success: #6ce9a6;
  --ct-danger: #fda29b;
  --ct-warning: #fec84b;
  color-scheme: dark;
}
#ct-app, #ct-app * { box-sizing: border-box; }
#ct-app button, #ct-app input { font: inherit; }
#ct-app h2, #ct-app h3, #ct-app p { color: inherit !important; }
#ct-app .ct-hero { text-align: center; padding: 16px 14px 22px; }
#ct-app .ct-kicker { display: block; color: var(--ct-accent) !important; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
#ct-app .ct-hero h2 { margin: 8px 0 8px !important; font-size: clamp(34px, 6vw, 54px) !important; line-height: 1.02; letter-spacing: -.045em; }
#ct-app .ct-hero > p { max-width: 660px; margin: 0 auto !important; color: var(--ct-muted) !important; font-size: 16px; line-height: 1.55; }
#ct-app .ct-trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 14px; }
#ct-app .ct-trust-row span, #ct-app .ct-device-chip, #ct-app .ct-badge { border: 1px solid var(--ct-border); background: var(--ct-card-soft) !important; color: var(--ct-soft) !important; border-radius: 999px; padding: 6px 9px; font-size: 11px; font-weight: 750; }
#ct-app .ct-device-view, #ct-app .ct-status, #ct-app .ct-transfer { background: var(--ct-card) !important; border: 1px solid var(--ct-border); border-radius: 20px; padding: 22px; box-shadow: 0 14px 36px rgba(16,24,40,.06); }
#ct-app .ct-device-view + .ct-device-view { margin-top: 14px; }
#ct-app .ct-device-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
#ct-app .ct-device-head > div { min-width: 0; }
#ct-app .ct-device-head h3 { margin: 2px 0 4px !important; font-size: 23px !important; line-height: 1.2; }
#ct-app .hint { color: var(--ct-muted) !important; font-size: 12px; line-height: 1.5; }
#ct-app .ct-device-head .hint { margin: 0 !important; }
#ct-app .ct-step-card { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 15px; background: var(--ct-card-soft) !important; border: 1px solid var(--ct-border); border-radius: 15px; margin-top: 10px; }
#ct-app .ct-step-no { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--ct-accent) 13%, var(--ct-card-soft)) !important; color: var(--ct-accent) !important; font-weight: 900; }
#ct-app .ct-step-copy { display: grid; gap: 3px; min-width: 0; }
#ct-app .ct-step-copy strong { color: var(--ct-text) !important; }
#ct-app .button { border: 1px solid var(--ct-border) !important; background: var(--ct-card) !important; color: var(--ct-text) !important; border-radius: 11px !important; padding: 10px 14px !important; font-weight: 800 !important; cursor: pointer; text-decoration: none !important; box-shadow: none !important; }
#ct-app .button:hover { border-color: color-mix(in srgb, var(--ct-accent) 45%, var(--ct-border)) !important; }
#ct-app .button.primary { background: var(--ct-accent) !important; border-color: var(--ct-accent) !important; color: #fff !important; }
#ct-app .button.small { padding: 8px 11px !important; font-size: 12px !important; }
#ct-app .button:disabled { opacity: .42; cursor: not-allowed; }
#ct-app .ct-code-panel { margin-top: 14px; border: 1px solid color-mix(in srgb, var(--ct-accent) 28%, var(--ct-border)); background: color-mix(in srgb, var(--ct-accent) 6%, var(--ct-card-soft)) !important; border-radius: 16px; padding: 16px; }
#ct-app .ct-label { color: var(--ct-muted) !important; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
#ct-app .ct-code-line { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 7px; }
#ct-app .ct-code { white-space: nowrap; color: var(--ct-text) !important; font-size: clamp(36px, 7vw, 54px); line-height: 1; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
#ct-app .ct-code-panel .hint { margin: 9px 0 0 !important; }
#ct-app .ct-compat { color: var(--ct-muted) !important; font-size: 11px; margin: 12px 2px 0 !important; }
#ct-app .ct-join-form { display: grid; gap: 10px; }
#ct-app .ct-join-form label { font-size: 12px; font-weight: 850; color: var(--ct-text) !important; }
#ct-app .ct-code-input { width: 100%; min-height: 74px; border: 1.5px solid var(--ct-border) !important; background: var(--ct-card-soft) !important; color: var(--ct-text) !important; border-radius: 15px; padding: 12px 16px; font-size: 32px; text-align: center; letter-spacing: .22em; font-weight: 850; font-variant-numeric: tabular-nums; outline: 0; }
#ct-app .ct-code-input:focus { border-color: var(--ct-accent) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ct-accent) 12%, transparent); }
#ct-app .ct-code-input::placeholder { color: var(--ct-muted) !important; opacity: .55; }
#ct-app .ct-join-button { min-height: 50px; width: 100%; }
#ct-app .ct-mode-override { text-align: center; margin: 10px 0; }
#ct-app .ct-mode-override .button { border: 0 !important; background: transparent !important; color: var(--ct-muted) !important; font-weight: 650 !important; }
#ct-app .ct-status { margin-top: 12px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; box-shadow: none; padding: 15px 17px; }
#ct-app .ct-status p { margin: 2px 0 0 !important; color: var(--ct-muted) !important; font-size: 12px; }
#ct-app .ct-dot { width: 11px; height: 11px; border-radius: 50%; background: #98a2b3; box-shadow: 0 0 0 5px rgba(152,162,179,.12); }
#ct-app .ct-dot.is-waiting { background: var(--ct-warning); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ct-warning) 16%, transparent); }
#ct-app .ct-dot.is-online { background: var(--ct-success); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ct-success) 16%, transparent); }
#ct-app .ct-dot.is-error { background: var(--ct-danger); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ct-danger) 16%, transparent); }
#ct-app .ct-status-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
#ct-app .ct-badge-success { color: var(--ct-success) !important; border-color: color-mix(in srgb, var(--ct-success) 32%, var(--ct-border)); }
#ct-app .ct-transfer { margin-top: 12px; }
#ct-app .ct-transfer-head, #ct-app .ct-folder-box, #ct-app .ct-progress-meta, #ct-app .ct-progress-sub { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#ct-app .ct-transfer-head h3 { margin: 3px 0 0 !important; font-size: 22px !important; }
#ct-app .ct-transfer-head .hint { margin: 3px 0 0 !important; }
#ct-app .ct-network-info { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ct-success) 8%, var(--ct-card-soft)) !important; border: 1px solid color-mix(in srgb, var(--ct-success) 23%, var(--ct-border)); color: var(--ct-soft) !important; font-size: 12px; }
#ct-app .ct-network-info strong { color: var(--ct-success) !important; white-space: nowrap; }
#ct-app .ct-folder-box { margin-top: 14px; padding: 14px; border: 1px solid var(--ct-border); background: var(--ct-card-soft) !important; border-radius: 14px; }
#ct-app .ct-folder-box p { margin: 3px 0 0 !important; }
#ct-app .ct-send-box { display: grid; gap: 10px; margin-top: 14px; }
#ct-app .ct-picker { display: grid; place-items: center; text-align: center; min-height: 112px; border: 1.5px dashed color-mix(in srgb, var(--ct-muted) 58%, var(--ct-border)); border-radius: 16px; background: var(--ct-card-soft) !important; padding: 17px; cursor: pointer; }
#ct-app .ct-picker-main { min-height: 148px; border-color: color-mix(in srgb, var(--ct-accent) 44%, var(--ct-border)); background: color-mix(in srgb, var(--ct-accent) 5%, var(--ct-card-soft)) !important; }
#ct-app .ct-picker-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--ct-accent) 12%, transparent) !important; color: var(--ct-accent) !important; font-size: 24px; margin-bottom: 7px; }
#ct-app .ct-picker strong { color: var(--ct-text) !important; font-size: 17px; }
#ct-app .ct-picker small { color: var(--ct-muted) !important; margin-top: 3px; }
#ct-app .ct-selected { padding: 8px 2px 0; color: var(--ct-muted) !important; font-size: 13px; }
#ct-app .ct-send-button { min-height: 50px; width: 100%; }
#ct-app .ct-receiver-ready { display: flex; gap: 12px; align-items: center; margin-top: 15px; padding: 15px; border: 1px solid color-mix(in srgb, var(--ct-success) 27%, var(--ct-border)); background: color-mix(in srgb, var(--ct-success) 7%, var(--ct-card-soft)) !important; border-radius: 15px; }
#ct-app .ct-receiver-ready > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--ct-success) 15%, transparent) !important; color: var(--ct-success) !important; font-size: 23px; font-weight: 900; }
#ct-app .ct-receiver-ready p { margin: 3px 0 0 !important; color: var(--ct-muted) !important; font-size: 12px; }
#ct-app .ct-progress-wrap { margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--ct-border); }
#ct-app .ct-progress { height: 10px; margin: 9px 0; overflow: hidden; border-radius: 999px; background: var(--ct-card-soft) !important; }
#ct-app .ct-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ct-accent) !important; transition: width .1s linear; }
#ct-app .ct-progress-sub { color: var(--ct-muted) !important; font-size: 12px; }
#ct-app .ct-progress-sub strong { color: var(--ct-text) !important; }
#ct-app .ct-received { margin-top: 18px; }
#ct-app .ct-received h3 { margin: 0 0 9px !important; font-size: 16px !important; }
#ct-app .ct-file-list { display: grid; gap: 7px; }
#ct-app .ct-file-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; border: 1px solid var(--ct-border); background: var(--ct-card-soft) !important; border-radius: 12px; padding: 10px 12px; }
#ct-app .ct-file-name { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 750; color: var(--ct-text) !important; }
#ct-app .ct-file-size { display: block; color: var(--ct-muted) !important; font-size: 11px; }
#ct-app .ct-privacy-note { text-align: center; color: var(--ct-muted) !important; font-size: 11px; line-height: 1.5; margin: 14px auto 0 !important; max-width: 680px; }
#ct-app [hidden] { display: none !important; }

#ct-app .ct-benchmark { margin-top: 10px; padding: 12px 13px; border: 1px solid var(--ct-border); background: var(--ct-card-soft) !important; border-radius: 12px; }
#ct-app .ct-benchmark-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
#ct-app .ct-benchmark-head strong { color: var(--ct-text) !important; font-size: 12px; }
#ct-app .ct-benchmark-head p { margin: 3px 0 0 !important; color: var(--ct-muted) !important; font-size: 11px; }
#ct-app .ct-benchmark-best { color: var(--ct-success) !important; font-size: 11px; font-weight: 850; white-space: nowrap; }
#ct-app .ct-benchmark-results { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
#ct-app .ct-benchmark-chip { display: inline-flex; gap: 5px; align-items: center; border: 1px solid var(--ct-border); background: var(--ct-card) !important; color: var(--ct-soft) !important; border-radius: 999px; padding: 5px 8px; font-size: 10px; }
#ct-app .ct-benchmark-chip.is-best { border-color: color-mix(in srgb, var(--ct-success) 42%, var(--ct-border)); color: var(--ct-success) !important; font-weight: 800; }

@media (max-width: 680px) {
  #ct-app { padding-top: 8px; }
  #ct-app .ct-hero { padding-top: 8px; }
  #ct-app .ct-hero h2 { font-size: 38px !important; }
  #ct-app .ct-hero > p { font-size: 14px; }
  #ct-app .ct-trust-row { gap: 5px; }
  #ct-app .ct-trust-row span { font-size: 10px; }
  #ct-app .ct-device-view, #ct-app .ct-transfer { padding: 16px; border-radius: 17px; }
  #ct-app .ct-device-head { display: block; }
  #ct-app .ct-device-chip { display: inline-flex; margin-bottom: 10px; }
  #ct-app .ct-device-head h3 { font-size: 21px !important; }
  #ct-app .ct-step-card { grid-template-columns: auto 1fr; }
  #ct-app .ct-step-card .button { grid-column: 1 / -1; width: 100%; }
  #ct-app .ct-code-line { display: grid; grid-template-columns: 1fr; text-align: center; }
  #ct-app .ct-code { font-size: 42px; }
  #ct-app .ct-status { grid-template-columns: auto 1fr; padding: 13px; }
  #ct-app .ct-status-badges { grid-column: 2; justify-content: flex-start; }
  #ct-app .ct-transfer-head, #ct-app .ct-folder-box, #ct-app .ct-network-info, #ct-app .ct-benchmark-head { align-items: stretch; flex-direction: column; }
  #ct-app .ct-transfer-head .button, #ct-app .ct-folder-box .button { width: 100%; }
  #ct-app .ct-picker-main { min-height: 132px; }
  #ct-app .ct-code-input { min-height: 78px; font-size: 34px; }
}


/* v1.8 — sade yayın arayüzü */
#ct-app[data-ct-connected="true"] .ct-hero,
#ct-app[data-ct-connected="true"] .ct-device-view,
#ct-app[data-ct-connected="true"] .ct-mode-override { display: none !important; }
#ct-app[data-ct-connected="true"] { padding-top: 4px; }
#ct-app .ct-speed-warning { display: flex; gap: 11px; align-items: flex-start; margin-top: 10px; padding: 13px 14px; border-radius: 13px; border: 1px solid color-mix(in srgb, var(--ct-warning) 38%, var(--ct-border)); background: color-mix(in srgb, var(--ct-warning) 8%, var(--ct-card-soft)) !important; }
#ct-app .ct-speed-warning-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--ct-warning) 14%, transparent) !important; }
#ct-app .ct-speed-warning strong { color: var(--ct-text) !important; font-size: 13px; }
#ct-app .ct-speed-warning p { margin: 3px 0 0 !important; color: var(--ct-muted) !important; font-size: 12px; line-height: 1.45; }
#ct-app .ct-benchmark-results:empty { display: none; }
#ct-app[data-ct-connected="true"] .ct-status { margin-top: 0; }
@media (max-width: 680px) {
  #ct-app[data-ct-connected="true"] { padding-top: 0; }
  #ct-app .ct-status { border-radius: 15px; }
  #ct-app .ct-speed-warning { padding: 12px; }
}