*{box-sizing:border-box;margin:0;padding:0}body{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#0f172a;color:#f8fafc;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0f172a99}::-webkit-scrollbar-thumb{background:#334155;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#475569}.app-header{position:sticky;top:0;z-index:50;background:#0f172ae6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.1);padding:.85rem 1.5rem;display:flex;align-items:center;justify-content:space-between}.logo-badge{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.25rem;color:#fff;text-decoration:none}.logo-badge .sparkle-icon{color:#f59e0b}.nav-tabs{display:flex;background:#1e293bcc;padding:4px;border-radius:999px;border:1px solid rgba(255,255,255,.08)}.nav-button{display:flex;align-items:center;gap:6px;padding:8px 16px;font-size:.875rem;font-weight:600;border-radius:999px;border:none;background:transparent;color:#94a3b8;cursor:pointer;transition:all .2s ease}.nav-button.active{background:#2563eb;color:#fff;box-shadow:0 4px 12px #2563eb59}.nav-button:hover:not(.active){color:#f8fafc;background:#ffffff0d}.app-container{max-width:1440px;margin:0 auto;padding:1.5rem}.workspace-grid{display:grid;grid-template-columns:420px 1fr;gap:1.5rem;align-items:start}@media(max-width:1024px){.workspace-grid{grid-template-columns:1fr}}.editor-panel{background:#1e293b;border-radius:16px;border:1px solid rgba(255,255,255,.1);padding:1.25rem;max-height:calc(100vh - 100px);overflow-y:auto;box-shadow:0 10px 25px #0000004d}.editor-section-title{display:flex;align-items:center;gap:8px;font-size:1.1rem;font-weight:700;color:#f8fafc;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.08)}.tab-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.85rem 1rem;background:#33415566;border:1px solid rgba(255,255,255,.08);border-radius:10px;color:#e2e8f0;font-weight:600;font-size:.925rem;cursor:pointer;margin-bottom:8px;transition:all .2s ease}.tab-header:hover,.tab-header.active{background:#2563eb26;border-color:#2563eb66;color:#60a5fa}.form-group{margin-bottom:1rem}.form-label{display:block;font-size:.825rem;font-weight:600;color:#cbd5e1;margin-bottom:4px}.form-input,.form-select,.form-textarea{width:100%;padding:.65rem .85rem;background:#0f172a;border:1px solid #334155;border-radius:8px;color:#f8fafc;font-size:.875rem;outline:none;transition:border-color .2s ease}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f633}.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}.theme-card{background:#1e293b;border-radius:16px;overflow:hidden;border:2px solid rgba(255,255,255,.08);transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;position:relative}.theme-card:hover{transform:translateY(-4px);border-color:#3b82f6;box-shadow:0 12px 30px #0006}.theme-card.active{border-color:#2563eb;box-shadow:0 0 0 4px #2563eb4d}.theme-thumbnail-box{height:320px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#0f172a}.theme-mockup-frame{width:170px;height:290px;background:#fff;border-radius:20px;box-shadow:0 10px 25px #0006,inset 0 0 0 2px #0003;padding:8px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;transform:rotate(-3deg);transition:transform .3s ease}.theme-card:hover .theme-mockup-frame{transform:rotate(0) scale(1.03)}.theme-badge{position:absolute;top:12px;right:12px;padding:4px 10px;border-radius:999px;font-size:.725rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 2px 8px #0000004d}.theme-card-body{padding:1.1rem;display:flex;flex-direction:column;gap:.75rem;background:#1e293b}.theme-name{font-size:1.15rem;font-weight:700;color:#fff}.theme-price{font-size:.95rem;color:#10b981;font-weight:600}.theme-action-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:.6rem 1rem;font-size:.875rem;font-weight:600;border-radius:8px;border:none;cursor:pointer;transition:all .2s ease;text-decoration:none}.btn-primary{background:#2563eb;color:#fff}.btn-primary:hover{background:#1d4ed8;box-shadow:0 4px 12px #2563eb59}.btn-outline{background:transparent;border:1px solid rgba(255,255,255,.2);color:#e2e8f0}.btn-outline:hover{background:#ffffff14;border-color:#fff6}.btn-success{background:#059669;color:#fff}.btn-success:hover{background:#047857}.preview-container{display:flex;flex-direction:column;align-items:center;gap:1rem}.device-frame-toolbar{display:flex;align-items:center;gap:12px;background:#1e293b;padding:6px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.1)}.device-toggle-btn{background:transparent;border:none;color:#94a3b8;padding:6px 12px;border-radius:999px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:.825rem;font-weight:600}.device-toggle-btn.active{background:#3b82f6;color:#fff}.mobile-view{width:410px;height:780px;border-radius:40px;border:12px solid #020617;box-shadow:0 25px 50px -12px #000000b3,inset 0 0 0 2px #ffffff1a;overflow:hidden;position:relative;background:#fff}.mobile-notch{position:absolute;top:0;left:50%;transform:translate(-50%);width:140px;height:24px;background:#020617;border-bottom-left-radius:14px;border-bottom-right-radius:14px;z-index:100}.desktop-view{width:100%;min-height:800px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 20px 40px #00000080}.editable-element{position:relative;transition:outline .2s ease,background .2s ease;border-radius:4px;cursor:pointer}.editable-element:hover{outline:2px dashed #3b82f6;background:#3b82f614}.editable-element:hover:after{content:"✎ Klik untuk Edit";position:absolute;top:-24px;right:0;background:#2563eb;color:#fff;font-size:.7rem;font-family:sans-serif;font-weight:600;padding:2px 6px;border-radius:4px;pointer-events:none;z-index:10;white-space:nowrap}.floating-audio-btn{position:fixed;bottom:24px;left:24px;z-index:99;width:50px;height:50px;border-radius:50%;background:#0f172ad9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 25px #0006;transition:transform .2s ease}.floating-audio-btn:hover{transform:scale(1.1)}.spinning-disc{animation:spin 6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172acc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1.5rem}.modal-content{background:#1e293b;border:1px solid rgba(255,255,255,.1);border-radius:20px;max-width:600px;width:100%;padding:1.75rem;box-shadow:0 25px 50px -12px #0009;max-height:90vh;overflow-y:auto}.petals-canvas{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5}