@font-face{font-family:Clash;src:url(/varlik/a47c0bf033a1.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Clash;src:url(/varlik/f98be4842650.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Clash;src:url(/varlik/f49f8bb2db96.woff2) format("woff2");font-weight:500;font-display:swap}
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --primary: #0d597c;
  --primary-light: rgba(13,89,124,0.08);
  --white: #fff;
  --border: #dde8e8;
  --font: 'Montserrat', sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
html, body { height: 100%; overflow: hidden; font-family: var(--font); color: var(--primary); }

.header {
  background: #fff;
  padding: 0 32px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  position: relative;
}
.header-logo { display: flex; align-items: center; gap: 14px; }
.header-logo svg { height: 28px; width: auto; }
.header-logo-mark { display:block; height:26px; width:160px; background:#5cbb79; -webkit-mask:url(/varlik/b6c2b9ee7fd4.webp) no-repeat left center; -webkit-mask-size:contain; mask:url(/varlik/b6c2b9ee7fd4.webp) no-repeat left center; mask-size:contain; }
.header-logo-sep {
  width: 1px; height: 14px;
  background: var(--primary);
}
.header-logo-sub {
  font-size: 9px; font-weight: 400; color: var(--primary);
  text-transform: uppercase; letter-spacing: 1.5px;
}
.btn-back {
  color: var(--primary); font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; border: 1px solid rgba(13,89,124,0.3);
  padding: 7px 16px; cursor: pointer; background: transparent; font-family: var(--font);
  transition: all .15s;
}
.btn-back:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

.layout {
  display: flex;
  height: calc(100vh - 72px);
  background: #dde8e8;
}
.canvas-wrap { margin-top: 0; }
.sidebar { margin-top: 0; }

/* CANVAS */
.canvas-wrap {
  flex: 1;
  position: relative;
  background: #dde8e8;
  overflow: hidden;
}
#c { width: 100%; height: 100%; display: block; }

.view-buttons {
  position: absolute;
  top: 24px; left: 32px;
  display: flex; flex-direction: column; gap: 6px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  width: 110px;
}
.view-btn {
  background: transparent;
  border: 1px solid rgba(13,89,124,0.25);
  color: var(--primary);
  padding: 6px 10px; font-size: 10px; font-weight: 400;
  cursor: pointer; font-family: var(--font);
  text-transform: uppercase; letter-spacing: 0.5px;
  white-space: nowrap; width: 100%; text-align: center;
  transition: border-color .15s;
}
.view-btn:hover { border-color: rgba(13,89,124,0.55); background: transparent; color: var(--primary); }
.view-btn.active { border: 1px solid var(--primary); background: transparent; color: var(--primary); font-weight: 400; }
.view-sep { height: 1px; background: rgba(13,89,124,0.15); margin: 4px 0; }
#surfViewBtns { display: flex; flex-direction: column; gap: 6px; }
.view-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.view-quad .view-btn { padding: 5px 0; font-size: 9px; }

/* 2D Design canvas overlay */
.design-overlay {
  position: absolute; inset: 0;
  background: #dde8e8;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}
.design-canvas-wrap {
  position: relative;
}
#dc2d {
  display: block;
  cursor: grab;
  /* Alana sığacak kadar küçülür, oran korunur (fare koordinatı canvasXY'de ölçekleniyor) */
  width: auto !important; height: auto !important;
  max-width: 100%; max-height: calc(100vh - 72px - 110px);
}
.design-overlay { padding: 20px 24px 76px 160px; }
.design-canvas-wrap { max-width: 100%; max-height: 100%; display: flex; }
#dc2d:active { cursor: grabbing; }
/* Unified bottom bar wrapper */
.bottom-bar {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  pointer-events: none;
}
.bottom-bar > * { pointer-events: all; }
.bar-sep { width: 1px; height: 20px; background: rgba(13,89,124,0.2); }

.design-toolbar {
  display: flex; gap: 3px; align-items: center;
  background: transparent; border: none; padding: 0;
}
.dc-btn {
  border: 1px solid rgba(13,89,124,0.25); background: transparent; color: var(--primary);
  padding: 0; font-size: 12px; font-weight: 400; font-family: var(--font);
  cursor: pointer; line-height: 1; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.dc-btn.text-btn {
  font-size: 9px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px;
  width: auto; padding: 0 8px;
}
.dc-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.dc-sep { width: 1px; height: 20px; background: rgba(13,89,124,0.15); margin: 0 2px; }
.dc-scale-lbl { font-size: 10px; color: var(--primary); font-family: var(--font); min-width: 38px; text-align: center; font-weight: 400; }

.canvas-hint { display: none; }

/* 3D Navigation bar */
.nav3d-bar {
  display: flex; align-items: center; gap: 3px;
  background: transparent; border: none; padding: 0;
}
.nav3d-btn {
  width: 28px; height: 28px; border: 1px solid rgba(13,89,124,0.25);
  background: transparent; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  color: var(--primary); transition: all .15s;
}
.nav3d-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.nav3d-btn.active { border-color: var(--primary); color: var(--primary); }
.nav3d-sep { width: 1px; height: 20px; background: rgba(13,89,124,0.15); margin: 0 3px; }

/* LAYER ACTIONS BAR */
.layer-actions {
  display: none; gap: 3px; align-items: center;
  background: transparent; border: none; padding: 0;
}
.layer-actions.visible { display: flex; }
.la-btn {
  border: 1px solid rgba(13,89,124,0.25); background: transparent; color: var(--primary);
  padding: 0; font-size: 12px; cursor: pointer; line-height: 1;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  transition: all .15s; font-family: var(--font);
}
.la-btn.la-del { border-color: rgba(180,50,50,0.35); color: #c0392b; }
.la-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.la-btn.la-del:hover { background: #c0392b; border-color: #c0392b; color: #fff; }
.la-sep { width: 1px; height: 20px; background: rgba(13,89,124,0.15); margin: 0 3px; }
.la-lbl { font-size: 9px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px; color: var(--primary); opacity:.5; }

/* ARAÇ RAYI + SEKMELİ PANEL */
.layout { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }
.rail {
  order: 0; width: 76px; flex-shrink: 0; background: #fff;
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  padding: 12px 8px; border-right: 1px solid rgba(13,89,124,0.12);
}
.rail-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 2px; border: none; background: transparent; cursor: pointer;
  color: rgba(13,89,124,0.62); font-family: var(--font); font-size: 9.5px; letter-spacing: 0.3px;
  border-radius: 8px; transition: background-color .15s ease, color .15s ease, transform .16s var(--ease-out);
}
.rail-btn svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .rail-btn:hover { background: rgba(13,89,124,0.06); color: var(--primary); } }
.rail-btn:active { transform: scale(0.96); }
.rail-btn.active { background: rgba(13,89,124,0.1); color: var(--primary); font-weight: 600; }
.sidebar .s-section { display: none; }
.sidebar .s-section.tab-on { display: block; }
.tab-empty { font-size: 11px; line-height: 1.6; color: rgba(13,89,124,0.7); padding: 4px 0; }
/* Katman listesi */
.lyr-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.lyr-item {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; cursor: pointer;
  border: 1px solid rgba(13,89,124,0.18); border-radius: 8px; font-size: 11px;
  transition: border-color .15s ease;
}
@media (hover: hover) and (pointer: fine) { .lyr-item:hover { border-color: rgba(13,89,124,0.5); } }
.lyr-item.sel { outline: 1px solid var(--primary); outline-offset: -1px; }
.lyr-item.off .lyr-name { opacity: .4; }
.lyr-kind { font-size: 8.5px; text-transform: uppercase; letter-spacing: .6px; opacity: .55; width: 38px; flex-shrink: 0; }
.lyr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lyr-tg {
  width: 24px; height: 24px; border: none; background: transparent; cursor: pointer; color: var(--primary);
  display: flex; align-items: center; justify-content: center; border-radius: 6px; opacity: .45;
  transition: opacity .15s ease, background-color .15s ease;
}
.lyr-tg.on { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .lyr-tg:hover { background: rgba(13,89,124,0.08); opacity: 1; } }
.prop-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 11px; }
.prop-row label { width: 70px; flex-shrink: 0; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
.prop-row input[type=range] { flex: 1; accent-color: var(--primary); }
.prop-val { width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.tool-btn {
  border: 1px solid rgba(13,89,124,0.25); background: transparent; color: var(--primary);
  font-family: var(--font); font-size: 10.5px; padding: 9px 6px; cursor: pointer; border-radius: 8px;
  transition: border-color .15s ease, background-color .15s ease, transform .16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .tool-btn:hover { border-color: var(--primary); } }
.tool-btn:active { transform: scale(0.97); }
.tool-btn.wide { grid-column: 1 / -1; }
.tool-btn.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.tool-btn:disabled { opacity: .35; cursor: default; }
.edit-note { font-size: 12px; padding: 7px 9px; border-radius: 8px; background: rgba(13,89,124,0.07); line-height: 1.5; }
.kb-hint { font-size: 10px; line-height: 1.8; opacity: .7; margin-top: 12px; }
.kb-hint kbd { font-family: var(--font); font-size: 9px; border: 1px solid rgba(13,89,124,0.3); border-radius: 4px; padding: 0 4px; }
.qr-in { font-family: var(--font); font-size: 11px; padding: 8px 10px; border: 1px solid rgba(13,89,124,0.25); color: var(--primary); width: 100%; background: transparent; border-radius: 8px; margin-bottom: 8px; }
/* SIDEBAR */
.sidebar {
  order: 1; width: 330px; flex-shrink: 0;
  background: #f7fafa; border-right: 1px solid rgba(13,89,124,0.12);
  display: flex; flex-direction: column; overflow-y: auto;
  padding-right: 22px;
}
.canvas-wrap { order: 2; }

.s-section { border-bottom: none; padding: 12px 0 18px 24px; margin-bottom: 8px; }
.s-section:first-child { padding-top: 24px; }
.s-section:last-child { margin-bottom: 0; }
.s-title {
  font-size: 10px; font-weight: 400; text-transform: uppercase;
  letter-spacing: 1.5px; margin-bottom: 14px; color: var(--primary);
}

/* RAF SELECTOR */
.model-selector { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 18px; }
.model-btn { border: 1px solid rgba(13,89,124,0.25); background: transparent; padding: 10px 4px; text-align: center; cursor: pointer; font-family: var(--font); font-size: 12px; font-weight: 400; color: var(--primary); transition: border-color .15s, outline-color .15s; }
.model-btn:hover { border-color: var(--primary); }
.model-btn.active { outline: 1px solid var(--primary); outline-offset: -1px; }
.raf-selector { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: 6px; }
.raf-btn {
  border: 1px solid rgba(13,89,124,0.25); background: transparent;
  padding: 8px 4px; text-align: center; cursor: pointer;
  font-family: var(--font); font-size: 11px; font-weight: 400;
  color: var(--primary); transition: all .15s;
}
.raf-btn:hover { border-color: var(--primary); }
.raf-btn.active { outline: 1px solid var(--primary); outline-offset: -1px; background: transparent; color: var(--primary); font-weight: 400; }

/* SIZE SELECTOR */
.size-label { font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); margin-bottom: 14px; margin-top: 14px; }
.dim-label { font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); margin-bottom: 14px; margin-top: 14px; }
.size-selector { display: flex; gap: 6px; margin-bottom: 6px; }
.size-btn {
  flex: 1;
  border: 1px solid rgba(13,89,124,0.25); background: transparent;
  padding: 8px 4px; cursor: pointer; text-align: center;
  font-family: var(--font); font-size: 10px; font-weight: 400;
  color: var(--primary); transition: all .15s; white-space: nowrap;
}
.size-btn:hover { border-color: var(--primary); }
.size-btn.active { outline: 1px solid var(--primary); outline-offset: -1px; font-weight: 400; }

/* DIM BOXES */
.dim-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px; }
.dim-box {
  border: 1px solid rgba(13,89,124,0.25);
  padding: 10px 8px; text-align: center;
}
.dim-v { font-size: 14px; font-weight: 400; }
.dim-l { font-size: 9px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 3px; color: var(--primary); }
.spec-list { margin-top: 8px; }
.spec-item { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 2px; border-bottom: 1px solid rgba(13,89,124,0.15); }
.spec-l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--primary); }
.spec-v { font-size: 12px; font-weight: 400; color: var(--primary); }

/* SURFACE LIST */
.surf-list { display: flex; flex-direction: column; gap: 6px; }
.surf-item {
  border: 1px solid rgba(13,89,124,0.25); display: flex;
  align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer;
  transition: border-color .15s;
}
.surf-item:hover { border-color: var(--primary); position: relative; z-index: 1; }
.surf-item.active { outline: 1px solid var(--primary); outline-offset: -1px; position: relative; z-index: 1; }
.surf-thumb {
  width: 36px; height: 36px; background: rgba(13,89,124,0.08);
  border: 1px solid rgba(13,89,124,0.25); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; color: var(--primary);
  overflow: hidden; text-transform: uppercase;
}
.surf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.surf-add {
  width: 36px; height: 36px; background: rgba(13,89,124,0.08);
  border: 1px solid rgba(13,89,124,0.25); flex-shrink: 0;
  display: none; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 400; color: var(--primary);
  cursor: pointer; transition: all .15s; margin-left: 4px;
}
.surf-add:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.surf-add.visible { display: flex; }
.surf-info { flex: 1; min-width: 0; }
.surf-name { font-size: 12px; font-weight: 400; }
.surf-size { font-size: 10px; font-weight: 400; margin-top: 2px; color: var(--primary); }
.surf-btns { display: flex; gap: 0; }
.icon-btn {
  width: 28px; height: 28px; border: 1px solid rgba(13,89,124,0.25); border-right: none;
  background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--primary); flex-shrink: 0;
  transition: all .15s;
}
.icon-btn:last-child { border-right: 1px solid rgba(13,89,124,0.25); }
.icon-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* UPLOAD */
.upload-zone {
  border: 1px dashed rgba(13,89,124,0.25); padding: 20px;
  text-align: center; cursor: pointer; transition: all .15s;
}
.upload-zone:hover, .upload-zone.over { border-color: var(--primary); }
.upload-zone input { display: none; }
.up-icon { font-size: 22px; margin-bottom: 6px; }
.up-text { font-size: 12px; font-weight: 400; }
.up-sub { font-size: 10px; font-weight: 400; margin-top: 3px; color: var(--primary); }

.upload-preview { display: none; flex-wrap: wrap; gap: 6px; }
.upload-preview.visible { display: flex; }
.up-thumb {
  width: 48px; height: 48px; border: 1px solid var(--border); flex-shrink: 0;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; transition: border-color .15s;
}
.up-thumb:hover { border-color: var(--primary); }
.up-thumb.sel { outline: 1px solid var(--primary); outline-offset: -1px; }
.up-thumb img { width: 100%; height: 100%; object-fit: cover; }
.up-add {
  width: 48px; height: 48px; border: 1px solid rgba(13,89,124,0.25); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 300; color: var(--primary);
  cursor: pointer; transition: all .15s;
}
.up-add:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* COLORS */
.color-row { display: flex; gap: 6px; flex-wrap: wrap; }
.cswatch {
  width: 32px; height: 32px; cursor: pointer;
  border: 1px solid rgba(13,89,124,0.25); position: relative;
}
.cswatch.sel { outline: 1px solid var(--primary); outline-offset: -1px; }
.cswatch span {
  position: absolute; inset: 3px;
  display: block;
}
.cswatch.custom { overflow: hidden; }
.cswatch.custom span { background: conic-gradient(red,yellow,lime,cyan,blue,magenta,red); }
.cswatch.custom input[type=color] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}

