/* ============================================================
   kw-redesign.css — paket redesign Gamestorecan (tiket #817)
   Dimuat SETELAH kiosweb.css di Layout/template.php.
   Isi: [1] header (tombol mega menu + search inline)
        [2] mega menu panel
        [3] flash sale heading (ikon api)
        [4] footer versi baru (pembayaran, kontak, kartu testimoni)
   Gaya mengikuti bahasa desain template: surface + 1px line +
   radius, aksen lewat var(--kw-accent*), tanpa dekor berlebihan.
   ============================================================ */

/* ---------- [1] Header: ikon inline + search permanen ---------- */
.kw-ic {
  display: inline-flex;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: middle;
  fill: none;
}
.kiosweb-nav__megabtn .kw-ic { width: 1.15rem; height: 1.15rem; }
.kiosweb-search__icon.kw-ic { width: 1.1rem; height: 1.1rem; }

.kiosweb-nav__search-inline {
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: 460px;
}
.kiosweb-nav__search-inline .kiosweb-search__bar {
  max-width: 100%;
  margin: 0;
  padding: 9px 16px;
}
.kiosweb-nav__search-inline .kiosweb-search__suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  margin: 0;
  max-width: 100%;
  background: var(--kw-surface);
  border: 1px solid var(--kw-line);
  border-radius: var(--kw-radius);
  padding: 6px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6);
  animation: kwNavDrop 0.22s var(--kw-ease);
}
.kiosweb-search__suggestions[hidden] { display: none; }

.kiosweb-nav__megabtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  position: relative;
  z-index: 110;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--kw-line);
  color: var(--kw-text);
  cursor: pointer;
  transition: background 0.2s var(--kw-ease), color 0.2s var(--kw-ease), border-color 0.2s var(--kw-ease);
}
.kiosweb-nav__megabtn:hover { background: rgba(255, 255, 255, 0.08); }
.kiosweb-nav__megabtn[aria-expanded="true"] {
  background: var(--kw-accent);
  border-color: var(--kw-accent);
  color: #fff;
}

/* ---------- [2] Mega menu ---------- */
.kiosweb-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  padding: 12px 20px 18px;
  animation: kwNavDrop 0.25s var(--kw-ease);
}
.kiosweb-mega[hidden] { display: none; }
.kiosweb-mega__inner {
  max-width: 860px;
  margin: 0 auto;
  background: var(--kw-surface);
  border: 1px solid var(--kw-line-2);
  border-radius: var(--kw-radius-lg);
  padding: 8px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6);
}
.kiosweb-mega__body {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.kiosweb-mega__grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 8px;
  align-content: start;
}
.kiosweb-mega__tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  color: var(--kw-text-2);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background 0.2s var(--kw-ease), color 0.2s var(--kw-ease), border-color 0.2s var(--kw-ease);
}
.kiosweb-mega__tile .bi {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
  color: var(--kw-text-3);
  transition: color 0.2s var(--kw-ease);
}
.kiosweb-mega__tile:hover {
  border-color: var(--kw-line-2);
  color: var(--kw-text);
}
.kiosweb-mega__tile:hover .bi { color: var(--kw-accent-light); }
.kiosweb-mega__tile--active {
  background: var(--kw-accent-soft);
  color: var(--kw-text);
}
.kiosweb-mega__tile--active .bi { color: var(--kw-accent-light); }

.kiosweb-mega__side {
  position: relative;
  width: 264px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  background: var(--kw-surface-2);
  border: 1px solid var(--kw-line);
  border-radius: var(--kw-radius-lg);
  transition: border-color 0.25s var(--kw-ease);
}
.kiosweb-mega__side:hover { border-color: var(--kw-accent); }
.kiosweb-mega__side-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kw-line);
  border-radius: 50%;
  color: var(--kw-accent-light);
  margin-bottom: 6px;
}
.kiosweb-mega__side-icon .bi { font-size: 1.25rem; }
.kiosweb-mega__side-title { font-size: 0.9rem; font-weight: 600; color: var(--kw-text); }
.kiosweb-mega__side-text {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--kw-text-3);
  margin-bottom: 6px;
}
.kiosweb-mega__side-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--kw-text-2);
  transition: color 0.2s var(--kw-ease);
}
.kiosweb-mega__side-link .bi { font-size: 0.85rem; }
.kiosweb-mega__side:hover .kiosweb-mega__side-link { color: var(--kw-text); }

