:root{font-family:Arial,sans-serif;color:#172033;background:#fff;--red:#ec1c24;--blue:#38add8}*{box-sizing:border-box}body{margin:0}.customizer{min-height:100vh;max-width:780px;margin:auto;background:#fff}.customizer-header{height:58px;border-bottom:1px solid #e4e7ec;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;text-align:center;padding:0 8px}.customizer-header button,.customizer-header a{border:0;background:none;color:#475467;font-size:29px;text-decoration:none;cursor:pointer}.customizer-header strong{font-size:18px}.step-dots{height:4px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.step-dots span{background:#e5e7eb}.step-dots span.active{background:var(--red)}.customizer-step{display:none;min-height:calc(100vh - 62px)}.customizer-step.active{display:block}.upload-shell{padding:28px 18px 12px}.upload-drop{min-height:260px;border:2px dashed #ccd1d8;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden;cursor:pointer;background:#fafafa}.upload-drop input{position:absolute;opacity:0;pointer-events:none}.upload-drop img{width:100%;height:300px;object-fit:contain}.upload-icon{font-size:44px;color:var(--blue)}.upload-drop strong{font-size:20px}.upload-drop small{color:#667085}.primary-button,.secondary-button{height:52px;border:0;border-radius:10px;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}.primary-button{background:var(--red);color:#fff}.primary-button:disabled{opacity:.45}.secondary-button{background:#ececec;color:#20242c}.upload-shell>.primary-button{width:100%;margin-top:16px}.saved-heading{padding:0 18px 10px}.saved-images{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0 18px}.saved-images button{border:3px solid transparent;border-radius:14px;background:#f4f4f4;padding:0;aspect-ratio:1;overflow:hidden;cursor:pointer}.saved-images button.selected{border-color:#20b95a}.saved-images img{width:100%;height:100%;object-fit:cover}.design-browser{display:grid;grid-template-columns:128px 1fr;min-height:calc(100vh - 62px)}.design-categories{border-right:1px solid #ddd;background:#f2f3f5;padding:6px;display:flex;flex-direction:column;gap:5px}.design-categories button{border:0;border-radius:8px;padding:13px 6px;background:#e1e4e8;font-size:14px;color:#344054;cursor:pointer}.design-categories button.active{background:var(--red);color:#fff}.design-categories small{display:block;margin-top:4px}.design-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px;align-content:start}.design-card{border:0;border-radius:8px;background:#eceef1;padding:6px;cursor:pointer}.design-card img{width:100%;aspect-ratio:3/4;object-fit:contain}.design-card strong{display:block;margin:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.design-card span{display:block;background:var(--red);color:#fff;border-radius:10px;padding:10px;font-weight:700}.editor-step.active{display:flex;flex-direction:column}.editor-toolbar{margin:14px;display:flex;justify-content:center;gap:7px;flex-wrap:wrap}.editor-toolbar button{width:44px;height:42px;border:0;border-radius:9px;font-size:21px;background:#eceef1;cursor:pointer}.canvas-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:10px;min-height:390px}.canvas-stage canvas{max-width:100%;max-height:62vh;box-shadow:0 3px 18px #0001;touch-action:none}.bottom-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:10px;border-top:1px solid #ddd}.text-panel{padding:10px;border-top:1px solid #ddd}.text-row{display:grid;grid-template-columns:1fr 80px;gap:8px}.text-row input{height:50px;border:1px solid #20242c;border-radius:10px;padding:0 13px;font-size:16px}.text-row button{border:0;border-radius:9px;background:#f18f94;color:#fff;font-weight:800}.font-options,.color-options{display:flex;gap:9px;margin:12px 0;overflow:auto}.font-options button{white-space:nowrap;border:1px solid #ddd;background:#fff;border-radius:8px;padding:8px 12px}.font-options button.active{background:var(--red);color:#fff}.color-options button{width:28px;height:28px;flex:0 0 28px;border:2px solid #fff;outline:1px solid #ddd;border-radius:50%;background:var(--color)}.text-panel>.primary-button{width:100%}.success-step{text-align:center;padding:24px 10px}.success-icon{width:54px;height:54px;margin:auto;border:3px solid #0abf53;color:#0abf53;border-radius:50%;display:grid;place-items:center;font-size:30px;font-weight:bold}.success-step h1{font-size:22px}.success-step p{color:#667085}.success-preview{height:56vh;display:flex;justify-content:center;align-items:center}.success-preview canvas{max-width:100%;max-height:100%}.empty-state{text-align:center;padding:80px 20px}.customizer.busy:after{content:'İşleniyor…';position:fixed;inset:0;background:#fffc;z-index:10;display:grid;place-items:center;font-size:20px;font-weight:bold}@media(min-width:781px){body{background:#f2f3f5}.customizer{box-shadow:0 0 30px #0002}.design-browser{grid-template-columns:180px 1fr}.design-grid{grid-template-columns:repeat(3,1fr)}}
/* Tasarım kartlarında müşterinin işlenmiş fotoğrafıyla oluşturulan canlı önizleme. */
.design-card canvas{display:block;width:100%;height:auto;background:#fff}
.text-edit-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}.text-edit-actions button{min-height:42px;border:1px solid #d0d5dd;border-radius:9px;background:#fff;color:#344054;font-size:12px;font-weight:700}.text-edit-actions button[data-new-text]{border-color:#84caff;color:#175cd3;background:#eff8ff}.text-edit-actions button[data-delete-text]{border-color:#fda29b;color:#b42318}.text-edit-actions button:disabled{opacity:.45}.text-items{margin-top:12px;padding:10px;border:1px solid #e4e7ec;border-radius:10px}.text-items>strong{display:block;margin-bottom:8px}.text-list-row{display:grid;grid-template-columns:1fr 42px;gap:6px;margin-top:6px}.text-list-row button{min-height:40px;border:1px solid #d0d5dd;border-radius:8px;background:#fff;text-align:left;padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-list-row button.is-active{border-color:var(--red);background:#fff1f2;color:#b42318;font-weight:800}.text-list-row .text-list-delete{text-align:center;padding:0;color:#b42318;font-size:20px;font-weight:800}
.text-disabled-message{margin:0 0 12px;padding:13px;border-radius:9px;background:#f2f4f7;color:#475467;text-align:center}
.photo-privacy-note{margin:10px 2px 0;color:#667085;font-size:11px;line-height:1.5}.photo-privacy-note a{text-decoration:underline}.saved-heading{display:flex;align-items:center;justify-content:space-between}.saved-heading button{border:0;background:none;color:#667085}.saved-image-card{position:relative;aspect-ratio:1}.saved-images .saved-image-select{width:100%;height:100%}.saved-images .saved-image-delete{position:absolute;z-index:2;right:-5px;top:-5px;width:27px;height:27px;min-width:27px;padding:0;border:2px solid #fff;border-radius:50%;background:#737b86;color:#fff;font-size:18px;line-height:1}.saved-images .saved-image-delete:hover{background:#d92d20}
.design-load-more{grid-column:1/-1;min-height:48px;border:1px solid #d0d5dd;border-radius:9px;background:#fff;color:#344054;font-weight:800}.design-load-more:hover{border-color:var(--red);color:var(--red)}
.color-options button.active{outline:3px solid #111827;outline-offset:2px}

/* Düzenleme ekranlarında ana işlem düğmelerini her zaman görünür tut. */
.editor-step.active{height:calc(100dvh - 62px);min-height:0;overflow:hidden}
.editor-step .editor-toolbar{flex:0 0 auto}
.editor-step .canvas-stage{flex:1 1 auto;min-height:0;overflow:hidden}
.editor-step .canvas-stage canvas{max-height:100%}
.editor-step .bottom-actions{position:relative;z-index:4;flex:0 0 auto;background:#fff;padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.editor-step .text-panel{position:relative;z-index:4;flex:0 0 auto;max-height:none;min-height:0;display:flex;flex-direction:column;background:#fff;padding:8px max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.editor-step .text-panel>[data-text-controls]{min-height:0;overflow:visible}
.editor-step .text-panel>.primary-button{flex:0 0 52px;margin-top:8px}
.editor-step .text-row input{height:46px}
.editor-step .font-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:8px 0;overflow:visible}
.editor-step .font-options button{min-width:0;padding:7px 3px;font-size:11px;overflow:hidden;text-overflow:ellipsis}
.editor-step .color-options{gap:8px;margin:8px 0;overflow:visible}
.editor-step .text-items{display:none!important}
.upload-drop{padding:10px}.upload-drop .photo-upload-guide{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:12px}.upload-prompt{display:flex;flex-direction:column;align-items:center;gap:5px}.upload-prompt[hidden],.photo-upload-guide[hidden]{display:none}.upload-drop img[data-upload-preview]{width:100%;height:300px;object-fit:contain}

/* Font seçenekleri, baskı önizlemesindeki yazı tipini gösterir. */
.font-options button{font-weight:700}
.font-options [data-font="Arial"]{font-family:Arial,sans-serif}
.font-options [data-font="Georgia"]{font-family:Georgia,serif}

/* Yalnızca fotoğraflı kırlent: belirgin yükleme alanı ve yastık biçimli önizleme. */
.customizer[data-customizer-type="photo_pillow"] .upload-shell{padding-top:22px}
.customizer[data-customizer-type="photo_pillow"] .upload-drop{min-height:285px;padding:30px 20px;border:2px dashed #ec1c24;background:linear-gradient(145deg,#fff 0%,#fff7f7 100%);box-shadow:0 8px 24px #ec1c2412}
.customizer[data-customizer-type="photo_pillow"] .upload-drop .photo-upload-guide{width:auto;height:auto;aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:4px;margin:0 0 8px;padding:10px 16px;border-radius:999px;background:#fff0f1;color:#991b1b;text-align:center}
.customizer[data-customizer-type="photo_pillow"] .upload-drop .photo-upload-guide strong{font-size:14px}
.customizer[data-customizer-type="photo_pillow"] .upload-drop .photo-upload-guide small{font-size:11px;color:#9f4b50}
.customizer[data-customizer-type="photo_pillow"] .upload-prompt{min-width:210px;padding:16px 22px;border-radius:14px;background:#ec1c24;color:#fff;box-shadow:0 8px 18px #ec1c2430}
.customizer[data-customizer-type="photo_pillow"] .upload-prompt .upload-icon{color:#fff;line-height:.8}
.customizer[data-customizer-type="photo_pillow"] .upload-prompt strong{font-size:18px}
.customizer[data-customizer-type="photo_pillow"] .upload-prompt small{color:#fff}
.customizer[data-customizer-type="photo_pillow"] .saved-heading{padding-top:8px}
.customizer[data-customizer-type="photo_pillow"] .saved-images{padding-bottom:22px}
.customizer[data-customizer-type="photo_pillow"] .saved-image-select{border-color:#e4e7ec;background:#fff}
.customizer[data-customizer-type="photo_pillow"] .photo-pillow-preview{margin:18px;min-height:0;padding:28px;overflow:visible}
.customizer[data-customizer-type="photo_pillow"] .photo-pillow-shell{position:relative;display:flex;max-width:100%;max-height:100%;filter:drop-shadow(0 16px 18px #10182830)}
.customizer[data-customizer-type="photo_pillow"] .photo-pillow-shell canvas{position:relative;z-index:1;max-width:100%;max-height:100%;border:0;border-radius:0;box-shadow:none}

.font-options [data-font="cursive"]{font-family:cursive}
.font-options [data-font="Impact"]{font-family:Impact,"Arial Black",sans-serif}
.font-options [data-font="Trebuchet MS"]{font-family:"Trebuchet MS",sans-serif}
.font-options [data-font="Times New Roman"]{font-family:"Times New Roman",serif}
.font-options [data-font="Courier New"]{font-family:"Courier New",monospace}
.two-person-note{margin:12px auto;padding:12px 16px;max-width:650px;border-radius:10px;background:#eff6ff;color:#183153;text-align:center}.person-tabs{display:flex;gap:8px;justify-content:center;margin:12px auto;flex-wrap:wrap}.person-tabs button{border:1px solid #cbd5e1;border-radius:9px;background:#fff;padding:10px 14px;cursor:pointer}.person-tabs button.active{border-color:#2563eb;background:#dbeafe;color:#173b88;font-weight:700}[data-continue-images]{display:block;margin:18px auto}[data-continue-images][hidden]{display:none}
