/* Color Palette Generator v2 — araca özel görünüm (kit üstüne). Kapsam: .bvk-t-color-palette-generator.
   Kural: vh/sticky/fixed yok (gömülü panel); altın yalnız birincil eylem + seçili + odak; token'lar kitten (--kzk-*). */
.bvk-t-color-palette-generator{--cp-ease:var(--kzk-ease,cubic-bezier(.2,.8,.3,1));--cp-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}
.bvk-t-color-palette-generator .cp-small{font-size:12px;color:var(--kzk-muted);line-height:1.4}
.bvk-t-color-palette-generator .cp-mt{margin:10px 0 0}
.bvk-t-color-palette-generator .cp-aside{max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bvk-t-color-palette-generator .cp-linkBtn{background:none;border:0;padding:0;font:inherit;font-size:12.5px;font-weight:600;color:var(--kzk-lilac);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.bvk-t-color-palette-generator .cp-linkBtn:hover{color:var(--kzk-text)}
.bvk-t-color-palette-generator .cp-dim{opacity:.45}
.bvk-t-color-palette-generator [aria-disabled=true]{opacity:.4;pointer-events:none}

/* ───────── değer çipleri (HEX/RGB/HSL/OKLCH) ───────── */
/* değerler asla kesilmez (… yok): dar kapta tek sütun, geniş kapta 2; gerekirse satır kırılır */
.bvk-t-color-palette-generator .cp-read,.bvk-t-color-palette-generator .cp-fmts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,262px),1fr));gap:6px}
.bvk-t-color-palette-generator .cp-read{margin-top:10px}
.bvk-t-color-palette-generator .cp-chip{display:flex;align-items:center;gap:8px;min-width:0;padding:7px 10px;border-radius:var(--kzk-r-sm,8px);background:var(--kzk-field);border:1px solid var(--kzk-line);color:var(--kzk-text);font:inherit;cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.bvk-t-color-palette-generator .cp-chip:hover{border-color:var(--kzk-line-2);background:var(--kzk-card-3)}
.bvk-t-color-palette-generator .cp-chip:focus-visible{outline:2px solid var(--kzk-gold);outline-offset:1px}
.bvk-t-color-palette-generator .cp-chipL{flex:0 0 40px;font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--kzk-faint)}
.bvk-t-color-palette-generator .cp-chipV{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere;font:600 12px/1.3 var(--cp-mono);font-variant-numeric:tabular-nums}
.bvk-t-color-palette-generator .cp-chipI{flex:none;display:grid;place-items:center;width:16px;height:16px;color:var(--kzk-muted);opacity:0;transition:opacity .15s}
.bvk-t-color-palette-generator .cp-chipI .kzk-i{width:14px;height:14px}
.bvk-t-color-palette-generator .cp-chip:hover .cp-chipI,.bvk-t-color-palette-generator .cp-chip:focus-visible .cp-chipI{opacity:1;color:var(--kzk-lilac)}
@media (hover:none){.bvk-t-color-palette-generator .cp-chipI{opacity:.7}}

/* hızlı seçim */
.bvk-t-color-palette-generator .cp-quick{display:grid;grid-template-columns:repeat(6,minmax(0,44px));gap:8px}
.bvk-t-color-palette-generator .cp-q{position:relative;width:100%;aspect-ratio:1;height:auto;padding:0;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:transform .15s var(--cp-ease)}
.bvk-t-color-palette-generator .cp-q.on{outline:2px solid var(--kzk-gold);outline-offset:2px}
.bvk-t-color-palette-generator .cp-q.on::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.bvk-t-color-palette-generator .cp-q:hover{transform:translateY(-2px)}
.bvk-t-color-palette-generator .cp-q:focus-visible{outline:2px solid var(--kzk-gold);outline-offset:2px}

/* görselden */
.bvk-t-color-palette-generator .cp-img{margin-top:12px}
.bvk-t-color-palette-generator .cp-imgChips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.bvk-t-color-palette-generator .cp-ic{display:flex;align-items:center;gap:7px;padding:5px 8px 5px 5px;border-radius:9px;border:1px solid var(--kzk-line);background:var(--kzk-field);color:var(--kzk-text);font:inherit;cursor:pointer;min-width:0}
.bvk-t-color-palette-generator .cp-ic:hover{border-color:var(--kzk-line-2)}
.bvk-t-color-palette-generator .cp-ic i{flex:none;width:22px;height:22px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.bvk-t-color-palette-generator .cp-icH{font:600 11px/1 var(--cp-mono);overflow:hidden;text-overflow:ellipsis}
.bvk-t-color-palette-generator .cp-icP{margin-left:auto;font-size:11px;color:var(--kzk-muted);font-variant-numeric:tabular-nums}
.bvk-t-color-palette-generator .cp-imgActs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px}

/* ───────── uyum glifleri ───────── */
.bvk-t-color-palette-generator .kzk-seg.cp-glyphs{gap:6px;grid-template-columns:repeat(4,minmax(0,1fr))}
.bvk-t-color-palette-generator .kzk-seg.cp-glyphs>button{flex-direction:column;gap:6px;min-height:56px;padding:8px 2px 6px;font-size:10.5px;line-height:1.15;letter-spacing:-.01em}
.bvk-t-color-palette-generator .kzk-seg.cp-glyphs>button>span{display:block;max-width:100%;overflow-wrap:normal;-webkit-hyphens:auto;hyphens:auto}
.bvk-t-color-palette-generator .cp-g{display:block;width:24px;height:24px;flex:none}
.bvk-t-color-palette-generator .cp-g .cp-f{fill:currentColor}
.bvk-t-color-palette-generator .cp-g .cp-ring{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.32}
.bvk-t-color-palette-generator .cp-g .cp-ln{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round;opacity:.55}
.bvk-t-color-palette-generator .kzk-seg.cp-glyphs>button:not(.on) .cp-g{color:var(--kzk-muted)}
.bvk-t-color-palette-generator .kzk-seg.cp-glyphs>button:not(.on):hover .cp-g{color:var(--kzk-text-2)}

