:root {
  --bg: #f4f7fb;
  --panel: rgba(255, 255, 255, 0.96);
  --panel-soft: #f8fafc;
  --line: #d7e0ea;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #0f766e;
  --accent-dark: #115e59;
  --accent-soft: #e6fffb;
  --warn: #fff7d6;
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --shadow: 0 18px 45px rgba(15, 23, 42, .14);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}
button, input, select, textarea { font: inherit; }
button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 7px 11px;
  cursor: pointer;
  font-weight: 700;
}
button.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
button.primary:hover { background: var(--accent-dark); }
button.ghost { background: var(--accent-soft); border-color: #99f6e4; color: #0f766e; }
button.danger { background: var(--danger-soft); border-color: #fecaca; color: var(--danger); }
button:disabled { opacity: .52; cursor: not-allowed; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 9px;
  background: #fff;
  color: var(--text);
}
textarea { min-height: 78px; resize: vertical; }
input[type="checkbox"] {
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  accent-color: var(--accent);
}
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 6px; font-size: 23px; }
h2 { margin-bottom: 8px; font-size: 18px; }
h3 { margin-bottom: 10px; font-size: 15px; }
pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-box, .modal-box {
  width: min(520px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  box-shadow: var(--shadow);
}
.app {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}
.sidebar {
  border-right: 1px solid var(--line);
  background: #fff;
  padding: 16px 10px;
}
.brand-title {
  font-size: 17px;
  line-height: 1.25;
  font-weight: 800;
  margin-bottom: 4px;
}
.muted { color: var(--muted); }
.small { font-size: 12px; }
.nav { display: grid; gap: 6px; margin-top: 18px; }
.nav button {
  text-align: left;
  border-color: transparent;
  border-radius: 6px;
}
.nav button.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: #99f6e4;
}
.main {
  padding: 18px 20px 84px;
  overflow: auto;
}
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
}
.panel.tight { padding: 10px; }
.panel-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.grid { display: grid; gap: 10px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.price-layout {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 12px;
  align-items: start;
}
.model-list {
  display: grid;
  gap: 6px;
  max-height: 62vh;
  overflow: auto;
  padding-right: 3px;
}
.model-item {
  width: 100%;
  min-height: 48px;
  display: grid;
  gap: 3px;
  text-align: left;
  background: #fff;
}
.model-item span {
  color: var(--muted);
  font-size: 12px;
}
.status-badge {
  width: max-content;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 800;
}
.status-badge.good { background: #dcfce7; color: #047857; }
.status-badge.warn { background: #fef3c7; color: #92400e; }
.status-badge.bad { background: #fee2e2; color: #b91c1c; }
.model-item.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.master-list {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}
.master-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 7px 8px;
}
.master-item .actions {
  flex-wrap: nowrap;
}
.master-item button {
  min-height: 30px;
  padding: 5px 9px;
}
.label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}
.checkline {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 700;
  color: #334155;
}
.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 920px;
}
th, td {
  border-bottom: 1px solid var(--line);
  padding: 8px;
  text-align: left;
  vertical-align: top;
}
th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 1;
  font-size: 12px;
}
tbody tr:hover td { background: #fbfdff; }
tr.changed td { background: var(--warn); }
.footer {
  position: fixed;
  left: 220px;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,.97);
  border-top: 1px solid var(--line);
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}
.notice {
  border-radius: 7px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.notice.ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.notice.err { background: var(--danger-soft); color: var(--danger); border: 1px solid #fecaca; }
.empty {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 20px;
  text-align: center;
  color: var(--muted);
}
.empty strong { color: var(--text); }
.list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.pill {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e2e8f0;
  font-size: 11px;
  font-weight: 700;
}
.pill.good { background: #dcfce7; color: #047857; }
.pill.warn { background: #fef3c7; color: #92400e; }
.visibility-list {
  display: grid;
  gap: 8px;
  max-height: 48vh;
  overflow: auto;
  padding-right: 3px;
}
.visibility-category {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.visibility-category summary,
.visibility-target-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  padding: 9px 10px;
  background: #f8fafc;
  list-style: none;
}
.visibility-category summary::-webkit-details-marker,
.visibility-target-group summary::-webkit-details-marker {
  display: none;
}
.visibility-category summary::before,
.visibility-target-group summary::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
  flex: 0 0 auto;
}
.visibility-category[open] summary::before,
.visibility-target-group[open] summary::before {
  content: "-";
}
.visibility-category summary > span:first-of-type,
.visibility-target-group summary > span:first-of-type {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.visibility-category summary small,
.visibility-target-group summary small {
  color: var(--muted);
  font-weight: 600;
}
.actions.mini {
  gap: 6px;
  flex: 0 0 auto;
}
.actions.mini button {
  padding: 6px 8px;
  font-size: 12px;
}
.visibility-rows {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px;
}
.visibility-row {
  justify-content: flex-start;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  padding: 7px 9px;
}
.visibility-targets {
  display: grid;
  gap: 8px;
  max-height: 48vh;
  overflow: auto;
  padding-right: 3px;
}
.visibility-target-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.visibility-target-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 7px;
  padding: 10px;
}
.visibility-target-group .checkline {
  align-items: center;
  border: 1px solid #edf2f7;
  border-radius: 7px;
  padding: 7px 8px;
}
.visibility-target-row span {
  min-width: 0;
}
.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 20;
}
.modal-box { width: min(1040px, 100%); max-height: 86vh; overflow: auto; }
.modal-box.narrow { width: min(560px, 100%); }
.diff {
  display: grid;
  gap: 4px;
  font-size: 12px;
}
.diff b { color: var(--text); }
.diff .old { color: #92400e; }
.diff .new { color: #047857; }
.public-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px;
}
.public-hero {
  background: linear-gradient(135deg, #0f766e, #155e75);
  color: #fff;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 14px;
}
.public-hero .muted { color: #ccfbf1; }
.customer-result {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}
.customer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
}
.customer-clickable {
  cursor: pointer;
}
.customer-clickable:hover {
  background: #eefdf8;
}
.customer-header h2 { margin: 2px 0 0; }
.selected-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  background: #f0fdfa;
  color: #0f766e;
}
.category-stack {
  display: grid;
  gap: 12px;
}
.price-category-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}
.category-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
}
.customer-category-stack {
  display: grid;
  gap: 12px;
  padding: 12px;
}
.customer-category {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.customer-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  padding: 10px;
}
.customer-price-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}
.customer-price-name {
  font-weight: 800;
  margin-bottom: 10px;
}
.customer-price-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.customer-price-values.single {
  grid-template-columns: 1fr;
}
.customer-price-values div {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  background: #f8fafc;
}
.customer-price-values span,
.customer-price-meta {
  color: var(--muted);
  font-size: 12px;
}
.customer-price-values strong {
  display: block;
  margin-top: 4px;
}
.customer-price-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 10px;
}
.compact-table {
  border: 0;
  border-radius: 0;
}
.compact-table table {
  min-width: 680px;
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 0; z-index: 5; }
  .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer { left: 0; }
  .price-layout { grid-template-columns: 1fr; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
}

/* Desain gelap Kembar Group - 13 Juli 2026 */
:root {
  color-scheme: dark;
  --bg: #0a1220;
  --panel: #111b2b;
  --panel-soft: #152235;
  --line: #314158;
  --text: #f8fafc;
  --muted: #a8b5c7;
  --accent: #0f9488;
  --accent-dark: #0f766e;
  --accent-soft: #123a3a;
  --warn: #4a3508;
  --danger: #fda4af;
  --danger-soft: #451a24;
  --shadow: 0 18px 55px rgba(0, 0, 0, .34);
}

