/* Karakter: kartu portrait 3:4, grid semua karakter, dan halaman satu karakter. */

.kcard { aspect-ratio: 3 / 4; width: clamp(150px, 17vw, 220px); text-decoration: none; }
.k-ph {
  display: grid; place-items: center; width: 100%; height: 100%;
  font: 700 64px/1 var(--sans); color: rgba(255, 255, 255, .5);
}

/* ---- Semua karakter ---- */
.k-judul { padding-bottom: 14px; }
.k-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 180px), 1fr)); gap: 14px; padding-bottom: 48px; }
.k-grid .kcard { width: auto; }

/* ---- Satu karakter ---- */
.k-detail { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 40px; align-items: start; padding-bottom: 12px; }
.k-media { position: sticky; top: 24px; display: grid; gap: 10px; }
.k-utama { position: relative; aspect-ratio: 3 / 4; max-height: 78vh; border-radius: 12px; overflow: hidden; background: var(--surface); }
.k-utama > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.k-utama > .k-ph { display: grid; font-size: 140px; }
.thumb > .k-ph { display: grid; }
.k-pose { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.k-pose button {
  flex: 0 0 auto; width: 64px; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer;
  background: var(--surface); opacity: .55; outline: 2px solid transparent; outline-offset: -2px; transition: opacity .2s;
}
.k-pose button:hover { opacity: 1; }
.k-pose button[aria-pressed="true"] { opacity: 1; outline-color: #fff; }
.k-pose img { width: 100%; height: 100%; object-fit: cover; display: block; }

.k-info { display: grid; gap: 14px; min-width: 0; }
.k-label { display: flex; align-items: center; gap: 10px; font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.k-info h1 { font: 800 clamp(30px, 4vw, 52px)/1.05 var(--sans); letter-spacing: -.03em; overflow-wrap: anywhere; }
.k-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 600 14px/1.3 var(--sans); color: var(--teks); }
.k-meta span[aria-hidden] { color: var(--dim); }
.k-ringkas { max-width: 62ch; font-size: 17px; line-height: 1.5; color: var(--teks); }
.k-prompts { display: grid; gap: 10px; margin-top: 6px; }
.k-catatan { margin-top: 8px; font-size: 15.5px; }

@media (max-width: 860px) {
  .k-detail { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .k-media { position: static; width: min(100%, 380px); justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .k-pose button { transition: none; }
}