*{box-sizing:border-box}
body{margin:0;color:#e8eefc;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 500px at 50% -10%,#16233f 0%,#05070d 55%,#000 100%)}
.top{padding:0 0 20px;border-bottom:1px solid #1e2a44;background:#000;text-align:center}
.hero{height:190px;overflow:hidden;background:#000}
.hero img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;filter:drop-shadow(0 0 24px rgba(56,189,248,.35))}
.brand{font-weight:900;letter-spacing:.5px;font-size:22px;margin-top:16px;text-shadow:0 2px 18px rgba(56,189,248,.45)}
.brand span{color:#38bdf8}
.tag{color:#94a3b8;font-size:13px;margin-top:4px}
main{max-width:900px;margin:0 auto;padding:20px}
/* Hitam mengkilap: gradasi atas terang, bayangan dalam, kilau biru dingin */
.card{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 28%),linear-gradient(180deg,#161d2e,#070a12);
  border:1px solid #2a364f;border-radius:18px;padding:20px;margin-bottom:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 40px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.6)}
h2{margin:0 0 10px;font-size:19px;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.hint,.note{color:#94a3b8;line-height:1.6}
a{color:#38bdf8}
.drop{display:block;border:2px dashed #3b4a68;border-radius:14px;padding:28px;text-align:center;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0))}
.drop:hover{border-color:#38bdf8;box-shadow:0 0 24px rgba(56,189,248,.25)}
.drop span{display:block;color:#94a3b8;font-size:13px;margin-top:6px}
.preview-wrap{margin-top:14px}
video{width:100%;max-height:480px;background:#000;border-radius:12px;display:none;box-shadow:0 0 30px rgba(56,189,248,.15)}
video[src]{display:block}
.meta{color:#cbd5e1;font-size:14px;margin-top:8px}
.badge{font-size:12px;background:#f59e0b;color:#111;padding:3px 8px;border-radius:999px;vertical-align:middle}
.steps{line-height:1.8;color:#cbd5e1}
.checklist{list-style:none;padding:0;color:#cbd5e1;line-height:2}
.checklist li{display:flex;align-items:center;gap:10px}
.checklist .dot{width:12px;height:12px;border-radius:50%;background:#334155;box-shadow:inset 0 1px 0 rgba(255,255,255,.3);flex:none}
.timeline{background:#020617;border:1px solid #1e2a44;border-radius:12px;padding:14px;margin:12px 0}
.studio-ruler{position:relative;height:20px;margin:12px 0 2px;color:#94a3b8;font-size:12px;cursor:pointer}
.studio-ruler span{position:absolute;transform:translateX(-50%)}
.studio-timeline{position:relative;background:#020617;border:1px solid #1e2a44;border-radius:12px;padding:18px 10px 14px;margin:0 0 14px;min-height:64px;overflow:hidden}
.studio-playhead{position:absolute;top:0;bottom:0;width:2px;background:#facc15;box-shadow:0 0 8px rgba(250,204,21,.8);z-index:3;pointer-events:none}
.studio-bar{position:relative;height:30px;line-height:30px;margin:6px 0;border-radius:7px;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-size:13px;color:#fff;background:linear-gradient(180deg,#38bdf8,#0369a1);box-shadow:inset 0 1px 0 rgba(255,255,255,.3);z-index:1}
.studio-bar.active{outline:2px solid #facc15;box-shadow:0 0 16px rgba(250,204,21,.45),inset 0 1px 0 rgba(255,255,255,.3)}
/* Studio gaya CapCut: pratinjau di atas, timeline track di bawah. */
.studio-preview-wrap{margin:0 0 14px}
.studio-preview-wrap video{display:block;width:100%;max-height:420px;background:#000;border-radius:12px;box-shadow:0 0 30px rgba(56,189,248,.15)}
.studio-tracks{position:relative;background:#020617;border:1px solid #1e2a44;border-radius:12px;padding:6px 10px 14px;margin:0 0 14px;overflow-x:auto}
.studio-track{display:flex;align-items:flex-start;gap:10px;margin:8px 0;min-width:480px}
.track-label{width:110px;flex:none;color:#94a3b8;font-size:13px;padding-top:6px}
.track-lane{position:relative;flex:1;min-height:36px}
.studio-video-bar{height:32px;line-height:32px;border-radius:7px;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#fff;background:linear-gradient(180deg,#f59e0b,#b45309);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.studio-sfx-chip{height:26px;line-height:26px;margin:6px 0;border-radius:7px;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-size:12px;color:#fff;background:linear-gradient(180deg,#a78bfa,#6d28d9);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.studio-sfx-chip.active{outline:2px solid #facc15}
.track-empty{color:#64748b;font-size:13px;line-height:32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Pemilih aset visual: kartu font + daftar SFX ber-play. */
.font-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
.font-card{min-width:0;background:#0f172a;border:1px solid #1e2a44;border-radius:10px;padding:10px 6px;cursor:pointer;color:#e8eefc;text-align:center}
/* Layar sempit (mis. monitor potret): kartu font jadi 2 kolom supaya tetap
   muat tanpa terpotong, bukan dipaksa 4 kolom. */
@media (max-width:760px){
  .font-cards{grid-template-columns:repeat(2,1fr)}
}
.font-card:hover{border-color:#38bdf8}
.font-card.active{outline:2px solid #facc15;box-shadow:0 0 14px rgba(250,204,21,.35)}
.font-card .sample{display:block;font-size:19px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.font-card small{color:#94a3b8;font-size:11px}
.sfx-list{display:grid;gap:6px;margin-top:6px;max-height:260px;overflow:auto}
.sfx-row{display:flex;align-items:center;gap:8px;background:#0f172a;border:1px solid #1e2a44;border-radius:8px;padding:6px 8px;cursor:pointer;color:#e8eefc;text-align:left}
.sfx-row:hover{border-color:#38bdf8}
.sfx-row.active{outline:2px solid #facc15}
.sfx-play{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid #334155;background:#1e293b;color:#fff;cursor:pointer;font-size:13px}
.sfx-name{font-size:13px;word-break:break-all}
input[type="range"]{padding:0}
.track{display:flex;align-items:center;gap:10px;margin:8px 0;color:#94a3b8;font-size:13px}
.track span{width:90px;flex:none}
.track i{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,#38bdf8,#0369a1);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.chip{padding:8px 14px;border-radius:999px;border:1px solid #334155;background:linear-gradient(180deg,#1e293b,#0f172a);color:#e8eefc;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.chip.active{background:linear-gradient(180deg,#38bdf8,#0369a1);border-color:#0284c7;box-shadow:0 0 16px rgba(56,189,248,.35)}
.plan-list{background:#020617;border:1px solid #1e2a44;border-radius:12px;padding:14px;margin-bottom:12px;color:#cbd5e1;line-height:1.7}
.plan-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid #1e293b}
.plan-row span{word-break:break-word}
.plan-row:last-child{border-bottom:none}
.btn.small{padding:6px 10px;margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:14px 0}
@media (max-width:520px){
  .hero{height:120px}
  main{padding:12px}
  .card{padding:14px;border-radius:14px}
  .grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .font-cards{grid-template-columns:repeat(2,1fr)}
  .font-card .sample{font-size:17px}
  .track-label{width:86px;font-size:12px}
  .tpl{padding:4px}
  .tpl strong{font-size:12px}
  .tpl-ph{font-size:12px}
  h2{font-size:18px}
}
.tpl{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0)),#0a0f1c;border:1px solid #334155;border-radius:10px;padding:6px;cursor:pointer;text-align:center;color:#e8eefc;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.pick-path{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.tpl-num{position:absolute;top:6px;left:6px;z-index:2;width:22px;height:22px;border-radius:50%;background:#facc15;color:#0f172a;font-weight:800;font-size:13px;line-height:22px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.tpl:hover{border-color:#38bdf8}
.tpl.active{border-color:#38bdf8;outline:2px solid #38bdf8;box-shadow:0 0 22px rgba(56,189,248,.35),inset 0 1px 0 rgba(255,255,255,.12)}
.tpl img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:6px;display:block;margin-bottom:6px}
.tpl-ph{width:100%;aspect-ratio:9/16;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:8px;margin-bottom:6px;background:linear-gradient(180deg,#1e293b,#0b1220);color:#38bdf8;font-weight:700;font-size:13px}
.tpl-ic{font-size:28px}
.tpl strong{display:block;margin-bottom:0;font-size:13px;font-weight:600}
.tpl span{color:#94a3b8;font-size:13px;line-height:1.5}
.detail{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.detail>*{min-width:0}
/* Label pemilih visual (kartu font, daftar SFX) selebar penuh supaya isinya
   tidak terjepit di satu kolom kecil dan meluber ke kanan halaman. */
.detail label:has(.font-cards),.detail label:has(.sfx-list){grid-column:1/-1}
label{color:#cbd5e1;font-size:14px}
input{width:100%;margin-top:6px;padding:10px;border-radius:10px;border:1px solid #334155;background:#05070d;color:#fff;box-shadow:inset 0 2px 8px rgba(0,0,0,.7)}
textarea{width:100%;margin-top:6px;padding:10px;border-radius:10px;border:1px solid #334155;background:#05070d;color:#fff;box-shadow:inset 0 2px 8px rgba(0,0,0,.7);font-family:inherit;font-size:14px;line-height:1.5}
select{width:100%;margin-top:6px;padding:10px;border-radius:10px;border:1px solid #334155;background:#05070d;color:#fff}
input[type="color"]{height:44px;padding:4px;cursor:pointer}
.btn{padding:11px 16px;border-radius:10px;border:1px solid #334155;background:linear-gradient(180deg,#2a364f,#141c2e);color:#fff;cursor:pointer;margin:4px 4px 4px 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.btn.primary{background:linear-gradient(180deg,#38bdf8,#0369a1);border-color:#0284c7;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 20px rgba(56,189,248,.3)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.spinner{display:inline-block;width:18px;height:18px;border:3px solid #334155;border-top-color:#38bdf8;border-radius:50%;animation:spin 0.8s linear infinite;vertical-align:middle;margin-left:8px}
.spinner[hidden]{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
pre{background:#020617;border:1px solid #1e2a44;border-radius:12px;padding:14px;white-space:pre-wrap;word-break:break-word;color:#a5f3fc;box-shadow:inset 0 2px 12px rgba(0,0,0,.8)}
footer{color:#64748b;font-size:13px;line-height:1.6;text-align:center;padding:10px}

/* Picker warna custom (sama di semua perangkat, bukan dialog bawaan browser) */
.color-swatch{width:100%;height:44px;border:1px solid #1e2a44;border-radius:10px;cursor:pointer;padding:0}
.color-pop{position:fixed;z-index:100;background:#0f172a;border:1px solid #1e2a44;border-radius:14px;padding:14px;box-shadow:0 12px 40px rgba(0,0,0,.5);width:248px}
.cp-sv{position:relative;width:220px;height:140px;border-radius:10px;cursor:crosshair;touch-action:none}
.cp-dot{position:absolute;width:16px;height:16px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.6);transform:translate(-50%,-50%);pointer-events:none}
.cp-hue{position:relative;width:220px;height:16px;border-radius:8px;margin-top:12px;background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);cursor:pointer;touch-action:none}
.cp-row{display:flex;align-items:center;gap:10px;margin-top:12px}
.cp-preview{width:36px;height:36px;border-radius:8px;border:1px solid #1e2a44;flex:none}
.cp-hex{color:#e8eefc;font-family:monospace;flex:1}
.cp-close{background:#1e293b;color:#e8eefc;border:1px solid #334155;border-radius:8px;padding:8px 14px;cursor:pointer}