/*
 * designer-clicker_karakter.css — the "Clicker Karakter" designer (the shared pieces are in
 * designer-gantungan_nama.css): badges, the sample picture cards and the WhatsApp help row.
 */
.ck-badges { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 10px 0 0; }
.ck-badges span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--tint-1); color: var(--accent-text); font-size: .8rem; font-weight: 650; }
.ck-badges .icon { width: 14px; height: 14px; }

.ck-samples-head .opt-sub { display: inline-flex; align-items: center; gap: 6px; }
.ck-samples-head .icon { width: 15px; height: 15px; color: var(--accent-text); }
.ck-samples { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ck-sample { appearance: none; display: grid; justify-items: center; gap: 2px; padding: 8px 6px 9px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface);
    font: inherit; color: var(--ink); cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; min-width: 0; }
.ck-sample img { width: 100%; max-width: 92px; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 10px; }
.ck-sample small { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.ck-sample b { font-size: .82rem; line-height: 1.2; text-align: center; }
.ck-sample:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 20px -14px rgba(40, 20, 80, .5); }
.ck-sample[aria-pressed="true"] { border-color: var(--accent); background: var(--tint-1); box-shadow: inset 0 0 0 1px var(--accent); }
.ck-sample:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.ck-help { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ck-help .btn { display: inline-flex; align-items: center; gap: 6px; }
.ck-help .icon { width: 16px; height: 16px; }
.ck-count { font-size: .8rem; font-weight: 600; margin-left: auto; }
@media (max-width: 420px) {
    .ck-samples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ck-sample img { max-width: 110px; }
}

/* Utuh / Lihat bagian: a small segmented switch in the bottom-left corner of the 3D stage */
.ck-view { position: absolute; left: 12px; bottom: 12px; z-index: 3; display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px;
    background: rgba(255, 255, 255, .88); box-shadow: 0 4px 14px -6px rgba(40, 20, 80, .35); }
.ck-view button { appearance: none; border: 0; background: transparent; font: inherit; font-size: .78rem; font-weight: 650; color: var(--ink-2);
    padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: background .12s, color .12s; }
.ck-view button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.ck-view button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; }