/* Kurulum Sihirbazı — Demo + Admin ortak */
.hm-sw-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  background: rgba(15, 14, 12, 0.55);
  backdrop-filter: blur(4px);
}
.hm-sw-overlay.is-open { display: flex; align-items: stretch; justify-content: center; }
.hm-sw-shell {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(280px, 1fr);
  width: min(1180px, 100%);
  height: 100%;
  max-height: 100dvh;
  grid-template-rows: minmax(0, 1fr);
  margin: 0 auto;
  background: #faf7f2;
  color: #1c1917;
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  overflow: hidden;
}
.hm-sw-head-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}
.hm-sw-mobile-tabs {
  display: none;
  background: #f5f2ec;
  border: 1px solid #e7e5e4;
  border-radius: .55rem;
  padding: .15rem;
  gap: .15rem;
}
.hm-sw-mobile-tab {
  appearance: none;
  border: none;
  background: transparent;
  font-size: .78rem;
  font-weight: 700;
  color: #78716c;
  padding: .4rem .7rem;
  border-radius: .4rem;
  cursor: pointer;
}
.hm-sw-mobile-tab.is-active {
  background: #1c1917;
  color: #fff;
}
.hm-sw-btn-preview-foot { display: none; }
.hm-sw-mobile-preview-toolbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem .85rem;
  padding-top: calc(.65rem + env(safe-area-inset-top, 0px));
  background: #1c1917;
  color: #e7e5e4;
  border-bottom: 1px solid #44403c;
}
.hm-sw-mobile-preview-toolbar strong { font-size: .9rem; }

/* Dar / uygulama WebView: form tam ekran, önizleme ayrı (Önizle butonu) */
.hm-sw-overlay.is-compact.is-open {
  align-items: stretch;
  padding: 0;
  overflow-x: hidden;
}
.hm-sw-overlay.is-compact .hm-sw-shell {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr;
  width: 100% !important;
  max-width: 100vw !important;
  height: 100%;
  max-height: 100%;
  border-radius: 0;
  overflow-x: hidden;
}
.hm-sw-overlay.is-compact .hm-sw-mobile-tabs { display: inline-flex; }
.hm-sw-overlay.is-compact .hm-sw-btn-preview-foot { display: inline-flex; }
.hm-sw-overlay.is-compact .hm-sw-form-col {
  border-right: none;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-width: 100vw;
}
.hm-sw-overlay.is-compact .hm-sw-preview-col {
  display: none;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}
.hm-sw-overlay.is-compact .hm-sw-shell.is-mobile-preview {
  grid-template-rows: auto 1fr;
}
.hm-sw-overlay.is-compact .hm-sw-shell.is-mobile-preview .hm-sw-form-col {
  display: none !important;
}
.hm-sw-overlay.is-compact .hm-sw-shell.is-mobile-preview .hm-sw-preview-col {
  display: flex !important;
}
.hm-sw-overlay.is-compact .hm-sw-shell.is-mobile-preview .hm-sw-mobile-preview-toolbar {
  display: flex;
}
.hm-sw-overlay.is-compact .hm-sw-device {
  width: min(340px, calc(100vw - 48px)) !important;
}
.hm-sw-overlay.is-compact .hm-sw-preview-frame-wrap {
  overflow-x: hidden;
  padding: .75rem .85rem 1.25rem;
}
.hm-sw-overlay.is-compact .hm-sw-preview-frame-wrap.is-dual {
  flex-direction: column;
  align-items: center;
}
.hm-sw-overlay.is-compact .hm-sw-preview-frame-wrap.is-dual .hm-sw-device-focus {
  display: none !important;
}
.hm-sw-overlay.is-compact .hm-sw-foot-right {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .4rem;
}
.hm-sw-overlay.is-compact .hm-sw-foot {
  flex-wrap: wrap;
  gap: .5rem;
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
}
/* iOS: 16px altı input odaklanınca zoom — düzenleme bozuluyor */
.hm-sw-overlay.is-compact .hm-sw-field input[type="text"],
.hm-sw-overlay.is-compact .hm-sw-field input[type="email"],
.hm-sw-overlay.is-compact .hm-sw-field input[type="url"],
.hm-sw-overlay.is-compact .hm-sw-field input[type="tel"],
.hm-sw-overlay.is-compact .hm-sw-field input[type="number"],
.hm-sw-overlay.is-compact .hm-sw-field input[type="time"],
.hm-sw-overlay.is-compact .hm-sw-field textarea,
.hm-sw-overlay.is-compact .hm-sw-field select,
.hm-sw-overlay.is-compact .hm-sw-select,
.hm-sw-overlay.is-compact .hm-sw-color-row input[type="text"] {
  font-size: 16px !important;
  max-width: 100%;
  box-sizing: border-box;
}
.hm-sw-overlay.is-compact .hm-sw-field input[readonly] {
  background: #f5f5f4;
}
/* Önizleme: telefona sığdır */
.hm-sw-overlay.is-compact .hm-sw-preview-col {
  overflow: hidden;
}
.hm-sw-overlay.is-compact .hm-sw-preview-frame-wrap {
  align-items: center;
  justify-content: center;
  padding: .5rem .5rem 1rem;
}
.hm-sw-overlay.is-compact .hm-sw-device {
  width: min(360px, calc(100vw - 28px)) !important;
  height: calc(100dvh - 150px) !important;
  max-height: calc(100vh - 150px) !important;
  min-height: 0 !important;
}
.hm-sw-overlay.is-compact .hm-sw-preview-phone {
  height: 100%;
  border-radius: 28px;
}
.hm-sw-overlay.is-compact .hm-sw-preview-phone iframe {
  border-radius: 28px;
}
.hm-sw-overlay.is-compact .hm-sw-device-btn { display: none; }
/* Embed: arka plandaki admin sayfası kaymasın / tıklanmasın */
body.hm-sw-embed-open {
  overflow: hidden !important;
  touch-action: none;
}
body.hm-sw-embed-open .admin-wrapper {
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
}
body.hm-sw-embed-open .hm-sw-overlay {
  visibility: visible;
  pointer-events: auto;
  touch-action: auto;
}

