: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;
}
.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{
  height: calc(100vh - 56px);
  padding:14px 0 14px 14px;        /* sağ padding 0 -> orta genişlesin */
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:hidden;
}

.canvasWrap{
  position:relative;
  flex:1;
  min-height:0;
  border-radius:16px;
  border:1px solid var(--border);
  overflow:hidden;
  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;}
.plate-btn{
  height:36px;
  padding:0 14px;
  border:none;
  border-radius:12px;
  background:linear-gradient(180deg,#fcb000,#d89a00);
  color:#111;
  font-weight:700;
  cursor:pointer;
}
.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{padding:14px;}
  .canvasWrap{min-height:520px;}
}