/* Vitrolo — v3.css · 2026-11-06 · site v3 "gösteri sitesi". Kaynak: uretim-araci/v3/assets/css/v3.css (build kopyalar).
   Sahneler: bd (hero kurulum) · mq (örnek site maketi) · dv (cihaz çerçeveleri) · lk (3 tarz × 3 renk) · qm (QR menü) · lg (logo kiti) · so (sosyal set) · cf (vaka dosyaları) · ck (24 saat kadranı).
   Kural: gizli başlangıç halleri yalnız html.mo altında; hareket azaltma / ?static=1 / JS yoksa her sahne anlamlı son karede durur. Yalnız transform/opacity/clip-path + renk geçişi. */
@font-face{font-family:'Young Serif';font-weight:400;font-display:swap;src:url(/samples/_fonts/youngserif-latin.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:400 700;font-display:swap;src:url(/samples/_fonts/hankengrotesk-latin.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-weight:400 700;font-display:swap;src:url(/samples/_fonts/bodonimoda-latin.woff2) format('woff2')}
@font-face{font-family:'Jost';font-weight:400 600;font-display:swap;src:url(/samples/_fonts/jost-latin.woff2) format('woff2')}
@font-face{font-family:'Bowlby One';font-weight:400;font-display:swap;src:url(/samples/_fonts/bowlbyone-latin.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:400 800;font-display:swap;src:url(/samples/_fonts/archivo-latin.woff2) format('woff2')}

/* ================================================================ cihaz çerçeveleri */
.dv-br{background:#fff;border-radius:12px;box-shadow:0 0 0 1px rgba(22,33,62,.14),0 30px 60px -30px rgba(22,33,62,.45);overflow:hidden}
.dv-bar{display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;background:#F1F2F5;border-bottom:1px solid rgba(22,33,62,.1)}
.dv-bar i{width:7px;height:7px;border-radius:50%;background:rgba(22,33,62,.18)}
.dv-url{margin-left:10px;flex:1;max-width:60%;height:16px;border-radius:8px;background:#fff;font-size:9.5px;line-height:16px;padding:0 9px;color:#55607C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-scr{position:relative;container-type:inline-size;overflow:hidden;aspect-ratio:16/10;background:#fff}
.dv-ph{position:relative;background:#16213E;border-radius:22px;padding:7px;box-shadow:0 30px 50px -24px rgba(22,33,62,.6)}
.dv-ph .dv-scr--ph{aspect-ratio:9/19;border-radius:16px;container-name:ph}
.dv-notch{position:absolute;z-index:3;top:11px;left:50%;width:30%;height:9px;margin-left:-15%;border-radius:9px;background:#16213E}

/* ================================================================ örnek site maketi (mq) — 3 tarz; telefonda kapsayıcı sorgusu */
.mq{--fs:1.25cqw;font-size:var(--fs);font-family:var(--fb);background:var(--bg);color:var(--ink);min-height:100%;padding:0 3.2em 3em;line-height:1.35;
  transition:background-color .6s,color .6s}
.mq *{transition:background-color .6s,color .6s,border-color .6s,fill .6s,stroke .6s,opacity .5s}
.mq p{margin:0}
.mq .f-ac{fill:var(--ac)}.mq .f-pop{fill:var(--pop)}.mq .f-bg{fill:var(--bg)}.mq .f-card{fill:var(--card)}.mq .f-ink{fill:var(--ink)}.mq .s-ink{stroke:var(--ink)}
.mq .mq-ini{fill:var(--on);font-family:var(--fh)}
.mq-nav{display:flex;align-items:center;gap:1em;height:6em;border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.mq-lg{width:2.6em;height:2.6em;flex:none}.mq-lg svg{width:100%;height:100%}
.mq-nm{font-family:var(--fh);font-weight:400;font-size:1.5em;white-space:nowrap}
.mq-links{display:flex;gap:1.6em;margin-left:auto}.mq-links i{font-style:normal;font-weight:600;font-size:1.05em}
.mq-cta{background:var(--ac);color:var(--on);font-weight:700;padding:.7em 1.3em;border-radius:99em;white-space:nowrap}
.mq-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:2.4em;align-items:center;padding:3.4em 0 2.6em}
.mq-eb{display:inline-flex;align-items:center;gap:.6em;font-weight:700;font-size:1.05em;margin-bottom:1.2em!important}
.mq-eb::before{content:"";width:.7em;height:.7em;border-radius:50%;background:var(--ac)}
.mq-h{font-family:var(--fh);font-size:4.4em;line-height:1.02;letter-spacing:-.02em;margin-bottom:.35em!important}
.mq-h em{font-family:inherit;font-style:normal;color:var(--act)}
.mq-p{color:var(--mu);font-size:1.3em;max-width:30em;margin-bottom:1.6em!important}
.mq-bs{display:flex;gap:.8em;flex-wrap:wrap}
.mq-b1,.mq-b2{display:inline-block;font-weight:700;font-size:1.1em;padding:.9em 1.6em;border-radius:99em;border:2px solid var(--ac)}
.mq-b1{background:var(--ac);color:var(--on)}.mq-b2{border-color:var(--ink);color:var(--ink)}
.mq-art{position:relative}.mq-svg{width:100%;height:auto;overflow:visible}
.mq-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2em}
.mq-it{display:flex;justify-content:space-between;align-items:baseline;gap:.6em;background:var(--card);padding:1.2em 1.3em;border-radius:1em;font-size:1.1em}
.mq-it em{font-style:normal;font-weight:700;color:var(--act);white-space:nowrap;font-family:var(--fb)}
/* Classic */
.mq--classic .mq-nav{justify-content:center;border-bottom:1px solid var(--ink)}
.mq--classic .mq-links{margin-left:2em}.mq--classic .mq-links i{font-weight:400;text-transform:uppercase;letter-spacing:.14em;font-size:.85em}
.mq--classic .mq-cta{border-radius:2px;background:transparent;color:var(--ink);border:1px solid var(--ink);margin-left:auto}
.mq--classic .mq-eb{text-transform:uppercase;letter-spacing:.2em;font-weight:500;font-size:.85em}.mq--classic .mq-eb::before{width:2.4em;height:1px;border-radius:0}
.mq--classic .mq-h{font-weight:500;letter-spacing:-.01em}.mq--classic .mq-h em{font-style:italic}
.mq--classic .mq-b1,.mq--classic .mq-b2{border-radius:2px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.95em}
.mq--classic .mq-art{padding:1.2em;border:1px solid var(--ink);outline:1px solid var(--ink);outline-offset:-.6em}
.mq--classic .mq-row{gap:0;border-top:1px solid var(--ink)}.mq--classic .mq-it{background:transparent;border-radius:0;border-bottom:1px solid color-mix(in srgb,var(--ink) 25%,transparent);padding:1em .4em}
/* Bold */
.mq--bold .mq-nm{font-size:1.35em;text-transform:uppercase}
.mq--bold .mq-cta,.mq--bold .mq-b1,.mq--bold .mq-b2{border-radius:.5em;border:2px solid var(--ink);box-shadow:.3em .3em 0 var(--ink)}
.mq--bold .mq-h{text-transform:uppercase;font-size:4.6em;line-height:.95;letter-spacing:-.01em}
.mq--bold .mq-h em{background:var(--pop);color:var(--ink);padding:0 .12em;border-radius:.1em}
.mq--bold .mq-eb{background:var(--ink);color:var(--bg);padding:.35em .8em;border-radius:.3em;transform:rotate(-2deg)}.mq--bold .mq-eb::before{background:var(--pop)}
.mq--bold .mq-art::before{content:"";position:absolute;inset:6% 2% 0 8%;background:var(--pop);border-radius:42% 58% 50% 50%;transform:rotate(-8deg)}
.mq--bold .mq-it{border:2px solid var(--ink);border-radius:.6em;box-shadow:.3em .3em 0 var(--ink);background:var(--bg)}
.mq--bold .mq-it:nth-child(2){transform:rotate(1.5deg)}.mq--bold .mq-it:nth-child(1){transform:rotate(-1deg)}
/* telefon düzeni */
@container ph (max-width:420px){
  .mq{--fs:4.3cqw;padding:0 1.4em 2em}
  .mq-nav{height:4.6em}.mq-links{display:none}.mq-nm{font-size:1.15em}.mq-cta{margin-left:auto;font-size:.85em;padding:.55em .9em}
  .mq--classic .mq-nav{justify-content:flex-start}
  .mq-hero{grid-template-columns:1fr;gap:1.2em;padding:1.8em 0 1.4em}.mq-art{order:-1;width:72%;margin:0 auto}
  .mq-h,.mq--bold .mq-h{font-size:2.7em}.mq-p{font-size:1.05em}
  .mq-row{grid-template-columns:1fr;gap:.6em}
}

/* ================================================================ 1 · HERO kurulum sahnesi (bd) */
.bd{padding:calc(var(--hdr) + clamp(16px,3vw,44px)) 0 clamp(48px,6vw,88px);overflow-x:clip}
.bd__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center}
.bd__h{font-size:clamp(2.5rem,1.4rem + 3.6vw,5.1rem)}
.bd__lead{margin-top:24px}
.bd__btns{margin-top:28px}
.bd__trust{margin-top:24px}
.bd__fn{margin-top:18px;max-width:52ch}
.bd__stage{min-width:0}
.bd-st{position:relative;padding:18px 0 0 18px}
.bd-rul{position:absolute;pointer-events:none;opacity:.55}
.bd-rul--x{left:18px;right:0;top:0;height:12px;background:repeating-linear-gradient(90deg,rgba(22,33,62,.35) 0 1px,transparent 1px 10px) bottom/100% 5px no-repeat,repeating-linear-gradient(90deg,rgba(22,33,62,.45) 0 1px,transparent 1px 50px) bottom/100% 12px no-repeat}
.bd-rul--y{top:18px;bottom:0;left:0;width:12px;background:repeating-linear-gradient(180deg,rgba(22,33,62,.35) 0 1px,transparent 1px 10px) right/5px 100% no-repeat,repeating-linear-gradient(180deg,rgba(22,33,62,.45) 0 1px,transparent 1px 50px) right/12px 100% no-repeat}
.bd-canvas{position:relative;aspect-ratio:16/11.2;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px rgba(22,33,62,.12)}
.bd-desk{position:absolute;left:4%;top:5%;width:78%}
.bd-phone{position:absolute;right:3%;bottom:4%;width:23%}
.bd-cols{position:absolute;inset:0 3.2% 0;z-index:4;display:grid;grid-template-columns:repeat(12,1fr);gap:1.6%;pointer-events:none}
.bd-cols i{background:rgba(229,72,77,.09);border-inline:1px solid rgba(229,72,77,.22);transform-origin:top}
.bd-swatch{position:absolute;z-index:6;left:var(--sx,58%);top:var(--sy,30%);display:flex;align-items:center;gap:4px;padding:6px 10px 6px 6px;border-radius:999px;background:#16213E;color:#fff;font-size:12px;font-weight:600;box-shadow:0 10px 24px -10px rgba(22,33,62,.6)}
.bd-swatch i{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 1.5px #fff}
.bd-swatch span{margin-left:4px;white-space:nowrap}
.bd-cur{position:absolute;z-index:7;left:0;top:0;display:flex;align-items:flex-start;gap:2px;transform:translate(var(--cx,60%),var(--cy,70%));transition:transform .7s cubic-bezier(.65,0,.35,1);pointer-events:none}
.bd-canvas .bd-cur{transform:none;left:var(--cx,60%);top:var(--cy,70%);transition:left .7s cubic-bezier(.65,0,.35,1),top .7s cubic-bezier(.65,0,.35,1)}
.bd-cur svg{width:20px;height:20px}
.bd-cur span{margin-top:14px;background:#2F5BEA;color:#fff;font-size:11px;font-weight:700;padding:3px 7px;border-radius:6px 6px 6px 2px}
.bd-cur.tap svg{animation:bd-tap .35s ease}
@keyframes bd-tap{50%{transform:scale(.8)}}
.bd-live{position:absolute;z-index:6;left:6%;bottom:6%;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#fff;font-size:13px;font-weight:700;box-shadow:0 0 0 1px rgba(22,33,62,.12),0 12px 28px -14px rgba(22,33,62,.5)}
.bd-live i{width:8px;height:8px;border-radius:50%;background:#1F9D55;box-shadow:0 0 0 4px rgba(31,157,85,.18)}
.bd-hud{margin-top:16px;padding-left:18px}
.bd-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;position:relative}
.bd-steps li{position:relative;padding-top:12px;font-size:.8125rem;line-height:1.25;color:var(--mute)}
.bd-steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:rgba(22,33,62,.12)}
.bd-steps li::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.bd-steps li.on::after{transform:scaleX(1)}
.bd-steps li.on{color:var(--ink)}
.bd-steps .num{display:block;font-weight:700;color:var(--blue);font-size:.75rem}
.bd-steps b{display:block;font-size:.9375rem}
.bd-steps small{display:block;font-size:.75rem}
.bd-ctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:14px}
.bd-now{margin:0;font-size:.9375rem}
.bd-now a{font-weight:700}
.bd-chips{display:flex;flex-wrap:wrap;gap:6px}
.bd-chip,.bd-pause{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(22,33,62,.22);background:#fff;font-weight:600;font-size:.875rem}
.bd-chip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.bd-pause{border-color:var(--ink)}
.bd-pause[aria-pressed=true]{background:var(--mist)}
/* kurulum adımları (yalnız hareket modunda gizli başlar) */
html.mo .bd-st .dv-br,html.mo .bd-st .dv-ph,html.mo .bd-st .bd-cols i,html.mo .bd-st .bd-swatch,html.mo .bd-st .bd-live,html.mo .bd-st .bd-cur{transition:opacity .5s,transform .7s cubic-bezier(.22,1,.36,1),left .7s cubic-bezier(.65,0,.35,1),top .7s cubic-bezier(.65,0,.35,1)}
html.mo .bd-st[data-b="0"] .dv-br{opacity:0;transform:scale(.97)}
html.mo .bd-st[data-b="0"] .bd-cur{opacity:0}
html.mo .bd-st:not([data-b="1"]):not([data-b="2"]) .bd-cols i{transform:scaleY(0);opacity:0}
html.mo .bd-st[data-b="1"] .bd-cols i,html.mo .bd-st[data-b="2"] .bd-cols i{transition-delay:calc(var(--n,0) * 25ms)}
html.mo .bd-st:not([data-b="5"]) .dv-ph{opacity:0;transform:translate(30%,12%) rotate(6deg)}
html.mo .bd-st:not([data-b="5"]) .bd-live{opacity:0;transform:translateY(10px)}
html.mo .bd-st:not([data-b="3"]):not([data-b="4"]) .bd-swatch{opacity:0;transform:scale(.8)}
html.mo .bd-st:not([data-b="5"]) .dv-br{box-shadow:0 0 0 1px rgba(22,33,62,.18)}
html.mo .bd-st:is([data-b="0"],[data-b="1"]) .dv-url{color:transparent}
html.mo .bd-st:is([data-b="0"],[data-b="1"],[data-b="2"]) .bd-desk .mq{--bg:#fff!important;--ink:#1D1D1F!important;--mu:#6B6B70!important;--ac:#D9D9DE!important;--on:#1D1D1F!important;--pop:#EDEDF0!important;--act:#1D1D1F!important;--card:#F4F4F6!important}
html.mo .bd-st:is([data-b="0"],[data-b="1"]) .bd-desk .mq :is(.mq-eb,.mq-h,.mq-p,.mq-nm,.mq-links i,.mq-cta,.mq-b1,.mq-b2,.mq-it){color:transparent;background:#E9E9EC;border-color:transparent;border-radius:.35em;box-shadow:none}
html.mo .bd-st:is([data-b="0"],[data-b="1"]) .bd-desk .mq :is(.mq-h em,.mq-it *){color:transparent;background:none}
html.mo .bd-st:is([data-b="0"],[data-b="1"]) .bd-desk .mq-eb::before{opacity:0}
html.mo .bd-st[data-b="2"] .bd-desk .mq :is(.mq-eb,.mq-h,.mq-p,.mq-nm,.mq-b1,.mq-b2,.mq-it){animation:bd-type .7s cubic-bezier(.22,1,.36,1) both}
html.mo .bd-st[data-b="2"] .bd-desk .mq :is(.mq-h){animation-delay:.08s}html.mo .bd-st[data-b="2"] .bd-desk .mq :is(.mq-p){animation-delay:.16s}html.mo .bd-st[data-b="2"] .bd-desk .mq :is(.mq-b1,.mq-b2,.mq-it){animation-delay:.24s}
@keyframes bd-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
html.mo .bd-st:is([data-b="0"],[data-b="1"],[data-b="2"],[data-b="3"]) .bd-desk .mq-art,html.mo .bd-st:is([data-b="0"],[data-b="1"],[data-b="2"],[data-b="3"]) .bd-desk .mq-lg{opacity:0}
.mq .d{stroke-dasharray:1 1;stroke-dashoffset:0}
html.mo .bd-st[data-b="4"] .bd-desk .mq .d{animation:bd-draw 1.1s cubic-bezier(.65,0,.35,1) both}
html.mo .bd-st[data-b="4"] .bd-desk .mq-art{animation:bd-pop .6s cubic-bezier(.34,1.56,.64,1) both}
@keyframes bd-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes bd-pop{from{transform:scale(.85)}to{transform:none}}
html.mo .bd-st[data-b="5"] .dv-ph .mq{animation:bd-scroll 6s 1s ease-in-out both}
@keyframes bd-scroll{0%,10%{transform:none}55%,100%{transform:translateY(-22%)}}
html.mo .bd-st.out .bd-canvas>*{opacity:0!important;transform:translateY(-8px) scale(.98)!important;transition:opacity .35s,transform .35s!important}
.mq-stripes{animation:none}
html.mo .bd-st[data-b="5"] .mq-stripes{animation:bd-pole 2.4s linear infinite}
html.paused .mq-stripes,html.mo .bd-st.paused .mq-stripes{animation-play-state:paused}
@keyframes bd-pole{to{transform:translateY(-30px)}}

/* ================================================================ 2 · üç görünüm (lk) */
.lk__head{row-gap:12px;margin-bottom:clamp(32px,4vw,56px)}
.lk__box{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,4vw,64px);align-items:center}
.lk__stage{position:relative;padding:0 9% 6% 0}
.lk-desk{position:relative}
.lk-phone{position:absolute;right:0;bottom:0;width:24%}
.lk-code{position:absolute;left:-10px;top:-14px;z-index:3;background:var(--ink);color:#fff;font-weight:800;font-size:1.25rem;padding:8px 14px;border-radius:12px;font-variant-numeric:tabular-nums;box-shadow:0 10px 24px -12px rgba(22,33,62,.6)}
.lk-ghost{position:absolute;inset:0;z-index:2;pointer-events:none;clip-path:inset(0 0 0 0)}
.lk-ghost.go{clip-path:inset(0 0 0 100%);transition:clip-path .7s cubic-bezier(.65,0,.35,1)}
.lk-ghost::after{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;background:#2F5BEA;opacity:0}
.lk__lbl{font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
.lk__row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:22px}
.lk-b,.lk-c{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:56px;padding:10px 12px;border-radius:14px;border:1.5px solid rgba(22,33,62,.18);background:#fff;text-align:left;transition:border-color .2s,box-shadow .2s}
.lk-b b{font-size:1rem}.lk-b span{font-size:.8125rem;color:var(--mute)}
.lk-b[aria-pressed=true],.lk-c[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.lk-c{flex-direction:row;align-items:center;gap:10px}
.lk-c i{flex:none;width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 1px rgba(22,33,62,.2)}
.lk-c span{font-size:.8125rem;line-height:1.2;color:var(--mute)}.lk-c b{color:var(--ink);font-size:1rem}
.lk__out{font-size:1rem;margin:0 0 16px;min-height:3em}
.lk__out span{color:var(--mute)}
.lk__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-bottom:14px}

/* ================================================================ 3 · QR menü (qm) */
.qm__grid{align-items:center;row-gap:40px}
.qm-table{position:relative;aspect-ratio:700/560;border-radius:28px;overflow:hidden;background:#E3ECEA;box-shadow:inset 0 0 0 1px rgba(22,33,62,.08)}
.qm-tbl{position:absolute;inset:0;width:100%;height:100%}
.qm-card{position:absolute;left:9%;top:12%;width:27%;padding:3% 2.4% 2.4%;background:#fff;border-radius:14px;text-align:center;transform:rotate(-4deg);box-shadow:0 2px 0 rgba(22,33,62,.06),0 24px 40px -20px rgba(22,33,62,.45)}
.qm-card__b{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 8%;font-size:clamp(9px,1vw,13px);font-weight:700;color:#1C1C1C}
.qm-card__b svg{width:18px;height:18px}
.qm-code{width:84%;margin:0 auto}
.qm-card__t{margin:8% 0 0;font-size:clamp(9px,1.05vw,14px);font-weight:700;color:#1C1C1C}
.qm-card__s{margin:0;font-size:clamp(8px,.85vw,11px);color:#4A4F4E}
.qm-owner{position:absolute;left:5%;bottom:7%;width:34%;padding:2.2%;background:#16213E;color:#fff;border-radius:14px;font-size:clamp(9px,1vw,13px);box-shadow:0 20px 40px -20px rgba(22,33,62,.7)}
.qm-owner__h{display:flex;align-items:center;gap:6px;margin:0 0 8px;color:#B9C4E8;font-weight:600}
.qm-owner__h i{width:7px;height:7px;border-radius:50%;background:#6B93FF}
.qm-owner__r{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 8px}
.qm-field{position:relative;display:inline-block;overflow:hidden;height:1.6em;min-width:3.6em;padding:0 .5em;border-radius:6px;background:#fff;color:#16213E;font-weight:700;line-height:1.6em;text-align:right}
.qm-field span{display:block;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.qm-save{display:inline-block;padding:4px 12px;border-radius:999px;background:#2F5BEA;font-weight:700}
.qm-phone{position:absolute;right:16%;bottom:-2%;width:27%;background:#16213E;border-radius:24px;padding:6px;box-shadow:0 30px 50px -20px rgba(22,33,62,.7)}
.qm-scr{position:relative;aspect-ratio:9/18.5;border-radius:19px;overflow:hidden;background:#111}
.qm-cam{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#5d6866,#1b2120 70%)}
.qm-cam__code{width:56%;border-radius:4px}
.qm-vf{position:absolute;left:50%;top:50%;width:66%;aspect-ratio:1;transform:translate(-50%,-50%);background:
  linear-gradient(#FFD23F,#FFD23F) left top/18% 3px no-repeat,linear-gradient(#FFD23F,#FFD23F) left top/3px 18% no-repeat,
  linear-gradient(#FFD23F,#FFD23F) right top/18% 3px no-repeat,linear-gradient(#FFD23F,#FFD23F) right top/3px 18% no-repeat,
  linear-gradient(#FFD23F,#FFD23F) left bottom/18% 3px no-repeat,linear-gradient(#FFD23F,#FFD23F) left bottom/3px 18% no-repeat,
  linear-gradient(#FFD23F,#FFD23F) right bottom/18% 3px no-repeat,linear-gradient(#FFD23F,#FFD23F) right bottom/3px 18% no-repeat}
.qm-scan{position:absolute;left:22%;right:22%;top:30%;height:2px;background:#FFD23F;box-shadow:0 0 12px #FFD23F;opacity:0}
.qm-pill{position:absolute;left:8%;right:8%;bottom:10%;margin:0;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.92);color:#16213E;font-size:clamp(7px,.75vw,10px);font-weight:700;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qm-menu{position:absolute;inset:0;background:#E9F3F1;color:#1C1C1C;padding:16% 7% 6%;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:clamp(7px,.78vw,11px)}
.qm-menu p{margin:0}
.qm-menu__h{display:flex;align-items:center;gap:5px;font-family:'Young Serif',Georgia,serif;font-size:1.5em;margin-bottom:6%!important}
.qm-menu__h svg{width:1.4em;height:1.4em}
.qm-tabs{display:flex;gap:4px;margin-bottom:6%!important}
.qm-tabs span{padding:3px 7px;border-radius:999px;border:1px solid rgba(28,28,28,.3);font-weight:600}
.qm-tabs .on{background:#1C1C1C;color:#fff;border-color:#1C1C1C}
.qm-sec{font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.8em;color:#4A4F4E;margin:6% 0 2%!important}
.qm-it{display:flex;justify-content:space-between;gap:6px;padding:4.5% 0;border-bottom:1px solid rgba(28,28,28,.12)}
.qm-it em{position:relative;font-style:normal;font-weight:700;color:#C81E35;overflow:hidden;height:1.35em;line-height:1.35em}
.qm-it em span{display:block;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.qm-new{position:absolute;right:0;top:0;transform:translateY(110%)}
.qm-field .qm-new{right:.5em}
.qm-it[data-roll]{border-radius:4px;transition:background-color .4s}
.qm-toast{position:absolute;left:50%;top:5%;margin:0;transform:translate(-50%,-160%);padding:5px 10px;border-radius:999px;background:#1F9D55;color:#fff;font-size:clamp(7px,.75vw,10px);font-weight:700;white-space:nowrap;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.qm-tables{position:absolute;right:3%;top:5%;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.qm-tables span{padding:4px 10px;border-radius:999px;background:#fff;color:#16213E;font-size:clamp(9px,.9vw,12px);font-weight:700;box-shadow:0 6px 14px -8px rgba(22,33,62,.5);transition:background-color .3s,color .3s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.qm-tables span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#C9D3EE;margin-right:6px;vertical-align:middle}
.qm-try{display:flex;align-items:center;gap:18px;margin:28px 0 20px;padding:14px;border-radius:18px;background:var(--paper)}
.qm-real{flex:none;width:112px;height:112px}
.qm-try__h{font-weight:700;margin:0 0 4px}
.qm-try .fn{margin:0}
.qm-ctl{display:flex;align-items:center;gap:14px;margin-top:20px}
.qm-ctl .fn{margin:0}
/* QR durumları: data-q 0 başlangıç → 6 son; son hal = menü açık, fiyat güncel */
.qm-phone,.qm-vf,.qm-scan,.qm-pill,.qm-menu,.qm-it{transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .4s}
html.mo .qm-table:not([data-q]) .qm-phone,html.mo .qm-table[data-q="0"] .qm-phone{transform:translateY(105%) rotate(-12deg)}
html.mo .qm-table[data-q="1"] .qm-phone{transform:translateY(-6%) rotate(-5deg)}
html.mo .qm-table:is([data-q="0"],[data-q="1"]) .qm-vf{transform:translate(-50%,-50%) scale(1.35);opacity:.5}
html.mo .qm-table:is(:not([data-q]),[data-q="0"],[data-q="1"],[data-q="2"]) .qm-pill{opacity:0;transform:translateY(8px)}
html.mo .qm-table[data-q="2"] .qm-scan{animation:qm-scan .8s ease-in-out both}
@keyframes qm-scan{0%{opacity:1;top:24%}100%{opacity:1;top:72%}}
html.mo .qm-table:is(:not([data-q]),[data-q="0"],[data-q="1"],[data-q="2"],[data-q="3"]) .qm-menu{transform:translateY(102%)}
html.mo .qm-table:is([data-q="2"],[data-q="3"]) .qm-phone{transform:translateY(-6%) rotate(0)}
html.mo .qm-table:is([data-q="4"],[data-q="5"],[data-q="6"]) .qm-phone{transform:translateY(-6%)}
.qm-table:not([data-q]) .qm-phone{transform:translateY(-6%)}
html.mo .qm-table[data-q="4"] .qm-it{animation:qm-in .5s cubic-bezier(.22,1,.36,1) both}
html.mo .qm-table[data-q="4"] .qm-it:nth-of-type(n+3){animation-delay:.08s}
@keyframes qm-in{from{opacity:0;transform:translateY(10px)}}
.qm-table[data-q="5"] .qm-field .qm-old,.qm-table[data-q="6"] .qm-field .qm-old{transform:translateY(-110%)}
.qm-table[data-q="5"] .qm-field .qm-new,.qm-table[data-q="6"] .qm-field .qm-new{transform:none}
.qm-table[data-q="5"] .qm-save{animation:bd-tap .35s ease}
.qm-table:is(:not([data-q]),[data-q="6"]) [data-roll] .qm-old{transform:translateY(-110%)}
.qm-table:is(:not([data-q]),[data-q="6"]) [data-roll] .qm-new{transform:none}
.qm-table[data-q="6"] [data-roll]{background:#FFF3C4}
.qm-table[data-q="6"] .qm-toast{transform:translate(-50%,0)}
.qm-table[data-q="6"] .qm-tables span{background:#1F9D55;color:#fff;transform:translateX(-4px)}
.qm-table[data-q="6"] .qm-tables span::before{background:#fff}
.qm-table[data-q="6"] .qm-tables span:nth-child(2){transition-delay:.12s}.qm-table[data-q="6"] .qm-tables span:nth-child(3){transition-delay:.24s}.qm-table[data-q="6"] .qm-tables span:nth-child(4){transition-delay:.36s}
.qm-table:not([data-q]) .qm-field .qm-old{transform:translateY(-110%)}.qm-table:not([data-q]) .qm-field .qm-new{transform:none}

/* ================================================================ 4 · logo kiti (lg) */
.lg__head{row-gap:12px;margin-bottom:clamp(32px,4vw,56px)}
.lg__box{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto;gap:18px}
.lg-board{position:relative;grid-row:1/3;aspect-ratio:1;border-radius:28px;background:#fff;box-shadow:inset 0 0 0 1px rgba(22,33,62,.12);display:grid;place-items:center;overflow:hidden}
.lg-guide{position:absolute;left:50%;top:44%;width:62%;transform:translate(-50%,-50%);overflow:visible}
.lg-main{position:absolute;left:50%;top:44%;width:52%;transform:translate(-50%,-50%)}
.lg-mk{display:block;width:100%;height:auto;overflow:visible}
.lg-word{position:absolute;left:0;right:0;bottom:12%;text-align:center;font:700 clamp(14px,1.9vw,26px)/1 'Hanken Grotesk',var(--sans);letter-spacing:.32em;color:#1C1C1C;padding-left:.32em}
.lg-word span{display:inline-block}
.lg-spec{position:absolute;left:5%;bottom:4%;right:5%;display:flex;justify-content:center;gap:14px;margin:0;font-size:.75rem;color:var(--mute);font-variant-numeric:tabular-nums}
.lg-spec span{display:flex;align-items:center;gap:5px}
.lg-spec i{width:10px;height:10px;border-radius:3px;box-shadow:0 0 0 1px rgba(22,33,62,.2)}
.lg-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lg-t{position:relative;margin:0;aspect-ratio:1/1;border-radius:22px;background:#E9F3F1;overflow:hidden}
.lg-t:nth-child(2n){background:#F3EFE7}
.lg-t>svg{position:absolute;inset:6% 6% 14%;width:88%;height:80%}
.lg-t figcaption{position:absolute;left:12px;bottom:10px;font-size:.75rem;font-weight:600;color:var(--mute)}
.lg-at{position:absolute;transform:translate(-50%,-50%);display:block}
.lg-t>svg{inset:4% 6% 14%}
.lg-at{margin-top:-5%}
.lg-vers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.lg-vers li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px rgba(22,33,62,.1);font-size:.8125rem;font-weight:600}
.lg-v{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:#fff}
.lg-v .lg-mk{width:34px}
.lg-v--mono .lg-c{fill:#1C1C1C}
.lg-v--rev{background:#C81E35}.lg-v--rev .lg-c{fill:#fff}.lg-v--rev path{stroke:#C81E35}
.lg-v--fav{background:#F1F2F5}.lg-v--fav .lg-mk{width:18px}
.lg__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:22px}
.lg__foot .fn{margin:0}
.lg .d{stroke-dasharray:1 1}
/* oynatma (≤ 4,6 sn, bir kez; Replay) */
html.mo .lg__box:not(.play):not(.done) :is(.lg-guide .d,.lg-cup,.lg-st){stroke-dashoffset:1}
html.mo .lg__box:not(.play):not(.done) :is(.lg-main .lg-c,.lg-word span,.lg-at,.lg-vers li,.lg-spec){opacity:0}
html.mo .lg__box.play .lg-guide .d{animation:bd-draw .9s cubic-bezier(.65,0,.35,1) both,lg-fade .6s 2.6s both}
html.mo .lg__box.play .lg-main .lg-c{animation:lg-c .6s .55s cubic-bezier(.34,1.56,.64,1) both;transform-origin:50% 50%}
html.mo .lg__box.play .lg-main .lg-cup{animation:bd-draw .8s 1s cubic-bezier(.65,0,.35,1) both}
html.mo .lg__box.play .lg-main .lg-st{animation:bd-draw .5s 1.6s cubic-bezier(.65,0,.35,1) both}
html.mo .lg__box.play .lg-word span{animation:lg-l .4s calc(1.8s + var(--i) * 45ms) cubic-bezier(.22,1,.36,1) both}
html.mo .lg__box.play .lg-spec{animation:lg-l .5s 2.5s both}
html.mo .lg__box.play .lg-at{animation:lg-stamp .5s calc(2.7s + var(--k,0) * 150ms) cubic-bezier(.34,1.56,.64,1) both}
html.mo .lg__box.play .lg-t:nth-child(1) .lg-at{--k:0}html.mo .lg__box.play .lg-t:nth-child(2) .lg-at{--k:1}html.mo .lg__box.play .lg-t:nth-child(3) .lg-at{--k:2}html.mo .lg__box.play .lg-t:nth-child(4) .lg-at{--k:3}html.mo .lg__box.play .lg-t:nth-child(5) .lg-at{--k:4}html.mo .lg__box.play .lg-t:nth-child(6) .lg-at{--k:5}
html.mo .lg__box.play .lg-vers li{animation:lg-l .45s calc(3.7s + var(--k,0) * 90ms) both}
.lg-vers li:nth-child(2){--k:1}.lg-vers li:nth-child(3){--k:2}.lg-vers li:nth-child(4){--k:3}
@keyframes lg-c{from{transform:scale(0)}}
@keyframes lg-l{from{opacity:0;transform:translateY(8px)}}
@keyframes lg-fade{to{opacity:.25}}
@keyframes lg-stamp{0%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.lg__box.done .lg-guide,.static .lg-guide{opacity:.25}

/* ================================================================ 5 · sosyal set (so) */
.so__grid{align-items:center;row-gap:40px}
.so__stage{position:relative;padding-bottom:4%}
.so-prof{position:relative;width:min(100%,560px);margin-left:auto;margin-right:8%;background:#fff;border-radius:24px;box-shadow:0 0 0 1px rgba(22,33,62,.12),0 40px 70px -40px rgba(22,33,62,.5);overflow:hidden}
.so-cover svg{display:block;width:100%;height:auto}
.so-cover__t{font:400 13px 'Young Serif',Georgia,serif;fill:#1C1C1C}
.so-id{display:flex;gap:14px;align-items:flex-end;padding:0 18px 14px;margin-top:-34px}
.so-av{flex:none;width:76px;height:76px;border-radius:50%;background:#fff;padding:4px;box-shadow:0 0 0 1px rgba(22,33,62,.12)}
.so-id b{display:block;font-size:1.05rem}
.so-id small{display:block;font-size:.8125rem;color:var(--mute);line-height:1.35}
.so-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:0 4px 4px}
.so-p{position:relative;aspect-ratio:4/5;padding:9%;display:flex;flex-direction:column;justify-content:flex-end;background:#E9F3F1;color:#1C1C1C;overflow:hidden;font-family:'Hanken Grotesk',var(--sans)}
.so-p--b,.so-p--e{background:#C81E35;color:#fff}.so-p--c,.so-p--f{background:#1C1C1C;color:#fff}.so-p--d{background:#F4E6D6}
.so-p__e{font-size:clamp(8px,.8vw,11px);font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.so-p b{font:400 clamp(12px,1.35vw,20px)/1.05 'Young Serif',Georgia,serif;margin:4px 0}
.so-p small{font-size:clamp(7px,.75vw,10px);opacity:.85;line-height:1.3}
.so-mk{position:absolute;right:8%;top:8%;width:22%}
.so-p--b .so-mk .lg-c,.so-p--e .so-mk .lg-c{fill:#fff}.so-p--b .so-mk path,.so-p--e .so-mk path{stroke:#C81E35}
.so-lbl{margin:0;padding:10px 16px;font-size:.75rem;color:var(--mute);border-top:1px solid var(--line)}
.so-files{position:absolute;left:0;bottom:0;width:44%;max-width:250px;background:#16213E;color:#fff;border-radius:18px;padding:12px;box-shadow:0 30px 50px -24px rgba(22,33,62,.7)}
.so-files li{display:grid;grid-template-columns:22px 1fr;column-gap:8px;padding:6px 4px;font-size:.75rem;border-bottom:1px solid rgba(255,255,255,.1)}
.so-files li:last-child{border:0}
.so-files b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.so-files small{grid-column:2;color:#B9C4E8}
.so-ic{grid-row:1/3;width:20px;height:24px;border-radius:4px;background:#6B93FF;align-self:center}
html.mo .so__stage:not(.play):not(.done) :is(.so-p,.so-files li,.so-av,.so-cover){opacity:0}
html.mo .so__stage.play .so-cover{animation:so-cov .7s cubic-bezier(.22,1,.36,1) both}
html.mo .so__stage.play .so-av{animation:lg-c .55s .35s cubic-bezier(.34,1.56,.64,1) both}
html.mo .so__stage.play .so-p{animation:so-fly .9s calc(.5s + var(--k) * 120ms) cubic-bezier(.22,1,.36,1) both}
html.mo .so__stage.play .so-files li{animation:lg-l .4s calc(1.9s + var(--k) * 110ms) both}
.so-p:nth-child(1){--fx:-140%;--fy:-60%;--fr:-14deg}.so-p:nth-child(2){--fx:30%;--fy:-120%;--fr:10deg}.so-p:nth-child(3){--fx:150%;--fy:-40%;--fr:18deg}
.so-p:nth-child(4){--fx:-160%;--fy:40%;--fr:12deg}.so-p:nth-child(5){--fx:-20%;--fy:130%;--fr:-10deg}.so-p:nth-child(6){--fx:140%;--fy:90%;--fr:-16deg}
@keyframes so-fly{from{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(var(--fr)) scale(1.15)}60%{opacity:1}to{opacity:1;transform:none}}
@keyframes so-cov{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}

/* ================================================================ 6 · vaka dosyaları (cf) */
.cf__head{row-gap:12px;margin-bottom:28px}
.cf-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.cf-tabs button{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid rgba(22,33,62,.22);background:#fff;font-weight:600}
.cf-tabs button[aria-selected=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.cf-p{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3.4fr);gap:clamp(18px,2.4vw,36px);align-items:start}
.cf-n{display:flex;align-items:baseline;gap:8px;margin:0 0 14px;font-weight:700;font-size:.9375rem}
.cf-n .num{color:var(--blue)}
.cf-n__s{font-weight:700}
.cf-note{position:relative;background:#FFF8DA;padding:18px 18px 16px;border-radius:4px 4px 18px 4px;transform:rotate(-1.2deg);box-shadow:0 18px 30px -22px rgba(22,33,62,.45);font-size:.9375rem;line-height:1.5}
.cf-note::before{content:"";position:absolute;left:50%;top:-9px;width:64px;height:18px;margin-left:-32px;background:rgba(107,147,255,.35);transform:rotate(2deg)}
.cf-note__h{font-weight:700;margin:0 0 8px}.cf-note__h span{font-weight:500;color:var(--mute);font-size:.8125rem}
.cf-note ul{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.cf-note li{font-size:.75rem;font-weight:600;padding:3px 9px;border-radius:999px;background:rgba(22,33,62,.07)}
.cf-note--big{font-size:1.125rem;padding:28px;transform:rotate(-.6deg)}
.cf-dirs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cf-dir{position:relative;margin:0;transition:opacity .5s,transform .6s cubic-bezier(.22,1,.36,1)}
.cf-dir figcaption{margin-top:10px;font-size:.8125rem;line-height:1.35}
.cf-dir figcaption b{display:block;font-size:.875rem}
.cf-dir figcaption span{display:flex;align-items:center;gap:3px;color:var(--mute);flex-wrap:wrap}
.cf-dir figcaption i{width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 1px rgba(22,33,62,.2)}
.cf-br .dv-bar{height:16px;padding:0 6px}.cf-br .dv-bar i{width:4px;height:4px}.cf-br .dv-url{height:9px;font-size:6px;line-height:9px}
.cf-pick{display:inline-block;margin-top:6px;font-style:normal;font-weight:700;font-size:.75rem;color:#fff;background:var(--blue);padding:2px 9px;border-radius:999px}
.cf-ring{position:absolute;left:-7%;top:-9%;width:114%;height:76%;pointer-events:none;overflow:visible}
.cf-ring path{stroke-dasharray:1 1}
.cf-why{margin:16px 0 0;font-size:.9375rem;color:var(--mute)}
.cf-res{position:relative;padding:0 14% 12% 0}
.cf-res__lap{display:block;border-radius:10px;overflow:hidden;aspect-ratio:16/11;box-shadow:0 0 0 1px rgba(22,33,62,.14),0 24px 40px -24px rgba(22,33,62,.5);background:#fff}
.cf-res__lap img{width:100%;height:auto}
.cf-res__ph{position:absolute;right:0;bottom:0;width:36%;border-radius:14px;overflow:hidden;border:4px solid #16213E;aspect-ratio:9/17;background:#fff;box-shadow:0 20px 30px -16px rgba(22,33,62,.6)}
.cf-res__ph img{width:100%;height:auto}
.cf-step--4 .btns{margin-top:14px;gap:8px}
.cf-replay{border:0;background:none;padding:0;font-weight:600;color:var(--blue);text-decoration:underline;cursor:pointer;min-height:auto}
html.mo [data-cf]:not(.play):not(.done) :is(.cf-note,.cf-dir,.cf-res,.cf-why){opacity:0}
html.mo [data-cf]:not(.play):not(.done) .cf-ring path{stroke-dashoffset:1}
html.mo [data-cf].play .cf-note{animation:cf-note .6s cubic-bezier(.22,1,.36,1) both}
html.mo [data-cf].play .cf-dir{animation:cf-dir .7s calc(.45s + var(--k) * 140ms) cubic-bezier(.22,1,.36,1) both}
html.mo [data-cf].play .cf-dir:not(.cf-dir--pick) .cf-dir__m{animation:cf-dim .5s 1.6s both}
html.mo [data-cf].play .cf-ring path{animation:bd-draw .7s 1.6s cubic-bezier(.65,0,.35,1) both}
html.mo [data-cf].play .cf-why{animation:lg-l .5s 2s both}
html.mo [data-cf].play .cf-res{animation:cf-res .8s 2.1s cubic-bezier(.22,1,.36,1) both}
[data-cf].done .cf-dir:not(.cf-dir--pick) .cf-dir__m,.static [data-cf] .cf-dir:not(.cf-dir--pick) .cf-dir__m{opacity:.55}
@keyframes cf-note{from{opacity:0;transform:translateY(20px) rotate(-6deg)}}
@keyframes cf-dir{from{opacity:0;transform:translateY(26px) rotate(calc((var(--k) - 1) * 4deg))}}
@keyframes cf-dim{to{opacity:.55}}
@keyframes cf-res{from{opacity:0;transform:translateY(30px)}}

/* ================================================================ 7 · 24 saat kadranı (ck) — kaydırmaya bağlı */
.ck{--p:1}
html.mo .ck{--p:0}
.ck__grid{align-items:center;row-gap:40px}
.ck-svg{width:100%;max-width:460px;height:auto;margin:0 auto}
.ck-arc{stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--p))}
.ck-hand{transform:rotate(calc(var(--p) * 360deg));transform-origin:100px 100px}
.ck-nums text{font-size:9px;font-weight:700}
.ck-dot{fill:#16213E;stroke:#6B93FF;stroke-width:2}
.ck-dot.on{fill:#6B93FF}
.ck-read{font-size:22px;font-weight:800;fill:#fff;font-variant-numeric:tabular-nums}
.ck-list{margin:28px 0 24px;display:grid;gap:4px}
.ck-i{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:12px 0;border-top:1px solid rgba(255,255,255,.12);opacity:.38;transition:opacity .4s}
.ck-i.on{opacity:.62}.ck-i.cur{opacity:1}
.ck-h{font-weight:800;color:var(--sky)}
.ck-i b{display:block}.ck-i span{color:#B9C4E8;font-size:.9375rem}
.ck-then{font-size:1.0625rem;margin:0 0 12px}
.ck .fn{color:#B9C4E8}
.static .ck-i,.ck.done .ck-i{opacity:1}

/* ================================================================ /work ve vaka sayfaları */
.cfcs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.cfc{display:flex;flex-direction:column;text-decoration:none;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px rgba(22,33,62,.12);overflow:hidden;transition:transform .3s var(--ease-out),box-shadow .3s}
.cfc:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(22,33,62,.2),0 24px 40px -28px rgba(22,33,62,.5)}
.cfc__img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--mist)}
.cfc__img img{width:100%;height:auto}
.cfc__b{display:flex;flex-direction:column;gap:4px;padding:16px}
.cfc__l{font-size:.75rem;font-weight:600;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.cfc b{font-size:1.125rem}
.cfc__s{font-size:.875rem;color:var(--blue-d);font-weight:600}
.cfx-top .eyebrow a{color:inherit}
.cfx-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:32px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.cfx-facts dt{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.cfx-facts dd{margin:4px 0 0;font-weight:600}
.cfx .cf-n{font-size:1rem}
.cf-dirs--big{margin-top:36px;gap:24px}
.cf-dirs--big .cf-br .dv-bar{height:22px}.cf-dirs--big .cf-br .dv-url{height:13px;font-size:8px;line-height:13px}
.cfx-b .fn{margin-top:18px}
.cfx-sw{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:24px 0 12px}
.cfx-sw li{display:flex;flex-direction:column;gap:6px;font-size:.8125rem}
.cfx-sw i{display:block;height:56px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(22,33,62,.15)}
.cfx-sw code{font-size:.75rem;color:var(--mute)}
.cfx-built{margin-top:20px}.cfx-built li{padding:10px 0 10px 26px;position:relative;border-top:1px solid rgba(255,255,255,.14)}
.cfx-built li::before{content:"";position:absolute;left:0;top:18px;width:12px;height:2px;background:var(--sky)}
.cfx-more{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px}
.cfx-more a{display:flex;flex-direction:column;min-height:44px;padding:14px 16px;border-radius:16px;background:#fff;text-decoration:none;font-weight:700;box-shadow:inset 0 0 0 1px rgba(22,33,62,.12)}
.cfx-more span{font-weight:500;font-size:.875rem;color:var(--mute)}
.sec--ink .cf-n .num{color:var(--sky)}

/* ================================================================ duyarlı */
@media (max-width:1100px){
  .cf-p{grid-template-columns:1fr 1fr}.cf-step--2{grid-column:1/-1;grid-row:2}
  .cfcs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1023px){
  .bd__grid{grid-template-columns:1fr}
  .lk__box{grid-template-columns:1fr}
  .lg__box{grid-template-columns:1fr}.lg-board{grid-row:auto;aspect-ratio:4/3}
}
@media (max-width:760px){
  .bd{padding-top:calc(var(--hdr) + 8px)}
  .bd__grid{display:flex;flex-direction:column;gap:0}
  .bd__copy{display:contents}
  .bd__copy .eyebrow{order:1;margin-bottom:12px}
  .bd__h{order:2;font-size:clamp(2.1rem,1.2rem + 4.6vw,2.6rem)}
  .bd__stage{order:3;margin-top:18px;width:100%}
  .bd__btns{order:4;margin-top:20px}
  .bd__lead{order:5}.bd__trust{order:6}.bd__fn{order:7}
  .bd-st{padding:12px 0 0 12px}.bd-rul--x{left:12px;height:8px}.bd-rul--y{top:12px;width:8px}
  .bd-canvas{aspect-ratio:16/12.4;border-radius:14px}
  .bd-desk{left:3%;top:5%;width:80%}.bd-phone{width:27%;right:2.5%}
  .dv-bar{height:18px;padding:0 7px}.dv-bar i{width:5px;height:5px}.dv-url{height:11px;font-size:7px;line-height:11px}
  .dv-ph{border-radius:14px;padding:4px}.dv-ph .dv-scr--ph{border-radius:11px}.dv-notch{top:7px;height:5px}
  .bd-live{font-size:11px;padding:5px 10px}.bd-swatch{font-size:10px}.bd-swatch i{width:12px;height:12px}.bd-cur span{font-size:9px}
  .bd-hud{padding-left:12px}
  .bd-steps{gap:5px}.bd-steps small{display:none}.bd-steps b{font-size:.75rem}
  .bd-ctl{flex-direction:column;align-items:flex-start}
  .bd-chips{gap:6px}.bd-chip,.bd-pause{padding:0 12px}
  .lk__row{grid-template-columns:1fr 1fr 1fr;gap:6px}.lk-b,.lk-c{padding:8px}
  .lk-c{flex-direction:column;align-items:flex-start}.lk-c i{width:24px;height:24px}
  .lk-code{font-size:1rem;left:0;top:-10px}
  .qm__stage,.qm__txt{grid-column:1/-1}
  .qm-table{aspect-ratio:7/6.4;border-radius:20px}
  .qm-card{width:36%;left:5%;top:8%}.qm-owner{width:48%;left:4%;bottom:5%}.qm-phone{width:36%;right:6%;border-radius:16px;padding:4px}.qm-scr{border-radius:12px}
  .qm-tables{display:none}
  .lg-tiles{grid-template-columns:repeat(3,1fr);gap:8px}.lg-t{border-radius:14px}.lg-t figcaption{font-size:.625rem;left:8px;bottom:6px}
  .lg-vers{grid-template-columns:1fr 1fr;gap:8px}
  .so__txt,.so__stage{grid-column:1/-1}
  .so-prof{margin-right:0}.so-files{position:relative;width:auto;max-width:none;margin-top:14px}
  .cf-p{grid-template-columns:1fr}.cf-step--2{grid-row:auto}
  .cf-dirs{gap:8px}.cf-dir figcaption{font-size:.6875rem}.cf-dir figcaption b{font-size:.75rem}
  .ck__dial,.ck__txt{grid-column:1/-1}.ck-svg{max-width:300px}
  .cfcs{grid-template-columns:1fr}
  .cfx-facts{grid-template-columns:1fr 1fr}.cfx-sw{grid-template-columns:repeat(2,1fr)}
  .cf-dirs--big{grid-template-columns:1fr;gap:28px}
  .cfx-more{grid-template-columns:1fr}
  .lk__head>*,.lg__head>*,.cf__head>*{grid-column:1/-1!important}
}
@media (max-width:1023px) and (min-width:761px){.qm__stage,.qm__txt,.so__txt,.so__stage{grid-column:1/-1}.ck__dial,.ck__txt{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.mq *,.mq{transition:none!important}.lk-ghost{display:none}}
.static [data-lg-replay],.static [data-so-replay],.static [data-cf-replay],.static .bd-pause,.static [data-lk-pause],.static [data-qm-pause]{display:none}

/* düzeltmeler 1 (ekran görüntüsü turu) */
.qm-it em,.qm-it em span{font-family:inherit}
.cf-pick{font-family:var(--sans)}
.qm__txt .lead,.so__txt .lead{margin-top:24px}
.qm-toast{opacity:0;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s}
.qm-table[data-q="6"] .qm-toast{opacity:1}
.qm-toast{top:2.4%}
html.mo .so__stage:not(.play):not(.done) .so-files{opacity:0}
html.mo .so__stage.play .so-files{animation:lg-l .5s 1.7s both}
.mq-svg{position:relative}
.cfx-top .eyebrow a{display:inline-block;padding:12px 0;margin:-12px 0}

/* ================= düzeltme turu 2 (patron anketi, 2026-11-06) */
/* geç font: örnek fontları yalnız .fl (sahne yaklaşınca JS ekler; hero baştan) altında kullanılır -> indirme de o an başlar */
.mq{font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.mq .mq-nm,.mq .mq-h,.mq .mq-ini{font-family:Georgia,serif}
.fl .mq{font-family:var(--fb)}
.fl .mq .mq-nm,.fl .mq .mq-h,.fl .mq .mq-ini{font-family:var(--fh)}
/* uzun işletme adı: maket gezinme satırında taşma yok */
.mq-nav{min-width:0}
.mq-nm{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
.mq-cta{flex:none}.mq-links{flex:none}
@container ph (max-width:420px){
  .mq-nav{gap:.6em}.mq-lg{width:2.1em;height:2.1em}
  .mq-nm{font-size:1em;flex:1 1 auto}.mq--bold .mq-nm{font-size:.9em}
  .mq-cta{font-size:.78em;padding:.5em .8em}
}
/* hareket azaltma / static: ızgara ve palet çipi son karede görünmez */
.bd-st:not([data-b="1"]):not([data-b="2"]) .bd-cols i{opacity:0}
.bd-st:not([data-b="3"]):not([data-b="4"]) .bd-swatch{opacity:0}
/* Nine looks: sağ kolon üstten başlar */
.lk__box{align-items:start}
.lk__ctl{padding-top:8px}
@media (min-width:1024px){.lk__head{margin-bottom:40px}.lk__ctl{padding-top:24px}}
.so-note{margin:0;padding:10px 16px 0;font-size:.8125rem;font-weight:600;color:var(--ink)}
@container ph (max-width:420px){.mq{padding-top:1.5em}}
@media (max-width:760px){.lk__stage{padding-bottom:14%}.lk-code{top:auto;bottom:0;left:0}}

/* ===== fiyat modeli v19 (K76, 2026-11-06): Build your bundle (pricing), ana sayfa bölümü, services notu, Coming soon ===== */
.bnd{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);gap:clamp(24px,4vw,56px);align-items:start;margin-top:8px}
.bnd__fs{border:0;margin:0;padding:0;min-width:0}
.bnd__fs legend{padding:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bnd__fs--care{margin-top:40px}
.bnd__help{margin:8px 0 18px}
.bnd__items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.bnd__item{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;column-gap:14px;row-gap:6px;align-items:start;min-height:100%;padding:20px 20px 22px;border:2px solid var(--line);border-radius:var(--r-m);background:var(--white);cursor:pointer;transition:border-color .2s,background-color .2s,box-shadow .2s}
.bnd__item:hover{border-color:rgba(47,91,234,.55)}
.bnd__cb{position:absolute;opacity:0;width:28px;height:28px;left:20px;top:20px;margin:0;cursor:pointer}
.bnd__box{grid-row:1;grid-column:1;width:28px;height:28px;border:2px solid var(--ink);border-radius:8px;background:var(--white);display:grid;place-items:center;transition:background-color .2s,border-color .2s}
.bnd__box::after{content:"";width:12px;height:7px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.bnd__n{grid-column:2;font-weight:700;font-size:1.0625rem;line-height:1.3;padding-top:2px}
.bnd__p{grid-column:3;grid-row:1;font-weight:800;font-size:1.25rem;line-height:1.2}
.bnd__d{grid-column:2/-1;color:var(--mute);font-size:.9375rem;line-height:1.45}
.bnd__x{grid-column:2/-1;font-size:.8125rem;font-weight:600;color:var(--blue-d)}
.bnd__cb:checked~.bnd__box{background:var(--blue);border-color:var(--blue)}
.bnd__cb:checked~.bnd__box::after{opacity:1}
.bnd__item:has(.bnd__cb:checked){border-color:var(--blue);background:var(--mist)}
.bnd__cb:focus-visible~.bnd__box{outline:3px solid var(--blue);outline-offset:3px}
.bnd__cares{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.bnd__care{display:flex;flex-direction:column;gap:8px}
.bnd__care label{font-weight:700}
.bnd__need{display:block;font-weight:400;font-size:.875rem;color:var(--mute)}
.bnd__sel{font-size:1rem;min-height:52px;padding:0 44px 0 16px;border:2px solid var(--ink);border-radius:var(--r-s);background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5 5 7l3.5-3.5' fill='none' stroke='%2316213E' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center/12px;-webkit-appearance:none;appearance:none;color:var(--ink);width:100%}
.bnd__care.is-off{opacity:.62}
.bnd__care.is-off .bnd__sel{cursor:not-allowed;border-color:var(--mute)}
.bnd__nod{font-size:.8125rem}
.bnd__sum{position:sticky;top:calc(var(--hdr) + 20px);background:var(--ink);color:#fff;border-radius:var(--r-l);padding:clamp(24px,3vw,36px)}
.bnd__sum .h3{color:#fff}
.bnd__sum .fn{color:#C9D3EE;margin:14px 0 0}
.bnd__empty{margin:14px 0 0;color:#C9D3EE}
.bnd__lines{margin:16px 0 0}
.bnd__lines li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:.9375rem}
.bnd__lines li.is-care{color:#DCE3F7}
.bnd__nd{font-style:normal;font-family:var(--sans);font-size:.75rem;font-weight:600;color:#B9C4E8;margin-left:6px;white-space:nowrap}
.bnd__dl{margin:14px 0 0}
.bnd__row{display:flex;justify-content:space-between;gap:16px;padding:6px 0}
.bnd__row dt{color:#DCE3F7}.bnd__row dd{margin:0;font-weight:700;white-space:nowrap}
.bnd__row s{color:#C9D3EE;text-decoration-color:var(--strike);text-decoration-thickness:2px}
.bnd__row--disc.is-on dt,.bnd__row--disc.is-on dd{color:#A9C2FF}
.bnd__total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:14px 0 0;padding-top:14px;border-top:2px solid rgba(255,255,255,.4)}
.bnd__total span{font-weight:600}
.bnd__total b{font-size:clamp(2rem,1.6rem + 1.4vw,2.75rem);font-weight:800;letter-spacing:-.02em;line-height:1}
.bnd__hint{margin:14px 0 0;padding:10px 14px;border-radius:var(--r-s);background:rgba(107,147,255,.16);color:#fff;font-size:.9375rem;font-weight:600}
.bnd__cta{width:100%;margin-top:20px}
.bnd__after{margin-top:clamp(48px,6vw,80px);row-gap:20px}
.bnd__tiers tr.is-on th,.bnd__tiers tr.is-on td{background:var(--mist);color:var(--blue-d);font-weight:800}
.bnd__tiers tr th,.bnd__tiers tr td{transition:background-color .2s}
.bnd__tiers th,.bnd__tiers td{padding-left:12px}
.bnd__tnote{display:block;font-size:.8125rem;font-weight:400;color:var(--mute)}
@media (max-width:1023px){.bnd{grid-template-columns:minmax(0,1fr)}.bnd__sum{position:relative;top:auto}}
@media (max-width:640px){.bnd__items,.bnd__cares{grid-template-columns:minmax(0,1fr)}.bnd__item{padding:18px 16px 20px;column-gap:12px}.bnd__cb{left:16px;top:18px}}
/* ana sayfa bölümü */
.bndh__g{row-gap:28px;align-items:start}
.bndh__tiers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:2px solid var(--ink)}
.bndh__tiers li{display:flex;flex-direction:column;gap:6px;padding:18px 12px 18px 0;border-bottom:1px solid var(--line)}
.bndh__tiers li span{font-size:.875rem;color:var(--mute)}
.bndh__tiers li b{font-size:clamp(1.75rem,1.3rem + 1.4vw,2.5rem);font-weight:800;letter-spacing:-.02em;line-height:1}
.bndh__l{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 0 8px}
.bndh__n{font-weight:700;font-size:1.125rem;margin:0 0 10px}
.bndh__p{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 8px}
.bndh__p s{font-size:1.25rem;color:var(--mute);text-decoration-color:var(--strike);text-decoration-thickness:2px}
.bndh__p b{font-size:clamp(2.25rem,1.8rem + 1.6vw,3.25rem);font-weight:800;letter-spacing:-.025em;line-height:1}
.bndh__e{margin:0;font-weight:600;color:var(--blue-d)}
.bndh .btn{margin:0 10px 10px 0}
@media (max-width:640px){.bndh__tiers{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* services notu + coming soon */
.svc19{margin-top:clamp(40px,5vw,64px);row-gap:20px;align-items:stretch}
.svc19__b{background:var(--mist)}
.soon--short{background:var(--paper);border:2px dashed var(--line);height:100%}
.soon--short .h3{margin:14px 0 10px}
.soon .g12{row-gap:28px}
@media (prefers-reduced-motion:reduce){.bnd__item,.bnd__box,.bnd__tiers tr th,.bnd__tiers tr td{transition:none}}

/* ===== fiyat modeli v19.1 (K77, 2026-11-06): Suggestions, ürün aileleri, ek şube, Vitrolo Order sahneleri (/services/ordering) ===== */
.bnd__gh{font-size:1.125rem;margin:26px 0 4px}
.bnd__fs--items .bnd__gh:first-of-type{margin-top:6px}
.bnd__gs{margin:0 0 14px}
.sug__wrap{margin:0 0 44px;padding-bottom:36px;border-bottom:1px solid var(--line)}
.sug__tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.sug__tab{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--ink);background:var(--white);color:var(--ink);font-weight:600;font-size:.9375rem}
.sug__tab[aria-selected=true]{background:var(--ink);color:#fff}
.sug__gh{font-size:1rem;margin:18px 0 10px}
.is-tabs .sug__gh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sug__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sug{background:var(--white);border:2px solid var(--line);border-radius:var(--r-m);padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;transition:border-color .2s}
.sug.is-on{border-color:var(--blue);background:var(--mist)}
.sug__n{font-weight:700;margin:0;font-size:1.0625rem}
.sug__i{margin:0;color:var(--mute);font-size:.9375rem;line-height:1.45}
.sug__p{margin:6px 0 0;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.sug__p s{color:var(--mute);text-decoration-color:var(--strike);text-decoration-thickness:2px}
.sug__p b{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.sug__e{margin:0 0 8px;font-weight:600;color:var(--blue-d);font-size:.875rem}
.sug__btn{margin-top:auto;align-self:flex-start}
@media (max-width:640px){.sug__list{grid-template-columns:minmax(0,1fr)}}
/* Vitrolo Order sahneleri: işaretleme varsayılanı son kare (data-s = data-n); html.mo'da order.js adım adım oynatır */
.os-grid{align-items:center;row-gap:32px}
.os-txt .lead{margin-top:24px}
.os{position:relative;background:var(--mist);border-radius:var(--r-l);padding:clamp(18px,3vw,32px);overflow:hidden}
.os-lab{position:absolute;z-index:4;top:14px;left:16px;margin:0;font-size:.75rem;font-weight:600;background:#fff;color:var(--ink);padding:4px 10px;border-radius:999px}
.os-stage{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,32px);min-height:430px;padding-top:26px}
.os-ctl{margin-top:14px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.os-ctl .fn{margin:0}
.os .os-ph{width:min(210px,46%);flex:none}
.os-app{position:absolute;inset:0;padding:24px 10px 10px;font-size:11px;line-height:1.35;color:#1C1C1C;background:#FBF7F2;display:flex;flex-direction:column;gap:6px}
.os-top{display:flex;justify-content:space-between;align-items:center;margin:0 0 4px;font-size:12px}
.os-top b{color:#C81E35}.os-top span{font-size:10px;font-weight:600;background:#1C1C1C;color:#fff;border-radius:999px;padding:2px 8px}
.os-it{display:flex;align-items:center;gap:6px;margin:0;padding:8px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(28,28,28,.08)}
.os-it b{flex:1;font-weight:600}.os-it em{font-style:normal;font-weight:700}
.os-plus{width:18px;height:18px;border-radius:50%;background:#C81E35;color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;line-height:1}
.os-it--add{box-shadow:0 0 0 2px #C81E35}
.os-time{display:flex;justify-content:space-between;margin:2px 0 0;padding:6px 8px;border-radius:10px;background:#fff}
.os-cart{margin:auto 0 0;display:flex;justify-content:space-between;align-items:center;gap:6px;padding:10px;border-radius:12px;background:#1C1C1C;color:#fff;font-size:10.5px}
.os-cart b{background:#C81E35;border-radius:999px;padding:4px 8px}
.os-done{position:absolute;left:10px;right:10px;bottom:52px;margin:0;padding:10px;border-radius:12px;background:#0F7A48;color:#fff;display:flex;flex-direction:column;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.os-done span{font-size:10px;opacity:.92}
.os-call{display:flex;gap:6px;margin:0}
.os-call span{flex:1;text-align:center;padding:6px 4px;border-radius:999px;border:1.5px solid #1C1C1C;font-weight:600;font-size:10px;background:#fff}
.os-tent{flex:none;width:min(170px,38%);background:#fff;border-radius:14px;padding:16px 14px;text-align:center;box-shadow:0 24px 40px -24px rgba(22,33,62,.55);transform:rotate(-3deg)}
.os-tent p{margin:0;font-weight:700;color:#C81E35}
.os-tent .os-qr{width:100%;height:auto;margin:10px 0}
.os-tent__s{font-size:.8125rem;color:var(--ink)!important}
.os .os-br{flex:1;min-width:0;max-width:430px}
.os-br .dv-scr{aspect-ratio:4/3}
.os-dash{position:absolute;inset:0;padding:10px;font-size:11px;background:#F5F7FB;color:var(--ink)}
.os-dash__h{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px}
.os-bell{font-size:10px;font-weight:700;background:#E5484D;color:#fff;border-radius:999px;padding:2px 8px}
.os-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;height:calc(100% - 28px)}
.os-col{background:#E9EDF5;border-radius:8px;padding:6px}
.os-col>p{margin:0 0 6px;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.os-card{background:#fff;border-radius:8px;padding:6px;box-shadow:0 0 0 1.5px #E5484D}
.os-card p{margin:0 0 3px;display:flex;justify-content:space-between;gap:4px}
.os-paid{color:#0F7A48;font-weight:700}
.os-col--prep .os-card{box-shadow:0 0 0 1.5px var(--blue)}
.os-loy{width:min(320px,92%);background:#C81E35;color:#fff;border-radius:22px;padding:22px;box-shadow:0 30px 50px -24px rgba(22,33,62,.6)}
.os-loy__h{display:flex;justify-content:space-between;align-items:center;margin:0 0 16px}
.os-loy__h span{font-size:.8125rem;opacity:.95}
.os-stamps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.os-st{aspect-ratio:1;border-radius:50%;border:2px dashed rgba(255,255,255,.75);display:grid;place-items:center}
.os-st::after{content:"";width:46%;height:46%;border-radius:50%;background:#C81E35;box-shadow:0 0 0 3px #C81E35,0 0 0 5px #fff;opacity:0}
.os-loy__n{margin:16px 0 4px;font-weight:700}
.os-loy__r{margin:0;padding:8px 12px;border-radius:12px;background:#fff;color:#C81E35;font-weight:800;display:inline-block}
@media (max-width:640px){
  .os-stage{min-height:0;flex-direction:column;padding-top:30px}
  .os .os-ph{width:min(220px,72%)}
  .os-tent{width:min(200px,70%)}
  .os .os-br{width:100%;max-width:none;flex:none}
}
/* adımlar (yalnız html.mo; varsayılan son kare) */
html.mo .os .os-ph,html.mo .os .os-cart,html.mo .os .os-done,html.mo .os .os-call,html.mo .os .os-card,html.mo .os .os-bell,html.mo .os .os-loy__n,html.mo .os .os-loy__r,html.mo .os .os-st::after{transition:opacity .45s var(--ease-out),transform .6s var(--ease-out)}
html.mo .os--table[data-s="0"] .os-ph{opacity:0;transform:translateY(18%)}
html.mo .os--table:is([data-s="0"],[data-s="1"]) .os-cart{opacity:0;transform:translateY(10px)}
html.mo .os--table:is([data-s="0"],[data-s="1"]) .os-it--add{box-shadow:0 0 0 1px rgba(28,28,28,.08)}
html.mo .os--table:is([data-s="0"],[data-s="1"],[data-s="2"]) .os-done{opacity:0;transform:translateY(12px) scale(.96)}
html.mo .os--table:not([data-s="4"]) .os-call{opacity:0}
html.mo .os--panel[data-s="0"] .os-ph{opacity:0;transform:translateY(18%)}
html.mo .os--panel:is([data-s="0"],[data-s="1"]) .os-done{opacity:0;transform:translateY(12px) scale(.96)}
html.mo .os--panel:is([data-s="0"],[data-s="1"],[data-s="2"]) .os-bell{opacity:0}
html.mo .os--panel:not([data-s="3"]) .os-col--new .os-card{opacity:0;transform:translateY(-24px)}
html.mo .os--panel:not([data-s="4"]) .os-col--prep .os-card{opacity:0;transform:translateX(-30px)}
html:not(.mo) .os--panel .os-col--new .os-card{display:none}
html.mo .os--panel[data-s="4"] .os-col--new .os-card{display:none}
html.mo .os--loyal:not([data-s="9"]) .os-loy__n,html.mo .os--loyal:not([data-s="9"]) .os-loy__r{opacity:0;transform:translateY(8px)}
.os--loyal .os-st::after{opacity:1}
html.mo .os--loyal[data-s="0"] .os-st:nth-child(n+1)::after{opacity:0;transform:scale(.4)}
html.mo .os--loyal[data-s="1"] .os-st:nth-child(n+2)::after{opacity:0;transform:scale(.4)}
html.mo .os--loyal[data-s="2"] .os-st:nth-child(n+3)::after{opacity:0;transform:scale(.4)}
html.mo .os--loyal[data-s="3"] .os-st:nth-child(n+4)::after{opacity:0;transform:scale(.4)}
html.mo .os--loyal[data-s="4"] .os-st:nth-child(n+5)::after{opacity:0;transform:scale(.4)}
html.mo .os--loyal[data-s="5"] .os-st:nth-child(n+6)::after{opacity:0;transform:scale(.4)}
html.mo .os--loyal[data-s="6"] .os-st:nth-child(n+7)::after{opacity:0;transform:scale(.4)}
html.mo .os--loyal[data-s="7"] .os-st:nth-child(n+8)::after{opacity:0;transform:scale(.4)}
html.mo .os--loyal[data-s="8"] .os-st:nth-child(n+9)::after{opacity:0;transform:scale(.4)}
@media (prefers-reduced-motion:reduce){.sug,.os *{transition:none!important}}
/* v19.1 düzeltme: dolu damga net görünsün (beyaz disk + kırmızı nokta) */
.os-st{position:relative}
.os-st::after{width:78%;height:78%;background:#fff radial-gradient(circle,#C81E35 0 26%,transparent 27%);box-shadow:none}
.os-it em{font-family:var(--sans);letter-spacing:0}
@media (max-width:640px){.os .os-ph{width:min(180px,56%)}}