/* ============================================================
   KATALOG INTERAKTIF DOORVA V2
   Data model berada di data/catalog.js.
   ============================================================ */
.catalog-v2 { background:var(--dv-paper); }
.catalog-hero { padding:84px 7% 62px;background:var(--dv-ink);color:#fff;display:grid;grid-template-columns:1.25fr .75fr;gap:80px;align-items:end; }
.catalog-hero h1 { max-width:850px;margin:24px 0 20px; }
.catalog-hero p { max-width:620px;color:#d8d4ce;font-size:17px; }
.catalog-hero__aside { border-left:1px solid #555;padding-left:28px;display:grid;gap:20px; }
.catalog-hero__aside span { font-size:12px;letter-spacing:.12em;color:#c8c4bd; }
.catalog-hero__aside strong { display:block;font-size:18px;color:#fff;margin-top:4px; }

.catalog-block { padding:72px 7%;border-bottom:1px solid var(--dv-line); }
.catalog-block__head { display:grid;grid-template-columns:1.2fr .8fr;gap:60px;margin-bottom:34px;align-items:end; }
.catalog-block__head h2 { margin-top:14px; }
.catalog-block__head p { color:var(--dv-muted);max-width:620px; }

.product-options { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px; }
.product-option { min-height:190px;padding:20px;text-align:left;border:1px solid var(--dv-line);background:#fff;color:var(--dv-ink);display:flex;flex-direction:column;align-items:flex-start;cursor:pointer; }
.product-option strong { margin:26px 0 8px;font-size:20px; }
.product-option>span:last-child { font-size:13px;color:var(--dv-muted);line-height:1.5; }
.product-option.is-active { border-color:var(--dv-accent);box-shadow:inset 0 -3px var(--dv-accent); }
.product-option.is-coming { background:#efeeeb;color:#7b7772;cursor:help; }
.product-status { font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--dv-accent); }
.product-option.is-coming .product-status { color:#777; }
.inline-status { min-height:25px;margin-top:14px;color:#8a5727;font-size:13px; }

.catalog-workspace { display:grid;grid-template-columns:minmax(310px,.78fr) minmax(0,1.45fr);gap:28px;padding:56px 5%;align-items:start; }
.preview-sticky { position:sticky;top:20px;background:#ece9e4;padding:26px; }
.preview-toolbar { display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px;font-size:11px;letter-spacing:.12em; }
.preview-toolbar strong { color:var(--dv-accent); }
.view-switcher { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px; }
.view-switcher button { border:1px solid #bbb6af;background:transparent;padding:8px 11px;font-size:11px;cursor:pointer; }
.view-switcher button.is-active { background:var(--dv-ink);color:#fff;border-color:var(--dv-ink); }
.door-preview-stage { min-height:480px;display:grid;place-items:center;background:#ded9d2;padding:26px;overflow:hidden; }
#door-preview { width:min(55%,230px);filter:drop-shadow(0 18px 16px rgba(0,0,0,.14)); }
.door-art { width:100%;height:auto;display:block; }
.door-surface { stroke:#343434;stroke-width:1; }
.door-details { fill:none;stroke:#393633;stroke-width:1.6;vector-effect:non-scaling-stroke; }
.door-details .detail-line { fill:none;stroke:#393633;stroke-width:1.6;vector-effect:non-scaling-stroke; }
.door-details .glass-field { fill:rgba(190,215,216,.82);stroke:#596c6e;stroke-width:1.5;vector-effect:non-scaling-stroke; }
.door-handle { fill:#292929; }
.door-handle-line { stroke:#292929;stroke-width:2;stroke-linecap:round; }
.preview-caption { margin-top:20px;display:grid;grid-template-columns:auto 1fr;gap:16px; }
.preview-caption>span { color:var(--dv-accent);font-size:12px;font-weight:700;padding-top:4px; }
.preview-caption h2 { font-size:29px;margin-bottom:7px; }
.preview-caption p { color:var(--dv-muted);font-size:14px; }
.preview-disclaimer { margin-top:18px;font-size:11px;line-height:1.6;color:#77736e; }

.room-visual { position:relative;aspect-ratio:3/2;overflow:hidden;background:#ddd; }
.room-visual>img { width:100%;height:100%;object-fit:cover;display:block; }
.room-door-preview { position:absolute;filter:drop-shadow(0 4px 5px rgba(0,0,0,.22));overflow:hidden; }
.room-visual--bedroom .room-door-preview { left:41.47%;top:9.86%;width:17.97%;height:63.96%; }
.room-visual--office .room-door-preview { left:42.97%;top:9.18%;width:18.03%;height:66.7%; }
.room-door-preview .door-art { height:100%;width:100%; }
.room-door-preview .door-handle,.room-door-preview .door-handle-line { display:none; }
.room-note { position:absolute;left:10px;right:10px;bottom:8px;background:rgba(255,255,255,.86);padding:6px 8px;font-size:9px; }

.catalog-controls { min-width:0; }
.control-section { background:#fff;border:1px solid var(--dv-line);padding:28px;margin-bottom:16px; }
.control-heading { display:flex;gap:15px;align-items:baseline;margin-bottom:22px; }
.control-heading span { color:var(--dv-accent);font-size:12px;font-weight:700; }
.control-heading h2 { font-size:25px;letter-spacing:-.03em; }
.catalog-search { width:100%;padding:14px 16px;border:1px solid var(--dv-line);background:#fff;font:inherit;margin-bottom:14px; }
.category-filters { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px; }
.category-filter { min-height:92px;padding:12px;text-align:left;border:1px solid var(--dv-line);background:#f8f8f6;display:flex;flex-direction:column;cursor:pointer; }
.category-filter span { font-size:10px;color:var(--dv-accent); }
.category-filter strong { font-size:12px;margin:5px 0; }
.category-filter small { color:var(--dv-muted);margin-top:auto; }
.category-filter.is-active { background:var(--dv-ink);color:#fff;border-color:var(--dv-ink); }
.category-filter.is-active small { color:#d2cfca; }
.model-result-line { display:flex;justify-content:space-between;gap:15px;align-items:center;margin:22px 0 12px; }
.model-result-line span { font-size:12px;color:var(--dv-muted); }
.model-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-height:730px;overflow:auto;padding-right:5px; }
.model-card { border:1px solid var(--dv-line);background:#fff;padding:12px;text-align:left;color:var(--dv-ink);cursor:pointer;min-width:0; }
.model-card:hover,.model-card.is-selected { border-color:var(--dv-accent); }
.model-card.is-selected { box-shadow:inset 0 -3px var(--dv-accent); }
.model-card.is-coming { background:#efeeeb;cursor:help; }
.model-card__visual { height:180px;display:grid;place-items:center;background:#efede9;position:relative;overflow:hidden; }
.model-card__visual .door-art { height:150px;width:auto; }
.model-card__meta { display:grid;margin-top:10px; }
.model-card__meta small { color:var(--dv-accent);font-weight:700; }
.model-card__meta strong { font-size:14px;margin:3px 0; }
.model-card__meta span { font-size:11px;line-height:1.45;color:var(--dv-muted); }
.coming-badge { position:absolute;top:7px;right:7px;background:var(--dv-ink);color:#fff;padding:4px 6px;font-size:8px;letter-spacing:.08em; }
.empty-state { grid-column:1/-1;padding:30px;border:1px dashed var(--dv-line);color:var(--dv-muted); }

.finish-options { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
.finish-option { display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:center;border:1px solid var(--dv-line);padding:9px;cursor:pointer;position:relative; }
.finish-option input { position:absolute;opacity:0; }
.finish-option:has(input:checked) { border-color:var(--dv-accent);box-shadow:inset 0 -3px var(--dv-accent); }
.finish-sample { height:70px;overflow:hidden;background:#ddd; }
.finish-sample img { width:100%;height:100%;object-fit:cover;display:block; }
.finish-option strong { font-size:12px;display:block; }
.finish-option small { color:var(--dv-muted);font-size:10px; }

.spec-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px; }
.spec-grid label { display:grid;gap:7px;font-size:12px;font-weight:600; }
.spec-grid select,.spec-grid input { width:100%;padding:12px;border:1px solid var(--dv-line);background:#fff;font:inherit; }
.selection-summary { background:var(--dv-ink);color:#fff;padding:28px; }
.selection-summary h2 { font-size:28px;margin-bottom:20px; }
.selection-summary dl { margin:0 0 24px; }
.selection-summary dl div { display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px solid #4b4b4b; }
.selection-summary dt { color:#bdb9b4;font-size:12px; }
.selection-summary dd { margin:0;text-align:right;font-size:13px; }
.selection-actions { display:grid;grid-template-columns:1fr 1fr;gap:9px; }
.selection-actions button { padding:14px;border:1px solid #fff;background:#fff;color:var(--dv-ink);font-weight:600;cursor:pointer; }
.selection-actions button:last-child { background:transparent;color:#fff; }
#catalog-status { min-height:22px;margin-top:10px;color:#e2b17c;font-size:12px; }

.shortlist-section,.quote-section-v2 { padding:72px 7%;background:#fff;border-top:1px solid var(--dv-line); }
.shortlist-head { display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:28px; }
.shortlist-head h2 { margin-top:12px; }
.text-button { border:0;background:none;border-bottom:1px solid currentColor;padding:6px 0;cursor:pointer; }
.shortlist-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
.shortlist-card { padding:20px;border:1px solid var(--dv-line); }
.shortlist-card>span { font-size:10px;letter-spacing:.14em;color:var(--dv-accent); }
.shortlist-mini { height:180px;display:grid;place-items:center;background:#efede9;margin:12px 0; }
.shortlist-mini .door-art { height:155px;width:auto; }
.shortlist-card h3 { font-size:18px;margin:8px 0; }
.shortlist-card p { color:var(--dv-muted);font-size:12px;min-height:58px; }
.shortlist-card>div:last-child { display:flex;justify-content:space-between;align-items:center;margin-top:14px; }
.shortlist-card button { border:0;background:none;border-bottom:1px solid currentColor;padding:5px 0;cursor:pointer; }
.shortlist-card [data-remove] { border:1px solid var(--dv-line);width:30px;height:30px;padding:0; }

.quote-section-v2 { background:#efede9; }
.quote-section-v2 h2 { margin:14px 0 10px; }
.quote-section-v2>p { color:var(--dv-muted);max-width:680px;margin-bottom:28px; }
.quote-form-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.quote-form-grid label { display:grid;gap:7px;font-size:12px;font-weight:600; }
.quote-form-grid input,.quote-form-grid select { padding:13px;border:1px solid var(--dv-line);background:#fff;font:inherit; }
.quote-submit { margin-top:18px;padding:15px 22px;border:0;background:var(--dv-ink);color:#fff;font-weight:600;cursor:pointer; }
#quote-status { margin-top:10px;font-size:12px; }

@media(max-width:1100px) {
  .catalog-workspace { grid-template-columns:1fr; }
  .preview-sticky { position:relative;top:auto; }
  .product-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .catalog-hero { padding:58px 7%;grid-template-columns:1fr;gap:34px; }
  .catalog-hero__aside { border-left:0;border-top:1px solid #555;padding:20px 0 0; }
  .catalog-block { padding:54px 7%; }
  .catalog-block__head { grid-template-columns:1fr;gap:16px; }
  .product-options { grid-template-columns:1fr; }
  .product-option { min-height:150px; }
  .catalog-workspace { padding:30px 4%; }
  .preview-sticky,.control-section,.selection-summary { padding:20px; }
  .door-preview-stage { min-height:390px; }
  #door-preview { width:min(62%,200px); }
  .category-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .model-grid { grid-template-columns:repeat(2,minmax(0,1fr));max-height:650px; }
  .model-card__visual { height:150px; }
  .model-card__visual .door-art { height:125px; }
  .finish-options { grid-template-columns:1fr; }
  .spec-grid,.selection-actions,.quote-form-grid { grid-template-columns:1fr; }
  .shortlist-section,.quote-section-v2 { padding:54px 7%; }
  .shortlist-grid { grid-template-columns:1fr; }
}