@media (max-width: 900px) {
  .hm-sw-overlay.is-open:not(.is-compact) {
    /* JS is-compact ekler; yedek */
  }
}
.hm-sw-form-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid #e7e5e4;
  background: #fffdf8;
}
.hm-sw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid #e7e5e4;
}
.hm-sw-head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.hm-sw-close {
  appearance: none;
  border: 1px solid #e7e5e4;
  background: #fff;
  width: 2rem;
  height: 2rem;
  border-radius: .45rem;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.hm-sw-steps {
  display: flex;
  gap: .25rem;
  padding: .55rem .85rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  border-bottom: 1px solid #e7e5e4;
  background: #f5f2ec;
  scrollbar-width: thin;
  scrollbar-color: #a8a29e #e7e5e4;
}
.hm-sw-step-btn {
  appearance: none;
  border: none;
  background: transparent;
  white-space: nowrap;
  font-size: .72rem;
  font-weight: 600;
  color: #78716c;
  padding: .4rem .55rem;
  border-radius: .4rem;
  cursor: pointer;
  scroll-snap-align: center;
  flex-shrink: 0;
}
.hm-sw-step-btn.is-active {
  background: #1c1917;
  color: #fff;
}
.hm-sw-step-btn.is-done {
  color: #b45309;
  background: #fff7ed;
}
.hm-sw-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.1rem 1.25rem;
}
.hm-sw-pane { display: none; }
.hm-sw-pane.is-active { display: block; animation: hmSwFade .2s ease; }
.hm-sw-msort {
  margin: 0;
  max-width: 100%;
}
.hm-sw-msort .admin-accord-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .65rem .75rem;
  border: 1px solid #e7e5e4;
  border-radius: 10px;
  background: #fafaf9;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.hm-sw-msort .admin-accord-panel {
  padding: .75rem 0 1rem;
}
.hm-sw-msort .table {
  font-size: .85rem;
}
.hm-sw-msort .msort-toast {
  z-index: 12000;
}
@keyframes hmSwFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.hm-sw-pane h3 {
  font-size: .95rem;
  font-weight: 700;
  margin: 0 0 .35rem;
}
.hm-sw-pane .hm-sw-hint {
  font-size: .82rem;
  color: #78716c;
  margin: 0 0 1rem;
  line-height: 1.45;
}
.hm-sw-field { margin-bottom: .75rem; }
.hm-sw-field label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: .25rem;
}
.hm-sw-field input[type="text"],
.hm-sw-field input[type="email"],
.hm-sw-field input[type="url"],
.hm-sw-field input[type="tel"],
.hm-sw-field textarea {
  width: 100%;
  border: 1px solid #e7e5e4;
  border-radius: .45rem;
  padding: .45rem .6rem;
  font-size: .9rem;
  background: #fff;
}
.hm-sw-field input:disabled,
.hm-sw-field textarea:disabled {
  background: #f5f5f4;
  color: #57534e;
}
.hm-sw-hr {
  border: none;
  border-top: 1px solid #e7e5e4;
  margin: .75rem 0;
}
.hm-sw-colors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
}
@media (max-width: 420px) {
  .hm-sw-colors { grid-template-columns: 1fr; }
}
.hm-sw-color-row {
  display: flex;
  gap: .4rem;
  align-items: center;
}
.hm-sw-color-row input[type="color"] {
  width: 2.4rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid #e7e5e4;
  border-radius: .4rem;
  background: #fff;
}
.hm-sw-color-row input[type="text"] {
  flex: 1;
  min-width: 0;
  border: 1px solid #e7e5e4;
  border-radius: .4rem;
  padding: .4rem .5rem;
  font-size: .85rem;
}
.hm-sw-logo-box {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding: .75rem;
  background: #f5f2ec;
  border-radius: .55rem;
}
.hm-sw-color-tools {
  margin: 0 0 .85rem;
  padding: .75rem;
  border: 1px solid #e7e5e4;
  border-radius: .7rem;
  background: #fff;
}
.hm-sw-color-tools .hm-sw-logo-box {
  margin-bottom: .75rem;
  background: #f5f2ec;
}
.hm-sw-color-tools .hm-sw-palette-field {
  margin-bottom: 0;
}
.hm-sw-color-tools .hm-sw-palette-grid {
  max-height: 148px;
  margin-bottom: 0;
}
.hm-sw-logo-preview {
  width: 64px;
  height: 64px;
  border-radius: .5rem;
  background: #fff;
  border: 1px solid #e7e5e4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.hm-sw-logo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.hm-sw-logo-ph { color: #a8a29e; font-size: 1.25rem; }
.hm-sw-logo-actions {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}
.hm-sw-logo-actions .hm-sw-btn { font-size: .78rem; padding: .35rem .55rem; }
.hm-sw-logo-finishes { margin: .15rem 0 .75rem; }
.hm-sw-logo-finishes [data-sw-logo-finish-list] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
}
.hm-sw-finish {
  display: flex;
  flex-direction: column;
  gap: .28rem;
  padding: .4rem;
  border: 1px solid #e7e5e4;
  border-radius: .55rem;
  background: #fff;
  cursor: pointer;
  text-align: left;
}
.hm-sw-finish.is-selected {
  border-color: #b45309;
  box-shadow: 0 0 0 2px rgba(180, 83, 9, .25);
}
.hm-sw-finish-bar {
  display: block;
  height: 28px;
  border-radius: .35rem;
  border: 1px solid rgba(0, 0, 0, .06);
}
.hm-sw-finish strong { font-size: .75rem; color: #292524; line-height: 1.2; }
.hm-sw-finish small { font-size: .68rem; color: #78716c; line-height: 1.25; }
.hm-sw-sublabel {
  display: block;
  margin: .85rem 0 .2rem;
  font-size: .78rem;
  font-weight: 700;
  color: #44403c;
}
.hm-sw-logo-alts { margin: .35rem 0 .15rem; }
.hm-sw-logo-alts [data-sw-logo-alt-list] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .45rem;
}
.hm-sw-muted { color: #a8a29e; font-weight: 500; }
.hm-sw-palette-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  max-height: 200px;
  overflow-y: auto;
  padding: .2rem;
  margin-bottom: .75rem;
  scrollbar-width: thin;
  scrollbar-color: #78716c #e7e5e4;
}
.hm-sw-palette-swatch {
  width: 40px;
  height: 34px;
  border-radius: .45rem;
  border: 2px solid #e7e5e4;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.hm-sw-palette-swatch.is-selected,
.hm-sw-palette-swatch:hover {
  border-color: #b45309;
  box-shadow: 0 0 0 2px rgba(180, 83, 9, .25);
}
.hm-sw-palette-moods {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .35rem 0 .55rem;
}
.hm-sw-mood-chip {
  border: 1px solid #e7e5e4;
  background: #fff;
  color: #57534e;
  border-radius: 999px;
  padding: .22rem .7rem;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.35;
}
.hm-sw-mood-chip:hover {
  border-color: #d6d3d1;
  background: #fafaf9;
}
.hm-sw-mood-chip.is-active {
  border-color: #b45309;
  background: #fff7ed;
  color: #9a3412;
  box-shadow: 0 0 0 1px rgba(180, 83, 9, .2);
}
.hm-sw-custom { margin-top: .35rem; }
.hm-sw-custom-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .45rem;
}
.hm-sw-custom-card,
.hm-sw-custom-add {
  width: 92px;
  min-height: 52px;
  border-radius: .45rem;
  border: 2px solid #e7e5e4;
  background: #fff;
  cursor: pointer;
  padding: .25rem;
  text-align: left;
}
.hm-sw-custom-add {
  border-style: dashed;
  color: #9a3412;
  font-weight: 700;
  font-size: .72rem;
}
.hm-sw-custom-card.is-selected { border-color: #b45309; box-shadow: 0 0 0 2px rgba(180, 83, 9, .25); }
.hm-sw-custom-card .bar { display: flex; height: 16px; border-radius: .25rem; overflow: hidden; }
.hm-sw-custom-card .bar i { flex: 1; }
.hm-sw-custom-card .meta {
  display: flex; align-items: center; justify-content: space-between; gap: .2rem; margin-top: .2rem;
}
.hm-sw-custom-card .nm { font-size: .62rem; font-weight: 700; color: #44403c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-sw-custom-card .ops { display: flex; gap: .15rem; }
.hm-sw-custom-card .ops button {
  border: 0; background: transparent; color: #78716c; cursor: pointer; font-size: .68rem; padding: 0 .1rem;
}
.hm-sw-custom-editor {
  margin-top: .45rem;
  padding: .65rem;
  border: 1px solid #e7e5e4;
  border-radius: .5rem;
  background: #faf7f2;
}
.hm-sw-custom-editor .hm-sw-input {
  width: 100%;
  border: 1px solid #e7e5e4;
  border-radius: .4rem;
  padding: .4rem .55rem;
  font: inherit;
  background: #fff;
}
.hm-sw-custom-slots { display: flex; gap: .4rem; margin: .45rem 0; }
.hm-sw-custom-slot { flex: 1; min-width: 0; text-align: center; }
.hm-sw-custom-slot button {
  width: 100%; height: 42px; border-radius: .4rem; border: 2px solid #e7e5e4; cursor: pointer; padding: 0;
}
.hm-sw-custom-slot.is-active button { border-color: #b45309; }
.hm-sw-custom-slot span { display: block; margin-top: .2rem; font-size: .62rem; font-weight: 700; color: #57534e; }
.hm-sw-cpick { margin-bottom: .45rem; }
.hm-sw-cpick-sl {
  height: 120px; border-radius: .4rem; position: relative; cursor: crosshair; touch-action: none;
  border: 1px solid #e7e5e4;
}
.hm-sw-cpick-sl i {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px #444; transform: translate(-50%, -50%);
}
.hm-sw-cpick [data-sw-cpick-hue] {
  width: 100%; margin: .4rem 0; height: 12px; border-radius: 99px; appearance: none; -webkit-appearance: none;
  background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.hm-sw-cpick-hex { display: flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700; color: #57534e; }
.hm-sw-cpick-hex input { flex: 1; border: 1px solid #e7e5e4; border-radius: .35rem; padding: .3rem .45rem; font-family: ui-monospace, monospace; }
.hm-sw-custom-styles { display: flex; flex-wrap: wrap; gap: .35rem; margin: .35rem 0; }
.hm-sw-custom-styles button {
  border: 1px solid #e7e5e4; background: #fff; border-radius: 999px;
  padding: .22rem .7rem; font-size: .72rem; font-weight: 700; color: #57534e; cursor: pointer;
}
.hm-sw-custom-styles button.is-active { border-color: #b45309; background: #fff7ed; color: #9a3412; }
.hm-sw-cp-preview {
  display: grid; gap: .25rem; border-radius: .45rem; overflow: hidden; border: 1px solid #e7e5e4; margin-bottom: .45rem;
}
.hm-sw-cp-preview .pv-head { height: 22px; }
.hm-sw-cp-preview .pv-body { padding: .4rem; }
.hm-sw-cp-preview .pv-card { border-radius: .35rem; padding: .35rem .45rem; display: flex; justify-content: space-between; align-items: center; }
.hm-sw-cp-preview .pv-price { font-weight: 800; font-size: .75rem; }
.hm-sw-custom-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.hm-sw-gen-modes { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .55rem; }
.hm-sw-gen-modes button {
  border: 1px solid #e7e5e4; background: #fff; border-radius: 999px;
  padding: .28rem .7rem; font-size: .72rem; font-weight: 700; color: #57534e; cursor: pointer;
}
.hm-sw-gen-modes button.is-active { border-color: #b45309; background: #fff7ed; color: #9a3412; }
.hm-sw-seed-row { display: flex; gap: .4rem; align-items: center; margin: .25rem 0 .45rem; }
.hm-sw-seed-row input[type="color"] { width: 42px; height: 34px; padding: 0; border: 1px solid #e7e5e4; background: #fff; border-radius: .35rem; }
.hm-sw-seed-row .hm-sw-input { flex: 1; }
.hm-sw-slot-top { display: flex; justify-content: flex-end; }
.hm-sw-lock {
  border: 0; background: transparent; cursor: pointer; font-size: .75rem; line-height: 1; color: #a8a29e; padding: 0 0 .15rem;
}
.hm-sw-lock.is-on { color: #9a3412; }
.hm-sw-contrast-warn { display: block; margin-top: .15rem; font-size: .58rem; font-weight: 700; color: #b45309; line-height: 1.2; }
.hm-sw-zone-fx {
  margin-bottom: .85rem;
  padding: .65rem .7rem .35rem;
  background: #faf7f2;
  border: 1px solid #e7e5e4;
  border-radius: .5rem;
}
.hm-sw-zone-fx-title {
  font-size: .78rem;
  font-weight: 700;
  color: #57534e;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .35rem;
}
.hm-sw-zone-fx .hm-sw-slider-row { margin-bottom: .55rem; }
.hm-sw-themes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: .45rem;
  max-height: min(62vh, 560px);
  overflow-y: auto;
  padding-right: .2rem;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: #78716c #e7e5e4;
}
.hm-sw-themes::-webkit-scrollbar {
  width: 12px;
}
.hm-sw-themes::-webkit-scrollbar-track {
  background: #e7e5e4;
  border-radius: 8px;
}
.hm-sw-themes::-webkit-scrollbar-thumb {
  background: #78716c;
  border-radius: 8px;
  border: 2px solid #e7e5e4;
}
.hm-sw-themes::-webkit-scrollbar-thumb:hover {
  background: #57534e;
}
.hm-sw-theme-card {
  appearance: none;
  border: 2px solid #e7e5e4;
  border-radius: .55rem;
  background: #fff;
  padding: .55rem .35rem;
  cursor: pointer;
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  color: #44403c;
  line-height: 1.25;
}
.hm-sw-theme-card.is-selected {
  border-color: #b45309;
  background: #fff7ed;
  color: #9a3412;
}
.hm-sw-slider-row { margin-bottom: .9rem; }
.hm-sw-slider-row label {
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: .3rem;
}
.hm-sw-slider-row input[type="range"] { width: 100%; }
.hm-sw-warn {
  font-size: .78rem;
  color: #b45309;
  background: #fff7ed;
  border-left: 3px solid #b45309;
  padding: .45rem .65rem;
  margin: .5rem 0 0;
  display: none;
}
.hm-sw-warn.is-visible { display: block; }
.hm-sw-foot {
  display: flex;
  gap: .5rem;
  justify-content: space-between;
  padding: .85rem 1.1rem;
  border-top: 1px solid #e7e5e4;
  background: #fff;
}
.hm-sw-foot-right { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.hm-sw-foot-note {
  flex: 1;
  min-width: 8rem;
  margin: 0;
  align-self: center;
  font-size: .78rem;
  line-height: 1.3;
  color: #15803d;
}
.hm-sw-foot-note.is-err { color: #b91c1c; }
.hm-sw-btn {
  appearance: none;
  border: 1px solid #e7e5e4;
  background: #fff;
  color: #1c1917;
  font-weight: 600;
  font-size: .88rem;
  padding: .55rem .95rem;
  border-radius: .45rem;
  cursor: pointer;
}
.hm-sw-btn-primary {
  background: #1c1917;
  color: #fff;
  border-color: #1c1917;
}
.hm-sw-btn-accent {
  background: #b45309;
  color: #fff;
  border-color: #b45309;
}
.hm-sw-btn:disabled { opacity: .45; cursor: not-allowed; }
.hm-sw-preview-col {
  display: flex;
  flex-direction: column;
  background: #1c1917;
  min-height: 0;
}
.hm-sw-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .85rem;
  color: #a8a29e;
  font-size: .75rem;
  font-weight: 600;
}
.hm-sw-preview-frame-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .85rem;
  padding: .5rem .75rem 1.1rem;
  min-height: 0;
}
.hm-sw-preview-frame-wrap.is-dual {
  align-items: flex-end;
  justify-content: center;
  overflow-x: auto;
}
.hm-sw-device {
  position: relative;
  width: min(340px, 92%);
  height: 100%;
  max-height: 100%;
  min-height: 0;
}
.hm-sw-device-cap {
  display: none;
  text-align: center;
  color: #a8a29e;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.hm-sw-preview-frame-wrap.is-dual .hm-sw-device-cap { display: block; }
.hm-sw-preview-frame-wrap.is-dual .hm-sw-device {
  width: min(250px, 44%);
  height: 100%;
  max-height: 100%;
  min-height: 0;
  flex: 0 0 auto;
}
.hm-sw-preview-frame-wrap.is-dual .hm-sw-device-focus {
  display: block;
}
.hm-sw-device-focus[hidden] { display: none !important; }
.hm-sw-preview-phone-focus {
  pointer-events: none;
  user-select: none;
}
.hm-sw-preview-phone-focus iframe {
  pointer-events: none;
}
.hm-sw-focus-empty {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 1.2rem;
  text-align: center;
  background: #1c1917;
  color: #e7e5e4;
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.35;
  pointer-events: none;
}
.hm-sw-focus-empty[hidden] { display: none !important; }
.hm-sw-focus-empty .hm-sw-muted { color: #a8a29e; font-weight: 500; font-size: .7rem; }
.hm-sw-device-btn {
  position: absolute;
  background: #2a2a2a;
  border-radius: 2px;
  z-index: 2;
}
.hm-sw-device-btn-silent {
  left: -3px; top: 96px; width: 3px; height: 22px; border-radius: 2px 0 0 2px;
}
.hm-sw-device-btn-vol-up {
  left: -3px; top: 138px; width: 3px; height: 42px; border-radius: 2px 0 0 2px;
}
.hm-sw-device-btn-vol-down {
  left: -3px; top: 188px; width: 3px; height: 42px; border-radius: 2px 0 0 2px;
}
.hm-sw-device-btn-power {
  right: -3px; top: 160px; width: 3px; height: 64px; border-radius: 0 2px 2px 0;
}
.hm-sw-preview-phone {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 2.2rem;
  overflow: hidden;
  border: 10px solid #111;
  box-shadow:
    0 0 0 1px #3f3f46,
    0 18px 50px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.06);
  background: #000;
}
.hm-sw-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 22px;
  background: #111;
  border-radius: 999px;
  z-index: 5;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px #27272a;
}
.hm-sw-notch::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1e293b;
  box-shadow: inset 0 0 0 1px #334155;
}
.hm-sw-home-ind {
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
  width: 108px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  z-index: 5;
  pointer-events: none;
}
.hm-sw-zone-hint {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 18px;
  z-index: 6;
  pointer-events: none;
  text-align: center;
  padding: .45rem .65rem;
  border-radius: .65rem;
  background: rgba(28, 25, 23, .88);
  color: #fff;
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .01em;
  line-height: 1.25;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hm-sw-zone-hint[hidden] { display: none !important; }
.hm-sw-zone-hint strong { color: #fbbf24; font-weight: 700; }
.hm-sw-preview-phone iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  display: block;
}
.hm-sw-media-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .45rem;
}
.hm-sw-media-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .7rem .4rem;
  border: 2px solid #e7e5e4;
  border-radius: .65rem;
  background: #fff;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 700;
  color: #57534e;
  text-align: center;
}
.hm-sw-media-card input { position: absolute; opacity: 0; pointer-events: none; }
.hm-sw-bar-styles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .45rem;
}
.hm-sw-field label.hm-sw-bar-card { position: relative; display: flex; margin: 0; padding: .55rem .45rem .6rem; font-size: .78rem; font-weight: 700; }
.hm-sw-bar-card small { font-size: .66rem; font-weight: 500; color: #a8a29e; line-height: 1.25; }
.hm-sw-bar-card.is-selected small { color: #c2410c; }
.hm-sw-bar-demo {
  position: relative; display: block; width: 100%; height: 42px; border-radius: .45rem; overflow: hidden;
  background: repeating-linear-gradient(180deg, #f5f5f4 0 7px, #e7e5e4 7px 8px);
}
.hm-sw-bar-demo i, .hm-sw-bar-demo b { position: absolute; display: block; }
.hm-sw-bar-demo i { left: 0; right: 0; height: 13px; background: #44403c; }
.hm-sw-bar-demo--orig i { top: 6px; left: 8px; right: 8px; height: 16px; border-radius: 6px; background: linear-gradient(90deg, #fff7ed 0 25%, #1d8fd6 25% 50%, #111 50% 75%, #fff 75%); }
.hm-sw-bar-demo--theme i { top: 6px; left: 8px; right: 8px; height: 16px; border-radius: 6px; background: linear-gradient(90deg, #78716c, #44403c); }
.hm-sw-bar-demo--top i { top: 0; }
.hm-sw-bar-demo--bottom i { bottom: 0; }
.hm-sw-bar-demo--top b { top: 4px; left: 6px; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.hm-sw-bar-demo--top.hm-sw-bar-demo--center b { left: calc(50% - 9px); width: 18px; border-radius: 3px; }
.hm-sw-bar-demo--top.hm-sw-bar-demo--float i { top: 3px; left: 5px; right: 5px; height: 11px; border-radius: 99px; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.hm-sw-bar-demo--top.hm-sw-bar-demo--float b { top: 6px; left: 10px; }
.hm-sw-bar-demo--top.hm-sw-bar-demo--glass i { height: 15px; background: rgba(68,64,60,.55); border-radius: 0 0 7px 7px; }
.hm-sw-bar-demo--bottom b { bottom: 5px; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #b45309; box-sizing: border-box; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--classic i { border-radius: 7px 7px 0 0; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--flat b { bottom: 2px; width: 10px; height: 10px; left: calc(50% - 5px); border: 0; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--float i { left: 6px; right: 6px; bottom: 4px; height: 12px; border-radius: 99px; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--float b { bottom: 8px; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--minimal i { height: 9px; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--minimal b { bottom: 2px; width: 6px; height: 6px; left: calc(50% - 3px); border: 0; background: #d6d3d1; }
.hm-sw-bar-demo--top.hm-sw-bar-demo--modern i { top: 6px; left: 6px; right: 6px; height: 16px; border-radius: 8px; background: linear-gradient(90deg, #1c1917, #78716c); }
.hm-sw-bar-demo--top.hm-sw-bar-demo--modern b { top: 11px; left: calc(50% - 8px); width: 16px; height: 4px; border-radius: 2px; }
.hm-sw-bar-demo--top.hm-sw-bar-demo--serif i { top: 6px; left: 6px; right: 6px; height: 16px; border-radius: 8px; background: #fff7ed; }
.hm-sw-bar-demo--top.hm-sw-bar-demo--serif b { top: 11px; left: 10px; width: 6px; height: 6px; border-radius: 2px; background: #392317; }
.hm-sw-bar-demo--top.hm-sw-bar-demo--vivid i { top: 6px; left: 6px; right: 6px; height: 16px; border-radius: 8px; background: linear-gradient(135deg, #064d3c, #12aa55); }
.hm-sw-bar-demo--top.hm-sw-bar-demo--vivid b { top: 11px; left: 12px; width: 14px; height: 4px; border-radius: 2px; }
.hm-sw-bar-demo--top.hm-sw-bar-demo--hero i { top: 4px; left: 6px; right: 6px; height: 20px; border-radius: 8px; background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.45)), linear-gradient(135deg, #8a4b2a, #2a1810); }
.hm-sw-bar-demo--top.hm-sw-bar-demo--hero b { top: 12px; left: calc(50% - 8px); width: 16px; height: 3px; border-radius: 2px; background: #fff; }
.hm-sw-bar-demo--top.hm-sw-bar-demo--mark i { top: 6px; left: 6px; right: 6px; height: 16px; border-radius: 10px; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.12); }
.hm-sw-bar-demo--top.hm-sw-bar-demo--mark b { top: 11px; left: calc(50% - 10px); width: 6px; height: 6px; border-radius: 2px; background: #ff6a21; }
.hm-sw-bar-demo--top.hm-sw-bar-demo--compact i { top: 8px; left: 8px; right: 8px; height: 14px; border-radius: 7px; background: #111; }
.hm-sw-bar-demo--top.hm-sw-bar-demo--compact b { top: 11px; left: 14px; width: 8px; height: 8px; border-radius: 50%; background: transparent; border: 1px solid #ff6a21; box-sizing: border-box; }
.hm-sw-bar-demo--top.hm-sw-bar-demo--notch i { top: 4px; left: 6px; right: 6px; height: 12px; border-radius: 8px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.hm-sw-bar-demo--top.hm-sw-bar-demo--notch b { top: 10px; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: #c2185b; border: 2px solid #e9e6e2; }
.hm-sw-bar-demo--top.hm-sw-bar-demo--grad i { top: 4px; left: 6px; right: 6px; height: 14px; border-radius: 8px; background: linear-gradient(160deg, #7dcea0, #0b5d46); box-shadow: 0 4px 0 #063b2d; }
.hm-sw-bar-demo--top.hm-sw-bar-demo--grad b { top: 5px; left: 14px; right: 14px; width: auto; height: 3px; border-radius: 2px; background: rgba(255,255,255,.7); }
.hm-sw-bar-demo--top.hm-sw-bar-demo--wave i { top: 0; height: 16px; border-radius: 0; background: linear-gradient(160deg, #1d8fd6, #0c4f86); clip-path: ellipse(80% 100% at 50% 0); }
.hm-sw-bar-demo--top.hm-sw-bar-demo--wave b { display: none; }
.hm-sw-bar-demo--top.hm-sw-bar-demo--tile i { top: 4px; left: 6px; right: 6px; height: 12px; border-radius: 8px; background: #0f6e78; box-shadow: inset 0 -2px 0 #d9a441; }
.hm-sw-bar-demo--top.hm-sw-bar-demo--tile b { top: 12px; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: #f8f1e4; border: 2px solid #d9a441; }
.hm-sw-bar-demo--top.hm-sw-bar-demo--neon i { top: 4px; left: 6px; right: 6px; height: 20px; border-radius: 8px; background: #0c0b14; box-shadow: 0 0 0 2px #ff2e88; }
.hm-sw-bar-demo--top.hm-sw-bar-demo--neon b { top: 10px; left: 12px; width: 14px; height: 3px; border-radius: 2px; background: #f2f0ff; }
.hm-sw-bar-demo--top.hm-sw-bar-demo--receipt i { top: 2px; left: 8px; right: 8px; height: 18px; border-radius: 6px 6px 0 0; background: #fffaf0; }
.hm-sw-bar-demo--top.hm-sw-bar-demo--receipt b { top: 6px; left: 14px; width: 8px; height: 8px; border-radius: 50%; background: transparent; border: 1px dashed #b4471f; }
.hm-sw-bar-demo--top.hm-sw-bar-demo--bento i { top: 5px; left: 6px; right: 22px; height: 16px; border-radius: 6px; background: #2f4a3a; box-shadow: 0 3px 0 #1c2e24; }
.hm-sw-bar-demo--top.hm-sw-bar-demo--bento b { top: 5px; left: auto; right: 6px; width: 12px; height: 16px; border-radius: 6px; background: #fff; box-shadow: 0 3px 0 #d9d3cc; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--premium i { background: linear-gradient(180deg, #202529, #111416); border-radius: 8px 8px 0 0; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--premium b { bottom: 10px; border-color: #ff6a21; background: #ff6a21; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--chips i { background: #15120f; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--chips b { bottom: 4px; left: 8px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #ff6a21; background: #2a241f; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--ios i { background: #fff; box-shadow: 0 -1px 0 #e7e5e4; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--ios b { bottom: 10px; background: #ff3268; border-color: #fff; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--glassbar i { background: rgba(89, 53, 31, .72); border-radius: 8px 8px 0 0; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--glassbar b { bottom: 10px; background: #ff6a21; border-color: rgba(255,255,255,.45); }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--energy i { background: #fff; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--energy b { bottom: 10px; background: #079447; border-color: #fff; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--warm i { background: linear-gradient(180deg, #fff6e8, #ffefd6); }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--warm b { bottom: 8px; background: #fff3df; border: 2px solid #4b2a15; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--lined i { background: #fff; box-shadow: inset 0 3px 0 #ff6a21; border-radius: 1px; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--lined b { display: none; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--segment i { background: linear-gradient(90deg, #fff7ed 0 32%, #a20d24 32% 66%, #fff7ed 66%); }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--segment b { display: none; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--angle i { background: linear-gradient(105deg, #ff6a21 0 28%, #fff 28%); }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--angle b { display: none; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--bare i { background: #fff; box-shadow: inset 0 -2px 0 #c18b2d, inset 0 1px 0 #ddd; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--bare b { display: none; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--stack i { height: 22px; background: linear-gradient(#fff9f1, #fff9f1) 0 0 / 100% 10px, linear-gradient(#ead8c1, #ead8c1) 0 10px / 100% 1px, linear-gradient(#fff9f1, #fff9f1) 0 11px / 100% 11px; background-repeat: no-repeat; border: 1px solid #e6cba8; box-sizing: border-box; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--stack b { display: none; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--tab i { background: #faf6ef; box-shadow: inset 0 3px 0 #92182d; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--tab b { display: none; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--split i { background: #fff; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--split b { bottom: 4px; left: 8px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #ff6a21; background: #fff; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--action i { background: #fff; border-radius: 2px 2px 0 0; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--action b { bottom: 12px; width: 16px; height: 16px; left: calc(50% - 8px); background: #ff6a21; border-color: #eee; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--block i { background: linear-gradient(90deg, #fff 0 30%, #a30f26 30% 62%, #fff 62%); }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--block b { display: none; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--slash i { background: linear-gradient(105deg, #ff6a21 0 22%, #fff 22%); }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--slash b { display: none; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--expand i { left: 8px; right: 8px; bottom: 6px; height: 16px; border-radius: 10px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--expand b { bottom: 9px; left: 16px; width: 22px; height: 8px; border-radius: 8px; background: #ffe4ec; border: 0; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--curve i { background: radial-gradient(circle at 50% 0, transparent 8px, #fff 9px); border-radius: 10px 10px 0 0; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--curve b { bottom: 12px; background: #14b8a6; border-color: #fff; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--neu i { left: 6px; right: 6px; bottom: 4px; height: 18px; border-radius: 8px; background: #e4e8ee; box-shadow: 2px 2px 4px #c2c8d1, -2px -2px 4px #fff; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--neu b { display: none; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--spot i { background: #111014; border-radius: 8px 8px 0 0; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--spot b { bottom: 8px; left: calc(50% - 8px); width: 16px; height: 3px; border-radius: 2px; background: #ffc14d; border: 0; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--apps i { left: 6px; right: 6px; bottom: 4px; height: 16px; border-radius: 10px; background: rgba(255,255,255,.35); }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--apps b { bottom: 7px; left: 12px; width: 10px; height: 10px; border-radius: 4px; background: #f05a1a; border: 0; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--magic i { background: #7a1f2b; border-radius: 8px; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--magic b { bottom: 14px; background: #f2b33d; border: 2px solid #ece8e3; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--pcurve i { background: #fffaf4; clip-path: polygon(0 40%, 18% 20%, 40% 45%, 50% 0, 60% 45%, 82% 20%, 100% 40%, 100% 100%, 0 100%); }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--pcurve b { bottom: 16px; background: #ff641e; border-color: #fffaf4; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--organic i { background: #faf6ed; clip-path: polygon(0 20%, 20% 8%, 45% 18%, 70% 4%, 100% 16%, 100% 100%, 0 100%); }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--organic b { display: none; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--glasscap i { left: 6px; right: 6px; bottom: 4px; height: 16px; border-radius: 8px; background: rgba(24,18,13,.55); border: 1px solid rgba(255,255,255,.45); }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--glasscap b { bottom: 10px; width: 12px; height: 18px; left: calc(50% - 6px); border-radius: 8px; background: rgba(255,255,255,.25); border: 1px solid #ff641e; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--facet i { background: linear-gradient(105deg, #ff641e 0 22%, #242a2e 22% 48%, #161a1d 48%); }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--facet b { display: none; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--more i { background: #fff; border-radius: 6px; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--more b { bottom: 6px; left: auto; right: 6px; width: 14px; height: 12px; border-radius: 4px 4px 7px 4px; background: #ff641e; border: 0; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--hex i { background: linear-gradient(145deg, #202529, #0f1214); border-radius: 0 0 8px 8px; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--hex b { bottom: 12px; width: 14px; height: 16px; left: calc(50% - 7px); border-radius: 2px; background: #ff641e; border: 0; clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%); }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--play i { background: #fffaf5; border-radius: 10px 4px 12px 3px; }
.hm-sw-bar-demo--bottom.hm-sw-bar-demo--play b { bottom: 14px; background: #11824d; border-color: #fffaf5; border-radius: 40% 60% 50% 50%; }
.hm-sw-media-card.is-selected {
  border-color: #b45309;
  background: #fff7ed;
  color: #9a3412;
}
.hm-sw-file-row {
  display: flex;
  gap: .4rem;
  align-items: stretch;
}
.hm-sw-file-path {
  flex: 1;
  min-width: 0;
  border: 1px solid #e7e5e4;
  border-radius: .45rem;
  padding: .45rem .6rem;
  font-size: .82rem;
  background: #f5f5f4;
  color: #44403c;
}
.hm-sw-file-row .hm-sw-btn {
  flex-shrink: 0;
  white-space: nowrap;
}
.hm-sw-upload-status {
  margin: .35rem 0 0;
  min-height: 1.1em;
}
.hm-sw-upload-status.is-ok { color: #15803d; }
.hm-sw-upload-status.is-err { color: #b91c1c; }
.hm-sw-upload-status.is-busy { color: #b45309; }
.hm-sw-summary {
  font-size: .88rem;
  line-height: 1.55;
  background: #f5f2ec;
  border-radius: .55rem;
  padding: .85rem 1rem;
}
.hm-sw-summary dt { font-weight: 700; color: #57534e; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; margin-top: .55rem; }
.hm-sw-summary dt:first-child { margin-top: 0; }
.hm-sw-summary dd { margin: .1rem 0 0; }
.hm-sw-select {
  width: 100%;
  border: 1px solid #e7e5e4;
  border-radius: .45rem;
  padding: .45rem .6rem;
  font-size: .9rem;
  background: #fff;
}
.hm-sw-font-field .hm-sw-select--fonts {
  min-height: 18rem;
  height: 18rem;
  padding: .35rem;
  line-height: 1.45;
  font-size: .92rem;
}
.hm-sw-select--fonts optgroup {
  font-weight: 700;
  color: #78716c;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hm-sw-select--fonts option {
  font-weight: 500;
  padding: .25rem .4rem;
  color: #1c1917;
  text-transform: none;
  letter-spacing: 0;
  font-size: .9rem;
}
.hm-sw-font-combo {
  position: relative;
  width: 100%;
}
.hm-sw-font-combo-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  border: 1px solid #e7e5e4;
  border-radius: .45rem;
  padding: .55rem .7rem;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-size: 1rem;
  color: #1c1917;
}
.hm-sw-font-combo-btn:hover,
.hm-sw-font-combo.is-open .hm-sw-font-combo-btn {
  border-color: #a8a29e;
}
.hm-sw-font-combo-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.05rem;
  line-height: 1.3;
}
.hm-sw-font-combo-caret {
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #78716c;
  transition: transform .15s ease;
}
.hm-sw-font-combo.is-open .hm-sw-font-combo-caret {
  transform: rotate(180deg);
}
.hm-sw-font-combo-panel {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  display: flex;
  flex-direction: column;
  max-height: 18rem;
  border: 1px solid #e7e5e4;
  border-radius: .5rem;
  background: #fff;
  box-shadow: 0 10px 28px rgba(28, 25, 23, .12);
  overflow: hidden;
}
.hm-sw-font-combo-panel[hidden] {
  display: none !important;
}
.hm-sw-font-combo-search {
  border: 0;
  border-bottom: 1px solid #f5f5f4;
  padding: .55rem .7rem;
  font-size: .88rem;
  outline: none;
  background: #fafaf9;
}
.hm-sw-font-combo-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .25rem;
  flex: 1;
}
.hm-sw-font-combo-group {
  padding: .45rem .55rem .2rem;
  font-size: .68rem;
  font-weight: 700;
  color: #78716c;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
.hm-sw-font-combo-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  border: 0;
  border-radius: .35rem;
  background: transparent;
  text-align: left;
  padding: .45rem .55rem;
  font-size: 1.05rem;
  line-height: 1.35;
  color: #1c1917;
  cursor: pointer;
}
.hm-sw-font-opt-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hm-sw-font-sample {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  opacity: .72;
  letter-spacing: .02em;
  font-weight: 600;
}
.hm-sw-font-combo-label .hm-sw-font-sample {
  margin-left: .35rem;
}
.hm-sw-font-combo-opt:hover,
.hm-sw-font-combo-opt:focus-visible {
  background: #f5f5f4;
  outline: none;
}
.hm-sw-font-combo-opt.is-selected {
  background: #ece7e0;
  font-weight: 600;
}
.hm-sw-font-combo-opt.is-hidden,
.hm-sw-font-combo-group.is-hidden {
  display: none !important;
}
.hm-sw-check {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .88rem;
  font-weight: 600;
  margin: .35rem 0;
  cursor: pointer;
}
.hm-sw-wh-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr 1fr;
  gap: .4rem;
  align-items: center;
  margin-bottom: .4rem;
}
.hm-sw-wh-row input[type="time"] {
  border: 1px solid #e7e5e4;
  border-radius: .4rem;
  padding: .3rem .4rem;
  font-size: .85rem;
}
.hm-sw-status { font-size: .8rem; color: #78716c; min-height: 1.2em; }
.hm-sw-status.is-ok { color: #15803d; }
.hm-sw-status.is-err { color: #b91c1c; }

/* Bölge inspector (tıklayarak renk / opaklık / blur) */
.hm-sw-zone-tabs {
  display: flex;
  gap: .35rem;
  margin: .5rem 0 .75rem;
}
.hm-sw-zone-tab {
  appearance: none;
  border: 1px solid #e7e5e4;
  background: #fff;
  font-size: .78rem;
  font-weight: 700;
  padding: .4rem .7rem;
  border-radius: .45rem;
  cursor: pointer;
  color: #57534e;
}
.hm-sw-zone-tab.is-active {
  background: #1c1917;
  border-color: #1c1917;
  color: #fff;
}
.hm-sw-zone-tab:focus { outline: none; }
.hm-sw-zone-tab:focus-visible {
  outline: 2px solid #b45309;
  outline-offset: 2px;
}
.hm-sw-overlay:has(.hm-sw-preview-frame-wrap.is-dual) .hm-sw-shell {
  width: min(1320px, 100%);
  grid-template-columns: minmax(260px, 400px) minmax(560px, 1fr);
}
.hm-sw-overlay.is-compact:has(.hm-sw-preview-frame-wrap.is-dual) .hm-sw-shell {
  width: 100% !important;
  max-width: 100vw !important;
  grid-template-columns: 1fr !important;
}
/* Basit iskelet: menü sırası (üst → kategori → içerik → alt) */
.hm-sw-skel {
  display: none;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 .75rem;
  padding: 6px;
  border: 1px dashed #d6d3d1;
  border-radius: .65rem;
  background: #fafaf9;
}
.hm-sw-skel.is-visible { display: flex; }
.hm-sw-skel-part {
  appearance: none;
  border: 1px solid #e7e5e4;
  background: #fff;
  color: #57534e;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .35rem .5rem;
  border-radius: .35rem;
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
}
.hm-sw-skel-mid { min-height: 2.4rem; padding-top: .7rem; }
.hm-sw-skel-part.is-active {
  background: #1c1917;
  border-color: #1c1917;
  color: #fff;
}
.hm-sw-skel-part:hover { border-color: #a8a29e; }
.hm-sw-inspector {
  border: 1px solid #e7e5e4;
  border-radius: .65rem;
  background: #fff;
  padding: .75rem .85rem;
  margin-bottom: .75rem;
  min-height: 4.5rem;
}
.hm-sw-inspector-empty {
  font-size: .84rem;
  color: #78716c;
  text-align: center;
  line-height: 1.45;
  padding: .5rem 0;
}
.hm-sw-inspector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .55rem;
}
.hm-sw-inspector-head strong { font-size: .92rem; }
.hm-sw-btn-xs {
  font-size: .72rem;
  padding: .25rem .5rem;
}
.hm-sw-zone-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  margin-bottom: .85rem;
}
.hm-sw-cat-search {
  width: 100%;
  margin: .35rem 0 .55rem;
  padding: .55rem .75rem;
  border: 1px solid #e7e5e4;
  border-radius: 12px;
  background: #fff;
  font-size: .86rem;
}
.hm-sw-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: .45rem;
  margin: .35rem 0 .25rem;
  max-height: min(42vh, 320px);
  overflow: auto;
  padding: .15rem .1rem .35rem;
  border: 1px solid #f0eeec;
  border-radius: 14px;
  background: #fcfcfb;
}
.hm-sw-cat-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  min-height: 76px;
  padding: .5rem .35rem;
  border-radius: 14px;
  border: 1px solid #e7e5e4;
  background: #fafaf9;
  font-size: .72rem;
  font-weight: 650;
  color: #44403c;
  cursor: pointer;
  user-select: none;
  text-align: center;
  line-height: 1.15;
}
.hm-sw-cat-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.hm-sw-cat-emoji {
  font-size: 1.35rem;
  line-height: 1;
}
.hm-sw-cat-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.hm-sw-cat-chip.is-selected {
  background: #fff7ed;
  border-color: #f59e0b;
  color: #9a3412;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, .25);
}
.hm-sw-cat-chip.is-disabled {
  opacity: .42;
  cursor: not-allowed;
}
.hm-sw-cat-chip.is-filtered-out {
  display: none;
}
.hm-sw-chip {
  appearance: none;
  border: 1px solid #e7e5e4;
  background: #fafaf9;
  font-size: .72rem;
  font-weight: 650;
  padding: .28rem .55rem;
  border-radius: 999px;
  cursor: pointer;
  color: #44403c;
}
.hm-sw-chip.is-active {
  background: #f59e0b;
  border-color: #d97706;
  color: #1c1917;
}
.hm-sw-plate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: .65rem;
  margin-top: .5rem;
}
.hm-sw-plate-card {
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  padding: .5rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  background: #fff;
}
.hm-sw-plate-card input { margin: 0; }
.hm-sw-plate-card:has(input:checked) {
  border-color: #6d28d9;
  box-shadow: 0 0 0 2px rgba(109, 40, 217, .28);
}
.hm-sw-plate-title { font-weight: 700; font-size: .82rem; }
.hm-sw-plate-title small { font-weight: 600; color: #71717a; margin-left: .25rem; }
.hm-sw-plate-card img {
  width: 100%;
  height: 120px;
  object-fit: contain;
  background: #f4f4f5;
  border-radius: 8px;
}
.hm-sw-plate-card small { color: #71717a; font-size: .72rem; line-height: 1.3; }
.hm-sw-plate-tables {
  max-height: 190px;
  overflow: auto;
  border: 1px solid #e4e4e7;
  border-radius: 10px;
  padding: .35rem .6rem;
  margin-top: .4rem;
}

.hm-sw-download-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .75rem 0;
}
.hm-sw-download-row .hm-sw-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.hm-sw-affects {
  margin: 0 0 .65rem;
  padding: .45rem .55rem;
  border-radius: .45rem;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  font-size: .78rem;
  color: #9a3412;
  line-height: 1.35;
}
.hm-sw-affects-label {
  font-weight: 700;
  margin-right: .2rem;
}
.hm-sw-affects-mini {
  margin: .15rem 0 .35rem;
  font-size: .72rem;
  color: #78716c;
  line-height: 1.3;
}
.hm-sw-grad-dirs {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.hm-sw-advanced {
  border-top: 1px solid #e7e5e4;
  padding-top: .65rem;
  margin-top: .35rem;
}
.hm-sw-advanced > summary {
  cursor: pointer;
  font-size: .82rem;
  font-weight: 700;
  color: #57534e;
  margin-bottom: .55rem;
}

/* Slider fotoğraf yöneticisi */
.hm-sw-slides-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin: .35rem 0 .75rem;
}
.hm-sw-slide-card {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: .55rem;
  align-items: center;
  padding: .55rem .65rem;
  border: 1px solid #e7e5e4;
  border-radius: .65rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(28, 25, 23, .04);
}
.hm-sw-slide-num {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: #1c1917;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.hm-sw-slide-thumb {
  width: 88px;
  height: 56px;
  border-radius: .45rem;
  object-fit: cover;
  background: #e7e5e4;
  display: block;
}
.hm-sw-slide-meta {
  min-width: 0;
}
.hm-sw-slide-meta strong {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: #1c1917;
}
.hm-sw-slide-meta span {
  font-size: .72rem;
  color: #78716c;
}
.hm-sw-slide-actions {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.hm-sw-slide-actions button {
  appearance: none;
  border: 1px solid #e7e5e4;
  background: #fafaf9;
  width: 2rem;
  height: 1.85rem;
  border-radius: .4rem;
  cursor: pointer;
  color: #44403c;
  font-size: .78rem;
  line-height: 1;
  padding: 0;
}
.hm-sw-slide-actions button:hover:not(:disabled) {
  background: #f5f5f4;
  border-color: #d6d3d1;
}
.hm-sw-slide-actions button:disabled {
  opacity: .35;
  cursor: default;
}
.hm-sw-slide-actions button.is-danger {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
}
.hm-sw-slides-empty {
  padding: .85rem .9rem;
  border: 1px dashed #d6d3d1;
  border-radius: .65rem;
  background: #fafaf9;
  color: #78716c;
  font-size: .84rem;
  line-height: 1.45;
  margin-bottom: .75rem;
}
.hm-sw-slides-add {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.hm-sw-slides-add .hm-sw-btn-primary i {
  margin-right: .35rem;
}

.hm-sw-check.is-disabled {
  opacity: .45;
  cursor: not-allowed;
}
.hm-sw-icon-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .75rem;
  margin: .35rem 0 .55rem;
}
.hm-sw-actions-align {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .25rem 0 .55rem;
}
.hm-sw-actions-align .hm-sw-chip {
  cursor: pointer;
  border: 1px solid #d6d3d1;
  background: #fff;
  color: #44403c;
  font-size: .75rem;
  padding: .28rem .55rem;
  border-radius: .55rem;
  line-height: 1.2;
}
.hm-sw-actions-align .hm-sw-chip:hover {
  border-color: #f59e0b;
  color: #92400e;
  background: #fffbeb;
}
.hm-sw-actions-pad {
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 9 / 19.5;
  margin: .4rem 0 .75rem;
  border-radius: 1.1rem;
  border: 2px solid #d6d3d1;
  background:
    linear-gradient(180deg, rgba(28,25,23,.08), rgba(28,25,23,.22)),
    repeating-linear-gradient(0deg, transparent, transparent 11px, rgba(255,255,255,.12) 11px, rgba(255,255,255,.12) 12px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  touch-action: none;
  user-select: none;
  overflow: hidden;
  --hm-sw-pad-phone-w: 390;
  --hm-sw-grid-step: 10%;
}
.hm-sw-actions-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,.08) 0,
      rgba(255,255,255,.08) 1px,
      transparent 1px,
      transparent var(--hm-sw-grid-step)
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.08) 0,
      rgba(255,255,255,.08) 1px,
      transparent 1px,
      transparent var(--hm-sw-grid-step)
    );
  opacity: .85;
}
.hm-sw-actions-pad.is-dragging .hm-sw-actions-grid {
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(56,189,248,.45) 0,
      rgba(56,189,248,.45) 1px,
      transparent 1px,
      transparent var(--hm-sw-grid-step)
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(56,189,248,.45) 0,
      rgba(56,189,248,.45) 1px,
      transparent 1px,
      transparent var(--hm-sw-grid-step)
    );
  opacity: 1;
}
.hm-sw-actions-pad-hint {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 10px;
  font-size: .68rem;
  color: rgba(255,255,255,.85);
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  z-index: 1;
}
.hm-sw-actions-handles {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.hm-sw-actions-handle {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: grab;
  z-index: 2;
  touch-action: none;
}
.hm-sw-actions-handle:active { cursor: grabbing; }
.hm-sw-actions-handle.is-selected .hm-sw-actions-handle-dot {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14,165,233,.45), 0 2px 8px rgba(0,0,0,.28);
}
.hm-sw-actions-handle.is-selected {
  z-index: 5;
}
.hm-sw-actions-handle-dot {
  width: var(--hm-sw-handle-w, var(--hm-sw-action-pad-size, 14px));
  height: var(--hm-sw-handle-h, var(--hm-sw-action-pad-size, 14px));
  border-radius: var(--hm-sw-handle-r, 50%);
  background: rgba(255,255,255,.92);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
  font-size: var(--hm-sw-handle-fs, calc(var(--hm-sw-action-pad-size, 14px) * 0.42));
  line-height: 1.1;
  color: #1c1917;
  border: 1.5px solid rgba(245,158,11,.85);
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 4px;
  max-width: 96%;
}
.hm-sw-actions-handle-dot i {
  display: block;
  line-height: 1;
  width: 1em;
  height: 1em;
  text-align: center;
  font-style: normal;
  transform: none;
}
.hm-sw-actions-handle-logo {
  padding: 0 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.hm-sw-actions-handle-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 22%;
  display: block;
}
.hm-sw-actions-handle-dot .fa-whatsapp {
  color: #128C7E;
  /* FA brand glifi daire içinde optik olarak biraz düşük/kayık oturuyor */
  transform: translateY(-0.05em);
}
.hm-sw-actions-handle-dot .fa-phone { color: #1a1a1a; }
.hm-sw-actions-handle-dot .fa-map-marker-alt { color: #e11d48; }
.hm-sw-actions-handle-dot .fa-instagram { color: #e1306c; }
.hm-sw-actions-handle-dot .fa-facebook-f { color: #1877f2; }
.hm-sw-actions-handle-dot .fa-youtube { color: #ff0000; }
.hm-sw-actions-handle-dot .fa-tiktok { color: #111; }
.hm-sw-actions-handle-dot .fa-snapchat { color: #c9a800; }
.hm-sw-actions-handle-dot .fa-google { color: #4285f4; }

.hm-sw-section-title {
  margin: 1rem 0 .35rem;
  font-size: .78rem;
  font-weight: 700;
  color: #44403c;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hm-sw-step-colors {
  margin-top: .85rem;
  padding-top: .65rem;
  border-top: 1px dashed #e7e5e4;
}
.hm-sw-brand-handle .hm-sw-actions-handle-dot {
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  background: rgba(255,255,255,.88);
  border-color: rgba(14,165,233,.75);
}
.hm-sw-brand-handle[data-sw-layout-item="logo"] .hm-sw-actions-handle-dot {
  background: rgba(255,255,255,.95);
  border-width: 2px;
}
.hm-sw-brand-handle[data-sw-layout-item="cta"] .hm-sw-actions-handle-dot {
  background: color-mix(in srgb, var(--primary-color, #e44d26) 78%, #fff);
  color: #fff;
  border-color: transparent;
  text-transform: none;
  font-weight: 700;
}
.hm-sw-brand-handle[data-sw-layout-item="footer"] .hm-sw-actions-handle-dot {
  background: transparent;
  border-style: dashed;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.hm-sw-zone-tabs--advanced[hidden] { display: none !important; }

/* ── Semantik palet üreteci ── */
.hm-sem-field { margin-top: 1rem; }
.hm-sem-mode-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .4rem 0 .65rem;
  font-size: .82rem;
}
.hm-sem-mode { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.hm-sem-palette {
  border: 1px solid #e7e5e4;
  border-radius: .65rem;
  padding: .65rem;
  background: #fafaf9;
}
.hm-sem-palette-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  margin-bottom: .55rem;
}
.hm-sem-palette-title { font-weight: 700; font-size: .88rem; }
.hm-sem-live-preview {
  border-radius: .55rem;
  overflow: hidden;
  border: 1px solid #e7e5e4;
  margin-bottom: .65rem;
  font-size: .72rem;
}
.hm-sem-lp-top, .hm-sem-lp-bottom {
  padding: .35rem .55rem;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.hm-sem-lp-strip {
  display: flex;
  gap: .35rem;
  padding: .35rem .45rem;
}
.hm-sem-lp-chip {
  display: inline-block;
  padding: .15rem .45rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 600;
}
.hm-sem-lp-body {
  padding: .55rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.hm-sem-lp-card {
  border-radius: .4rem;
  padding: .45rem .55rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.hm-sem-lp-card em { font-style: normal; font-weight: 700; }
.hm-sem-lp-cta {
  border: 0;
  border-radius: .4rem;
  padding: .4rem .55rem;
  font-weight: 700;
  font-size: .72rem;
  align-self: flex-start;
  cursor: default;
}
.hm-sem-swatch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
}
@media (min-width: 520px) {
  .hm-sem-swatch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hm-sem-swatch {
  border: 1px solid #e7e5e4;
  border-radius: .45rem;
  padding: .35rem .4rem;
  background: #fff;
}
.hm-sem-swatch.is-locked { border-color: #b45309; background: #fffbeb; }
.hm-sem-swatch-label {
  display: block;
  font-size: .72rem;
  font-weight: 650;
  margin-bottom: .2rem;
}
.hm-sem-swatch-row {
  display: flex;
  align-items: center;
  gap: .25rem;
}
.hm-sem-swatch-row input[type="color"] {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #d6d3d1;
  border-radius: .3rem;
  background: transparent;
  cursor: pointer;
}
.hm-sem-swatch-hex {
  flex: 1;
  min-width: 0;
  font-size: .7rem;
  font-family: ui-monospace, monospace;
  border: 1px solid #e7e5e4;
  border-radius: .3rem;
  padding: .2rem .3rem;
}
.hm-sem-swatch-meta {
  font-size: .65rem;
  color: #a8a29e;
  margin-top: .15rem;
}
.hm-sem-swatch.is-locked .hm-sem-swatch-meta { color: #b45309; }

/* Açılış accordion + seçime bağlı paneller */
.hm-sw-acc {
  border: 1px solid #e7e5e4;
  border-radius: .55rem;
  margin: .55rem 0;
  background: #fff;
  overflow: hidden;
}
.hm-sw-acc > summary {
  cursor: pointer;
  list-style: none;
  padding: .7rem .85rem;
  font-weight: 700;
  font-size: .86rem;
  color: #1c1917;
  display: flex;
  align-items: center;
  gap: .45rem;
  user-select: none;
}
.hm-sw-acc > summary::-webkit-details-marker { display: none; }
.hm-sw-acc > summary::before {
  content: '';
  width: .45rem;
  height: .45rem;
  border-right: 2px solid #78716c;
  border-bottom: 2px solid #78716c;
  transform: rotate(-45deg);
  transition: transform .15s ease;
  flex-shrink: 0;
  margin-top: -.1rem;
}
.hm-sw-acc[open] > summary::before {
  transform: rotate(45deg);
  margin-top: .05rem;
}
.hm-sw-acc-body {
  padding: .15rem .85rem .85rem;
  border-top: 1px solid #f5f5f4;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.hm-sw-acc-body > .hm-sw-field:first-child,
.hm-sw-acc-body > label:first-child {
  margin-top: .35rem;
}
[data-sw-when][hidden],
[data-sw-when-any][hidden],
[data-sw-cover][hidden] {
  display: none !important;
}

/* Sıralama sihirbazı — tek sütun, geniş form */
.hm-msw-overlay .hm-msw-shell {
  grid-template-columns: 1fr;
  width: min(920px, 100%);
  max-height: min(92vh, 900px);
}
.hm-msw-overlay .hm-msw-form {
  max-height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hm-msw-overlay .hm-msw-body {
  flex: 1;
  overflow: auto;
  padding-bottom: 1rem;
}
.hm-msw-overlay .hm-msw-avail .admin-card {
  box-shadow: none;
  border: 1px solid #e7e5e4;
  margin-bottom: 0 !important;
}
/* Tab gizlemesi sihirbaz içini etkilemesin */
.hm-msw-overlay [data-btab] {
  display: block !important;
}
.hm-msw-overlay .hm-sw-msort {
  margin: 0;
}
.hm-msw-sections {
  display: flex;
  gap: .35rem;
  position: sticky;
  top: 0;
  z-index: 3;
  background: #faf7f2;
  padding: 0 0 .65rem;
}
.hm-msw-sections button {
  appearance: none;
  border: 1px solid #e7e5e4;
  background: #fff;
  color: #44403c;
  font-size: .78rem;
  font-weight: 700;
  padding: .45rem .7rem;
  border-radius: .5rem;
  cursor: pointer;
}
.hm-msw-sections button.is-active {
  background: #1c1917;
  color: #fff;
  border-color: #1c1917;
}
body.hm-msw-app { margin: 0; background: #faf7f2; }
body.hm-msw-app .hm-msw-overlay {
  display: flex !important;
  background: #faf7f2;
  backdrop-filter: none;
}
body.hm-msw-app .hm-msw-overlay .hm-msw-shell,
body.hm-msw-app .hm-msw-overlay .hm-msw-form {
  width: 100%;
  max-width: none;
  max-height: none;
  height: 100%;
}
body.hm-msw-app .hm-sw-close,
body.hm-msw-app .hm-sw-foot,
body.hm-msw-app [data-msw-goto-avail] { display: none; }




/* Sihirbaz içi onay / bilgi alert (native confirm yerine) */
.hm-sw-alert {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}
.hm-sw-alert[hidden] { display: none !important; }
.hm-sw-alert-card {
  width: min(420px, 100%);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28);
  padding: 1.15rem 1.25rem 1rem;
  border: 1px solid #e7e5e4;
}
.hm-sw-alert-title {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1c1917;
}
.hm-sw-alert-body {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #57534e;
  white-space: pre-line;
}
.hm-sw-alert-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Menü duyuru kartı */
.hm-sw-announce-card {
  border: 1px solid #e7e5e4;
  border-radius: 12px;
  padding: 10px;
  margin: 8px 0;
  background: #fff;
}
.hm-sw-announce-card.is-selected {
  border-color: #0f766e;
  box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.2);
}
.hm-sw-announce-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.hm-sw-announce-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  background: #eee;
  flex-shrink: 0;
}
.hm-sw-announce-body {
  flex: 1;
  min-width: 0;
}
.hm-sw-announce-active {
  margin-bottom: 6px;
}
.hm-sw-announce-times {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.hm-sw-announce-times label {
  font-size: 11px;
  font-weight: 600;
  color: #57534e;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hm-sw-announce-times input[type="time"] {
  border: 1px solid #e7e5e4;
  border-radius: 0.4rem;
  padding: 0.3rem 0.4rem;
  font-size: 0.85rem;
  min-width: 7.5rem;
  background: #fff;
}
.hm-sw-announce-days {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
.hm-sw-ann-day {
  appearance: none;
  border: 1px solid #e7e5e4;
  background: #fafaf9;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
  color: #44403c;
  line-height: 1;
}
.hm-sw-ann-day:hover {
  border-color: #a8a29e;
}
.hm-sw-ann-day.is-on {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
.hm-sw-ann-day:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
}