.theme-toggle{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;min-width:36px;
  padding:0 10px;border:1.5px solid var(--line);border-radius:999px;background:var(--card,#fff);color:var(--ink);
  font:600 12px/1 var(--body,system-ui);cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .18s
}
.theme-toggle:hover{border-color:var(--blue);transform:translateY(-1px)}
.theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .theme-sun{display:none}
html[data-theme="soft-dark"] .theme-toggle .theme-moon{display:none}
html[data-theme="soft-dark"] .theme-toggle .theme-sun{display:block}
.top .theme-toggle{height:34px;min-width:34px;padding:0 8px;color:#fff;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22)}
.top .theme-toggle .theme-label{display:none}

body,body>nav,body>header,.toolbar-shell,.product,.fam,.step,.cta,.drawer,.sheet,.modal-card,.control,.chip{
  transition:background-color .22s,color .22s,border-color .22s
}

html[data-theme="soft-dark"]{
  --ink:#F2F6FC;--ink-2:#CAD7E6;--ink-3:#9FB2C7;
  --paper:#263A4F;--card:#324A62;--line:#526A82;
  --blue:#6AA6FA;--blue-deep:#4D8EDF;--blue-soft:#405A73;--blue-light:#80B7FA;
  --navy:#1F3348;--navy-2:#294761;--warm:#F07A50;--warm-deep:#FF9A75;
  --cool:#65BCE5;--cool-deep:#8DD7FA;--ok:#58B5D7;--shadow:5,18,32
}
html[data-theme="soft-dark"] body>nav,
html[data-theme="soft-dark"] body>header:not(.hero){background:rgba(38,58,79,.94)!important;border-color:var(--line)}
html[data-theme="soft-dark"] header.hero{background:linear-gradient(180deg,#36516C 0%,#2E465E 52%,var(--paper) 100%)!important}
html[data-theme="soft-dark"] .toolbar-shell{background:rgba(38,58,79,.95)!important}
html[data-theme="soft-dark"] .eyebrow,
html[data-theme="soft-dark"] .tip,
html[data-theme="soft-dark"] .fam-h span,
html[data-theme="soft-dark"] .badge,
html[data-theme="soft-dark"] .category,
html[data-theme="soft-dark"] .spec .v{color:#B8D5FF}
html[data-theme="soft-dark"] #compat,
html[data-theme="soft-dark"] #video,
html[data-theme="soft-dark"] #check,
html[data-theme="soft-dark"] #contact{background:var(--card)!important;border-color:var(--line)}
html[data-theme="soft-dark"] .pick-card,
html[data-theme="soft-dark"] .meta>div,
html[data-theme="soft-dark"] .step,
html[data-theme="soft-dark"] .vid-cap,
html[data-theme="soft-dark"] .fam,
html[data-theme="soft-dark"] .feats>div,
html[data-theme="soft-dark"] table,
html[data-theme="soft-dark"] .cta,
html[data-theme="soft-dark"] .vm,
html[data-theme="soft-dark"] .product,
html[data-theme="soft-dark"] .drawer,
html[data-theme="soft-dark"] .modal-card,
html[data-theme="soft-dark"] .sheet,
html[data-theme="soft-dark"] .stats>div,
html[data-theme="soft-dark"] .dimfacts>div,
html[data-theme="soft-dark"] .stage-bar,
html[data-theme="soft-dark"] .conn,
html[data-theme="soft-dark"] .ip-card{background:var(--card)!important;color:var(--ink);border-color:var(--line)}
html[data-theme="soft-dark"] .drawer-foot{background:#2C4258!important;border-color:var(--line)}
html[data-theme="soft-dark"] .cart-btn,
html[data-theme="soft-dark"] .btn-ink,
html[data-theme="soft-dark"] .btn-line:hover,
html[data-theme="soft-dark"] .add,
html[data-theme="soft-dark"] .chip.on,
html[data-theme="soft-dark"] .lang button.on,
html[data-theme="soft-dark"] .cw-btn,
html[data-theme="soft-dark"] .cw-me,
html[data-theme="soft-dark"] .cw-send{background:#1D344A!important;color:#fff}
html[data-theme="soft-dark"] .btn-b,
html[data-theme="soft-dark"] .btn.solid,
html[data-theme="soft-dark"] .play,
html[data-theme="soft-dark"] .seg button.on,
html[data-theme="soft-dark"] .vmode button.on,
html[data-theme="soft-dark"] .step-n,
html[data-theme="soft-dark"] .chk i,
html[data-theme="soft-dark"] .feats i{background:#2F6FB9!important;color:#fff}
html[data-theme="soft-dark"] .submit{background:#2F6FB9!important;color:#fff}
html[data-theme="soft-dark"] .btn-warm,
html[data-theme="soft-dark"] .checkout{background:#BC4F2D!important;color:#fff}
html[data-theme="soft-dark"] .control,
html[data-theme="soft-dark"] input:not([type="range"]):not([type="color"]),
html[data-theme="soft-dark"] select,
html[data-theme="soft-dark"] textarea,
html[data-theme="soft-dark"] .btn:not(.solid):not(.btn-warm):not(.btn-ink):not(.btn-b),
html[data-theme="soft-dark"] .chip:not(.on),
html[data-theme="soft-dark"] .lang{background:#3A526A!important;color:var(--ink);border-color:var(--line)}
html[data-theme="soft-dark"] input::placeholder,
html[data-theme="soft-dark"] textarea::placeholder{color:#91A6BC}
html[data-theme="soft-dark"] .stage{background:#2A4057!important}
html[data-theme="soft-dark"] .empty,
html[data-theme="soft-dark"] .load-error{background:rgba(50,74,98,.72);border-color:#66809A}
html[data-theme="soft-dark"] .visual{filter:saturate(.9) brightness(.9)}
html[data-theme="soft-dark"] .product-foot,
html[data-theme="soft-dark"] .cart-line{border-color:var(--line)}
html[data-theme="soft-dark"] .quantity button,
html[data-theme="soft-dark"] .close{background:#405A73;color:var(--ink)}
html[data-theme="soft-dark"] .warn,
html[data-theme="soft-dark"] .warnbox{background:#574A3D;color:#FFE0AF}
html[data-theme="soft-dark"] .tip{color:#D4E7FF}
html[data-theme="soft-dark"] .cw-dot{border-color:var(--paper)}
html[data-theme="soft-dark"] .cw-bot{background:#3A526A}
html[data-theme="soft-dark"] .cw-calc{background:#2D435A}
html[data-theme="soft-dark"] .pay-logos,
html[data-theme="soft-dark"] .secure-note{color:var(--ink-2)}
html[data-theme="soft-dark"] footer{background:#20364B;color:#B8C9DC}

@media(max-width:620px){.theme-toggle{padding:0 8px}.theme-toggle .theme-label{display:none}}

/* Shared language switcher */
.lang{
  display:inline-flex!important;align-items:center;gap:3px;padding:3px!important;overflow:visible!important;
  border:1px solid var(--line)!important;border-radius:12px!important;background:var(--blue-soft)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55)
}
.lang button{
  min-width:38px;height:30px;padding:0 10px!important;border-radius:9px!important;
  color:var(--ink-2)!important;font-size:12px!important;font-weight:700!important;letter-spacing:.04em;
  transition:background .16s,color .16s,box-shadow .16s!important
}
.lang button.on{background:var(--card)!important;color:var(--blue-deep)!important;box-shadow:0 2px 7px rgba(var(--shadow),.14)}
.lang button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
html[data-theme="soft-dark"] .lang{background:#2D435A!important}
html[data-theme="soft-dark"] .lang button.on{background:#1D344A!important;color:#fff!important}

/* Consistent back navigation on standalone inner pages */
.site-back-wrap{padding:12px max(20px,calc((100% - 1180px)/2));background:var(--paper);border-bottom:1px solid var(--line)}
.site-back{
  display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:8px 14px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);color:var(--ink);font:700 13px/1 var(--body,system-ui);cursor:pointer;
  box-shadow:0 5px 16px rgba(var(--shadow),.08);transition:transform .16s,border-color .16s,box-shadow .16s
}
.site-back:hover{transform:translateX(-2px);border-color:var(--blue);box-shadow:0 7px 20px rgba(var(--shadow),.13)}
.site-back:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:620px){.site-back-wrap{padding:9px 13px}.site-back{min-height:36px;padding:7px 12px}}

/* ================== ORTAK DURUM VE FORM PARÇALARI ==================
   Yükleniyor / boş / hata durumları ve alan bazlı form hataları için
   tek biçim. apps/web/src/shared/ui.js bu sınıfları üretir. */
.state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:48px 20px;text-align:center;color:var(--ink-3,#68727f);font-size:14.5px;line-height:1.6}
.state p{margin:0;max-width:42ch}
.state-error{color:var(--err,#B4231A)}
.state-spinner{width:22px;height:22px;border-radius:50%;
  border:2px solid var(--line,#d9e0ea);border-top-color:var(--ink,#14161A);
  animation:dablsync-spin .8s linear infinite}
@keyframes dablsync-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .state-spinner{animation-duration:2.4s}
}
.state-retry{padding:9px 18px;border-radius:999px;border:1px solid var(--line,#d9e0ea);
  background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer}
.state-retry:hover{background:var(--surface-2,#eef1f6)}
.state-retry:focus-visible{outline:2px solid #1668E3;outline-offset:2px}

.field-error{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:var(--err,#B4231A)}
.form-summary{margin:0 0 14px;padding:10px 13px;border-radius:10px;font-size:13px;
  background:color-mix(in srgb, var(--err,#B4231A) 10%, transparent);color:var(--err,#B4231A)}
[aria-invalid="true"]{border-color:var(--err,#B4231A) !important}

.demo-fill{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;
  margin:0 0 16px;padding:11px 14px;border-radius:12px;
  border:1px dashed var(--line,#d9e0ea);background:var(--surface-2,#f2f5f9)}
.demo-fill p{margin:0;flex:1 1 220px;font-size:12.5px;line-height:1.5;color:var(--ink-3,#68727f)}

/* Klavye ile gezinen herkes için görünür odak halkası. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid #1668E3;outline-offset:2px;border-radius:4px}