#plakdoldurma-configurator{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#161616}#plakdoldurma-configurator *{box-sizing:border-box}.pd-app{max-width:1180px;margin:0 auto;padding:20px}.pd-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:20px}.pd-head h2{margin:3px 0 0;font-size:30px;line-height:1}.pd-head strong{font-size:24px}.pd-eyebrow{font-size:11px;letter-spacing:.25em;color:#777}.pd-grid{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:22px}.pd-panel{border:1px solid #ddd;border-radius:14px;padding:18px;margin-bottom:16px;background:#fff}.pd-panel h3{margin:0 0 8px;font-size:18px}.pd-muted{color:#666;font-size:13px}.pd-drop,.pd-upload{display:block;border:1px dashed #aaa;border-radius:10px;padding:14px;text-align:center;cursor:pointer;margin-top:12px}.pd-drop:hover,.pd-upload:hover{border-color:#111}.pd-drop input,.pd-upload input{display:none}.pd-tracks{margin-top:12px}.pd-track{display:grid;grid-template-columns:26px 36px 1fr auto auto;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid #eee;font-size:13px}.pd-play{border:0;background:#111;color:#fff;border-radius:50%;width:30px;height:30px;cursor:pointer}.pd-track-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pd-link{border:0;background:none;text-decoration:underline;cursor:pointer}.pd-empty{padding:18px;text-align:center;color:#888}.pd-side-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.pd-side-title{font-size:12px;font-weight:700;letter-spacing:.08em;margin-bottom:7px}.pd-side-track{display:flex;justify-content:space-between;gap:8px;width:100%;padding:8px;border:1px solid #e1e1e1;background:#fafafa;margin-bottom:6px;border-radius:8px;text-align:left;cursor:pointer}.pd-side-track small{color:#777}.pd-alert{background:#fff2f2;border:1px solid #e0a0a0;color:#9b111e;padding:10px 12px;border-radius:8px;margin:10px 0;font-size:13px}.pd-image-grid,.pd-cover-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pd-image-slot,.pd-cover-card{min-width:0}.pd-image-preview{aspect-ratio:1;border:1px solid #ddd;border-radius:10px;display:grid;place-items:center;overflow:hidden;background:#f7f7f7;color:#999}.pd-image-preview img,.pd-cover-preview img{width:100%;height:100%;object-fit:cover}.pd-cover-preview{aspect-ratio:1.2;border:1px solid #ddd;border-radius:10px;display:grid;place-items:center;overflow:hidden;background:#f7f7f7;color:#999}.pd-check{display:inline-flex;gap:7px;align-items:center;font-size:13px;margin:12px 12px 0 0}.pd-primary{width:100%;border:0;border-radius:10px;background:#111;color:#fff;padding:15px;font-size:16px;font-weight:700;cursor:pointer}.pd-primary:disabled{opacity:.45;cursor:not-allowed}.pd-preview{position:relative}.pd-preview>.pd-panel{position:sticky;top:20px}.pd-preview-note{font-size:11px;color:#777;text-align:center;margin-top:12px;line-height:1.5}.pd3d-scene{height:340px;display:grid;place-items:center;perspective:900px;overflow:hidden}.pd3d-disc{width:280px;height:280px;border-radius:50%;position:relative;transform-style:preserve-3d;animation:pdspin 9s linear infinite;box-shadow:0 22px 35px rgba(0,0,0,.25);background:#111}.pd3d-disc.cd{background:radial-gradient(circle,#eee 0 2%,#bbb 3% 5%,#e7e7e7 6% 60%,#aaa 61% 100%)}.pd3d-face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;background:#111 center/cover no-repeat;overflow:hidden}.pd3d-face.front{background-image:var(--art)}.pd3d-face.back{transform:rotateY(180deg);background-image:var(--art)}.pd3d-disc.cd .pd3d-face{mix-blend-mode:multiply}.pd3d-hole{position:absolute;width:18px;height:18px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border:1px solid #bbb;z-index:5}.pd3d-art{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;aspect-ratio:1;border-radius:50%;background-position:center;background-repeat:no-repeat;background-size:cover;overflow:hidden}.pd3d-art.label-art{width:48%;}.pd3d-art.full-art{width:100%;}.pd3d-art:empty{display:none}.pd3d-shine{position:absolute;inset:0;border-radius:50%;z-index:4;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.25),transparent 35%,transparent 70%,rgba(255,255,255,.08))}.pd3d-disc.cd .pd3d-hole{width:34px;height:34px}@keyframes pdspin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}@media(max-width:900px){.pd-grid{grid-template-columns:1fr}.pd-preview>.pd-panel{position:relative;top:auto}.pd3d-scene{height:300px}.pd3d-disc{width:230px;height:230px}}@media(max-width:560px){.pd-app{padding:10px}.pd-panel{padding:14px}.pd-image-grid,.pd-cover-grid,.pd-side-grid{grid-template-columns:1fr}.pd-track{grid-template-columns:24px 32px 1fr auto}.pd-track .pd-link{grid-column:4}.pd-head h2{font-size:24px}.pd-head strong{font-size:19px}} .pd-canvas-editor{position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box} .pd-canvas-editor-dialog{width:min(760px,96vw);max-height:94vh;overflow:auto;background:#fff;border-radius:12px;box-shadow:0 20px 70px rgba(0,0,0,.35)} .pd-canvas-editor-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #eee;font-size:16px} .pd-canvas-editor-head button{border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer} .pd-canvas-editor-body{display:flex;align-items:center;justify-content:center;padding:18px;background:#e9e9e9} .pd-canvas-editor-body canvas{display:block;max-width:100%;height:auto;touch-action:none;background:#f3f3f3;box-shadow:0 3px 16px rgba(0,0,0,.12)} .pd-canvas-editor-controls{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:12px 16px} .pd-canvas-editor-controls button,.pd-canvas-editor-controls output{min-height:38px;box-sizing:border-box;padding:7px 12px;border:1px solid #d5d5d5;border-radius:6px;background:#fff;display:inline-flex;align-items:center;justify-content:center} .pd-canvas-editor-controls button{cursor:pointer}.pd-canvas-editor-controls .pd-ce-save{margin-left:auto} .pd-canvas-editor-help{margin:0;padding:0 16px 15px;color:#666;font-size:12px} .pd-edit-design{display:inline-block;margin-top:7px;padding:5px 9px;border:1px solid #ccc;border-radius:5px;background:#fff;cursor:pointer;font-size:12px} @media(max-width:600px){.pd-canvas-editor{padding:8px}.pd-canvas-editor-dialog{width:100%;max-height:98vh}.pd-canvas-editor-controls .pd-ce-save{margin-left:0;width:100%}} .pd-auth-gate{position:fixed;inset:0;z-index:1000000;display:flex;align-items:center;justify-content:center;padding:20px}.pd-auth-gate[hidden]{display:none}.pd-auth-gate-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62)}.pd-auth-gate-dialog{position:relative;width:min(440px,94vw);background:#fff;border-radius:16px;padding:30px 26px 26px;box-shadow:0 24px 80px rgba(0,0,0,.35);text-align:center}.pd-auth-gate-close{position:absolute;right:12px;top:8px;border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:#666}.pd-auth-gate-icon{font-size:32px;margin-bottom:8px}.pd-auth-gate-dialog h3{margin:0 0 10px;font-size:23px}.pd-auth-gate-dialog p{margin:0 auto 22px;max-width:360px;color:#666;font-size:14px;line-height:1.55}.pd-auth-gate-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.pd-auth-gate-actions a{display:inline-flex;align-items:center;justify-content:center;min-width:130px;padding:12px 18px;border-radius:9px;text-decoration:none;font-weight:700}.pd-auth-gate-primary{background:#111;color:#fff}.pd-auth-gate-secondary{border:1px solid #ccc;color:#222;background:#fff}@media(max-width:480px){.pd-auth-gate-dialog{padding:28px 18px 20px}.pd-auth-gate-actions{flex-direction:column}.pd-auth-gate-actions a{width:100%}}\n /* v0.4.14 */ .pd-play{border:1px solid #bbb!important;background:#fff!important;color:#111!important;border-radius:50%;width:30px;height:30px;cursor:pointer;display:inline-grid;place-items:center;padding:0;font-size:13px;box-shadow:none!important} .pd-play:hover{background:#f5f5f5!important} .pd-upload-progress{margin:12px 0;padding:10px 12px;border:1px solid #ddd;border-radius:10px;background:#fafafa} .pd-upload-progress-head{display:flex;justify-content:space-between;gap:12px;font-size:12px;margin-bottom:7px} .pd-upload-progress-track{height:9px;background:#e7e7e7;border-radius:999px;overflow:hidden} .pd-upload-progress-bar{height:100%;background:#111;border-radius:999px;transition:width .15s ease} .pd-track-title,.pd-side-track{color:#161616!important} .pd-side-track small{color:#555!important} .pd-canvas-editor-controls button,.pd-canvas-editor-controls output{color:#111!important;background:#fff!important;font-weight:600!important;opacity:1!important;visibility:visible!important;text-shadow:none!important} .pd-canvas-editor-controls .pd-ce-save{background:#111!important;color:#fff!important} .pd-canvas-editor-controls{background:#fff;position:relative;z-index:2} /* v0.4.15 */ .pd-edit-design{background:#9ed8ff!important;color:#07324d!important;border:1px solid #76bfe9!important;transition:background-color .15s ease,color .15s ease,border-color .15s ease}.pd-edit-design:hover{background:#0b74d1!important;color:#fff!important;border-color:#0b74d1!important}.pd3d-face{display:block;overflow:hidden}.pd3d-art{pointer-events:none} /* v0.4.16 — 3D preview must reflect the saved design state */ .pd3d-art{border-radius:50%!important;overflow:hidden!important;background-clip:padding-box!important;transform-origin:center center!important} .pd3d-art.label-art{width:48%!important;height:48%!important} .pd3d-art.full-art{width:100%!important;height:100%!important} .pd3d-face{border-radius:50%!important;overflow:hidden!important} /* 0.4.17: 3D preview must render the same uploaded artwork and transform state as the editor. */ .pd3d-art{position:absolute!important;left:50%!important;top:50%!important;display:block!important;margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;object-fit:cover!important;object-position:center!important;overflow:hidden!important;pointer-events:none!important;transform-origin:center center!important;z-index:2!important;box-shadow:none!important;} .pd3d-art.label-art{width:48%!important;height:48%!important;} .pd3d-art.full-art{width:100%!important;height:100%!important;} .pd3d-face{isolation:isolate;} /* v0.4.19 — 3D preview mirrors editor composition without changing physical label size. */ .pd3d-art{position:absolute!important;left:50%!important;top:50%!important;margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;overflow:hidden!important;background:transparent!important;pointer-events:none!important;z-index:2!important;} .pd3d-art.label-art{width:48%!important;height:48%!important;} .pd3d-art.full-art{width:100%!important;height:100%!important;} .pd3d-art>img{position:absolute!important;display:block!important;max-width:none!important;object-fit:fill!important;border:0!important;border-radius:0!important;margin:0!important;padding:0!important;transform-origin:center center!important;pointer-events:none!important;} /* v0.4.32: stable 3D artwork mask. Avoid transformed descendants inside the rotating 3D face; Chromium could clip them into a half-circle. */ .pd3d-face{overflow:hidden!important;clip-path:circle(50% at 50% 50%)!important;transform-style:flat!important;} .pd3d-art{position:absolute!important;left:50%!important;top:50%!important;margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;overflow:hidden!important;background:transparent!important;clip-path:circle(50% at 50% 50%)!important;transform:translate(-50%,-50%)!important;} .pd3d-art-inner{position:absolute!important;display:block!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background-repeat:no-repeat!important;background-size:100% 100%!important;background-position:center!important;transform-origin:center center!important;pointer-events:none!important;} .pd3d-art.label-art{width:48%!important;height:48%!important;} .pd3d-art.full-art{width:100%!important;height:100%!important;} /* 3D preview — one authoritative implementation. The mask defines the physical label size. The child image is the pre-composited 512x512 editor result, so no second X/Y/zoom/rotation transform is applied in CSS. */ .pd3d-face{ position:absolute!important; inset:0!important; border-radius:50%!important; overflow:visible!important; backface-visibility:hidden!important; } .pd3d-label-mask{ position:absolute!important; left:50%!important; top:50%!important; margin:0!important; transform:translate(-50%,-50%)!important; border-radius:50%!important; overflow:hidden!important; clip-path:circle(50% at 50% 50%)!important; background:transparent!important; pointer-events:none!important; z-index:2!important; box-sizing:border-box!important; } .pd3d-label-art{ position:absolute!important; left:0!important; top:0!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; object-fit:fill!important; object-position:center!important; transform:none!important; transform-origin:center center!important; pointer-events:none!important; } /* v0.4.44 — realistic vinyl base image. The supplied record artwork is used only as the physical disc surface; the saved A/B label composition is still rendered independently above it. Full-disc artwork keeps the old full-art behavior. */ .pd3d-disc.vinyl:not(.full-disc) .pd3d-face{ background-image:var(--pd3d-base-image)!important; background-size:cover!important; background-position:center!important; background-repeat:no-repeat!important; background-color:#090909!important; } .pd3d-disc.vinyl:not(.full-disc){ background:#090909!important; border-radius:50%!important; box-shadow:0 22px 35px rgba(0,0,0,.28), inset 0 0 0 2px rgba(255,255,255,.08), inset 0 0 28px rgba(0,0,0,.45)!important; } .pd3d-disc.vinyl:not(.full-disc) .pd3d-shine{ background: radial-gradient(ellipse at 35% 24%,rgba(255,255,255,.16),transparent 24%), linear-gradient(118deg,rgba(255,255,255,.18),transparent 31%,transparent 63%,rgba(255,255,255,.06))!important; mix-blend-mode:screen!important; } /* v0.4.39 — Re-enable the validated rotating 3D preview. The 2D composition remains pre-composited; only the physical disc rotation is restored. */ .pd3d-disc{ animation:pdspin 9s linear infinite!important; transform-style:preserve-3d!important; } /* v0.4.38 — physical center-hole scale. Keep the 3D hole tied to the real 7.24mm / disc diameter ratio. */ .pd3d-hole{ width:calc(var(--pd3d-hole-ratio, .0241333333) * 100%) !important; height:calc(var(--pd3d-hole-ratio, .0241333333) * 100%) !important; left:50% !important; top:50% !important; transform:translate(-50%,-50%) !important; border-radius:50% !important; background:#fff !important; border:1px solid #bbb !important; z-index:5 !important; } .pd3d-disc.cd .pd3d-hole{ width:calc(var(--pd3d-hole-ratio, .0241333333) * 100%) !important; height:calc(var(--pd3d-hole-ratio, .0241333333) * 100%) !important; } /* v0.4.40 — clearer track delete buttons */ .pd-link{display:inline-block!important;border:1px solid #9ed0ef!important;background:#dff2ff!important;color:#075985!important;text-decoration:none!important;border-radius:6px!important;padding:5px 9px!important;font-size:12px!important;font-weight:600!important;line-height:1.2!important;cursor:pointer!important} .pd-link:hover{background:#c7e9fb!important;color:#075985!important} /* v0.4.41 — keep audio play controls circular even when the active theme applies width/flex rules to buttons inside track rows. */ .pd-track .pd-play{ box-sizing:border-box!important; flex:0 0 30px!important; width:30px!important; min-width:30px!important; max-width:30px!important; height:30px!important; min-height:30px!important; max-height:30px!important; aspect-ratio:1 / 1!important; padding:0!important; margin:0!important; border-radius:50%!important; appearance:none!important; -webkit-appearance:none!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; line-height:1!important; overflow:hidden!important; transform:none!important; } /* v0.4.45 YouTube source controls */ .pd-youtube-button{display:inline-flex;align-items:center;justify-content:center;margin-top:10px;padding:9px 14px;border:1px solid #9bc9ff;border-radius:8px;background:#dcebff;color:#164a7a;font-weight:600;cursor:pointer} .pd-youtube-button:hover{background:#cfe4ff} .pd-track-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}.pd-track-actions .pd-youtube-button{margin-top:0}.pd-list-clear{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border:1px solid #9ed0ef;border-radius:8px;background:#dff2ff;color:#075985;font-weight:600;cursor:pointer}.pd-list-clear:hover{background:#c7e9fb}.pd-list-clear:disabled{opacity:.55;cursor:not-allowed} .pd-track{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .pd-track-thumb{width:48px;height:36px;object-fit:cover;border-radius:4px;display:block} .pd-youtube-watch{font-size:12px;text-decoration:none}