/* Twitch & Kick Sub Badge Maker v2 — araca özel görünüm (kit üstüne). Kapsam: .bvk-t-twitch-sub-badge-maker, önek sb-.
   Kural: vh/sticky/fixed yok (gömülü panel); altın yalnız birincil eylem + seçili + odak; token'lar kitten (--kzk-*). */

.bvk-t-twitch-sub-badge-maker{--sb-ease:var(--kzk-ease,cubic-bezier(.2,.8,.3,1))}

/* ───────── ortak glif ───────── */
.bvk-t-twitch-sub-badge-maker .sb-g{display:block;width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bvk-t-twitch-sub-badge-maker .sb-g .sb-f{fill:currentColor;stroke:none}
.bvk-t-twitch-sub-badge-maker .sb-g .sb-f2{fill:color-mix(in srgb,currentColor 24%,transparent);stroke:none}
.bvk-t-twitch-sub-badge-maker .sb-g .sb-f3{fill:var(--kzk-card);stroke:none}
.bvk-t-twitch-sub-badge-maker .sb-mt{margin-top:12px}
.bvk-t-twitch-sub-badge-maker .sb-aside{max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* glifli seçim ızgaraları: simge üstte, etiket altta */
.bvk-t-twitch-sub-badge-maker .kzk-seg.sb-glyphs{gap:6px;grid-template-columns:repeat(4,minmax(0,1fr))}
.bvk-t-twitch-sub-badge-maker .kzk-seg.sb-glyphs.sb-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bvk-t-twitch-sub-badge-maker .kzk-seg.sb-glyphs.sb-g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.bvk-t-twitch-sub-badge-maker .kzk-seg.sb-glyphs>button{flex-direction:column;gap:6px;min-height:60px;padding:9px 3px 7px;font-size:11.5px;line-height:1.15}
.bvk-t-twitch-sub-badge-maker .kzk-seg.sb-glyphs.sb-g6>button{min-height:44px;padding:6px 2px}
.bvk-t-twitch-sub-badge-maker .kzk-seg.sb-glyphs>button>span{display:block;max-width:100%;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.bvk-t-twitch-sub-badge-maker .kzk-seg.sb-glyphs>button:not(.on) .sb-g{color:var(--kzk-muted)}
.bvk-t-twitch-sub-badge-maker .kzk-seg.sb-glyphs>button:not(.on):hover .sb-g{color:var(--kzk-text-2)}

/* yüzey örnekleri */
.bvk-t-twitch-sub-badge-maker .sb-fin{display:block;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.bvk-t-twitch-sub-badge-maker .sb-fin--flat{background:#a855f7}
.bvk-t-twitch-sub-badge-maker .sb-fin--soft{background:linear-gradient(180deg,#c9a4fb,#a855f7 50%,#6b2fb0)}
.bvk-t-twitch-sub-badge-maker .sb-fin--glossy{background:radial-gradient(ellipse 70% 42% at 50% 22%,rgba(255,255,255,.75),rgba(255,255,255,0) 70%),linear-gradient(180deg,#c9a4fb,#a855f7 50%,#6b2fb0)}
.bvk-t-twitch-sub-badge-maker .sb-fin--metal{background:linear-gradient(140deg,#efe4ff 0%,#a855f7 32%,#e3ccff 48%,#5b2196 64%,#c39bf7 84%,#6b2fb0)}
.bvk-t-twitch-sub-badge-maker .sb-fin--gem{background:conic-gradient(from 20deg,#e8d6ff,#8b3ee6,#d9b8ff,#6b2fb0,#c49af8,#7a34d0,#e8d6ff);box-shadow:inset 0 0 0 5px rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.3)}
.bvk-t-twitch-sub-badge-maker .sb-fin--holo{background:linear-gradient(120deg,#ff8ad8,#ffd56b 30%,#8bffcf 55%,#7cc8ff 75%,#c69bff)}
.bvk-t-twitch-sub-badge-maker .sb-fin--neon{background:#1d0b33;box-shadow:inset 0 0 0 2px #c084fc,0 0 8px #a855f7}
.bvk-t-twitch-sub-badge-maker .sb-fin--pixel{border-radius:0;background:linear-gradient(180deg,#d8b8ff 0 25%,#a855f7 25% 75%,#7a34d0 75%);clip-path:polygon(25% 0,75% 0,75% 12.5%,87.5% 12.5%,87.5% 25%,100% 25%,100% 75%,87.5% 75%,87.5% 87.5%,75% 87.5%,75% 100%,25% 100%,25% 87.5%,12.5% 87.5%,12.5% 75%,0 75%,0 25%,12.5% 25%,12.5% 12.5%,25% 12.5%)}
.bvk-t-twitch-sub-badge-maker .kzk-seg>button:not(.on)>.sb-fin{opacity:.85}

/* kademe türü örnekleri */
.bvk-t-twitch-sub-badge-maker .sb-pg{display:block;width:34px;height:14px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.bvk-t-twitch-sub-badge-maker .sb-pg--ramp{background:linear-gradient(90deg,#34d399 0 20%,#22d3ee 20% 40%,#6366f1 40% 60%,#a855f7 60% 80%,#ef4444 80%)}
.bvk-t-twitch-sub-badge-maker .sb-pg--mono{background:linear-gradient(90deg,#e5d7fb,#a855f7 55%,#5b1fa0)}
.bvk-t-twitch-sub-badge-maker .sb-pg--two{background:linear-gradient(90deg,#a855f7,#fbbf24)}

/* renk noktaları (kenar rengi, etiket rengi) */
.bvk-t-twitch-sub-badge-maker .kzk-seg.sb-chips5,.bvk-t-twitch-sub-badge-maker .kzk-seg.sb-chips4{gap:6px;grid-template-columns:repeat(5,minmax(0,1fr))}
.bvk-t-twitch-sub-badge-maker .kzk-seg.sb-chips4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bvk-t-twitch-sub-badge-maker :is(.sb-chips5,.sb-chips4)>button{flex-direction:column;gap:5px;min-height:52px;padding:7px 2px 6px;font-size:11px;line-height:1.15}
.bvk-t-twitch-sub-badge-maker :is(.sb-chips5,.sb-chips4)>button>span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.bvk-t-twitch-sub-badge-maker .sb-dot{display:block;width:18px;height:18px;border-radius:50%;background:var(--c,#888);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 0 0 1px rgba(0,0,0,.18)}
.bvk-t-twitch-sub-badge-maker .sb-dot--dark{background:linear-gradient(135deg,#a855f7 0 50%,#4a1c80 50%)}
.bvk-t-twitch-sub-badge-maker .sb-dot--light{background:linear-gradient(135deg,#e6d4ff 0 50%,#a855f7 50%)}
.bvk-t-twitch-sub-badge-maker .sb-dot--auto{background:conic-gradient(#fff 0 50%,#16111f 0)}

/* yükleme */
.bvk-t-twitch-sub-badge-maker .sb-upOpts{margin-top:12px}
.bvk-t-twitch-sub-badge-maker .sb-sw+.sb-sw{margin-top:10px}
.bvk-t-twitch-sub-badge-maker .sb-sw0{margin-bottom:2px}

/* şekil döşemeleri */
.bvk-t-twitch-sub-badge-maker .sb-tiles{--kzk-tile-min:74px;--kzk-thumb-h:56px}
.bvk-t-twitch-sub-badge-maker .sb-tiles .kzk-tile-thumb{background:radial-gradient(circle at 50% 40%,#231c33,#130f1c)}
.bvk-t-twitch-sub-badge-maker .kzk-tile-label{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}

/* paletler */
.bvk-t-twitch-sub-badge-maker .sb-pals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.bvk-t-twitch-sub-badge-maker .sb-pal{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;padding:6px 6px 7px;border-radius:var(--kzk-r-md);border:1px solid var(--kzk-line-2);background:var(--kzk-field);color:var(--kzk-text-2);font:600 11.5px/1.2 var(--kzk-font);text-align:left;cursor:pointer;transition:border-color .16s,background-color .16s,color .16s,transform .16s var(--sb-ease)}
.bvk-t-twitch-sub-badge-maker .sb-pal:hover{border-color:var(--kzk-line-hover);color:var(--kzk-text)}
@media (prefers-reduced-motion:no-preference){.bvk-t-twitch-sub-badge-maker .sb-pal:hover{transform:translateY(-1px)}}
.bvk-t-twitch-sub-badge-maker .sb-pal>i{display:block;height:18px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 6px 8px -6px rgba(255,255,255,.45)}
.bvk-t-twitch-sub-badge-maker .sb-pal>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 1px}
.bvk-t-twitch-sub-badge-maker .sb-pal[aria-pressed=true]{border-color:var(--kzk-gold-line);background:var(--kzk-sel-bg);color:var(--kzk-gold);box-shadow:inset 0 0 0 .5px var(--kzk-gold-line)}
.bvk-t-twitch-sub-badge-maker .sb-pal:focus-visible{outline:2px solid var(--kzk-gold);outline-offset:2px}
.bvk-t-twitch-sub-badge-maker .kzk-row.sb-crow{grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr));gap:10px}
.bvk-t-twitch-sub-badge-maker .sb-over{display:flex;align-items:center;gap:8px;margin-top:12px;padding:6px 6px 6px 10px;border-radius:var(--kzk-r-md);background:var(--kzk-hl-bg);border:1px solid var(--kzk-hl-line);color:var(--kzk-text-2);font-size:12.5px}
.bvk-t-twitch-sub-badge-maker .sb-over[hidden]{display:none}
.bvk-t-twitch-sub-badge-maker .sb-over>svg{color:var(--kzk-lilac);flex:none}
.bvk-t-twitch-sub-badge-maker .sb-over>span{flex:1 1 auto;min-width:0}

/* etiket */
.bvk-t-twitch-sub-badge-maker .sb-lk{display:flex;align-items:center;justify-content:center;min-width:30px;height:22px;padding:0 5px;border-radius:6px;background:color-mix(in srgb,currentColor 14%,transparent);font:800 12.5px/1 var(--kzk-font);letter-spacing:.2px}
.bvk-t-twitch-sub-badge-maker .sb-lk--serif{font-family:Georgia,serif;font-weight:700}
.bvk-t-twitch-sub-badge-maker .kzk-seg.sb-lblKinds>button:not(.on) .sb-lk{color:var(--kzk-muted)}
.bvk-t-twitch-sub-badge-maker .kzk-seg.sb-fonts{gap:6px;grid-template-columns:repeat(5,minmax(0,1fr))}
.bvk-t-twitch-sub-badge-maker .sb-fonts>button{flex-direction:column;gap:4px;min-height:58px;padding:6px 2px;font-weight:400}
.bvk-t-twitch-sub-badge-maker .sb-fs{display:flex;align-items:center;justify-content:center;height:22px;font-size:19px;line-height:1;color:var(--kzk-text)}
.bvk-t-twitch-sub-badge-maker .sb-fs--px>i{display:block;line-height:0}
.bvk-t-twitch-sub-badge-maker .sb-fs--px canvas{display:block;image-rendering:pixelated}
html[data-theme=light] .bvk-t-twitch-sub-badge-maker .sb-fs--px canvas{filter:invert(1) brightness(.2)}
.bvk-t-twitch-sub-badge-maker .sb-fonts>button.on .sb-fs{color:var(--kzk-gold)}
.bvk-t-twitch-sub-badge-maker .sb-fonts>button.on .sb-fs--px canvas{filter:sepia(1) saturate(4) hue-rotate(-12deg) brightness(1.05)}
.bvk-t-twitch-sub-badge-maker .sb-fn{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 10.5px/1.2 var(--kzk-font);color:var(--kzk-muted)}
.bvk-t-twitch-sub-badge-maker .sb-lblWrap{transition:opacity .2s var(--sb-ease)}
.bvk-t-twitch-sub-badge-maker .sb-lblWrap.sb-dim{opacity:.5}
.bvk-t-twitch-sub-badge-maker .sb-lblWrap.sb-dim:hover,.bvk-t-twitch-sub-badge-maker .sb-lblWrap.sb-dim:focus-within{opacity:.8}

/* merdiven seçimi */
.bvk-t-twitch-sub-badge-maker .kzk-seg.sb-ladders{gap:6px;grid-template-columns:repeat(4,minmax(0,1fr))}
.bvk-t-twitch-sub-badge-maker .sb-ladders>button{flex-direction:column;gap:2px;min-height:70px;padding:8px 3px}
.bvk-t-twitch-sub-badge-maker .sb-ladders>button>b{font:700 18px/1 var(--kzk-font-d,var(--kzk-font));font-variant-numeric:tabular-nums}
.bvk-t-twitch-sub-badge-maker .sb-ladders>button>span{font-size:11.5px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.bvk-t-twitch-sub-badge-maker .sb-ladders>button>small{font-size:10px;color:var(--kzk-muted);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* ───────── önizleme ───────── */
.bvk-t-twitch-sub-badge-maker #sb-prevTag{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bvk-t-twitch-sub-badge-maker #sb-prevTag[hidden]{display:none}
.bvk-t-twitch-sub-badge-maker .sb-stage{min-height:0;--kzk-stage-pad:18px 12px}
.bvk-t-twitch-sub-badge-maker .sb-stage .kzk-stage-in{place-items:stretch}
.bvk-t-twitch-sub-badge-maker .sb-ladder{display:grid;grid-template-columns:repeat(var(--sb-cols,4),minmax(0,1fr));gap:var(--sb-gap,10px);width:100%;align-content:center;min-height:200px}
.bvk-t-twitch-sub-badge-maker .sb-tier{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;margin:0;padding:10px 4px 8px;border-radius:14px;border:1px solid transparent;background:transparent;color:inherit;font:inherit;cursor:pointer;transition:background-color .16s,border-color .16s,transform .18s var(--sb-ease)}
.bvk-t-twitch-sub-badge-maker .sb-tc{display:block;width:var(--sb-bs,84px);height:var(--sb-bs,84px)}
@media (prefers-reduced-motion:no-preference){
  .bvk-t-twitch-sub-badge-maker .sb-tier:hover .sb-tc{transform:translateY(-2px)}
  .bvk-t-twitch-sub-badge-maker .sb-tc{transition:transform .2s var(--sb-ease)}
}
.bvk-t-twitch-sub-badge-maker .sb-tier:hover{background:rgba(255,255,255,.045)}
.bvk-t-twitch-sub-badge-maker .sb-tier[aria-checked=true]{background:rgba(251,191,36,.075);border-color:rgba(251,191,36,.5)}
.bvk-t-twitch-sub-badge-maker .sb-tier:focus-visible{outline:2px solid var(--kzk-gold);outline-offset:2px}
.bvk-t-twitch-sub-badge-maker .sb-tl{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 12.5px/1.2 var(--kzk-font);color:rgba(240,236,250,.78);font-variant-numeric:tabular-nums}
.bvk-t-twitch-sub-badge-maker .sb-tier[aria-checked=true] .sb-tl{color:#fbd56b}
.bvk-t-twitch-sub-badge-maker .sb-tov{position:absolute;top:7px;right:7px;width:9px;height:9px;border-radius:50%;background:var(--c,#fff);box-shadow:0 0 0 2px rgba(14,13,20,.85)}
.bvk-t-twitch-sub-badge-maker .sb-tov[hidden]{display:none}
/* açık ve damalı sahnede etiketler koyu */
.bvk-t-twitch-sub-badge-maker .sb-stage:is([data-scene=light],[data-scene=checker]) .sb-tl{color:#2a2340}
.bvk-t-twitch-sub-badge-maker .sb-stage:is([data-scene=light],[data-scene=checker]) .sb-tier[aria-checked=true] .sb-tl{color:#8a5a00}
.bvk-t-twitch-sub-badge-maker .sb-stage:is([data-scene=light],[data-scene=checker]) .sb-tier:hover{background:rgba(20,16,40,.05)}
.bvk-t-twitch-sub-badge-maker .sb-stage:is([data-scene=light],[data-scene=checker]) .sb-tier[aria-checked=true]{background:rgba(217,154,30,.1);border-color:rgba(180,120,10,.55)}
.bvk-t-twitch-sub-badge-maker .sb-stage[data-scene=checker] .sb-tl{background:rgba(255,255,255,.82);padding:1px 6px;border-radius:5px}
.bvk-t-twitch-sub-badge-maker .sb-stage[data-scene=scene] .sb-tl{text-shadow:0 1px 3px rgba(0,0,0,.8)}

/* seçili tier: gerçek boyut + sohbet */
.bvk-t-twitch-sub-badge-maker .sb-detail{margin-top:12px;padding:12px;border-radius:var(--kzk-r-card);border:1px solid var(--kzk-line);background:var(--kzk-card-2)}
.bvk-t-twitch-sub-badge-maker .sb-dhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:10px}
.bvk-t-twitch-sub-badge-maker .sb-dnav{display:flex;align-items:center;gap:4px;min-width:0}
.bvk-t-twitch-sub-badge-maker .sb-dname{min-width:96px;text-align:center;font:700 14px/1.2 var(--kzk-font-d,var(--kzk-font));color:var(--kzk-text);white-space:nowrap}
.bvk-t-twitch-sub-badge-maker .sb-tcol{display:flex;align-items:center;gap:8px;min-width:0}
.bvk-t-twitch-sub-badge-maker .sb-tcol>.kzk-label{margin:0;white-space:nowrap}
.bvk-t-twitch-sub-badge-maker .sb-tcol>:not(.kzk-label):not(button){width:150px;min-width:0}
.bvk-t-twitch-sub-badge-maker .sb-tcol>button[hidden]{display:none}
.bvk-t-twitch-sub-badge-maker .sb-dbody{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:stretch}
.bvk-t-twitch-sub-badge-maker .sb-real{display:flex;align-items:flex-end;gap:10px;padding:10px 12px 8px;border-radius:var(--kzk-r-md);background-color:var(--kzk-chk-a);background-image:conic-gradient(var(--kzk-chk-b) 25%,transparent 0 50%,var(--kzk-chk-b) 0 75%,transparent 0);background-size:12px 12px}
.bvk-t-twitch-sub-badge-maker .sb-real figure{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0}
.bvk-t-twitch-sub-badge-maker .sb-rw{display:flex;align-items:flex-end;justify-content:center;height:72px}
.bvk-t-twitch-sub-badge-maker .sb-real canvas{display:block}
.bvk-t-twitch-sub-badge-maker .sb-real figcaption{padding:1px 6px;border-radius:5px;background:rgba(14,13,20,.72);color:#f2eefa;font:600 10.5px/1.3 var(--kzk-font);font-variant-numeric:tabular-nums;white-space:nowrap}
.bvk-t-twitch-sub-badge-maker .sb-chat{display:flex;flex-direction:column;gap:6px;min-width:0}
.bvk-t-twitch-sub-badge-maker .sb-line{display:flex;flex-direction:column;justify-content:center;gap:3px;flex:1 1 0;min-width:0;padding:6px 10px;border-radius:var(--kzk-r-md);font:400 13px/1.5 Inter,system-ui,sans-serif}
.bvk-t-twitch-sub-badge-maker .sb-line--dark{background:#18181b;color:#efeff1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.bvk-t-twitch-sub-badge-maker .sb-line--light{background:#ffffff;color:#0e0e10;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.bvk-t-twitch-sub-badge-maker .sb-lcap{font:600 10px/1.2 var(--kzk-font);letter-spacing:.3px;text-transform:uppercase;opacity:.55}
.bvk-t-twitch-sub-badge-maker .sb-lrow{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bvk-t-twitch-sub-badge-maker .sb-lb{display:inline-block;vertical-align:-3px;margin-right:4px;width:18px;height:18px}
.bvk-t-twitch-sub-badge-maker .sb-lrow>b{font-weight:700}
@container kzkc (max-width:560px){
  .bvk-t-twitch-sub-badge-maker .sb-dbody{grid-template-columns:minmax(0,1fr)}
  .bvk-t-twitch-sub-badge-maker .sb-real{justify-content:center}
  .bvk-t-twitch-sub-badge-maker .sb-tcol{flex:1 1 100%}
  .bvk-t-twitch-sub-badge-maker .sb-tcol>:not(.kzk-label):not(button){flex:1 1 auto;width:auto}
  .bvk-t-twitch-sub-badge-maker .sb-dnav{flex:1 1 100%;justify-content:space-between}
}
@container kzkc (max-width:520px){
  .bvk-t-twitch-sub-badge-maker .sb-rnd>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bvk-t-twitch-sub-badge-maker .sb-rnd{padding:0 8px}
  .bvk-t-twitch-sub-badge-maker #sb-prevTag{display:none}
}
@container kzkc (max-width:440px){
  .bvk-t-twitch-sub-badge-maker .sb-prev .kzk-prev-head>.kzk-size{display:none}
  .bvk-t-twitch-sub-badge-maker .sb-stage{--kzk-stage-pad:12px 6px}
  .bvk-t-twitch-sub-badge-maker .sb-tier{padding:8px 2px 6px;border-radius:12px}
  .bvk-t-twitch-sub-badge-maker .sb-tl{font-size:11.5px}
  .bvk-t-twitch-sub-badge-maker .sb-ladder{min-height:0}
}

/* taslak notu */
.bvk-t-twitch-sub-badge-maker .sb-draft{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:6px 6px 6px 10px;border-radius:var(--kzk-r-md);background:var(--kzk-hl-bg);border:1px solid var(--kzk-hl-line);color:var(--kzk-text-2);font-size:12.5px}
.bvk-t-twitch-sub-badge-maker .sb-draft[hidden]{display:none}
.bvk-t-twitch-sub-badge-maker .sb-draft>svg{color:var(--kzk-lilac);flex:none}
.bvk-t-twitch-sub-badge-maker .sb-draft>span{flex:1 1 auto;min-width:0}
.bvk-t-twitch-sub-badge-maker .sb-draft>.kzk-btn{flex:none}

/* telefon eylem satırı + mini merdiven (yalnız tek sütunda) */
.bvk-t-twitch-sub-badge-maker .sb-mact{display:flex;gap:8px;margin-top:10px}
.bvk-t-twitch-sub-badge-maker .sb-mact>.kzk-btn{flex:1 1 0;justify-content:center;min-height:44px;min-width:0}
.bvk-t-twitch-sub-badge-maker .sb-mact>.kzk-btn>span{min-width:0;white-space:normal;text-align:center;line-height:1.15;overflow-wrap:anywhere}
.bvk-t-twitch-sub-badge-maker .sb-mini{display:none}
@container kzk (max-width:859px){
  .bvk-t-twitch-sub-badge-maker .sb-mini{display:block;flex:0 0 auto;position:relative;height:64px;margin:12px 12px 0;border-radius:var(--kzk-r-md);overflow:hidden;border:1px solid var(--kzk-line);background:#120f1b}
  .bvk-t-twitch-sub-badge-maker .sb-mini>canvas{display:block;width:100%;height:100%}
}
@container kzk (min-width:860px){.bvk-t-twitch-sub-badge-maker .sb-mact{display:none}}

/* ───────── dışa aktarma ───────── */
.bvk-t-twitch-sub-badge-maker .sb-xset{display:flex;flex-direction:column;gap:12px}
.bvk-t-twitch-sub-badge-maker .sb-xset .kzk-field{margin:0}
.bvk-t-twitch-sub-badge-maker .sb-xseg>button{min-height:32px;padding:2px 6px;font-size:12px;white-space:nowrap;min-width:0}
.bvk-t-twitch-sub-badge-maker .sb-xseg>button>span{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px}
.bvk-t-twitch-sub-badge-maker .sb-exp .kzk-exp-actions{display:flex;flex-direction:column;gap:12px}
.bvk-t-twitch-sub-badge-maker .sb-exp .kzk-exp-actions>.kzk-btn{width:100%;justify-content:center;height:auto;min-height:50px}
.bvk-t-twitch-sub-badge-maker .sb-exp .kzk-btn .kzk-btn-sub{white-space:normal;overflow-wrap:anywhere}
.bvk-t-twitch-sub-badge-maker #all[aria-busy=true]{opacity:.7;cursor:progress}
.bvk-t-twitch-sub-badge-maker .sb-exp .kzk-exp-actions>.kzk-lock{margin:-4px 0 0;line-height:1.4}
/* ikincil indirmeler: ince çizgiyle ayrılmış alt kart */
.bvk-t-twitch-sub-badge-maker .sb-xsub{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:var(--kzk-r-md);background:var(--kzk-card-2);border:1px solid var(--kzk-line)}
.bvk-t-twitch-sub-badge-maker .sb-oneHead{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.bvk-t-twitch-sub-badge-maker .sb-oneHead>.kzk-label{margin:0}
.bvk-t-twitch-sub-badge-maker .sb-oneName{font:600 12.5px/1.3 var(--kzk-font);color:var(--kzk-text);white-space:nowrap}
.bvk-t-twitch-sub-badge-maker .sb-oneBtns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.bvk-t-twitch-sub-badge-maker .sb-xs{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;margin:0;padding:8px 2px 7px;border-radius:var(--kzk-r-md);border:1px solid var(--kzk-line-2);background:var(--kzk-field);color:var(--kzk-text);font:inherit;cursor:pointer;transition:border-color .16s,background-color .16s,transform .16s var(--sb-ease)}
.bvk-t-twitch-sub-badge-maker .sb-xs:hover{border-color:var(--kzk-lilac);background:var(--kzk-hl-bg)}
@media (prefers-reduced-motion:no-preference){.bvk-t-twitch-sub-badge-maker .sb-xs:hover{transform:translateY(-1px)}}
.bvk-t-twitch-sub-badge-maker .sb-xs:focus-visible{outline:2px solid var(--kzk-gold);outline-offset:2px}
.bvk-t-twitch-sub-badge-maker .sb-xsT{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:#151220}
.bvk-t-twitch-sub-badge-maker .sb-xsT>canvas{display:block}
.bvk-t-twitch-sub-badge-maker .sb-xs>b{font:700 13px/1.2 var(--kzk-font);font-variant-numeric:tabular-nums;white-space:nowrap}
.bvk-t-twitch-sub-badge-maker .sb-xs>small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 10.5px/1.2 var(--kzk-font);color:var(--kzk-muted)}
.bvk-t-twitch-sub-badge-maker .sb-sheet{display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:1px solid var(--kzk-line)}
.bvk-t-twitch-sub-badge-maker .sb-sheet>.kzk-label{margin:0}
.bvk-t-twitch-sub-badge-maker .sb-sheetIn{display:flex;gap:6px;min-width:0}
.bvk-t-twitch-sub-badge-maker .sb-sheetIn>input{flex:1 1 auto;min-width:0}
.bvk-t-twitch-sub-badge-maker .sb-sheetIn>.kzk-btn{flex:none;height:auto;min-height:40px;padding:0 12px}
.bvk-t-twitch-sub-badge-maker .sb-sheet>.kzk-hint{margin:0}
.bvk-t-twitch-sub-badge-maker .sb-exp .kzk-lock{margin-top:0}
/* yükleme adımları: açık, numaralı, düğme gibi değil metin bağlantısı gibi */
.bvk-t-twitch-sub-badge-maker .sb-steps{margin-top:14px;border:0;background:transparent}
.bvk-t-twitch-sub-badge-maker .sb-steps>summary{padding:4px 0;min-height:0;background:transparent;border:0;color:var(--kzk-lilac);font-weight:600}
.bvk-t-twitch-sub-badge-maker .sb-steps>.kzk-details-body{padding:6px 0 0}
.bvk-t-twitch-sub-badge-maker .sb-stepList{margin:0;padding:0;list-style:none;counter-reset:sb;display:flex;flex-direction:column;gap:9px;color:var(--kzk-text-2);font-size:12.5px;line-height:1.5}
.bvk-t-twitch-sub-badge-maker .sb-stepList li{position:relative;padding-left:28px;counter-increment:sb}
.bvk-t-twitch-sub-badge-maker .sb-stepList li::before{content:counter(sb);position:absolute;left:0;top:0;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--kzk-hl-bg);border:1px solid var(--kzk-hl-line);color:var(--kzk-lilac);font:700 11px/1 var(--kzk-font)}
/* dışa aktarma ayarları hep alt alta (kitin geniş kart satır düzeni yerine) */
.bvk-t-twitch-sub-badge-maker .sb-exp .kzk-exp-set.sb-xset{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:12px}
.bvk-t-twitch-sub-badge-maker .sb-xset>.kzk-switch--end{justify-content:space-between}
/* geniş dışa aktarma kartı (alt satır: 860–1379, gömülü 770): ayarlar | ZIP, seçili tier, rozet sayfası */
@container kzkc (min-width:640px){
  .bvk-t-twitch-sub-badge-maker .sb-xgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:24px;row-gap:12px;align-items:start}
  .bvk-t-twitch-sub-badge-maker .sb-xgrid>.kzk-exp-set{grid-column:1;grid-row:1/span 4;margin:0;padding:0 24px 0 0;border-bottom:0;border-right:1px solid var(--kzk-line);align-self:stretch}
  .bvk-t-twitch-sub-badge-maker .sb-xgrid>.kzk-exp-actions{grid-column:2;grid-row:1/span 4}
}

/* ───────── hazır tasarımlar (ray: ilk sekme) ───────── */
.bvk-t-twitch-sub-badge-maker .sb-ltabsWrap{position:relative;margin:0 -2px 12px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.bvk-t-twitch-sub-badge-maker .sb-ltabsWrap.sb-end{-webkit-mask-image:none;mask-image:none}
.bvk-t-twitch-sub-badge-maker .kzk-seg--chips.sb-ltabs{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 26px 2px 2px}
.bvk-t-twitch-sub-badge-maker .kzk-seg--chips.sb-ltabs::-webkit-scrollbar{display:none}
.bvk-t-twitch-sub-badge-maker .sb-ltabs>button{flex:0 0 auto;min-height:30px;padding:3px 11px;font-size:12.5px}
.bvk-t-twitch-sub-badge-maker .sb-ltabs .sb-n{margin-left:5px;font-weight:500;color:var(--kzk-muted);font-variant-numeric:tabular-nums}
.bvk-t-twitch-sub-badge-maker .sb-looks{--kzk-ar:2/1}
.bvk-t-twitch-sub-badge-maker .kzk-cards.sb-looks{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bvk-t-twitch-sub-badge-maker .sb-looks .kzk-tcard-thumb{background:radial-gradient(ellipse at 50% 30%,#241c36,#110e19)}
@container kzkc (min-width:452px){.bvk-t-twitch-sub-badge-maker .kzk-cards.sb-looks{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}}
@container kzkc (min-width:740px){.bvk-t-twitch-sub-badge-maker .kzk-cards.sb-looks{grid-template-columns:repeat(4,minmax(0,1fr))}}
.bvk-t-twitch-sub-badge-maker .kzk-cards:not(.is-open)>[data-more]{display:none}
.bvk-t-twitch-sub-badge-maker .kzk-cards>.kzk-more-btn{grid-column:1/-1}
.bvk-t-twitch-sub-badge-maker .sb-looksHint{margin:12px 0 0}
.bvk-t-twitch-sub-badge-maker .kzk-col-prev>.sb-prev{flex:0 0 auto}
/* önizleme zemini başlığı + daha büyük sahne düğmeleri */
.bvk-t-twitch-sub-badge-maker .sb-scnLbl{font:600 12px/1.2 var(--kzk-font);color:var(--kzk-muted);white-space:nowrap}
.bvk-t-twitch-sub-badge-maker .sb-prev .kzk-scenes{height:40px}
.bvk-t-twitch-sub-badge-maker .sb-prev .kzk-scene-btn{width:32px;height:32px}
.bvk-t-twitch-sub-badge-maker .sb-prev .kzk-scene-btn>i{width:20px;height:20px;border-radius:5px}
.bvk-t-twitch-sub-badge-maker .sb-prev .kzk-scene-btn:focus-visible{outline:2px solid var(--kzk-gold);outline-offset:1px}
/* yükleme: kompakt bırakma alanı, şekillerin üstünde */
.bvk-t-twitch-sub-badge-maker .sb-dropC{min-height:84px;padding:12px 14px}
.bvk-t-twitch-sub-badge-maker .sb-dropC .kzk-drop-empty{flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:10px;row-gap:2px}
.bvk-t-twitch-sub-badge-maker .sb-dropC .kzk-drop-empty>svg{width:26px;height:26px;margin:0}
.bvk-t-twitch-sub-badge-maker .sb-dropC .kzk-drop-sub{flex-basis:100%;text-align:center}
.bvk-t-twitch-sub-badge-maker .sb-upHint{margin:-4px 0 10px}

/* ───────── düzen (webcam ızgarası) ─────────
   <860: tek sütun (önizleme, tasarımlar [JS taşır], seçenekler, dışa aktarma). 860–1379: seçenekler | önizleme,
   seçenekler | dışa aktarma, altta tasarımlar. ≥1380: seçenekler | önizleme | dışa aktarma, altta tasarımlar.
   ≥860'ta seçenek kartı ızgara yüksekliğini belirlemez (contain:size): uzun paneller içeride kayar. */
.bvk-t-twitch-sub-badge-maker .kzk-railwrap{grid-template-columns:72px minmax(0,1fr)}
@container kzk (max-width:599px){.bvk-t-twitch-sub-badge-maker .kzk-railwrap{grid-template-columns:minmax(0,1fr)}}
@container kzk (max-width:859px){
  .bvk-t-twitch-sub-badge-maker .sb-opts>.kzk-railwrap{min-height:0;flex:0 0 auto}
  .bvk-t-twitch-sub-badge-maker .sb-opts .kzk-panes{min-height:0!important}
}
@container kzk (min-width:860px){
  .bvk-t-twitch-sub-badge-maker .kzk-ws.kzk-ws--rail{grid-template-columns:minmax(360px,392px) minmax(0,1fr);grid-template-areas:"opts prev" "opts exp";grid-template-rows:auto 1fr}
  /* seçenek kartı ızgara yüksekliğini belirlemez; içeriğine sarılır, uzun paneller içeride kayar (boş koyu alan kalmaz) */
  .bvk-t-twitch-sub-badge-maker .kzk-col-opts{contain:size;min-height:640px}
  .bvk-t-twitch-sub-badge-maker .kzk-col-opts>.sb-opts{flex:0 1 auto;min-height:0;max-height:100%}
  .bvk-t-twitch-sub-badge-maker .sb-opts>.kzk-railwrap{flex:0 1 auto;min-height:0;grid-template-rows:minmax(0,1fr)}
  .bvk-t-twitch-sub-badge-maker .sb-opts .kzk-panes{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--kzk-line-2) transparent}
  .bvk-t-twitch-sub-badge-maker .kzk-col-exp{align-self:stretch}
  .bvk-t-twitch-sub-badge-maker .kzk-col-exp>.sb-exp{flex:1 1 auto}
}
@container kzk (min-width:1380px){
  .bvk-t-twitch-sub-badge-maker .kzk-ws.kzk-ws--rail{grid-template-columns:minmax(372px,404px) minmax(0,1fr) minmax(268px,296px);grid-template-areas:"opts prev exp";grid-template-rows:auto}
}

/* dar dokunmatik */
@container kzk (max-width:430px){
  .bvk-t-twitch-sub-badge-maker .kzk-seg.sb-glyphs>button{min-height:58px}
  .bvk-t-twitch-sub-badge-maker .kzk-seg.sb-fonts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* geniş seçenek paneli (tek sütun: gömülü 770, tablet): ızgaralar tek satıra açılır */
@container kzkc (min-width:540px){
  .bvk-t-twitch-sub-badge-maker .kzk-seg.sb-glyphs.sb-g4{grid-template-columns:repeat(8,minmax(0,1fr))}
  .bvk-t-twitch-sub-badge-maker .kzk-seg.sb-glyphs.sb-g3{grid-template-columns:repeat(6,minmax(0,1fr))}
  .bvk-t-twitch-sub-badge-maker #sb-edge.sb-g4,.bvk-t-twitch-sub-badge-maker #sb-lbl.sb-g4,.bvk-t-twitch-sub-badge-maker #sb-prog.sb-g3,.bvk-t-twitch-sub-badge-maker #sb-lblPos.sb-g3{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bvk-t-twitch-sub-badge-maker #sb-prog.sb-g3,.bvk-t-twitch-sub-badge-maker #sb-lblPos.sb-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bvk-t-twitch-sub-badge-maker .sb-pals{grid-template-columns:repeat(6,minmax(0,1fr))}
  .bvk-t-twitch-sub-badge-maker .sb-tiles{--kzk-tile-min:84px;--kzk-thumb-h:60px}
}

/* sayı kutularının odak halkası (kit eksiği: neredeyse görünmüyor) */
.bvk-t-twitch-sub-badge-maker .kzk-num:focus-within{box-shadow:0 0 0 2px var(--kzk-gold);border-color:var(--kzk-gold-line)}

/* açık tema */
html[data-theme=light] .bvk-t-twitch-sub-badge-maker :is(.sb-pal>i,.sb-pg,.sb-fin,.sb-dot){box-shadow:inset 0 0 0 1px rgba(20,16,40,.16)}
html[data-theme=light] .bvk-t-twitch-sub-badge-maker .sb-tiles .kzk-tile-thumb,html[data-theme=light] .bvk-t-twitch-sub-badge-maker .sb-looks .kzk-tcard-thumb{background:radial-gradient(circle at 50% 35%,#33294a,#211a31)}
html[data-theme=light] .bvk-t-twitch-sub-badge-maker .sb-g .sb-f3{fill:#fff}
.bvk-t-twitch-sub-badge-maker .kzk-seg#sb-plat{grid-auto-flow:row;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) minmax(0,1fr)}
.bvk-t-twitch-sub-badge-maker #sb-plat>button{white-space:normal;line-height:1.15;text-align:center}
/* koyu arayüzde açık sohbet kartı göz almasın */
html:not([data-theme=light]) .bvk-t-twitch-sub-badge-maker .sb-line--light{background:#ececf0}
/* açık tema: seçili şekil ve tek-tier düğmeleri */
html[data-theme=light] .bvk-t-twitch-sub-badge-maker .sb-tiles .kzk-tile[aria-checked=true]{border-color:#b97800;box-shadow:inset 0 0 0 1px #b97800;background:#fff4dc}
html[data-theme=light] .bvk-t-twitch-sub-badge-maker .sb-tiles .kzk-tile[aria-checked=true] .kzk-tile-label{color:#7a4f00;font-weight:700}
html[data-theme=light] .bvk-t-twitch-sub-badge-maker .sb-xsub{background:#f6f3fb}
html[data-theme=light] .bvk-t-twitch-sub-badge-maker .sb-xs{background:#fff}
html[data-theme=light] .bvk-t-twitch-sub-badge-maker .sb-xsT{background:#211a31}
/* geniş düzende adımlar önizleme sütununda ayrı kart */
.bvk-t-twitch-sub-badge-maker .sb-steps.sb-stepsCard{margin-top:0;padding:14px 16px;border:1px solid var(--kzk-line);background:var(--kzk-card);flex:0 0 auto}
.bvk-t-twitch-sub-badge-maker .sb-stepsCard .sb-stepList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
/* dar dışa aktarma kartı (≥1380 üç sütun): tek-tier düğmeleri 2×2, simge solda */
@container kzkc (max-width:330px){
  .bvk-t-twitch-sub-badge-maker .sb-oneBtns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bvk-t-twitch-sub-badge-maker .sb-xs{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;row-gap:1px;align-items:center;justify-items:start;padding:7px 8px;text-align:left}
  .bvk-t-twitch-sub-badge-maker .sb-xs>.sb-xsT{grid-row:1/span 2}
  .bvk-t-twitch-sub-badge-maker .sb-xs>b{align-self:end}
  .bvk-t-twitch-sub-badge-maker .sb-xs>small{align-self:start}
}