/* Yıldız haritası düzenleyicisi. Biblo sihirbazının dili: numaralı kare adımlar, ince ilerleme çizgisi, köşesiz alanlar.
   Renkler temanın değişkenlerinden, tema yoksa yedek değerlerden. */
.mevv-star{
	--st-ink:var(--mevv-color-heading,#231f1c);
	--st-muted:var(--mevv-color-muted,#6d655e);
	--st-line:var(--mevv-color-border,#ddd5cb);
	--st-bg:var(--mevv-color-background,#fff);
	--st-surface:var(--mevv-color-surface,#f6f2ec);
	--st-accent:var(--mevv-color-brand,#b4674a);
	--st-err:#a3321f;
	max-width:1120px;margin:0 auto;padding:clamp(24px,4vw,56px) 16px clamp(32px,4vw,56px);color:var(--st-ink);box-sizing:border-box
}
.mevv-star *,.mevv-star *::before,.mevv-star *::after{box-sizing:border-box}
.mevv-star__steps{display:flex;justify-content:center;gap:clamp(8px,3vw,40px);list-style:none;padding:0;margin:0 0 14px}
.mevv-star__stepbtn{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:4px;cursor:pointer;color:var(--st-muted);font:inherit}
.mevv-star__no{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--st-line);font-size:13px;color:var(--st-ink);background:var(--st-bg)}
.mevv-star__label{font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.mevv-star__stepbtn[aria-current="step"]{color:var(--st-ink)}
.mevv-star__stepbtn[aria-current="step"] .mevv-star__no{background:var(--st-ink);border-color:var(--st-ink);color:#fff}
.mevv-star__stepbtn.is-done .mevv-star__no{border-color:var(--st-ink)}
.mevv-star__stepbtn:focus-visible{outline:2px solid var(--st-ink);outline-offset:2px}
.mevv-star__progress{height:2px;background:var(--st-line);margin:0 0 clamp(24px,4vw,48px)}
.mevv-star__progress span{display:block;height:100%;width:25%;background:var(--st-ink);transition:width .3s ease}
@media (prefers-reduced-motion:reduce){.mevv-star__progress span{transition:none}}

.mevv-star__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.mevv-star__preview{margin:0;position:sticky;top:96px}
.mevv-star__canvas{aspect-ratio:1;width:100%;display:flex;align-items:center;justify-content:center;background:var(--st-surface)}
.mevv-star__canvas svg{display:block;width:100%;height:100%}
.mevv-star__loading{color:var(--st-muted);font-size:14px}
.mevv-star__caption{margin-top:10px;font-size:13px;color:var(--st-muted);text-align:center}

.mevv-star__pane{border:0;margin:0;padding:0;min-width:0}
.mevv-star__pane[hidden]{display:none}
.mevv-star__h{font-family:var(--mevv-font-heading,Fraunces,Georgia,serif);font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1.15;margin:0 0 8px;padding:0}
.mevv-star__h:focus{outline:none}
.mevv-star__h:focus-visible{outline:2px solid var(--st-ink);outline-offset:4px}
.mevv-star__desc{color:var(--st-muted);margin:0 0 24px}
.mevv-star__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mevv-star__field{display:flex;flex-direction:column;gap:6px;margin:0 0 18px;position:relative}
.mevv-star__field>span,.mevv-star__field>label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--st-muted)}
.mevv-star__field small{letter-spacing:0;text-transform:none;float:right}
.mevv-star input[type=text],.mevv-star input[type=search],.mevv-star input[type=date],.mevv-star input[type=time]{border:1px solid var(--st-line);border-radius:0;background:var(--st-bg);padding:12px 14px;min-height:48px;font:inherit;font-size:16px;color:var(--st-ink);width:100%}
.mevv-star input:focus-visible{outline:2px solid var(--st-ink);outline-offset:1px}
.mevv-star__list{position:absolute;z-index:20;top:100%;left:0;right:0;margin:-1px 0 0;padding:0;list-style:none;background:var(--st-bg);border:1px solid var(--st-ink);max-height:320px;overflow:auto}
.mevv-star__list[hidden]{display:none}
.mevv-star__opt{padding:12px 14px;cursor:pointer;border-top:1px solid var(--st-line)}
.mevv-star__opt:first-child{border-top:0}
.mevv-star__opt[aria-selected="true"],.mevv-star__opt:hover{background:var(--st-surface)}
.mevv-star__opt--none{color:var(--st-muted);cursor:default}
.mevv-star__hint{color:var(--st-muted);font-size:14px;margin:4px 0 0}
.mevv-star__credit{font-size:12px;color:var(--st-muted);margin:6px 0 0}
.mevv-star__credit a{color:inherit}
.mevv-star__check{display:flex;gap:10px;align-items:flex-start;margin:6px 0 18px;cursor:pointer;line-height:1.45}
.mevv-star__check input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--st-ink)}
.mevv-star__err{color:var(--st-err);margin:0 0 16px}

.mevv-star__designs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mevv-star__design{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px 12px 16px;border:1px solid var(--st-line);background:var(--st-bg);cursor:pointer;text-align:center;transition:border-color .15s}
.mevv-star__design:hover{border-color:var(--st-ink)}
.mevv-star__design:has(input:checked){border:2px solid var(--st-ink);padding:11px 11px 15px}
.mevv-star__design:has(input:focus-visible){outline:3px solid var(--mevv-color-link,#2b5fa8);outline-offset:3px}
.mevv-star__design input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.mevv-star__thumb{display:block;aspect-ratio:1;background:var(--st-surface)}
.mevv-star__thumb svg{display:block;width:100%;height:100%}
.mevv-star__dname{font-family:var(--mevv-font-heading,Fraunces,Georgia,serif);font-size:18px}
.mevv-star__ddesc{font-size:13px;color:var(--st-muted);line-height:1.4}

.mevv-star__summary{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0 0 20px;padding:16px 0;border-top:1px solid var(--st-line);border-bottom:1px solid var(--st-line)}
.mevv-star__summary dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--st-muted);padding-top:2px}
.mevv-star__summary dd{margin:0;overflow-wrap:anywhere}
.mevv-star__price{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 4px;font-size:15px}
.mevv-star__price strong{font-size:24px;font-weight:500;color:var(--st-accent)}
.mevv-star__consent{margin-top:18px;font-size:14px}
.mevv-star__add,.mevv-star__next{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border:1px solid var(--st-ink);background:var(--st-ink);color:#fff;font:inherit;font-size:15px;letter-spacing:.04em;cursor:pointer;border-radius:0}
.mevv-star__add{width:100%}
.mevv-star__back{min-height:52px;padding:0 20px;border:1px solid var(--st-line);background:var(--st-bg);color:var(--st-ink);font:inherit;cursor:pointer;border-radius:0}
.mevv-star__add:disabled,.mevv-star__next:disabled{opacity:.45;cursor:not-allowed}
.mevv-star__add:focus-visible,.mevv-star__next:focus-visible,.mevv-star__back:focus-visible{outline:2px solid var(--st-ink);outline-offset:2px}
.mevv-star__status{min-height:1.5em;margin:12px 0 0;font-size:14px}
.mevv-star__nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px}
.mevv-star__nav .mevv-star__next{margin-left:auto}
.mevv-star__nav [hidden]{display:none}

@media (max-width:899px){
	.mevv-star__body{grid-template-columns:1fr}
	.mevv-star__preview{position:static;order:-1;max-width:420px;width:100%;margin:0 auto}
}
@media (max-width:560px){
	.mevv-star__label{font-size:10px;letter-spacing:.08em}
	.mevv-star__designs{grid-template-columns:1fr 1fr 1fr;gap:8px}
	.mevv-star__ddesc{display:none}
	.mevv-star__dname{font-size:15px}
	.mevv-star__row{grid-template-columns:1fr}
}

/* Geçersiz tarihte önizleme eski çizimi soluk gösterir, hata 1. adımda yazar. */
.mevv-star [data-canvas].is-stale{opacity:.35;transition:opacity .2s}

/* Önizleme geçişi: katmanlar üst üste, yeni çizim gelir, eskisi söner. */
.mevv-star__canvas{position:relative;overflow:hidden}
.mevv-star__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.mevv-star__layer svg{display:block;width:100%;height:100%}
.mevv-star__layer.is-out{animation:mevvStarOut .45s ease forwards}
.mevv-star__layer.is-in{animation:mevvStarIn .3s ease both}
.mevv-star__layer.is-in-sky{animation:mevvStarSky .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes mevvStarOut{to{opacity:0;transform:scale(.97)}}
@keyframes mevvStarIn{from{opacity:.4}to{opacity:1}}
@keyframes mevvStarSky{from{opacity:0;transform:rotate(-14deg) scale(.92);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
.mevv-star__canvas::after{content:attr(data-note);position:absolute;left:50%;bottom:10px;transform:translate(-50%,6px);background:rgba(20,18,16,.82);color:#f5efe6;font-size:12px;letter-spacing:.02em;padding:5px 12px;border-radius:999px;opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .25s,transform .25s}
.mevv-star__canvas.is-flash::after{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.mevv-star__layer{animation:none!important}}