/* QR Kod Oluşturucu — içerik + önizleme + tasarım. Masaüstünde önizleme sağda yapışkan (renkler denenirken hep görünür). */
.qr-tool {
  width: 100%;
  max-width: 520px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "content" "preview" "design";
  gap: var(--spacing-md);
  align-items: start;
}
.qr-content { grid-area: content; }
.qr-preview { grid-area: preview; align-items: center; }
.qr-design { grid-area: design; }
@media (min-width: 900px) {
  .qr-tool {
    max-width: 900px;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas: "content preview" "design preview";
  }
  .qr-preview { position: sticky; top: 84px; }
}

.input-type-selector { margin-bottom: 4px; }
.input-group { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.input-group.hidden { display: none; }
.input-group textarea { min-height: 96px; }

/* Önizleme */
.qr-stage {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: repeating-conic-gradient(#2a2a3a 0 25%, #222230 0 50%) 50% / 18px 18px;
  overflow: hidden;
}
.qr-canvas-el { width: 100%; height: 100%; display: block; }
.qr-placeholder { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 20px; }
.qr-warn { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.35); color: #fcd34d; font-size: 0.82rem; line-height: 1.45; width: 100%; }
.qr-actions { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.qr-dl { max-width: none; width: 100%; padding: 13px 18px; font-size: 1rem; }
.qr-dl2 { height: auto; font-weight: 600; padding: 0 18px; }
.qr-dl:disabled, .qr-dl2:disabled { opacity: 0.45; cursor: not-allowed; }

/* Tasarım */
.qr-sec-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.qr-icon-seg .calc-seg-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 10px; padding-bottom: 8px; }
.qr-icon-seg svg { width: 22px; height: 22px; }
.qr-icon-seg span { font-size: 0.74rem; }
.qr-colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qr-colors:has(> .qr-color[hidden]) { grid-template-columns: repeat(2, 1fr); }
.qr-color { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); cursor: pointer; min-width: 0; }
.qr-color[hidden] { display: none; }
.qr-color input[type="color"] { width: 38px; height: 38px; padding: 3px; flex: 0 0 auto; }
.qr-color span { display: flex; flex-direction: column; min-width: 0; }
.qr-color b { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qr-color i { font-style: normal; font-size: 0.78rem; color: var(--text-muted); font-family: ui-monospace, Menlo, Consolas, monospace; }
.qr-color.disabled { opacity: 0.4; pointer-events: none; }
.qr-check { font-size: 0.88rem; color: var(--text-secondary); }
.qr-logo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qr-logo-btn { font-weight: 600; font-size: 0.9rem; }
.qr-logo-thumb { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; background: #fff; padding: 4px; }
.qr-logo-remove { font-size: 0.85rem; color: #fca5a5; }
.qr-logo-note { margin: 4px 0 0; text-align: left; font-size: 0.78rem; }

@media (max-width: 480px) {
  .qr-colors, .qr-colors:has(> .qr-color[hidden]) { grid-template-columns: 1fr 1fr; }
  .qr-colors:not(:has(> .qr-color[hidden])) > .qr-color:nth-child(3) { grid-column: 1 / -1; } /* 3 renk: 2 + 1 tam genişlik */
  .qr-icon-seg span { font-size: 0.68rem; }
  .qr-actions { grid-template-columns: 1fr; }
  .qr-dl2 { height: 44px; }
}