body {
  background:
    radial-gradient(circle at 76% 8%, rgba(20, 184, 166, .08), transparent 28rem),
    linear-gradient(145deg, #08111f, #0c1626 58%, #0a1321);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: #5eead4; }
a:hover { color: #99f6e4; }
h1, h2, h3, strong { color: var(--text); }
h1 { letter-spacing: -.02em; }
.muted { color: var(--muted); }

button {
  border-color: var(--line);
  background: #111b2b;
  color: var(--text);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .18);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
button:hover:not(:disabled) {
  border-color: #4b607b;
  background: #19263a;
}
button:active:not(:disabled) { transform: translateY(1px); }
button.primary {
  border-color: #14b8a6;
  background: linear-gradient(135deg, #0f9488, #0f766e);
  color: #fff;
  box-shadow: 0 8px 22px rgba(15, 148, 136, .18);
}
button.primary:hover { background: linear-gradient(135deg, #14a99c, #0f8077); }
button.ghost {
  border-color: #1d7c75;
  background: #103431;
  color: #7ef1e4;
}
button.danger {
  border-color: #7f3140;
  background: var(--danger-soft);
  color: var(--danger);
}

input, select, textarea {
  border-color: var(--line);
  background: #0e1828;
  color: var(--text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: #7f8ea3; opacity: 1; }
input:focus, select:focus, textarea:focus {
  border-color: #14b8a6;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, .12);
}
input:disabled, select:disabled, textarea:disabled {
  background: #111827;
  color: #7f8ea3;
}

.login {
  background:
    radial-gradient(circle at 50% 15%, rgba(20, 184, 166, .14), transparent 25rem),
    #08111f;
}
.login-box, .modal-box {
  background: rgba(17, 27, 43, .98);
  border-color: #354860;
  border-radius: 12px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .5);
}
.login-box { padding: 28px; }
.login-box::before {
  content: "KATALOG MANDIRI";
  display: inline-flex;
  margin-bottom: 10px;
  border-radius: 999px;
  background: #123a3a;
  padding: 5px 9px;
  color: #5eead4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.app { grid-template-columns: 286px minmax(0, 1fr); background: transparent; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-color: #29394f;
  background:
    linear-gradient(180deg, rgba(14, 25, 42, .98), rgba(12, 23, 39, .98)),
    #0e192a;
  padding: 20px 12px;
  box-shadow: 10px 0 35px rgba(0, 0, 0, .12);
}
.brand-title {
  padding: 2px 8px;
  color: #fff;
  font-size: 18px;
  letter-spacing: -.01em;
}
.sidebar > .muted {
  display: inline-flex;
  margin: 5px 8px 0;
  border-radius: 999px;
  background: #17243a;
  padding: 5px 9px;
  color: #91a4bc;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.nav { gap: 5px; margin-top: 24px; }
.nav button {
  min-height: 40px;
  border-color: transparent;
  background: transparent;
  padding: 10px 12px;
  color: #e2e8f0;
  font-size: 13px;
}
.nav button:hover:not(:disabled) {
  border-color: #2e435c;
  background: #17253a;
}
.nav button.active {
  border-color: rgba(45, 212, 191, .28);
  background: linear-gradient(90deg, rgba(15, 148, 136, .28), rgba(15, 118, 110, .16));
  color: #5eead4;
  box-shadow: inset 3px 0 #14b8a6;
}

.main {
  min-width: 0;
  padding: 22px 24px 92px;
  background: rgba(8, 17, 31, .42);
}
.topbar {
  align-items: center;
  margin: -22px -24px 18px;
  border-bottom: 1px solid #2d3d54;
  background: rgba(14, 25, 42, .88);
  padding: 16px 24px;
  backdrop-filter: blur(12px);
}
.topbar h1 { margin-bottom: 3px; }
.topbar p { margin-bottom: 0; }

.panel {
  border-color: var(--line);
  background: rgba(17, 27, 43, .94);
  border-radius: 9px;
  box-shadow: 0 9px 26px rgba(0, 0, 0, .1);
}
.panel.tight { background: #101a2a; }
.panel-title { min-height: 42px; }
.label { color: #c9d5e4; font-size: 11px; letter-spacing: .02em; }
.checkline { color: #d7e0eb; }

.price-layout { grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); }
.model-list { max-height: calc(100vh - 310px); }
.model-item {
  border-color: #2f4057;
  background: #0f1a2b;
  color: #f8fafc;
}
.model-item span { color: #91a4bc; }
.model-item:hover:not(:disabled) { border-color: #3f5874; background: #17253a; }
.model-item.active {
  border-color: #14b8a6;
  background: linear-gradient(135deg, #123c3b, #112a34);
  color: #fff;
  box-shadow: inset 3px 0 #2dd4bf;
}

.status-badge.good { background: #083e32; color: #86efac; }
.status-badge.warn { background: #493609; color: #fde68a; }
.status-badge.bad { background: #4b1d27; color: #fda4af; }
.pill { background: #243248; color: #dbe7f5; }
.pill.good { background: #083e32; color: #86efac; }
.pill.warn { background: #493609; color: #fde68a; }

.master-item,
.visibility-category,
.visibility-target-group,
.visibility-row,
.visibility-target-group .checkline {
  border-color: #2f4057;
  background: #0f1a2b;
}
.visibility-category summary,
.visibility-target-group summary,
.category-title,
.customer-header {
  border-color: var(--line);
  background: #152235;
}
.visibility-category summary::before,
.visibility-target-group summary::before {
  border-color: #42556e;
  background: #0f1a2b;
  color: #cbd5e1;
}

.table-wrap {
  border-color: var(--line);
  background: #0e1828;
}
table { color: #eef2f7; }
th {
  background: #17243a;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: .025em;
}
th, td { border-color: #2d3d54; }
tbody tr:hover td { background: #142136; }
tr.changed td { background: #453308; }
.price-category-panel {
  border-color: var(--line);
  background: #111b2b;
}

.footer {
  left: 286px;
  border-color: #314158;
  background: rgba(14, 24, 40, .96);
  box-shadow: 0 -12px 38px rgba(0, 0, 0, .24);
  backdrop-filter: blur(12px);
}
.notice.ok { border-color: #19796a; background: #0b3b33; color: #a7f3d0; }
.notice.err { border-color: #7f3140; background: #451a24; color: #fecdd3; }
.empty { color: #91a4bc; }
.empty strong { color: #f8fafc; }

.modal { background: rgba(2, 6, 23, .78); backdrop-filter: blur(5px); }
.diff b { color: #f8fafc; }
.diff .old { color: #fcd34d; }
.diff .new { color: #6ee7b7; }

.public-page {
  max-width: 1260px;
  padding: 28px 24px 52px;
}
.public-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(45, 212, 191, .28);
  border-radius: 14px;
  background:
    radial-gradient(circle at 88% 0%, rgba(94, 234, 212, .18), transparent 20rem),
    linear-gradient(135deg, #0f766e, #115e59 55%, #164e63);
  padding: 30px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}
.public-hero h1 { font-size: clamp(26px, 4vw, 38px); }
.public-hero .muted { color: #d4fffa; }
.selected-filter { border-color: #19796a; background: #103b39; color: #99f6e4; }
.customer-result,
.customer-category,
.customer-price-card {
  border-color: var(--line);
  background: #111b2b;
}
.customer-clickable:hover { background: #183036; }
.customer-price-values div { border-color: #304259; background: #0e1828; }
.customer-price-values span,
.customer-price-meta { color: #a8b5c7; }
.customer-price-values strong { color: #5eead4; }

.simple-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.flow-step {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(17, 27, 43, .88);
  padding: 12px 14px;
}
.flow-step > span,
.section-number {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #0f766e;
  color: #fff;
  font-weight: 800;
}
.flow-step div { display: grid; gap: 2px; }
.flow-step small, .help-text { color: var(--muted); }
.bulk-section {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
}
.section-content { min-width: 0; }
.section-content > .label { max-width: 720px; }
.help-text { margin: 7px 0 0; font-size: 12px; }
.bulk-fields { margin-top: 10px; }
.bulk-service-picker {
  display: grid;
  gap: 9px;
  max-height: 300px;
  margin-top: 12px;
  overflow-y: auto;
  padding-right: 4px;
}
.service-category {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #0e1828;
}
.service-option-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 10px;
}
.service-option {
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 8px;
  font-size: 12px;
}
.service-option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.service-option:has(input:checked) {
  border-color: #178b7e;
  background: #103b39;
  color: #99f6e4;
}
.bulk-field {
  border: 1px solid #2d4057;
  border-radius: 9px;
  background: #0e1828;
  padding: 11px;
}
.bulk-field:has(input[type="checkbox"]:checked) {
  border-color: #178b7e;
  background: #10302f;
}
.notice.compact { margin: 12px 0 0; padding: 9px 11px; }
.bulk-target-title { align-items: flex-start; }
.bulk-targets {
  display: grid;
  gap: 10px;
  max-height: 430px;
  margin-top: 12px;
  overflow-y: auto;
  padding-right: 4px;
}
.target-brand {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #0e1828;
}
.target-brand-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: #152235;
  padding: 9px 11px;
}
.target-brand-title button { padding: 6px 9px; font-size: 11px; }
.target-model-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 10px;
}
.target-model-grid .checkline {
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 7px;
  font-size: 12px;
}
.target-model-grid .checkline:has(input:checked) {
  border-color: #178b7e;
  background: #103b39;
  color: #99f6e4;
}
.bulk-action {
  position: sticky;
  z-index: 4;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #28665f;
  border-radius: 11px;
  background: rgba(12, 29, 38, .97);
  padding: 12px 14px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, .34);
  backdrop-filter: blur(12px);
}
.bulk-action div { display: grid; gap: 2px; }
.bulk-action span { color: var(--muted); font-size: 12px; }
.bulk-action button { min-width: 170px; }

.public-tip {
  display: inline-flex;
  margin-top: 18px;
  border: 1px solid rgba(153, 246, 228, .22);
  border-radius: 999px;
  background: rgba(5, 46, 45, .38);
  padding: 8px 12px;
  color: #d4fffa;
  font-size: 12px;
}
.public-search-label {
  display: block;
  margin-bottom: 8px;
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 800;
}
.simple-price-card { padding: 0; }
.simple-price-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
}
.simple-price-main > div { display: grid; gap: 4px; }
.simple-price-main small { color: var(--muted); }
.simple-price-main > strong {
  color: #5eead4;
  font-size: 17px;
  white-space: nowrap;
}
.service-label { color: #f8fafc; font-weight: 800; }
.simple-price-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px solid #293a50;
  padding: 9px 14px;
}
.simple-price-secondary span,
.simple-price-card .customer-price-meta span {
  border-radius: 999px;
  background: #17263a;
  padding: 5px 8px;
  color: #cbd5e1;
  font-size: 11px;
}
.simple-price-card .customer-price-meta { padding: 0 14px 12px; }
.matrix-table { max-height: 520px; }
.matrix-table table { min-width: 1120px; }
.matrix-table th:first-child,
.matrix-table td:first-child { position: sticky; left: 0; z-index: 2; background: #111b2b; min-width: 180px; }
.matrix-table th:first-child { background: #17243a; }
.matrix-table input,
.matrix-table select { min-width: 125px; }
.adjust-targets { max-height: 300px; }
.adjust-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.adjust-fields .checkline,
.visibility-global {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0e1828;
  padding: 10px 12px;
}
.overwrite-policy {
  display: grid;
  max-width: 520px;
  margin-top: 14px;
  border: 1px solid #7c5c16;
  border-radius: 9px;
  background: #34270a;
  padding: 11px;
  color: #fde68a;
}
.batch-list { display: grid; gap: 9px; }
.batch-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #0e1828;
  padding: 12px;
}
.batch-card h3 { margin: 7px 0 3px; }
.batch-card p { margin: 0 0 4px; }
.batch-card small { color: #718198; }
.batch-card.rolled-back { opacity: .68; }
.price-comparison {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px;
}
.price-comparison del { color: #94a3b8; font-size: 11px; font-weight: 500; }
.price-comparison b { color: #5eead4; }
.price-comparison em {
  border-radius: 999px;
  background: #7f1d1d;
  padding: 2px 5px;
  color: #fecaca;
  font-size: 10px;
  font-style: normal;
}

.data-quality { margin-bottom: 14px; }
.data-quality.has-issues {
  border-color: rgba(245, 158, 11, .62);
  background: linear-gradient(135deg, rgba(120, 53, 15, .22), rgba(15, 23, 42, .96));
}
.quality-list { display: grid; gap: 8px; }
.quality-item {
  display: grid;
  grid-template-columns: minmax(180px, .45fr) 1fr;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(15, 23, 42, .72);
}
.quality-item span { color: var(--muted); }

.button-link {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 13px;
  text-decoration: none;
  font-weight: 800;
}
.button-link.primary {
  border-color: #14b8a6;
  background: linear-gradient(135deg, #0f9488, #0f766e);
  color: #fff;
}
.import-layout { align-items: stretch; }
.import-layout > .panel { margin-bottom: 0; }
.import-file {
  display: grid;
  place-items: center;
  min-height: 128px;
  border: 1px dashed #49627f;
  border-radius: 10px;
  background: #0e1828;
  padding: 18px;
  text-align: center;
  cursor: pointer;
}
.import-file:hover { border-color: #14b8a6; background: #102331; }
.import-file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.import-file span { margin-top: 5px; color: var(--muted); font-size: 12px; }
.import-rules { display: grid; gap: 8px; margin-top: 16px; color: var(--muted); }
.import-rules span { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.wide { width: 100%; margin-top: 12px; }
.import-issues {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  border: 1px solid #7f3140;
  border-radius: 10px;
  background: #341622;
  padding: 14px;
  color: #fecdd3;
}
.import-issues > div {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 10px;
  border-top: 1px solid rgba(253, 164, 175, .2);
  padding-top: 7px;
}
.import-issues span { font-weight: 800; color: #fda4af; }

@media (max-width: 1100px) {
  .app { grid-template-columns: 240px minmax(0, 1fr); }
  .footer { left: 240px; }
  .main { padding-inline: 16px; }
  .topbar { margin-inline: -16px; padding-inline: 16px; }
  .target-model-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-option-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: relative;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer { left: 0; }
  .price-layout { grid-template-columns: 1fr; }
  .model-list { max-height: 320px; }
  .simple-flow { grid-template-columns: 1fr; }
  .target-model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .main { padding: 14px 10px 104px; }
  .topbar { margin: -14px -10px 14px; padding: 14px 10px; align-items: flex-start; }
  .topbar .actions { width: 100%; }
  .topbar .actions button { flex: 1; }
  .nav { grid-template-columns: 1fr 1fr; }
  .footer { align-items: stretch; gap: 8px; flex-direction: column; padding: 9px 10px; }
  .footer .actions { display: grid; grid-template-columns: 1fr 1fr; }
  .public-page { padding: 14px 10px 34px; }
  .public-hero { padding: 22px 18px; }
  .customer-price-values { grid-template-columns: 1fr; }
  .bulk-section { grid-template-columns: 1fr; padding: 14px; }
  .section-number { width: 26px; height: 26px; }
  .bulk-target-title, .bulk-action { align-items: stretch; flex-direction: column; }
  .bulk-target-title .actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .bulk-action button { width: 100%; }
  .target-model-grid { grid-template-columns: 1fr; }
  .service-option-grid { grid-template-columns: 1fr; }
  .public-tip { border-radius: 10px; }
  .simple-price-main { align-items: flex-start; }
  .quality-item { grid-template-columns: 1fr; }
  .import-issues > div { grid-template-columns: 1fr; gap: 3px; }
}

/* Penyederhanaan alur, panel buka/tutup, dan Reset/Hapus Massal */
.nav-group-label {
  margin: 12px 8px 3px;
  color: #7f93ad;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.collapsible-panel > summary {
  cursor: pointer;
  list-style: none;
}
.collapsible-panel > summary::-webkit-details-marker { display: none; }
.collapsible-summary::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0e1828;
  color: #9fb0c5;
  font-weight: 900;
}
.collapsible-panel[open] > .collapsible-summary::before { content: "−"; }
.collapsible-summary > div:first-of-type { flex: 1; min-width: 0; }
.collapse-hint { margin-left: auto; color: var(--muted); font-size: 11px; }
.price-category-panel:not([open]) .category-title { border-bottom: 0; }
.choice-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0e1828;
  padding: 12px;
  cursor: pointer;
}
.choice-card:has(input:checked) {
  border-color: #178b7e;
  background: #103b39;
  color: #ccfbf1;
}
.choice-card input { width: 17px; height: 17px; margin-top: 2px; flex: 0 0 auto; }
.choice-card span { display: grid; gap: 4px; }
.choice-card small { color: var(--muted); line-height: 1.4; }
.reset-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.reset-fields { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.compact-choice { align-items: center; padding: 10px; }
.reset-warning { border-width: 2px; }
.danger-action { border-color: #7f3140; background: rgba(69, 26, 36, .96); }
.danger-action button.danger { min-width: 220px; }
@media (max-width: 900px) {
  .reset-action-grid { grid-template-columns: 1fr; }
  .danger-action button.danger { width: 100%; min-width: 0; }
}
/* MENU SEDERHANA V2 - KELOMPOK HARGA MASSAL DAN DATA KATALOG */
.nav-simple {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.nav-section {
  overflow: hidden;
  border: 1px solid #273a52;
  border-radius: 8px;
  background: rgba(10, 20, 35, .42);
}
.nav-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  cursor: pointer;
  list-style: none;
  padding: 9px 11px;
  color: #e2e8f0;
  font-weight: 800;
}
.nav-section > summary::-webkit-details-marker { display: none; }
.nav-section > summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 1px solid #3a4d66;
  border-radius: 6px;
  color: #9fb0c5;
  font-size: 13px;
}
.nav-section[open] > summary::after { content: "-"; }
.nav-section > summary:hover { background: #17253a; }
.nav-section > summary span { min-width: 0; }
.nav-section > summary small {
  margin-left: auto;
  color: #7f93ad;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.nav-submenu {
  display: grid;
  gap: 3px;
  border-top: 1px solid #273a52;
  padding: 5px;
}
.nav-submenu button {
  min-height: 35px;
  padding: 8px 10px 8px 24px;
  font-size: 12px;
}
.nav-submenu button::before {
  content: "";
  margin-right: 8px;
  color: #64748b;
}
.nav-submenu button.active::before { color: #5eead4; }
.edit-type-actions { justify-content: flex-end; }
@media (max-width: 900px) {
  .nav-simple { grid-template-columns: 1fr; }
  .nav-section { grid-column: 1 / -1; }
  .edit-type-actions { width: 100%; }
  .edit-type-actions button { flex: 1 1 180px; }
}

/* PATCH_TAHAP_7_BULK_PREVIEW */

.bulk-preview-modal {
  padding: 16px;
}

.bulk-preview-box {
  display: flex;
  flex-direction: column;
  width: min(1180px, 100%);
  max-width: 1180px;
  height: min(820px, calc(100vh - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: hidden;
}

.bulk-preview-header {
  flex: 0 0 auto;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.bulk-preview-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 20px;
  overflow-x: hidden;
  overflow-y: auto;
}

.bulk-preview-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.bulk-preview-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.bulk-preview-table th,
.bulk-preview-table td {
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: normal;
}

.bulk-preview-table th:nth-child(1),
.bulk-preview-table td:nth-child(1) {
  width: 18%;
}

.bulk-preview-table th:nth-child(2),
.bulk-preview-table td:nth-child(2) {
  width: 25%;
}

.bulk-preview-table th:nth-child(3),
.bulk-preview-table td:nth-child(3) {
  width: 57%;
}

.bulk-preview-before {
  white-space: normal;
  line-height: 1.45;
}

.bulk-exception-grid {
  grid-template-columns: repeat(
    3,
    minmax(0, 1fr)
  );
  gap: 8px;
}

.bulk-exception-field {
  min-width: 0;
}

.bulk-exception-field input {
  width: 100%;
  min-width: 0;
}

.bulk-preview-summary {
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.bulk-preview-model {
  position: relative;
}

.bulk-exception-badge {
  display: inline-flex;
  margin-top: 7px;
  padding: 3px 7px;
  border: 1px solid rgba(20, 184, 166, 0.5);
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.12);
  font-size: 11px;
  font-weight: 700;
}

.bulk-preview-row.is-exception td {
  background: rgba(20, 184, 166, 0.07);
}

.bulk-preview-footer {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.bulk-preview-count {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bulk-preview-count span {
  color: var(--muted);
  font-size: 12px;
}

.bulk-preview-footer .actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

[data-bulk-override].invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 2px
    rgba(239, 68, 68, 0.15);
}

[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  .bulk-preview-modal {
    padding: 8px;
  }

  .bulk-preview-box {
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px);
  }

  .bulk-preview-header,
  .bulk-preview-body,
  .bulk-preview-footer {
    padding-left: 12px;
    padding-right: 12px;
  }

  .bulk-preview-table,
  .bulk-preview-table tbody,
  .bulk-preview-table tr,
  .bulk-preview-table td {
    display: block;
    width: 100%;
  }

  .bulk-preview-table thead {
    display: none;
  }

  .bulk-preview-table tr {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
  }

  .bulk-preview-table td {
    width: 100% !important;
    border-bottom: 1px solid var(--line);
  }

  .bulk-preview-table td:last-child {
    border-bottom: 0;
  }

  .bulk-exception-grid {
    grid-template-columns: 1fr;
  }

  .bulk-preview-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .bulk-preview-footer .actions {
    width: 100%;
  }

  .bulk-preview-footer .actions button {
    flex: 1;
  }
}

/* PATCH_TAHAP_12A_GUIDE_UI */

.muted,
.help-text,
.flow-step small,
.panel-title .muted,
.guide-details small {
  color: var(--muted);
  color: color-mix(
    in srgb,
    var(--text) 70%,
    transparent
  );
}

.help-text {
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.55;
}

.panel p,
.notice,
.empty p,
.flow-step small {
  line-height: 1.5;
}

.simple-flow {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}

.flow-step {
  min-width: 0;
  align-items: flex-start;
}

.flow-step strong,
.flow-step small {
  overflow-wrap: anywhere;
}

button:disabled,
button[disabled] {
  cursor: not-allowed !important;
  opacity: 0.42 !important;
  filter: grayscale(0.22);
  transform: none !important;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid
    color-mix(
      in srgb,
      #14b8a6 58%,
      transparent
    );
  outline-offset: 2px;
}

.context-help-button {
  border-color:
    color-mix(
      in srgb,
      #14b8a6 55%,
      var(--line)
    );
  background:
    color-mix(
      in srgb,
      #14b8a6 12%,
      var(--panel)
    );
  font-weight: 750;
}

.context-help-button:hover {
  border-color: #14b8a6;
}

.zone-heading {
  display: grid;
  gap: 5px;
  margin: 22px 0 12px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 11px;
  background: var(--panel);
}

.zone-heading span {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.zone-heading strong {
  font-size: 17px;
}

.zone-heading small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.safe-zone {
  border-left-color: #0f766e;
  background:
    color-mix(
      in srgb,
      #0f766e 7%,
      var(--panel)
    );
}

.danger-zone {
  border-left-color: #dc2626;
  background:
    color-mix(
      in srgb,
      #dc2626 8%,
      var(--panel)
    );
}

.danger-zone span,
.danger-zone strong {
  color:
    color-mix(
      in srgb,
      #ef4444 78%,
      var(--text)
    );
}

.permanent-delete-panel {
  border-color:
    color-mix(
      in srgb,
      #dc2626 45%,
      var(--line)
    );
}

.guide-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
  padding: 24px;
  border: 1px solid
    color-mix(
      in srgb,
      #14b8a6 42%,
      var(--line)
    );
  border-radius: 14px;
  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        #14b8a6 13%,
        var(--panel)
      ),
      var(--panel)
    );
}

.guide-hero > div:first-child {
  max-width: 760px;
}

.guide-hero h2 {
  margin: 5px 0 8px;
  font-size: clamp(23px, 3vw, 34px);
}

.guide-hero p {
  margin: 0;
  line-height: 1.65;
}

.guide-eyebrow {
  color: #14b8a6;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.guide-index {
  position: sticky;
  z-index: 6;
  top: 8px;
  display: flex;
  gap: 7px;
  margin-bottom: 14px;
  padding: 10px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 11px;
  background:
    color-mix(
      in srgb,
      var(--panel) 94%,
      transparent
    );
  backdrop-filter: blur(10px);
}

.guide-index button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.guide-stack {
  display: grid;
  gap: 11px;
}

.guide-details {
  scroll-margin-top: 82px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.guide-details[open] {
  border-color:
    color-mix(
      in srgb,
      #14b8a6 40%,
      var(--line)
    );
}

.guide-details > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}

.guide-details > summary::-webkit-details-marker {
  display: none;
}

.guide-details > summary:hover {
  background:
    color-mix(
      in srgb,
      #14b8a6 6%,
      var(--panel)
    );
}

.guide-details > summary > span:last-child {
  display: grid;
  gap: 3px;
}

.guide-details > summary strong {
  font-size: 15px;
}

.guide-details > summary small {
  font-size: 12px;
}

.guide-number {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #0f766e;
  color: #fff;
  font-weight: 850;
}

.guide-content {
  padding: 4px 22px 22px 68px;
  border-top: 1px solid var(--line);
}

.guide-content h4 {
  margin: 20px 0 8px;
  font-size: 15px;
}

.guide-content p,
.guide-content li {
  line-height: 1.65;
}

.guide-content ol,
.guide-content ul {
  padding-left: 21px;
}

.guide-content li + li {
  margin-top: 6px;
}

.guide-content .actions {
  margin-top: 16px;
}

.guide-process {
  display: grid;
  grid-template-columns:
    repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 15px 0;
}

.guide-process div {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  padding: 13px 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  text-align: center;
}

.guide-process b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0f766e;
  color: #fff;
}

.guide-process span {
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.guide-callout,
.guide-example,
.guide-warning {
  margin: 14px 0;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 9px;
  line-height: 1.55;
}

.guide-callout {
  border-left-color: #0f766e;
  background:
    color-mix(
      in srgb,
      #0f766e 7%,
      var(--panel)
    );
}

.guide-example {
  border-left-color: #2563eb;
  background:
    color-mix(
      in srgb,
      #2563eb 7%,
      var(--panel)
    );
}

.guide-warning {
  border-left-color: #dc2626;
  background:
    color-mix(
      in srgb,
      #dc2626 7%,
      var(--panel)
    );
}

.guide-example code {
  display: inline-block;
  margin: 4px 3px;
}

.guide-table {
  width: 100%;
  margin: 13px 0;
  border-collapse: collapse;
}

.guide-table th,
.guide-table td {
  padding: 10px 12px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.guide-table th {
  background:
    color-mix(
      in srgb,
      #14b8a6 7%,
      var(--panel)
    );
}

.guide-checklist {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}

.guide-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.guide-two-column {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 15px;
}

.guide-safe-card,
.guide-danger-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.guide-safe-card {
  border-left: 5px solid #0f766e;
}

.guide-danger-card {
  border-left: 5px solid #dc2626;
}

.guide-safe-card h4,
.guide-danger-card h4 {
  margin-top: 0;
}

.guide-troubleshooting {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.guide-troubleshooting article {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.guide-troubleshooting h4 {
  margin-top: 0;
}

.guide-troubleshooting p {
  margin-bottom: 0;
}

.guide-path {
  display: block;
  margin: 10px 0;
  padding: 12px;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: 8px;
}

@media (max-width: 1100px) {
  .simple-flow {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .guide-process {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .guide-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .guide-hero .actions {
    width: 100%;
  }

  .guide-content {
    padding:
      4px 14px 17px;
  }

  .guide-checklist,
  .guide-two-column,
  .guide-troubleshooting {
    grid-template-columns: 1fr;
  }

  .topbar-actions {
    align-items: stretch;
  }
}

@media (max-width: 620px) {
  .simple-flow {
    grid-template-columns: 1fr;
  }

  .guide-process {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .guide-details > summary {
    align-items: flex-start;
  }
}

@media print {
  .sidebar,
  .main > .topbar,
  .guide-index,
  .guide-hero .actions,
  .guide-content .actions,
  .notice {
    display: none !important;
  }

  .app,
  .main {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .guide-details {
    break-inside: avoid;
    border-color: #bbb;
  }

  .guide-content {
    padding:
      4px 12px 15px 52px;
  }
}

/* PATCH_TAHAP_12B1_CLEAN_UI */

/*
 * Alat Lanjutan menggunakan tulisan yang jelas,
 * tidak lagi memakai simbol tambah, minus, atau bullet.
 */
.nav-section > summary::after {
  content: "Buka" !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 48px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid #3a4d66;
  border-radius: 6px;
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.nav-section[open] > summary::after {
  content: "Tutup" !important;
}

.nav-submenu button::before {
  display: none !important;
  content: none !important;
}

.nav-submenu button {
  padding-left: 11px;
}

/*
 * Kolom master berdiri sendiri.
 * Panel di kiri tidak lagi dipaksa setinggi panel kanan.
 */
.master-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}

.master-column {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.master-column > .panel {
  min-width: 0;
  align-self: start;
}

.master-column textarea {
  min-height: 82px;
}

/*
 * Daftar master tetap rapat dan nama panjang
 * dapat turun baris tanpa terpotong.
 */
.master-item {
  align-items: center;
  gap: 10px;
}

.master-item > span,
.master-item > div:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.master-item .actions {
  flex: 0 0 auto;
}

/*
 * Tombol buka/tutup panel lebih mudah dibedakan.
 */
[data-master-toggle] {
  min-width: 58px;
  font-weight: 750;
}

@media (max-width: 900px) {
  .master-grid {
    grid-template-columns: 1fr;
  }
}

/* UI SELARAS APLIKASI INTI — 26 JULI 2026 */
:root {
  color-scheme: light;
  --bg: #f7f8fa;
  --panel: #ffffff;
  --panel-soft: #f1f5f9;
  --line: #d8dee8;
  --text: #020617;
  --muted: #596579;
  --accent: #0f766e;
  --accent-dark: #115e59;
  --accent-soft: rgba(15, 118, 110, .10);
  --warn: #fffbeb;
  --danger: #991b1b;
  --danger-soft: #fef2f2;
  --shadow: 0 18px 60px rgba(15, 23, 42, .12);
}

html { background: var(--bg); }
body {
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }
h1, h2, h3, strong { color: var(--text); }
.muted,
.help-text,
.flow-step small,
.panel-title .muted,
.guide-details small {
  color: var(--muted);
}

button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: #0f172a;
  box-shadow: none;
}
button:hover:not(:disabled) {
  border-color: #aeb8c7;
  background: #f8fafc;
}
button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}
button.primary:hover { background: var(--accent-dark); }
button.ghost {
  border-color: #99d8d0;
  background: #ecfdf5;
  color: var(--accent);
}
button.danger {
  border-color: #fecaca;
  background: var(--danger-soft);
  color: var(--danger);
}

input, select, textarea {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  box-shadow: none;
}
input::placeholder, textarea::placeholder { color: #8490a3; }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}
input:disabled, select:disabled, textarea:disabled {
  background: #f1f5f9;
  color: #8490a3;
}

.app {
  grid-template-columns: 288px minmax(0, 1fr);
  background: var(--bg);
}
.sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 100dvh;
  padding: 0 12px 24px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: #fff;
  box-shadow: none;
}
.sidebar-heading {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -12px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
}
.brand-title {
  padding: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}
.sidebar-subtitle {
  margin-top: 2px;
  color: #64748b;
  font-size: 12px;
}
.sidebar-close,
.menu-toggle {
  display: none;
  width: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
  font-size: 20px;
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 2px 4px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}
.sidebar-user > span:last-child { display: grid; min-width: 0; }
.sidebar-user strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; }
.sidebar-user small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.user-avatar,
.catalog-mark,
.login-mark {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #bfe6df;
  background: #ecfdf5;
  color: var(--accent);
  font-weight: 800;
}
.user-avatar { width: 34px; height: 34px; border-radius: 50%; }
.nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  margin-top: 14px;
}
.nav-group-label {
  margin: 16px 8px 5px;
  color: #8490a3;
  font-size: 10px;
  letter-spacing: .10em;
}
.nav button {
  min-height: 42px;
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
  padding: 9px 12px;
  color: #334155;
  font-size: 12px;
}
.nav button:hover:not(:disabled) {
  border-color: transparent;
  background: #f1f5f9;
}
.nav button.active {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: none;
}
.nav-section {
  border-color: #e2e8f0;
  background: #fff;
}
.nav-section > summary { color: #334155; }
.nav-section[open] > summary { background: #f8fafc; color: var(--accent); }
.nav-section > summary::after {
  border-color: var(--line) !important;
  color: #64748b;
}

.main {
  min-width: 0;
  padding: 22px 24px 88px;
  background: var(--bg);
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 18;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(260px, 520px) auto;
  align-items: center;
  gap: 16px;
  margin: -22px -24px 20px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
}
.topbar-primary {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 10px;
}
.topbar h1 { margin: 0; font-size: 16px; letter-spacing: 0; }
.topbar p { margin: 2px 0 0; }
.topbar-kicker {
  color: var(--accent) !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .10em;
}
.catalog-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid #cdebe5;
  border-radius: 8px;
  background: #ecfdf5;
}
.catalog-mark { width: 42px; height: 42px; border-radius: 8px; background: #fff; }
.catalog-identity > span:last-child { display: grid; min-width: 0; }
.catalog-identity small {
  color: #0f766e;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}
.catalog-identity strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel,
.panel.tight,
.master-item,
.visibility-category,
.visibility-target-group,
.visibility-row,
.price-category-panel,
.customer-result,
.customer-category,
.customer-price-card {
  border-color: var(--line);
  background: #fff;
  color: var(--text);
  box-shadow: none;
}
.panel { border-radius: 8px; }
.panel-title { min-height: 40px; }
.label,
.checkline { color: #334155; }
.model-item {
  border-color: var(--line);
  background: #fff;
  color: var(--text);
}
.model-item span { color: var(--muted); }
.model-item:hover:not(:disabled) { border-color: #b9c3d1; background: #f8fafc; }
.model-item.active {
  border-color: #99d8d0;
  background: #ecfdf5;
  color: var(--accent);
  box-shadow: inset 3px 0 var(--accent);
}
.table-wrap,
.compact-table,
table,
th,
td {
  border-color: var(--line);
  background-color: #fff;
  color: var(--text);
}
th { background: #f1f5f9; }
tbody tr:hover td { background: #f8fafc; }
tr.changed td { background: #fffbeb; }
.status-badge.good { background: #dcfce7; color: #047857; }
.status-badge.warn { background: #fef3c7; color: #92400e; }
.status-badge.bad { background: #fee2e2; color: #b91c1c; }
.pill { background: #e2e8f0; color: #334155; }
.pill.good { background: #dcfce7; color: #047857; }
.pill.warn { background: #fef3c7; color: #92400e; }
.notice.ok { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.notice.err { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.footer {
  left: 288px;
  border-color: var(--line);
  background: rgba(255, 255, 255, .98);
}

.modal {
  z-index: 100;
  padding: 20px;
  background: rgba(15, 23, 42, .55);
}
.modal-box,
.login-box {
  border-color: var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow);
}

.login {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% 5%, rgba(15, 118, 110, .10), transparent 25rem),
    var(--bg);
}
.login-box {
  width: min(440px, 100%);
  padding: 30px;
}
.login-box::before { display: none; }
.login-mark {
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 10px;
  font-size: 16px;
}
.login-eyebrow {
  margin-bottom: 5px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.login-box h1 { font-size: 24px; }
.login-box .label { margin-top: 14px; }
.login-box .actions {
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
}
.login-submit { min-width: 120px; }

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}
.settings-grid .panel { margin: 0; }

.public-page {
  max-width: 1240px;
  padding: 28px 22px 40px;
}
.public-hero {
  padding: 28px;
  border: 1px solid #cdebe5;
  border-radius: 10px;
  background: #ecfdf5;
  color: var(--text);
}
.public-hero h1 {
  margin: 5px 0 8px;
  font-size: clamp(24px, 4vw, 38px);
}
.public-hero p { max-width: 760px; margin: 0; color: #334155; line-height: 1.6; }
.public-eyebrow {
  color: var(--accent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}
.public-search-panel {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.4fr);
  align-items: center;
  gap: 18px;
  padding: 18px;
}
.public-search-panel p { margin: 4px 0 0; }
.public-search-label { color: var(--text); font-size: 15px; font-weight: 750; }
.public-search-panel .selected-filter { grid-column: 1 / -1; }
.customer-result { border-radius: 9px; }
.customer-header,
.category-title {
  border-color: var(--line);
  background: #f8fafc;
}
.customer-clickable:hover { background: #ecfdf5; }
.customer-price-card { border-radius: 7px; }
.customer-price-card .service-label {
  color: var(--text);
  font-weight: 800;
}
.simple-price-main strong,
.price-comparison b { color: var(--accent); }
.public-count {
  color: var(--muted);
  text-align: center;
}
.public-pagination,
.public-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
}
.public-footer { margin-top: 18px; }
.sidebar-overlay { display: none; }

@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: minmax(220px, 1fr) auto;
  }
  .catalog-identity { display: none; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 70;
    width: min(320px, calc(100vw - 44px));
    height: 100dvh;
    transform: translateX(-105%);
    transition: transform .2s ease;
    box-shadow: 18px 0 50px rgba(15, 23, 42, .20);
  }
  .catalog-menu-open { overflow: hidden; }
  .catalog-menu-open .sidebar { transform: translateX(0); }
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    width: 100%;
    height: 100%;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    background: rgba(15, 23, 42, .52);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .catalog-menu-open .sidebar-overlay { display: block; opacity: 1; pointer-events: auto; }
  .sidebar-close { display: grid; }
  .menu-toggle { display: grid; }
  .nav { grid-template-columns: 1fr !important; }
  .main { padding: 16px 16px 72px; }
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    margin: -16px -16px 16px;
    padding: 9px 12px;
  }
  .topbar-primary > div { min-width: 0; }
  .topbar-primary .muted {
    max-width: 52vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-actions .context-help-button { display: none; }
  .footer { left: 0; }
  .settings-grid { grid-template-columns: 1fr; }
  .price-layout { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  button { min-height: 44px; }
  .main { padding: 12px 12px 68px; }
  .topbar {
    margin: -12px -12px 14px;
    grid-template-columns: minmax(0, 1fr);
  }
  .topbar-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .topbar-actions button { width: 100%; }
  .public-page { padding: 14px 12px 28px; }
  .public-hero { padding: 20px 18px; }
  .public-search-panel { grid-template-columns: 1fr; gap: 12px; }
  .public-search-panel .selected-filter { grid-column: auto; }
  .customer-header,
  .selected-filter,
  .public-pagination,
  .public-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .customer-header .actions,
  .public-pagination .actions { width: 100%; }
  .customer-header .actions button,
  .public-pagination .actions button { flex: 1; }
  .customer-price-grid { grid-template-columns: 1fr; }
  .modal { padding: 8px; }
  .modal-box { max-height: calc(100dvh - 16px); }
  .login { padding: 14px; }
  .login-box { padding: 24px 20px; }
  .login-box .actions { align-items: stretch; flex-direction: column; }
  .login-submit { width: 100%; }
}

/* KONTRAS TINGGI DAN ACCORDION CUSTOMER — 26 JULI 2026
 * Semua area kerja memakai pasangan latar terang + teks gelap.
 * Latar gelap hanya dipakai oleh tombol aksi utama dengan teks putih.
 */
.flow-step,
.service-category,
.target-brand,
.bulk-field,
.adjust-fields .checkline,
.visibility-global,
.batch-card,
.import-file,
.quality-item,
.data-quality.has-issues {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
}

.flow-step strong,
.service-category strong,
.target-brand strong,
.bulk-field,
.bulk-field .checkline,
.adjust-fields .checkline,
.visibility-global,
.batch-card h3,
.batch-card p,
.batch-card small,
.import-file strong,
.quality-item strong {
  color: #0f172a;
}

.flow-step small,
.bulk-action span,
.batch-card .muted,
.batch-card small,
.import-file span,
.quality-item span {
  color: #475569;
}

.target-brand-title,
.service-category > summary,
.visibility-category summary,
.visibility-target-group summary,
.category-title {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #0f172a;
}

.service-option,
.target-model-grid .checkline,
.visibility-target-group .checkline,
.visibility-row {
  border-color: #e2e8f0;
  background: #fff;
  color: #1e293b;
}

.service-option span,
.target-model-grid .checkline,
.visibility-target-row span {
  color: #1e293b;
}

.service-option:hover,
.target-model-grid .checkline:hover,
.visibility-target-group .checkline:hover,
.visibility-row:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.service-option:has(input:checked),
.target-model-grid .checkline:has(input:checked),
.bulk-field:has(input[type="checkbox"]:checked),
.adjust-fields .checkline:has(input:checked),
.visibility-global:has(input:checked),
.visibility-row:has(input:checked),
.visibility-target-group .checkline:has(input:checked) {
  border-color: #5eead4;
  background: #ecfdf5;
  color: #065f46;
}

.service-option:has(input:checked) span,
.target-model-grid .checkline:has(input:checked),
.bulk-field:has(input[type="checkbox"]:checked) .checkline {
  color: #065f46;
}

.bulk-action {
  border-color: #99d8d0;
  background: rgba(255, 255, 255, .98);
  color: #0f172a;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .15);
}

.bulk-action strong {
  color: #0f172a;
}

.danger-action {
  border-color: #fecaca;
  background: rgba(254, 242, 242, .98);
}

.overwrite-policy {
  border-color: #f59e0b;
  background: #fffbeb;
  color: #78350f;
}

.overwrite-policy select {
  border-color: #d6a83f;
  background: #fff;
  color: #0f172a;
}

.import-file {
  border-color: #94a3b8;
}

.import-file:hover {
  border-color: #0f766e;
  background: #ecfdf5;
}

.import-issues {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.batch-card.rolled-back {
  border-color: #cbd5e1;
  background: #e2e8f0;
  opacity: 1;
}

.batch-card.rolled-back h3,
.batch-card.rolled-back p,
.batch-card.rolled-back small {
  color: #475569;
}

.matrix-table th:first-child,
.matrix-table td:first-child {
  background: #fff;
  color: #0f172a;
}

.matrix-table th:first-child {
  background: #f1f5f9;
}

input:disabled,
select:disabled,
textarea:disabled {
  border-color: #cbd5e1;
  background: #e2e8f0;
  color: #475569;
  -webkit-text-fill-color: #475569;
  opacity: 1;
}

button:disabled,
button[disabled] {
  border-color: #cbd5e1 !important;
  background: #e2e8f0 !important;
  color: #475569 !important;
  opacity: .78 !important;
}

.empty {
  color: #475569;
}

.empty strong {
  color: #0f172a;
}

/* Pilihan pada Reset / Hapus Massal harus tetap terbaca pada semua status. */
.choice-card {
  border-color: #cbd5e1;
  background: #fff;
  color: #0f172a;
}

.choice-card strong {
  color: #0f172a;
}

.choice-card small {
  color: #475569;
}

.choice-card:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.choice-card:has(input:checked) {
  border-color: #0f766e;
  background: #ecfdf5;
  color: #064e3b;
  box-shadow: inset 4px 0 0 #0f766e;
}

.choice-card:has(input:checked) strong {
  color: #064e3b;
}

.choice-card:has(input:checked) small {
  color: #166534;
}

.choice-card input[type="radio"],
.choice-card input[type="checkbox"] {
  accent-color: #0f766e;
}

.availability-flow,
.delete-flow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.flow-step.active {
  border-color: #0f766e;
  background: #ecfdf5;
  color: #064e3b;
  box-shadow: inset 4px 0 0 #0f766e;
}

.flow-step.complete > span {
  background: #059669;
}

button.flow-step {
  width: 100%;
  color: #0f172a;
  text-align: left;
}

button.flow-step:disabled {
  background: #f1f5f9 !important;
  color: #64748b !important;
  opacity: 1 !important;
}

.availability-page {
  max-width: 1040px;
  margin-inline: auto;
  padding: 24px;
}

.availability-selectors {
  margin-top: 18px;
}

.availability-selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 18px;
  padding: 20px;
  border: 1px solid #99f6e4;
  border-radius: 11px;
  background: #ecfdf5;
}

.availability-selection > div {
  display: grid;
  gap: 5px;
}

.availability-selection strong {
  color: #064e3b;
  font-size: 20px;
}

.availability-selection small {
  color: #166534;
}

.wizard-panel:not(.active) {
  display: none;
}

.wizard-flow .flow-step {
  min-height: 72px;
}

.wizard-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

.review-summary {
  display: grid;
  gap: 12px;
}

.review-summary h3 {
  margin: 0;
  font-size: 23px;
}

.review-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.review-summary-grid > div {
  display: grid;
  gap: 5px;
  padding: 15px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #f8fafc;
}

.review-summary-grid span {
  color: #475569;
  font-size: 12px;
}

.review-summary-grid strong {
  color: #0f172a;
  font-size: 22px;
}

.delete-page-heading {
  margin-top: 0;
}

.delete-search-title {
  align-items: end;
  margin-top: 18px;
}

.delete-search-title .label {
  width: min(760px, 100%);
}

@media (max-width: 780px) {
  .availability-flow,
  .delete-flow,
  .review-summary-grid {
    grid-template-columns: 1fr;
  }

  .availability-selection,
  .wizard-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .availability-selection button,
  .wizard-actions button {
    width: 100%;
  }
}

.customer-result,
.customer-category,
.customer-price-card,
.customer-price-values div {
  border-color: #cbd5e1;
  background: #fff;
  color: #0f172a;
}

.customer-header,
.customer-category .category-title {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
}

.customer-price-values div {
  background: #f8fafc;
}

.customer-price-values span,
.customer-price-meta,
.simple-price-main small {
  color: #475569;
}

.simple-price-secondary {
  border-color: #e2e8f0;
}

.simple-price-secondary span,
.simple-price-card .customer-price-meta span {
  background: #e2e8f0;
  color: #334155;
}

.public-model-accordion > summary {
  list-style: none;
}

.public-model-accordion > summary::-webkit-details-marker {
  display: none;
}

.public-model-accordion > summary::before {
  content: "+";
  display: grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #94a3b8;
  border-radius: 7px;
  background: #fff;
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
}

.public-model-accordion[open] > summary::before {
  content: "−";
  border-color: #0f766e;
  background: #ecfdf5;
  color: #0f766e;
}

.public-model-accordion > summary > div:first-of-type {
  flex: 1;
  min-width: 0;
}

.public-model-summary-actions {
  flex: 0 0 auto;
}

.public-accordion-label {
  min-width: 92px;
  border: 1px solid #99d8d0;
  border-radius: 6px;
  background: #ecfdf5;
  padding: 8px 10px;
  color: #0f766e;
  text-align: center;
  font-weight: 800;
}

.public-model-accordion .when-open {
  display: none;
}

.public-model-accordion[open] .when-open {
  display: inline;
}

.public-model-accordion[open] .when-closed {
  display: none;
}

.public-model-filter-action {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 2px;
}

@media (max-width: 680px) {
  .public-model-accordion > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .public-model-summary-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
  }

  .public-accordion-label {
    width: 100%;
  }

  .public-model-filter-action button {
    width: 100%;
  }
}

/* POLISH ANTARMUKA APLIKASI BISNIS — 26 JULI 2026
 * Lapisan terakhir ini menyatukan tipografi, formulir, tabel, dan ritme ruang.
 * Tujuannya: ringkas, terbaca, serta konsisten pada desktop dan HP.
 */
:root {
  --ui-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --ui-radius: 8px;
  --ui-radius-lg: 10px;
  --ui-control-height: 40px;
  --ui-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  --ui-shadow-raised: 0 10px 30px rgba(15, 23, 42, .09);
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--ui-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  color: #172033;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -.005em;
}

h1,
h2,
h3,
h4,
strong,
button,
.nav-item {
  letter-spacing: -.012em;
}

h1 { font-size: clamp(21px, 1.8vw, 25px); }
h2 { font-size: clamp(18px, 1.45vw, 21px); }
h3 { font-size: 16px; }

.muted,
small,
.page-subtitle,
.panel p {
  color: #5b677a;
  line-height: 1.45;
}

.panel,
.card,
.customer-result,
.customer-category,
.customer-price-card,
.wizard-panel {
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow);
}

.panel {
  padding: 16px;
}

.panel.tight {
  padding: 12px;
}

.panel-title {
  min-height: 34px;
  gap: 10px;
}

.label,
label:not(.checkline) {
  color: #344054;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .005em;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  min-height: var(--ui-control-height);
  border-color: #cfd7e3;
  border-radius: 7px;
  background: #fff;
  padding-inline: 11px;
  color: #172033;
  font-size: 14px;
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, .025);
}

textarea {
  padding-block: 9px;
}

input:not([type="checkbox"]):not([type="radio"]):hover,
select:hover,
textarea:hover {
  border-color: #a9b5c5;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: #138b80;
  outline: 3px solid rgba(19, 139, 128, .14);
  box-shadow: none;
}

input::placeholder,
textarea::placeholder {
  color: #8895a8;
  opacity: 1;
}

button,
.button {
  min-height: 38px;
  border-radius: 7px;
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: none;
}

button:hover:not(:disabled),
.button:hover:not(:disabled) {
  transform: none;
  box-shadow: 0 2px 7px rgba(15, 23, 42, .09);
}

.primary,
button.primary {
  border-color: #0f8278;
  background: #0f8278;
  color: #fff;
}

.primary:hover:not(:disabled),
button.primary:hover:not(:disabled) {
  border-color: #0b6f67;
  background: #0b6f67;
}

input[type="checkbox"],
input[type="radio"] {
  flex: 0 0 auto;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: #0f8278;
}

.checkline {
  gap: 8px;
  min-height: 36px;
  color: #2f3a4c;
  font-size: 13px;
  font-weight: 650;
}

.wizard-flow {
  gap: 9px;
}

.wizard-flow .flow-step {
  min-height: 58px;
  border-radius: 8px;
  padding: 10px 12px;
  gap: 10px;
  background: #fff;
}

.flow-step > span {
  width: 28px;
  height: 28px;
  font-size: 13px;
}

.flow-step strong {
  font-size: 13px;
}

.flow-step small {
  margin-top: 2px;
  font-size: 11px;
}

.flow-step.active {
  border-color: #54b9af;
  background: #f0fdfa;
  box-shadow: inset 0 0 0 1px rgba(15, 130, 120, .08);
}

.wizard-panel {
  padding: 16px;
}

.wizard-actions {
  margin-top: 16px;
  padding-top: 13px;
}

.service-option,
.target-model-grid .checkline,
.visibility-target-group .checkline,
.bulk-field,
.adjust-fields .checkline {
  border-radius: 7px;
}

.service-option,
.target-model-grid .checkline {
  min-height: 40px;
  padding: 9px 11px;
}

.service-option:hover,
.target-model-grid .checkline:hover {
  box-shadow: 0 1px 4px rgba(15, 23, 42, .06);
}

.overwrite-policy {
  max-width: 680px;
  border-color: #e3b453;
  border-radius: 8px;
  background: #fffaf0;
  padding: 10px 12px;
}

.overwrite-policy .label {
  color: #765016;
}

.matrix-table {
  max-height: min(54vh, 560px);
  border: 1px solid #d7dee8;
  border-radius: 9px;
  background: #fff;
}

.matrix-table table {
  min-width: 1060px;
  border-collapse: separate;
  border-spacing: 0;
}

.matrix-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 39px;
  border-bottom: 1px solid #cfd7e3;
  background: #f3f6f9;
  color: #344054;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.matrix-table td {
  height: 54px;
  padding: 7px 8px;
  border-bottom-color: #e7ebf0;
  background: #fff;
  vertical-align: middle;
}

.matrix-table tbody tr:hover td {
  background: #f8fbfc;
}

.matrix-table th:first-child,
.matrix-table td:first-child {
  left: 0;
  min-width: 175px;
}

.matrix-table th:first-child {
  z-index: 5;
  background: #f3f6f9;
}

.matrix-table td:first-child {
  z-index: 2;
  background: #fff;
}

.matrix-table tbody tr:hover td:first-child {
  background: #f8fbfc;
}

.matrix-table td:first-child strong {
  display: inline-block;
  max-width: 165px;
  color: #172033;
  font-size: 13px;
  line-height: 1.25;
}

.matrix-table .pill {
  margin-top: 4px;
  padding: 3px 7px;
  font-size: 10px;
}

.matrix-table input:not([type="checkbox"]):not([type="radio"]),
.matrix-table select {
  min-width: 112px;
  min-height: 38px;
}

/* Mencegah checkbox tabel mewarisi lebar minimum input harga. */
.matrix-table input[type="checkbox"],
.matrix-table input[type="radio"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
}

.matrix-table td:nth-child(6),
.matrix-table th:nth-child(6) {
  width: 126px;
  min-width: 126px;
}

.matrix-table td:nth-child(6) .checkline {
  min-width: 100px;
  white-space: nowrap;
}

.matrix-table td:last-child input {
  min-width: 145px;
}

.bulk-action {
  border-radius: 9px;
  box-shadow: var(--ui-shadow-raised);
}

.batch-card {
  border-radius: 8px;
}

.customer-price-grid {
  gap: 10px;
}

.customer-price-card {
  padding: 13px;
}

.customer-price-card:hover {
  border-color: #aab8c8;
  box-shadow: 0 5px 16px rgba(15, 23, 42, .07);
}

.public-model-accordion > summary {
  min-height: 58px;
  padding: 12px 14px;
}

.public-model-accordion > summary::before {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 16px;
}

@media (max-width: 900px) {
  .panel,
  .wizard-panel {
    padding: 13px;
  }

  .wizard-flow {
    grid-template-columns: 1fr;
  }

  .wizard-flow .flow-step {
    min-height: 52px;
  }

  .matrix-table {
    max-height: 58vh;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 13px;
  }

  button,
  .button {
    min-height: 40px;
  }

  .wizard-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .wizard-actions button {
    width: 100%;
  }

  .overwrite-policy {
    max-width: none;
  }
}

/* PATCH_KATALOG_CARI_EDIT_DRAWER_20260728 */
.price-filter-grid {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(240px, 1fr) minmax(240px, 1fr);
  gap: 12px;
}

.price-brand-list {
  display: grid;
  align-content: start;
  gap: 8px;
  overflow-y: auto;
}

.price-brand-accordion {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.price-brand-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  background: #f8fafc;
}

.price-brand-summary > div {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.price-brand-summary small {
  color: var(--muted);
  font-size: 11px;
}

.price-brand-models {
  display: grid;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--line);
}

.copy-drawer-modal {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
}

.copy-drawer {
  width: min(82vw, 1320px);
  max-width: none;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  border-radius: 14px 0 0 14px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.copy-drawer-header,
.copy-drawer-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: #fff;
}

.copy-drawer-header {
  border-bottom: 1px solid var(--line);
}

.copy-drawer-header h2,
.copy-drawer-header p {
  margin: 0;
}

.copy-drawer-header h2 {
  margin-top: 2px;
}

.copy-close {
  width: 44px;
  min-width: 44px;
  padding: 0;
  font-size: 18px;
}

.copy-drawer-body {
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 28px;
  background: #f8fafc;
}

.copy-source-note {
  margin-bottom: 12px;
  border: 1px solid #99d8d0;
  border-radius: 8px;
  background: #ecfdf5;
  padding: 11px 12px;
  color: #115e59;
  line-height: 1.45;
}

.copy-search-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.copy-search-field {
  min-width: 0;
}

.copy-toolbar-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.copy-policy {
  max-width: 720px;
  margin: 14px 0 0;
}

.copy-result-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 8px;
  color: #334155;
}

.copy-brand-list {
  display: grid;
  gap: 9px;
}

.copy-brand {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.copy-brand-summary {
  min-height: 52px;
  background: #fff;
}

.copy-brand-summary > div {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.copy-brand-summary small {
  color: var(--muted);
  font-size: 11px;
}

.copy-model-grid {
  border-top: 1px solid var(--line);
  background: #f8fafc;
}

.copy-model-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-color: var(--line) !important;
  background: #fff;
}

.copy-model-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.copy-model-option small {
  border-radius: 999px;
  background: #e2e8f0;
  padding: 3px 7px;
  color: #475569;
  font-size: 10px;
  font-weight: 800;
}

.copy-source-model {
  background: #f1f5f9;
  color: #64748b;
}

.copy-drawer-footer {
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 32px rgba(15, 23, 42, .08);
}

.copy-drawer-footer > div:first-child {
  display: grid;
  gap: 2px;
}

@media (max-width: 1100px) {
  .price-filter-grid {
    grid-template-columns: 1fr 1fr;
  }

  .price-filter-grid .label:last-child {
    grid-column: 1 / -1;
  }

  .copy-drawer {
    width: 90vw;
  }

  .copy-search-toolbar {
    grid-template-columns: 1fr;
  }

  .copy-toolbar-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .copy-drawer {
    width: 100vw;
    border-radius: 0;
  }
}

@media (max-width: 680px) {
  .price-filter-grid {
    grid-template-columns: 1fr;
  }

  .price-filter-grid .label:last-child {
    grid-column: auto;
  }

  .copy-drawer-header,
  .copy-drawer-footer {
    align-items: stretch;
    padding: 12px;
  }

  .copy-drawer-header {
    align-items: flex-start;
  }

  .copy-drawer-body {
    padding: 12px 12px 22px;
  }

  .copy-toolbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .copy-toolbar-actions button {
    width: 100%;
  }

  .copy-result-summary,
  .copy-drawer-footer {
    flex-direction: column;
  }

  .copy-drawer-footer .actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .copy-drawer-footer button {
    width: 100%;
  }
}

/* ============================================================
 * PATCH_GLOBAL_POPUP_RIGHT_PANEL_20260728
 * Semua popup internal katalog menjadi panel tinggi penuh
 * yang menempel di sisi kanan. Tidak memengaruhi halaman login.
 * ============================================================ */

body.modal-open {
  overflow: hidden;
}

.modal {
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  overflow: hidden;
  background: rgba(15, 23, 42, .62) !important;
  backdrop-filter: blur(4px);
}

.modal .modal-box,
.modal .modal-box.narrow,
.modal .modal-box.copy-drawer,
.modal .modal-box.bulk-preview-box {
  width: min(82vw, 1320px) !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 100dvh;
  margin: 0 !important;
  border-radius: 14px 0 0 14px !important;
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: -22px 0 60px rgba(15, 23, 42, .24) !important;
  box-sizing: border-box;
  animation: katalog-popup-masuk-dari-kanan .18s ease-out;
}

.modal .modal-box:not(.copy-drawer):not(.bulk-preview-box) {
  display: block !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: 0 18px 18px !important;
}

.modal .modal-box:not(.copy-drawer):not(.bulk-preview-box) > .topbar:first-child {
  position: sticky;
  top: 0;
  z-index: 8;
  margin: 0 -18px 18px;
  padding: 16px 18px;
  border-bottom: 1px solid #cbd5e1;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.modal .modal-box:not(.copy-drawer):not(.bulk-preview-box) > .topbar:first-child h2,
.modal .modal-box:not(.copy-drawer):not(.bulk-preview-box) > .topbar:first-child p {
  color: #0f172a;
}

.modal .modal-box:not(.copy-drawer):not(.bulk-preview-box) > .topbar:first-child .muted {
  color: #475569;
}

.modal .modal-box:not(.copy-drawer):not(.bulk-preview-box) > .actions:last-child {
  position: sticky;
  bottom: -18px;
  z-index: 8;
  margin: 18px -18px -18px !important;
  padding: 14px 18px;
  border-top: 1px solid #cbd5e1;
  background: #ffffff;
  box-shadow: 0 -10px 24px rgba(15, 23, 42, .08);
}

.modal .bulk-preview-box {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.modal .bulk-preview-header {
  margin: 0 !important;
  padding: 16px 18px !important;
  border-bottom: 1px solid #cbd5e1;
  background: #ffffff !important;
}

.modal .bulk-preview-body {
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: 16px 18px 24px !important;
  background: #f8fafc !important;
}

.modal .bulk-preview-footer {
  margin: 0 !important;
  padding: 14px 18px !important;
  border-top: 1px solid #cbd5e1;
  background: #ffffff !important;
  box-shadow: 0 -10px 24px rgba(15, 23, 42, .08);
}

.modal .copy-drawer {
  width: min(82vw, 1320px) !important;
}

.modal .copy-drawer-header,
.modal .copy-drawer-footer {
  background: #ffffff !important;
}

.modal .copy-drawer-body {
  background: #f8fafc !important;
}

@keyframes katalog-popup-masuk-dari-kanan {
  from {
    opacity: .72;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 1100px) {
  .modal .modal-box,
  .modal .modal-box.narrow,
  .modal .modal-box.copy-drawer,
  .modal .modal-box.bulk-preview-box {
    width: 90vw !important;
  }
}

@media (max-width: 900px) {
  .modal .modal-box,
  .modal .modal-box.narrow,
  .modal .modal-box.copy-drawer,
  .modal .modal-box.bulk-preview-box {
    width: 100vw !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 680px) {
  .modal .modal-box:not(.copy-drawer):not(.bulk-preview-box) {
    padding-right: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 12px !important;
  }

  .modal .modal-box:not(.copy-drawer):not(.bulk-preview-box) > .topbar:first-child {
    margin-right: -12px;
    margin-bottom: 12px;
    margin-left: -12px;
    padding: 12px;
  }

  .modal .modal-box:not(.copy-drawer):not(.bulk-preview-box) > .actions:last-child {
    bottom: -12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: auto;
    margin-right: -12px !important;
    margin-bottom: -12px !important;
    margin-left: -12px !important;
    padding: 12px;
  }

  .modal .modal-box:not(.copy-drawer):not(.bulk-preview-box) > .actions:last-child button {
    width: 100%;
  }

  .modal .bulk-preview-header,
  .modal .bulk-preview-body,
  .modal .bulk-preview-footer {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .modal .bulk-preview-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .modal .bulk-preview-footer .actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .modal .bulk-preview-footer button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal .modal-box {
    animation: none !important;
  }
}

/* PATCH_GLOBAL_POPUP_NESTED_PANELS_20260728 */
body.catalog-nested-open{overflow:hidden}
.catalog-nested-overlay{position:fixed;inset:0;z-index:220;display:flex;align-items:stretch;justify-content:flex-end;overflow:hidden;background:rgba(15,23,42,.58);backdrop-filter:blur(3px)}
.catalog-nested-drawer{width:min(72vw,1080px);height:100dvh;max-height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border:1px solid #cbd5e1;border-right:0;border-radius:14px 0 0 14px;background:#fff;color:#0f172a;box-shadow:-26px 0 70px rgba(15,23,42,.32);animation:katalog-popup-masuk-dari-kanan .18s ease-out}
.catalog-nested-medium{width:min(64vw,920px)}.catalog-nested-narrow{width:min(52vw,720px)}
.catalog-nested-header,.catalog-nested-footer{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;padding:16px 18px}
.catalog-nested-header{border-bottom:1px solid #cbd5e1}.catalog-nested-footer{border-top:1px solid #cbd5e1;box-shadow:0 -10px 26px rgba(15,23,42,.08)}
.catalog-nested-header h2,.catalog-nested-header p{margin:0}.catalog-nested-header h2{margin-top:3px;color:#0f172a;font-size:22px}
.catalog-nested-eyebrow{color:#475569;font-size:11px;font-weight:900;letter-spacing:.06em}.catalog-nested-description{margin-top:6px!important;color:#475569;line-height:1.45}
.catalog-nested-close{width:44px;min-width:44px;height:44px;padding:0;color:#0f172a;font-size:18px}
.catalog-nested-body{min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:#f8fafc;padding:16px 18px 24px}
.catalog-nested-footer-copy{display:grid;gap:3px;color:#0f172a}.catalog-nested-footer-copy span{color:#475569;font-size:12px}
.catalog-nested-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) auto;align-items:end;gap:12px;margin-bottom:12px}
.catalog-nested-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;border:1px solid #99d8d0;border-radius:9px;background:#ecfdf5;padding:11px 12px;color:#115e59}
.catalog-model-picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.catalog-model-option{display:flex;align-items:center;gap:9px;min-width:0;min-height:56px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;padding:9px 10px;color:#0f172a;cursor:pointer}
.catalog-model-option:hover{border-color:#94a3b8;background:#f8fafc}.catalog-model-option.selected{border-color:#2dd4bf;background:#ecfdf5}.catalog-model-option.disabled{background:#f1f5f9;color:#64748b;cursor:not-allowed}
.catalog-model-copy{display:grid;min-width:0;gap:4px}.catalog-model-copy strong{overflow:hidden;color:#0f172a;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.catalog-model-status{min-height:18px}
.catalog-nested-empty{grid-column:1/-1;display:grid;gap:5px;border:1px dashed #cbd5e1;border-radius:10px;background:#fff;padding:28px;color:#475569;text-align:center}
.catalog-brand-launcher{border:1px solid #cbd5e1!important;border-radius:9px!important;background:#fff!important;overflow:hidden}
.catalog-brand-launcher>summary{display:flex!important;align-items:center;justify-content:space-between;gap:10px;min-height:58px;list-style:none;background:#f1f5f9!important;padding:10px!important;color:#0f172a;cursor:pointer}
.catalog-brand-launcher>summary::-webkit-details-marker{display:none}.catalog-brand-launcher>summary:hover{background:#e8eef5!important}
.catalog-brand-summary-copy{display:flex;align-items:center;gap:9px;min-width:0}.catalog-brand-summary-copy>span:last-child{display:grid;gap:2px;min-width:0}
.catalog-brand-summary-copy strong{color:#0f172a}.catalog-brand-summary-copy small{color:#475569}
.catalog-brand-icon{display:grid;place-items:center;width:24px;height:24px;flex:0 0 auto;border-radius:6px;background:#17243a;color:#fff;font-weight:900}
.catalog-brand-open-button,.catalog-open-choice-button{color:#0f172a;white-space:nowrap}.catalog-open-choice-button{width:100%;margin-top:7px}
.catalog-choice-list{display:grid;gap:8px;margin-top:12px}.catalog-choice-option{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;background:#fff;padding:10px 12px;text-align:left}
.catalog-choice-option>span:first-child{display:grid;gap:3px}.catalog-choice-option small{color:#475569}.catalog-choice-option.selected{border-color:#2dd4bf;background:#ecfdf5}
.catalog-detail-list{display:grid;border:1px solid #cbd5e1;border-radius:10px;background:#fff;padding:4px 14px}
.catalog-detail-row{display:grid;grid-template-columns:190px minmax(0,1fr);gap:12px;border-bottom:1px solid #e2e8f0;padding:11px 0;color:#0f172a}.catalog-detail-row:last-child{border-bottom:0}.catalog-detail-row>strong{color:#334155}
.catalog-nested-info,.catalog-nested-danger{margin-bottom:12px;border-radius:10px;padding:12px 14px;line-height:1.5}.catalog-nested-info{border:1px solid #bfdbfe;background:#eff6ff;color:#1e40af}.catalog-nested-danger{border:1px solid #fecaca;background:#fef2f2;color:#991b1b}
.catalog-bulk-field-list{display:grid;gap:12px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;padding:14px}
@media(min-width:901px){.modal .modal-box.narrow{width:min(58vw,760px)!important}}
@media(max-width:1100px){.catalog-nested-drawer,.catalog-nested-medium,.catalog-nested-narrow{width:88vw}.catalog-model-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-nested-toolbar{grid-template-columns:1fr}.catalog-nested-toolbar-actions{justify-content:flex-start}}
@media(max-width:900px){.catalog-nested-drawer,.catalog-nested-medium,.catalog-nested-narrow{width:100vw;border-radius:0}}
@media(max-width:680px){.catalog-nested-header,.catalog-nested-footer{align-items:stretch;flex-direction:column;padding:12px}.catalog-nested-header{align-items:flex-start}.catalog-nested-body{padding:12px 12px 22px}.catalog-nested-toolbar-actions,.catalog-nested-footer .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.catalog-nested-toolbar-actions button,.catalog-nested-footer .actions button{width:100%}.catalog-model-picker-grid{grid-template-columns:1fr}.catalog-detail-row{grid-template-columns:1fr;gap:4px}.catalog-brand-launcher>summary{align-items:stretch;flex-direction:column}.catalog-brand-open-button{width:100%}}
@media(prefers-reduced-motion:reduce){.catalog-nested-drawer{animation:none!important}}
/* PATCH_PRODUCT_KNOWLEDGE_KATALOG_V1 */
.knowledge-page { display: grid; gap: 14px; }
.knowledge-intro,
.knowledge-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.knowledge-intro h2,
.knowledge-editor-header h2 { margin: 2px 0 5px; }
.knowledge-layout {
  display: grid;
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.knowledge-sidebar {
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 36px);
  overflow: hidden;
}
.knowledge-list {
  display: grid;
  gap: 7px;
  max-height: calc(100vh - 150px);
  overflow: auto;
  margin-top: 10px;
  padding-right: 3px;
}
.knowledge-list-item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  text-align: left;
}
.knowledge-list-item:hover { border-color: #94d5cd; background: #f0fdfa; }
.knowledge-list-item.active {
  border-color: #5fc2b6;
  background: #e9fbf7;
  box-shadow: inset 3px 0 var(--accent);
}
.knowledge-list-item > span:first-child { min-width: 0; display: grid; gap: 3px; }
.knowledge-list-item strong { overflow-wrap: anywhere; font-size: 12px; line-height: 1.4; }
.knowledge-list-item small { color: var(--muted); font-size: 10px; }
.knowledge-list-badges { display: grid; justify-items: end; gap: 4px; flex: 0 0 auto; }
.knowledge-list-badges em {
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .04em;
}
.knowledge-list-badges .published,
.knowledge-list-badges .filled { background: #dcfce7; color: #047857; }
.knowledge-list-badges .draft { background: #fef3c7; color: #92400e; }
.knowledge-list-badges .empty { background: #e2e8f0; color: #475569; }
.knowledge-editor { min-width: 0; }
.knowledge-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 15px;
}
.knowledge-field-full { grid-column: 1 / -1; }
.knowledge-form-grid .label { display: grid; align-content: start; gap: 6px; }
.knowledge-form-grid .label small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.knowledge-textarea-large { min-height: 135px; }
.knowledge-list-textarea { min-height: 155px; }
.knowledge-visible-check {
  min-height: 44px;
  align-self: end;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f8fafc;
}
.knowledge-visible-check span { display: grid; gap: 2px; }
.knowledge-visible-check small { color: var(--muted); }
.knowledge-save-note {
  margin-top: 13px;
  padding: 11px 12px;
  border: 1px solid #bee7e1;
  border-radius: 10px;
  background: #effcf9;
  color: #315e59;
  font-size: 11px;
  line-height: 1.55;
}
.customer-knowledge-summary {
  margin: 10px 0 0;
  color: #536273;
  font-size: 11px;
  line-height: 1.55;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.customer-knowledge-button {
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid #afe3dc;
  border-radius: 9px;
  background: #e9faf7;
  color: #086b63;
  font-size: 11px;
  font-weight: 800;
}
.customer-knowledge-button:hover { border-color: #76cbc0; background: #d9f7f2; }
.knowledge-runtime-modal { z-index: 180; }
.knowledge-modal-box { width: min(920px, 100%); }
.knowledge-modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(9px);
}
.knowledge-modal-header h2 { margin: 3px 0; }
.knowledge-kicker {
  margin: 0;
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.knowledge-modal-header-actions { display: flex; align-items: center; gap: 10px; }
.knowledge-modal-price { color: var(--accent); white-space: nowrap; font-size: 18px; }
.knowledge-modal-body { padding: 18px 20px 22px; }
.knowledge-lead {
  padding: 15px;
  border: 1px solid #bee7e1;
  border-radius: 12px;
  background: linear-gradient(135deg, #eafbf8, #fff);
  color: #315e59;
  line-height: 1.7;
}
.knowledge-education-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 13px;
}
.knowledge-education-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.knowledge-education-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 13px;
}
.knowledge-education-card h3 span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 7px;
  background: #e9faf7;
  color: var(--accent);
}
.knowledge-education-card ul {
  margin: 0;
  padding-left: 19px;
  color: #475569;
  font-size: 12px;
  line-height: 1.65;
}
.knowledge-education-card li + li { margin-top: 4px; }
.knowledge-note {
  margin-top: 13px;
  padding: 13px 14px;
  border: 1px solid #f1d37b;
  border-radius: 11px;
  background: #fff9e7;
  color: #705714;
}
.knowledge-note p { margin: 5px 0 0; line-height: 1.6; }
@media (max-width: 900px) {
  .knowledge-layout { grid-template-columns: 1fr; }
  .knowledge-sidebar { position: static; max-height: none; }
  .knowledge-list { max-height: 320px; }
}
@media (max-width: 680px) {
  .knowledge-intro,
  .knowledge-editor-header,
  .knowledge-modal-header { display: grid; }
  .knowledge-form-grid,
  .knowledge-education-grid { grid-template-columns: 1fr; }
  .knowledge-field-full { grid-column: auto; }
  .knowledge-modal-header-actions { justify-content: space-between; }
}

/* PATCH_KATALOG_PUBLIC_BALI_MODERN_V4 */
.public-modern-page {
  --bali-navy: #071d24;
  --bali-teal: #0f8d83;
  --bali-teal-dark: #087269;
  --bali-teal-soft: #e7f8f5;
  --bali-gold: #b98332;
  --bali-gold-soft: #f6ead5;
  --bali-cream: #fbf8f2;
  --bali-ink: #15252b;
  --bali-muted: #65757a;
  --bali-line: #dde5e3;

  max-width: none;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  background:
    radial-gradient(circle at 12% 15%, rgba(185, 131, 50, .08), transparent 24rem),
    var(--bali-cream);
  color: var(--bali-ink);
}

.public-modern-page *,
.public-modern-page *::before,
.public-modern-page *::after {
  box-sizing: border-box;
}

.bali-public-header {
  position: sticky;
  top: 0;
  z-index: 35;
  border-bottom: 1px solid rgba(185, 131, 50, .25);
  background: rgba(255, 253, 249, .94);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(7, 29, 36, .06);
}

.bali-public-nav {
  width: min(1320px, calc(100% - 36px));
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto;
}

.bali-public-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 220px;
  color: var(--bali-ink);
  text-decoration: none;
}

.bali-public-brand > span:last-child,
.bali-footer-brand > span:last-child {
  display: grid;
  gap: 2px;
}

.bali-public-brand strong,
.bali-footer-brand strong {
  font-size: 14px;
  letter-spacing: .035em;
}

.bali-public-brand small,
.bali-footer-brand small {
  color: var(--bali-muted);
  font-size: 10px;
}

.bali-brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--bali-gold);
  border-radius: 50% 50% 44% 44%;
  background:
    radial-gradient(circle, rgba(185, 131, 50, .2), transparent 54%),
    #fffdf8;
  color: var(--bali-gold);
  font-size: 23px;
  box-shadow: 0 6px 18px rgba(185, 131, 50, .14);
}

.bali-public-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

.bali-public-links a {
  position: relative;
  padding: 26px 0 23px;
  color: #425257;
  text-decoration: none;
  font-size: 12px;
  font-weight: 750;
}

.bali-public-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 17px;
  height: 2px;
  background: var(--bali-teal);
  transition: .18s ease;
}

.bali-public-links a:hover {
  color: var(--bali-teal-dark);
}

.bali-public-links a:hover::after {
  left: 0;
  right: 0;
}

.bali-admin-link {
  padding: 9px 13px;
  border: 1px solid #cdd9d7;
  border-radius: 9px;
  background: #fff;
  color: #415156;
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
}

.bali-public-hero {
  position: relative;
  min-height: 430px;
  display: grid;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(252, 248, 240, .99) 0%, rgba(252, 248, 240, .94) 37%, rgba(7, 29, 36, .20) 68%, rgba(7, 29, 36, .08) 100%),
    url("/assets/hero-service-bali.jpg") center right / cover no-repeat;
}

.bali-public-hero::before,
.bali-public-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.bali-public-hero::before {
  width: 280px;
  height: 280px;
  left: -115px;
  top: -90px;
  border: 2px solid rgba(185, 131, 50, .25);
  border-radius: 46% 54% 52% 48%;
  transform: rotate(22deg);
  box-shadow:
    0 0 0 18px rgba(185, 131, 50, .035),
    0 0 0 38px rgba(185, 131, 50, .025);
}

.bali-public-hero::after {
  width: 190px;
  height: 190px;
  left: 18px;
  bottom: -135px;
  border: 1px solid rgba(185, 131, 50, .22);
  transform: rotate(45deg);
}

.bali-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(7,29,36,.08)),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(185,131,50,.025) 18px 19px);
  pointer-events: none;
}

.bali-hero-content {
  position: relative;
  z-index: 2;
  width: min(1320px, calc(100% - 36px));
  margin: 0 auto;
  padding: 58px 0 70px;
}

.bali-hero-content > * {
  max-width: 650px;
}

.bali-hero-greeting,
.bali-section-kicker {
  margin: 0 0 7px;
  color: var(--bali-gold);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.bali-hero-content h1 {
  margin: 0;
  color: #14282e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 5.2vw, 67px);
  line-height: .99;
  letter-spacing: -.045em;
}

.bali-hero-content > p:not(.bali-hero-greeting) {
  margin: 20px 0 0;
  color: #46585d;
  font-size: 15px;
  line-height: 1.75;
}

.bali-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}

.bali-hero-actions a {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 17px;
  border-radius: 9px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 850;
}

.bali-primary-cta {
  border: 1px solid var(--bali-teal);
  background: var(--bali-teal);
  color: #fff;
  box-shadow: 0 9px 24px rgba(15, 141, 131, .22);
}

.bali-primary-cta:hover {
  background: var(--bali-teal-dark);
}

.bali-secondary-cta {
  border: 1px solid rgba(185, 131, 50, .55);
  background: rgba(255,255,255,.72);
  color: #6f5224;
}

.bali-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: 24px;
  color: #526368;
  font-size: 11px;
  font-weight: 750;
}

.bali-public-search-wrap {
  position: relative;
  z-index: 5;
  width: min(1180px, calc(100% - 36px));
  margin: -35px auto 0;
}

.bali-public-search-card {
  display: grid;
  grid-template-columns: minmax(230px, .7fr) minmax(320px, 1.3fr);
  gap: 22px;
  align-items: center;
  padding: 19px 21px;
  border: 1px solid rgba(185, 131, 50, .28);
  border-radius: 15px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 20px 48px rgba(7,29,36,.14);
}

.bali-public-search-card h2 {
  margin: 0;
  font-size: 20px;
}

.bali-public-search-card p:not(.bali-section-kicker) {
  margin: 5px 0 0;
  color: var(--bali-muted);
  font-size: 11px;
  line-height: 1.5;
}

.bali-search-field {
  height: 50px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 15px;
  border: 1px solid #cfdad8;
  border-radius: 11px;
  background: #fbfcfc;
}

.bali-search-field > span {
  color: var(--bali-teal);
  font-size: 24px;
}

.bali-search-field input {
  width: 100%;
  height: 46px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--bali-ink);
  box-shadow: none;
}

.bali-selected-filter {
  grid-column: 1 / -1;
  margin: 0;
  border-color: #cce9e4;
  background: var(--bali-teal-soft);
}

.bali-trust-strip {
  width: min(1180px, calc(100% - 36px));
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  margin: 17px auto 0;
  overflow: hidden;
  border: 1px solid var(--bali-line);
  border-radius: 13px;
  background: #fff;
}

.bali-trust-strip > div {
  position: relative;
  min-height: 82px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  column-gap: 10px;
  padding: 14px 16px;
}

.bali-trust-strip > div + div {
  border-left: 1px solid var(--bali-line);
}

.bali-trust-strip span {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--bali-gold-soft);
  color: var(--bali-gold);
  font-size: 17px;
}

.bali-trust-strip strong {
  align-self: end;
  font-size: 11px;
}

.bali-trust-strip small {
  align-self: start;
  margin-top: 3px;
  color: var(--bali-muted);
  font-size: 9px;
  line-height: 1.4;
}

.bali-catalog-main {
  width: min(1320px, calc(100% - 36px));
  margin: 28px auto 0;
  padding-bottom: 30px;
}

.bali-catalog-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.bali-catalog-heading h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 3.2vw, 36px);
  letter-spacing: -.025em;
}

.bali-catalog-heading p:not(.bali-section-kicker) {
  max-width: 720px;
  margin: 7px 0 0;
  color: var(--bali-muted);
  font-size: 11px;
  line-height: 1.55;
}

.bali-result-count {
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: 999px;
  background: var(--bali-teal-soft);
  color: var(--bali-teal-dark);
  font-size: 10px;
  font-weight: 850;
}

.public-modern-page .customer-result,
.public-modern-page .public-model-accordion {
  overflow: hidden;
  border: 1px solid var(--bali-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(7,29,36,.045);
}

.public-modern-page .customer-header,
.public-modern-page .category-title,
.public-modern-page .public-model-accordion > summary {
  border-color: var(--bali-line);
  background: linear-gradient(90deg, rgba(231,248,245,.8), rgba(255,255,255,.98));
}

.public-modern-page .customer-clickable:hover,
.public-modern-page .public-model-accordion > summary:hover {
  background: var(--bali-teal-soft);
}

.public-modern-page .customer-price-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.public-modern-page .bali-service-card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  padding: 15px;
  border: 1px solid #dce5e3;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff, #fdfdfc);
  box-shadow: 0 6px 17px rgba(7,29,36,.045);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.public-modern-page .bali-service-card:hover {
  transform: translateY(-3px);
  border-color: #9ed6cf;
  box-shadow: 0 13px 28px rgba(7,29,36,.09);
}

.bali-service-card-top {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.bali-service-icon {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #c9e8e3;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 25%, #fff, transparent 42%),
    var(--bali-teal-soft);
  color: var(--bali-teal-dark);
  font-size: 24px;
  font-weight: 800;
}

.bali-service-identity {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.public-modern-page .bali-service-identity .service-label {
  color: var(--bali-ink);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 900;
}

.bali-service-identity small {
  color: var(--bali-muted);
  font-size: 9px;
}

.bali-service-price {
  margin-top: 15px;
  color: var(--bali-teal);
  font-size: 18px;
  font-weight: 900;
}

.public-modern-page .simple-price-secondary {
  margin-top: 6px;
  color: var(--bali-muted);
  font-size: 9px;
}

.public-modern-page .customer-knowledge-summary {
  min-height: 34px;
  margin: 10px 0 0;
  color: #5c6b70;
  font-size: 10px;
  line-height: 1.55;
}

.public-modern-page .customer-price-meta {
  margin-top: 8px;
  padding: 0;
  color: #72603c;
  font-size: 9px;
}

.public-modern-page .customer-price-meta span {
  border-color: #ead5ad;
  background: #fffaf0;
  color: #7a5a21;
}

.public-modern-page .customer-knowledge-button {
  min-height: 36px;
  margin-top: auto;
  border: 1px solid rgba(185,131,50,.52);
  border-radius: 9px;
  background: #fff;
  color: #76531c;
  font-size: 10px;
  font-weight: 850;
}

.public-modern-page .customer-knowledge-button:hover {
  border-color: var(--bali-teal);
  background: var(--bali-teal-soft);
  color: var(--bali-teal-dark);
}

.public-modern-page .public-pagination {
  margin-top: 14px;
  border-color: var(--bali-line);
  border-radius: 12px;
  box-shadow: 0 5px 16px rgba(7,29,36,.04);
}

.public-modern-error {
  border-radius: 12px;
}

.bali-about-band {
  position: relative;
  width: min(1180px, calc(100% - 36px));
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 8px auto 34px;
  overflow: hidden;
  padding: 23px 25px;
  border: 1px solid rgba(185,131,50,.34);
  border-radius: 15px;
  background: linear-gradient(110deg, #fffaf1, #fff 52%, #eaf9f7);
}

.bali-about-band::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -110px;
  top: -95px;
  border: 1px solid rgba(185,131,50,.25);
  transform: rotate(45deg);
}

.bali-about-symbol {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid var(--bali-gold);
  border-radius: 50%;
  color: var(--bali-gold);
  font-size: 28px;
}

.bali-about-band h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
}

.bali-about-band p:not(.bali-section-kicker) {
  max-width: 750px;
  margin: 6px 0 0;
  color: var(--bali-muted);
  font-size: 11px;
  line-height: 1.6;
}

.bali-about-greeting {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: end;
  gap: 4px;
  color: #795b27;
}

.bali-about-greeting span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
}

.bali-about-greeting small {
  color: var(--bali-muted);
  font-size: 9px;
}

.bali-public-footer {
  position: relative;
  min-height: 110px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 24px max(24px, calc((100% - 1284px) / 2));
  overflow: hidden;
  border-top: 1px solid rgba(185,131,50,.48);
  background:
    radial-gradient(circle at 5% 100%, rgba(185,131,50,.18), transparent 18rem),
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(185,131,50,.025) 22px 23px),
    var(--bali-navy);
  color: #e9f1ef;
}

.bali-public-footer::before,
.bali-public-footer::after {
  content: "✦";
  position: absolute;
  color: rgba(185,131,50,.23);
  font-size: 85px;
}

.bali-public-footer::before {
  left: -17px;
  bottom: -34px;
}

.bali-public-footer::after {
  right: -12px;
  top: -35px;
}

.bali-footer-brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.bali-public-footer p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #aebdb9;
  font-size: 10px;
  line-height: 1.55;
  text-align: center;
}

.bali-public-footer a {
  position: relative;
  z-index: 1;
  color: #e7c485;
  text-decoration: none;
  font-size: 10px;
  font-weight: 800;
}

.knowledge-runtime-modal .knowledge-modal-box {
  border: 1px solid rgba(185,131,50,.4);
  background: #fffdf9;
}

.knowledge-runtime-modal .knowledge-modal-header {
  border-bottom-color: #e8dcc6;
  background: rgba(255,253,249,.97);
}

.knowledge-runtime-modal .knowledge-kicker,
.knowledge-runtime-modal .knowledge-modal-price {
  color: #087269;
}

.knowledge-runtime-modal .knowledge-lead {
  border-color: #cce9e4;
  background: linear-gradient(135deg, #eafbf8, #fffaf1);
}

.knowledge-runtime-modal .knowledge-education-card h3 span {
  background: #e7f8f5;
  color: #087269;
}

.knowledge-runtime-modal .knowledge-note {
  border-color: #e8c98e;
  background: #fff8e9;
}

@media (max-width: 1050px) {
  .bali-public-links {
    display: none;
  }

  .public-modern-page .customer-price-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

@media (max-width: 820px) {
  .bali-public-hero {
    min-height: 520px;
    align-items: end;
    background:
      linear-gradient(180deg, rgba(252,248,240,.18), rgba(252,248,240,.98) 56%, #fcf8f0 100%),
      url("/assets/hero-service-bali.jpg") top center / auto 260px no-repeat;
  }

  .bali-hero-content {
    padding: 245px 0 76px;
  }

  .bali-hero-content h1 {
    max-width: 620px;
    font-size: clamp(35px, 9vw, 54px);
  }

  .bali-public-search-card {
    grid-template-columns: 1fr;
  }

  .bali-trust-strip {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .bali-trust-strip > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--bali-line);
  }

  .bali-trust-strip > div:nth-child(4) {
    border-top: 1px solid var(--bali-line);
  }

  .public-modern-page .customer-price-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .bali-about-band {
    grid-template-columns: auto 1fr;
  }

  .bali-about-greeting {
    grid-column: 1 / -1;
    justify-items: start;
    padding-left: 76px;
  }

  .bali-public-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .bali-public-nav {
    width: min(100% - 20px, 1320px);
    min-height: 64px;
  }

  .bali-public-brand {
    min-width: 0;
  }

  .bali-public-brand strong {
    font-size: 11px;
  }

  .bali-admin-link {
    padding: 8px 9px;
    font-size: 9px;
  }

  .bali-brand-mark {
    width: 36px;
    height: 36px;
  }

  .bali-public-hero {
    min-height: 565px;
  }

  .bali-hero-content,
  .bali-public-search-wrap,
  .bali-trust-strip,
  .bali-catalog-main,
  .bali-about-band {
    width: min(100% - 18px, 1320px);
  }

  .bali-hero-content {
    padding-top: 250px;
  }

  .bali-hero-content > p:not(.bali-hero-greeting) {
    font-size: 13px;
  }

  .bali-hero-actions {
    display: grid;
  }

  .bali-hero-points {
    display: grid;
    gap: 8px;
  }

  .bali-public-search-card {
    padding: 16px;
  }

  .bali-trust-strip {
    grid-template-columns: 1fr;
  }

  .bali-trust-strip > div + div,
  .bali-trust-strip > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--bali-line);
  }

  .bali-catalog-heading {
    display: grid;
    align-items: start;
  }

  .bali-result-count {
    width: max-content;
  }

  .public-modern-page .customer-price-grid {
    grid-template-columns: 1fr;
  }

  .public-modern-page .bali-service-card {
    min-height: 195px;
  }

  .bali-about-band {
    grid-template-columns: 1fr;
  }

  .bali-about-greeting {
    grid-column: auto;
    padding-left: 0;
  }
}


/* V6B_CATALOG_WEBSITE_ADMIN */
.site-admin-page { display:grid; gap:16px; }
.site-admin-intro { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 22px; }
.site-admin-intro h2, .site-section-heading h2 { margin:2px 0 5px; }
.site-status-stack { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.site-admin-toolbar { position:sticky; top:8px; z-index:16; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:10px; box-shadow:0 10px 26px rgba(15,23,42,.08); }
.site-admin-tabs { display:flex; flex-wrap:wrap; gap:5px; }
.site-admin-tabs button { min-height:36px; padding:7px 11px; border:1px solid transparent; background:transparent; color:#52616a; }
.site-admin-tabs button.active { border-color:#0f8d83; background:#e7f8f5; color:#087269; }
.site-admin-layout { display:grid; grid-template-columns:minmax(0,1fr) 275px; gap:16px; align-items:start; }
.site-admin-forms { min-width:0; }
.site-section { display:none; padding:22px; }
.site-section.active { display:block; }
.site-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid #e7eceb; }
.site-section-heading > div > p { margin:0; }
.site-form-grid, .site-branch-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.site-field-wide { grid-column:1/-1; }
.site-media-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:18px; }
.site-media-grid.single { grid-template-columns:minmax(0,640px); }
.site-media-tile { display:grid; grid-template-columns:150px minmax(0,1fr); gap:15px; padding:14px; border:1px solid #dce5e3; border-radius:14px; background:#fbfdfc; }
.site-media-visual { min-height:125px; display:grid; place-items:center; overflow:hidden; border:1px dashed #b8cbc7; border-radius:12px; background:#edf8f6; color:#0f8d83; font-size:34px; }
.site-media-visual img { width:100%; height:100%; object-fit:cover; }
.site-media-copy { display:grid; align-content:start; gap:7px; min-width:0; }
.site-media-copy p, .site-media-copy small { margin:0; color:#68777b; line-height:1.45; }
.site-media-copy input[type=file] { width:100%; font-size:11px; }
.site-theme-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.site-color-field { display:grid; grid-template-columns:auto 50px 1fr; align-items:center; gap:9px; padding:12px; border:1px solid #dce5e3; border-radius:12px; }
.site-color-field span { font-weight:800; font-size:12px; }
.site-color-field input[type=color] { width:48px; height:38px; padding:2px; }
.site-section-switches { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:18px; }
.site-branches-list { display:grid; gap:15px; }
.site-empty-branches { min-height:160px; display:grid; place-items:center; align-content:center; gap:5px; border:1px dashed #b8c8c5; border-radius:14px; color:#68777b; }
.site-branch-card { padding:16px; border:1px solid #dce5e3; border-radius:14px; background:#fbfdfc; }
.site-branch-heading { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:10px; margin-bottom:14px; }
.site-branch-heading > span { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:#e7f8f5; color:#087269; font-weight:900; }
.site-branch-heading > div { display:grid; gap:2px; }
.site-branch-heading small { color:#718085; }
.site-branch-media { display:grid; grid-template-columns:130px 1fr auto; align-items:end; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid #e6ecea; }
.site-branch-media > img, .site-branch-media > div { width:130px; height:82px; object-fit:cover; display:grid; place-items:center; border-radius:10px; background:#edf3f2; color:#718085; text-align:center; font-size:10px; }
.site-service-search { min-width:260px; }
.site-service-media-list { display:grid; gap:10px; }
.site-service-media-row { display:grid; grid-template-columns:74px minmax(130px,.8fr) minmax(190px,1.2fr) 135px 115px minmax(190px,1fr); gap:10px; align-items:center; padding:11px; border:1px solid #dfe7e5; border-radius:13px; background:#fff; }
.site-service-media-row[hidden] { display:none; }
.site-service-media-image { width:72px; height:62px; display:grid; place-items:center; overflow:hidden; border-radius:10px; background:#e7f8f5; color:#087269; font-size:24px; }
.site-service-media-image img { width:100%; height:100%; object-fit:cover; }
.site-service-media-name { display:grid; gap:3px; }
.site-service-media-name small { color:#718085; }
.site-service-media-row .label { margin:0; }
.site-service-media-actions { display:flex; flex-wrap:wrap; gap:6px; }
.site-service-media-actions input { width:100%; font-size:10px; }
.checkline.compact { min-height:42px; padding:7px; }
.site-admin-summary { position:sticky; top:82px; padding:18px; }
.site-admin-summary h3 { margin:4px 0 15px; }
.site-admin-summary dl { display:grid; gap:10px; margin:0 0 15px; }
.site-admin-summary dl > div { display:grid; gap:3px; padding-bottom:9px; border-bottom:1px solid #e8eceb; }
.site-admin-summary dt { color:#718085; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.site-admin-summary dd { margin:0; font-size:11px; line-height:1.45; }
.site-admin-note { margin:14px 0 0; padding:11px; border-radius:10px; background:#fff8e9; color:#73581f; font-size:10px; line-height:1.5; }
.site-preview-mode { display:flex; gap:6px; }
.site-preview-mode button.active { background:#0f8d83; color:#fff; border-color:#0f8d83; }
.site-preview-canvas { display:grid; place-items:start center; min-height:620px; overflow:auto; padding:25px; border-radius:15px; background:#e8eeed; }
.site-preview-page { width:min(100%,1000px); overflow:hidden; border-radius:13px; background:#fff; box-shadow:0 20px 55px rgba(7,29,36,.18); transition:width .2s ease; }
.site-preview-canvas.mobile .site-preview-page { width:390px; }
.site-preview-page header { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px 22px; border-bottom:1px solid #e6eceb; }
.site-preview-brand { display:flex; align-items:center; gap:9px; }
.site-preview-brand > img, .site-preview-brand > span { width:38px; height:38px; object-fit:cover; display:grid; place-items:center; border-radius:10px; background:var(--preview-primary); color:#fff; font-weight:900; }
.site-preview-brand div { display:grid; gap:1px; }
.site-preview-brand small { color:#718085; }
.site-preview-page nav { display:flex; gap:15px; color:#536368; font-size:10px; font-weight:800; }
.site-preview-hero { min-height:310px; display:grid; align-items:center; padding:38px; background-size:cover; background-position:center; }
.site-preview-hero > div { max-width:580px; }
.site-preview-hero small { color:var(--preview-accent); font-weight:900; text-transform:uppercase; letter-spacing:.1em; }
.site-preview-hero h2 { margin:8px 0; font-family:Georgia,serif; font-size:38px; line-height:1.05; }
.site-preview-hero strong { display:block; color:var(--preview-primary); font-size:20px; }
.site-preview-hero p { color:#57676b; line-height:1.6; }
.site-preview-hero button { margin-right:7px; background:var(--preview-primary); color:#fff; border-color:var(--preview-primary); }
.site-preview-hero button.outline { background:#fff; color:var(--preview-primary); }
.site-preview-promo { display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:center; margin:18px; padding:14px; border:1px solid color-mix(in srgb,var(--preview-accent) 45%,#fff); border-radius:12px; background:#fffaf0; }
.site-preview-promo img { width:120px; height:80px; object-fit:cover; border-radius:9px; }
.site-preview-promo div { display:grid; gap:4px; }
.site-preview-promo small { color:var(--preview-accent); font-weight:900; }
.site-preview-services, .site-preview-branches { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:18px; }
.site-preview-services article, .site-preview-branches article { display:grid; gap:5px; padding:14px; border:1px solid #e1e8e6; border-radius:11px; }
.site-preview-services span { color:var(--preview-primary); font-size:22px; }
.site-preview-services small, .site-preview-branches small, .site-preview-branches span { color:#718085; }
.site-preview-page footer { display:flex; justify-content:space-between; gap:16px; padding:20px; background:#071d24; color:#fff; }
.site-preview-canvas.mobile .site-preview-page nav { display:none; }
.site-preview-canvas.mobile .site-preview-hero { min-height:360px; padding:25px; }
.site-preview-canvas.mobile .site-preview-hero h2 { font-size:31px; }
.site-preview-canvas.mobile .site-preview-services, .site-preview-canvas.mobile .site-preview-branches { grid-template-columns:1fr; }
.site-preview-canvas.mobile .site-preview-promo { grid-template-columns:1fr; }
.site-preview-canvas.mobile .site-preview-promo img { width:100%; height:130px; }
.knowledge-media-editor { display:grid; grid-template-columns:minmax(240px,.85fr) minmax(300px,1.15fr); gap:16px; margin:16px 0 20px; padding:15px; border:1px solid #dce6e4; border-radius:14px; background:#fbfdfc; }
.knowledge-media-preview { min-height:225px; display:grid; place-items:center; overflow:hidden; border:1px dashed #b8cbc7; border-radius:12px; background:#edf6f4; }
.knowledge-media-preview img { width:100%; height:100%; min-height:225px; object-fit:cover; }
.knowledge-media-preview > div { display:grid; justify-items:center; gap:5px; max-width:240px; color:#68777b; text-align:center; }
.knowledge-media-fields { display:grid; align-content:start; gap:10px; }
.knowledge-media-fields h3 { margin:2px 0; }
.knowledge-media-options { display:grid; grid-template-columns:160px 1fr; gap:10px; align-items:end; }
.knowledge-list-badges em.photo { background:#e7f8f5; color:#087269; }
.knowledge-media-hero { margin:0 0 15px; overflow:hidden; border-radius:13px; }
.knowledge-media-hero img { width:100%; max-height:330px; object-fit:cover; display:block; }
.customer-service-photo { height:125px; margin:-15px -15px 13px; overflow:hidden; border-radius:12px 12px 0 0; background:#edf5f3; }
.customer-service-photo img { width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width: 1200px) {
  .site-admin-layout { grid-template-columns:1fr; }
  .site-admin-summary { position:static; }
  .site-service-media-row { grid-template-columns:70px minmax(150px,1fr) minmax(190px,1.2fr) 130px; }
  .site-service-media-row .checkline, .site-service-media-actions { grid-column:span 2; }
}
@media (max-width: 820px) {
  .site-admin-intro, .site-admin-toolbar, .site-section-heading { align-items:stretch; flex-direction:column; }
  .site-admin-toolbar { position:static; }
  .site-admin-tabs { overflow:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .site-admin-tabs button { flex:0 0 auto; }
  .site-form-grid, .site-branch-grid, .site-theme-grid, .site-section-switches, .site-media-grid { grid-template-columns:1fr; }
  .site-media-tile, .knowledge-media-editor { grid-template-columns:1fr; }
  .site-branch-media { grid-template-columns:1fr; align-items:stretch; }
  .site-branch-media > img, .site-branch-media > div { width:100%; height:150px; }
  .site-service-media-row { grid-template-columns:68px 1fr; align-items:start; }
  .site-service-media-row .label, .site-service-media-row .checkline, .site-service-media-actions { grid-column:1/-1; }
  .site-preview-canvas { padding:10px; }
  .site-preview-canvas.desktop .site-preview-page { min-width:760px; }
  .knowledge-media-options { grid-template-columns:1fr; }
}

/* V6C_PUBLIC_SITE_RENDER */
.public-v6c-page{--public-primary:#0f8d83;--public-accent:#b98332;--public-bg:#fbf8f2;--public-surface:#fff;--public-ink:#13262c;--public-muted:#65767b;--public-line:#dce5e3;min-height:100vh;margin:0;padding:0;background:var(--public-bg);color:var(--public-ink)}
.public-v6c-page.public-theme-dark{--public-bg:#071d24;--public-surface:#0d2b33;--public-ink:#f2f6f5;--public-muted:#a9bbb8;--public-line:#27444a;color-scheme:dark}
.public-customer-mode{margin:0;background:var(--public-bg,#fbf8f2)}
.public-v6c-header{position:sticky;top:0;z-index:40;border-bottom:1px solid color-mix(in srgb,var(--public-accent) 28%,transparent);background:color-mix(in srgb,var(--public-surface) 94%,transparent);backdrop-filter:blur(15px);box-shadow:0 8px 28px rgba(7,29,36,.07)}
.public-v6c-nav{width:min(1320px,calc(100% - 36px));min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:22px;margin:auto}
.public-v6c-brand,.public-v6c-footer .public-v6c-brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none}.public-v6c-brand img{width:46px;height:46px;object-fit:contain;border-radius:10px}.public-v6c-brand>span:last-child{display:grid;gap:2px}.public-v6c-brand strong{font-size:14px;letter-spacing:.035em}.public-v6c-brand small{font-size:10px;color:var(--public-muted)}
.public-v6c-brand-mark{width:43px;height:43px;display:grid;place-items:center;border:1px solid var(--public-accent);border-radius:50%;color:var(--public-accent);background:color-mix(in srgb,var(--public-accent) 9%,var(--public-surface));font-size:22px}
.public-v6c-nav nav{display:flex;gap:24px}.public-v6c-nav nav a{color:var(--public-muted);font-size:11px;font-weight:800;text-decoration:none}.public-v6c-nav nav a:hover{color:var(--public-primary)}
.public-v6c-header-actions{display:flex;gap:8px}.public-v6c-header-actions a{padding:9px 12px;border-radius:9px;font-size:10px;font-weight:850;text-decoration:none}.public-v6c-wa{background:var(--public-primary);color:#fff}.public-v6c-admin{border:1px solid var(--public-line);color:var(--public-muted);background:var(--public-surface)}
.public-v6c-hero{position:relative;min-height:470px;display:grid;align-items:center;overflow:hidden;background:linear-gradient(90deg,color-mix(in srgb,var(--public-bg) 98%,transparent) 0%,color-mix(in srgb,var(--public-bg) 91%,transparent) 42%,rgba(7,29,36,.22) 72%,rgba(7,29,36,.08) 100%),var(--public-hero-image) center right/cover no-repeat}
.public-v6c-hero-shade{position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 20px,color-mix(in srgb,var(--public-accent) 3%,transparent) 20px 21px)}
.public-v6c-page:not(.public-no-ornament) .public-v6c-hero:before{content:"✦";position:absolute;left:-25px;top:-55px;color:color-mix(in srgb,var(--public-accent) 22%,transparent);font-size:190px;transform:rotate(16deg)}
.public-v6c-hero-content{position:relative;z-index:2;width:min(1320px,calc(100% - 36px));margin:auto;padding:65px 0 78px}.public-v6c-hero-content>*{max-width:650px}.public-v6c-kicker{margin:0 0 8px;color:var(--public-accent);font-size:10px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.public-v6c-hero h1{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(40px,5.4vw,70px);line-height:1;letter-spacing:-.045em;color:var(--public-ink)}.public-v6c-hero h1 em{color:var(--public-primary);font-style:normal}.public-v6c-hero-content>p:not(.public-v6c-kicker){margin:20px 0 0;font-size:15px;line-height:1.75;color:var(--public-muted)}
.public-v6c-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}.public-v6c-hero-actions a{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border-radius:9px;font-size:12px;font-weight:850;text-decoration:none}.public-v6c-primary{background:var(--public-primary);color:#fff;box-shadow:0 9px 24px color-mix(in srgb,var(--public-primary) 24%,transparent)}.public-v6c-secondary{border:1px solid color-mix(in srgb,var(--public-accent) 58%,transparent);background:color-mix(in srgb,var(--public-surface) 78%,transparent);color:var(--public-accent)}.public-v6c-hours{display:block;margin-top:20px;color:var(--public-muted);font-size:10px;font-weight:750}
.public-promo-band{width:min(1180px,calc(100% - 36px));display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;margin:-34px auto 0;position:relative;z-index:6;padding:18px 21px;border:1px solid color-mix(in srgb,var(--public-accent) 38%,transparent);border-radius:15px;background:var(--public-surface);box-shadow:0 18px 42px rgba(7,29,36,.13)}.public-promo-band img{width:88px;height:64px;object-fit:cover;border-radius:10px}.public-promo-symbol{width:58px;height:58px;display:grid;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--public-accent) 13%,var(--public-surface));color:var(--public-accent);font-size:26px;font-weight:900}.public-promo-band h2{margin:0;font-size:21px}.public-promo-band p:not(.public-v6c-kicker){margin:5px 0 0;color:var(--public-muted);font-size:11px}.public-promo-band>a{padding:10px 14px;border-radius:9px;background:var(--public-accent);color:#fff;text-decoration:none;font-size:11px;font-weight:850}
.public-v6c-search-wrap{width:min(1180px,calc(100% - 36px));margin:24px auto 0}.public-v6c-search-card{display:grid;grid-template-columns:minmax(240px,.75fr) minmax(330px,1.25fr);align-items:center;gap:22px;padding:21px;border:1px solid var(--public-line);border-radius:15px;background:var(--public-surface);box-shadow:0 14px 34px rgba(7,29,36,.08)}.public-v6c-search-card h2{margin:0;font-size:22px}.public-v6c-search-card p:not(.public-v6c-kicker){margin:5px 0 0;color:var(--public-muted);font-size:11px}.public-v6c-search-card>label{height:52px;display:flex;align-items:center;gap:10px;padding:0 15px;border:1px solid var(--public-line);border-radius:11px;background:color-mix(in srgb,var(--public-bg) 65%,var(--public-surface))}.public-v6c-search-card>label span{font-size:23px;color:var(--public-primary)}.public-v6c-search-card input{width:100%;height:48px;border:0;outline:0;background:transparent;color:var(--public-ink);box-shadow:none}.public-v6c-selected{grid-column:1/-1;margin:0;background:color-mix(in srgb,var(--public-primary) 8%,var(--public-surface));border-color:color-mix(in srgb,var(--public-primary) 25%,var(--public-line))}
.public-v6c-benefits{width:min(1180px,calc(100% - 36px));display:grid;grid-template-columns:repeat(4,1fr);margin:17px auto 0;border:1px solid var(--public-line);border-radius:13px;background:var(--public-surface);overflow:hidden}.public-v6c-benefits article{min-height:86px;display:flex;align-items:center;gap:11px;padding:15px}.public-v6c-benefits article+article{border-left:1px solid var(--public-line)}.public-v6c-benefits article>span{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:color-mix(in srgb,var(--public-accent) 13%,var(--public-surface));color:var(--public-accent);font-weight:900}.public-v6c-benefits article div{display:grid;gap:3px}.public-v6c-benefits strong{font-size:11px}.public-v6c-benefits small{font-size:9px;line-height:1.45;color:var(--public-muted)}
.public-v6c-catalog,.public-v6c-branches,.public-v6c-contact{width:min(1320px,calc(100% - 36px));margin:34px auto 0}.public-v6c-heading,.public-v6c-section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:15px}.public-v6c-heading h2,.public-v6c-section-heading h2,.public-v6c-contact h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(26px,3.3vw,38px)}.public-v6c-heading p:not(.public-v6c-kicker),.public-v6c-section-heading p:not(.public-v6c-kicker){margin:7px 0 0;color:var(--public-muted);font-size:11px;line-height:1.55}.public-v6c-heading>span{padding:8px 11px;border-radius:999px;background:color-mix(in srgb,var(--public-primary) 10%,var(--public-surface));color:var(--public-primary);font-size:10px;font-weight:850}
.public-v6c-page .customer-result,.public-v6c-page .public-model-accordion{border-color:var(--public-line);background:var(--public-surface);color:var(--public-ink)}.public-v6c-page .customer-header,.public-v6c-page .category-title,.public-v6c-page .public-model-accordion>summary{border-color:var(--public-line);background:linear-gradient(90deg,color-mix(in srgb,var(--public-primary) 9%,var(--public-surface)),var(--public-surface))}.public-v6c-page .customer-price-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.public-v6c-page .bali-service-card{border-color:var(--public-line);background:var(--public-surface);color:var(--public-ink)}.public-v6c-page .bali-service-icon{background:color-mix(in srgb,var(--public-primary) 10%,var(--public-surface));color:var(--public-primary);border-color:color-mix(in srgb,var(--public-primary) 28%,var(--public-line))}.public-v6c-page .bali-service-price{color:var(--public-primary)}.public-v6c-page .customer-knowledge-button{border-color:color-mix(in srgb,var(--public-accent) 52%,var(--public-line));color:var(--public-accent);background:var(--public-surface)}
.public-v6c-branches{padding:28px;border:1px solid var(--public-line);border-radius:17px;background:var(--public-surface)}.public-v6c-section-heading>div:last-child{display:grid;justify-items:end;gap:5px}.public-v6c-section-heading button{padding:10px 13px;border:1px solid var(--public-primary);border-radius:9px;background:var(--public-primary);color:#fff;font-size:10px;font-weight:850}.public-v6c-section-heading small{color:var(--public-muted);font-size:9px}.public-v6c-branch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.public-branch-card{overflow:hidden;border:1px solid var(--public-line);border-radius:13px;background:color-mix(in srgb,var(--public-bg) 45%,var(--public-surface));transition:.18s}.public-branch-card.is-nearest{border-color:var(--public-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--public-primary) 14%,transparent)}.public-branch-card figure{height:145px;margin:0}.public-branch-card figure img{width:100%;height:100%;object-fit:cover}.public-branch-placeholder{height:110px;display:grid;place-items:center;background:color-mix(in srgb,var(--public-primary) 9%,var(--public-surface));color:var(--public-primary);font-size:34px}.public-branch-content{display:grid;gap:8px;padding:15px}.public-nearest-badge{width:max-content;padding:4px 7px;border-radius:999px;background:var(--public-primary);color:#fff;font-size:8px;font-weight:900}.public-branch-content h3{margin:0;font-size:15px}.public-branch-content p{margin:0;color:var(--public-muted);font-size:10px;line-height:1.55}.public-branch-content small{color:var(--public-muted);font-size:9px}.public-branch-actions{display:flex;flex-wrap:wrap;gap:6px}.public-branch-actions a{padding:7px 9px;border:1px solid var(--public-line);border-radius:8px;color:var(--public-primary);text-decoration:none;font-size:9px;font-weight:800;background:var(--public-surface)}
.public-v6c-contact{display:grid;grid-template-columns:1.1fr .9fr .7fr;align-items:center;gap:24px;padding:28px;border:1px solid color-mix(in srgb,var(--public-accent) 35%,var(--public-line));border-radius:17px;background:linear-gradient(115deg,color-mix(in srgb,var(--public-accent) 8%,var(--public-surface)),var(--public-surface) 56%,color-mix(in srgb,var(--public-primary) 8%,var(--public-surface)))}.public-v6c-contact>div>p:not(.public-v6c-kicker){color:var(--public-muted);font-size:11px;line-height:1.6}.public-contact-buttons{display:flex;gap:8px;margin-top:15px}.public-contact-buttons a{padding:10px 13px;border-radius:9px;text-decoration:none;font-size:10px;font-weight:850}.public-contact-primary{background:var(--public-primary);color:#fff}.public-contact-secondary{border:1px solid var(--public-line);color:var(--public-primary);background:var(--public-surface)}.public-v6c-contact dl{display:grid;gap:8px;margin:0}.public-v6c-contact dl div{display:grid;gap:2px}.public-v6c-contact dt{font-size:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--public-accent)}.public-v6c-contact dd{margin:0;font-size:11px}.public-v6c-social{display:grid;gap:7px}.public-v6c-social a{color:var(--public-primary);font-size:10px;font-weight:800;text-decoration:none}
.public-v6c-footer{min-height:115px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;margin-top:36px;padding:25px max(24px,calc((100% - 1284px)/2));border-top:1px solid color-mix(in srgb,var(--public-accent) 48%,transparent);background:#071d24;color:#eaf2f0}.public-v6c-footer p{margin:0;color:#aebdb9;font-size:10px;line-height:1.55;text-align:center}.public-v6c-footer>a{color:#e8c884;font-size:10px;font-weight:800;text-decoration:none}.public-v6c-footer .public-v6c-brand small{color:#aebdb9}
.public-customer-mode .knowledge-runtime-modal{align-items:stretch;justify-content:flex-end;padding:0;background:rgba(7,29,36,.55)}.public-customer-mode .knowledge-runtime-modal .knowledge-modal-box{width:min(590px,100%);max-width:590px;height:100vh;max-height:none;margin:0;border-radius:18px 0 0 18px;overflow:auto;animation:publicDrawerIn .2s ease}.public-customer-mode .knowledge-runtime-modal .knowledge-modal-header{position:sticky;top:0;z-index:2}.public-customer-mode .knowledge-runtime-modal .knowledge-media-hero{height:245px}.public-customer-mode .knowledge-runtime-modal .knowledge-media-hero img{width:100%;height:100%;object-fit:cover}@keyframes publicDrawerIn{from{transform:translateX(35px);opacity:.65}to{transform:none;opacity:1}}
@media(max-width:1050px){.public-v6c-nav nav{display:none}.public-v6c-page .customer-price-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.public-v6c-branch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.public-v6c-hero{min-height:560px;align-items:end;background:linear-gradient(180deg,rgba(7,29,36,.08),color-mix(in srgb,var(--public-bg) 97%,transparent) 52%,var(--public-bg) 100%),var(--public-hero-image) top center/auto 280px no-repeat}.public-v6c-hero-content{padding:265px 0 70px}.public-promo-band{grid-template-columns:auto 1fr}.public-promo-band>a{grid-column:1/-1;text-align:center}.public-v6c-search-card{grid-template-columns:1fr}.public-v6c-benefits{grid-template-columns:repeat(2,1fr)}.public-v6c-benefits article:nth-child(3){border-left:0;border-top:1px solid var(--public-line)}.public-v6c-benefits article:nth-child(4){border-top:1px solid var(--public-line)}.public-v6c-page .customer-price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.public-v6c-contact{grid-template-columns:1fr 1fr}.public-v6c-social{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px}.public-v6c-footer{grid-template-columns:1fr;justify-items:center;text-align:center}}
@media(max-width:560px){.public-v6c-nav{width:calc(100% - 20px);min-height:64px}.public-v6c-brand strong{font-size:12px}.public-v6c-header-actions .public-v6c-admin{display:none}.public-v6c-hero-content,.public-v6c-search-wrap,.public-v6c-benefits,.public-v6c-catalog,.public-v6c-branches,.public-v6c-contact{width:calc(100% - 18px)}.public-v6c-hero h1{font-size:clamp(36px,10vw,52px)}.public-v6c-hero-actions{display:grid}.public-promo-band{width:calc(100% - 18px);grid-template-columns:1fr;margin-top:-25px}.public-promo-band img,.public-promo-symbol{width:100%;height:115px}.public-v6c-benefits{grid-template-columns:1fr}.public-v6c-benefits article+article,.public-v6c-benefits article:nth-child(3){border-left:0;border-top:1px solid var(--public-line)}.public-v6c-heading,.public-v6c-section-heading{display:grid;align-items:start}.public-v6c-page .customer-price-grid{grid-template-columns:1fr}.public-v6c-branches{padding:18px}.public-v6c-branch-grid{grid-template-columns:1fr}.public-v6c-section-heading>div:last-child{justify-items:start}.public-v6c-contact{grid-template-columns:1fr;padding:20px}.public-v6c-social{grid-column:auto}.public-customer-mode .knowledge-runtime-modal{align-items:flex-end}.public-customer-mode .knowledge-runtime-modal .knowledge-modal-box{width:100%;height:min(88vh,780px);border-radius:18px 18px 0 0;animation:publicSheetIn .2s ease}@keyframes publicSheetIn{from{transform:translateY(30px);opacity:.65}to{transform:none;opacity:1}}}



/* V6D_SERVICE_BACKGROUND_AND_KNOWLEDGE_IMPORT */
.knowledge-intro-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.knowledge-intro-actions button{white-space:nowrap}
.knowledge-import-download{width:max-content;max-width:100%;display:inline-flex;margin:0 0 12px;padding:9px 11px;border:1px solid #9fd8d1;border-radius:9px;background:#effbf8;color:#08756d;text-decoration:none;font-size:11px;font-weight:850}.knowledge-import-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.knowledge-import-card{padding:16px;border:1px solid #dce6e4;border-radius:14px;background:#fbfdfc}.knowledge-import-card h3{margin:0 0 13px}.knowledge-import-wide{grid-column:1/-1}.knowledge-import-safety{margin-top:12px}.knowledge-import-summary{min-height:94px}.knowledge-import-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.knowledge-import-stats span{display:grid;gap:3px;padding:12px;border:1px solid #dce6e4;border-radius:11px;background:#fff;text-align:center}.knowledge-import-stats strong{font-size:22px}.knowledge-import-stats small{color:#6b7d80;font-size:10px}.knowledge-import-stats .is-ok{border-color:#8bd8c8;background:#effbf7}.knowledge-import-stats .has-issue{border-color:#e9aeae;background:#fff3f3}.knowledge-import-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.knowledge-import-columns>div{padding:13px;border:1px solid #dce6e4;border-radius:12px;background:#fff}.knowledge-import-columns h4{margin:0 0 8px}.knowledge-import-columns ul{max-height:240px;margin:0;padding-left:18px;overflow:auto;color:#52666a;font-size:12px;line-height:1.65}
.public-v6c-page .bali-service-card.service-photo-background{position:relative;isolation:isolate;min-height:310px;overflow:hidden;border-color:color-mix(in srgb,var(--public-primary) 40%,var(--public-line));background:transparent;color:#fff;box-shadow:0 14px 30px rgba(6,29,34,.18)}.public-v6c-page .bali-service-card.service-photo-background::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--service-card-image);background-position:center;background-size:cover;transition:transform .25s ease}.public-v6c-page .bali-service-card.service-photo-background::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,23,28,.12) 0%,rgba(5,23,28,.30) 38%,rgba(5,23,28,.94) 100%)}.public-v6c-page .bali-service-card.service-photo-background:hover::before{transform:scale(1.035)}.public-v6c-page .service-photo-background .bali-service-card-top{margin-top:auto}.public-v6c-page .service-photo-background .bali-service-icon{background:rgba(255,255,255,.88);color:var(--public-primary);border-color:rgba(255,255,255,.7);backdrop-filter:blur(7px)}.public-v6c-page .service-photo-background .service-label,.public-v6c-page .service-photo-background .bali-service-identity small,.public-v6c-page .service-photo-background .customer-knowledge-summary,.public-v6c-page .service-photo-background .customer-price-meta,.public-v6c-page .service-photo-background .simple-price-secondary{color:#fff}.public-v6c-page .service-photo-background .bali-service-identity small,.public-v6c-page .service-photo-background .customer-knowledge-summary{color:rgba(255,255,255,.82)}.public-v6c-page .service-photo-background .bali-service-price{color:#f6d17b}.public-v6c-page .service-photo-background .price-comparison del{color:rgba(255,255,255,.7)}.public-v6c-page .service-photo-background .customer-price-meta span{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.18);color:#fff}.public-v6c-page .service-photo-background .customer-knowledge-button{border-color:rgba(255,255,255,.66);background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(8px)}.public-v6c-page .service-photo-background .customer-knowledge-button:hover{background:#fff;color:var(--public-primary)}
.knowledge-modal-box.has-knowledge-background .knowledge-modal-header{position:relative;min-height:265px;align-items:flex-end;color:#fff;background-image:linear-gradient(180deg,rgba(5,23,28,.06),rgba(5,23,28,.88)),var(--knowledge-modal-image);background-position:center;background-size:cover}.knowledge-modal-box.has-knowledge-background .knowledge-modal-header .muted,.knowledge-modal-box.has-knowledge-background .knowledge-kicker,.knowledge-modal-box.has-knowledge-background .knowledge-modal-price{color:#fff}.knowledge-modal-box.has-knowledge-background .knowledge-modal-header button{background:rgba(255,255,255,.92);color:#17363b;border-color:rgba(255,255,255,.75)}.public-customer-mode .knowledge-runtime-modal .knowledge-modal-box.has-knowledge-background .knowledge-modal-header{position:relative}.public-customer-mode .knowledge-runtime-modal .knowledge-modal-box.has-knowledge-background .knowledge-modal-header{min-height:245px}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:820px){.knowledge-import-layout,.knowledge-import-columns{grid-template-columns:1fr}.knowledge-import-wide{grid-column:auto}.knowledge-import-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.public-v6c-page .bali-service-card.service-photo-background{min-height:285px}.knowledge-modal-box.has-knowledge-background .knowledge-modal-header{min-height:210px}}


/* V6E_FULL_POPUP_AND_SERVICE_ICON */
.knowledge-icon-editor{display:grid;grid-template-columns:92px 1fr;gap:18px;align-items:center;padding:17px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,#f7fbfa,#fffaf0)}
.knowledge-icon-preview{width:78px;height:78px;border-radius:20px;display:grid;place-items:center;background:#e6f6f3;border:1px solid #9ed7d1;color:var(--accent);font-size:34px;font-weight:900;box-shadow:inset 0 0 0 5px rgba(255,255,255,.62)}
.knowledge-icon-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.knowledge-modal-identity{display:flex;align-items:flex-end;gap:14px;min-width:0}
.knowledge-modal-service-icon{flex:0 0 54px;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.72);color:var(--accent);font-size:25px;box-shadow:0 10px 28px rgba(5,23,28,.18);backdrop-filter:blur(8px)}

/* Opsi A: foto menjadi background penuh seluruh popup. */
.knowledge-modal-box.has-knowledge-background{position:relative;isolation:isolate;background-image:linear-gradient(180deg,rgba(4,20,25,.20),rgba(4,20,25,.62)),var(--knowledge-modal-image);background-size:cover;background-position:center;background-repeat:no-repeat;color:#fff}
.knowledge-modal-box.has-knowledge-background::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,20,25,.02) 0%,rgba(4,20,25,.18) 30%,rgba(4,20,25,.48) 100%)}
.knowledge-modal-box.has-knowledge-background .knowledge-modal-header{min-height:215px;background:transparent!important;color:#fff;border-bottom-color:rgba(255,255,255,.28)}
.knowledge-modal-box.has-knowledge-background .knowledge-modal-body{background:rgba(245,250,249,.70);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);color:#17363b}
.knowledge-modal-box.has-knowledge-background .knowledge-lead{background:rgba(239,252,249,.88);border-color:rgba(130,211,201,.75);color:#285d5c;backdrop-filter:blur(7px)}
.knowledge-modal-box.has-knowledge-background .knowledge-education-card{background:rgba(255,255,255,.87);border-color:rgba(216,230,228,.86);color:#17363b;backdrop-filter:blur(8px);box-shadow:0 12px 30px rgba(5,23,28,.08)}
.knowledge-modal-box.has-knowledge-background .knowledge-education-card li{color:#4e6269}
.knowledge-modal-box.has-knowledge-background .knowledge-note{background:rgba(255,247,227,.90);border-color:rgba(225,180,84,.82);color:#72551c;backdrop-filter:blur(8px)}
.knowledge-modal-box.has-knowledge-background .knowledge-modal-header .muted,.knowledge-modal-box.has-knowledge-background .knowledge-kicker,.knowledge-modal-box.has-knowledge-background .knowledge-modal-price{color:#fff}
.knowledge-modal-box.has-knowledge-background .knowledge-modal-header button{background:rgba(255,255,255,.94);color:#17363b;border-color:rgba(255,255,255,.8)}
.public-customer-mode .knowledge-runtime-modal .knowledge-modal-box.has-knowledge-background{background-attachment:local}
.public-customer-mode .knowledge-runtime-modal .knowledge-modal-box.has-knowledge-background .knowledge-modal-header{min-height:205px}

@media(max-width:700px){.knowledge-icon-editor{grid-template-columns:1fr}.knowledge-icon-preview{width:66px;height:66px}.knowledge-icon-fields{grid-template-columns:1fr}.knowledge-modal-identity{align-items:center}.knowledge-modal-service-icon{width:46px;height:46px;flex-basis:46px;border-radius:13px}.knowledge-modal-box.has-knowledge-background .knowledge-modal-header{min-height:180px}.knowledge-modal-box.has-knowledge-background .knowledge-modal-body{background:rgba(245,250,249,.78)}}

/* V6F_DETAILED_SERVICE_ICON_ASSETS */
.service-icon-detail-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 2px 2px rgba(8, 29, 34, .12));
}
.bali-service-icon .service-icon-detail-image {
  width: 38px;
  height: 38px;
}
.knowledge-icon-preview .service-icon-detail-image {
  width: 64px;
  height: 64px;
}
.knowledge-modal-service-icon .service-icon-detail-image {
  width: 45px;
  height: 45px;
}
.site-service-media-image span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.site-service-media-image .service-icon-detail-image {
  width: 56px;
  height: 56px;
}
.public-v6c-page .service-photo-background .bali-service-icon .service-icon-detail-image {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18));
}
@media(max-width:700px) {
  .bali-service-icon .service-icon-detail-image { width: 34px; height: 34px; }
  .knowledge-icon-preview .service-icon-detail-image { width: 54px; height: 54px; }
  .knowledge-modal-service-icon .service-icon-detail-image { width: 39px; height: 39px; }
}



/* V6G_CONTEXTUAL_PRODUCT_KNOWLEDGE */
.knowledge-override-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.knowledge-override-model-picker { grid-column:1 / -1; border:1px solid #a9d8d0; border-radius:14px; padding:14px; background:#f2fbf9; display:grid; gap:12px; }
.knowledge-override-model-picker[hidden] { display:none; }
.knowledge-override-model-picker-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.knowledge-override-model-picker-head > div { display:grid; gap:4px; }
.knowledge-override-model-picker-head small { color:var(--muted); font-weight:400; }
.knowledge-override-model-picker-head > strong { white-space:nowrap; color:#087b70; background:#dff5f0; border-radius:999px; padding:6px 10px; font-size:12px; }
.knowledge-override-model-picker-tools { display:grid; grid-template-columns:minmax(220px,1fr) auto auto; gap:8px; }
.knowledge-override-model-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; max-height:250px; overflow:auto; padding:2px; }
.knowledge-override-model-option { display:flex; align-items:center; gap:8px; min-height:38px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; }
.knowledge-override-model-option:hover { border-color:#73bdb2; }
.knowledge-override-model-option:has(input:checked) { border-color:#159486; background:#e2f7f2; color:#075f57; font-weight:700; }
.knowledge-override-model-option input { flex:0 0 auto; }
.knowledge-override-model-option span { min-width:0; overflow-wrap:anywhere; }
.knowledge-override-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.knowledge-override-summary > div { border:1px solid var(--line); border-radius:14px; padding:14px; background:#f8fbfa; display:grid; gap:5px; }
.knowledge-override-summary span { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.knowledge-override-photo { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr); gap:16px; border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:16px; background:#fff; }
.knowledge-override-photo-preview { min-height:280px; border:1px dashed #9bcac3; border-radius:14px; background:#eef8f6; display:grid; place-items:center; overflow:hidden; position:relative; }
.knowledge-override-photo-preview img { width:100%; height:100%; min-height:280px; object-fit:contain; display:block; }
.knowledge-override-photo-preview > div { text-align:center; display:grid; gap:6px; color:var(--muted); padding:24px; }
.knowledge-inherit-badge { position:absolute; left:10px; bottom:10px; background:rgba(8,30,35,.78); color:#fff; border-radius:999px; padding:6px 10px; font-size:11px; }
.knowledge-override-photo-form { display:grid; align-content:start; gap:12px; }
.knowledge-override-status-row { display:grid; grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr); gap:12px; align-items:end; }
.knowledge-override-fields { display:grid; gap:14px; }
.knowledge-override-help { display:flex; justify-content:space-between; gap:16px; border-radius:14px; padding:13px 15px; background:#ecf9f6; border:1px solid #b8e6dc; }
.knowledge-override-help span { color:var(--muted); }
.knowledge-override-field { border:1px solid var(--line); border-radius:14px; padding:14px; background:#fff; display:grid; gap:10px; }
.knowledge-override-field textarea:disabled, .knowledge-override-field select:disabled, .knowledge-override-field input:disabled { background:#f1f4f6; color:#657080; opacity:1; }
.knowledge-inherited-copy { color:#6b7280; line-height:1.45; }
.knowledge-override-icon-field { grid-template-columns:minmax(210px,.6fr) minmax(0,1.4fr); align-items:center; }
.knowledge-override-inputs { display:grid; grid-template-columns:minmax(0,1fr) minmax(160px,.6fr) 72px; gap:10px; align-items:center; }
.knowledge-override-publish { display:grid; grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr); gap:14px; border:1px solid var(--line); border-radius:14px; padding:14px; background:#f8fbfa; }
.knowledge-override-actions { justify-content:flex-end; position:sticky; bottom:0; background:rgba(255,255,255,.94); border-top:1px solid var(--line); padding:12px 0 2px; backdrop-filter:blur(8px); }
@media (max-width: 900px) {
  .knowledge-override-controls, .knowledge-override-summary, .knowledge-override-photo, .knowledge-override-status-row, .knowledge-override-publish, .knowledge-override-icon-field { grid-template-columns:1fr; }
  .knowledge-override-model-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .knowledge-override-inputs { grid-template-columns:1fr; }
  .knowledge-override-help { flex-direction:column; }
}
@media (max-width: 560px) {
  .knowledge-override-model-picker-head { flex-direction:column; }
  .knowledge-override-model-picker-tools, .knowledge-override-model-grid { grid-template-columns:1fr; }
}