.kiosweb-mega__extras {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
  padding: 16px 8px 8px;
  border-top: 1px solid var(--kw-line);
}
.kiosweb-mega__search { position: relative; }
.kiosweb-mega__search .kiosweb-search__bar { max-width: 100%; margin: 0; }
.kiosweb-mega__search .kiosweb-search__suggestions { margin-top: 8px; max-width: 100%; }
.kiosweb-mega__actions { display: flex; gap: 10px; }
.kiosweb-mega__actions .kiosweb-btn { flex: 1; justify-content: center; }

@media (min-width: 881px) {
  .kiosweb-mega__extras { display: none; }
}
@media (max-width: 880px) {
  .kiosweb-nav__search-inline { display: none; }
  .kiosweb-mega__inner { padding: 6px; }
  .kiosweb-mega__body { flex-direction: column; }
  .kiosweb-mega__side { width: 100%; }
  .kiosweb-mega__tile { padding: 10px; gap: 10px; font-size: 0.82rem; }
}

/* ---------- [3] Flash sale: ikon api di judul ---------- */
.kiosweb-flash__heading { display: flex; align-items: center; gap: 0.28em; }
.kiosweb-flash__fire { width: 0.85em; height: 0.85em; flex-shrink: 0; }

/* ---------- [4] Footer versi baru ---------- */
.kiosweb-foot__inner {
  grid-template-columns: 1.5fr 1.3fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 32px 36px;
}
.kiosweb-foot__brand { grid-column: 1; grid-row: 1 / 3; }
.kiosweb-foot__social { margin-top: 6px; }
.kiosweb-foot__social-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--kw-text);
  font-weight: 600;
  margin: 20px 0 12px;
}
.kiosweb-foot__col h4 { margin-bottom: 12px; }
.kiosweb-foot__col a { font-size: 0.875rem; padding: 3px 0; }

