:root { --navy:#3D4559; --coral:#D96268; --blush:#F6E6E7; --sky:#EAF0F5; --paper:#FBF7F6; --line:#E4DCCF; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--navy); background:var(--paper); }
.top { display:flex; align-items:center; gap:12px; padding:10px 18px; background:#fff; border-bottom:1px solid var(--line); }
.top strong { font-family: Georgia, serif; font-size:18px; }
.spacer { flex:1; }
.muted { color:#6A7185; } .small { font-size:12px; }
.badge { background:var(--coral); color:#fff; border-radius:3px; padding:2px 8px; font-size:11px; letter-spacing:.08em; }
.order input { margin-left:6px; padding:6px 8px; border:1px solid var(--line); border-radius:2px; width:170px; }
.layout { display:grid; grid-template-columns: 340px 6px 1fr; height: calc(100vh - 52px); }
.panel { overflow-y:auto; padding:14px 16px; background:#fff; border-right:1px solid var(--line); }
.panel section { margin-bottom:18px; }
.panel h3 { font-family: Georgia, serif; font-weight:normal; font-size:16px; margin:0 0 8px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chips button, .row button, button.ghost { border:1px solid var(--navy); background:#fff; color:var(--navy); padding:6px 10px; border-radius:2px; cursor:pointer; font-size:13px; }
.chips button.on { background:var(--navy); color:#fff; }
.list { display:grid; grid-template-columns: 1fr 1fr; gap:6px; }
.list button { border:1px solid var(--line); background:var(--paper); padding:10px 6px; cursor:pointer; font-size:12px; border-radius:2px; text-align:center; }
.list button.on { border-color:var(--navy); background:var(--sky); }
.tools textarea, .tools select { width:100%; margin:6px 0; padding:8px; border:1px solid var(--line); border-radius:2px; font:inherit; }
.tools label { display:block; font-size:13px; margin-top:6px; }
.row { display:flex; gap:6px; margin:6px 0; }
.icons { display:grid; grid-template-columns: repeat(5, 1fr); gap:6px; }
.icons button { aspect-ratio:1; border:1px solid var(--line); background:#fff; padding:4px; cursor:pointer; border-radius:2px; }
.icons img { width:100%; height:100%; object-fit:contain; }
.stage { display:flex; flex-direction:column; align-items:center; padding:12px; overflow:auto; background:var(--sky); }
.canvasWrap { box-shadow: 0 6px 24px rgba(61,69,89,.12); background:#fff; }
.actions { display:flex; align-items:center; gap:10px; margin-top:10px; }
button.primary { background:var(--navy); color:#fff; border:0; padding:10px 18px; border-radius:2px; cursor:pointer; font-size:14px; }
.warn { background:var(--coral); color:#fff; padding:8px 14px; border-radius:2px; margin-bottom:8px; font-size:13px; }
.adm { max-width:1000px; margin:0 auto; padding:18px; }
.adm section { background:#fff; border:1px solid var(--line); padding:16px; margin-bottom:16px; }
.adm h2 { font-family: Georgia, serif; font-weight:normal; margin:0 0 10px; }
.adm form { display:flex; flex-wrap:wrap; gap:8px; align-items:end; margin-bottom:12px; }
.adm form label { display:flex; flex-direction:column; font-size:12px; gap:3px; }
.adm input, .adm select { padding:6px 8px; border:1px solid var(--line); border-radius:2px; }
.adm table { width:100%; border-collapse:collapse; font-size:13px; }
.adm td, .adm th { border-bottom:1px solid var(--line); padding:6px; text-align:left; vertical-align:middle; }
.adm .sample { font-size:24px; }
.adm .ic { display:grid; grid-template-columns: repeat(10, 1fr); gap:6px; }
.adm .ic div { border:1px solid var(--line); aspect-ratio:1; position:relative; }
.adm .ic img { width:100%; height:100%; object-fit:contain; }
.adm .ic button { position:absolute; top:2px; right:2px; font-size:10px; }
.adm .note { font-size:12px; color:#6A7185; }

.stagebar { display:flex; justify-content:space-between; align-items:center; width:100%; max-width:720px; margin-bottom:8px; font-size:14px; }
.stagebar #sizeLabel { font-weight:600; font-size:20px; font-family: Georgia, serif; flex:1; text-align:center; }
.stagebar button { border:1px solid var(--navy); background:#fff; color:var(--navy); padding:5px 10px; border-radius:2px; cursor:pointer; }
.stagebar button:disabled { opacity:.35; cursor:default; }
.list button.tpl { display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px; }
.list .thumb { display:flex; align-items:center; justify-content:center; width:100%; height:150px; background:#fff; }
.list .thumb img { max-width:100%; max-height:100%; box-shadow:0 1px 4px rgba(61,69,89,.15); }

.splitter { cursor: col-resize; background: var(--line); }
.splitter:hover { background: var(--navy); }
.cats { margin-bottom: 8px; }
.cats button { font-size: 12px; padding: 4px 8px; }
.zoom { display:flex; align-items:center; gap:4px; }
.zoom span { min-width: 46px; text-align:center; font-size:13px; }
.stage .hint { margin: -4px 0 6px; }
.canvasWrap { overflow: hidden; }
.stagebar { flex-wrap: wrap; row-gap: 6px; }
.stagebar #sizeLabel { flex-basis: 100%; order: -1; }
.zoom button { font-size: 18px; min-width: 38px; padding: 4px 10px; font-weight: 600; }
.zoom button#zoomFit { font-size: 13px; font-weight: normal; }

.centerToggle { border: 2px solid var(--navy); background: #fff; color: var(--navy); padding: 6px 14px; border-radius: 20px;
  cursor: pointer; font-size: 15px; font-weight: 600; }
.centerToggle small { font-weight: normal; font-size: 11px; opacity: .8; }
.centerToggle.on { background: #2F6FD6; border-color: #2F6FD6; color: #fff; }
.stage { align-items: stretch; }
.stage .stagebar, .stage .hint, .stage .warn, .stage .actions { align-self: center; }
.canvasWrap { align-self: center; background: #fff; border-radius: 4px; }

.top .brand { font-size: 26px; letter-spacing: .04em; }
.admnav { display:flex; gap:18px; padding:8px 18px; background:var(--sky); border-bottom:1px solid var(--line); font-size:14px; position:sticky; top:0; z-index:5; }
.admnav a { color:var(--navy); text-decoration:none; font-weight:600; }
.pill { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--paper); padding:5px 8px; border-radius:16px; font-size:13px; }
.pill button { border:0; background:transparent; cursor:pointer; color:var(--coral); font-size:15px; padding:0 2px; }
.tplcat { font-family: Georgia, serif; font-weight:normal; margin:16px 0 8px; border-bottom:1px solid var(--line); padding-bottom:4px; }
.tplgrid { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.tplcard { border:1px solid var(--line); padding:8px; font-size:13px; display:flex; flex-direction:column; gap:4px; background:#fff; }
.tplcard .thumb { height:170px; display:flex; align-items:center; justify-content:center; background:var(--paper); }
.tplcard .thumb img { max-height:100%; max-width:100%; }
.tplcard .links { font-size:12px; }
.warnTxt { color:var(--coral); font-size:12px; }
/* Panel genişledikçe kartlar büyümez, yan yana daha çok kart sığar */
.panel .list { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.panel .list .thumb { height: 160px; }
.panel .icons { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }

.fontbox { margin: 8px 0; }
.fcats { margin: 6px 0; }
.fcats button { font-size: 12px; padding: 4px 8px; }
.flist { max-height: 300px; overflow-y: auto; border: 1px solid var(--line); background: #fff; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.fopt { border: 0; border-bottom: 1px solid var(--line); background: #fff; text-align: center; padding: 10px 8px; cursor: pointer;
  font-size: 22px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--navy); min-height: 52px; }
.fopt:hover { background: var(--sky); }
.fopt.on { background: var(--blush); outline: 2px solid var(--coral); outline-offset: -2px; }

[hidden] { display: none !important; }

.syncbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 18px; background:var(--blush); font-size:13px; }
.syncbar button { border:1px solid var(--navy); background:#fff; color:var(--navy); padding:4px 10px; border-radius:2px; cursor:pointer; }

.gate { position: fixed; inset: 0; background: rgba(61,69,89,.45); display: flex; align-items: center; justify-content: center; z-index: 50; }
.gatebox { background: #fff; width: min(440px, 92vw); padding: 26px; border-radius: 4px; display: grid; gap: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.gatebox h2 { font-family: Georgia, serif; font-weight: normal; margin: 0; }
.gatebox label { display: grid; gap: 4px; font-size: 14px; }
.gatebox input:not([type=radio]) { padding: 10px; border: 1px solid var(--line); border-radius: 2px; font: inherit; }
.gatebox .plat { gap: 14px; }
.gatebox .plat label { display: flex; align-items: center; gap: 6px; }
.gatebox .err { color: var(--coral); min-height: 1.1em; font-size: 13px; }
.order select { padding: 4px 6px; border: 1px solid var(--line); max-width: 360px; }
.linkbtn { border: 0; background: none; color: var(--coral); cursor: pointer; text-decoration: underline; font-size: 12px; }

/* sipariş onayı */
.citems { display: grid; gap: 10px; max-height: 50vh; overflow: auto; }
.citem { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; border: 1px solid var(--line); padding: 8px; }
.citem img { width: 96px; height: 96px; object-fit: cover; background: #f4f4f4; }
.citem .t { font-size: 14px; }
.citem .s { font-weight: bold; margin-top: 4px; }
.citem .p { white-space: pre-wrap; font-size: 13px; color: #555; margin-top: 4px; }
.cbtns { gap: 10px; }
.chips button:disabled { opacity: .35; cursor: not-allowed; }
.notice { background: #fff6e5; border: 1px solid #f0d9a8; padding: 8px 12px; margin: 6px 0; font-size: 14px; }

/* renk seçici */
.colorbox { margin: 8px 0; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; align-items: center; }
.swatches button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #bbb; padding: 0; cursor: pointer; }
.swatches button.on { outline: 2px solid var(--coral); outline-offset: 2px; }
.swatches label.custom { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; }
.swatches input[type=color] { width: 30px; height: 28px; border: 1px solid #bbb; padding: 0; background: none; cursor: pointer; }
.liclegend { margin: 4px 0; }
.licdots { display: block; font-size: 11px; margin-top: 2px; }
.licdots b { font-weight: bold; }
.lictoggle { font-size: 12px; }
.lictoggle.on { background: #fff3e0; border-color: #e67e00; }