/* ruh hali */
.bvk-t-color-palette-generator .kzk-seg.cp-moods{gap:6px;grid-template-columns:repeat(3,minmax(0,1fr))}
.bvk-t-color-palette-generator .kzk-seg.cp-moods>button{flex-direction:column;gap:7px;min-height:66px;padding:10px 4px 8px;font-size:12px}
.bvk-t-color-palette-generator .cp-ms{display:block;width:44px;height:16px;border-radius:999px;background:linear-gradient(90deg,var(--a) 0 33%,var(--b) 33% 66%,var(--c) 66%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.bvk-t-color-palette-generator .kzk-seg.cp-moods>button:not(.on) .cp-ms{opacity:.85}
.bvk-t-color-palette-generator .cp-tip{margin-top:14px}

/* ───────── roller ───────── */
.bvk-t-color-palette-generator .cp-theme>button{min-height:28px;padding:2px 12px;font-size:12px}
.bvk-t-color-palette-generator .kzk-sec-head>.cp-theme{margin-left:auto;flex:0 0 auto}
.bvk-t-color-palette-generator .cp-roles{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.bvk-t-color-palette-generator .cp-role{display:grid;grid-template-columns:78px minmax(0,1fr);align-items:center;gap:8px}
.bvk-t-color-palette-generator .cp-roleName{font-size:12px;font-weight:600;color:var(--kzk-text-2);overflow:hidden;text-overflow:ellipsis}
.bvk-t-color-palette-generator .kzk-seg.cp-rseg{display:flex;flex-wrap:wrap;gap:5px;background:none;border:0;padding:0;min-height:0}
.bvk-t-color-palette-generator .kzk-seg.cp-rseg{gap:4px}
.bvk-t-color-palette-generator .kzk-seg.cp-rseg>button{flex:none;width:25px;height:25px;min-height:0;padding:0;border-radius:8px;background:var(--c);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.bvk-t-color-palette-generator .kzk-seg.cp-rseg>button.cp-rAuto{width:auto;min-width:44px;padding:0 8px 0 24px;position:relative;background:var(--kzk-field);border-color:var(--kzk-line);color:var(--kzk-text-2);font-size:11px;font-weight:700;box-shadow:none}
.bvk-t-color-palette-generator .kzk-seg.cp-rseg>button.cp-rAuto::before{content:"";position:absolute;left:6px;top:50%;width:13px;height:13px;margin-top:-6.5px;border-radius:4px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.bvk-t-color-palette-generator .kzk-seg.cp-rseg>button.on{outline:2px solid var(--kzk-gold);outline-offset:1px;border-color:transparent}
.bvk-t-color-palette-generator .kzk-seg.cp-rseg>button.cp-rAuto.on{color:var(--kzk-gold);background:var(--kzk-gold-tint)}

/* kontrast */
.bvk-t-color-palette-generator .cp-con{display:flex;flex-direction:column;gap:6px}
.bvk-t-color-palette-generator .cp-conRow{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;align-items:center;gap:9px;padding:6px 8px 6px 6px;border-radius:10px;background:var(--kzk-field);border:1px solid var(--kzk-line)}
.bvk-t-color-palette-generator .cp-conS{display:grid;place-items:center;width:34px;height:28px;border-radius:7px;font:800 13px/1 "Space Grotesk",Inter,sans-serif;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.bvk-t-color-palette-generator .cp-conL{font-size:12.5px;color:var(--kzk-text-2);overflow:hidden;text-overflow:ellipsis}
.bvk-t-color-palette-generator .cp-conR{font:600 12px/1 var(--cp-mono);color:var(--kzk-text);font-variant-numeric:tabular-nums}
.bvk-t-color-palette-generator .cp-conB{min-width:40px;padding:3px 7px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.03em;text-align:center;white-space:nowrap}
.bvk-t-color-palette-generator .cp-conB[data-tone=ok]{color:var(--kzk-ok);background:color-mix(in srgb,var(--kzk-ok) 14%,transparent)}
.bvk-t-color-palette-generator .cp-conB[data-tone=warn]{color:var(--kzk-warn);background:color-mix(in srgb,var(--kzk-warn) 16%,transparent)}
.bvk-t-color-palette-generator .cp-conB[data-tone=err]{color:var(--kzk-danger);background:color-mix(in srgb,var(--kzk-danger) 15%,transparent)}
.bvk-t-color-palette-generator .cp-fix{margin-top:10px}
.bvk-t-color-palette-generator .cp-mat{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.bvk-t-color-palette-generator .cp-matDet{margin-top:12px}
.bvk-t-color-palette-generator .cp-matDet summary{display:flex;align-items:center;gap:8px}
.bvk-t-color-palette-generator .cp-matDet summary .cp-matSum{margin-left:auto;font-size:12px;font-weight:500;color:var(--kzk-muted)}
.bvk-t-color-palette-generator .cp-matRow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.15fr);align-items:center;gap:6px}
.bvk-t-color-palette-generator .cp-matHead span{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--kzk-faint);text-align:center}
.bvk-t-color-palette-generator .cp-matC{display:flex;align-items:center;gap:6px;min-width:0}
.bvk-t-color-palette-generator .cp-matC i{flex:none;width:16px;height:16px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.bvk-t-color-palette-generator .cp-matC b{font:600 11px/1 var(--cp-mono);color:var(--kzk-text-2);overflow-wrap:anywhere}
.bvk-t-color-palette-generator .cp-matCell{display:flex;align-items:center;gap:5px;padding:3px 4px 3px 3px;border-radius:8px;background:var(--kzk-field);border:1px solid var(--kzk-line);min-width:0}
.bvk-t-color-palette-generator .cp-matAa{flex:none;display:grid;place-items:center;width:24px;height:20px;border-radius:5px;font:800 11px/1 "Space Grotesk",Inter,sans-serif}
.bvk-t-color-palette-generator .cp-matR{flex:1 1 auto;font:600 11px/1 var(--cp-mono);font-variant-numeric:tabular-nums;color:var(--kzk-text)}
.bvk-t-color-palette-generator .cp-matCell .cp-conB{min-width:0;padding:2px 5px;font-size:9.5px}

/* kart galerisi */
.bvk-t-color-palette-generator .cp-cards.kzk-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bvk-t-color-palette-generator .cp-cards .kzk-tcard-thumb{background:#110f18}

/* ───────── önizleme: palet şeridi ───────── */
.bvk-t-color-palette-generator .cp-prev .kzk-prev-head{flex-wrap:wrap;row-gap:8px}
.bvk-t-color-palette-generator .cp-rnd{margin-left:auto}
.bvk-t-color-palette-generator .cp-presetTag{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bvk-t-color-palette-generator .cp-draft{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 12px;padding:8px 12px;border-radius:10px;background:var(--kzk-hl-bg);border:1px solid var(--kzk-hl-line);font-size:12.5px;color:var(--kzk-text-2)}
.bvk-t-color-palette-generator .cp-strip{display:flex;height:188px;border-radius:16px;overflow:hidden;background:var(--kzk-card-2);box-shadow:0 0 0 1px var(--kzk-line),0 18px 40px -24px rgba(0,0,0,.6)}
.bvk-t-color-palette-generator .sw{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;padding:12px 12px 12px;background:var(--c);color:var(--on);cursor:pointer;outline:none;transition:flex-grow .3s var(--cp-ease)}
.bvk-t-color-palette-generator .sw.is-sel{flex-grow:1.35}
.bvk-t-color-palette-generator .sw.is-sel::after{content:"";position:absolute;left:50%;bottom:0;width:18px;height:6px;margin-left:-9px;border-radius:6px 6px 0 0;background:var(--on);opacity:.9}
.bvk-t-color-palette-generator .cp-swSel{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:0;background:transparent;cursor:pointer;color:inherit}
.bvk-t-color-palette-generator .cp-swSel:focus{outline:none}
.bvk-t-color-palette-generator .cp-swSel:focus-visible{box-shadow:inset 0 0 0 3px var(--kzk-gold)}
.bvk-t-color-palette-generator .cp-swTop{position:absolute;z-index:2;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;gap:4px;opacity:0;transition:opacity .15s;pointer-events:none}
.bvk-t-color-palette-generator .cp-swTop>button{pointer-events:auto}
.bvk-t-color-palette-generator .cp-swRole,.bvk-t-color-palette-generator .cp-swInfo{pointer-events:none}
@media (hover:none){.bvk-t-color-palette-generator .cp-swTop{opacity:1}}
.bvk-t-color-palette-generator .sw:hover .cp-swTop,.bvk-t-color-palette-generator .sw.is-sel .cp-swTop,.bvk-t-color-palette-generator .sw:focus-within .cp-swTop{opacity:1}
.bvk-t-color-palette-generator .sw.is-locked .cp-swTop{opacity:1}
.bvk-t-color-palette-generator .sw.is-locked:not(:hover):not(.is-sel) .cp-swCopy{opacity:0}
.bvk-t-color-palette-generator .cp-swBtn{display:grid;place-items:center;width:28px;height:28px;padding:0;border-radius:8px;border:0;background:color-mix(in srgb,var(--on) 14%,transparent);color:var(--on);cursor:pointer;transition:background .15s}
.bvk-t-color-palette-generator .cp-swBtn:hover{background:color-mix(in srgb,var(--on) 26%,transparent)}
.bvk-t-color-palette-generator .cp-swBtn:focus-visible{outline:2px solid var(--kzk-gold);outline-offset:1px}
.bvk-t-color-palette-generator .cp-swBtn .kzk-i{width:15px;height:15px}
.bvk-t-color-palette-generator .sw.is-locked .cp-swLock{background:var(--on);color:var(--c)}
.bvk-t-color-palette-generator .cp-swRole{position:absolute;top:46px;left:12px;right:8px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bvk-t-color-palette-generator .cp-swInfo{display:flex;flex-direction:column;gap:3px;min-width:0}
.bvk-t-color-palette-generator .cp-swHex{font:700 14px/1.1 var(--cp-mono);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bvk-t-color-palette-generator .cp-swName{font-size:11.5px;font-weight:500;opacity:.85;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere}
.bvk-t-color-palette-generator .cp-stripFoot{display:flex;align-items:center;gap:8px 14px;margin-top:10px}
.bvk-t-color-palette-generator .cp-stripHint{flex:1 1 auto;margin:0;min-width:0}
.bvk-t-color-palette-generator .cp-conPill{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:3px 11px 3px 4px;border-radius:999px;border:1px solid var(--kzk-line);background:var(--kzk-field);color:var(--kzk-text);font:600 12px/1 var(--cp-mono);font-variant-numeric:tabular-nums;cursor:pointer;white-space:nowrap;transition:border-color .15s}
.bvk-t-color-palette-generator .cp-conPill:hover{border-color:var(--kzk-line-2)}
.bvk-t-color-palette-generator .cp-conPill:focus-visible{outline:2px solid var(--kzk-gold);outline-offset:1px}
.bvk-t-color-palette-generator .cp-conPillAa{display:grid;place-items:center;width:24px;height:22px;border-radius:999px;font:800 11px/1 "Space Grotesk",Inter,sans-serif}
.bvk-t-color-palette-generator .cp-conPill[data-tone=ok] .cp-conPillAa{color:var(--kzk-ok);background:color-mix(in srgb,var(--kzk-ok) 16%,transparent)}
.bvk-t-color-palette-generator .cp-conPill[data-tone=warn] .cp-conPillAa{color:var(--kzk-warn);background:color-mix(in srgb,var(--kzk-warn) 18%,transparent)}
.bvk-t-color-palette-generator .cp-conPill[data-tone=err] .cp-conPillAa{color:var(--kzk-danger);background:color-mix(in srgb,var(--kzk-danger) 16%,transparent)}
.bvk-t-color-palette-generator .cp-scheme{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px;min-width:0}
.bvk-t-color-palette-generator .cp-schemeL{flex:none;padding-top:6px;font-size:12px;font-weight:600;color:var(--kzk-muted)}
.bvk-t-color-palette-generator .cp-qSub{margin:12px 0 8px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--kzk-faint)}
.bvk-t-color-palette-generator .cp-qSub:first-child{margin-top:0}
.bvk-t-color-palette-generator .cp-recentWrap[hidden]{display:none}
.bvk-t-color-palette-generator .cp-recentClr{margin-left:auto;font-size:11.5px;text-transform:none;letter-spacing:0}
.bvk-t-color-palette-generator .cp-schemeScroll{flex:1 1 auto;min-width:0}
.bvk-t-color-palette-generator .kzk-seg.cp-schemeSeg{gap:5px;flex-wrap:wrap}
.bvk-t-color-palette-generator .kzk-seg.cp-schemeSeg>button{min-height:28px;padding:2px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.bvk-t-color-palette-generator .cp-add{flex:0 0 34px;display:grid;place-items:center;border:0;padding:0;background:var(--kzk-card-3);color:var(--kzk-muted);cursor:pointer;transition:color .15s,background .15s}
.bvk-t-color-palette-generator .cp-add:hover{color:var(--kzk-text);background:var(--kzk-field)}
.bvk-t-color-palette-generator .cp-add:focus-visible{outline:2px solid var(--kzk-gold);outline-offset:-2px}
.bvk-t-color-palette-generator .cp-add[hidden]{display:none}

/* seçili renk */
.bvk-t-color-palette-generator .cp-sel{margin-top:14px;padding:14px;border-radius:14px;background:var(--kzk-card-2);border:1px solid var(--kzk-line)}
.bvk-t-color-palette-generator .cp-selHead{display:flex;align-items:center;gap:10px;min-width:0}
.bvk-t-color-palette-generator .cp-selDot{flex:none;width:34px;height:34px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 4px 14px -6px rgba(0,0,0,.5)}
.bvk-t-color-palette-generator .cp-selName{display:flex;flex-direction:column;min-width:0;flex:1}
.bvk-t-color-palette-generator .cp-selName b{font:700 15px/1.2 "Space Grotesk",Inter,sans-serif;color:var(--kzk-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bvk-t-color-palette-generator .cp-selName span{font-size:12px;color:var(--kzk-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bvk-t-color-palette-generator .cp-selActs{display:flex;gap:4px;flex:none}
.bvk-t-color-palette-generator #cp-lockSel[aria-pressed=true]{color:var(--kzk-gold);border-color:var(--kzk-gold-line)}
.bvk-t-color-palette-generator .cp-selGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:12px}
.bvk-t-color-palette-generator .cp-selEdit{margin:0}
.bvk-t-color-palette-generator .cp-scaleHead{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 6px}
.bvk-t-color-palette-generator .cp-scale{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:4px}
.bvk-t-color-palette-generator .cp-sc{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:0;border:0;background:none;color:var(--kzk-muted);font:inherit;cursor:pointer;min-width:0}
.bvk-t-color-palette-generator .cp-sc i{display:block;height:30px;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:transform .15s var(--cp-ease)}
.bvk-t-color-palette-generator .cp-sc:hover i{transform:translateY(-2px)}
.bvk-t-color-palette-generator .cp-sc.is-base i{outline:2px solid var(--kzk-gold);outline-offset:1px}
.bvk-t-color-palette-generator .cp-sc:focus-visible i{outline:2px solid var(--kzk-gold);outline-offset:1px}
.bvk-t-color-palette-generator .cp-scK{font-size:10.5px;font-weight:700;text-align:center;color:var(--kzk-text-2)}
.bvk-t-color-palette-generator .cp-scV{font:500 9.5px/1 var(--cp-mono);text-align:center;overflow:hidden;text-overflow:clip;white-space:nowrap}
@container kzkc (min-width:760px){
  .bvk-t-color-palette-generator .cp-selGrid{grid-template-columns:minmax(200px,.8fr) minmax(0,1.2fr);align-items:end}
}

/* ───────── maket ───────── */
.bvk-t-color-palette-generator .cp-mockCard{margin-top:14px}
.bvk-t-color-palette-generator .kzk-col-prev{gap:14px}
.bvk-t-color-palette-generator .kzk-col-prev>.cp-mockCard{margin-top:0}
.bvk-t-color-palette-generator .cp-mockHead{flex-wrap:wrap;row-gap:8px;margin-bottom:12px}
.bvk-t-color-palette-generator .cp-mockTabs>button{min-height:28px;padding:2px 12px;font-size:12px;white-space:nowrap}
.bvk-t-color-palette-generator .cp-cbWrap{display:flex;align-items:center;gap:8px;margin-left:auto}
.bvk-t-color-palette-generator .cp-cbLab{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--kzk-text-2);white-space:nowrap}
.bvk-t-color-palette-generator .cp-cbLab .kzk-i{width:15px;height:15px;color:var(--kzk-lilac)}
.bvk-t-color-palette-generator .cp-cbWrap select{min-height:32px;padding-top:4px;padding-bottom:4px;font-size:12.5px;max-width:170px}
.bvk-t-color-palette-generator .cp-mock{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;container-type:inline-size;background:var(--bg);color:var(--txt);font-family:Inter,system-ui,sans-serif;box-shadow:0 0 0 1px var(--kzk-line)}
.bvk-t-color-palette-generator .cp-m{position:absolute;inset:0}
.bvk-t-color-palette-generator .cp-m[hidden]{display:none}

/* sahne */
.bvk-t-color-palette-generator .cp-game{position:absolute;inset:0;overflow:hidden;background:radial-gradient(120% 90% at 70% 10%,color-mix(in srgb,var(--c3x) 38%,transparent),transparent 60%),linear-gradient(180deg,color-mix(in srgb,var(--pri) 30%,var(--bg)),var(--bg) 78%)}
.bvk-t-color-palette-generator .cp-sun{position:absolute;left:47%;top:20%;width:13cqw;height:13cqw;border-radius:50%;background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 30%,var(--pri)));opacity:.85;filter:blur(.15cqw)}
.bvk-t-color-palette-generator .cp-hill{position:absolute;bottom:-12%;border-radius:50% 50% 0 0}
.bvk-t-color-palette-generator .cp-hill1{left:-10%;width:75%;height:52%;background:color-mix(in srgb,var(--pri) 45%,var(--bg))}
.bvk-t-color-palette-generator .cp-hill2{right:0;width:70%;border-radius:60% 0 0 0;height:42%;background:color-mix(in srgb,var(--surf) 70%,var(--bg))}
.bvk-t-color-palette-generator .cp-cam{position:absolute;left:3.2%;bottom:6%;width:27%;aspect-ratio:16/10;border-radius:1.4cqw;padding:.5cqw;background:linear-gradient(135deg,var(--pri),var(--acc));box-shadow:0 0 2.4cqw color-mix(in srgb,var(--pri) 55%,transparent)}
.bvk-t-color-palette-generator .cp-camIn{position:relative;width:100%;height:100%;border-radius:1cqw;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--surf) 80%,#000),var(--bg))}
.bvk-t-color-palette-generator .cp-person{position:absolute;left:50%;bottom:-8%;width:62%;height:86%;transform:translateX(-50%);background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--txt) 55%,var(--surf)) 0 17%,transparent 17.5%),radial-gradient(ellipse 50% 42% at 50% 100%,color-mix(in srgb,var(--txt) 40%,var(--surf)) 0 98%,transparent 100%)}
.bvk-t-color-palette-generator .cp-plate{position:absolute;left:50%;bottom:-1.6cqw;transform:translateX(-50%);padding:.45cqw 1.4cqw;border-radius:99px;background:var(--pri);color:var(--onp);font:700 1.45cqw/1.2 "Space Grotesk",Inter,sans-serif;white-space:nowrap;box-shadow:0 .4cqw 1.2cqw rgba(0,0,0,.35)}
.bvk-t-color-palette-generator .cp-chat{position:absolute;right:3%;top:5%;width:27%;max-height:64%;padding:1.2cqw;border-radius:1.4cqw;background:color-mix(in srgb,var(--surf) 88%,transparent);border:1px solid color-mix(in srgb,var(--txt) 10%,transparent);backdrop-filter:blur(4px);display:flex;flex-direction:column;gap:.9cqw;overflow:hidden}
.bvk-t-color-palette-generator .cp-chatHead{font:700 1.25cqw/1 "Space Grotesk",Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);padding-bottom:.8cqw;border-bottom:1px solid color-mix(in srgb,var(--txt) 10%,transparent)}
.bvk-t-color-palette-generator .cp-chat p{margin:0;font-size:1.32cqw;line-height:1.35;color:var(--txt)}
.bvk-t-color-palette-generator .cp-chat b{margin-right:.5cqw}
.bvk-t-color-palette-generator .cp-u1{color:var(--u1)}.bvk-t-color-palette-generator .cp-u2{color:var(--u2)}.bvk-t-color-palette-generator .cp-u3{color:var(--u3)}.bvk-t-color-palette-generator .cp-u4{color:var(--u4)}
.bvk-t-color-palette-generator .cp-alert{position:absolute;left:50%;top:7%;transform:translateX(-62%);display:flex;align-items:center;gap:1.2cqw;padding:1cqw 2cqw 1cqw 1cqw;border-radius:1.4cqw;background:var(--surf);border:.2cqw solid var(--acc);box-shadow:0 0 3cqw color-mix(in srgb,var(--acc) 40%,transparent)}
.bvk-t-color-palette-generator .cp-alertIc{display:grid;place-items:center;width:4.2cqw;height:4.2cqw;border-radius:1cqw;background:var(--acc);color:var(--ona);font-size:2.2cqw}
.bvk-t-color-palette-generator .cp-alert b{display:block;font:700 1.9cqw/1.1 "Space Grotesk",Inter,sans-serif;color:var(--accT)}
.bvk-t-color-palette-generator .cp-alert span{display:block;font-size:1.35cqw;color:var(--txt)}
.bvk-t-color-palette-generator .cp-goal{position:absolute;right:3%;bottom:6%;width:27%;padding:1cqw 1.2cqw;border-radius:1.2cqw;background:var(--surf);border:1px solid color-mix(in srgb,var(--txt) 10%,transparent)}
.bvk-t-color-palette-generator .cp-goalTop{display:flex;justify-content:space-between;gap:1cqw;font-size:1.25cqw;color:var(--txt);margin-bottom:.7cqw}
.bvk-t-color-palette-generator .cp-goalTop span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bvk-t-color-palette-generator .cp-goalBar{height:1.1cqw;border-radius:99px;background:color-mix(in srgb,var(--txt) 12%,transparent);overflow:hidden}
.bvk-t-color-palette-generator .cp-goalBar i{display:block;width:84%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--pri),var(--acc))}
.bvk-t-color-palette-generator .cp-lt{position:absolute;left:33%;bottom:6%;display:flex;flex-direction:column;padding:.9cqw 2cqw .9cqw 1.4cqw;border-left:.6cqw solid var(--acc);background:linear-gradient(90deg,var(--pri),color-mix(in srgb,var(--pri) 0%,transparent));color:var(--onp);border-radius:0 1cqw 1cqw 0;max-width:33%}
.bvk-t-color-palette-generator .cp-lt b{font:700 1.15cqw/1.1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.bvk-t-color-palette-generator .cp-lt span{font:700 1.9cqw/1.2 "Space Grotesk",Inter,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* paneller */
.bvk-t-color-palette-generator .cp-m-panels{padding:2.6cqw 3cqw;display:flex;flex-direction:column;gap:2cqw}
.bvk-t-color-palette-generator .cp-prof{border-radius:1.4cqw;overflow:hidden;background:var(--surf)}
.bvk-t-color-palette-generator .cp-banner{height:11cqw;background:radial-gradient(60% 120% at 80% 0%,var(--acc),transparent 70%),linear-gradient(120deg,var(--pri),color-mix(in srgb,var(--pri) 30%,var(--bg)))}
.bvk-t-color-palette-generator .cp-profRow{display:flex;align-items:center;gap:1.6cqw;padding:1.2cqw 2cqw}
.bvk-t-color-palette-generator .cp-ava{width:6.4cqw;height:6.4cqw;margin-top:-4.2cqw;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--pri));border:.5cqw solid var(--surf);flex:none}
.bvk-t-color-palette-generator .cp-profRow b{display:block;font:700 2cqw/1.1 "Space Grotesk",Inter,sans-serif;color:var(--txt)}
.bvk-t-color-palette-generator .cp-profRow span{font-size:1.3cqw;color:var(--mut)}
.bvk-t-color-palette-generator .cp-profRow>div{min-width:0;flex:1}
.bvk-t-color-palette-generator .cp-live{flex:none;padding:.4cqw 1cqw;border-radius:.6cqw;background:var(--acc);color:var(--ona)!important;font-weight:800;font-size:1.2cqw!important;letter-spacing:.06em}
.bvk-t-color-palette-generator .cp-follow{flex:none;padding:.8cqw 2cqw;border-radius:.9cqw;background:var(--pri);color:var(--onp)!important;font-weight:700;font-size:1.4cqw!important}
.bvk-t-color-palette-generator .cp-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2cqw;flex:1;min-height:0}
.bvk-t-color-palette-generator .cp-panel{display:flex;flex-direction:column;gap:1cqw;border-radius:1.2cqw;background:var(--surf);overflow:hidden;padding-bottom:1.4cqw}
.bvk-t-color-palette-generator .cp-ph{padding:1.5cqw 1.6cqw;font:700 1.9cqw/1 "Space Grotesk",Inter,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.bvk-t-color-palette-generator .cp-ph1{background:var(--pri);color:var(--onp)}
.bvk-t-color-palette-generator .cp-ph2{background:var(--acc);color:var(--ona)}
.bvk-t-color-palette-generator .cp-ph3{background:linear-gradient(90deg,var(--pri),var(--acc));color:var(--onp)}
.bvk-t-color-palette-generator .cp-panel p{margin:0 1.6cqw;font-size:1.35cqw;line-height:1.4;color:var(--txt)}
.bvk-t-color-palette-generator .cp-panel i{display:block;height:.9cqw;margin:0 1.6cqw;border-radius:99px;background:color-mix(in srgb,var(--txt) 14%,transparent)}
.bvk-t-color-palette-generator .cp-panel i:nth-of-type(2){width:60%}.bvk-t-color-palette-generator .cp-panel i:nth-of-type(3){width:80%}.bvk-t-color-palette-generator .cp-panel i:nth-of-type(4){width:45%}
.bvk-t-color-palette-generator .cp-pp{display:block;margin:auto 1.6cqw 0;height:3.4cqw;border-radius:.9cqw;background:color-mix(in srgb,var(--pri) 22%,var(--surf));border:1px solid color-mix(in srgb,var(--pri) 45%,transparent)}
.bvk-t-color-palette-generator .cp-panel:nth-child(2) .cp-pp{background:color-mix(in srgb,var(--acc) 22%,var(--surf));border-color:color-mix(in srgb,var(--acc) 45%,transparent)}

/* marka kiti */
.bvk-t-color-palette-generator .cp-m-kit{display:grid;grid-template-columns:1.25fr 1fr;gap:3cqw;padding:4cqw}
.bvk-t-color-palette-generator .cp-kitL{display:flex;flex-direction:column;justify-content:center;gap:1.6cqw;min-width:0}
.bvk-t-color-palette-generator .cp-eyebrow{font-size:1.3cqw;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accT)}
.bvk-t-color-palette-generator .cp-h{font:700 4.1cqw/1.05 "Space Grotesk",Inter,sans-serif;color:var(--txt);letter-spacing:-.01em}
.bvk-t-color-palette-generator .cp-body{margin:0;font-size:1.65cqw;line-height:1.5;color:var(--mut)}
.bvk-t-color-palette-generator .cp-btns{display:flex;flex-wrap:wrap;gap:1.2cqw;margin-top:.6cqw}
.bvk-t-color-palette-generator .cp-btns span{padding:1.1cqw 2.2cqw;border-radius:1cqw;font-weight:700;font-size:1.55cqw}
.bvk-t-color-palette-generator .cp-btnP{background:var(--pri);color:var(--onp)}
.bvk-t-color-palette-generator .cp-btnS{border:.2cqw solid var(--acc);color:var(--accT)}
.bvk-t-color-palette-generator .cp-btnG{color:var(--txt);background:color-mix(in srgb,var(--txt) 9%,transparent)}
.bvk-t-color-palette-generator .cp-kitR{display:flex;flex-direction:column;justify-content:center;gap:2cqw;min-width:0}
.bvk-t-color-palette-generator .cp-kcard{position:relative;display:flex;flex-direction:column;gap:1.1cqw;padding:2cqw;border-radius:1.6cqw;background:var(--surf);border:1px solid color-mix(in srgb,var(--txt) 10%,transparent)}
.bvk-t-color-palette-generator .cp-kcard b{font:700 2.2cqw/1.1 "Space Grotesk",Inter,sans-serif;color:var(--txt)}
.bvk-t-color-palette-generator .cp-kTag{align-self:flex-start;padding:.3cqw .9cqw;border-radius:.6cqw;background:var(--acc);color:var(--ona);font-size:1.1cqw;font-weight:800;letter-spacing:.06em}
.bvk-t-color-palette-generator .cp-muted{font-size:1.3cqw;color:var(--mut)}
.bvk-t-color-palette-generator .cp-kcard .cp-goalBar{height:1.2cqw}
.bvk-t-color-palette-generator .cp-kcard .cp-goalBar i{width:70%}
.bvk-t-color-palette-generator .cp-chips{display:flex;height:5cqw;border-radius:1.2cqw;overflow:hidden;box-shadow:0 0 0 1px color-mix(in srgb,var(--txt) 12%,transparent)}
.bvk-t-color-palette-generator .cp-chips i{flex:1}

/* ───────── dışa aktarma ───────── */
.bvk-t-color-palette-generator .cp-fmt{gap:6px;margin-bottom:10px}
.bvk-t-color-palette-generator .cp-fmt>button{min-height:32px;padding:4px 11px;font-weight:600;font-size:12.5px}
.bvk-t-color-palette-generator .cp-code{margin:0;max-height:168px;overflow:auto;padding:10px 12px;border-radius:10px;background:var(--kzk-field);border:1px solid var(--kzk-line);color:var(--kzk-text-2);font:500 11.5px/1.55 var(--cp-mono);white-space:pre-wrap;overflow-wrap:anywhere;scrollbar-width:thin;scrollbar-color:var(--kzk-line-2) transparent}
.bvk-t-color-palette-generator .cp-code:focus-visible{outline:2px solid var(--kzk-gold);outline-offset:1px}
.bvk-t-color-palette-generator .cp-exp .kzk-exp-set{margin-bottom:12px}
.bvk-t-color-palette-generator .cp-xsec{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--kzk-line)}
.bvk-t-color-palette-generator .cp-xhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 8px}
.bvk-t-color-palette-generator .cp-xhead .cp-small{font-size:11.5px}
.bvk-t-color-palette-generator .cp-size>button{white-space:nowrap;font-size:12px;padding-left:4px;padding-right:4px}
.bvk-t-color-palette-generator .cp-xrow{display:flex;flex-wrap:wrap;gap:6px}
.bvk-t-color-palette-generator .cp-xrow .kzk-btn{flex:1 1 150px;justify-content:center;text-decoration:none}
.bvk-t-color-palette-generator .cp-toasts:empty{display:none}
.bvk-t-color-palette-generator .cp-fmtHint{margin:-2px 0 10px}
.bvk-t-color-palette-generator .cp-imgIntro{margin:0 0 12px}
/* dar dışa aktarma kartında 7 biçim düzenli 4+3 ızgara (tek başına satıra düşen çip yok) */
@container cpx (max-width:639px){.bvk-t-color-palette-generator .cp-exp .kzk-exp-set>.kzk-seg.cp-fmt{display:grid;grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));align-self:stretch}.bvk-t-color-palette-generator .kzk-seg.cp-fmt>button{padding-left:4px;padding-right:4px;justify-content:center}}
.bvk-t-color-palette-generator .cp-grad{display:flex;flex-direction:column;gap:8px;margin:0 0 10px}
.bvk-t-color-palette-generator .cp-grad[hidden]{display:none}
.bvk-t-color-palette-generator .cp-gradBar{height:34px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.bvk-t-color-palette-generator .cp-grad .kzk-field{margin:0}
.bvk-t-color-palette-generator .kzk-seg.cp-files>button small{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bvk-t-color-palette-generator .cp-xsec>.cp-small{margin:0}

/* ───────── hazır paletler ───────── */
.bvk-t-color-palette-generator .cp-palsHead{flex-wrap:wrap;row-gap:8px}
.bvk-t-color-palette-generator .cp-save{margin-left:auto}
.bvk-t-color-palette-generator .cp-ptabs{gap:6px;margin:4px 0 12px}
.bvk-t-color-palette-generator .cp-ptabs>button{min-height:30px;padding:3px 12px;font-size:12.5px;font-weight:600;white-space:nowrap}
.bvk-t-color-palette-generator .cp-ptabs .cp-n{margin-left:5px;font-weight:500;color:var(--kzk-muted);font-variant-numeric:tabular-nums}
.bvk-t-color-palette-generator .cp-presets.kzk-cards{--kzk-ar:16/9;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bvk-t-color-palette-generator .cp-presets .kzk-tcard-thumb{background:transparent}
.bvk-t-color-palette-generator .cp-presets.is-empty{display:none}
.bvk-t-color-palette-generator .cp-palsFoot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;margin-top:12px}
@container kzkc (min-width:520px){.bvk-t-color-palette-generator .cp-presets.kzk-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container kzkc (min-width:860px){.bvk-t-color-palette-generator .cp-presets.kzk-cards{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* ───────── düzen ───────── */
@container kzk (max-width:859px){
  .bvk-t-color-palette-generator .cp-opts>.kzk-railwrap{min-height:0;flex:0 0 auto}
  .bvk-t-color-palette-generator .cp-opts .kzk-panes{min-height:0!important}
  /* tek sütun: palet → seçenekler → canlı maket → dışa aktarma (kontrol ile sonuç yan yana kalsın) */
  .bvk-t-color-palette-generator .kzk-ws.kzk-ws--rail{grid-template-areas:"prev" "opts" "mock" "exp" "more"}
  .bvk-t-color-palette-generator .kzk-col-prev{display:contents}
  .bvk-t-color-palette-generator .kzk-col-prev>.cp-prev{grid-area:prev;min-width:0}
  .bvk-t-color-palette-generator .kzk-col-prev>.cp-mockCard{grid-area:mock;min-width:0}
}
@container kzk (min-width:860px){
  /* opts | palet kartı; altında canlı maket tam genişlik, sonra dışa aktarma (ray, palet kartı boyunda) */
  .bvk-t-color-palette-generator .kzk-ws.kzk-ws--rail{grid-template-columns:minmax(360px,392px) minmax(0,1fr);grid-template-areas:"opts prev" "mock mock" "exp exp" "more more";grid-template-rows:auto auto auto auto}
  .bvk-t-color-palette-generator .kzk-col-prev{display:contents}
  .bvk-t-color-palette-generator .kzk-col-prev>.cp-prev{grid-area:prev;min-width:0}
  .bvk-t-color-palette-generator .kzk-col-prev>.cp-mockCard{grid-area:mock;min-width:0}
  .bvk-t-color-palette-generator .kzk-col-opts{contain:size;min-height:640px}
  .bvk-t-color-palette-generator .kzk-col-opts>.cp-opts{flex:1 1 auto;min-height:0;height:100%}
  .bvk-t-color-palette-generator .cp-opts>.kzk-railwrap{min-height:0;height:100%;grid-template-rows:minmax(0,1fr)}
  .bvk-t-color-palette-generator .cp-opts .kzk-panes{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--kzk-line-2) transparent}
  .bvk-t-color-palette-generator .kzk-col-more{align-self:start}
}
/* geniş ekranda da dışa aktarma tam genişlik iki sütunlu kart (dar üçüncü sütun yerine) */
/* geniş: sol sütun seçenekler + dışa aktarma, sağ sütun palet + canlı maket (maket kartı dışa aktarma boyunca uzar) */
@container kzk (min-width:1180px){
  .bvk-t-color-palette-generator .kzk-ws.kzk-ws--rail{grid-template-columns:minmax(372px,404px) minmax(0,1fr);grid-template-areas:"opts prev" "exp mock" "more more"}
  .bvk-t-color-palette-generator .kzk-col-prev>.cp-mockCard{display:flex;flex-direction:column}
  .bvk-t-color-palette-generator .cp-mockCard>.cp-mock{flex:1 1 auto}
}
/* geniş dışa aktarma kartı (860–1379: tam genişlik satır): kod | dosyalar yan yana */
.bvk-t-color-palette-generator .cp-exp{container-name:kzkc cpx;container-type:inline-size}
.bvk-t-color-palette-generator .cp-expSide>.cp-xsec:first-child{margin-top:16px}
@container cpx (min-width:640px){
  .bvk-t-color-palette-generator .cp-expIn>div{min-width:0}
  .bvk-t-color-palette-generator .cp-expIn{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:26px;align-items:start}
  .bvk-t-color-palette-generator .cp-expSide>.cp-xsec:first-child{margin-top:0;padding-top:0;border-top:0}
}
@supports not (container-type:inline-size){.bvk-t-color-palette-generator .cp-expIn{display:block}}
/* telefon */
@container kzk (max-width:600px){
  .bvk-t-color-palette-generator .cp-strip{height:auto;flex-direction:column;border-radius:14px}
  .bvk-t-color-palette-generator .sw{flex:0 0 auto;min-height:52px;flex-direction:row;align-items:center;padding:8px 10px 8px 14px}
  .bvk-t-color-palette-generator .sw.is-sel{flex-grow:0;min-height:64px}
  .bvk-t-color-palette-generator .sw.is-sel::after{left:0;top:50%;bottom:auto;width:5px;height:20px;margin:-10px 0 0;border-radius:0 5px 5px 0}
  .bvk-t-color-palette-generator .cp-swInfo{flex-direction:row;align-items:baseline;gap:10px;flex:1}
  .bvk-t-color-palette-generator .cp-swTop{position:relative;top:auto;left:auto;right:auto;order:3;opacity:1;flex:none;gap:4px}
  .bvk-t-color-palette-generator .sw:not(.is-sel):not(.is-locked) .cp-swTop .cp-swLock{opacity:.55}
  .bvk-t-color-palette-generator .sw.is-locked:not(:hover):not(.is-sel) .cp-swCopy{opacity:1}
  .bvk-t-color-palette-generator .cp-swRole{position:static;order:2;flex:none;max-width:30%;margin-right:8px}
  .bvk-t-color-palette-generator .cp-add{flex:0 0 40px}
  .bvk-t-color-palette-generator .cp-scale{grid-template-columns:repeat(11,44px);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:thin;scrollbar-color:var(--kzk-line-2) transparent}
  .bvk-t-color-palette-generator .cp-sc{scroll-snap-align:start}
  .bvk-t-color-palette-generator .cp-swTop{position:relative}
  .bvk-t-color-palette-generator .cp-schemeScroll{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .bvk-t-color-palette-generator .cp-schemeScroll::-webkit-scrollbar{display:none}
  .bvk-t-color-palette-generator .kzk-seg.cp-schemeSeg{flex-wrap:nowrap;width:max-content;padding-right:24px}
  .bvk-t-color-palette-generator .cp-stripFoot{flex-wrap:wrap}
  .bvk-t-color-palette-generator .cp-cbWrap{margin-left:0;width:100%}
  .bvk-t-color-palette-generator .cp-cbWrap select{max-width:none;flex:1}
  .bvk-t-color-palette-generator .cp-mock{aspect-ratio:4/3}
  .bvk-t-color-palette-generator .cp-m-scene .cp-lt{display:none}
  .bvk-t-color-palette-generator .cp-chat{width:36%;height:58%}
  .bvk-t-color-palette-generator .cp-cam{width:40%}
  .bvk-t-color-palette-generator .cp-goal{width:40%}
  .bvk-t-color-palette-generator .cp-m-kit{grid-template-columns:1fr;padding:4cqw 5cqw;gap:3cqw}
  .bvk-t-color-palette-generator .cp-h{font-size:5.6cqw}
  .bvk-t-color-palette-generator .cp-body{font-size:2.6cqw}
  .bvk-t-color-palette-generator .cp-btns span{font-size:2.5cqw}
  .bvk-t-color-palette-generator .cp-kitR{flex-direction:row;align-items:stretch}
  .bvk-t-color-palette-generator .cp-kcard{flex:1}
  .bvk-t-color-palette-generator .cp-kcard b{font-size:3cqw}
  .bvk-t-color-palette-generator .cp-chips{flex:0 0 30%;height:auto;flex-direction:column}
}
@container kzkc (max-width:360px){
  .bvk-t-color-palette-generator .cp-imgChips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bvk-t-color-palette-generator .kzk-seg.cp-moods{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container kzkc (max-width:279px){.bvk-t-color-palette-generator .cp-role{grid-template-columns:minmax(0,1fr)}}

/* açık tema */
html[data-theme=light] .bvk-t-color-palette-generator .cp-strip{box-shadow:0 0 0 1px var(--kzk-line),0 18px 40px -26px rgba(40,20,80,.35)}
html[data-theme=light] .bvk-t-color-palette-generator .cp-q,html[data-theme=light] .bvk-t-color-palette-generator .kzk-seg.cp-rseg>button:not(.cp-rAuto){border-color:rgba(0,0,0,.1)}
html[data-theme=light] .bvk-t-color-palette-generator .cp-sc i,html[data-theme=light] .bvk-t-color-palette-generator .cp-ic i,html[data-theme=light] .bvk-t-color-palette-generator .cp-selDot,html[data-theme=light] .bvk-t-color-palette-generator .cp-matC i,html[data-theme=light] .bvk-t-color-palette-generator .cp-gradBar{box-shadow:inset 0 0 0 1px rgba(0,0,0,.13)}
html[data-theme=light] .bvk-t-color-palette-generator .sw{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
html[data-theme=light] .bvk-t-color-palette-generator .cp-cards .kzk-tcard-thumb{background:#ece9f3}
@media (prefers-reduced-motion:reduce){.bvk-t-color-palette-generator .sw,.bvk-t-color-palette-generator .cp-q,.bvk-t-color-palette-generator .cp-sc i{transition:none}}
.bvk-t-color-palette-generator .cp-exp .kzk-exp-set{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0}
.bvk-t-color-palette-generator .cp-exp .kzk-exp-set>.cp-fmt{align-self:flex-start}

/* renk çemberi */
.bvk-t-color-palette-generator .cp-wheelWrap{display:flex;align-items:center;gap:16px}
.bvk-t-color-palette-generator .cp-wheel{position:relative;flex:none;width:128px;height:128px;border-radius:50%;background:radial-gradient(circle,var(--kzk-card) 0 17%,transparent 18%),radial-gradient(circle,rgba(128,128,128,.9),rgba(128,128,128,0) 70%),conic-gradient(from 90deg,hsl(0 85% 58%),hsl(60 85% 55%),hsl(120 75% 48%),hsl(180 80% 48%),hsl(240 85% 62%),hsl(300 80% 58%),hsl(360 85% 58%));box-shadow:0 0 0 1px var(--kzk-line),inset 0 0 0 1px rgba(255,255,255,.1)}
.bvk-t-color-palette-generator .cp-wheelHole{display:none}
.bvk-t-color-palette-generator .cp-wd{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;padding:0;border-radius:50%;border:2.5px solid #fff;background:var(--c);box-shadow:0 2px 8px rgba(0,0,0,.45);cursor:pointer;transition:transform .15s var(--cp-ease)}
.bvk-t-color-palette-generator .cp-wd:hover{transform:scale(1.15)}
.bvk-t-color-palette-generator .cp-wd.is-sel{width:26px;height:26px;margin:-13px 0 0 -13px;border-color:var(--kzk-gold);z-index:2}
.bvk-t-color-palette-generator .cp-wd.is-base::after{content:"";position:absolute;inset:4px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85)}
.bvk-t-color-palette-generator .cp-wd:focus-visible{outline:2px solid var(--kzk-gold);outline-offset:2px}
.bvk-t-color-palette-generator .cp-wheelTxt{margin:0}
@container kzkc (max-width:250px){.bvk-t-color-palette-generator .cp-wheelWrap{flex-direction:column;align-items:flex-start}}
/* KİT EKSİĞİ: ray 64px ve etiketler tek satır kesiliyor ('Harm…', de 'Stimm…') → bu kapsamda biraz daha geniş ray, iki satıra
   heceyle bölünebilen etiket */
@container kzk (max-width:440px){.bvk-t-color-palette-generator .cp-countTag{display:none}}
@container kzk (min-width:600px){
  .bvk-t-color-palette-generator .cp-opts .kzk-railwrap{grid-template-columns:74px minmax(0,1fr)}
  .bvk-t-color-palette-generator .cp-opts .kzk-rail-btn>span{white-space:normal;text-overflow:clip;font-size:10.5px;line-height:1.15;text-align:center;overflow-wrap:normal;-webkit-hyphens:auto;hyphens:auto}
}