.kiosweb-foot__secure-pay {
  grid-column: 2 / 4;
  grid-row: 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kiosweb-foot__secure-pay h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.kiosweb-foot__secure-pay h4 .bi { font-size: 1.05rem; color: var(--kw-accent-light); }
.kiosweb-foot__paylogos {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.kiosweb-foot__paylogo {
  height: 34px;
  width: auto;
  max-width: 84px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  padding: 4px 7px;
}
.kiosweb-foot__paymore {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kw-text-3);
}

.kiosweb-foot__contact { grid-column: 2; grid-row: 2; align-self: start; }
.kiosweb-foot__contact a {
  display: flex;
  align-items: center;
  gap: 7px;
  word-break: break-word;
}
.kiosweb-foot__contact a .bi { flex-shrink: 0; }

.kw-foot-links { display: contents; }
.kw-foot-links .kiosweb-foot__col { grid-column: 3; grid-row: 2; align-self: start; }

/* Kartu testimoni: hover disamakan dengan kartu game (.kiosweb-game) */
.kw-testi-card {
  position: relative;
  isolation: isolate;
  display: block;
  grid-column: 4;
  grid-row: 1 / 3;
  align-self: start;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 200px;
  border-radius: var(--kw-radius-lg);
  transition: transform 0.35s var(--kw-ease);
}
.kw-testi-card__inner {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px;
  text-align: center;
  background: var(--kw-surface);
  border: 1px solid var(--kw-line-2);
  border-radius: inherit;
}
.kw-testi-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -2;
  border-radius: calc(var(--kw-radius-lg) + 2px);
  background: conic-gradient(from var(--kw-angle) at 50% 50%,
      var(--kw-accent) 0deg, var(--kw-accent-light) 90deg,
      transparent 160deg, transparent 240deg, var(--kw-accent) 360deg);
  filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--kw-ease);
  animation: kwBorderRotate 3s linear infinite;
  animation-play-state: paused;
}
.kw-testi-card::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: calc(var(--kw-radius-lg) + 2px);
  padding: 2px;
  background: conic-gradient(from var(--kw-angle) at 50% 50%,
      var(--kw-accent) 0deg, var(--kw-accent-light) 90deg,
      transparent 160deg, transparent 240deg, var(--kw-accent) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--kw-ease);
  animation: kwBorderRotate 3s linear infinite;
  animation-play-state: paused;
}
.kw-testi-card:hover { transform: translateY(-4px); }
.kw-testi-card:hover::before { opacity: 0.55; animation-play-state: running; }
.kw-testi-card:hover::after { opacity: 1; animation-play-state: running; }
.kw-testi-card:hover .kw-testi-card__title { color: var(--kw-text); }
.kw-testi-card__icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kw-line);
  border-radius: 50%;
  color: var(--kw-accent-light);
}
.kw-testi-card__icon .bi { font-size: 1.3rem; }
.kw-testi-card__title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--kw-text-2);
  letter-spacing: -0.01em;
  transition: color 0.3s var(--kw-ease);
}
.kw-testi-card__meta {
  font-size: 0.75rem;
  color: var(--kw-text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.kiosweb-foot__bar { justify-content: center; text-align: center; gap: 6px; }
.kiosweb-foot__copyright { display: inline; }
.kiosweb-foot__copy-sub { color: var(--kw-text-3); }

@media (max-width: 1100px) {
  .kiosweb-foot__inner { grid-template-columns: 1.5fr 1.2fr 1fr 1fr; gap: 24px 28px; }
}
@media (max-width: 880px) {
  .kiosweb-foot__inner { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto auto; gap: 24px; }
  .kiosweb-foot__brand { grid-column: 1 / -1; grid-row: 1; }
  .kiosweb-foot__secure-pay { grid-column: 1 / -1; grid-row: 2; }
  .kiosweb-foot__contact { grid-column: 1 / -1; grid-row: 3; }
  .kw-foot-links { grid-column: 1 / -1; grid-row: 4; display: flex; flex-wrap: wrap; gap: 16px 48px; }
  .kw-foot-links .kiosweb-foot__col { grid-column: auto; grid-row: auto; }
  .kw-testi-card {
    grid-column: 1 / -1;
    grid-row: 5;
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    justify-self: stretch;
  }
  .kw-testi-card__inner { padding: 16px 20px; }
  .kiosweb-foot__bar { flex-direction: column; gap: 4px; }
  .kiosweb-foot__copy-sub { display: block; margin-top: 2px; }
}

/* ---------- [5] Halaman game: chip "jumlah pembelian" ---------- */
/* Baris statistik di bawah judul disembunyikan template di layar <=880px,
   jadi jumlah pembelian dimunculkan sebagai chip pertama di baris chip. */
/* NB: selektornya WAJIB ikut `li` — aturan bawaan `.kiosweb-gamehead__chips li`
   (specificity 0,1,1) mengalahkan class tunggal, chip-nya jadi ikut tampil di desktop. */
.kiosweb-gamehead__chips li.kiosweb-gamehead__chip--stat { display: none; }
.kiosweb-gamehead__chip--stat strong { color: var(--kw-text); font-weight: 700; }
@media (max-width: 880px) {
  .kiosweb-gamehead__chips li.kiosweb-gamehead__chip--stat { display: inline-flex; }
}

/* ---------- [6] Daftar Harga: tab kategori di sidebar ---------- */
.kiosweb-pside__cats {
  display: flex;
  gap: 6px;
  margin: 12px 0 4px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.kiosweb-pside__cats::-webkit-scrollbar { display: none; }
.kiosweb-pside__cat {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--kw-line);
  background: transparent;
  color: var(--kw-text-2);
  font-size: 0.76rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s var(--kw-ease), border-color 0.2s var(--kw-ease), background 0.2s var(--kw-ease);
}
.kiosweb-pside__cat:hover { color: var(--kw-text); border-color: var(--kw-line-2); }
.kiosweb-pside__cat--active {
  background: var(--kw-accent-soft);
  border-color: var(--kw-accent);
  color: var(--kw-text);
}

/* ---------- [7] Halaman auth: form email/password ---------- */
.kw-auth__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--kw-text-3);
  font-size: 0.78rem;
}
.kw-auth__divider::before,
.kw-auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--kw-line);
}
.kw-auth__form { display: block; text-align: left; }
.kw-auth__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.kw-auth__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--kw-text-2);
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}
.kw-auth__field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  margin-bottom: 14px;
  background: var(--kw-surface-2);
  border: 1px solid var(--kw-line);
  border-radius: var(--kw-radius);
  transition: border-color 0.2s var(--kw-ease);
}
.kw-auth__field:focus-within { border-color: var(--kw-accent); }
.kw-auth__field ion-icon { font-size: 17px; color: var(--kw-text-3); flex-shrink: 0; }
.kw-auth__field input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--kw-text);
  font-size: 0.92rem;
  font-family: inherit;
}
.kw-auth__field input::placeholder { color: var(--kw-text-4); }
.kw-auth__field input[readonly] { color: var(--kw-text-2); }
.kw-auth__eye {
  background: none;
  border: 0;
  padding: 4px;
  color: var(--kw-text-3);
  cursor: pointer;
  display: inline-flex;
}
.kw-auth__eye:hover { color: var(--kw-text); }
.kw-auth__submit { width: 100%; justify-content: center; margin-top: 4px; }
.kw-auth__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--kw-text-3);
}
.kw-auth__links a { color: var(--kw-text-2); }
.kw-auth__links a:hover { color: var(--kw-accent-light); }

