/* MODERA model galerisi · Sürüm 12.1 — kart ızgarası, ayrıntı paneli ve parça listesi (telefon önce, geniş ekranda iki sütun). */
.modelGallery,.modelDetail,.modelParts{--mg-ink:#2b1c0e;--mg-line:#cbbba4;--mg-paper:#fffaf0;--mg-card:#fffdf8;--mg-soft:#f4efe4;--mg-gold:#c9972b;--mg-muted:#6b5a47;--mg-bad:#a3321f;margin:14px 0}
.modelLibrary[hidden]{display:none!important}
.mgSr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mgHead h3,.mdHead h3,.modelParts h3{margin:6px 0 4px;font-size:19px;line-height:1.25;color:var(--mg-ink)}
.mgLead,.mdLead,.mdStyle{margin:4px 0 12px;font-size:14px;line-height:1.45;color:var(--mg-muted)}
.mgStatus{margin:10px 0;color:var(--mg-muted)}
.mgTools{display:flex;align-items:center;gap:10px;margin:6px 0 10px}
.mgSearchBox{flex:1;min-width:0}
.mgSearch{width:100%;box-sizing:border-box;min-height:46px;border:1px solid var(--mg-line);border-radius:14px;background:var(--mg-card);padding:0 14px;font:inherit;font-size:16px;color:var(--mg-ink)}
.mgCount{font-size:12.5px;color:var(--mg-muted);white-space:nowrap}
.mgChips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;margin:0 -2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mgChips::-webkit-scrollbar{display:none}
.mgChip{flex:0 0 auto;min-height:38px;padding:0 14px;border:1px solid var(--mg-line);border-radius:999px;background:var(--mg-card);color:var(--mg-ink);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;touch-action:manipulation}
.mgChip[aria-pressed=true]{background:var(--mg-ink);border-color:var(--mg-ink);color:#fff}
.mgGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mgCard{display:flex;flex-direction:column;gap:4px;min-width:0;padding:7px;border:1px solid var(--mg-line);border-radius:16px;background:#fff;color:var(--mg-ink);text-align:left;font:inherit;cursor:pointer;touch-action:manipulation;transition:border-color .15s,box-shadow .15s}
.mgCard[hidden]{display:none!important}
.mgCard:hover{border-color:var(--mg-ink)}
.mgCard[aria-pressed=true]{border-color:var(--mg-ink);box-shadow:0 0 0 2px var(--mg-gold)}
.mgThumb{position:relative;display:block;aspect-ratio:4/3;border-radius:11px;overflow:hidden;background:var(--mg-soft)}
.mgThumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.mgThumb img[hidden]{display:none}
.mgSkel{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%) 0 0/200% 100% no-repeat,var(--mg-soft);animation:mgShimmer 1.3s linear infinite}
@keyframes mgShimmer{to{background-position:-200% 0,0 0}}
@media(prefers-reduced-motion:reduce){.mgSkel{animation:none}}
.mgName{font-size:13px;font-weight:800;line-height:1.3;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mgMeta{font-size:11.5px;color:var(--mg-muted)}
.mgTags em{display:inline-block;font-style:normal;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--mg-soft);color:var(--mg-ink)}
.mgEmpty,.mgNote{margin:12px 2px 0;font-size:12.5px;color:var(--mg-muted);line-height:1.45}

/* ayrıntı paneli */
.mdHead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.mdHead>div{min-width:0;flex:1 1 auto}
.mdHead .mdBack{flex:0 0 auto;width:auto;min-width:max-content;min-height:42px;white-space:nowrap;padding-inline:14px}
.mdName{overflow-wrap:anywhere}
.mdBody{display:block}
.mdStage{position:relative;aspect-ratio:4/3;background:var(--mg-soft);border:1px solid var(--mg-line);border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.mdStage canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:pan-y}
.mdBusy{margin:0;padding:12px;text-align:center;color:var(--mg-muted);font-size:14px}
.mdViews,.mdModes{display:grid;gap:6px;margin-top:8px}
.mdViews{grid-template-columns:repeat(4,minmax(0,1fr))}
.mdModes{grid-template-columns:repeat(2,minmax(0,1fr))}
.mdViews button,.mdModes button,.mdSeg button{min-height:42px;border:1px solid var(--mg-line);border-radius:12px;background:var(--mg-paper);color:var(--mg-ink);font:inherit;font-weight:800;font-size:13px;cursor:pointer;touch-action:manipulation;padding:0 10px}
.mdViews button[aria-pressed=true],.mdModes button[aria-pressed=true],.mdSeg button[aria-pressed=true]{background:var(--mg-ink);border-color:var(--mg-ink);color:#fff}
.mdTotals{margin:10px 2px 4px;font-size:13.5px;font-weight:700;color:var(--mg-ink);line-height:1.4}
.mdControls{margin-top:8px}
.mdDims{display:grid;gap:10px;margin:8px 0 6px}
.mdDim{padding:10px 12px;border:1px solid var(--mg-line);border-radius:14px;background:var(--mg-card)}
.mdDim.mdFixed{display:flex;justify-content:space-between;align-items:center;font-weight:700}
.mdDimHead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mdDimName{font-weight:800}
.mdDimHead label{font-size:14px;color:var(--mg-ink)}
.mdRange{font-size:12px;color:var(--mg-muted)}
.mdDimIn{display:flex;align-items:center;gap:12px;margin-top:6px}
.mdDimIn input[type=range]{flex:1;min-width:0;height:34px;accent-color:var(--mg-ink);touch-action:pan-y}
.mdDimIn input[type=number]{width:96px;box-sizing:border-box;min-height:44px;border:1px solid var(--mg-line);border-radius:12px;padding:0 10px;font:inherit;font-size:16px;font-weight:800;text-align:right;background:#fff;color:var(--mg-ink)}
.mdDimErr{display:block;margin-top:4px;font-size:12.5px;color:var(--mg-bad)}
.mdRow{margin:12px 0}
.mdLabel{display:block;margin-bottom:6px;font-size:13.5px;font-weight:800;color:var(--mg-ink)}
.mdLabel b{font-weight:700;color:var(--mg-muted)}
.mdSeg{display:flex;flex-wrap:wrap;gap:6px}
.mdSeg button{flex:1 1 auto}
.mdSwatches{display:flex;flex-wrap:wrap;gap:10px}
.mdSwatch{width:44px;height:44px;border-radius:50%;border:2px solid var(--mg-line);background:linear-gradient(135deg,var(--b) 50%,var(--d) 50%);cursor:pointer;padding:0;touch-action:manipulation}
.mdSwatch[aria-pressed=true]{border-color:var(--mg-ink);box-shadow:0 0 0 3px var(--mg-gold)}
.mdBase{margin:10px 2px;font-size:12.5px;color:var(--mg-muted);line-height:1.45}
.mdNotes{margin:6px 0 10px;padding:0 0 0 18px;font-size:12.5px;line-height:1.5;color:var(--mg-muted)}
.mdAct{display:grid;gap:8px;margin-top:12px}
.mdAct .btn{min-height:50px;font-weight:800}
.mdAppend{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--mg-ink);padding:8px 2px}
.mdAppend input{width:22px;height:22px;accent-color:var(--mg-ink)}
.mdReplace{margin:0;font-size:12.5px;color:var(--mg-bad);line-height:1.4}
.mdMsg{margin:4px 2px 0;font-size:13px;color:var(--mg-muted);min-height:1em}
.mdMsg.mdErrMsg{color:var(--mg-bad);font-weight:700}

/* parça listesi */
.modelParts h4{margin:18px 0 6px;font-size:15px;color:var(--mg-ink)}
.modelParts .tableWrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.modelParts .table{width:100%;border-collapse:collapse;font-size:12.5px}
.modelParts .table th,.modelParts .table td{padding:6px 8px;border-bottom:1px solid #e3d8c6;text-align:left;vertical-align:top}
/* telefon: sütunlu tablo yerine her parça iki satırlık kart (yatay kaydırma gerekmez) */
@media(max-width:560px){
 .modelParts .table{white-space:normal;display:block}
 .modelParts .table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .modelParts .table tbody{display:block}
 .modelParts .table tr{display:flex;flex-wrap:wrap;gap:1px 14px;padding:7px 2px;border-bottom:1px solid #e3d8c6}
 .modelParts .table th,.modelParts .table td{display:block;border:0;padding:0;white-space:normal}
 .modelParts .table td:first-child{flex:1 0 100%;font-weight:700;color:var(--mg-ink);overflow-wrap:anywhere}
 .modelParts .table td[data-l]{font-size:12px;color:var(--mg-muted);white-space:nowrap}
 .modelParts .table td[data-l]::before{content:attr(data-l) ': ';opacity:.8}
}
.mdAllParts{margin:10px 0;border:1px solid var(--mg-line);border-radius:12px;padding:6px 10px;background:var(--mg-card)}
.mdAllParts summary{min-height:40px;display:flex;align-items:center;font-weight:800;cursor:pointer}

/* klasik form (elle ölçü) */
.legacyManual{margin:14px 0;border:1px solid #cbbba4;border-radius:16px;background:#fffdf8;padding:0 12px}
.legacyManual>summary{min-height:56px;display:flex;flex-direction:column;justify-content:center;gap:2px;cursor:pointer;list-style:none}
.legacyManual>summary::-webkit-details-marker{display:none}
.legacyManual>summary b{font-size:15px;color:#2b1c0e}
.legacyManual>summary small{font-size:12.5px;color:#6b5a47}
.legacyManual[open]{padding-bottom:12px}

/* geniş ekran: görsel solda yapışık, ayarlar sağda */
@media(min-width:640px){.mgGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:980px){
 .mgGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
 .mdBody{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);gap:22px;align-items:start}
 .mdVisual{position:sticky;top:16px}
 .mdControls{margin-top:0}
}
@media(min-width:1320px){.mgGrid{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* donanım listesi (modera-hardware-bom.js çıktısı) */
.modelParts .bomBox{overflow-x:auto}
.modelParts .bomTable{width:100%;border-collapse:collapse;font-size:13px}
.modelParts .bomTable th,.modelParts .bomTable td{border-bottom:1px solid rgba(120,120,120,.28);padding:6px 8px;text-align:left;vertical-align:top;font-size:13px}
.modelParts .bomTable thead th{font-size:12px;color:var(--mg-muted);text-transform:none;letter-spacing:0;background:transparent}
.modelParts .bomTable td small{display:block;opacity:.72;font-size:11.5px;margin-top:2px}
.modelParts .bomQty{white-space:nowrap;font-weight:800;text-align:right}
.modelParts .bomGroup th{background:rgba(120,120,120,.14);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.modelParts .bomWarn{margin:10px 0 0;padding:8px 12px 8px 26px;background:#fff3e0;border-radius:10px;color:#7a3b00;font-size:13px}
.modelParts .bomNotes{margin:10px 0 0;padding-left:18px;font-size:12px;opacity:.85}

/* Production settings stay next to the cut-list actions, including narrow app screens. */
.mdProduction{width:100%;min-width:0;box-sizing:border-box;grid-column:1/-1}
.modelParts .actions>.mdProduction{flex:0 0 100%}
.mdProductionToggle{width:100%}
.mdProductionPanel{margin-top:10px;padding:14px;border:1px solid #cbbba4;border-radius:14px;background:#fffdf8;color:#2b1c0e;box-sizing:border-box;min-width:0}
.mdProductionPanel[hidden]{display:none!important}
.mdProductionPanel h4{margin:0 0 12px}
.mdProductionFields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mdProductionFields>div{min-width:0}
.mdProductionFields label{display:block;font-size:14px;line-height:1.4;margin-bottom:6px}
.mdProductionFields input{width:100%;min-width:0;max-width:100%;padding:10px;box-sizing:border-box}
.mdProductionHint{font-size:13px;line-height:1.45;color:#6b5a47}
.mdProductionError{color:#9d271e;font-size:14px;line-height:1.4}
.mdProductionActions{display:flex;gap:10px;flex-wrap:wrap}
.mdProductionActions>.btn{flex:1;min-width:100px}
@media(max-width:600px){.mdProductionFields{grid-template-columns:minmax(0,1fr)}}