/* diara — banner kolaborasi + panel (katalog desain & studio mix & match) */

/* ---------- banner panjang di bawah teks berjalan ---------- */
.cbanner { --mx: 50%; position: relative; display: block; isolation: isolate; overflow: hidden; margin: clamp(36px, 5vw, 72px) 0 0; color: var(--ink); cursor: pointer;
  background: linear-gradient(96deg, var(--accent) 0%, var(--gold) 34%, var(--accent) 66%, var(--gold) 100%); background-size: 240% 100%; background-position: 0 0; transition: background-position 1.2s var(--ease);
  box-shadow: 0 22px 36px -24px color-mix(in srgb, var(--accent) 90%, #000); }
.cbanner + section { padding-top: clamp(36px, 5vw, 72px); }
.cbanner:hover { background-position: 100% 0; }
.cbanner::before { content: ''; position: absolute; z-index: 0; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .09) 0 12px, transparent 12px 28px); background-size: 56px 100%; animation: cbstripe 2.4s linear infinite; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.cbanner::after { content: ''; position: absolute; z-index: 1; inset: 0; background: radial-gradient(240px circle at var(--mx) 50%, rgba(255, 255, 255, .7), transparent 62%); opacity: 0; transition: opacity .4s; mix-blend-mode: soft-light; pointer-events: none; }
.cbanner:hover::after { opacity: 1; }
@keyframes cbstripe { to { background-position: 56px 0; } }
.cb-shine { position: absolute; z-index: 1; top: 0; bottom: 0; left: -30%; width: 18%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); transform: skewX(-20deg); animation: cbshine 4.6s var(--ease) 1s infinite; pointer-events: none; }
@keyframes cbshine { 0% { left: -30%; } 36%, 100% { left: 130%; } }
.cb-sp { position: absolute; z-index: 1; bottom: -8px; left: var(--x); width: var(--s); height: var(--s); background: rgba(255, 255, 255, .85); transform: rotate(45deg); opacity: 0; animation: cbrise 3.6s ease-in infinite; animation-delay: var(--d); pointer-events: none; }
@keyframes cbrise { 0% { opacity: 0; transform: translateY(0) rotate(45deg) scale(.5); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(-90px) rotate(225deg) scale(1); } }
.cb-track { position: relative; z-index: 2; display: flex; width: max-content; min-width: 100%; justify-content: center; }
.cb-row { display: flex; align-items: center; gap: 22px; height: 80px; padding: 0 32px; white-space: nowrap; }
.cb-row:nth-child(n + 2) { display: none; }
.cb-star { width: 30px; height: 30px; flex: none; color: var(--ink); animation: cbspin 6s linear infinite; }
.cb-star svg { width: 100%; height: 100%; }
@keyframes cbspin { to { transform: rotate(360deg); } }
.cb-text { font-size: clamp(22px, 2.7vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1; transition: transform .5s var(--ease); }
.cbanner:hover .cb-text { transform: scale(1.025); }
.cb-cta { position: relative; display: inline-flex; align-items: center; gap: 12px; height: 50px; padding: 0 8px 0 24px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .01em; box-shadow: 0 12px 22px -12px rgba(42, 29, 21, .95); transition: transform .45s var(--ease); animation: cbpulse 2.2s ease-out infinite; }
@keyframes cbpulse { 0% { box-shadow: 0 12px 22px -12px rgba(42, 29, 21, .95), 0 0 0 0 rgba(42, 29, 21, .5); } 70%, 100% { box-shadow: 0 12px 22px -12px rgba(42, 29, 21, .95), 0 0 0 14px rgba(42, 29, 21, 0); } }
.cb-cta i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 17px; background: var(--accent); color: var(--ink); transition: transform .45s var(--ease); }
.cbanner:hover .cb-cta { transform: translateX(4px) scale(1.04); }
.cbanner:hover .cb-cta i { transform: rotate(-45deg); }
.cbanner:active .cb-cta { transform: scale(.96); }
.cbanner:focus-visible { outline-offset: -4px; outline-color: var(--ink); }
@media (max-width: 760px) {
  .cbanner { margin-top: 30px; }
  .cbanner + section { padding-top: 30px; }
  .cb-track { justify-content: flex-start; animation: cbslide 28s linear infinite; }
  .cb-row, .cb-row:nth-child(n + 2) { display: flex; height: 62px; gap: 14px; padding: 0 20px; }
  .cb-text { font-size: 20px; }
  .cb-cta { height: 38px; padding: 0 5px 0 16px; font-size: 13px; gap: 9px; }
  .cb-cta i { width: 28px; height: 28px; font-size: 14px; }
  .cb-star { width: 22px; height: 22px; }
  .cbanner:active .cb-track { animation-play-state: paused; }
}
@keyframes cbslide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .cbanner::before, .cb-shine, .cb-sp, .cb-star, .cb-cta { animation: none; }
  .cb-sp { display: none; }
  .cb-track { animation: none !important; justify-content: center; width: 100%; }
  .cb-row:nth-child(n + 2) { display: none !important; }
  .cb-row { min-width: 0; max-width: 100%; }
  .cb-text { overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- panel kolaborasi (layar penuh) ---------- */
.collab { position: fixed; inset: 0; z-index: 75; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); overscroll-behavior: contain; }
.collab[hidden] { display: none; }
.collab.enter { animation: cprise .6s var(--ease); }
@keyframes cprise { from { opacity: 0; transform: translateY(28px); } }
.cp { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.cp-top { flex: none; position: relative; z-index: 4; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; height: 68px; padding: 0 var(--gutter); background: color-mix(in srgb, #fff 62%, var(--bg)); box-shadow: 0 1px 0 var(--line); }
.cp-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cp-brand .wm { height: 26px; width: auto; color: var(--primary); flex: none; }
.cp-brand span { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: var(--primary); color: #fff; white-space: nowrap; }
.cp-nav { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: var(--sage); box-shadow: inset 0 0 0 1px var(--line); }
.cp-nav button { height: 38px; padding: 0 20px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: color-mix(in srgb, var(--ink) 70%, transparent); white-space: nowrap; transition: background .35s var(--ease), color .35s var(--ease); }
.cp-nav button:hover { color: var(--ink); }
.cp-nav button[aria-current="true"] { background: var(--ink); color: #fff; }
.cp-x { justify-self: end; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; line-height: 1; background: var(--ink); color: #fff; transition: background .3s, transform .45s var(--ease); }
.cp-x:hover { background: var(--accent); color: var(--ink); transform: rotate(90deg); }
.cp-body { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }

.cp-intro { padding-top: clamp(36px, 6vw, 76px); padding-bottom: clamp(8px, 2vw, 24px); }
.cp-intro .h2 { margin: 16px 0 18px; max-width: 16ch; }
.cp-intro .lead { max-width: 58ch; }
.cp-perks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.cp-perks li { list-style: none; display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 14px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; font-weight: 600; color: var(--primary); }
.cp-perks svg { width: 16px; height: 16px; color: var(--accent); flex: none; }

.cp-sec { padding: clamp(40px, 5.4vw, 76px) 0; }
.cp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 30px; flex-wrap: wrap; margin-bottom: clamp(22px, 2.8vw, 36px); }
.cp-head .h2 { font-size: clamp(30px, 3.8vw, 50px); margin-top: 14px; }
.cp-head .lead { max-width: 44ch; }
.cp-head .eyebrow::before { display: none; }
.cp-no { display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; background: var(--ink); color: #fff; }
.cp-studio .cp-no { background: var(--accent); color: var(--ink); }

/* katalog desain */
.cd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: clamp(14px, 1.8vw, 26px); }
.cd-card { display: flex; flex-direction: column; text-align: left; border-radius: 28px; overflow: hidden; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.cd-card:hover { transform: translateY(-6px); box-shadow: 0 34px 50px -34px rgba(42, 29, 21, .55), inset 0 0 0 1px var(--line); }
.cd-pic { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--soft); overflow: hidden; }
.cd-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: opacity .7s var(--ease), transform 1.4s var(--ease); }
.cd-pic img.alt { opacity: 0; }
.cd-card:hover .cd-pic img { transform: scale(1.05); }
.cd-card:hover .cd-pic img.alt { opacity: 1; }
.cd-n { position: absolute; z-index: 2; left: 14px; bottom: 14px; padding: 5px 13px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; background: rgba(255, 255, 255, .92); color: var(--ink); backdrop-filter: blur(6px); }
.cd-ph { position: absolute; inset: 0; display: grid; place-items: center; background: var(--tone, #CFC7B8); color: rgba(255, 255, 255, .8); }
.cd-ph svg { width: 34%; height: auto; opacity: .85; }
.cd-in { display: flex; flex-direction: column; gap: 6px; padding: 18px 22px 22px; flex: 1; }
.cd-in small { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-d); }
.cd-in b { font-size: 21px; line-height: 1.2; letter-spacing: -.02em; font-weight: 700; color: var(--primary); }
.cd-in em { font-size: 14px; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cd-go { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.cd-go span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); transition: transform .45s var(--ease); }
.cd-card:hover .cd-go span { transform: translateX(4px) rotate(-45deg); }
.cp-empty { grid-column: 1 / -1; padding: 60px 20px; text-align: center; color: var(--muted); border-radius: 28px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }

/* detail desain */
.dtl { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 20px; background: color-mix(in srgb, var(--ink) 72%, transparent); animation: fade .35s var(--ease); }
.dtl[hidden] { display: none; }
.cd-sheet { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; width: min(1120px, 100%); height: min(780px, 100%); border-radius: var(--r-l); overflow: hidden; background: var(--bg); animation: rise .6s var(--ease); }
.cd-x { position: absolute; z-index: 6; top: 16px; right: 16px; justify-self: auto; }
.cdg { position: relative; min-height: 0; background: var(--sage); display: flex; flex-direction: column; }
.cdg-track { flex: 1; min-height: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.cdg-track::-webkit-scrollbar { display: none; }
.cdg-s { flex: 0 0 100%; min-width: 0; position: relative; scroll-snap-align: center; padding: 18px; }
.cdg-s img { width: 100%; height: 100%; object-fit: contain; border-radius: 18px; }
.cdg-nav { position: absolute; z-index: 3; top: calc(50% - 44px); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); transition: transform .35s var(--ease), background .3s; }
.cdg-nav:hover { background: var(--accent); transform: scale(1.08); }
.cdg-nav svg { width: 20px; height: 20px; }
.cdg-nav.prev { left: 16px; } .cdg-nav.next { right: 16px; }
.cdg-c { position: absolute; z-index: 3; left: 28px; top: 28px; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .92); }
.cdg-th { flex: none; display: flex; gap: 8px; padding: 0 18px 18px; overflow-x: auto; scrollbar-width: thin; }
.cdg-th button { flex: none; width: 62px; height: 78px; border-radius: 12px; overflow: hidden; opacity: .55; box-shadow: inset 0 0 0 1px var(--line); transition: opacity .3s, box-shadow .3s, transform .3s var(--ease); background: #fff; }
.cdg-th button:hover { opacity: .9; }
.cdg-th button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2.5px var(--accent); transform: translateY(-2px); }
.cdg-th img { width: 100%; height: 100%; object-fit: cover; }
.cd-info { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 56px 42px 36px; display: flex; flex-direction: column; }
.cd-info .cat { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-d); }
.cd-info h3 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.04; letter-spacing: -.03em; font-weight: 600; margin: 12px 0 18px; color: var(--primary); }
.cd-info .desc { color: var(--muted); font-size: 15.5px; line-height: 1.75; }
.cd-acts { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 28px; }
.cd-acts .btn { width: 100%; justify-content: space-between; }
.cd-acts .btn.ghost { justify-content: center; }
.cd-note { margin-top: 14px; font-size: 12.5px; color: var(--muted); text-align: center; }

/* ---------- studio mix & match (satu layar pas) ---------- */
.cp-studio { position: relative; display: flex; height: max(calc(100dvh - 68px), 860px); min-height: 0; padding: clamp(28px, 4.4vw, 64px) 0; color: #fff; background: var(--primary-d); border-radius: clamp(28px, 3.4vw, 52px) clamp(28px, 3.4vw, 52px) 0 0; overflow: clip; isolation: isolate; }
.cp-studio::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(60% 50% at 85% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%), radial-gradient(50% 50% at 0% 100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
.cp-studio > .wrap { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.cp-studio .cp-no { background: var(--accent); color: var(--ink); }
.mm { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, .82fr) 1.18fr; gap: clamp(14px, 1.8vw, 24px); }
.mm-stage-col, .mm-pick { min-width: 0; min-height: 0; }

/* panggung */
.mm-stage { color: var(--ink); position: relative; height: 100%; border-radius: 34px; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; padding: 20px 56px 74px; background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--bg) 96%, #fff) 0 32%, color-mix(in srgb, var(--bg) 76%, var(--accent)) 100%); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(255, 255, 255, .5); perspective: 1100px; }
.mm-stage::before { content: ''; position: absolute; width: min(72%, 560px); aspect-ratio: 1; border-radius: 50%; left: 50%; top: calc(50% - 27px); transform: translate(-50%, -50%); background: color-mix(in srgb, #fff 52%, transparent); }
.mm-fig { position: relative; min-height: 0; height: 100%; width: 100%; display: grid; transition: transform .35s var(--ease); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; }
.mm-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 18px 18px rgba(42, 29, 21, .22)); overflow: visible; }
.mm-l.drop { animation: mmdrop .6s var(--ease); }
@keyframes mmdrop { from { opacity: 0; transform: translateY(-22px); } 60% { opacity: 1; } }
.mm-tools { position: absolute; z-index: 3; top: 14px; right: 14px; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 12px 24px -14px rgba(42, 29, 21, .65), inset 0 0 0 1px var(--line); }
.mm-tool { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1; color: var(--ink); white-space: nowrap; transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.mm-tool svg { width: 18px; height: 18px; flex: none; }
.mm-tool:hover { background: var(--sage); }
.mm-tool:active { transform: scale(.95); }
.mm-tool.pri { background: var(--ink); color: #fff; }
.mm-tool.pri:hover { background: var(--accent); color: var(--ink); }
.mm-tool.spin svg { animation: mmroll .7s var(--ease); }
@keyframes mmroll { to { transform: rotate(360deg); } }
.mm-skin { position: absolute; z-index: 3; left: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 9px; padding: 10px 8px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 10px 22px -12px rgba(42, 29, 21, .6); }
.mm-skin button { width: 24px; height: 24px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); transition: transform .3s var(--ease); }
.mm-skin button:hover { transform: scale(1.2); }
.mm-skin button[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.mm-step { position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 14px 26px -14px rgba(42, 29, 21, .7); width: min(100% - 28px, 340px); }
.mm-step button { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sage); transition: background .3s, transform .35s var(--ease); }
.mm-step button:hover { background: var(--accent); }
.mm-step button:active { transform: scale(.9); }
.mm-step button svg { width: 18px; height: 18px; }
.mm-step div { flex: 1; min-width: 0; text-align: center; line-height: 1.25; }
.mm-step small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-d); }
.mm-step b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-sp { position: absolute; z-index: 4; width: 9px; height: 9px; margin: -4px 0 0 -4px; background: var(--accent); transform: rotate(45deg); pointer-events: none; animation: mmsp .85s var(--ease) forwards; }
.mm-sp:nth-child(3n) { background: #fff; width: 6px; height: 6px; }
.mm-sp:nth-child(3n + 1) { background: var(--gold); }
@keyframes mmsp { from { opacity: 1; transform: translate(0, 0) rotate(45deg) scale(1); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(260deg) scale(.2); } }

/* kartu pemilih */
.mm-pick { display: flex; flex-direction: column; border-radius: 34px; background: color-mix(in srgb, #fff 72%, var(--bg)); color: var(--ink); padding: clamp(16px, 1.8vw, 24px); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .75); }
.mm-hd { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 16px; }
.mm-hd .eyebrow { font-size: 11px; }
.mm-hd .eyebrow::before { display: none; }
.mm-hd h2 { margin: 10px 0 4px; font-size: clamp(24px, 2.5vw, 34px); line-height: 1.05; letter-spacing: -.03em; font-weight: 700; color: var(--primary); }
.mm-lead { max-width: 46ch; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.mm-prog { flex: none; min-width: 96px; text-align: right; font-size: 12px; font-weight: 700; color: var(--muted); }
.mm-prog b { font-size: 26px; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.mm-prog i { display: block; height: 5px; margin-top: 6px; border-radius: 99px; background: var(--sage); overflow: hidden; }
.mm-prog i::after { content: ''; display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--gold-d)); transition: width .6s var(--ease); }
.mm-cats { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 14px; }
.mm-cat { position: relative; height: 38px; padding: 0 15px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; background: var(--sage); box-shadow: inset 0 0 0 1px var(--line); color: color-mix(in srgb, var(--ink) 75%, transparent); transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.mm-cat:hover { background: #fff; color: var(--ink); transform: translateY(-2px); }
.mm-cat[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.mm-cat i { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.mm-items { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); grid-auto-rows: max-content; gap: 10px; align-content: start; padding: 4px 6px 28px 2px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 24%, transparent) transparent; -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), transparent); mask-image: linear-gradient(#000 calc(100% - 26px), transparent); }
.mm-items::-webkit-scrollbar { width: 5px; }
.mm-items::-webkit-scrollbar-track { background: transparent; }
.mm-items::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 24%, transparent); border-radius: 99px; }
.mm-it { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 7px 7px 9px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-align: center; transition: transform .4s var(--ease), box-shadow .3s; }
.mm-it:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: inset 0 0 0 1px var(--line), 0 18px 26px -18px rgba(42, 29, 21, .55); }
.mm-it:active { transform: scale(.95); }
.mm-it[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--accent), 0 18px 26px -18px rgba(42, 29, 21, .5); background: color-mix(in srgb, var(--accent) 9%, #fff); }
.mm-it[aria-pressed="true"]::after { content: '✓'; position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--accent); color: var(--ink); animation: mmtick .4s var(--ease); }
@keyframes mmtick { from { transform: scale(0); } }
.mm-th { display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--bg) 70%, #fff); }
.mm-th svg, .mm-th img { width: 100%; height: 100%; object-fit: contain; }
.mm-th img { padding: 4px; }
.mm-th.none { color: var(--muted); }
.mm-th.none svg { width: 34%; height: 34%; }
.mm-it small { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.mm-sum { flex: none; display: flex; gap: 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); }
.mm-sum .btn { height: 52px; flex: 1 1 220px; justify-content: space-between; }
.mm-sum .btn.ghost { flex: 0 1 auto; justify-content: center; padding: 0 26px; }
.cp-toast { position: absolute; z-index: 20; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 12px 22px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .6); animation: cprise .4s var(--ease); max-width: calc(100% - 32px); text-align: center; }
.cp-foot { padding: 20px 0 28px; font-size: 12.5px; color: rgba(255, 255, 255, .6); text-align: center; background: var(--primary-d); }
.cp-body { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 26%, transparent) transparent; }
.cp-body::-webkit-scrollbar { width: 8px; }
.cp-body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 26%, transparent); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }

/* ---------- pratinjau detail rancangan ---------- */
.mmp-sheet { grid-template-columns: 1fr 1fr; }
.mmp-view { position: relative; min-height: 0; display: flex; flex-direction: column; background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--bg) 96%, #fff) 0 30%, color-mix(in srgb, var(--bg) 74%, var(--accent)) 100%); }
.mmp-stage { flex: 1; min-height: 0; display: grid; padding: 28px 28px 8px; }
.mmp-fig { min-height: 0; width: 100%; height: 100%; display: grid; }
.mmp-fig .mm-svg { overflow: hidden; filter: drop-shadow(0 22px 22px rgba(42, 29, 21, .22)); }
.mmp-zoom { flex: none; align-self: center; display: flex; gap: 4px; margin: 6px 0 22px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 12px 24px -14px rgba(42, 29, 21, .65), inset 0 0 0 1px var(--line); }
.mmp-zoom button { height: 36px; padding: 0 18px; border-radius: 999px; font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--ink) 72%, transparent); transition: background .3s var(--ease), color .3s var(--ease); }
.mmp-zoom button:hover { color: var(--ink); background: var(--sage); }
.mmp-zoom button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.mmp-info { padding-top: 60px; }
.mmp-info h3 { margin-bottom: 10px; }
.mmp-list { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mmp-li { display: flex; align-items: center; gap: 14px; padding: 8px 14px 8px 8px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.mmp-li .mm-th { flex: none; width: 54px; height: 54px; aspect-ratio: auto; border-radius: 12px; }
.mmp-li div { flex: 1; min-width: 0; line-height: 1.3; }
.mmp-li small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-d); }
.mmp-li b { display: block; font-size: 15px; font-weight: 700; color: var(--primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mmp-li i { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.mmp-li.off { background: transparent; box-shadow: inset 0 0 0 1px var(--line); opacity: .6; }
.mmp-li.off b { font-weight: 600; color: var(--muted); }
.mmp-skin { margin-top: 14px; font-size: 12.5px; color: var(--muted); }

/* ---------- responsif ---------- */
@media (max-width: 1000px) {
  .mmp-sheet { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr); }
  .mmp-stage { padding: 18px 18px 4px; }
  .mmp-zoom { margin: 4px 0 14px; }
  .mmp-info { padding-top: 24px; }
  .cd-sheet { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr); }
  .cd-info { padding: 26px 24px 24px; }
  .cd-acts { padding-top: 20px; }
}
@media (max-width: 900px) {
  .cp-top { grid-template-columns: auto 1fr auto; height: 62px; }
  .cp-brand span { display: none; }
  .cp-nav { justify-self: center; }
  .cp-nav button { height: 34px; padding: 0 14px; font-size: 12.5px; }
  .cp-x { width: 42px; height: 42px; font-size: 24px; }
  .cp-studio { height: auto; min-height: 0; padding: 28px 0 36px; }
  .cp-studio > .wrap { height: auto; }
  .mm { display: flex; flex-direction: column; }
  .mm-stage-col { position: sticky; top: 0; z-index: 5; }
  .mm-stage { height: min(44dvh, 420px); border-radius: 28px; padding: 12px 52px 66px; }
  .mm-pick { border-radius: 28px; padding: 16px; }
  .mm-items { overflow: visible; -webkit-mask-image: none; mask-image: none; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); padding-bottom: 8px; }
  .mm-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 28px), transparent); }
  .mm-cats::-webkit-scrollbar { display: none; }
  .mm-hd { flex-wrap: wrap; }
  .cp-head { align-items: flex-start; }
  .dtl { padding: 0; }
  .cd-sheet { height: 100%; border-radius: 0; }
}
@media (max-width: 520px) {
  .mm-tool { padding: 0 11px 0 9px; gap: 5px; font-size: 12px; }
  .cd-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cd-card { border-radius: 22px; }
  .cd-in { padding: 14px 14px 16px; }
  .cd-in b { font-size: 16.5px; }
  .cd-in em { display: none; }
  .cd-go { font-size: 12.5px; }
  .cd-go span { width: 28px; height: 28px; }
  .cdg-nav { width: 40px; height: 40px; }
  .cdg-th button { width: 52px; height: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .collab.enter, .dtl, .cd-sheet, .mm-fig.pop, .cp-toast { animation: none; }
  .cp-body { scroll-behavior: auto; }
}