@font-face{font-family:'Card Modern';src:url('fonts/DejaVuSans-Bold.ttf');font-weight:700;font-display:block}
@font-face{font-family:'Card Classic';src:url('fonts/DejaVuSerif-Bold.ttf');font-weight:700;font-display:block}
@font-face{font-family:'Card Mono';src:url('fonts/DejaVuSansMono-Bold.ttf');font-weight:700;font-display:block}
@font-face{font-family:'Card Symbols';src:url('fonts/DejaVuSans.ttf');font-weight:100 900;font-display:block}
.text-tools{display:grid;gap:16px;margin:16px 0 24px}.text-tools[hidden]{display:none}.text-tools input[type=range]{width:100%;accent-color:#254f41}.symbol-palette{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.symbol-palette button{font:26px 'Card Symbols';padding:9px 3px;background:#f6f0e4;border:1px solid #cfc6b7;color:#59371f;cursor:pointer}.symbol-palette button:hover{background:#e4d7be}.text-position-row{display:flex;gap:8px}.text-position-row button{flex:1;padding:10px 5px}#design-text{font-size:22px;resize:vertical;min-height:90px}

#design-cup.text-draggable{touch-action:none;cursor:grab}#text-drag-hint{color:inherit;font-size:13px;text-align:center;background:transparent;opacity:.85;margin-top:30px}

/* ---------- Canlı kart önizlemesi (önizleme üzerinde doğrudan düzenleme) ---------- */
.designer-stage{position:relative;margin:28px auto 18px;max-width:440px}
.designer-card{position:relative}
.designer-card canvas{display:block;width:100%;height:auto;aspect-ratio:760/960;touch-action:none;outline:none}
.designer-card canvas:focus-visible{outline:2px dashed #e8c27a;outline-offset:4px;border-radius:12px}
#design-cup.text-draggable{cursor:grab}
.text-hud{position:absolute;left:50%;bottom:-6px;translate:-50% 0;display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:rgba(20,38,30,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.text-hud button{width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:#f5efe2;font-size:20px;line-height:1}
.text-hud button:hover{background:rgba(255,255,255,.12)}
.text-hud .hud-text{width:auto;padding:0 14px;border-radius:999px;font-size:12px;letter-spacing:.06em}
.text-hud output{min-width:48px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums;color:#e8c27a}

/* ---------- Oluşturulan kartın tanıtım animasyonu ---------- */
.card-show{position:absolute;left:0;right:0;top:50%;translate:0 -50%;z-index:3;aspect-ratio:1;perspective:1100px}
.card-show .show-cup{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(.86);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.card-show .show-card{position:absolute;left:50%;top:50%;width:50%;transform-style:preserve-3d;transform:translate(-50%,-50%) rotateY(-150deg) rotateX(20deg) scale(.55);opacity:0;transition:transform 1.3s cubic-bezier(.2,.75,.2,1),opacity .6s ease;filter:drop-shadow(0 22px 26px rgba(0,0,0,.4))}
.card-show .show-card canvas{display:block;width:100%;height:auto}
.card-show[data-phase=card] .show-card{opacity:1;transform:translate(-50%,-50%) rotateY(-16deg) rotateX(10deg) scale(1);animation:card-float 3.2s ease-in-out .9s infinite alternate}
@keyframes card-float{to{transform:translate(-50%,-52%) rotateY(14deg) rotateX(4deg) scale(1)}}
.card-show[data-phase=over] .show-card,.card-show[data-phase=pour] .show-card{opacity:1;transform:translate(-50%,-50%) translateY(var(--over-y,0px)) scale(var(--over-scale,1.4));filter:drop-shadow(0 30px 24px rgba(0,0,0,.45))}
.card-show[data-phase=pour] .show-card{animation:card-shake .5s ease-in-out 3}
@keyframes card-shake{50%{transform:translate(-50%,-50%) translateY(calc(var(--over-y,0px) - 3px)) scale(var(--over-scale,1.4)) rotate(.4deg)}}
.card-show[data-phase=lift] .show-card,.card-show[data-phase=done] .show-card{opacity:0;transform:translate(-50%,-50%) translateY(calc(var(--over-y,0px) - 70%)) scale(calc(var(--over-scale,1.4) * 1.06));transition:transform 1s cubic-bezier(.5,0,.3,1),opacity .9s ease .1s}
.card-show:is([data-phase=over],[data-phase=pour],[data-phase=lift],[data-phase=done]) .show-cup{opacity:1;transform:none}
.card-show .show-note{position:absolute;left:0;right:0;top:-6px;margin:0;font-size:13px;letter-spacing:.04em;color:#f5efe2;opacity:.9}
.card-show .show-actions{position:absolute;left:0;right:0;bottom:-8px;display:flex;justify-content:center;gap:8px;opacity:0;transition:opacity .4s}
.card-show[data-phase=done] .show-actions,.card-show[data-phase=lift] .show-actions{opacity:1}
.card-show .show-actions button{padding:9px 16px;border:1px solid rgba(245,239,226,.5);border-radius:999px;background:rgba(20,38,30,.7);color:#f5efe2;font-size:12px;letter-spacing:.04em}
.card-show .show-actions button:hover{background:#f5efe2;color:#244c3d}
.designer-stage:has(.card-show:not([hidden])) .designer-card{visibility:hidden}
@media (prefers-reduced-motion:reduce){.card-show .show-card,.card-show .show-cup{transition:none;animation:none}}
.designer-stage:has(.card-show:not([hidden]))+#text-drag-hint{visibility:hidden}

/* Ürün sayfasına gömülü tasarım aracı (?embed) */
.embed-only{display:none}
.embed .embed-only:not([hidden]){display:flex}
.embed body{background:#f4efe5}
.embed .commerce-header,.embed .commerce-footer,.embed .commerce-heading,.embed #custom-card-form,.embed #custom-card-form+*,.embed #design-signin,.embed details:has(#custom-card-form){display:none!important}
.embed .commerce-main{padding:14px 14px 28px;max-width:none}
.embed .designer-layout{gap:18px}
.embed .designer-preview{top:0;padding:20px}
.embed #embed-use{background:#2f6b4f;border-color:#2f6b4f}
/* Fotoğraf çizim stili seçimi (temiz şablon / detaylı) */
.image-style{margin:4px 0 18px}
.image-style>span{display:block;font-size:12px;margin-bottom:8px}
/* Kartı yayınla: görünür, çerçeveli seçim kutusu */
.publish-box{margin:18px 0;padding:16px;border:1px solid var(--green);background:#eef0e8}
.publish-box .check{margin:0;font-size:12px;align-items:flex-start}
.publish-box input[type=checkbox]{width:20px;height:20px;flex:none;margin-top:0}
.publish-box strong{letter-spacing:1px;color:var(--green)}
.publish-note{margin:10px 0 0 30px;font-size:11px;line-height:1.6;color:#5d6b5f}
.publish-note a{text-decoration:underline}