/* Custom font select */
.font-select {
  -webkit-appearance: none; appearance: none;
  font-family: var(--font); font-size: 11px;
  padding: 7px 26px 7px 8px;
  border: 1px solid rgba(13,89,124,0.25);
  color: var(--primary); background: transparent;
  width: 100%; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230d597c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 8px) 50%;
}
/* Number spinner */
.number-spinner { position: relative; display: inline-flex; }
.number-spinner input[type=number] {
  width: 56px; font-family: var(--font); font-size: 11px;
  padding: 7px 18px 7px 8px;
  border: 1px solid rgba(13,89,124,0.25); color: var(--primary);
  background: transparent; -moz-appearance: textfield;
}
.number-spinner input[type=number]::-webkit-inner-spin-button,
.number-spinner input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }
.spinner-btns {
  position: absolute; right: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column; width: 16px;
  border-left: 1px solid rgba(13,89,124,0.25);
}
.spin-btn {
  flex: 1; border: none; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary); padding: 0; line-height: 1;
}
.spin-btn:hover { background: var(--primary-light); }
/* Text color swatch */
.text-color-swatch {
  width: 32px; height: 32px; border: 1px solid rgba(13,89,124,0.25);
  cursor: pointer; position: relative; flex-shrink: 0; overflow: hidden;
}
.text-color-swatch span { position: absolute; inset: 3px; display: block; }
.text-color-swatch input[type=color] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
/* Shape section */
.shape-grid { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.shape-btn {
  width: 36px; height: 36px; border: 1px solid rgba(13,89,124,0.25);
  background: transparent; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  color: var(--primary); transition: all .15s;
}
.shape-btn:hover { background: var(--primary-light); border-color: var(--primary); }
.shape-btn.sel { background: transparent; color: var(--primary); border-color: var(--primary); outline: 1px solid var(--primary); outline-offset: -1px; }
.shape-color-row { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
/* DC toolbar color swatch */
.dc-swatch {
  width: 26px; height: 26px; border: 1px solid rgba(13,89,124,0.25);
  cursor: pointer; position: relative; overflow: hidden; flex-shrink: 0;
}
.dc-swatch span { position: absolute; inset: 3px; display: block; }
.dc-swatch input[type=color] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

/* CTA */
.sidebar-cta { padding: 20px 24px; margin-top: auto; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.btn-save {
  background: var(--primary); color: #fff;
  border: 1px solid var(--primary); padding: 9px 18px; font-family: var(--font);
  font-size: 10px; font-weight: 400; text-transform: uppercase;
  letter-spacing: 1.5px; cursor: pointer; transition: all .15s;
}
.btn-save:hover { background: #08405c; border-color: #08405c; }
.btn-exit {
  background: transparent; color: var(--primary);
  border: 1px solid rgba(13,89,124,0.25); padding: 9px 18px; font-family: var(--font);
  font-size: 10px; font-weight: 400; text-transform: uppercase;
  letter-spacing: 1.5px; cursor: pointer; transition: all .15s;
}
.btn-exit:hover { border-color: var(--primary); }

/* KoliLazım: 8px radius */
.btn-back,.btn-save,.btn-exit,.view-btn,.raf-btn,.model-btn,.size-btn,.dc-btn,.nav3d-btn,.la-btn,
.shape-btn,.icon-btn,.cswatch,.cswatch span,.dc-swatch,.text-color-swatch,.surf-thumb,
.surf-add,.up-thumb,.up-add,.dim-box,.upload-zone,.font-select,.number-spinner input[type=number],
#textInput,#btnAddText,#btnAddShape,.surf-item { border-radius: 8px; }
.icon-btn:first-child { border-top-left-radius:8px; border-bottom-left-radius:8px; }
.icon-btn:last-child { border-top-right-radius:8px; border-bottom-right-radius:8px; }
/* Paketleme + sosyal sembol ızgarası */
.sym-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.sym-hint { font-size:10px; color:var(--primary); opacity:.6; }
.pkg-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.pkg-btn { border:1px solid rgba(13,89,124,0.25); background:transparent; aspect-ratio:1; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:7px; border-radius:8px; color:#111; transition:border-color .15s; }
.pkg-btn:hover { border-color:var(--primary); }
.pkg-btn svg { width:100%; height:100%; display:block; }
/* Renk kutucukları: Şekil Ekle kutusu boyutunda (36px) + iç kare köşeleri yuvarlak */
.cswatch, .text-color-swatch { width:36px; height:36px; }
.cswatch span, .text-color-swatch span, .dc-swatch span { border-radius:5px; }

/* ═════ v3: sihirbaz, akış, baskı güvenliği, mobil, okunurluk ═════ */
:root { --ok: #2e8b57; --warn: #c2620a; --err: #b3261e; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #5cbb79; outline-offset: 2px; }
::selection { background: rgba(92,187,121,0.32); }
/* okunurluk: küçük yazılar ve kontrast */
.rail-btn { font-size: 11px; color: rgba(13,89,124,0.8); }
.s-title { font-size: 11px; }
.view-btn { font-size: 10.5px; }
.view-quad .view-btn { font-size: 10px; padding: 6px 0; }
.dim-l { font-size: 10px; }
.spec-l { font-size: 10.5px; }
.tab-empty { font-size: 12px; color: rgba(13,89,124,0.9); }
.tool-btn { font-size: 11.5px; }
.prop-row label { font-size: 10.5px; }
.la-lbl { opacity: .8; font-size: 10px; }
.kb-hint { opacity: .85; }
@media (hover: none) { .kb-hint { display: none; } }
/* başlık: adımlar */
.stepper { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0 auto; padding: 0 24px; }
.step {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 999px;
  font-size: 12px; color: rgba(13,89,124,0.62); cursor: pointer; border: none; background: transparent; font-family: var(--font);
  transition: background-color .15s ease, color .15s ease;
}
.step b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; border: 1px solid currentColor; }
.step.on { color: var(--primary); background: rgba(13,89,124,0.08); font-weight: 600; }
.step.on b { background: var(--primary); color: #fff; border-color: var(--primary); }
.step.done b { background: #5cbb79; border-color: #5cbb79; color: #fff; }
.step-sep { width: 18px; height: 1px; background: rgba(13,89,124,0.25); }
@media (hover: hover) and (pointer: fine) { .step:hover { color: var(--primary); } }
.btn-save { font-size: 12px; font-weight: 600; letter-spacing: .4px; padding: 11px 20px; }
.btn-exit { font-size: 11px; }
/* adım sonu birincil butonu */
.next-btn {
  width: 100%; margin-top: 22px; padding: 13px 14px; border: none; border-radius: 8px; cursor: pointer;
  background: var(--primary); color: #fff; font-family: var(--font); font-size: 13px; font-weight: 600;
  transition: transform .16s cubic-bezier(0.23,1,0.32,1), background-color .15s ease;
}
.next-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .next-btn:hover { background: #08405c; } }
.lead { font-size: 12.5px; line-height: 1.6; margin: -4px 0 14px; color: rgba(13,89,124,0.92); }
/* yerleştirme seçici */
.place-card { margin-top: 14px; padding: 14px; border-radius: 10px; background: #fff; border: 1px solid rgba(13,89,124,0.18); }
.place-card h4 { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.place-card p { font-size: 11.5px; line-height: 1.5; margin-bottom: 12px; opacity: .9; }
.place-opts { display: grid; gap: 6px; }
.place-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px;
  border: 1px solid rgba(13,89,124,0.25); border-radius: 8px; background: transparent; cursor: pointer; color: var(--primary); font-family: var(--font);
  transition: border-color .15s ease, transform .16s cubic-bezier(0.23,1,0.32,1);
}
.place-opt:active { transform: scale(0.98); }
.place-opt strong { font-size: 12.5px; font-weight: 600; }
.place-opt span { font-size: 11px; opacity: .8; }
.place-opt.rec { border-color: var(--primary); background: rgba(13,89,124,0.05); }
@media (hover: hover) and (pointer: fine) { .place-opt:hover { border-color: var(--primary); } }
/* bildirim */
.toast-wrap { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 14px; padding: 11px 14px 11px 16px; border-radius: 10px;
  background: #0b2f42; color: #fff; font-size: 12.5px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); max-width: min(92vw, 520px);
  transition: opacity .2s ease, transform .2s cubic-bezier(0.23,1,0.32,1);
  @starting-style { opacity: 0; transform: translateY(8px); }
}
.toast.warn { background: #6b3a06; }
.toast.err { background: #7a1c16; }
.toast button { background: transparent; border: 1px solid rgba(255,255,255,0.45); color: #fff; border-radius: 6px; padding: 5px 10px; font-family: var(--font); font-size: 11.5px; cursor: pointer; white-space: nowrap; }
.toast.out { opacity: 0; transform: translateY(6px); }
.view-btn.flash { background: rgba(92,187,121,0.22); border-color: #5cbb79; }
/* çizim alanı açıklaması */
.dc-legend { position: absolute; left: 50%; transform: translateX(-50%); bottom: 64px; display: flex; gap: 16px; font-size: 11px; color: rgba(13,89,124,0.9); background: rgba(255,255,255,0.85); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.dc-legend i { display: inline-block; width: 18px; height: 0; border-top: 1.5px dashed rgba(13,89,124,0.7); vertical-align: middle; margin-right: 6px; }
.dc-legend i.safe { border-top: 0; height: 6px; background: #61ce70; }
.canvas-hint { display: block; position: absolute; right: 18px; top: 14px; font-size: 11px; color: rgba(13,89,124,0.7); pointer-events: none; }
.dpi-row { font-size: 11.5px; padding: 8px 10px; border-radius: 8px; margin-bottom: 10px; background: rgba(46,139,87,0.09); }
.dpi-row.low { background: rgba(194,98,10,0.12); color: #7a3e05; }
/* onay penceresi */
.rv-back { position: fixed; inset: 0; background: rgba(8,30,42,0.45); z-index: 70; display: grid; place-items: center; padding: 16px; }
.rv {
  width: min(720px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: #fff; border-radius: 14px; color: var(--primary);
  display: grid; grid-template-columns: 240px 1fr; box-shadow: 0 24px 60px rgba(0,0,0,0.22);
  transition: opacity .2s ease, transform .2s cubic-bezier(0.23,1,0.32,1);
  @starting-style { opacity: 0; transform: scale(0.97); }
}
.rv-shot { background: #eef4f4; display: grid; place-items: center; border-radius: 14px 0 0 14px; min-height: 280px; }
.rv-shot img { width: 100%; height: 100%; object-fit: contain; }
.rv-body { padding: 24px 24px 20px; }
.rv-body h3 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.rv-sub { font-size: 12.5px; opacity: .85; margin-bottom: 16px; }
.rv-list { list-style: none; display: grid; gap: 6px; margin-bottom: 14px; }
.rv-list li { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid rgba(13,89,124,0.1); }
.rv-tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(46,139,87,0.12); color: #1d6b41; white-space: nowrap; }
.rv-tag.empty { background: rgba(13,89,124,0.08); color: rgba(13,89,124,0.85); }
.rv-tag.warn { background: rgba(194,98,10,0.14); color: #7a3e05; }
.rv-note { font-size: 12px; line-height: 1.6; padding: 10px 12px; border-radius: 8px; background: rgba(13,89,124,0.06); margin-bottom: 16px; }
.rv-warn { font-size: 12px; line-height: 1.6; padding: 10px 12px; border-radius: 8px; background: rgba(194,98,10,0.1); color: #7a3e05; margin-bottom: 12px; }
.rv-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.rv-actions button { font-family: var(--font); font-size: 13px; padding: 12px 18px; border-radius: 8px; cursor: pointer; border: 1px solid rgba(13,89,124,0.3); background: transparent; color: var(--primary); transition: transform .16s cubic-bezier(0.23,1,0.32,1); }
.rv-actions button:active { transform: scale(0.97); }
.rv-actions .primary { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.rv-actions button:disabled { opacity: .6; cursor: progress; }
.rv-done { text-align: center; padding: 28px 8px 8px; }
.rv-done .ok { width: 48px; height: 48px; border-radius: 50%; background: #5cbb79; color: #fff; display: grid; place-items: center; margin: 0 auto 12px; font-size: 22px; }
@media (max-width: 640px) { .rv { grid-template-columns: 1fr; } .rv-shot { border-radius: 14px 14px 0 0; min-height: 180px; max-height: 220px; } }

/* ═════ MOBİL / DAR EKRAN ═════ */
@media (max-width: 900px) {
  .stepper .step span { display: none; }
  .stepper { padding: 0 8px; gap: 2px; }
  .step-sep { width: 8px; }
}
@media (max-width: 820px) {
  .header { height: 56px; padding: 0 12px; }
  .header-logo-sep, .header-logo-sub { display: none; }
  .header-logo-mark { width: 104px !important; height: 18px !important; }
  .btn-exit { padding: 8px 10px; }
  .btn-save { padding: 10px 12px; font-size: 12px; }
  .layout { flex-direction: column; height: calc(100dvh - 56px); }
  .canvas-wrap { order: 0; flex: 0 0 46%; min-height: 0; }
  .sidebar { order: 1; width: 100%; flex: 1 1 auto; min-height: 0; padding: 0 16px 84px; border-right: 0; border-top: 1px solid rgba(13,89,124,0.12); }
  .s-section { padding: 14px 0 10px !important; }
  .rail { order: 2; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; width: 100%; height: 64px; flex-direction: row; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid rgba(13,89,124,0.14); }
  .rail-btn { flex: 1; padding: 6px 0; gap: 3px; font-size: 10.5px; }
  .view-buttons { top: 8px; left: 8px; right: 8px; width: auto; flex-direction: row; overflow-x: auto; max-height: none; gap: 6px; scrollbar-width: none; }
  .view-buttons::-webkit-scrollbar { display: none; }
  #surfViewBtns { flex-direction: row; gap: 6px; }
  .view-btn { width: auto; padding: 9px 12px; flex-shrink: 0; }
  .view-sep, .view-quad { display: none; }
  .design-overlay { padding: 56px 8px 52px; }
  #dc2d { max-height: calc(46dvh - 120px); }
  .bottom-bar { bottom: 6px; max-width: calc(100% - 12px); overflow-x: auto; }
  #designToolbar, #barSepDesign { display: none !important; }
  .dc-legend { bottom: 48px; font-size: 10px; gap: 10px; }
  .canvas-hint { display: none; }
  .toast-wrap { bottom: 76px; left: 16px; right: 16px; transform: none; }
  .dim-row { grid-template-columns: repeat(4, 1fr); }
}
/* yardımcılar: şablon, marka, yardım */
.tpl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.tpl {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px 7px; border-radius: 8px;
  border: 1px solid rgba(13,89,124,0.2); background: #fff; cursor: pointer; font-family: var(--font); font-size: 11px; color: var(--primary);
  transition: border-color .15s ease, transform .16s cubic-bezier(0.23,1,0.32,1);
}
.tpl:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .tpl:hover { border-color: var(--primary); } }
.tpl-mini { width: 30px; display: flex; flex-direction: column; gap: 2px; }
.tpl-mini i { display: block; border-radius: 2px; }
.tpl-mini i:nth-child(1) { height: 9px; }
.tpl-mini i:nth-child(2) { height: 30px; }
.tpl-mini i:nth-child(3) { height: 10px; }
.brand-card { margin-top: 18px; padding: 14px; border-radius: 10px; background: #fff; border: 1px solid rgba(13,89,124,0.18); }
.brand-card h4 { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.brand-card p { font-size: 12px; line-height: 1.5; margin-bottom: 10px; }
.brand-sw { display: flex; gap: 6px; margin-bottom: 12px; }
.brand-sw span { width: 28px; height: 28px; border-radius: 6px; border: 1px solid rgba(13,89,124,0.2); }
.help-back .rv { grid-template-columns: 1fr; width: min(560px, 100%); }
.help-list details { border-bottom: 1px solid rgba(13,89,124,0.12); padding: 10px 0; }
.help-list summary { cursor: pointer; font-size: 13.5px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.help-list summary::-webkit-details-marker { display: none; }
.help-list summary::after { content: '+'; font-weight: 400; opacity: .6; }
.help-list details[open] summary::after { content: '−'; }
.help-list p { font-size: 12.5px; line-height: 1.65; margin-top: 8px; }
.help-contact { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.help-contact a { flex: 1; text-align: center; text-decoration: none; font-size: 13px; padding: 11px; border-radius: 8px; border: 1px solid rgba(13,89,124,0.3); color: var(--primary); }
.help-contact a.wa { background: #1f7a4d; color: #fff; border-color: #1f7a4d; }
/* yazı tabanı: işlevsel metin en az 11px, gövde 12px */
.view-btn, .view-quad .view-btn, .dc-btn.text-btn, .la-lbl, .dc-scale-lbl, .rail-btn,
.size-label, .dim-label, .s-title, .size-btn, .raf-btn, .dim-l, .spec-l, .prop-row label,
.dc-legend, .kb-hint kbd, #btnAddText, #btnAddShape, .header-logo-sub, .surf-size { font-size: 11px !important; }
.view-quad .view-btn { letter-spacing: 0; }
.dim-l { letter-spacing: 0.2px; }
.up-sub, .sym-hint, .kb-hint, .place-opt span, .place-card p, .tab-empty { font-size: 12px; }
.dc-legend i.safe { border-top: 0; height: 6px; background: #61ce70; }
.toast { box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
@media (max-width: 560px) {
  .stepper { display: none; }
  .header { justify-content: space-between; }
}

/* ═══════════════════════════════════════════════════════════════
   SİTE DİLİ (kolilazim.com canlı, 15 Eki 2026'da ölçüldü)
   Beyaz zemin · lacivert #021f36 metin ve 1px çizgi · köşe 0
   Clash 300 gövde / 500 başlık · başlıklar BÜYÜK HARF [ köşeli ]
   Seçenek = çizgili kart + sağ üstte kare işaret · birincil = düz lacivert
   Rozet kırmızı #c62828 · yeşil yalnız küçük kare imleç
   ═══════════════════════════════════════════════════════════════ */
:root {
  --lac: #021f36; --lac-rgb: 2,31,54; --acik: #0d597c; --yesil: #61ce70; --kirmizi: #c62828;
  --zemin: #ffffff; --zemin-2: #f2f4f6; --cz: 1px solid #021f36; --cz-ince: 1px solid rgba(2,31,54,0.16);
  --egri: cubic-bezier(.16,1,.3,1); --font: Clash, "Helvetica Neue", Arial, sans-serif; --primary: #021f36;
}
html, body { font-family: var(--font); font-weight: 300; color: var(--lac); background: var(--zemin); }
button, input, select, textarea { font-family: var(--font); }
*, *::before, *::after { border-radius: 0 !important; }
::selection { background: rgba(var(--lac-rgb), .14); }
:focus-visible { outline: 1px solid var(--lac) !important; outline-offset: 3px; }

/* ── başlık ── */
.header { height: 64px; padding: 0 24px; border-bottom: var(--cz); background: #fff; }
.header-logo { gap: 16px; }
.site-logo { display: block; width: auto !important; height: 34px !important; background: none !important; -webkit-mask: none !important; mask: none !important; color: var(--lac); }
.site-logo svg { display: block; height: 100%; width: auto; }
.header-logo-sep { width: 1px; height: 22px; background: var(--lac); }
.header-logo-sub { font-size: 13px !important; font-weight: 500; letter-spacing: 0; text-transform: uppercase; color: var(--lac); }
.header-logo-sub::before { content: '[ '; } .header-logo-sub::after { content: ' ]'; }
.stepper { gap: 0; }
.step { padding: 0 14px; height: 64px; border-radius: 0; font-size: 12px; font-weight: 400; text-transform: uppercase; color: rgba(var(--lac-rgb), .5); background: none !important; border-bottom: 2px solid transparent !important; gap: 6px; }
.step b { width: auto; height: auto; border: 0 !important; background: none !important; color: inherit !important; font-size: 12px; font-weight: 500; display: inline; }
.step b::before { content: '[ '; } .step b::after { content: ' ]'; }
.step.on { color: var(--lac); font-weight: 500; border-bottom-color: var(--lac) !important; }
.step.done { color: rgba(var(--lac-rgb), .78); }
.step-sep { width: 22px; background: rgba(var(--lac-rgb), .3); }
.btn-exit, .btn-save {
  height: 44px; padding: 0 18px !important; font-size: 13px !important; font-weight: 300 !important; letter-spacing: 0 !important; text-transform: uppercase;
  border: var(--cz) !important; transition: background-color .24s var(--egri), color .24s var(--egri);
}
.btn-exit { background: #fff !important; color: var(--lac) !important; }
.btn-save { background: var(--lac) !important; color: #fff !important; padding: 0 24px !important; }
@media (hover: hover) and (pointer: fine) { .btn-exit:hover { background: var(--lac) !important; color: #fff !important; } .btn-save:hover { background: var(--acik) !important; border-color: var(--acik) !important; } }

/* ── yerleşim: solda çerçeveli 3D, sağda seçenekler (ürün sayfasıyla aynı) ── */
.layout { background: #fff; height: calc(100vh - 64px); }
.canvas-wrap { order: 0 !important; flex: 1; margin: 24px 0 24px 24px; border: var(--cz); background: #fff; }
.sidebar { order: 1 !important; width: 452px; padding: 0 24px 32px; background: #fff; border: 0; }
.frame-tag { position: absolute; right: 16px; top: 14px; font-size: 12px; font-weight: 400; text-transform: uppercase; display: flex; align-items: center; gap: 8px; pointer-events: none; color: var(--lac); }
.frame-tag::before { content: ''; width: 9px; height: 9px; background: var(--yesil); }
.canvas-hint { top: auto !important; bottom: 62px; right: 16px; font-size: 12px !important; color: rgba(var(--lac-rgb), .7) !important; }

/* panel listesi: ürün sayfasındaki küçük resim sütunu gibi */
.view-buttons { top: 16px; left: 16px; width: 124px; gap: 6px; }
.view-btn, .view-quad .view-btn {
  border: var(--cz) !important; background: #fff !important; color: var(--lac) !important; font-size: 11px !important; font-weight: 400 !important;
  text-transform: uppercase; letter-spacing: 0 !important; padding: 8px 6px !important; transition: background-color .24s var(--egri), color .24s var(--egri);
}
.view-btn.active { background: var(--lac) !important; color: #fff !important; }
@media (hover: hover) and (pointer: fine) { .view-btn:not(.active):hover { background: var(--zemin-2) !important; } }
.view-btn.flash { background: var(--yesil) !important; color: var(--lac) !important; }
.view-sep { background: rgba(var(--lac-rgb), .2); margin: 4px 0; }
.view-quad { gap: 6px; }

/* alt araç çubuğu */
.bottom-bar { bottom: 14px; gap: 10px; }
.nav3d-btn, .dc-btn, .la-btn { width: 32px !important; height: 32px !important; border: var(--cz) !important; background: #fff !important; color: var(--lac) !important; }
.dc-btn.text-btn { width: auto !important; padding: 0 10px !important; text-transform: uppercase; }
.la-btn.la-del { border-color: var(--kirmizi) !important; color: var(--kirmizi) !important; }
@media (hover: hover) and (pointer: fine) {
  .nav3d-btn:hover, .dc-btn:hover, .la-btn:hover { background: var(--lac) !important; color: #fff !important; }
  .la-btn.la-del:hover { background: var(--kirmizi) !important; color: #fff !important; }
}
.nav3d-btn.active { background: var(--lac) !important; color: #fff !important; }
.bar-sep, .dc-sep, .nav3d-sep, .la-sep { background: rgba(var(--lac-rgb), .25) !important; }
.la-lbl { text-transform: uppercase; opacity: 1 !important; }

/* 2D tasarım alanı */
.design-overlay { background: var(--zemin-2); }
.dc-legend { background: #fff; border: var(--cz); color: var(--lac); font-size: 12px !important; bottom: 62px; }
.dc-legend i { border-top-color: var(--lac); }

/* ── sağ sütun sekmeleri (eski ray) ── */
.sidebar .rail {
  position: sticky; top: 0; z-index: 5; width: auto; height: auto; flex-direction: row; gap: 0; padding: 20px 0 0;
  background: #fff; border: 0; display: grid; grid-template-columns: repeat(6, 1fr);
}
.sidebar .rail-btn {
  flex-direction: column; gap: 5px; padding: 10px 2px 9px; border: var(--cz); margin-left: -1px; color: var(--lac) !important;
  font-size: 11px !important; font-weight: 400; text-transform: uppercase; letter-spacing: 0; background: #fff;
}
.sidebar .rail-btn:first-child { margin-left: 0; }
.sidebar .rail-btn svg { width: 18px; height: 18px; }
.sidebar .rail-btn svg * { stroke-width: 1 !important; }
.sidebar .rail-btn.active { background: var(--lac) !important; color: #fff !important; font-weight: 500; position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) { .sidebar .rail-btn:not(.active):hover { background: var(--zemin-2); } }

/* ── bölümler ── */
.s-section { padding: 26px 0 0 !important; margin: 0 !important; }
.s-title, .size-label, .dim-label {
  font-size: 17px !important; font-weight: 500; text-transform: uppercase; letter-spacing: 0 !important; color: var(--lac); margin: 0 0 12px !important;
}
.s-title::before, .sum-t::before { content: '[ '; } .s-title::after, .sum-t::after { content: ' ]'; }
.lead { font-size: 13px; line-height: 1.5; color: var(--lac); margin: 0 0 22px; }
.tab-empty, .up-sub, .sym-hint, .kb-hint, .edit-note { color: var(--lac) !important; }
.edit-note { background: var(--zemin-2); border: var(--cz-ince); }

/* ── seçenek kartları: çizgi + sağ üst kare işaret ── */
.model-btn, .raf-btn, .size-btn, .tpl, .place-opt {
  position: relative; border: var(--cz) !important; outline: 0 !important; background: #fff !important; color: var(--lac) !important;
  font-size: 13px !important; font-weight: 300 !important; letter-spacing: 0 !important; text-transform: none;
  transition: background-color .24s var(--egri);
}
.model-btn::after, .raf-btn::after, .size-btn::after {
  content: ''; position: absolute; top: 9px; right: 9px; width: 12px; height: 12px; border: var(--cz); background: #fff;
}
.model-btn.active::after, .raf-btn.active::after, .size-btn.active::after { background: var(--lac); box-shadow: inset 0 0 0 2px #fff; }
@media (hover: hover) and (pointer: fine) { .model-btn:not(.active):hover, .raf-btn:not(.active):hover, .size-btn:not(.active):hover, .tpl:hover, .place-opt:hover { background: var(--zemin-2) !important; } }
.model-selector { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 26px; }
.model-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px 12px !important; text-align: center; }
.opt-ic { width: 34px; height: 34px; color: var(--lac); margin-bottom: 4px; }
.opt-t { font-size: 13px; font-weight: 400; }
.opt-d { font-size: 11px; opacity: .75; line-height: 1.3; }
.raf-selector { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 26px !important; }
.raf-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 4px 10px !important; }
.size-selector { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 26px !important; }
.size-btn { padding: 16px 12px !important; text-align: left; }
.size-btn .opt-t { font-size: 13px; }

/* ── özet kutusu ── */
.sum-box { border: var(--cz); padding: 16px 16px 6px; margin-bottom: 4px; }
.sum-t { font-size: 17px; font-weight: 500; text-transform: uppercase; margin-bottom: 12px; }
.dim-row { gap: 0 !important; border-top: var(--cz-ince); border-bottom: var(--cz-ince); margin-bottom: 4px; }
.dim-box { border: 0 !important; border-left: var(--cz-ince) !important; padding: 10px 6px !important; text-align: left; }
.dim-box:first-child { border-left: 0 !important; padding-left: 0 !important; }
.dim-v { font-size: 22px !important; font-weight: 500; }
.dim-l { font-size: 11px !important; text-transform: uppercase; letter-spacing: 0 !important; opacity: .8; }
.spec-list { margin: 0; }
.spec-item { border-bottom: var(--cz-ince); padding: 10px 0; }
.spec-item:last-child { border-bottom: 0; }
.spec-l { font-size: 13px !important; text-transform: none !important; letter-spacing: 0 !important; }
.spec-v { font-size: 13px; font-weight: 400; }

/* ── birincil / ikincil butonlar ── */
.next-btn { height: 48px; padding: 0 18px; background: var(--lac); color: #fff; font-size: 17px; font-weight: 300; text-transform: uppercase; margin-top: 26px; transition: background-color .24s var(--egri), transform .16s var(--egri); }
@media (hover: hover) and (pointer: fine) { .next-btn:hover { background: var(--acik); } }
.tool-btn, #btnAddText, #btnAddShape, .qr-in, .font-select, #textInput, .number-spinner input[type=number] {
  border: var(--cz) !important; background: #fff !important; color: var(--lac) !important; font-size: 13px !important; font-weight: 300 !important; letter-spacing: 0 !important;
}
.tool-btn, #btnAddText, #btnAddShape { min-height: 42px; text-transform: none; }
.tool-btn.on, #btnAddText { background: var(--lac) !important; color: #fff !important; }
@media (hover: hover) and (pointer: fine) { .tool-btn:not(.on):hover, #btnAddShape:hover { background: var(--zemin-2) !important; } #btnAddText:hover { background: var(--acik) !important; } }
.font-select, #textInput, .qr-in { height: 44px; }

/* yükleme, şablon, yerleştirme, marka */
.upload-zone { border: 1px dashed var(--lac); padding: 26px 16px; background: #fff; }
.up-text { font-size: 15px; font-weight: 400; text-transform: uppercase; }
.up-thumb, .up-add { width: 56px; height: 56px; border: var(--cz) !important; }
.tpl-grid { gap: 6px; }
.tpl { padding: 12px 4px 10px; font-size: 12px !important; text-transform: uppercase; }
.tpl-mini { width: 26px; }
.tpl-mini i { outline: 1px solid rgba(var(--lac-rgb), .25); }
.place-card, .brand-card { border: var(--cz); background: #fff; padding: 16px; }
.place-card h4, .brand-card h4 { font-size: 15px; font-weight: 500; text-transform: uppercase; }
.place-opt { padding: 12px 14px !important; }
.place-opt strong { font-size: 13px; font-weight: 500; text-transform: uppercase; }
.place-opt.rec { background: #fff !important; border-width: 1px !important; box-shadow: inset 0 0 0 1px var(--lac); }
.place-opt.rec strong::after { content: 'ÖNERİLEN'; margin-left: 8px; font-size: 10px; font-weight: 400; background: var(--lac); color: #fff; padding: 2px 6px; vertical-align: 1px; }
.brand-sw span { border: var(--cz); width: 32px; height: 32px; }

/* renk kareleri */
.cswatch, .text-color-swatch, .dc-swatch { border: var(--cz) !important; }
.cswatch.sel { outline: 1px solid var(--lac) !important; outline-offset: 2px !important; }
.shape-btn { border: var(--cz) !important; width: 44px; height: 44px; }
.shape-btn.sel { background: var(--lac) !important; color: #fff !important; }
.sym-btn, .pkg-grid button { border: var(--cz-ince) !important; }

/* katmanlar */
.lyr-item { border: var(--cz-ince); padding: 9px 10px; font-size: 13px; }
.lyr-item.sel { outline: 0; border: var(--cz); background: var(--zemin-2); }
.lyr-kind { font-size: 11px; opacity: .65; }
.prop-row label { text-transform: uppercase; }
.prop-row input[type=range] { accent-color: var(--lac); }
.dpi-row { border: var(--cz-ince); background: #fff; }
.dpi-row.low { background: #fff; border: 1px solid var(--kirmizi); color: var(--kirmizi); }
.kb-hint kbd { border: var(--cz-ince); }

/* bildirim ve pencereler */
.toast { background: var(--lac); color: #fff; font-size: 13px; padding: 12px 14px 12px 16px; box-shadow: 0 18px 40px -24px rgba(0,0,0,.55); }
.toast.warn { background: #fff; color: var(--lac); border: 1px solid var(--kirmizi); }
.toast.warn button { border-color: var(--lac); color: var(--lac); }
.toast.err { background: var(--kirmizi); }
.toast button { border-color: rgba(255,255,255,.6); text-transform: uppercase; font-size: 11px; }
.rv-back { background: rgba(var(--lac-rgb), .38); }
.rv { border: var(--cz); box-shadow: 0 40px 90px -50px rgba(0,0,0,.55); }
.rv-shot { background: #fff; border-right: var(--cz); }
.rv-body h3 { font-size: 22px; font-weight: 500; text-transform: uppercase; }
.rv-body h3::before { content: '[ '; } .rv-body h3::after { content: ' ]'; }
.rv-sub { font-size: 13px; }
.rv-list li { border-bottom: var(--cz-ince); font-size: 13px; }
.rv-tag { background: #fff; border: var(--cz); color: var(--lac); text-transform: uppercase; font-size: 10.5px; padding: 3px 8px; }
.rv-tag.empty { border-color: rgba(var(--lac-rgb), .35); color: rgba(var(--lac-rgb), .75); background: #fff; }
.rv-tag.warn { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
.rv-note { background: var(--zemin-2); border: var(--cz-ince); font-size: 13px; }
.rv-warn { background: #fff; border: 1px solid var(--kirmizi); color: var(--kirmizi); font-size: 13px; }
.rv-actions button { height: 48px; padding: 0 22px; font-size: 15px; font-weight: 300; text-transform: uppercase; border: var(--cz); color: var(--lac); background: #fff; }
.rv-actions .primary { background: var(--lac); color: #fff; }
.rv-done .ok { background: var(--lac); }
.help-list summary { font-weight: 500; font-size: 14px; }
.help-list details { border-bottom: var(--cz-ince); }
.help-contact a { border: var(--cz); color: var(--lac); text-transform: uppercase; font-size: 13px; height: 48px; display: grid; place-items: center; padding: 0; }
.help-contact a.wa { background: var(--lac); border-color: var(--lac); color: #fff; }

/* ── dar ekran ── */
@media (max-width: 820px) {
  .canvas-wrap { margin: 0; border: 0; border-bottom: var(--cz); flex: 0 0 46%; }
  .sidebar { width: 100%; padding: 0 16px 84px; }
  .sidebar .rail { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 40; padding: 0 0 env(safe-area-inset-bottom); border-top: var(--cz); display: grid; height: 62px; }
  .sidebar .rail-btn { border: 0; border-left: var(--cz-ince); margin: 0; padding: 8px 0 6px; }
  .sidebar .rail-btn:first-child { border-left: 0; }
  .view-buttons { width: auto; top: 10px; left: 10px; right: 10px; }
  .view-btn { padding: 9px 12px !important; }
  .frame-tag { display: none; }
  .header { height: 56px; padding: 0 12px; }
  .btn-exit, .btn-save { height: 38px; padding: 0 12px !important; font-size: 12px !important; }
  .site-logo { height: 26px !important; }
  .model-selector { grid-template-columns: repeat(3, 1fr); }
  .tpl-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .header-logo-sub, .header-logo-sep, #btnHelp { display: none; }
}

/* ═════ SADE (15 Eki 2026, Gülbin: "daha temiz, güzel") ═════
   İlke: çizgi azalır, boşluk ayırır. Koyu lacivert çizgi yalnız SEÇİLİ olanda. */
:root { --cz-sus: 1px solid rgba(2,31,54,0.12); }
.sidebar { padding: 0 32px 40px; }
.sidebar .rail { grid-template-columns: repeat(5, auto); justify-content: space-between; padding: 22px 0 0; border-bottom: var(--cz-sus); gap: 0; }
.sidebar .rail-btn { border: 0 !important; margin: 0; padding: 0 0 12px; background: none !important; color: rgba(2,31,54,0.5) !important; font-size: 12px !important; border-bottom: 1px solid transparent !important; margin-bottom: -1px; }
.sidebar .rail-btn svg { display: none; }
.sidebar .rail-btn.active { background: none !important; color: var(--lac) !important; font-weight: 500; border-bottom-color: var(--lac) !important; }
.s-section .s-title { margin-top: 36px !important; }
.s-section > .s-title:first-child, .s-section > .lead + .s-title { margin-top: 0 !important; }
.s-section > .lead { margin-bottom: 28px; }
#rafliOpts > .s-title:first-child { margin-top: 36px !important; }
.sum-box .sum-t { margin-top: 0; }
@media (hover: hover) and (pointer: fine) { .sidebar .rail-btn:not(.active):hover { color: var(--lac) !important; } }
.s-section { padding-top: 32px !important; }
.s-title { font-size: 13px !important; font-weight: 500; margin-bottom: 14px !important; }
.lead { font-size: 13px; color: rgba(2,31,54,0.62); margin-bottom: 0; }

/* kartlar: sessiz çizgi, seçilince lacivert */
.model-btn, .raf-btn, .size-btn, .tpl, .place-opt { border: var(--cz-sus) !important; }
.model-btn.active, .raf-btn.active, .size-btn.active { border-color: var(--lac) !important; box-shadow: inset 0 0 0 1px var(--lac); }
.model-btn::after, .raf-btn::after, .size-btn::after { border-color: rgba(2,31,54,0.25); width: 10px; height: 10px; top: 10px; right: 10px; }
.model-btn.active::after, .raf-btn.active::after, .size-btn.active::after { border-color: var(--lac); }
.model-selector { gap: 8px; margin-bottom: 0; }
.model-btn { padding: 18px 8px 16px !important; }
.opt-ic { width: 30px; height: 30px; opacity: .85; }

/* raf sayısı: tek satır seçici */
.raf-selector { display: flex !important; gap: 0; border: var(--cz-sus); margin-bottom: 0 !important; }
.raf-btn { flex: 1; border: 0 !important; border-left: var(--cz-sus) !important; padding: 13px 0 !important; box-shadow: none !important; }
.raf-btn:first-child { border-left: 0 !important; }
.raf-btn .opt-ic, .raf-btn::after { display: none; }
.raf-btn.active { background: var(--lac) !important; color: #fff !important; }
.raf-btn.active .opt-t { color: #fff; font-weight: 500; }

/* ölçüler: alt alta liste */
.size-selector { grid-template-columns: 1fr !important; gap: 0 !important; border-top: var(--cz-sus); margin-bottom: 0 !important; }
.size-btn { border: 0 !important; border-bottom: var(--cz-sus) !important; padding: 14px 4px 14px 28px !important; box-shadow: none !important; }
.size-btn::after { left: 4px; right: auto; top: 50%; margin-top: -5px; border-radius: 50% !important; }
.size-btn.active { background: none !important; }
.size-btn.active .opt-t { font-weight: 500; }
.size-btn.active::after { background: var(--lac); box-shadow: inset 0 0 0 2px #fff; }

/* özet: çerçeve yok, açık zemin */
.sum-box { border: 0; background: var(--zemin-2); padding: 18px 18px 8px; margin-top: 32px; }
.sum-t { font-size: 13px; }
.dim-row { border-top: 0; border-bottom: var(--cz-sus); }
.dim-box { border-left: 0 !important; padding-left: 0 !important; }
.dim-v { font-size: 22px !important; }
.spec-item { border-bottom: var(--cz-sus); }

/* sol panel listesi: yazı listesi */
.view-buttons { width: 132px; gap: 2px; }
.view-btn, .view-quad .view-btn { border: 0 !important; background: none !important; text-align: left; padding: 7px 0 7px 16px !important; position: relative; color: rgba(2,31,54,0.55) !important; }
.view-btn::before { content: ''; position: absolute; left: 2px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border: 1px solid rgba(2,31,54,0.3); }
.view-btn.active { background: none !important; color: var(--lac) !important; font-weight: 500 !important; }
.view-btn.active::before { background: var(--lac); border-color: var(--lac); }
@media (hover: hover) and (pointer: fine) { .view-btn:not(.active):hover { background: none !important; color: var(--lac) !important; } }
.view-quad { display: flex !important; gap: 0; flex-wrap: wrap; padding-left: 0; }
.view-quad .view-btn { padding: 4px 8px 4px 0 !important; width: auto; }
.view-quad .view-btn::before { display: none; }
.view-quad .view-btn.active { text-decoration: underline; text-underline-offset: 4px; }
.view-sep { background: var(--cz-sus); height: 1px; margin: 8px 0; background: rgba(2,31,54,0.12); }
.view-btn.flash { background: none !important; color: var(--lac) !important; }
.view-btn.flash::before { background: var(--yesil); border-color: var(--yesil); }

/* çerçeve ve alt araçlar: daha hafif */
.canvas-wrap { border: var(--cz-sus); }
.nav3d-btn, .dc-btn, .la-btn { border: var(--cz-sus) !important; }
.frame-tag { color: rgba(2,31,54,0.7); font-size: 11px; }
.next-btn { margin-top: 32px; }
.tpl, .place-opt { box-shadow: none; }
.upload-zone { border: 1px dashed rgba(2,31,54,0.35); }
.lyr-item { border: var(--cz-sus); }
.dc-legend { border: var(--cz-sus); }
@media (max-width: 820px) {
  .sidebar { padding: 0 20px 84px; }
  .sidebar .rail { justify-content: stretch; grid-template-columns: repeat(5, 1fr); padding: 0; border-bottom: 0; }
  .sidebar .rail-btn { padding: 0 !important; border-bottom: 0 !important; display: grid; place-items: center; }
  .sidebar .rail-btn.active { box-shadow: inset 0 2px 0 var(--lac); }
  .canvas-wrap { border: 0; border-bottom: var(--cz-sus); }
  .view-btn, .view-quad .view-btn { background: rgba(255,255,255,.9) !important; padding: 8px 12px 8px 22px !important; }
  .view-btn::before { left: 8px; }
}

/* ═══════════════════════════════════════════════════════════════
   GÖKYÜZÜ + CAM (15 Eki 2026, Gülbin onayladı: "süper fikir, devam et")
   Sitenin kendi dili: stand mavi atmosferde süzülür, ayarlar buzlu cam
   panellerde, çerçeve yok. Cam tarifi siteden: %62 beyaz, blur 24, saturate 1.8
   ═══════════════════════════════════════════════════════════════ */
:root {
  --cam: rgba(255,255,255,.62); --cam-blur: blur(24px) saturate(1.8);
  --cam-cizgi: 1px solid rgba(255,255,255,.72); --cam-kart: rgba(255,255,255,.46);
  --cam-golge: 0 50px 90px -40px rgba(2,31,54,.6);
}
html, body { background: #0a3a8c !important; }
.atmos { position: fixed; inset: -60px; z-index: 0; pointer-events: none; filter: blur(34px) saturate(1.25);
  background: url(https://kolilazim.com/wp-content/plugins/koli-lazim-onizleme/varlik/cdfbc8811ec4.webp) center/cover no-repeat, radial-gradient(120% 80% at 30% 20%, #2f6fd0 0%, #1450b4 35%, #0a3a8c 70%, #072a66 100%); }
.header, .layout { position: relative; z-index: 1; }

/* üst çubuk: gökyüzünün üstünde, beyaz */
.header { background: transparent !important; border-bottom: 0 !important; color: #fff; }
.site-logo, .header-logo-sub { color: #fff !important; }
.header-logo-sep { background: rgba(255,255,255,.6) !important; }
.step { color: rgba(255,255,255,.62) !important; }
.step.on { color: #fff !important; border-bottom-color: #fff !important; }
.step.done { color: rgba(255,255,255,.85) !important; }
.step-sep { background: rgba(255,255,255,.35) !important; }
.btn-exit { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.55) !important; }
.btn-save { background: var(--cam) !important; -webkit-backdrop-filter: var(--cam-blur); backdrop-filter: var(--cam-blur);
  color: var(--lac) !important; border: var(--cam-cizgi) !important; font-weight: 500 !important; }
@media (hover: hover) and (pointer: fine) {
  .btn-exit:hover { background: rgba(255,255,255,.14) !important; color: #fff !important; }
  .btn-save:hover { background: #fff !important; border-color: #fff !important; }
}

/* sahne: çerçevesiz, saydam; bulut zemini */
.layout { background: transparent !important; }
.canvas-wrap { background: transparent !important; border: 0 !important; margin: 0 !important; }
.bulut { position: absolute; left: -5%; right: -5%; bottom: -4%; height: 34%; z-index: 0; pointer-events: none; filter: blur(14px);
  background:
    radial-gradient(38% 60% at 22% 100%, rgba(255,255,255,.95), rgba(255,255,255,0) 72%),
    radial-gradient(34% 55% at 58% 100%, rgba(255,255,255,.9), rgba(255,255,255,0) 72%),
    radial-gradient(30% 50% at 88% 100%, rgba(255,255,255,.85), rgba(255,255,255,0) 72%),
    linear-gradient(to top, rgba(232,240,252,.85), rgba(232,240,252,0) 75%); }
#c { position: relative; z-index: 1; }
.frame-tag { color: #fff !important; }
.canvas-hint { color: rgba(255,255,255,.8) !important; z-index: 2; }

/* panel listesi: gökyüzü üstünde beyaz yazı */
.view-buttons { z-index: 3; }
.view-btn, .view-quad .view-btn { color: rgba(255,255,255,.72) !important; }
.view-btn::before { border-color: rgba(255,255,255,.55) !important; }
.view-btn.active { color: #fff !important; }
.view-btn.active::before { background: var(--yesil) !important; border-color: var(--yesil) !important; }
@media (hover: hover) and (pointer: fine) { .view-btn:not(.active):hover { color: #fff !important; } }
.view-quad .view-btn.active { text-decoration-color: #fff; }
.view-sep { background: rgba(255,255,255,.25) !important; }

/* alt araçlar: cam hap */
.bottom-bar { z-index: 3; background: var(--cam); -webkit-backdrop-filter: var(--cam-blur); backdrop-filter: var(--cam-blur);
  padding: 6px; box-shadow: var(--cam-golge); bottom: 22px; }
.nav3d-btn, .dc-btn, .la-btn { border: 0 !important; background: transparent !important; }
.nav3d-btn.active { background: var(--lac) !important; color: #fff !important; }
@media (hover: hover) and (pointer: fine) { .nav3d-btn:hover, .dc-btn:hover, .la-btn:hover { background: rgba(255,255,255,.7) !important; color: var(--lac) !important; } }
.bar-sep, .dc-sep, .nav3d-sep, .la-sep { background: rgba(2,31,54,.15) !important; }
.dc-scale-lbl { color: var(--lac); }

/* 2D tasarım alanı: cam perde */
.design-overlay { background: rgba(255,255,255,.28) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); z-index: 2; }
.dc-legend { background: var(--cam) !important; border: var(--cam-cizgi) !important; -webkit-backdrop-filter: var(--cam-blur); backdrop-filter: var(--cam-blur); }

/* sağ panel: yüzen cam */
.sidebar { background: var(--cam) !important; -webkit-backdrop-filter: var(--cam-blur); backdrop-filter: var(--cam-blur);
  box-shadow: var(--cam-golge); margin: 8px 24px 24px 0; padding: 0 28px 28px !important; width: 440px; border: 0 !important; }
.sidebar .rail { background: rgba(255,255,255,.5) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(2,31,54,.12) !important; margin: 0 -28px; padding: 24px 28px 0 !important; }

/* kartlar: cam fayans; seçili = neredeyse beyaz + lacivert iç çizgi + yeşil kare */
.model-btn, .size-btn, .tpl, .place-opt, .upload-zone, .lyr-item, .place-card, .brand-card, .sum-box, .edit-note, .dpi-row {
  background: var(--cam-kart) !important; border: var(--cam-cizgi) !important; box-shadow: none; }
.model-btn.active, .size-btn.active { background: rgba(255,255,255,.92) !important; box-shadow: none !important; }
.model-btn::after, .size-btn::after { display: none !important; }
.model-btn.active::before { content: ''; position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; background: var(--yesil); z-index: 1; }
@media (hover: hover) and (pointer: fine) { .model-btn:not(.active):hover, .size-btn:not(.active):hover, .tpl:hover, .place-opt:hover { background: rgba(255,255,255,.75) !important; } }

/* model kartı: gerçek görsel */
.model-selector { gap: 8px !important; }
.model-btn { height: 176px; justify-content: flex-end !important; align-items: flex-start !important; padding: 10px 10px 10px !important; overflow: hidden; text-align: left; }
.model-btn .opt-img { position: absolute; left: 50%; top: 8px; height: 118px; width: auto; transform: translateX(-50%); filter: drop-shadow(0 10px 10px rgba(2,31,54,.22)); pointer-events: none; }
.model-btn .opt-img:not([hidden]) + .opt-ic { display: none; }
.model-btn .opt-ic { position: absolute; left: 50%; top: 26px; transform: translateX(-50%); width: 46px; height: 46px; opacity: .55; }
.model-btn .opt-t { position: relative; font-size: 12px !important; font-weight: 500 !important; text-transform: uppercase; }
.model-btn .opt-d { position: relative; font-size: 11px; }

/* raf sayısı: cam şerit */
.raf-selector { background: var(--cam-kart); border: var(--cam-cizgi) !important; }
.raf-btn { background: transparent !important; border-left: 1px solid rgba(255,255,255,.7) !important; }
.raf-btn.active { background: var(--lac) !important; color: #fff !important; }

/* ölçüler: iki sütun cam fayans */
.size-selector { grid-template-columns: 1fr 1fr !important; gap: 6px !important; border-top: 0 !important; }
.size-btn { border: var(--cam-cizgi) !important; padding: 13px 12px !important; }
.size-btn.active .opt-t { font-weight: 500; }

/* özet: dört değer, üst çizgi */
.sum-box { background: transparent !important; border: 0 !important; border-top: 1px solid rgba(2,31,54,.14) !important; padding: 18px 2px 0 !important; margin-top: 30px !important; }
.sum-t { display: none; }
.dim-row { border-bottom: 0 !important; }
.dim-v { font-size: 24px !important; }
.spec-list { margin-top: 6px; }
.spec-item { border-bottom: 1px solid rgba(2,31,54,.1) !important; }

/* diğer: sekmeler, butonlar, girişler cam uyumlu */
.upload-zone { border: 1px dashed rgba(2,31,54,.4) !important; }
.tool-btn, #btnAddShape, .qr-in, .font-select, #textInput, .number-spinner input[type=number] { background: var(--cam-kart) !important; border: var(--cam-cizgi) !important; }
.tool-btn.on, #btnAddText { background: var(--lac) !important; border-color: var(--lac) !important; color: #fff !important; }
.cswatch, .text-color-swatch, .shape-btn { border: var(--cam-cizgi) !important; }
.next-btn { background: var(--lac) !important; }
.lyr-item.sel { background: rgba(255,255,255,.92) !important; box-shadow: inset 0 0 0 1px var(--lac); }

/* bildirim, pencereler: cam */
.toast { background: rgba(2,31,54,.78) !important; -webkit-backdrop-filter: var(--cam-blur); backdrop-filter: var(--cam-blur); }
.rv-back { background: rgba(2,31,54,.32) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rv { background: rgba(255,255,255,.82) !important; -webkit-backdrop-filter: var(--cam-blur); backdrop-filter: var(--cam-blur); border: var(--cam-cizgi) !important; box-shadow: var(--cam-golge) !important; }
.rv-shot { background: url(https://kolilazim.com/wp-content/plugins/koli-lazim-onizleme/varlik/cdfbc8811ec4.webp) center/cover !important; border-right: 0 !important; }

/* dar ekran */
@media (max-width: 820px) {
  .sidebar { margin: 0 !important; width: 100% !important; padding: 0 18px 84px !important; box-shadow: 0 -20px 40px -30px rgba(2,31,54,.5); }
  .sidebar .rail { background: rgba(255,255,255,.78) !important; -webkit-backdrop-filter: var(--cam-blur); backdrop-filter: var(--cam-blur); border-top: var(--cam-cizgi) !important; }
  .canvas-wrap { border-bottom: 0 !important; }
  .view-btn, .view-quad .view-btn { background: rgba(255,255,255,.2) !important; color: #fff !important; }
  .view-btn.active { background: rgba(255,255,255,.92) !important; color: var(--lac) !important; }
  .bottom-bar { bottom: 10px; }
  .model-btn { height: 150px; }
  .model-btn .opt-img { height: 96px; }
}

@media (max-width: 820px) {
  .view-buttons { flex-direction: row !important; align-items: center !important; flex-wrap: nowrap; overflow-x: auto; gap: 6px !important; top: 10px !important; left: 10px !important; right: 10px !important; width: auto !important; }
  .view-quad, .view-sep { display: none !important; }
  #surfViewBtns { flex-direction: row !important; gap: 6px !important; }
  .view-btn { flex: 0 0 auto; width: auto !important; white-space: nowrap; padding: 8px 12px 8px 22px !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}

/* üst çubuk sıkışmasın: yazılar tek satır, dar ekranda kısalır */
.step, .btn-exit, .btn-save, .header-logo-sub { white-space: nowrap; }
@media (max-width: 1180px) { .header-logo-sub, .header-logo-sep { display: none; } .step { padding: 0 10px; } }
@media (max-width: 1040px) { .stepper .step span { display: none; } .step-sep { width: 14px; } }

/* ═════ GİRİŞTEKİ GÖKYÜZÜ (siteden ölçüldü: varlik/da56cfb25fc6.webp şeridi) ═════
   Gökyüzü CSS'te, zemin 3D'de gerçek beyaz düzlem (#eef0f2) — döndükçe ufuk doğal kayar */
.atmos { inset: 0 !important; filter: none !important;
  background: linear-gradient(to bottom, #02316f 0%, #013a82 10%, #014592 20%, #0255a1 30%, #0164b0 40%, #0878bb 50%, #448ac4 60%, #66a0cc 72%, #9cc1e0 76%, #eef0f2 76.2%, #eef0f2 100%) !important; }
.bulut { display: none !important; }
.canvas-hint { color: rgba(2,31,54,.6) !important; }
@media (max-width: 820px) { .atmos { background: linear-gradient(to bottom, #02316f 0%, #0164b0 22%, #66a0cc 40%, #eef0f2 40.2%, #eef0f2 100%) !important; } }

/* panel listesi: gökyüzü ve beyaz zeminde okunur cam kart */
.view-buttons { background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  padding: 12px 14px; box-shadow: 0 30px 60px -40px rgba(2,31,54,.55); width: 150px !important; }
.view-btn, .view-quad .view-btn { color: rgba(2,31,54,.6) !important; }
.view-btn::before { border-color: rgba(2,31,54,.35) !important; }
.view-btn.active { color: var(--lac) !important; }
@media (hover: hover) and (pointer: fine) { .view-btn:not(.active):hover { color: var(--lac) !important; } }
.view-quad .view-btn.active { text-decoration-color: var(--lac); }
.view-sep { background: rgba(2,31,54,.14) !important; }
@media (max-width: 820px) { .view-buttons { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; padding: 0; width: auto !important; } }

.hizmet-card { margin-top: 26px; padding: 16px; background: rgba(2,31,54,.86); color: #fff; -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); }
.hizmet-card .s-title { color: #fff !important; margin: 0 0 8px !important; }
.hizmet-card p { font-size: 13px; line-height: 1.55; margin-bottom: 12px; color: rgba(255,255,255,.88); }
.hizmet-card .tool-btn { background: rgba(255,255,255,.12) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.35) !important; }
.hizmet-card .tool-btn.on { background: #fff !important; color: var(--lac) !important; border-color: #fff !important; }
.rv-hizmet { font-size: 13px; line-height: 1.55; margin: -6px 0 16px; }
.rv-hizmet button { background: none; border: 0; padding: 0; font: inherit; color: var(--acik); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ═════ BAĞLAM KARTI: seçili panele ve öğeye göre değişir ═════ */
.ctx { margin: 18px 0 2px; padding: 14px 14px 12px; background: rgba(255,255,255,.86); box-shadow: inset 0 0 0 1px rgba(2,31,54,.14), 0 18px 40px -30px rgba(2,31,54,.45);
  transition: opacity .2s var(--egri), transform .24s var(--egri); }
.ctx[hidden] { display: none !important; }
@starting-style { .ctx { opacity: 0; transform: translateY(-4px); } }
.ctx-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ctx-h b { display: block; font-size: 15px; font-weight: 500; text-transform: uppercase; }
.ctx-h b::before { content: '[ '; } .ctx-h b::after { content: ' ]'; }
.ctx-h span { display: block; font-size: 12px; opacity: .7; margin-top: 2px; }
.ctx-x { flex-shrink: 0; height: 30px; padding: 0 10px; background: transparent; border: 1px solid rgba(2,31,54,.25); color: var(--lac); font-family: var(--font); font-size: 11px; text-transform: uppercase; cursor: pointer; }
.ctx-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; margin-bottom: 12px; }
.ctx-a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; background: var(--lac); color: #fff; border: 0; font-family: var(--font); font-size: 12px; cursor: pointer;
  transition: background-color .2s var(--egri), transform .16s var(--egri); }
.ctx-a svg { width: 20px; height: 20px; }
.ctx-a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .ctx-a:hover { background: var(--acik); } }
.ctx-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(2,31,54,.1); }
.ctx-l { font-size: 11px; text-transform: uppercase; opacity: .8; flex-shrink: 0; }
.ctx-sws { display: flex; gap: 6px; }
.ctx-sw { width: 26px; height: 26px; border: 1px solid rgba(2,31,54,.25); cursor: pointer; padding: 0; position: relative; }
.ctx-sw.on { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--lac); }
.ctx-custom { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); overflow: hidden; }
.ctx-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ctx-row input[type=range] { flex: 1; accent-color: var(--lac); }
.ctx-foot { justify-content: space-between; }
.ctx-link { background: none; border: 0; padding: 0; font-family: var(--font); font-size: 12px; color: var(--acik); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ctx-del { color: var(--kirmizi) !important; }
.ctx-elh { display: flex; justify-content: space-between; align-items: center; margin: -2px 0 10px; }
.ctx-kind { font-size: 11px; text-transform: uppercase; background: var(--lac); color: #fff; padding: 3px 8px; }
.ctx-text { display: flex; gap: 6px; margin-bottom: 4px; }
.ctx-text input { flex: 1; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid rgba(2,31,54,.25); background: #fff; font-family: var(--font); font-size: 14px; color: var(--lac); }
.ctx-size { display: flex; }
.ctx-size button { width: 40px; height: 40px; border: 1px solid rgba(2,31,54,.25); margin-left: -1px; background: #fff; font-family: var(--font); font-size: 13px; color: var(--lac); cursor: pointer; }
.ctx-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.ctx-tools button { height: 36px; border: 1px solid rgba(2,31,54,.2); background: rgba(255,255,255,.7); font-family: var(--font); font-size: 12px; color: var(--lac); cursor: pointer; transition: background-color .2s var(--egri); }
@media (hover: hover) and (pointer: fine) { .ctx-tools button:hover, .ctx-size button:hover, .ctx-x:hover { background: var(--lac); color: #fff; } .ctx-tools .ctx-del:hover { background: var(--kirmizi); color: #fff !important; } }
.ctx-tools button:disabled { opacity: .35; }
/* Renk sekmesi kalktı: bölümü gizle (bağlam kartında) */
.sidebar .s-section[data-tab="arka"] { display: none !important; }
/* panel listesi önizlemeleri */
.view-btn .th { position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 1px solid rgba(2,31,54,.25); background-size: cover; background-position: center; }
#surfViewBtns .view-btn { padding-left: 22px !important; }
#surfViewBtns .view-btn.has-th::before { display: none; }
#surfViewBtns .view-btn.active .th { box-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--lac); }

/* sol panel listesi: çerçeveli düğmeler (işaret kutusu yok) */
.view-btn::before, .view-btn.has-th::before, .view-btn .th { display: none !important; }
.view-btn, .view-quad .view-btn, #surfViewBtns .view-btn {
  border: 1px solid rgba(2,31,54,.22) !important; background: rgba(255,255,255,.55) !important; color: var(--lac) !important;
  padding: 8px 10px !important; text-align: left; text-decoration: none !important; font-weight: 400 !important;
  transition: background-color .2s var(--egri), color .2s var(--egri), border-color .2s var(--egri);
}
.view-quad .view-btn { text-align: center; padding: 6px 0 !important; }
.view-btn.active, .view-quad .view-btn.active, #surfViewBtns .view-btn.active { background: var(--lac) !important; border-color: var(--lac) !important; color: #fff !important; font-weight: 500 !important; }
@media (hover: hover) and (pointer: fine) { .view-btn:not(.active):hover { background: #fff !important; border-color: var(--lac) !important; } }
.view-btn.flash { background: var(--yesil) !important; border-color: var(--yesil) !important; color: var(--lac) !important; }
.view-btn:active { transform: scale(.97); }
@media (max-width: 820px) {
  #surfViewBtns .view-btn, .view-btn { background: rgba(255,255,255,.9) !important; padding: 8px 12px !important; }
}

@media (min-width: 821px) {
  .view-quad { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px !important; }
  .view-quad .view-btn { width: auto !important; font-size: 10.5px !important; }
}

/* çerçeve stili: seçilmeyen yalnız çerçeve (cam görünür), seçilen dolu lacivert */
.view-btn, .view-quad .view-btn, #surfViewBtns .view-btn,
.sidebar .size-btn, .sidebar .raf-btn {
  background: transparent !important; border: 1px solid rgba(2,31,54,.28) !important; color: var(--lac) !important; box-shadow: none !important;
}
.view-btn.active, .view-quad .view-btn.active, #surfViewBtns .view-btn.active,
.sidebar .size-btn.active, .sidebar .raf-btn.active {
  background: var(--lac) !important; border-color: var(--lac) !important; color: #fff !important; font-weight: 500 !important;
}
.sidebar .size-btn.active *, .sidebar .raf-btn.active * { color: #fff !important; }
@media (hover: hover) and (pointer: fine) {
  .view-btn:not(.active):hover, .sidebar .size-btn:not(.active):hover, .sidebar .raf-btn:not(.active):hover { background: transparent !important; border-color: var(--lac) !important; }
}
.view-btn.flash { background: var(--yesil) !important; border-color: var(--yesil) !important; color: var(--lac) !important; }
@media (max-width: 820px) {
  #surfViewBtns .view-btn, .view-btn { background: rgba(2,31,54,.28) !important; border-color: rgba(255,255,255,.55) !important; color: #fff !important;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  #surfViewBtns .view-btn.active, .view-btn.active { background: var(--lac) !important; border-color: var(--lac) !important; }
}

/* ürün sayfası .stdug kartı: 1px lacivert çerçeve, sağda 15px kare, seçilende içi 7px dolu */
#surfViewBtns { gap: 8px !important; }
.view-buttons { gap: 8px !important; }
.view-btn, .view-quad .view-btn, #surfViewBtns .view-btn,
.sidebar .size-btn, .sidebar .raf-btn {
  position: relative; background: transparent !important; border: 1px solid var(--lac) !important; color: var(--lac) !important;
  font-weight: 300 !important; box-shadow: none !important;
}
#surfViewBtns .view-btn, .view-buttons > .view-btn { padding: 10px 32px 10px 11px !important; min-height: 38px; }
.view-btn.active, .view-quad .view-btn.active, #surfViewBtns .view-btn.active,
.sidebar .size-btn.active, .sidebar .raf-btn.active { background: transparent !important; color: var(--lac) !important; border-color: var(--lac) !important; font-weight: 500 !important; }
.sidebar .size-btn.active *, .sidebar .raf-btn.active * { color: var(--lac) !important; }
#surfViewBtns .view-btn::before, .view-buttons > .view-btn::before, .sidebar .size-btn::before, .sidebar .raf-btn::before {
  content: '' !important; display: block !important; position: absolute; top: 50%; right: 10px; left: auto; width: 15px; height: 15px; margin-top: -7.5px;
  border: 1px solid var(--lac) !important; background: transparent !important; box-sizing: border-box;
}
.sidebar .size-btn::before, .sidebar .raf-btn::before { top: 8px; right: 8px; margin-top: 0; }
#surfViewBtns .view-btn::after, .view-buttons > .view-btn::after, .sidebar .size-btn::after, .sidebar .raf-btn::after {
  content: ''; position: absolute; top: 50%; right: 14px; width: 7px; height: 7px; margin-top: -3.5px; background: var(--lac); opacity: 0; transition: opacity .16s var(--egri);
}
.sidebar .size-btn::after, .sidebar .raf-btn::after { top: 12px; right: 12px; margin-top: 0; }
.view-btn.active::after, .sidebar .size-btn.active::after, .sidebar .raf-btn.active::after { opacity: 1; }
.view-quad .view-btn::before, .view-quad .view-btn::after { display: none !important; }
.view-quad .view-btn.active { background: var(--lac) !important; color: #fff !important; }
@media (hover: hover) and (pointer: fine) {
  .view-btn:not(.active):hover, .sidebar .size-btn:not(.active):hover, .sidebar .raf-btn:not(.active):hover { background: rgba(2,31,54,.05) !important; }
}
.view-btn.flash::after { background: var(--yesil); opacity: 1; }
@media (max-width: 820px) {
  #surfViewBtns .view-btn, .view-buttons > .view-btn { background: rgba(255,255,255,.18) !important; border-color: #fff !important; color: #fff !important; padding: 8px 30px 8px 12px !important; min-height: 0; }
  #surfViewBtns .view-btn::before, .view-buttons > .view-btn::before { border-color: #fff !important; }
  #surfViewBtns .view-btn::after, .view-buttons > .view-btn::after { background: #fff; }
  #surfViewBtns .view-btn.active, .view-buttons > .view-btn.active { background: var(--lac) !important; border-color: var(--lac) !important; color: #fff !important; }
}

.sidebar #rafSelector, .sidebar .raf-selector { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 6px !important; border: 0 !important; background: none !important; }
.sidebar .size-selector { gap: 6px !important; }
.sidebar .raf-btn { padding: 12px 28px 12px 10px !important; min-height: 44px; }
.sidebar .size-btn { padding: 12px 30px 12px 11px !important; min-height: 44px; }
.sidebar .raf-btn::before, .sidebar .size-btn::before { top: 50% !important; margin-top: -7.5px !important; }
.sidebar .raf-btn::after, .sidebar .size-btn::after { top: 50% !important; margin-top: -3.5px !important; right: 12px !important; }

#surfViewBtns .view-btn::after, .view-buttons > .view-btn::after, .sidebar .size-btn::after, .sidebar .raf-btn::after { display: block !important; border: 0 !important; box-shadow: none !important; width: 7px !important; height: 7px !important; }
.sidebar .raf-btn::after, .sidebar .size-btn::after { right: 14px !important; }

#surfViewBtns .view-btn::after, .view-buttons > .view-btn::after, .sidebar .size-btn::after, .sidebar .raf-btn::after,
#surfViewBtns .view-btn::before, .view-buttons > .view-btn::before, .sidebar .size-btn::before, .sidebar .raf-btn::before { left: auto !important; bottom: auto !important; }

#surfViewBtns .view-btn.active::after, .view-buttons > .view-btn.active::after { opacity: 1 !important; }

/* sol panel: dişi/erkek. seçilmeyen yalnız çerçeve, seçilen dolu lacivert; kare yok */
#surfViewBtns .view-btn::before, #surfViewBtns .view-btn::after,
.view-buttons > .view-btn::before, .view-buttons > .view-btn::after { display: none !important; }
#surfViewBtns .view-btn, .view-buttons > .view-btn { padding: 10px 11px !important; }
#surfViewBtns .view-btn.active, .view-buttons > .view-btn.active, .view-quad .view-btn.active {
  background: var(--lac) !important; border-color: var(--lac) !important; color: #fff !important; font-weight: 500 !important;
}
#surfViewBtns .view-btn.flash { background: var(--yesil) !important; border-color: var(--yesil) !important; color: var(--lac) !important; }
@media (max-width: 820px) { #surfViewBtns .view-btn, .view-buttons > .view-btn { padding: 8px 12px !important; } }

/* sağ panel kartları: ürün sayfasındaki .stdug gibi */
.sidebar .raf-selector, .sidebar #rafSelector, .sidebar .size-selector, .sidebar #masaSizeSelector {
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; border: 0 !important; background: none !important;
}
.sidebar .raf-btn, .sidebar .size-btn {
  position: relative; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px;
  padding: 9px 11px !important; min-height: 66px; text-align: center !important;
  background: transparent !important; border: 1px solid var(--lac) !important; box-shadow: none !important; outline: 0 !important; color: var(--lac) !important;
}
.sidebar .raf-btn .stikon, .sidebar .size-btn .stikon { display: flex; width: 100%; height: 62px; align-items: center; justify-content: center; }
.sidebar .stikon svg { width: 100%; height: 58px; color: var(--lac); }
.sidebar .stikon path, .sidebar .stikon line, .sidebar .stikon rect { stroke-width: .7px; vector-effect: non-scaling-stroke; }
.sidebar .stikon text { font-size: 19px; font-family: var(--font); fill: var(--lac); }
.sidebar .raf-btn b, .sidebar .size-btn .opt-t { font-size: 13px !important; font-weight: 300 !important; color: var(--lac) !important; }
.sidebar .raf-btn.active, .sidebar .size-btn.active { background: transparent !important; border-color: var(--lac) !important; }
.sidebar .raf-btn.active b, .sidebar .size-btn.active .opt-t { font-weight: 300 !important; }
.sidebar .raf-btn::before, .sidebar .size-btn::before {
  content: '' !important; display: block !important; position: absolute !important; top: 8px !important; right: 8px !important; left: auto !important; bottom: auto !important;
  width: 15px !important; height: 15px !important; margin: 0 !important; border: 1px solid var(--lac) !important; background: transparent !important; box-sizing: border-box;
}
.sidebar .raf-btn::after, .sidebar .size-btn::after {
  content: '' !important; display: block !important; position: absolute !important; top: 12px !important; right: 12px !important; left: auto !important; bottom: auto !important;
  width: 7px !important; height: 7px !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; background: var(--lac) !important; opacity: 0 !important;
}
.sidebar .raf-btn.active::after, .sidebar .size-btn.active::after { opacity: 1 !important; }
@media (hover: hover) and (pointer: fine) { .sidebar .raf-btn:not(.active):hover, .sidebar .size-btn:not(.active):hover { background: rgba(2,31,54,.05) !important; } }

.sidebar .raf-btn::before, .sidebar .raf-btn::after, .sidebar .size-btn::before, .sidebar .size-btn::after { border-radius: 0 !important; }

.view-quad, .view-buttons .view-sep { display: none !important; }

/* sol üst: 3D / Çizim seçimi; sol alt: ayrı çizim alanları paneli */
.view-buttons { width: auto !important; padding: 8px !important; }
.mode-sw { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mode-sw .view-btn { min-width: 64px; padding: 9px 12px !important; text-align: center !important; min-height: 0 !important; }
.draw-panel { position: absolute; left: 16px; bottom: 16px; z-index: 3; width: 168px; max-height: calc(100% - 120px); overflow-y: auto; scrollbar-width: none;
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
  background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.72); box-shadow: 0 30px 60px -40px rgba(2,31,54,.55);
  animation: dpIn .24s cubic-bezier(.23,1,.32,1); }
.draw-panel[hidden] { display: none !important; }
@keyframes dpIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dp-h { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--lac); }
.dp-h::before { content: '[ '; } .dp-h::after { content: ' ]'; }
#surfViewBtns [data-surf="net"] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .draw-panel { animation: none; } }
@media (max-width: 820px) {
  .view-buttons { right: auto !important; }
  .mode-sw .view-btn { min-width: 56px; padding: 8px 12px !important; }
  .draw-panel { left: 10px; right: 10px; bottom: auto; top: 58px; width: auto; max-height: none; flex-direction: row; align-items: center; overflow-x: auto; padding: 0;
    background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dp-h { display: none; }
}

.mode-sw .view-btn { background: transparent !important; border: 1px solid var(--lac) !important; color: var(--lac) !important; font-weight: 400 !important; }
.mode-sw .view-btn.active { background: var(--lac) !important; color: #fff !important; font-weight: 500 !important; }
.mode-sw .view-btn::before, .mode-sw .view-btn::after { display: none !important; }
@media (max-width: 820px) {
  .mode-sw .view-btn { background: rgba(255,255,255,.18) !important; border-color: #fff !important; color: #fff !important; }
  .mode-sw .view-btn.active { background: var(--lac) !important; border-color: var(--lac) !important; }
}

@media (min-width: 821px) { .dc-legend { left: calc(50% + 96px) !important; } }

@media (min-width: 821px) {
  .view-buttons { width: 168px !important; padding: 12px !important; box-sizing: border-box; }
  .mode-sw { grid-template-columns: 1fr; gap: 8px; }
  .mode-sw .view-btn { width: 100%; text-align: left !important; padding: 10px 11px !important; }
}

@media (min-width: 821px) {
  .draw-panel { background: linear-gradient(160deg, rgba(255,255,255,.42), rgba(214,229,244,.30)) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.9) !important; backdrop-filter: blur(22px) saturate(1.9) !important;
    border: 1px solid rgba(255,255,255,.85) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 30px 60px -34px rgba(2,31,54,.55) !important; }
}

/* çizim modu: sayfanın arka planı baştan sona gökyüzü (beyaz zemin yok), 3D sahne gizli; cam yüzeyler aynı */
.design-overlay { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.cizim-on .atmos { background: linear-gradient(to bottom, #02316f 0%, #013a82 9%, #014592 20%, #0255a1 32%, #0164b0 46%, #0878bb 60%, #448ac4 76%, #66a0cc 90%, #9cc1e0 100%) !important; }
body.cizim-on #c { visibility: hidden; }

@media (min-width: 821px) { .draw-panel { bottom: 76px !important; max-height: calc(100% - 200px) !important; } }

/* çizim alanları paneli: sol üstteki 3D/Çizim kutusuyla birebir aynı cam; ek çerçeve, başlık yok */
.draw-panel, .draw-panel:not([hidden]) {
  background: rgba(255,255,255,.62) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important; backdrop-filter: blur(24px) saturate(1.8) !important;
  border: 0 !important; box-shadow: 0 30px 60px -40px rgba(2,31,54,.55) !important; gap: 8px !important;
}
.dp-h { display: none !important; }
@media (max-width: 820px) { .draw-panel, .draw-panel:not([hidden]) { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; } }

.frame-tag { display: none !important; }

/* sağ panel: beyaz alanlar yok, tek parça cam */
@media (min-width: 821px) {
  .sidebar { background: rgba(255,255,255,.22) !important; -webkit-backdrop-filter: blur(26px) saturate(1.4) !important; backdrop-filter: blur(26px) saturate(1.4) !important;
    border: 1px solid rgba(255,255,255,.45) !important; }
  .sidebar .rail { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .ctx { background: rgba(255,255,255,.16) !important; border: 1px solid rgba(255,255,255,.5) !important; box-shadow: none !important; }
}

@media (min-width: 821px) {
  .sidebar .rail-btn { color: rgba(2,31,54,.78) !important; opacity: 1 !important; }
  .sidebar .rail-btn.active, .sidebar .rail-btn[aria-selected="true"] { color: var(--lac) !important; }
  .sidebar .lead, .sidebar .ctx-l, .sidebar #ctxSize { color: rgba(2,31,54,.82) !important; }
}

/* sağ panel = sol üstteki 3D kutusunun camı; beyaz çerçeve yok, iç katmanlar şeffaf */
@media (min-width: 821px) {
  .sidebar { background: rgba(255,255,255,.62) !important; -webkit-backdrop-filter: blur(24px) saturate(1.8) !important; backdrop-filter: blur(24px) saturate(1.8) !important;
    border: 0 !important; box-shadow: 0 30px 60px -40px rgba(2,31,54,.55) !important; }
  .ctx { background: transparent !important; border: 0 !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; }
}

/* hiza: her kenarda aynı 24px boşluk; üst çubuk nefes alır */
@media (min-width: 821px) {
  .header { height: 84px !important; padding: 0 24px !important; align-items: center !important; }
  .header-actions { margin-right: 0 !important; }
  .layout { height: calc(100vh - 84px) !important; }
  .sidebar { margin: 0 24px 24px 0 !important; max-height: calc(100vh - 84px - 24px) !important; }
  .sidebar .rail { position: static !important; }
  /* 3D / Çizim: sahnenin ortasında, yan yana */
  .view-buttons { top: 0 !important; left: 50% !important; transform: translateX(-50%); width: auto !important; padding: 8px !important; }
  .mode-sw { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .mode-sw .view-btn { width: auto !important; min-width: 88px; text-align: center !important; padding: 9px 16px !important; }
  .draw-panel { left: 24px !important; top: 0 !important; bottom: auto !important; max-height: calc(100% - 100px) !important; }
}
.sidebar .rail { position: static !important; }

@media (min-width: 821px) {
  .header .stepper { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden; margin: 0 24px !important; }
  .header-actions { flex: 0 0 auto !important; }
}

/* adım çubuğu: alt çizgi yok, bulunduğumuz adım kalın */
.step, .step.on, .step.done { border-bottom: 0 !important; box-shadow: none !important; text-decoration: none !important; }
.step::after, .step.on::after { display: none !important; }
.step.on, .step.on b, .step.on span { font-weight: 600 !important; color: #fff !important; }

.header-logo-sub, .header-logo-sep { display: none !important; }

.header .btn-save, #btnReview { border: 0 !important; box-shadow: none !important; outline: 0; }

/* 3D / Çizim: arkasında kutu yok; düğmeler üst çubuktaki düğmeler gibi */
.view-buttons { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
.mode-sw .view-btn:not(.active) { background: transparent !important; border-color: rgba(255,255,255,.55) !important; color: #fff !important; }
.mode-sw .view-btn.active { background: var(--lac) !important; border-color: var(--lac) !important; color: #fff !important; }
@media (hover: hover) and (pointer: fine) { .mode-sw .view-btn:not(.active):hover { border-color: #fff !important; background: rgba(255,255,255,.08) !important; } }

.canvas-hint, #canvasHint { display: none !important; }

.sidebar .rail { border-bottom: 0 !important; box-shadow: none !important; }
.sidebar .sum-box { border-top: 0 !important; }

/* çizim alanları: 3D/Çizim gibi; arkasında kutu yok, beyaz çerçeveli düğmeler, seçilen lacivert dolu */
.draw-panel, .draw-panel:not([hidden]) { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
#surfViewBtns .view-btn:not(.active) { background: transparent !important; border: 1px solid rgba(255,255,255,.55) !important; color: #fff !important; }
#surfViewBtns .view-btn.active { background: var(--lac) !important; border-color: var(--lac) !important; color: #fff !important; }
@media (hover: hover) and (pointer: fine) { #surfViewBtns .view-btn:not(.active):hover { border-color: #fff !important; background: rgba(255,255,255,.08) !important; } }

/* çizim: 3D/Çizim düğmeleriyle aynı eksende, alanın tam ortasında */
@media (min-width: 821px) {
  .design-overlay { padding: 72px 190px 96px 190px !important; }
  body.m-kutu .design-overlay { padding-left: 116px !important; padding-right: 116px !important; }
  .dc-legend { left: 50% !important; transform: translateX(-50%) !important; }
}

/* adımlar: numara kare içinde; bulunduğumuz adım dolu, diğerleri boş */
.step-sep { display: none !important; }
.stepper { gap: 18px !important; }
.step { gap: 8px !important; padding: 0 !important; }
.step b { display: inline-grid !important; place-items: center; width: 22px !important; height: 22px !important; border: 1px solid rgba(255,255,255,.6) !important;
  border-radius: 0 !important; background: transparent !important; color: #fff !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1; }
.step b::before, .step b::after { content: none !important; }
.step.on b { background: #fff !important; border-color: #fff !important; color: var(--lac) !important; font-weight: 600 !important; }
.step.done b { border-color: #fff !important; }

/* raf sayısı: 4 kart yan yana */
.sidebar .raf-selector, .sidebar #rafSelector { grid-template-columns: repeat(4, 1fr) !important; }
.sidebar .raf-btn { padding: 22px 4px 8px !important; min-height: 0 !important; }
.sidebar .raf-btn .stikon { height: 52px !important; }
.sidebar .raf-btn .stikon svg { height: 48px !important; }

/* Onaya gönder: 3D düğmesi gibi lacivert dolu, beyaz yazı */
.header .btn-save, #btnReview { background: var(--lac) !important; color: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; }
@media (hover: hover) and (pointer: fine) { #btnReview:hover { background: #0d597c !important; } }

/* adımlar: 3D/Çizim düğmeleriyle aynı dikey eksende */
@media (min-width: 821px) {
  .header { position: relative; }
  .header .stepper { position: absolute !important; left: var(--eksen, 50%); top: 50%; transform: translate(-50%, -50%); margin: 0 !important; flex: none !important; overflow: visible !important; gap: 14px !important; }
}

#stantLead { display: none !important; }

.sidebar .s-section[data-tab="stant"] { padding-top: 20px !important; }
#rafliOpts > .s-title:first-child, #masaOpts > .s-title:first-child { margin-top: 0 !important; }

.sidebar .sum-box .dim-row { display: none !important; }

/* sağ panel ritmi: bölümler arası 32px, başlık–içerik 14px */
.sidebar .s-section[data-tab="stant"] { padding-top: 24px !important; }
.sidebar .s-section[data-tab="stant"] .s-title { margin: 32px 0 14px !important; }
#rafliOpts > .s-title:first-child, #masaOpts > .s-title:first-child { margin-top: 0 !important; }
.sidebar .sum-box { margin: 32px 0 0 !important; padding-top: 0 !important; }
.sidebar .sum-box .spec-list { margin-top: 0 !important; }
.sidebar .sum-box .spec-item:first-child { padding-top: 0 !important; }
.sidebar .next-btn { margin-top: 32px !important; }

/* açıklama yazısı: arkasında kutu yok */
.dc-legend { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.bottom-bar.bos { display: none !important; }

.dc-legend, .dc-legend span { color: #fff !important; font-size: 12px !important; }
.dc-legend i:not(.safe) { border-top-color: #fff !important; }

.hizmet-card { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding-left: 0 !important; padding-right: 0 !important; }

/* Tasarım hizmeti: diğer yazılar gibi lacivert; düğmeler tam genişlik */
.hizmet-card, .hizmet-card p, .hizmet-card .s-title { color: var(--lac) !important; }
.hizmet-card .tool-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
.hizmet-card .tool-btn { height: 48px !important; width: 100% !important; font-size: 15px !important; font-weight: 300 !important; text-transform: uppercase; border-radius: 0 !important;
  background: transparent !important; color: var(--lac) !important; border: 1px solid var(--lac) !important; }
.hizmet-card .tool-btn[data-hizmet="wa"] { background: var(--lac) !important; color: #fff !important; border-color: var(--lac) !important; }

/* çizim: panel adları dışarıda, oklarla; sağa sola dağılır */
.net-etiket { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.net-etiket svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.net-etiket line { stroke: #fff; stroke-width: 1; stroke-dasharray: var(--L); stroke-dashoffset: var(--L); animation: neCiz .5s cubic-bezier(.23,1,.32,1) forwards; animation-delay: var(--d); }
.net-etiket circle { fill: #fff; opacity: 0; animation: neGor .2s ease-out forwards; animation-delay: calc(var(--d) + .4s); }
.net-etiket span { position: absolute; transform: translateY(-50%); color: #fff; font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; animation: neGel .45s cubic-bezier(.23,1,.32,1) forwards; animation-delay: var(--d); }
.net-etiket span.sol { translate: 12px 0; } .net-etiket span.sag { translate: -12px 0; }
@keyframes neCiz { to { stroke-dashoffset: 0; } }
@keyframes neGor { to { opacity: 1; } }
@keyframes neGel { to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .net-etiket line, .net-etiket circle, .net-etiket span { animation: none; opacity: 1; stroke-dashoffset: 0; translate: 0 0; } }

/* şablonlar: çerçeve yok; seçilen lacivert çerçeve */
.sidebar .tpl { border: 1px solid transparent !important; box-shadow: none !important; }
.sidebar .tpl.on { border-color: var(--lac) !important; }
@media (hover: hover) and (pointer: fine) { .sidebar .tpl:not(.on):hover { border-color: rgba(2,31,54,.3) !important; } }

/* uyarılar: panellerle aynı cam, lacivert yazı */
.toast, .toast.warn, .toast.err {
  background: rgba(255,255,255,.62) !important; -webkit-backdrop-filter: blur(24px) saturate(1.8) !important; backdrop-filter: blur(24px) saturate(1.8) !important;
  color: var(--lac) !important; border: 0 !important; border-radius: 0 !important; box-shadow: 0 30px 60px -40px rgba(2,31,54,.55) !important;
}
.toast span { color: var(--lac) !important; }
.toast button { color: #fff !important; background: var(--lac) !important; border: 0 !important; border-radius: 0 !important; }

@media (min-width: 821px) { .draw-panel { width: 110px !important; } }
.toast { display: flex !important; align-items: center; gap: 14px !important; }
.toast span { flex: 1 1 auto; min-width: 0; }
.toast button { flex: 0 0 auto; }


.sidebar .rail-btn, .sidebar .rail-btn:hover, .sidebar .rail-btn:focus, .sidebar .rail-btn:focus-visible { box-shadow: none !important; outline: 0 !important; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; background: none !important; }

/* ═ ortak düğme dili: çerçeve (boş) → üzerine gelince dolu lacivert, beyaz yazı/çizim ═ */
.sidebar .tpl, .sidebar .raf-btn, .sidebar .size-btn, .sidebar .tool-btn, .sidebar .place-opt, .sidebar .ctx-tools button, .sidebar .ctx-size button {
  background: transparent !important; border: 1px solid var(--lac) !important; box-shadow: none !important; color: var(--lac) !important;
  transition: background-color .18s cubic-bezier(.23,1,.32,1), color .18s cubic-bezier(.23,1,.32,1) !important;
}
.sidebar .tpl.on { background: var(--lac) !important; color: #fff !important; }
.sidebar .tool-btn[data-hizmet="wa"] { background: var(--lac) !important; color: #fff !important; }
@media (hover: hover) and (pointer: fine) {
  .sidebar .tpl:hover, .sidebar .raf-btn:hover, .sidebar .size-btn:hover, .sidebar .tool-btn:hover, .sidebar .place-opt:hover,
  .sidebar .ctx-tools button:not(:disabled):hover, .sidebar .ctx-size button:hover {
    background: var(--lac) !important; color: #fff !important; border-color: var(--lac) !important; box-shadow: none !important;
  }
  .sidebar .raf-btn:hover *, .sidebar .size-btn:hover *, .sidebar .tpl:hover, .sidebar .place-opt:hover * { color: #fff !important; }
  .sidebar .raf-btn:hover .stikon svg, .sidebar .size-btn:hover .stikon svg { color: #fff !important; }
  .sidebar .raf-btn:hover .stikon text, .sidebar .size-btn:hover .stikon text { fill: #fff !important; }
  .sidebar .raf-btn:hover::before, .sidebar .size-btn:hover::before { border-color: #fff !important; }
  .sidebar .raf-btn:hover::after, .sidebar .size-btn:hover::after { background: #fff !important; }
  .sidebar .ctx-tools .ctx-del:hover { background: #c62828 !important; border-color: #c62828 !important; }
  .sidebar .tool-btn[data-hizmet="wa"]:hover { background: #0d597c !important; }
  /* sol taraf (gökyüzü üstünde): beyaz çerçeve → üzerine gelince lacivert dolu */
  .mode-sw .view-btn:not(.active):hover, #surfViewBtns .view-btn:not(.active):hover { background: var(--lac) !important; border-color: var(--lac) !important; box-shadow: none !important; color: #fff !important; }
}
.sidebar .stikon text { fill: currentColor; }

.hizmet-card .tool-grid { grid-template-columns: 1fr 1fr !important; }
.hizmet-card .tool-btn { font-size: 13px !important; }

/* dosya bırakma alanı: arkasında panel yok, yalnız kesik lacivert çerçeve */
.sidebar .upload-zone { background: transparent !important; border: 1px dashed var(--lac) !important; box-shadow: none !important; }
@media (hover: hover) and (pointer: fine) { .sidebar .upload-zone:hover { border-style: solid !important; } }
.sidebar .upload-zone.drag, .sidebar .upload-zone.over, .sidebar .upload-zone.dragover { background: var(--lac) !important; color: #fff !important; border-style: solid !important; }

/* ═ ters çevirme kuralı: üzerine gelince dolu → çerçeve, çerçeve → dolu ═ */
@media (hover: hover) and (pointer: fine) {
  /* panel içindeki dolu düğmeler: çerçeveye döner */
  .sidebar .next-btn:hover, .sidebar .tpl.on:hover, .sidebar .tool-btn[data-hizmet="wa"]:hover, .sidebar .ctx-a:hover {
    background: transparent !important; color: var(--lac) !important; border: 1px solid var(--lac) !important; box-shadow: none !important;
  }
  .sidebar .ctx-a:hover svg { color: var(--lac) !important; stroke: currentColor; }
  /* gökyüzü üstündeki dolu düğmeler: beyaz çerçeveye döner */
  .mode-sw .view-btn.active:hover, #surfViewBtns .view-btn.active:hover, .header #btnReview:hover {
    background: transparent !important; color: #fff !important; border: 1px solid #fff !important; box-shadow: none !important;
  }
  /* gökyüzü üstündeki çerçeveli düğmeler: lacivert dolar */
  .header .btn-exit:hover { background: var(--lac) !important; border-color: var(--lac) !important; color: #fff !important; }
}
.sidebar .next-btn, .sidebar .ctx-a, .header #btnReview, .header .btn-exit { border: 1px solid transparent; transition: background-color .18s cubic-bezier(.23,1,.32,1), color .18s cubic-bezier(.23,1,.32,1), border-color .18s cubic-bezier(.23,1,.32,1) !important; }
.sidebar .next-btn { border-color: var(--lac) !important; }

/* ═ son kural: seçilen = dolu lacivert + beyaz yazı; üzerine gelmek doldurmaz ═ */
@media (hover: hover) and (pointer: fine) {
  .sidebar .tpl:not(.on):hover, .sidebar .raf-btn:not(.active):hover, .sidebar .size-btn:not(.active):hover, .sidebar .tool-btn:not([data-hizmet="wa"]):hover,
  .sidebar .place-opt:hover, .sidebar .ctx-tools button:not(:disabled):not(.ctx-del):hover, .sidebar .ctx-size button:hover {
    background: transparent !important; color: var(--lac) !important; border-color: var(--lac) !important; box-shadow: none !important;
  }
  .sidebar .raf-btn:not(.active):hover *, .sidebar .size-btn:not(.active):hover *, .sidebar .tpl:not(.on):hover, .sidebar .place-opt:hover * { color: var(--lac) !important; }
  .sidebar .raf-btn:not(.active):hover .stikon text, .sidebar .size-btn:not(.active):hover .stikon text { fill: var(--lac) !important; }
  .sidebar .raf-btn:not(.active):hover::before, .sidebar .size-btn:not(.active):hover::before { border-color: var(--lac) !important; }
  .sidebar .ctx-tools .ctx-del:hover { background: transparent !important; color: #c62828 !important; border-color: #c62828 !important; }
  .mode-sw .view-btn:not(.active):hover, #surfViewBtns .view-btn:not(.active):hover { background: transparent !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; }
  .header .btn-exit:hover { background: transparent !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; }
}
/* raf ve ölçü kartı: seçilende dolgu yok, seçimi köşedeki dolu kare gösterir */
.sidebar .raf-btn.active, .sidebar .size-btn.active { background: transparent !important; border-color: var(--lac) !important; }
.sidebar .raf-btn.active *, .sidebar .size-btn.active * { color: var(--lac) !important; }
.sidebar .raf-btn.active .stikon text, .sidebar .size-btn.active .stikon text { fill: var(--lac) !important; }
.sidebar .raf-btn.active::before, .sidebar .size-btn.active::before { border-color: var(--lac) !important; }
.sidebar .raf-btn.active::after, .sidebar .size-btn.active::after { background: var(--lac) !important; opacity: 1 !important; }

/* üzerine gelince kalınlaşma yok */
@media (hover: hover) and (pointer: fine) { .sidebar button:hover, .view-buttons button:hover, #surfViewBtns button:hover, .header button:hover { box-shadow: none !important; } }
.sidebar .raf-btn.active, .sidebar .size-btn.active, .sidebar .model-btn.active { box-shadow: none !important; }

.sidebar .s-section[data-tab="yukle"] { padding-top: 24px !important; }
.sidebar .s-section[data-tab="yukle"] > .s-title:first-child { margin-top: 0 !important; }

/* marka şeridi (şablonların üstünde) */
#brandCard { display: none !important; }
.tpl-marka { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; font-size: 12px; color: var(--lac); line-height: 1.45; }
.tpl-marka .tm-t { flex: 1 1 160px; }
.tpl-marka .tm-btn { height: 36px; padding: 0 14px; background: transparent; border: 1px solid var(--lac); color: var(--lac); font: inherit; font-size: 12px; text-transform: uppercase; cursor: pointer; }
.tpl-marka .tm-btn:active { transform: scale(.97); }
.tpl-marka .tm-logo { width: 36px; height: 36px; flex: 0 0 36px; background: #fff center/80% auto no-repeat; outline: 1px solid rgba(2,31,54,.15); }
.tpl-marka .tm-sw { display: flex; gap: 3px; } .tpl-marka .tm-sw i { width: 12px; height: 12px; display: block; }
.tpl-marka .tm-link { background: none; border: 0; padding: 0; color: var(--lac); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sidebar .tpl-mini i:first-child { background-size: 80% auto !important; }

/* 3D / Çizim / Kurulum */
@media (min-width: 821px) { .mode-sw { grid-template-columns: repeat(3, auto) !important; } }
.kurulum-adim { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 22px; color: #fff; white-space: nowrap; }
.kurulum-adim[hidden] { display: none !important; }
.kurulum-adim ol { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.kurulum-adim { max-width: calc(100% - 32px); flex-wrap: wrap; justify-content: center; row-gap: 10px; }
.kurulum-adim ol { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
.kurulum-adim li { display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--lac); opacity: .55; transition: opacity .25s cubic-bezier(.23,1,.32,1); }
.kurulum-adim li b { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--lac); font-size: 11px; font-weight: 500; }
.kurulum-adim li.on { opacity: 1; font-weight: 600; }
.kurulum-adim li.on b { background: var(--lac); color: #fff; }
.kurulum-adim .kur-tekrar { height: 34px; padding: 0 14px; background: transparent; border: 1px solid var(--lac); color: var(--lac); font: inherit; font-size: 12px; text-transform: uppercase; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .25s; }
.kurulum-adim.bitti .kur-tekrar { opacity: 1; pointer-events: auto; }
.kurulum-adim .kur-tekrar:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .kurulum-adim .kur-tekrar:hover { background: var(--lac); color: #fff; } }
@media (max-width: 820px) { .kurulum-adim { bottom: 70px; gap: 10px; } .kurulum-adim ol { gap: 10px; } .kurulum-adim li span { display: none; } }

/* geri al / ileri al */
.view-buttons { display: flex !important; flex-direction: row !important; align-items: center; gap: 14px !important; }
.gecmis { display: flex; gap: 6px; }
.gec-btn { width: 36px; height: 36px; display: grid; place-items: center; background: transparent; border: 1px solid rgba(255,255,255,.55); color: #fff; cursor: pointer; padding: 0; transition: opacity .18s; }
.gec-btn svg { width: 18px; height: 18px; }
.gec-btn:disabled { opacity: .35; cursor: default; }
.gec-btn:not(:disabled):active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .gec-btn:not(:disabled):hover { border-color: #fff; } }

.view-buttons { position: absolute; }
.gecmis { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 14px; }

.view-buttons { overflow: visible !important; max-height: none !important; }

.gec-btn { width: 34px !important; height: 34px !important; }
.gec-btn svg { width: 16px !important; height: 16px !important; }
.gec-btn:disabled { opacity: .3 !important; }

/* içerik formu */
.icerik { display: grid; gap: 10px; }
.icerik label { display: grid; gap: 5px; font-size: 12px; color: var(--lac); }
.icerik label > span { font-weight: 500; text-transform: uppercase; letter-spacing: .03em; font-size: 11px; }
.icerik label > span em { font-style: normal; font-weight: 300; text-transform: none; letter-spacing: 0; opacity: .75; margin-left: 4px; }
.icerik input[type=text], .icerik input[type=url] { height: 40px; padding: 0 12px; background: transparent; border: 1px solid var(--lac); border-radius: 0; color: var(--lac); font: inherit; font-size: 14px; outline: 0; }
.icerik input::placeholder { color: rgba(2,31,54,.45); }
.icerik input:focus-visible { box-shadow: inset 0 0 0 1px var(--lac); }
.icerik .ic-kutu { display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; }
.icerik .ic-kutu input { width: 15px; height: 15px; accent-color: #021f36; margin: 0; }
.icerik .ic-not { margin: 0; font-size: 12px; color: rgba(2,31,54,.75); }
.icerik .ic-not[hidden] { display: none; }

.tpl-marka .tm-palet { flex: 1 0 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); gap: 4px; margin-top: 2px; }
.tpl-marka .tm-ton { height: 26px; padding: 0; border: 0; cursor: pointer; outline-offset: 2px; }
.tpl-marka .tm-ton.on { outline: 2px solid var(--lac); }
.tpl-marka .tm-ton:active { transform: scale(.94); }

/* alt bar: ara çizgiler yok */
.bottom-bar .bar-sep, .bottom-bar .nav3d-sep, .bottom-bar .la-sep, .bottom-bar .dc-sep, .nav3d-sep, .bar-sep, .la-sep, .dc-sep { display: none !important; }

/* görsel yerleştirme kartı */
#placeOpts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#placeOpts .place-opt { text-align: left; padding: 10px 12px !important; display: grid; gap: 2px; }
#placeOpts .place-opt strong { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; }
#placeOpts .place-opt span { font-size: 11px; opacity: .75; }
#placeOpts .place-opt.on { background: var(--lac) !important; color: #fff !important; border-color: var(--lac) !important; }
#placeOpts .place-opt.on * { color: #fff !important; opacity: 1; }
#placeOpts .place-bitti { grid-column: 1 / -1; height: 40px; background: var(--lac); color: #fff; border: 1px solid var(--lac); font: inherit; font-size: 13px; text-transform: uppercase; cursor: pointer; }
#placeOpts .place-bitti:active { transform: scale(.98); }

/* tasarım hizmeti: iki düğme aynı (dolu lacivert, beyaz yazı) */
.sidebar .hizmet-card .tool-btn[data-hizmet] { background: var(--lac) !important; color: #fff !important; border-color: var(--lac) !important; }
@media (hover: hover) and (pointer: fine) { .sidebar .hizmet-card .tool-btn[data-hizmet]:hover { background: transparent !important; color: var(--lac) !important; border-color: var(--lac) !important; } }

/* Yazı sekmesi: İçerik formuyla aynı dil */
.yz-form { display: grid; gap: 12px; }
.yz-form label { display: grid; gap: 5px; color: var(--lac); }
.yz-form label > span { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }
.yz-form input[type=text], .yz-form select.font-select { height: 40px !important; padding: 0 12px !important; background: transparent !important; border: 1px solid var(--lac) !important; border-radius: 0 !important; color: var(--lac) !important; font: inherit; font-size: 14px !important; width: 100%; outline: 0; box-shadow: none !important; }
.yz-form input[type=text]::placeholder { color: rgba(2,31,54,.45); }
.yz-form select.font-select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--lac) 50%), linear-gradient(135deg, var(--lac) 50%, transparent 50%) !important; background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50% !important; background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat !important; }
.yz-form input:focus-visible, .yz-form select:focus-visible { box-shadow: inset 0 0 0 1px var(--lac) !important; }
.yz-satir { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: end; }
.yz-form .number-spinner { height: 40px !important; border: 1px solid var(--lac) !important; background: transparent !important; border-radius: 0 !important; display: flex; }
.yz-form .number-spinner input { height: 38px !important; background: transparent !important; border: 0 !important; color: var(--lac) !important; font-size: 14px !important; padding: 0 10px !important; width: 100%; }
.yz-form .spinner-btns { border-left: 1px solid var(--lac) !important; }
.yz-form .spin-btn { color: var(--lac) !important; background: transparent !important; }
.yz-stil { display: flex; gap: 6px; }
.yz-stil .tool-btn { width: 40px !important; height: 40px !important; padding: 0 !important; font-size: 15px !important; display: grid; place-items: center; }
.yz-stil #txtBold { font-weight: 700 !important; }
.yz-stil #txtItalic { font-style: italic !important; font-family: Georgia, serif !important; }
.yz-stil .tool-btn.on, .yz-stil .tool-btn.active { background: var(--lac) !important; color: #fff !important; }
.yz-form .text-color-swatch { width: 40px !important; height: 40px !important; border: 1px solid var(--lac) !important; border-radius: 0 !important; padding: 4px; background: transparent !important; position: relative; }
.yz-form .text-color-swatch span { display: block; width: 100%; height: 100%; border-radius: 0 !important; }
.yz-form .yz-ekle { height: 48px; background: var(--lac); color: #fff; border: 1px solid var(--lac); font: inherit; font-size: 15px; font-weight: 300; text-transform: uppercase; cursor: pointer; margin-top: 4px; }
.yz-form .yz-ekle:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .yz-form .yz-ekle:hover { background: transparent; color: var(--lac); } }

.yz-form #textInput { height: 40px !important; padding: 0 12px !important; background: transparent !important; border: 1px solid var(--lac) !important; border-radius: 0 !important; color: var(--lac) !important; font-size: 14px !important; box-shadow: none !important; }
.yz-form #textInput:focus-visible { box-shadow: inset 0 0 0 1px var(--lac) !important; }
.yz-form #btnAddText { text-transform: uppercase !important; letter-spacing: .02em; font-size: 15px !important; padding: 0 !important; }

/* çerçeveli öğelerin üzerine gelince ya da odaklanınca ek çerçeve/kalınlaşma yok */
.sidebar input, .sidebar select, .sidebar textarea, .sidebar button, .sidebar .number-spinner, .sidebar .text-color-swatch, .sidebar .upload-zone,
.sidebar input:hover, .sidebar select:hover, .sidebar button:hover, .sidebar .number-spinner:hover, .sidebar .text-color-swatch:hover,
.sidebar input:focus, .sidebar select:focus, .sidebar textarea:focus, .sidebar input:focus-visible, .sidebar select:focus-visible, .sidebar .number-spinner:focus-within {
  box-shadow: none !important; outline: none !important;
}
.sidebar .tm-ton.on { outline: 2px solid var(--lac) !important; }

/* Yazı: renk kutusu ve etiket hizası */
.yz-form label > span { line-height: 14px; height: 14px; display: block; white-space: nowrap; }
.yz-form .text-color-swatch { position: relative !important; padding: 0 !important; overflow: hidden; box-sizing: border-box; }
.yz-form .text-color-swatch span { position: absolute !important; inset: 5px !important; width: auto !important; height: auto !important; margin: 0 !important; }
.yz-form .text-color-swatch input[type=color] { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; cursor: pointer; margin: 0 !important; }
.yz-satir { grid-template-columns: 1fr 86px 40px !important; }

.yz-form #btnAddText, .yz-form .yz-ekle { font-size: 17px !important; letter-spacing: normal !important; font-weight: 300 !important; height: 48px !important; }

/* yazı tipi açılır listesi */
.font-drop { position: relative; }
.font-drop .fd-btn { width: 100%; height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; background: transparent; border: 1px solid var(--lac); color: var(--lac); font-size: 16px; cursor: pointer; text-align: left; }
.font-drop .fd-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.font-drop .fd-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.font-drop .fd-liste { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-height: 320px; overflow-y: auto; padding: 6px;
  background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: 0 30px 60px -30px rgba(2,31,54,.55);
  transform-origin: top center; animation: fdAc .16s cubic-bezier(.23,1,.32,1); scrollbar-width: thin; }
.font-drop .fd-liste[hidden] { display: none; }
@keyframes fdAc { from { opacity: 0; transform: scale(.98) translateY(-4px); } to { opacity: 1; transform: none; } }
.font-drop .fd-grup { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: rgba(2,31,54,.6); padding: 10px 8px 4px; font-family: var(--font); }
.font-drop .fd-oge { display: block; width: 100%; text-align: left; padding: 8px; background: transparent; border: 0; color: var(--lac); font-size: 19px; line-height: 1.2; cursor: pointer; }
.font-drop .fd-oge.on { background: var(--lac); color: #fff; }
@media (hover: hover) and (pointer: fine) { .font-drop .fd-oge:not(.on):hover { background: rgba(2,31,54,.08); } }
@media (prefers-reduced-motion: reduce) { .font-drop .fd-liste { animation: none; } }
/* boyut: ok alanı geniş */
.yz-form .spinner-btns { width: 34px !important; display: flex !important; flex-direction: column !important; }
.yz-form .spin-btn { flex: 1 1 50% !important; width: 100% !important; height: auto !important; display: grid !important; place-items: center; padding: 0 !important; cursor: pointer; }
.yz-form .spin-btn + .spin-btn { border-top: 1px solid var(--lac) !important; }
.yz-form .spin-btn svg { width: 10px; height: 6px; }

/* ═ Öğeler sekmesi: Yazı / İçerik ile aynı dil ═ */
.sidebar .s-section[data-tab="oge"] { padding-top: 24px !important; }
.sidebar .s-section[data-tab="oge"] + .s-section[data-tab="oge"] { padding-top: 32px !important; }
.sidebar .s-section[data-tab="oge"] .s-title { margin: 0 0 14px !important; }
/* şekil seçimi + renk: 40px kare kutular */
.sidebar .shape-grid { display: flex !important; gap: 6px !important; flex-wrap: wrap; margin-bottom: 12px; }
.sidebar .shape-btn { width: 40px !important; height: 40px !important; padding: 0 !important; display: grid !important; place-items: center; background: transparent !important; border: 1px solid var(--lac) !important; border-radius: 0 !important; color: var(--lac) !important; cursor: pointer; }
.sidebar .shape-btn svg { width: 18px; height: 18px; }
.sidebar .shape-btn.sel { background: var(--lac) !important; color: #fff !important; }
.sidebar .s-section[data-tab="oge"] .text-color-swatch { width: 40px !important; height: 40px !important; position: relative !important; padding: 0 !important; border: 1px solid var(--lac) !important; border-radius: 0 !important; background: transparent !important; overflow: hidden; flex: 0 0 40px; }
.sidebar .s-section[data-tab="oge"] .text-color-swatch span { position: absolute !important; inset: 5px !important; width: auto !important; height: auto !important; border-radius: 0 !important; margin: 0 !important; }
.sidebar .s-section[data-tab="oge"] .text-color-swatch input[type=color] { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; cursor: pointer; margin: 0 !important; }
#shapeColorSwatch { margin-left: auto; }
/* ikon başlığı */
.sidebar .sym-head { display: flex !important; align-items: center; gap: 10px; margin-bottom: 10px; }
.sidebar .sym-hint { font-size: 12px !important; color: rgba(2,31,54,.8) !important; }
/* ikon ızgarası: çerçeveli kutular */
.sidebar .pkg-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)) !important; gap: 6px !important; }
.sidebar .pkg-grid > * { aspect-ratio: 1; display: grid !important; place-items: center; background: transparent !important; border: 1px solid var(--lac) !important; border-radius: 0 !important; padding: 8px !important; cursor: pointer; color: var(--lac); }
.sidebar .pkg-grid > * svg, .sidebar .pkg-grid > * img { width: 100% !important; height: 100% !important; max-width: 28px; max-height: 28px; }
/* karekod girişi */
.sidebar .qr-in { height: 40px !important; padding: 0 12px !important; background: transparent !important; border: 1px solid var(--lac) !important; border-radius: 0 !important; color: var(--lac) !important; font-size: 14px !important; width: 100%; margin-bottom: 10px; box-sizing: border-box; }
.sidebar .qr-in::placeholder { color: rgba(2,31,54,.45); }
.sidebar .s-section[data-tab="oge"] .tool-grid { display: block !important; }
/* ana düğmeler: Devam ile aynı */
.sidebar .og-ekle, .sidebar #btnAddShape, .sidebar #qrAdd { display: block; width: 100% !important; height: 48px !important; padding: 0 !important; background: var(--lac) !important; color: #fff !important; border: 1px solid var(--lac) !important; border-radius: 0 !important; font-family: var(--font) !important; font-size: 17px !important; font-weight: 300 !important; letter-spacing: normal !important; text-transform: uppercase !important; cursor: pointer; }
.sidebar .og-ekle:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .sidebar .og-ekle:hover, .sidebar #btnAddShape:hover, .sidebar #qrAdd:hover { background: transparent !important; color: var(--lac) !important; } }
.sidebar .og-not { margin-top: 10px; font-size: 12px !important; color: rgba(2,31,54,.75) !important; text-align: left !important; padding: 0 !important; background: none !important; border: 0 !important; }

/* ═ Panel kartı (üstte açılan): diğer sekmelerle aynı dil ═ */
.ctx { padding: 0 0 8px !important; }
.ctx-h { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px !important; }
.ctx-h b { display: block; font-size: 13px !important; font-weight: 500 !important; text-transform: uppercase; letter-spacing: .03em; color: var(--lac) !important; }
.ctx-h b::before { content: '[ '; } .ctx-h b::after { content: ' ]'; }
.ctx-h #ctxSize { display: block; font-size: 12px !important; color: rgba(2,31,54,.75) !important; margin-top: 3px; }
.ctx .ctx-x { height: 34px !important; padding: 0 14px !important; background: transparent !important; border: 1px solid var(--lac) !important; border-radius: 0 !important; color: var(--lac) !important; font-size: 12px !important; text-transform: uppercase; cursor: pointer; }
/* hızlı eylemler: Devam gibi lacivert */
.ctx-acts { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important; gap: 6px !important; margin-bottom: 14px !important; }
.ctx-acts .ctx-a { height: 48px !important; display: flex !important; align-items: center; justify-content: center; gap: 8px; flex-direction: row !important; background: var(--lac) !important; color: #fff !important; border: 1px solid var(--lac) !important; border-radius: 0 !important; font-size: 13px !important; font-weight: 300 !important; text-transform: uppercase; cursor: pointer; }
.ctx-acts .ctx-a svg { width: 16px; height: 16px; flex: 0 0 auto; }
.ctx-acts .ctx-a[hidden] { display: none !important; }
/* satırlar: etiket + renk kutuları */
.ctx-row { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; padding: 0 !important; border: 0 !important; margin-bottom: 12px !important; }
.ctx-l { font-size: 11px !important; font-weight: 500 !important; text-transform: uppercase; letter-spacing: .03em; color: var(--lac) !important; }
.ctx-sws { display: flex !important; gap: 6px !important; }
.ctx-sw { width: 34px !important; height: 34px !important; border: 1px solid var(--lac) !important; border-radius: 0 !important; padding: 0 !important; box-shadow: inset 0 0 0 4px rgba(255,255,255,0) !important; position: relative; cursor: pointer; background-clip: content-box !important; }
.ctx-sw.on { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px var(--lac) !important; }
.ctx-sw[hidden] { display: none !important; }
.ctx-custom { overflow: hidden; }
.ctx-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ctx-foot { justify-content: space-between !important; margin-bottom: 0 !important; }
.ctx-link { background: none !important; border: 0 !important; padding: 0 !important; color: var(--lac) !important; font-size: 12px !important; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ctx-link.ctx-del { color: #c62828 !important; }
/* öğe seçiliyken */
.ctx-elh { display: flex !important; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ctx-kind { font-size: 11px !important; font-weight: 500 !important; text-transform: uppercase; letter-spacing: .03em; background: var(--lac) !important; color: #fff !important; padding: 5px 10px !important; border-radius: 0 !important; }
.ctx-text { display: grid !important; grid-template-columns: 1fr auto; gap: 6px !important; margin-bottom: 12px !important; }
.ctx-text #ctxText { height: 40px !important; padding: 0 12px !important; background: transparent !important; border: 1px solid var(--lac) !important; border-radius: 0 !important; color: var(--lac) !important; font-size: 14px !important; }
.ctx-size { display: flex !important; gap: 6px !important; }
.ctx-size button { width: 40px !important; height: 40px !important; padding: 0 !important; background: transparent !important; border: 1px solid var(--lac) !important; border-radius: 0 !important; color: var(--lac) !important; font-size: 13px !important; cursor: pointer; }
#ctxOp { flex: 1; max-width: 60%; accent-color: #021f36; }
.ctx-tools { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
.ctx-tools button { height: 40px !important; padding: 0 !important; background: transparent !important; border: 1px solid var(--lac) !important; border-radius: 0 !important; color: var(--lac) !important; font-size: 12px !important; text-transform: uppercase; cursor: pointer; }
.ctx-tools button:disabled { opacity: .35; cursor: default; }
.ctx-tools .ctx-del { color: #c62828 !important; border-color: #c62828 !important; }
@media (hover: hover) and (pointer: fine) {
  .ctx .ctx-x:hover, .ctx-size button:hover, .ctx-tools button:not(:disabled):hover { background: transparent !important; }
  .ctx-tools button:not(:disabled):not(.ctx-del):hover, .ctx .ctx-x:hover, .ctx-size button:hover { color: var(--lac) !important; }
  .ctx-tools .ctx-del:hover { color: #c62828 !important; }
  .ctx-acts .ctx-a:hover { background: var(--lac) !important; color: #fff !important; }
}

/* onay kutuları: ölçü kartlarındaki kare işaret gibi (15px çerçeve, seçilince içi 7px dolu) */
.sidebar input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 15px !important; height: 15px !important; margin: 0; border: 1px solid var(--lac); border-radius: 0; background: transparent; position: relative; cursor: pointer; flex: 0 0 15px; }
.sidebar input[type=checkbox]::after { content: ''; position: absolute; inset: 3px; background: var(--lac); opacity: 0; transition: opacity .16s cubic-bezier(.23,1,.32,1); }
.sidebar input[type=checkbox]:checked::after { opacity: 1; }

/* panel kartı: ekleme düğmeleri sekmelerde var, burada tekrar yok */
.ctx-acts { display: none !important; }

/* panel kartı renk kutuları: Yazı sekmesindeki renk kutusu gibi (40px çerçeve, renk içte 5px boşlukla) */
.ctx-sw, .ctx-sw.el { width: 40px !important; height: 40px !important; padding: 5px !important; border: 1px solid var(--lac) !important; border-radius: 0 !important; background-clip: content-box !important; box-sizing: border-box !important; box-shadow: none !important; }
.ctx-sw.on { box-shadow: inset 0 0 0 5px var(--lac) !important; }
.ctx-sws { gap: 6px !important; }

/* ═ Katman sekmesi: sade liste ═ */
.sidebar .s-section[data-tab="katman"] { padding-top: 24px !important; }
#lyrProps { display: none !important; }                        /* seçili öğe araçları üstteki panel kartında */
.sidebar .lyr-list { display: grid !important; gap: 6px !important; }
.sidebar .lyr-item { display: flex !important; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px 0 12px !important; background: transparent !important; border: 1px solid var(--lac) !important; border-radius: 0 !important; color: var(--lac) !important; cursor: pointer; box-shadow: none !important; }
.sidebar .lyr-item .lyr-kind { flex: 0 0 52px; font-size: 10px !important; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: rgba(2,31,54,.65) !important; background: none !important; padding: 0 !important; }
.sidebar .lyr-item .lyr-name { flex: 1 1 auto; min-width: 0; font-size: 13px !important; color: var(--lac) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .lyr-item .lyr-tg { width: 32px !important; height: 32px !important; display: grid !important; place-items: center; padding: 0 !important; background: transparent !important; border: 0 !important; color: var(--lac) !important; opacity: .35; cursor: pointer; }
.sidebar .lyr-item .lyr-tg.on { opacity: 1; }
.sidebar .lyr-item .lyr-tg svg { width: 16px; height: 16px; }
.sidebar .lyr-item.sel { background: var(--lac) !important; }
.sidebar .lyr-item.sel * { color: #fff !important; }
.sidebar .lyr-item.off .lyr-name { opacity: .45; text-decoration: line-through; }
.sidebar #lyrEmpty { font-size: 13px !important; line-height: 1.5; color: var(--lac) !important; text-align: left !important; padding: 0 !important; background: none !important; border: 0 !important; }
/* kısayollar: kapalı açılır bölüm */
.sidebar .kb-hint { margin-top: 24px !important; padding: 0 !important; background: none !important; border: 0 !important; font-size: 12px !important; line-height: 2 !important; color: var(--lac) !important; }
.sidebar .kb-hint summary { cursor: pointer; list-style: none; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; display: flex; align-items: center; gap: 8px; }
.sidebar .kb-hint summary::-webkit-details-marker { display: none; }
.sidebar .kb-hint summary::before { content: ''; width: 7px; height: 7px; border-right: 1px solid var(--lac); border-bottom: 1px solid var(--lac); transform: rotate(-45deg); transition: transform .18s cubic-bezier(.23,1,.32,1); }
.sidebar .kb-hint[open] summary::before { transform: rotate(45deg); }
.sidebar .kb-hint kbd { border: 1px solid var(--lac) !important; border-radius: 0 !important; background: transparent !important; padding: 0 5px; font-size: 11px; color: var(--lac); }
/* ipucu */
.ipucu { position: fixed; z-index: 200; pointer-events: none; background: var(--lac); color: #fff; font-size: 12px; line-height: 1; padding: 7px 10px; white-space: nowrap; font-family: var(--font); animation: ipGel .12s cubic-bezier(.23,1,.32,1); }
.ipucu[hidden] { display: none; }
@keyframes ipGel { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ipucu { animation: none; } }

/* panel kartı: tek satır renk + altında iki düğme; başlık, ölçü ve Kapat yok */
.ctx-h { display: none !important; }
#ctxPanel .ctx-row:first-of-type { margin-bottom: 10px !important; }
.ctx-foot { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px !important; }
.ctx-btn { height: 40px; padding: 0 8px; background: transparent; border: 1px solid var(--lac); border-radius: 0; color: var(--lac); font: inherit; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; cursor: pointer; line-height: 1.2; }
.ctx-btn:active { transform: scale(.98); }

/* kart içinde gizlenen öğe gerçekten gizli kalsın (ikon seçiliyken yazı alanı, görselde renk satırı) */
.ctx [hidden], #ctx[hidden] { display: none !important; }

/* açılır pencereler: çerçeveli düğmelerin altında beyaz yok */
.rv-actions button:not(.primary), .rv button:not(.primary):not(.rv-x), .help-contact a, .rv .tool-btn:not(.on) { background: transparent !important; box-shadow: none !important; }
.rv-actions button:not(.primary) { border: 1px solid var(--lac) !important; color: var(--lac) !important; }

/* katman sürükle-bırak */
.sidebar .lyr-item { padding-left: 6px !important; user-select: none; -webkit-user-select: none; }
.sidebar .lyr-item .lyr-tutamak { flex: 0 0 18px; height: 32px; display: grid; place-items: center; color: rgba(2,31,54,.45); cursor: grab; touch-action: none; }
.sidebar .lyr-item .lyr-tutamak.bos { visibility: hidden; }
.sidebar .lyr-item.sel .lyr-tutamak { color: rgba(255,255,255,.7) !important; }
.sidebar .lyr-list.siralaniyor .lyr-item { transition: transform .18s cubic-bezier(.23,1,.32,1); }
.sidebar .lyr-list.siralaniyor .lyr-item.tasiniyor { transition: none; position: relative; z-index: 2; cursor: grabbing; background: rgba(255,255,255,.75) !important; box-shadow: 0 14px 30px -14px rgba(2,31,54,.5) !important; }
.sidebar .lyr-list.siralaniyor .lyr-item.tasiniyor.sel { background: var(--lac) !important; }
@media (prefers-reduced-motion: reduce) { .sidebar .lyr-list.siralaniyor .lyr-item { transition: none; } }

/* Tasarım hizmeti penceresi */
.rv.hz { width: min(460px, 100%) !important; grid-template-columns: 1fr !important; }
.rv.hz .rv-body { padding: 36px 32px 28px !important; }
.rv.hz .hz-logo { display: block; width: 132px; height: auto; color: var(--lac); margin: 0 0 22px; }
.rv.hz h3 { margin: 0 0 10px; }
.rv.hz .hz-t { font-size: 14px; line-height: 1.6; color: var(--lac); margin: 0 0 22px; }
.rv.hz .hz-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rv.hz .hz-btns button { height: 48px; background: var(--lac); color: #fff; border: 1px solid var(--lac); border-radius: 0; font: inherit; font-size: 14px; font-weight: 300; text-transform: uppercase; cursor: pointer; }
.rv.hz .hz-btns button:active, .rv.hz .rv-actions button:active { transform: scale(.98); }
.rv.hz .rv-actions { margin-top: 10px; }
.rv.hz .rv-actions button { width: 100%; }
/* Nasıl yapılır penceresi: sorular çerçeveli satır, açılınca içerik; iletişim düğmeleri diğerleri gibi */
#help .help-list { display: grid; gap: 6px; }
#help .help-list details { border: 1px solid var(--lac); background: transparent; border-radius: 0; }
#help .help-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 14px; font-size: 13px; font-weight: 500; color: var(--lac); }
#help .help-list summary::-webkit-details-marker { display: none; }
#help .help-list summary::after { content: ''; flex: 0 0 15px; height: 15px; box-sizing: border-box; border: 1px solid var(--lac); background: linear-gradient(var(--lac), var(--lac)) center/7px 1px no-repeat, linear-gradient(var(--lac), var(--lac)) center/1px 7px no-repeat; }
#help .help-list details[open] summary::after { background: linear-gradient(var(--lac), var(--lac)) center/7px 1px no-repeat; }
#help .help-list details p { margin: 0; padding: 0 14px 14px; font-size: 13px; line-height: 1.6; color: var(--lac); }
#help .help-contact { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 16px; }
#help .help-contact a { height: 48px; display: grid !important; place-items: center; background: var(--lac) !important; color: #fff !important; border: 1px solid var(--lac) !important; border-radius: 0 !important; font-size: 14px; font-weight: 300; text-transform: uppercase; text-decoration: none !important; }
#help .rv-actions button { width: 100%; }

/* ═══ SON KURAL — ters çevirme: çerçeveli → üzerine gelince/seçilince dolu; dolu → üzerine gelince çerçeve ═══ */
/* panel içi çerçeveli düğmeler: seçilince dolu */
body .sidebar .tpl.on, body .sidebar .place-opt.on, body .sidebar .shape-btn.sel, body .sidebar .yz-stil .tool-btn.on, body .sidebar .yz-stil .tool-btn.active,
body .ctx-sw.on { }
@media (hover: hover) and (pointer: fine) {
  /* çerçeveli → dolu (panel içi, lacivert) */
  body .sidebar .tpl:not(.on):hover, body .sidebar .raf-btn:hover, body .sidebar .size-btn:hover, body .sidebar .tool-btn:not([data-hizmet]):not(.og-ekle):hover,
  body .sidebar .place-opt:not(.on):hover, body .sidebar .ctx-tools button:not(:disabled):not(.ctx-del):hover, body .sidebar .ctx-size button:hover,
  body .sidebar .ctx-btn:hover, body .sidebar .shape-btn:not(.sel):hover, body .sidebar .pkg-grid > *:hover, body .sidebar .tm-btn:hover,
  body .sidebar .fd-btn:hover, body .kurulum-adim .kur-tekrar:hover, body .rv-actions button:not(.primary):hover {
    background: var(--lac) !important; color: #fff !important; border-color: var(--lac) !important;
  }
  body .sidebar .tpl:not(.on):hover *, body .sidebar .raf-btn:hover *, body .sidebar .size-btn:hover *, body .sidebar .place-opt:not(.on):hover *, body .sidebar .fd-btn:hover * { color: #fff !important; }
  body .sidebar .raf-btn:hover .stikon text, body .sidebar .size-btn:hover .stikon text { fill: #fff !important; }
  body .sidebar .raf-btn:hover::before, body .sidebar .size-btn:hover::before { border-color: #fff !important; }
  body .sidebar .raf-btn:hover::after, body .sidebar .size-btn:hover::after { background: #fff !important; }
  body .sidebar .pkg-grid > *:hover svg, body .sidebar .shape-btn:not(.sel):hover svg { color: #fff !important; fill: currentColor; }
  body .sidebar .ctx-tools .ctx-del:hover { background: #c62828 !important; color: #fff !important; border-color: #c62828 !important; }
  /* dolu → çerçeve (panel içi) */
  body .sidebar .next-btn:hover, body .sidebar .og-ekle:hover, body .sidebar #btnAddText:hover, body .sidebar [data-hizmet]:hover, body .sidebar .tpl.on:hover,
  body .sidebar .place-opt.on:hover, body .sidebar .shape-btn.sel:hover, body .sidebar .place-bitti:hover, body .rv.hz .hz-btns button:hover,
  body .rv-actions .primary:hover, body #help .help-contact a:hover {
    background: transparent !important; color: var(--lac) !important; border-color: var(--lac) !important;
  }
  body .sidebar .tpl.on:hover *, body .sidebar .place-opt.on:hover * { color: var(--lac) !important; }
  /* gökyüzü üstü: çerçeveli (beyaz) → dolu lacivert; dolu → beyaz çerçeve */
  body .mode-sw .view-btn:not(.active):hover, body #surfViewBtns .view-btn:not(.active):hover, body .header .btn-exit:hover, body .gec-btn:not(:disabled):hover {
    background: var(--lac) !important; border-color: var(--lac) !important; color: #fff !important;
  }
  body .mode-sw .view-btn.active:hover, body #surfViewBtns .view-btn.active:hover, body .header #btnReview:hover {
    background: transparent !important; border-color: #fff !important; color: #fff !important;
  }
}

.sidebar .kanca-sec { grid-template-columns: repeat(3, 1fr) !important; }
#askiliOpts > .s-title:first-child { margin-top: 0 !important; }

/* Logomu yükle: dolu (lacivert), üzerine gelince çerçeve */
body .sidebar .tpl-marka .tm-btn { background: var(--lac) !important; color: #fff !important; border: 1px solid var(--lac) !important; }
@media (hover: hover) and (pointer: fine) { body .sidebar .tpl-marka .tm-btn:hover { background: transparent !important; color: var(--lac) !important; } }