.muted{color:var(--not-yazi)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.left {
width: 100%;
background:var(--kart);
border:1px solid var(--kenarlik);
border-radius:14px;
padding:18px;
box-shadow:var(--golge);
}
.right{
width: 100%;
}
.lbl{display:block;margin:10px 0 6px;font-weight:700;color:var(--yazi)}
textarea#qrText{
width:100%;
min-height:120px;
border:1px solid var(--kenarlik);
border-radius:10px;
padding:12px 14px;
background:var(--yardimci);
color:var(--yazi);
outline:none;
}
textarea#qrText:focus{
border-color:var(--birincil);
outline:2px solid var(--birincil);
outline-offset:2px;
box-shadow:0 0 0 3px color-mix(in srgb, var(--birincil) 20%, transparent);
}
input#qrSize {width: 100%;}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.cell{min-width:0}
.cell:last-child {
display: grid;
align-content: flex-end;
align-items: center;
justify-items: end;
justify-content: end;
}
.kv{margin-top:8px;display:flex;justify-content:space-between;align-items:center;color:var(--yazi)}
.kv strong{font-weight:800}
.palette{display:flex;gap:8px;margin-bottom:8px}
.swatch{
width:30px;height:30px;border-radius:8px;border:1px solid var(--kenarlik);
background:var(--c);cursor:pointer;transition:transform .12s
}
.swatch:hover{transform:translateY(-1px)}
.swatch.active{
outline:2px solid var(--birincil);
box-shadow:0 0 0 3px color-mix(in srgb, var(--birincil) 20%, transparent);
}

.colorpick{display:flex;gap:10px;align-items:center}
.colorpick code{
background:var(--yardimci);
border:1px solid var(--kenarlik);
padding:3px 8px;
border-radius:8px;
color:var(--yazi);
}

.hint{margin-top:6px;font-size:.92rem}
.hint.ok{color:var(--basarili-yazi)}
.hint.mid{color:var(--uyari-yazi)}
.hint.bad{color:var(--hata-yazi)}

.uploader{
margin-top:16px;
border:1px dashed var(--kenarlik);
border-radius:12px;
background:var(--yardimci);
overflow:hidden
}
.uploader.on{
outline:3px solid color-mix(in srgb, var(--birincil) 18%, transparent);
}

.uploader-top{
display:flex;gap:12px;align-items:center;padding:14px 12px;position:relative;color:var(--yazi)
}
.uicon{
width:44px;height:44px;border-radius:10px;border:1px solid var(--kenarlik);
display:grid;place-items:center;background:var(--kart);font-size:20px;color:var(--yazi)
}
.uploader input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}
.u-note{
padding:8px 12px;border-top:1px dashed var(--kenarlik);
background:var(--kart);color:var(--not-yazi);font-size:.95rem
}
.thumb{
display:flex;align-items:center;gap:10px;padding:12px;
border-top:1px dashed var(--kenarlik);background:var(--kart)
}
.thumb.hidden{display:none}
.thumb img{
width:56px;height:56px;object-fit:contain;border:1px solid var(--kenarlik);
border-radius:8px;background:var(--kart)
}
.thumb .rm{
margin-left:auto;border:1px solid var(--kenarlik);
background:var(--kart);color:var(--yazi);
border-radius:8px;cursor:pointer;padding:6px 10px
}

.actions{display:flex;gap:10px;align-items:center;margin-top:14px}
.btn{
padding:10px 14px;border:1px solid var(--kenarlik);border-radius:10px;
background:var(--kart);color:var(--yazi);
cursor:pointer;transition:transform .15s, filter .15s
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{
background:var(--birincil);
border-color:var(--birincil);
color:var(--header-secim-yazi);
}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn.spin{position:relative;pointer-events:none}
.btn.spin::after{
content:"";position:absolute;right:10px;top:50%;width:12px;height:12px;
border:2px solid var(--header-secim-yazi);border-top-color:transparent;border-radius:50%;
animation:sp 1s linear infinite;transform:translateY(-50%)
}
.msg{margin-left:auto;color:var(--not-yazi)}
.preview-wrap{
display:grid;place-items:center;min-height:420px;
margin-top: 30px;
}
#previewCanvas{
width:420px;height:420px;border-radius:10px;box-shadow:var(--golge);background:var(--kart)
}
@keyframes sp{to{transform:translateY(-50%) rotate(360deg)}}
@media (max-width:1100px){
.grid{grid-template-columns:1fr}
#previewCanvas{width:360px;height:360px}
.preview-wrap{min-height:360px}
}

@media (max-width:1100px){
.row {
grid-template-columns: 1fr;
}
.cell:last-child {
justify-content: center;
}
}

@media (max-width:520px){
#previewCanvas{width:320px;height:320px}
.preview-wrap{min-height:320px}
}