@media (max-width: 560px) {
  .kw-auth__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Chip halaman game: di HP sempit 3 chip (jumlah pembelian, CS, proses) tidak
   muat sebaris dan yang terakhir jatuh ke baris kedua. Dirapatkan sedikit,
   plus jaga-jaga di layar sangat sempit barisnya digeser, bukan dipatahkan. */
@media (max-width: 560px) {
  .kiosweb-gamehead__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 5px;
  }
  .kiosweb-gamehead__chips::-webkit-scrollbar { display: none; }
  .kiosweb-gamehead__chips li {
    flex-shrink: 0;
    padding: 5px 8px;
    font-size: 0.56rem;
    gap: 6px;
  }
  .kiosweb-gamehead__chips svg,
  .kiosweb-gamehead__chips ion-icon { font-size: 12px; }
}

/* ---------- [8] Sisa warna biru bawaan template -> violet ----------
   Diambil dari CSS mockup handoff: aturan-aturan ini di kiosweb.css masih
   memakai biru #2196f3/#0d47a1 (glow latar, cover kartu game, blob halaman
   game, modal, form order, kartu auth). Ditimpa di sini, file aslinya tidak
   disentuh supaya gampang dibalikin. ---------- */
.kiosweb-ambient__glow--one {
  width: 700px;
  height: 700px;
  top: -200px;
  right: -150px;
  background: radial-gradient(circle, rgba(160,107,255,0.5), transparent 70%);
  animation: kwGlow1 18s ease-in-out infinite alternate;
}
.kiosweb-ambient__glow--two {
  width: 600px;
  height: 600px;
  top: 60%;
  left: -200px;
  background: radial-gradient(circle, rgba(84,0,212,0.35), transparent 70%);
  animation: kwGlow2 22s ease-in-out infinite alternate;
}
.kiosweb-lang__btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.kiosweb-lang__menu li:hover {
  background: rgba(255, 255, 255, 0.06);
}
.kiosweb-how__step {
  position: relative;
  padding: 36px 28px 32px;
  background: linear-gradient(90deg, transparent, rgba(84,0,212,0.5) 50%, transparent) top/100% 1px no-repeat, var(--kw-surface);
  border: 1px solid var(--kw-line);
  border-radius: var(--kw-radius-lg);
  transition: transform 0.4s var(--kw-ease), background 0.4s var(--kw-ease), border-color 0.4s var(--kw-ease), box-shadow 0.4s var(--kw-ease);
  isolation: isolate;
}
.kiosweb-how__step:hover {
  transform: translateY(-4px);
  border-color: var(--kw-line-strong);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(84,0,212,0.10);
}
.kiosweb-cta__box {
  position: relative;
  background: radial-gradient(circle at 50% 0%, rgba(84,0,212,0.3), transparent 60%), linear-gradient(180deg, var(--kw-surface), var(--kw-bg-soft));
  border: 1px solid var(--kw-line-2);
  border-radius: var(--kw-radius-xl);
  padding: 80px 32px;
  text-align: center;
  overflow: hidden;
  --mx: 50%;
  --my: 50%;
}
.kiosweb-cta__box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(160, 107, 255, 0.22), rgba(84, 0, 212, 0.10) 35%, transparent 65%);
  opacity: 0;
  transition: opacity 0.4s var(--kw-ease);
  pointer-events: none;
  z-index: 0;
}
.kiosweb-cta__cursor--ring {
  width: 56px;
  height: 56px;
  background: transparent;
  border: 1px solid rgba(160, 107, 255, 0.55);
  box-shadow: 0 0 24px rgba(160, 107, 255, 0.25);
  mix-blend-mode: normal;
  transition: transform 0.6s var(--kw-ease), opacity 0.3s var(--kw-ease);
}
.kiosweb-gamehead__blob--a {
  width: 380px;
  height: 380px;
  top: -180px;
  right: -120px;
  background: radial-gradient(circle, rgba(160, 107, 255, 0.35), transparent 70%);
}
.kiosweb-gamehead__blob--b {
  width: 320px;
  height: 320px;
  bottom: -160px;
  left: -80px;
  background: radial-gradient(circle, rgba(84, 0, 212, 0.22), transparent 70%);
}
.kiosweb-gamehead__logo {
  width: 116px;
  height: 116px;
  flex-shrink: 0;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  background: var(--kw-surface);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 20px 40px -12px rgba(84, 0, 212, 0.45), 0 8px 18px -6px rgba(0, 0, 0, 0.6);
}
.kiosweb-nom--flash {
  padding: 18px;
  background: linear-gradient(160deg, var(--kw-surface) 0%, rgba(84, 0, 212, 0.08) 100%);
}
.kiosweb-orderform__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--kw-accent-soft);
  border: 1px solid rgba(84, 0, 212, 0.4);
  border-radius: var(--kw-radius);
  color: var(--kw-text);
  font-size: 0.85rem;
}
.kiosweb-orderform__cc-select:focus {
  background-color: rgba(84, 0, 212, 0.08);
}
.kiosweb-orderform__cc-select option {
  background: #0b0716;
  color: var(--kw-text);
}
.kiosweb-modal__panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: linear-gradient(180deg, var(--kw-surface) 0%, var(--kw-bg-soft) 100%);
  border: 1px solid var(--kw-line-2);
  border-radius: var(--kw-radius-xl);
  padding: 28px 24px 24px;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(84, 0, 212, 0.15);
  animation: kwModalPanelIn 0.32s var(--kw-ease);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kiosweb-modal__icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--kw-accent-soft);
  border: 1px solid rgba(84, 0, 212, 0.4);
  color: var(--kw-accent-light);
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}
.kiosweb-modal__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  background: var(--kw-accent-soft);
  border: 1px solid rgba(84, 0, 212, 0.4);
  border-radius: var(--kw-radius);
}
.kiosweb-auth__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(84,0,212,0.6), transparent);
  z-index: 1;
  transition: opacity 0.3s var(--kw-ease);
}
.kiosweb-gbtn:hover {
  background: #f5f6f8;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -12px rgba(84,0,212,0.45), 0 0 0 1px rgba(84,0,212,0.25);
}
.kiosweb-flash__cover-art {
  position: absolute;
  inset: 0;
  background: var(--kw-cover-grad, #5400d4);
}
[data-grad="ml"] {
  --kw-cover-grad: #5400d4;
}
.kiosweb-game__cover {
  aspect-ratio: 1;
  background: var(--kw-cover-grad, #5400d4);
  position: relative;
  overflow: hidden;
  border-radius: var(--kw-radius-lg) var(--kw-radius-lg) 0 0;
}
.kiosweb-tx__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--kw-accent-light);
  background: rgba(84, 0, 212, 0.12);
  border: 1px solid rgba(160, 107, 255, 0.25);
  border-radius: 999px;
}
@media (max-width: 880px) {
  .kiosweb-ambient__glow--one {
    width: 520px;
    height: 520px;
    top: -180px;
    right: -140px;
    background: radial-gradient(circle, rgba(160,107,255,0.45), transparent 70%);
  }
  .kiosweb-ambient__glow--two {
    width: 460px;
    height: 460px;
    top: 50%;
    left: -180px;
    background: radial-gradient(circle, rgba(84,0,212,0.35), transparent 70%);
  }
}
@media (max-width: 1100px) {
  .kiosweb-pside {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(86vw, 320px);
    max-height: none;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.3s var(--kw-ease);
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--kw-line-strong);
    background-color: #0d1117 !important;
    background-image: linear-gradient(180deg, #130a1f 0%, #0b0716 100%);
    box-shadow: 18px 0 48px -12px rgba(0,0,0,0.7);
    overflow-y: auto;
  }
}

/* Kartu testimoni footer: logo Padlet (ikon brand + wordmark) sesuai desain. */
.kw-testi-card__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--kw-text-2);
}
.kw-testi-card__mark { width: 22px; height: 22px; flex-shrink: 0; }
.kw-testi-card__wordmark {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--kw-text);
}
.kw-testi-card:hover .kw-testi-card__brand { color: var(--kw-accent-light); }