.mmt-app { --mmt-accent: #b5651d; --mmt-line: #e7e2da; --mmt-bg: #faf8f5; max-width: 1400px; margin: 0 auto; font-size: 14px; }
.mmt-app button, .mmt-app select, .mmt-app input { font: inherit; }

/* üst çubuk */
.mmt-bar { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 10px 14px; background: var(--mmt-bg); border: 1px solid var(--mmt-line); border-radius: 10px; }
.mmt-room { display: flex; align-items: center; gap: 8px; color: #7a6f60; }
.mmt-room input { width: 76px; padding: 6px 8px; color: #222; }
.mmt-tabs { display: flex; gap: 6px; }
.mmt-tab { padding: 8px 18px; background: #fff; border: 1px solid var(--mmt-line); border-radius: 999px; cursor: pointer; }
.mmt-tab.mmt-on { background: var(--mmt-accent); border-color: var(--mmt-accent); color: #fff; }

/* gövde */
.mmt-body { display: grid; grid-template-columns: 250px minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
.mmt-side, .mmt-box, .mmt-main { background: var(--mmt-bg); border: 1px solid var(--mmt-line); border-radius: 10px; padding: 12px; }
.mmt-side { max-height: 80vh; overflow-y: auto; }
.mmt-right { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 20px; }
.mmt-box h3 { margin: 0 0 8px; font-size: 15px; }

/* katalog */
.mmt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mmt-chip { padding: 4px 12px; background: #fff; border: 1px solid var(--mmt-line); border-radius: 999px; cursor: pointer; font-size: 13px; }
.mmt-chip.mmt-on { background: #2b2118; border-color: #2b2118; color: #fff; }
.mmt-card { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 6px; padding: 6px; text-align: left; background: #fff; border: 1px solid var(--mmt-line); border-radius: 8px; cursor: pointer; color: inherit; }
.mmt-card:hover { border-color: var(--mmt-accent); }
.mmt-card img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex: none; }
.mmt-card-t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; line-height: 1.25; }
.mmt-card-t small { color: #7a6f60; }
.mmt-card-p { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; font-weight: 600; white-space: nowrap; }
.mmt-card-p small { font-weight: 400; color: #7a6f60; font-size: 10px; }

/* çizim alanı */
.mmt-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mmt-toolbar button { padding: 6px 14px; background: #fff; border: 1px solid var(--mmt-line); border-radius: 6px; cursor: pointer; }
.mmt-toolbar button.mmt-on { background: var(--mmt-accent); border-color: var(--mmt-accent); color: #fff; }
#mmt-svg { width: 100%; height: auto; display: block; background: #fff; border-radius: 8px; touch-action: none; user-select: none; }
.mmt-room-bg { fill: #fdfcfa; stroke: #333; stroke-width: 2.5; }
.mmt-grid { stroke: #ece7df; stroke-width: .6; }
.mmt-dim { font-size: 9px; fill: #7a6f60; }
.mmt-hint { margin: 10px 0 0; font-size: 12.5px; color: #7a6f60; }
.mmt-3d { width: 100%; border-radius: 8px; overflow: hidden; background: #f4f1ec; line-height: 0; }
.mmt-3d canvas { width: 100% !important; height: auto !important; cursor: grab; }

/* modül çizimleri */
.mmt-item { cursor: grab; }
.mmt-item:active { cursor: grabbing; }
.mmt-fi { cursor: pointer; }
.mmt-bg { stroke: #4a4036; stroke-width: 1; opacity: .92; }
.mmt-up .mmt-bg { opacity: .55; stroke-dasharray: 4 2; }
.mmt-up image { opacity: .7; }
.mmt-front { stroke: #2b2118; stroke-width: 3.5; pointer-events: none; }
.mmt-lbl { font-size: 6.5px; fill: #2b2118; pointer-events: none; }
.mmt-lbl2 { font-size: 5.5px; fill: #5b5043; pointer-events: none; }
.mmt-ov { fill: none; stroke: none; pointer-events: none; }
.mmt-sel .mmt-ov { stroke: var(--mmt-accent); stroke-width: 2.5; }
.mmt-bad .mmt-ov { stroke: #d63638; stroke-width: 2.5; fill: rgba(214, 54, 56, .28); }
.mmt-door { fill: none; stroke: rgba(0, 0, 0, .35); stroke-width: .7; }
.mmt-handle { fill: #3a3229; }
.mmt-side-face .mmt-bg { opacity: .6; }

/* sağ panel */
.mmt-empty { margin: 0; font-size: 13px; color: #7a6f60; }
.mmt-sel-h { display: flex; flex-direction: column; margin-bottom: 8px; }
.mmt-sel-h small { color: #7a6f60; }
.mmt-attr { display: block; margin-bottom: 8px; font-size: 12.5px; color: #7a6f60; }
.mmt-attr select { display: block; width: 100%; margin-top: 3px; padding: 7px 8px; color: #222; background: #fff; border: 1px solid var(--mmt-line); border-radius: 6px; }
.mmt-sel-p { font-size: 16px; font-weight: 700; margin: 6px 0 10px; }
.mmt-acts { display: flex; gap: 6px; }
.mmt-acts button { flex: 1; padding: 7px 4px; background: #fff; border: 1px solid var(--mmt-line); border-radius: 6px; cursor: pointer; font-size: 13px; }
.mmt-acts button:hover { border-color: var(--mmt-accent); }
.mmt-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--mmt-line); font-size: 13px; }
.mmt-row > span:first-child { display: flex; flex-direction: column; }
.mmt-row small { color: #7a6f60; }
.mmt-tot { font-weight: 700; font-size: 15px; border-bottom: 0; margin-top: 4px; }
#mmt-msg { color: #d63638; font-size: 13px; margin: 8px 0; }
.mmt-buy { width: 100%; padding: 12px; margin-top: 6px; font-weight: 600; color: #fff; background: var(--mmt-accent); border: 0; border-radius: 8px; cursor: pointer; }
.mmt-buy:disabled { opacity: .45; cursor: not-allowed; }
.mmt-link { display: block; margin: 10px auto 0; background: none; border: 0; color: #7a6f60; text-decoration: underline; cursor: pointer; font-size: 12.5px; }

@media (max-width: 1000px) {
	.mmt-body { grid-template-columns: 1fr; }
	.mmt-main { order: 1; }
	.mmt-right { order: 2; position: static; }
	.mmt-side { order: 3; max-height: 360px; }
}

/* katalog: daha küçük modül adı, fiyat yok */
.mmt-card-t b { font-size: 10px; font-weight: 600; line-height: 1; }
.mmt-card-t small { font-size: 11px; }