:root{
  --bg:#070a10; --bg2:#0d131d; --panel:rgba(255,255,255,.045); --line:rgba(255,255,255,.10);
  --txt:#eef2f7; --muted:#8a97a8; --gold:#e9c46a; --gold2:#caa24a; --emerald:#27d3a2;
  --shadow:0 24px 60px rgba(0,0,0,.55);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:Inter,system-ui,sans-serif;color:var(--txt);background:var(--bg);
  display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.brand-dot{color:var(--gold)}

/* ÜST MENÜ */
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:28px;
  padding:14px 30px;background:rgba(8,11,17,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-family:Oswald;font-weight:700;font-size:22px;color:#1a1205;
  background:linear-gradient(135deg,var(--gold),var(--gold2));box-shadow:0 6px 18px rgba(233,196,106,.35)
}
.brand-name{font-family:Oswald;font-weight:700;font-size:22px;letter-spacing:1px}
.brand-sub{font-size:10px;letter-spacing:3px;color:var(--muted);border:1px solid var(--line);padding:3px 7px;border-radius:6px;margin-left:4px}
.nav{display:flex;gap:6px;margin-left:10px}
.nav a{font-family:Oswald;font-weight:500;letter-spacing:.5px;text-transform:uppercase;font-size:14px;color:var(--muted);padding:9px 14px;border-radius:9px;transition:.2s}
.nav a:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.nav a.active{color:var(--gold)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.icon-btn{display:flex;align-items:center;gap:9px;background:transparent;border:1px solid var(--line);color:var(--muted);padding:8px 14px;border-radius:10px;cursor:pointer;font-family:Oswald;letter-spacing:1px;font-size:12px;transition:.2s}
.icon-btn:hover{color:var(--txt);border-color:rgba(255,255,255,.25)}
.icon-btn.on{color:var(--gold);border-color:rgba(233,196,106,.5)}
.eq{display:flex;align-items:flex-end;gap:2px;height:14px}
.eq i{width:3px;height:5px;background:currentColor;border-radius:2px}
.icon-btn.on .eq i{animation:eq .8s ease-in-out infinite alternate}
.icon-btn.on .eq i:nth-child(2){animation-delay:.15s}.icon-btn.on .eq i:nth-child(3){animation-delay:.3s}.icon-btn.on .eq i:nth-child(4){animation-delay:.45s}
@keyframes eq{to{height:14px}}
.cta{font-family:Oswald;font-weight:600;letter-spacing:1px;text-transform:uppercase;font-size:13px;color:#1a1205;background:linear-gradient(135deg,var(--gold),var(--gold2));border:0;padding:11px 20px;border-radius:10px;cursor:pointer;box-shadow:0 8px 22px rgba(233,196,106,.3);transition:.2s}
.cta:hover{transform:translateY(-1px);filter:brightness(1.05)}

/* SAHNE */
.stage{flex:1;display:grid;grid-template-columns:25% 1fr;min-height:0}
.viewport{position:relative;overflow:hidden;background:
  radial-gradient(120% 80% at 50% 0%,rgba(233,196,106,.10),transparent 55%),
  radial-gradient(100% 100% at 50% 60%,#121a26 0%,var(--bg) 70%)}
#canvasWrap{position:absolute;inset:0}
#canvasWrap canvas{display:block}
.vp-overlay{position:absolute;left:24px;top:20px;pointer-events:none}
.vp-tag{font-family:Oswald;letter-spacing:3px;font-size:11px;color:var(--gold);border:1px solid rgba(233,196,106,.35);padding:5px 10px;border-radius:6px;display:inline-block}
.vp-hint{margin-top:10px;font-size:12px;color:var(--muted);letter-spacing:.5px}
.loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--bg);color:var(--muted);font-size:13px;letter-spacing:1px;transition:opacity .5s;z-index:5}
.loader.hide{opacity:0;pointer-events:none}
.ring{width:46px;height:46px;border-radius:50%;border:3px solid rgba(255,255,255,.1);border-top-color:var(--gold);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* TASARIM PANELİ */
.designer{background:linear-gradient(180deg,#0c121b,#080c12);border-left:1px solid var(--line);padding:26px 34px;overflow-y:auto}
.panel-head h1{font-family:Oswald;font-weight:700;font-size:28px;letter-spacing:.5px}
.panel-head p{color:var(--muted);font-size:13px;margin-top:4px}
.designer-grid{display:grid;grid-template-columns:minmax(300px,400px) 1fr;gap:30px;align-items:start;margin-top:14px}
.controls-col{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;align-content:start}
.controls-col>.ctrl{margin-top:0}
.controls-col>.ctrl.full,.add-cart{grid-column:1 / -1}
.preview-card{position:relative;margin:18px 0 8px;border-radius:16px;padding:14px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
#jerseyPreview{width:100%;height:auto;display:block;filter:drop-shadow(0 16px 26px rgba(0,0,0,.5))}
.preview-meta{display:flex;justify-content:space-between;margin-top:8px;font-family:Oswald;letter-spacing:2px;color:var(--muted);font-size:12px}
.ctrl{margin-top:18px}
.ctrl>label{display:block;font-family:Oswald;letter-spacing:1.5px;text-transform:uppercase;font-size:11px;color:var(--muted);margin-bottom:9px}
.ctrl.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.swatches{display:flex;gap:9px;flex-wrap:wrap}
.swatch{width:34px;height:34px;border-radius:9px;cursor:pointer;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:.15s}
.swatch:hover{transform:scale(1.08)}
.swatch.sel{border-color:var(--gold);box-shadow:0 0 0 2px rgba(233,196,106,.35)}
.swatch.custom{display:grid;place-items:center;background:#11161f;color:var(--muted);font-size:18px;overflow:hidden;position:relative}
.swatch.custom input{position:absolute;inset:0;opacity:0;cursor:pointer}
.seg{display:flex;gap:6px;flex-wrap:wrap;background:rgba(255,255,255,.03);padding:5px;border-radius:11px;border:1px solid var(--line)}
.seg button{flex:1;min-width:54px;background:transparent;border:0;color:var(--muted);font-family:Oswald;letter-spacing:.5px;font-size:12px;padding:9px 8px;border-radius:8px;cursor:pointer;transition:.15s}
.seg button:hover{color:var(--txt)}
.seg button.active{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1205}
input[type=text],input[type=number]{width:100%;background:#0a0f17;border:1px solid var(--line);color:var(--txt);padding:11px 12px;border-radius:9px;font-family:Inter;font-size:14px;outline:none;transition:.2s}
input[type=text]:focus,input[type=number]:focus{border-color:rgba(233,196,106,.5)}
.upload{display:block;border:1px dashed var(--line);border-radius:10px;padding:14px;text-align:center;color:var(--muted);cursor:pointer;font-size:13px;transition:.2s}
.upload:hover{border-color:rgba(233,196,106,.5);color:var(--txt)}
.add-cart{width:100%;margin-top:24px;font-family:Oswald;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;font-size:14px;color:#1a1205;background:linear-gradient(135deg,var(--gold),var(--gold2));border:0;padding:15px;border-radius:12px;cursor:pointer;box-shadow:0 10px 26px rgba(233,196,106,.3);transition:.2s}
.add-cart:hover{transform:translateY(-1px);filter:brightness(1.05)}

/* FOOTER */
.footer{display:flex;align-items:center;gap:24px;padding:18px 30px;border-top:1px solid var(--line);background:#070a10;flex-wrap:wrap}
.f-brand{font-family:Oswald;font-weight:700;letter-spacing:1px;font-size:18px}
.f-links{display:flex;gap:20px}
.f-links a{color:var(--muted);font-size:13px;transition:.2s}
.f-links a:hover{color:var(--gold)}
.f-copy{margin-left:auto;color:#5a6678;font-size:12px}

@media (max-width:1024px){
  .stage{grid-template-columns:1fr;grid-template-rows:50vh auto}
  .designer{border-left:0;border-top:1px solid var(--line);padding:22px}
  .designer-grid{grid-template-columns:1fr;gap:22px}
  .nav{display:none}
}
@media (max-width:620px){ .controls-col{grid-template-columns:1fr} }
@media (max-width:560px){
  .topbar{padding:12px 16px;gap:12px}.brand-sub{display:none}.music-label{display:none}
  .footer{justify-content:center;text-align:center}.f-copy{margin:0;width:100%}
}