/* Kuwal Store components (P0b). Generic --ks-* tokens only; theme differences come from token values
plus a few [data-theme] finishing touches at the end of each component. Mobile-first. */
/* ---------- Buttons ---------- */
.ks-btn {
--_h: 48px; --_px: 24px;
position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: var(--_h); padding: 0 var(--_px); border: 2px solid transparent; border-radius: var(--ks-r-btn);
font-family: var(--ks-font-display); font-size: 1rem; font-weight: 600; line-height: 1.1; letter-spacing: 0;
text-decoration: none; text-align: center; white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent;
background: var(--ks-surface); color: var(--ks-text); cursor: pointer;
transition: transform var(--ks-dur-1) var(--ks-ease-out), box-shadow var(--ks-dur-1) var(--ks-ease-out), background-color var(--ks-dur-1) var(--ks-ease), border-color var(--ks-dur-1) var(--ks-ease), color var(--ks-dur-1) var(--ks-ease), opacity var(--ks-dur-1) var(--ks-ease);
}
.ks-btn:hover { color: inherit; }
.ks-btn::after { content: ""; position: absolute; inset: -4px -2px; } /* 44px minimum hit area */
.ks-btn svg, .ks-btn i { flex: none; }
.ks-btn--sm { --_h: 40px; --_px: 16px; font-size: .9375rem; }
.ks-btn--lg { --_h: 56px; --_px: 32px; font-size: 1.0625rem; }
.ks-btn--block { display: flex; width: 100%; }
.ks-btn--icon { --_px: 0; width: var(--_h); padding: 0; }
.ks-btn--primary { background: var(--ks-btn-bg); color: var(--ks-on-primary); border-color: transparent; box-shadow: var(--ks-btn-shadow); }
.ks-btn--primary:hover { background: var(--ks-btn-bg-hover); color: var(--ks-on-primary); box-shadow: var(--ks-btn-shadow-hover); transform: translateY(-1px); }
.ks-btn--primary:active { transform: translateY(var(--ks-btn-press)); box-shadow: var(--ks-btn-shadow-active); }
.ks-btn--secondary { background: var(--ks-surface); color: var(--ks-primary-ink); border-color: var(--ks-primary); }
.ks-btn--secondary:hover { background: var(--ks-primary-tint); color: var(--ks-primary-ink); transform: translateY(-1px); }
.ks-btn--secondary:active { transform: translateY(1px); }
.ks-btn--ghost { background: transparent; color: var(--ks-text); border-color: transparent; }
.ks-btn--ghost:hover { background: var(--ks-surface-2); color: var(--ks-text); }
.ks-btn--ghost:active { transform: scale(.98); }
.ks-btn[disabled], .ks-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; box-shadow: none; transform: none; }
.ks-btn.is-loading, .ks-btn[aria-busy="true"] { pointer-events: none; color: transparent !important; }
.ks-btn.is-loading::before, .ks-btn[aria-busy="true"]::before {
content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: var(--ks-on-primary); border-radius: 50%; animation: ks-spin .7s linear infinite;
}
.ks-btn--secondary.is-loading::before, .ks-btn--ghost.is-loading::before { border-color: var(--ks-border-strong); border-top-color: var(--ks-primary); }
@keyframes ks-spin { to { transform: rotate(360deg); } }
/* theme finishing */
[data-theme="software"] .ks-btn--secondary { border-width: 1px; border-color: var(--ks-border-strong); color: var(--ks-text); }
[data-theme="software"] .ks-btn--secondary:hover { border-color: var(--ks-primary); color: var(--ks-primary-ink); }
[data-theme="games"] .ks-btn { font-weight: 800; }
[data-theme="games"] .ks-btn--secondary { background: rgba(255, 255, 255, .06); color: var(--ks-text); border-color: var(--ks-border-strong); }
[data-theme="games"] .ks-btn--secondary:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: var(--ks-text); }
/* per-game accent CTA (dark text on bright accent); set --g-accent/--g-accent2/--g-rgb on an ancestor */
[data-theme="games"] .ks-btn--accent { background: linear-gradient(90deg, var(--g-accent, #f59e0b), var(--g-accent2, #f4726a)); color: #0B1020; box-shadow: 0 6px 24px rgba(var(--g-rgb, 245, 158, 11), .4); }
[data-theme="games"] .ks-btn--accent:hover { color: #0B1020; box-shadow: 0 8px 36px rgba(var(--g-rgb, 245, 158, 11), .6); transform: translateY(-1px); }
/* Apple-style text link with chevron: "Keşfet ›" */
.ks-link-arrow { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-family: var(--ks-font-display); font-weight: 600; font-size: 1.0625rem; color: var(--ks-primary-ink); text-decoration: none; }
.ks-link-arrow::after { content: ""; width: .5em; height: .5em; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--ks-dur-2) var(--ks-ease-out); }
.ks-link-arrow:hover { color: var(--ks-primary-hover); text-decoration: underline; }
.ks-link-arrow:hover::after { transform: translateX(3px) rotate(45deg); }
[data-theme="games"] .ks-link-arrow:hover { color: var(--ks-text); }
/* ---------- Chips ---------- */
.ks-chip {
position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px;
border: 1.5px solid var(--ks-border-strong); border-radius: var(--ks-r-pill); background: var(--ks-surface); color: var(--ks-text);
font-family: var(--ks-font-display); font-size: .9375rem; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
transition: background-color var(--ks-dur-1) var(--ks-ease), border-color var(--ks-dur-1) var(--ks-ease), color var(--ks-dur-1) var(--ks-ease), transform var(--ks-dur-2) var(--ks-ease-spring);
}
.ks-chip::after { content: ""; position: absolute; inset: -2px 0; }
.ks-chip:hover { background: var(--ks-primary-tint); border-color: var(--ks-primary); color: var(--ks-primary-ink); }
.ks-chip:active { transform: scale(.96); }
.ks-chip__count { font-size: .8125rem; font-weight: 600; color: var(--ks-muted); }
.ks-chip.is-active, html.ks .ks-chip[aria-pressed="true"], html.ks .ks-chip[aria-current="true"], html.ks .ks-chip[aria-selected="true"] { background: var(--ks-btn-bg); border-color: transparent; color: var(--ks-on-primary); }
.ks-chip.is-active .ks-chip__count, .ks-chip[aria-pressed="true"] .ks-chip__count { color: inherit; opacity: .85; }
.ks-chip--sm { min-height: 32px; padding: 0 12px; font-size: .8125rem; }
.ks-chips { display: flex; gap: var(--ks-s-2); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px 2px; }
.ks-chips::-webkit-scrollbar { display: none; }
.ks-chips > * { flex: none; scroll-snap-align: start; }
.ks-chips--wrap { flex-wrap: wrap; overflow: visible; }
[data-theme="software"] .ks-chip { border-radius: var(--ks-r-md); }
[data-theme="games"] .ks-chip { font-weight: 700; background: rgba(255, 255, 255, .05); }
/* ---------- Badges ---------- */
.ks-badge {
display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 10px; border-radius: var(--ks-r-pill);
font-family: var(--ks-font-display); font-size: .75rem; font-weight: 700; line-height: 1.2; white-space: nowrap;
background: var(--ks-primary-tint); color: var(--ks-primary-ink);
}
.ks-badge--new { background: var(--ks-accent-tint); color: var(--ks-success); }
.ks-badge--sale { background: var(--ks-btn-bg); color: var(--ks-on-primary); }
.ks-badge--soon { background: var(--ks-warning-tint); color: var(--ks-warning); }
.ks-badge--muted { background: var(--ks-surface-2); color: var(--ks-muted); }
.ks-badge--success { background: var(--ks-success-tint); color: var(--ks-success); }
.ks-badge--warning { background: var(--ks-warning-tint); color: var(--ks-warning); }
.ks-badge--danger { background: var(--ks-danger-tint); color: var(--ks-danger); }
.ks-badge--accent { background: var(--ks-accent-tint); color: var(--ks-text); }
[data-theme="software"] .ks-badge { border-radius: 6px; }
[data-theme="games"] .ks-badge { border: 1px solid var(--ks-border); }
[data-theme="games"] .ks-badge--sale { border-color: transparent; }
/* ---------- Card ---------- */
.ks-card {
position: relative; display: block; background: var(--ks-surface); color: var(--ks-text); border: var(--ks-card-border);
border-radius: var(--ks-r-lg); box-shadow: var(--ks-sh-1); overflow: hidden;
transition: transform var(--ks-dur-2) var(--ks-ease-out), box-shadow var(--ks-dur-2) var(--ks-ease-out), border-color var(--ks-dur-2) var(--ks-ease);
}
.ks-card__body { padding: var(--ks-s-4); }
.ks-card__media { position: relative; overflow: hidden; background: var(--ks-primary-tint); aspect-ratio: 4 / 5; }
.ks-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ks-card--pad { padding: var(--ks-s-5); }
.ks-card--flat { box-shadow: none; }
.ks-card--soft { background: var(--ks-surface-2); border-color: transparent; box-shadow: none; }
.ks-card--interactive:hover, a.ks-card:hover { transform: translateY(-4px); box-shadow: var(--ks-sh-2); }
[data-theme="software"] .ks-card--interactive:hover, [data-theme="software"] a.ks-card:hover { transform: translateY(-2px); border-color: var(--ks-border-strong); }
[data-theme="games"] .ks-card { background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0)), var(--ks-surface); }
[data-theme="games"] .ks-card--interactive:hover, [data-theme="games"] a.ks-card:hover { border-color: rgba(var(--g-rgb, 139, 92, 246), .5); box-shadow: 0 0 48px rgba(var(--g-rgb, 139, 92, 246), .25), var(--ks-sh-2); }
@media (min-width: 768px) { .ks-card__body { padding: var(--ks-s-5); } }
/* ---------- Forms ---------- */
.ks-field { display: flex; flex-direction: column; gap: 6px; }
.ks-label { font-size: .875rem; font-weight: 700; color: var(--ks-text); }
.ks-help { font-size: .8125rem; color: var(--ks-muted); }
.ks-error { display: flex; align-items: flex-start; gap: 6px; font-size: .8125rem; font-weight: 600; color: var(--ks-danger); }
.ks-error::before { content: "!"; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--ks-danger); color: var(--ks-bg); font-size: 11px; font-weight: 800; line-height: 16px; text-align: center; }
.ks-input, .ks-select, .ks-textarea {
width: 100%; min-height: 48px; padding: 10px 16px; border: 2px solid var(--ks-border); border-radius: var(--ks-r-input);
background: var(--ks-surface); color: var(--ks-text); font-family: var(--ks-font-body); font-size: 1rem; line-height: 1.4;
transition: border-color var(--ks-dur-1) var(--ks-ease), box-shadow var(--ks-dur-1) var(--ks-ease), background-color var(--ks-dur-1) var(--ks-ease);
}
.ks-textarea { min-height: 120px; resize: vertical; }
.ks-input::placeholder, .ks-textarea::placeholder { color: var(--ks-muted); opacity: .8; }
.ks-input:hover, .ks-select:hover, .ks-textarea:hover { border-color: var(--ks-border-strong); }
.ks-input:focus, html.ks .ks-select:focus, html.ks .ks-textarea:focus { outline: none; border-color: var(--ks-primary); box-shadow: 0 0 0 4px var(--ks-primary-tint); }
.ks-input[aria-invalid="true"], .ks-select[aria-invalid="true"], .ks-textarea[aria-invalid="true"] { border-color: var(--ks-danger); background: var(--ks-danger-tint); }
.ks-input:disabled, .ks-select:disabled, .ks-textarea:disabled { opacity: .55; cursor: not-allowed; }
.ks-select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--ks-muted) 50%), linear-gradient(135deg, var(--ks-muted) 50%, transparent 50%); background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.ks-select option { background: var(--ks-surface); color: var(--ks-text); }
[data-theme="software"] .ks-input, [data-theme="software"] .ks-select, [data-theme="software"] .ks-textarea { border-width: 1px; min-height: 44px; }
[data-theme="games"] .ks-input, [data-theme="games"] .ks-select, [data-theme="games"] .ks-textarea { background-color: rgba(255, 255, 255, .04); }
[data-theme="games"] .ks-input:focus, html.ks [data-theme="games"] .ks-select:focus, html.ks [data-theme="games"] .ks-textarea:focus { box-shadow: 0 0 0 4px rgba(139, 92, 246, .28); }
.ks-check { display: inline-flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; cursor: pointer; font-size: .9375rem; line-height: 1.4; }
.ks-check input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 2px solid var(--ks-border-strong); border-radius: 7px; background: var(--ks-surface); display: grid; place-content: center; cursor: pointer; transition: background-color var(--ks-dur-1) var(--ks-ease), border-color var(--ks-dur-1) var(--ks-ease), transform var(--ks-dur-2) var(--ks-ease-spring); }
.ks-check input[type="radio"] { border-radius: 50%; }
.ks-check input::after { content: ""; width: 10px; height: 6px; border-left: 2.5px solid var(--ks-on-primary); border-bottom: 2.5px solid var(--ks-on-primary); transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform var(--ks-dur-1) var(--ks-ease-spring); }
.ks-check input[type="radio"]::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--ks-on-primary); transform: scale(0); }
.ks-check input:checked { background: var(--ks-primary-hover); border-color: var(--ks-primary-hover); }
[data-theme="games"] .ks-check input:checked { background: #7C3AED; border-color: #7C3AED; }
.ks-check input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.ks-check input[type="radio"]:checked::after { transform: scale(1); }
.ks-check input:active { transform: scale(.9); }
[data-theme="software"] .ks-check input { border-radius: 5px; }
[data-theme="software"] .ks-check input[type="radio"] { border-radius: 50%; }
/* ---------- Price ---------- */
.ks-price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-family: var(--ks-font-display); }
.ks-price__now { font-size: 1.125rem; font-weight: 700; color: var(--ks-text); font-variant-numeric: tabular-nums; }
.ks-price__old { font-size: .875rem; font-weight: 500; color: var(--ks-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.ks-price__badge { align-self: center; }
.ks-price--lg .ks-price__now { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.ks-price--lg .ks-price__old { font-size: 1.0625rem; }
[data-theme="software"] .ks-price__now { letter-spacing: -.02em; }
[data-theme="games"] .ks-price__now { font-weight: 800; }
/* ---------- Stars (CSS-only) ----------
4,6 (128) */
.ks-stars { display: inline-flex; align-items: center; gap: 8px; --_star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.6 5.5 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L1.4 7.9l6-.8z' fill='%23000' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ks-stars__bar {
width: 80px; height: 16px; flex: none;
background: linear-gradient(90deg, var(--ks-star) calc(var(--rating, 0) / 5 * 100%), var(--ks-border-strong) 0);
-webkit-mask: var(--_star) 0 0 / 16px 16px repeat-x; mask: var(--_star) 0 0 / 16px 16px repeat-x;
}
.ks-stars__num { font-size: .8125rem; color: var(--ks-muted); font-weight: 600; }
/* ---------- Empty state ---------- */
.ks-empty { display: flex; flex-direction: column; align-items: center; gap: var(--ks-s-3); padding: var(--ks-s-8) var(--ks-s-4); text-align: center; }
.ks-empty__art { width: 160px; max-width: 50%; margin-bottom: var(--ks-s-2); }
.ks-empty__title { font-family: var(--ks-font-display); font-size: 1.25rem; font-weight: var(--ks-h-weight); }
.ks-empty__text { max-width: 36ch; color: var(--ks-muted); }
.ks-empty .ks-btn { margin-top: var(--ks-s-2); }
/* ---------- Breadcrumb ---------- */
.ks-breadcrumb { font-size: .875rem; color: var(--ks-muted); }
.ks-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; list-style: none; }
.ks-breadcrumb li { display: inline-flex; align-items: center; }
.ks-breadcrumb li + li::before { content: ""; width: 6px; height: 6px; margin: 0 10px; border-right: 1.5px solid var(--ks-muted); border-top: 1.5px solid var(--ks-muted); transform: rotate(45deg); opacity: .7; }
.ks-breadcrumb a { color: var(--ks-muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.ks-breadcrumb a:hover { color: var(--ks-primary-ink); text-decoration: underline; }
.ks-breadcrumb [aria-current="page"] { color: var(--ks-text); font-weight: 700; }
/* ---------- Accordion (details/summary; works without JS) ---------- */
.ks-accordion { border-top: 1px solid var(--ks-border); }
.ks-accordion details { border-bottom: 1px solid var(--ks-border); }
.ks-accordion summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ks-s-4); min-height: 56px; padding: var(--ks-s-3) 0; cursor: pointer; list-style: none; font-family: var(--ks-font-display); font-size: 1.0625rem; font-weight: 600; -webkit-tap-highlight-color: transparent; }
.ks-accordion summary::-webkit-details-marker { display: none; }
.ks-accordion summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--ks-muted); border-bottom: 2px solid var(--ks-muted); transform: translateY(-2px) rotate(45deg); transition: transform var(--ks-dur-2) var(--ks-ease-out); }
.ks-accordion details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.ks-accordion summary:hover { color: var(--ks-primary-ink); }
.ks-accordion__body { padding: 0 0 var(--ks-s-4); color: var(--ks-muted); max-width: 70ch; }
.ks-accordion details[open] .ks-accordion__body { animation: ks-fade-down var(--ks-dur-2) var(--ks-ease-out); }
@keyframes ks-fade-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* ---------- Tabs: .ks-tabs > .ks-tabs__list[role=tablist] > button.ks-tabs__tab[role=tab][aria-selected] ; .ks-tabs__panel[role=tabpanel] ---------- */
.ks-tabs__list { display: flex; gap: 4px; padding: 4px; overflow-x: auto; scrollbar-width: none; background: var(--ks-surface-2); border-radius: var(--ks-r-pill); width: max-content; max-width: 100%; }
.ks-tabs__list::-webkit-scrollbar { display: none; }
.ks-tabs__tab { position: relative; min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--ks-r-pill); background: transparent; color: var(--ks-muted); font-family: var(--ks-font-display); font-size: .9375rem; font-weight: 600; white-space: nowrap; transition: background-color var(--ks-dur-2) var(--ks-ease), color var(--ks-dur-2) var(--ks-ease), box-shadow var(--ks-dur-2) var(--ks-ease); }
.ks-tabs__tab:hover { color: var(--ks-text); }
.ks-tabs__tab[aria-selected="true"] { background: var(--ks-surface); color: var(--ks-text); box-shadow: var(--ks-sh-1); }
[data-theme="games"] .ks-tabs__tab[aria-selected="true"] { background: var(--ks-surface-2); box-shadow: 0 0 0 1px var(--ks-border-strong); }
[data-theme="software"] .ks-tabs__list { border-radius: var(--ks-r-md); }
[data-theme="software"] .ks-tabs__tab { border-radius: var(--ks-r-sm); }
.ks-tabs__panel { padding-top: var(--ks-s-5); }
/* ---------- Steps ---------- */
.ks-steps { display: flex; gap: var(--ks-s-2); list-style: none; counter-reset: ks-step; }
.ks-steps > li { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center; counter-increment: ks-step; position: relative; font-size: .875rem; font-weight: 600; color: var(--ks-muted); }
.ks-steps > li::before { content: counter(ks-step); z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ks-surface-2); border: 2px solid var(--ks-border-strong); font-family: var(--ks-font-display); font-weight: 700; color: var(--ks-muted); transition: background-color var(--ks-dur-2) var(--ks-ease), border-color var(--ks-dur-2) var(--ks-ease); }
.ks-steps > li + li::after { content: ""; position: absolute; top: 17px; right: 50%; width: 100%; height: 2px; background: var(--ks-border-strong); }
.ks-steps > li.is-done + li::after, .ks-steps > li.is-current::after { background: var(--ks-primary); }
.ks-steps > li.is-done::before { content: "\2713"; background: var(--ks-primary-tint); border-color: var(--ks-primary); color: var(--ks-primary-ink); }
.ks-steps > li.is-current { color: var(--ks-text); }
.ks-steps > li.is-current::before { background: var(--ks-btn-bg); border-color: transparent; color: var(--ks-on-primary); }
[data-theme="games"] .ks-steps > li.is-current::before { box-shadow: 0 0 18px rgba(139, 92, 246, .55); }
.ks-steps--vertical { flex-direction: column; }
.ks-steps--vertical > li { flex-direction: row; text-align: left; }
.ks-steps--vertical > li::after { display: none; }
/* ---------- Skeleton ---------- */
.ks-skeleton { display: block; min-height: 1em; border-radius: var(--ks-r-sm); background: linear-gradient(90deg, var(--ks-surface-2) 30%, var(--ks-border) 50%, var(--ks-surface-2) 70%) 0 0 / 300% 100%; animation: ks-shimmer 1.4s linear infinite; }
@keyframes ks-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.ks-skeleton--text { height: 1em; margin-block: .35em; } .ks-skeleton--title { height: 1.6em; width: 60%; } .ks-skeleton--img { aspect-ratio: 4 / 5; border-radius: var(--ks-r-md); } .ks-skeleton--pill { height: 40px; width: 96px; border-radius: var(--ks-r-pill); }
/* ---------- Wavy divider. Place at a section edge: ---------- */
.ks-divider-wave { display: block; width: 100%; height: 32px; margin-bottom: -1px; color: var(--ks-surface-2); background: currentColor; pointer-events: none;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 32' preserveAspectRatio='none'%3E%3Cpath d='M0 32V16C100 0 200 0 300 16s200 16 300 0 200-16 300 0 200 16 300 0V32z'/%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 32' preserveAspectRatio='none'%3E%3Cpath d='M0 32V16C100 0 200 0 300 16s200 16 300 0 200-16 300 0 200 16 300 0V32z'/%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat; }
.ks-divider-wave--flip { transform: scaleY(-1); }
@media (min-width: 768px) { .ks-divider-wave { height: 48px; } }
/* ---------- Misc ---------- */
.ks-window { border: 1px solid var(--ks-border); border-radius: var(--ks-r-lg); background: var(--ks-surface); box-shadow: var(--ks-sh-3); overflow: hidden; }
.ks-window__bar { display: flex; gap: 6px; padding: 12px 14px; background: var(--ks-surface-2); border-bottom: 1px solid var(--ks-border); }
.ks-window__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--ks-border-strong); }
.ks-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ks-s-4); list-style: none; }
@media (min-width: 900px) { .ks-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } }