:root{
  --bg:#0b0f14;
  --panel:#0f1722;
  --card:#111c2a;
  --border:#223146;
  --text:#e7eef8;
  --muted:#9bb0c9;
  --accent:#fcb000;
}

*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;}
html, body { height:100%; }
body{
  margin:0;
  background:radial-gradient(circle at 20% 0%, #121a27, var(--bg));
  color:var(--text);
  overflow-x:hidden; /* sağ panel flush görünüm için */
}

/* =====================
   TOPBAR
===================== */
.topbar{
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,#070a0e, #101826);
}
.brand{letter-spacing:.12em;font-weight:700;color:var(--accent);}
.topbar .sub{color:var(--muted);font-size:12px;margin-left:8px;flex:1}
.right{display:flex;gap:10px;align-items:center;}
.link{color:#d7e5fb;text-decoration:none;font-size:12px}
.link:hover{text-decoration:underline}

/* =====================
   LAYOUT (SOL - ORTA - SAĞ)
===================== */
.layout{
  display:grid;
  grid-template-columns:420px 1fr 420px;
  min-height:calc(100vh - 56px);
  width:100%;
}

/* SOL PANEL (default) */
.panel{
  border-right:1px solid var(--border);
  padding:14px;
  background:linear-gradient(180deg,var(--panel), #0b1018);
}

/* SAĞ PANEL: sayfanın sağına gerçekten yasla */
.panelRight{
  border-left:1px solid var(--border);
  border-right:none;
  padding:14px 0 14px 14px;        /* sağ padding 0 -> yapış */
  background:linear-gradient(180deg,var(--panel), #0b1018);
  justify-self:stretch;
}

/* =====================
   CARD / FORM
===================== */
.card{
  background:linear-gradient(180deg,var(--card), #0d1622);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  margin-bottom:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* sağ panelde kart en sağa kadar gitsin */
.panelRight .card{
  margin-right:0;
  border-right:0;                 /* flush hissi */
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}

.card h3{margin:0 0 10px 0;font-size:14px;color:#d7e5fb;}
.hint{font-size:12px;color:var(--muted);line-height:1.35;margin-top:6px;}

.select,.text{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0b1220;
  color:var(--text);
  outline:none;
}
.file{width:100%;color:var(--muted);}
.row{display:flex;gap:10px;align-items:center;margin-top:10px;}

.btn{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0b1220;
  color:var(--text);
  cursor:pointer;
}
.btn:hover{border-color:#2f4666;}
.btn.primary{
  background:linear-gradient(180deg,#fcb000,#d89a00);
  color:#101010;
  border-color:#a77700;
  font-weight:700;
}


/* =====================
   UI Tweaks: Upload / Template / Full Wrap emphasis
===================== */
.fileHidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.btn.btn-upload{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  background:#3B82F6;
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  font-weight:700;
}
.btn.btn-upload:hover{ background:#2563EB; border-color:rgba(255,255,255,.14); }

.btn.btn-upload.disabled{
  opacity:.45;
  pointer-events:none;
  filter: grayscale(.35);
}

/* =====================
   ŞABLON İNDİR – VURGULU SECONDARY BUTTON
===================== */
.btn.btn-template{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  background: linear-gradient(
    135deg,
    rgba(252,176,0,0.22),
    rgba(252,176,0,0.08)
  );
  color: var(--accent);
  border: 1px solid rgba(252,176,0,0.6);
  border-radius:12px;

  font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;

  box-shadow:
    0 0 0 rgba(252,176,0,0),
    inset 0 0 0 rgba(252,176,0,0);

  transition: all .2s ease;
}

.btn.btn-template:hover{
  background: linear-gradient(
    135deg,
    rgba(252,176,0,0.35),
    rgba(252,176,0,0.15)
  );
  box-shadow:
    0 0 14px rgba(252,176,0,0.35),
    inset 0 0 10px rgba(252,176,0,0.25);
  transform: translateY(-1px);
}

.btn.btn-template:active{
  transform: translateY(0);
  box-shadow:
    0 0 8px rgba(252,176,0,0.45),
    inset 0 0 8px rgba(252,176,0,0.35);
}


.full-wrap-box{
  border:1px dashed var(--accent);
  padding:12px;
  border-radius:12px;
  background:rgba(252,176,0,0.06);
  margin:10px 0 12px;
}
.fullWrapRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
}
.full-wrap-box input[type="checkbox"]{
  width:18px;height:18px;
  accent-color: var(--accent);
}
.full-wrap-box .subNote{
  margin-left:28px;
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
}
.full-wrap-box input[type="checkbox"]:checked ~ span{
  color:var(--accent);
}

/* ✅ Auto-edit UX: Manuel "Düzenle / Kaydet" butonu artık gereksiz */
#btnAction{ display:none !important; }
.btn:disabled{opacity:.5;cursor:not-allowed}
.status{font-size:13px;color:var(--muted);line-height:1.4;}

.sep{border:none;border-top:1px solid #223146;margin:12px 0;}
.card .sub{margin:0;font-size:13px;color:#d7e5fb;}

.checkRow{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
  font-size:13px;
  color:#d7e5fb;
  opacity:.92;
}
.checkRow input{ transform: scale(1.05); }

/* =====================
   LIST
===================== */
.list{
  margin-top:10px;
  border:1px dashed #2a3a54;
  border-radius:12px;
  min-height:120px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.item{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0b1220;
}
.item .meta{display:flex;flex-direction:column;gap:2px;}
.item .name{font-size:13px;}
.item .small{font-size:11px;color:var(--muted);}
.item .tag{font-size:11px;color:#ffd38a;}
.itemActions{display:flex;gap:8px;align-items:center;}

button.del{
  border:1px solid #3a516f;
  background:#0b1220;
  color:#ffb4b4;
  border-radius:10px;
  padding:7px 10px;
  cursor:pointer;
  font-size:12px;
}
button.del:hover{border-color:#597aa6;}

/* =====================
   ORTA SAHNE: aşağı doğru büyüsün
===================== */
.stage{
  /* ORTA SAHNE: aşağı doğru büyüsün */
  min-height: calc(100vh - 56px);
  height: auto;                      /* sabit yüksekliği kaldır */
  padding:14px 0 14px 14px;          /* sağ padding 0 -> orta genişlesin */
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:visible;                  /* alt tarafa uzamayı kesme */
}


.canvasWrap{
  position:relative;
  flex:1 1 auto;
  min-height:600px;                  /* güvenlik: çok kısa kalmasın */
  border-radius:16px;
  border:1px solid var(--border);
  overflow:visible;                  /* canvas uzarsa kesme */
  background:radial-gradient(circle at 30% 10%, #0f1725, #070a0e);
}


/* SADECE wrap içindeki canvas’lar absolute olsun */
.canvasWrap canvas{
  position:absolute;
  left:0;
  top:0;
}

.footerHint{font-size:12px;color:var(--muted);text-align:center;}

/* =====================
   PLAKA (sağ paneldeki canvas)
===================== */
/* Bu sınıf varsa (senin HTML’de olabilir) */
.platePreviewCanvas{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  border:1px solid var(--border);
  background:#0b1220;
  position:static;
}

/* Plaka canvas: kesinlikle absolute etkilenmesin */
#plateCanvas{
  position:static !important;
  width:100%;
  height:auto;
  max-width:420px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#111;
  display:block;
}

/* (Eski denemelerden kalanlar - zarar vermesin diye bırakıldı ama etkisiz) */
.stageGrid{display:flex;gap:12px;align-items:stretch;width:100%;}
.plate-card{
  width:420px;
  flex:0 0 420px;
  align-self:stretch;
  padding:14px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--panel), #0b1018);
  border-radius:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  overflow:auto;
  max-height:calc(100vh - 56px - 28px);
}
.plate-title{font-weight:700; font-size:14px; margin-bottom:4px;}
.plate-sub{color:var(--muted); font-size:12px; margin-bottom:10px;}
.plate-label{display:block; font-size:12px; color:var(--muted); margin:10px 0 6px;}
.plate-input{
  width:100%;
  height:36px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0b1220;
  color:var(--text);
  padding:0 10px;
  outline:none;
}
.plate-input:focus{border-color: rgba(252,176,0,.6);}
.plate-details{
  margin-top:10px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px 10px;
  background: rgba(255,255,255,.02);
}
.plate-details summary{
  cursor:pointer;
  color:var(--text);
  font-weight:600;
  user-select:none;
  list-style:none;
}
.plate-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:10px;
}
.plate-check{
  grid-column: 1 / -1;
  display:flex;
  gap:8px;
  align-items:center;
  color:var(--text);
  font-size:12px;
  margin-top:2px;
}
.plate-actions{margin-top:10px; display:flex; justify-content:flex-start;}
/* =====================
   PLAKA İNDİR – PREMIUM SECONDARY
===================== */
.plate-btn{
  height:38px;
  padding:0 18px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  background: linear-gradient(
    135deg,
    rgba(252,176,0,0.22),
    rgba(252,176,0,0.08)
  );
  color: var(--accent);
  border: 1px solid rgba(252,176,0,0.6);
  border-radius:12px;

  font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;

  box-shadow:
    0 0 0 rgba(252,176,0,0),
    inset 0 0 0 rgba(252,176,0,0);

  transition: all .2s ease;
}

.plate-btn:hover{
  background: linear-gradient(
    135deg,
    rgba(252,176,0,0.35),
    rgba(252,176,0,0.15)
  );
  box-shadow:
    0 0 14px rgba(252,176,0,0.35),
    inset 0 0 10px rgba(252,176,0,0.25);
  transform: translateY(-1px);
}

.plate-btn:active{
  transform: translateY(0);
  box-shadow:
    0 0 8px rgba(252,176,0,0.45),
    inset 0 0 8px rgba(252,176,0,0.35);
}

.plate-btn:active{transform: translateY(1px);}
.plate-preview{
  margin-top:10px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:14px;
  background: rgba(0,0,0,.25);
  display:flex;
  justify-content:center;
  align-items:center;
}
.plate-hint{margin-top:8px; font-size:12px; color:var(--muted);}

/* =====================
   RESPONSIVE
===================== */
@media (max-width: 1100px){
  .layout{grid-template-columns: 380px 1fr;}
  .panelRight{display:none;}
}

@media (max-width: 900px){
  .layout{grid-template-columns: 1fr;}
  .panel{border-right:none;border-bottom:1px solid var(--border);}
  .stage{
  /* ORTA SAHNE: aşağı doğru büyüsün */
  min-height: calc(100vh - 56px);
  height: auto;                      /* sabit yüksekliği kaldır */
  padding:14px 0 14px 14px;          /* sağ padding 0 -> orta genişlesin */
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:visible;                  /* alt tarafa uzamayı kesme */
}

  .canvasWrap{
  position:relative;
  flex:1 1 auto;
  min-height:600px;                  /* güvenlik: çok kısa kalmasın */
  border-radius:16px;
  border:1px solid var(--border);
  overflow:visible;                  /* canvas uzarsa kesme */
  background:radial-gradient(circle at 30% 10%, #0f1725, #070a0e);
}

}


/* =====================
   Image assign UX improvements
===================== */
.editTools{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); }
.editTools.hidden{ display:none; }
.editTools .sliders{ gap:10px; align-items:flex-start; }
.sliderLabel{ display:flex; flex-direction:column; gap:6px; flex:1; font-size:12px; color:var(--muted); }
.sliderLabel input[type="range"]{ width:100%; }

.list .assignItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
  margin-bottom:8px;
}
.assignThumb{
  width:48px; height:48px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid var(--border);
  background:#0b0f14;
}
.assignMeta{ flex:1; min-width:0; }
.assignTitle{ font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.assignSub{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.assignActions{ display:flex; gap:6px; }

.canvasWrap.dragover{
  outline:2px dashed var(--accent);
  outline-offset:6px;
  border-radius:16px;
}


/* ===== Grouped assignments (selected group) ===== */
.assignGroupList{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:6px;
  border:1px dashed var(--border,#223146);
  border-radius:10px;
  background:rgba(17,28,42,.35);
  max-height:160px;
  overflow:auto;
}
.assignGroupRow{
  display:flex;
  gap:8px;
  align-items:center;
}
.assignGroupRow img{
  width:28px;height:28px;border-radius:8px;
  border:1px solid var(--border,#223146);
  object-fit:cover;
  background:#0b0f14;
}
.assignGroupRow .nm{
  font-size:12px;
  color:var(--text,#e7eef8);
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===== Range controls (slider + value) ===== */
.rangeRow{ display:flex; flex-direction:column; gap:6px; }
.rangeTop{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.rangeVal{ font-size:12px; color:var(--muted,#9bb0c9); min-width:52px; text-align:right; }
.plate-input[type="range"]{ width:100%; }