:root{
  --b-bg:#14100e; --b-card:#1e1815; --b-card2:#262019;
  --b-ink:#efe6da; --b-muted:#9c8a78; --b-gold:#c8a96a; --b-line:rgba(200,169,106,.22);
}
*{box-sizing:border-box;}
html,body{margin:0;min-height:100%;}
body{
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(140% 120% at 0% 0%,#241813 0%,var(--b-bg) 55%,#0d0a08 100%);
  color:var(--b-ink);min-height:100vh;}
#wrap{max-width:1180px;margin:0 auto;padding:28px 22px 60px;display:grid;
  grid-template-columns:minmax(360px,430px) 1fr;gap:30px;align-items:start;}

/* ---------- panel ---------- */
#panel{background:var(--b-card);border:1px solid var(--b-line);border-radius:16px;
  padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.4);}
.p-head{margin-bottom:18px;}
.logo{font-weight:800;letter-spacing:2px;font-size:20px;display:flex;align-items:baseline;gap:8px;}
.logo span{font-size:10px;letter-spacing:3px;color:var(--b-gold);}
.p-sub{margin:6px 0 0;color:var(--b-muted);font-size:12.5px;letter-spacing:.3px;}

.field{margin-top:16px;}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
label{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;
  color:var(--b-muted);margin-bottom:7px;}
label small{text-transform:none;letter-spacing:0;}
input[type=text],select{width:100%;background:var(--b-card2);border:1px solid var(--b-line);
  color:var(--b-ink);border-radius:9px;padding:11px 12px;font-size:14px;outline:none;}
input[type=text]:focus,select:focus{border-color:var(--b-gold);}
input[type=color]{width:100%;height:42px;background:var(--b-card2);border:1px solid var(--b-line);
  border-radius:9px;padding:4px;cursor:pointer;}
.check{display:flex;align-items:center;gap:9px;text-transform:none;letter-spacing:0;
  font-size:13px;color:var(--b-ink);margin-top:14px;cursor:pointer;}
.check input{width:16px;height:16px;accent-color:var(--b-gold);}

.presets{display:flex;flex-wrap:wrap;gap:8px;}
.preset{width:34px;height:34px;border-radius:8px;cursor:pointer;border:2px solid transparent;
  position:relative;overflow:hidden;}
.preset.active{border-color:#fff;}
.preset i{position:absolute;right:3px;bottom:3px;width:11px;height:11px;border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.3);}

/* PDF bırakma alanı */
.drop{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:88px;border:1.5px dashed var(--b-line);border-radius:11px;cursor:pointer;
  color:var(--b-muted);font-size:13.5px;padding:12px;transition:.18s;background:var(--b-card2);}
.drop:hover,.drop.over{border-color:var(--b-gold);color:var(--b-ink);background:#2c241c;}
.pdf-info{margin-top:10px;font-size:13px;color:var(--b-gold);background:rgba(200,169,106,.08);
  border:1px solid var(--b-line);border-radius:9px;padding:10px 12px;}
.pdf-info.hidden,.hidden{display:none;}

.go{width:100%;margin-top:22px;padding:14px;border:none;border-radius:11px;cursor:pointer;
  font-size:15px;font-weight:700;letter-spacing:.5px;color:#1a120c;
  background:linear-gradient(180deg,var(--b-gold),#b2914f);transition:.18s;}
.go:disabled{opacity:.4;cursor:not-allowed;}
.go:not(:disabled):hover{filter:brightness(1.08);}

.progress{margin-top:18px;}
.bar{height:9px;background:var(--b-card2);border-radius:6px;overflow:hidden;border:1px solid var(--b-line);}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--b-gold),#e0c690);transition:width .25s;}
.prog-text{margin-top:8px;font-size:12.5px;color:var(--b-muted);text-align:center;}
.done{margin-top:18px;padding:14px;border-radius:11px;font-size:13.5px;line-height:1.5;
  background:rgba(120,180,110,.12);border:1px solid rgba(120,180,110,.35);color:#cfe6c4;}
.done b{color:#fff;}
.done a{color:var(--b-gold);cursor:pointer;text-decoration:underline;}

/* ---------- önizleme ---------- */
#previewCol{position:sticky;top:28px;}
.pv-label{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--b-muted);margin-bottom:12px;}
.pv{border-radius:14px;overflow:hidden;border:1px solid var(--b-line);height:520px;
  display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.45);
  background:radial-gradient(120% 120% at 50% 0%,#2a1c16,#1c1310 60%,#120c0a);}
.pv-top{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;}
.pv-brand{font-weight:700;letter-spacing:3px;font-size:16px;display:flex;align-items:baseline;gap:7px;}
.pv-brand span{font-size:9px;letter-spacing:3px;}
.pv-title{font-size:11px;letter-spacing:3px;text-transform:uppercase;}
.pv-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:6px;min-height:0;}
.pv-book{display:flex;height:80%;aspect-ratio:2/1.05;max-width:92%;box-shadow:0 14px 36px rgba(0,0,0,.5);}
.pv-page{flex:1;background:#fff;}
.pv-page:first-child{border-right:1px solid rgba(0,0,0,.18);
  background:linear-gradient(90deg,#f6f3ee,#fff);}
.pv-page:last-child{background:linear-gradient(270deg,#f6f3ee,#fff);}
.pv-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;}
.pv-btn{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:13px;}
.pv-num{font-size:12px;padding:0 6px;}
.pv-note{margin-top:14px;font-size:12.5px;color:var(--b-muted);line-height:1.6;}
.pv-note code{background:var(--b-card2);padding:1px 6px;border-radius:5px;color:var(--b-gold);}

/* ---------- giriş kapısı ---------- */
#login{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(140% 120% at 0% 0%,#241813 0%,var(--b-bg) 55%,#0d0a08 100%);}
#login.hidden{display:none;}
.login-box{width:360px;max-width:90vw;background:var(--b-card);border:1px solid var(--b-line);
  border-radius:16px;padding:36px 32px;display:flex;flex-direction:column;gap:13px;box-shadow:0 30px 80px rgba(0,0,0,.5);}
.login-logo{text-align:center;font-weight:800;letter-spacing:2px;font-size:20px;color:var(--b-ink);}
.login-logo span{display:block;font-size:10px;letter-spacing:3px;color:var(--b-gold);margin-top:5px;}
.login-sub{margin:2px 0 8px;text-align:center;font-size:12.5px;color:var(--b-muted);}
.login-box input{background:var(--b-card2);border:1px solid var(--b-line);color:var(--b-ink);
  border-radius:9px;padding:12px 14px;font-size:15px;outline:none;}
.login-box input:focus{border-color:var(--b-gold);}
.login-box button{margin-top:6px;padding:13px;border:none;border-radius:10px;cursor:pointer;
  font-size:15px;font-weight:700;letter-spacing:.5px;color:#1a120c;background:linear-gradient(180deg,var(--b-gold),#b2914f);}
.login-box button:hover{filter:brightness(1.07);}
.login-err{color:#e9879a;font-size:13px;text-align:center;}
.login-err.hidden{display:none;}

@media (max-width:880px){
  #wrap{grid-template-columns:1fr;}
  #previewCol{position:static;}
  .pv{height:380px;}
}