:root {
  --pink: #ff2f8e;
  --pink2: #ff5fa9;
  --pink-light: #fff0f6;
  --navy: #14103a;
  --navy-light: #2a2452;
  --muted: #5e5a7a;
  --violet: #5b4bdb;
  --violet-light: #f3ecff;
  --line: #ece7f7;
  --shadow: 0 8px 28px rgba(120, 80, 200, 0.10);
  --shadow-hover: 0 14px 34px rgba(100, 50, 180, 0.18);
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  color: var(--navy);
  background: linear-gradient(180deg, #f9f6ff 0%, #fcf3f8 50%, #f9f6ff 100%);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

svg.ic {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

[data-ic] {
  display: inline-flex;
}

.serif {
  font-family: 'Noto Serif', serif;
}

/* NAVBAR */
.nav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 100;
  transition: box-shadow .3s, background .3s;
  border-bottom: 1px solid rgba(236, 231, 247, 0.7);
}

.nav-wrap.sc {
  box-shadow: 0 4px 20px rgba(100, 60, 180, 0.12);
  background: rgba(255, 255, 255, 0.95);
}

.nav {
  max-width: 1640px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.logo-t b {
  display: block;
  font: 800 24px/1 'Source Sans 3', sans-serif;
  letter-spacing: .5px;
  color: #211a52;
}

.logo-t small {
  display: block;
  font-size: 8.5px;
  letter-spacing: 6.5px;
  color: #8a4fb0;
  margin-top: 1px;
  font-weight: 700;
  padding-left: 2px;
}

.links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
}

.links a {
  height: 32px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  color: #2a2452;
  transition: all .2s;
  white-space: nowrap;
}

.links a.on {
  background: #ffe0ee;
  color: #e0267f;
}

.links a:hover {
  background: #f3ecff;
  color: #5b4bdb;
}

.search {
  flex: 1;
  max-width: 380px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid #e3dcf3;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: #7b7899;
  font-size: 15px;
  transition: border-color .2s, box-shadow .2s;
}

.search:focus-within {
  border-color: #ff5fa9;
  box-shadow: 0 0 0 3px rgba(255, 47, 142, 0.12);
  background: #fff;
}

.search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: none;
  font: 500 13px 'Source Sans 3', sans-serif;
  color: var(--navy);
}

.search input::placeholder {
  color: #9a97b4;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.cart {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid #ece7f7;
  box-shadow: 0 2px 10px rgba(120, 80, 200, 0.08);
  display: grid;
  place-items: center;
  font-size: 18px;
  position: relative;
  color: #2a2452;
  transition: transform .2s, box-shadow .2s;
  flex-shrink: 0;
}

.cart:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(120, 80, 200, 0.15);
  color: var(--pink);
}

.cart i {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--pink);
  color: #fff;
  font: 700 10px 'Source Sans 3';
  font-style: normal;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
}

.login {
  height: 38px;
  padding: 0 18px;
  border-radius: 11px;
  background: linear-gradient(90deg, #ff2f8e, #ff5fa9);
  color: #fff;
  font: 700 12.5px 'Source Sans 3', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 16px rgba(255, 47, 142, 0.32);
  transition: all .2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.login:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255, 47, 142, 0.42);
}

.user-badge {
  height: 38px;
  padding: 0 14px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid #e3dcf3;
  color: #2a2452;
  font: 700 12.5px 'Source Sans 3', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 10px rgba(120, 80, 200, 0.08);
  transition: all .2s;
  flex-shrink: 0;
}

.user-badge:hover {
  border-color: #c7b5ff;
  transform: translateY(-1px);
}

.menu-toggle {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #ece7f7;
  place-items: center;
  font-size: 20px;
  color: #2a2452;
  flex-shrink: 0;
}

/* HERO */
.hero {
  position: relative;
  min-height: 400px;
  padding-top: 60px;
  overflow: hidden;
  background: #fbf7ff;
}

.hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-art-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  pointer-events: none;
}

.hero-art-gradient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ffffff 0%, #f2eeff 35%, #d4c4ff 62%, #8f6bd8 100%);
  pointer-events: none;
}

.hero-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 22%, rgba(255, 255, 255, 0.4) 42%, transparent 58%);
  pointer-events: none;
}

.hero-container {
  max-width: 1640px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  height: 100%;
}

.vt {
  position: absolute;
  top: 90px;
  display: flex;
  gap: 14px;
  z-index: 2;
  color: #2a2452;
  pointer-events: none;
}

.vt p {
  writing-mode: vertical-rl;
  font-size: 19px;
  letter-spacing: 6px;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.8);
}

.vt small {
  font-size: 8px;
  letter-spacing: 2.2px;
  color: #6b6788;
  align-self: flex-end;
  line-height: 1.5;
  margin-bottom: -4px;
  font-weight: 700;
}

.vt-l {
  left: 24px;
  flex-direction: row;
}

.vt-r {
  right: 48px;
  flex-direction: row-reverse;
  color: #fff;
  top: 170px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.vt-r small {
  color: #f1e9ff;
}

.hero-in {
  position: relative;
  z-index: 3;
  margin-left: 120px;
  padding: 40px 0 46px;
  max-width: 680px;
}

.jp {
  font-size: 11px;
  letter-spacing: 1.2px;
  color: #6a648f;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.hero h1 {
  font: 700 clamp(32px, 3.8vw, 50px)/1.08 'Noto Serif', serif;
  color: #12103a;
  letter-spacing: -.8px;
  margin: 6px 0 12px;
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg, #ff2f8e, #ff5fa9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  font-size: clamp(38px, 4.6vw, 62px);
  line-height: 1.05;
  display: inline-block;
}

.hsub {
  font-size: clamp(15px, 1.3vw, 19px);
  color: #241e4a;
  margin-bottom: 18px;
  font-weight: 500;
}

/* 1 Baris Penuh: Hero Features */
.hf {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.hf::-webkit-scrollbar {
  display: none;
}

.hf li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  line-height: 1.2;
  color: #3a3560;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.85);
  padding: 7px 13px;
  border-radius: 10px;
  border: 1px solid rgba(236, 231, 247, 0.9);
  backdrop-filter: blur(6px);
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(120, 80, 200, 0.04);
}

.hf li > span {
  font-size: 18px;
  color: #ff2f8e;
  display: inline-flex;
}

.hf li p {
  margin: 0;
  white-space: nowrap;
}

/* HERO SEARCH BAR */
.hero-search {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 2px solid rgba(230, 220, 245, 0.9);
  border-radius: 14px;
  padding: 5px 6px 5px 16px;
  box-shadow: 0 10px 30px rgba(120, 80, 200, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
  max-width: 540px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  backdrop-filter: blur(8px);
}

.hero-search:focus-within {
  border-color: #ff2f8e;
  box-shadow: 0 12px 36px rgba(255, 47, 142, 0.18), 0 0 0 4px rgba(255, 47, 142, 0.1);
  transform: translateY(-2px);
}

.hs-icon {
  color: #ff2f8e;
  font-size: 20px;
  display: flex;
  align-items: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.hs-icon .ic,
.hs-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.2;
}

.hero-search input {
  flex: 1;
  border: none;
  outline: none;
  font: 600 14px 'Plus Jakarta Sans', sans-serif;
  color: #1a1440;
  background: transparent;
  padding: 9px 0;
  min-width: 0;
}

.hero-search input::placeholder {
  color: #928ca8;
  font-weight: 500;
}

.hs-btn {
  background: linear-gradient(135deg, #ff2f8e, #e0267f);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font: 800 12.5px 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 47, 142, 0.35);
  transition: all .2s ease;
  flex-shrink: 0;
}

.hs-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 47, 142, 0.45);
  background: linear-gradient(135deg, #ff4099, #ec1b77);
}

.hs-btn .ic,
.hs-btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 240px;
  height: 46px;
  padding: 0 28px;
  border-radius: 12px;
  background: linear-gradient(90deg, #ff2f8e, #ff4f9f);
  color: #fff;
  font: 700 15px 'Source Sans 3', sans-serif;
  letter-spacing: .8px;
  box-shadow: 0 10px 24px rgba(255, 47, 142, 0.35);
  transition: all .25s;
}

.cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 14px 28px rgba(255, 47, 142, 0.45);
}

/* SECTION CONTAINERS */
.section-wrap {
  max-width: 1640px;
  margin: 0 auto;
  padding: 0 24px;
}

/* PANEL BASE */
.panel {
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  position: relative;
  border: 1px solid rgba(240, 235, 250, 0.8);
  display: flex;
  flex-direction: column;
}

.ph {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.ph h2 {
  font: 800 16px 'Source Sans 3', sans-serif;
  letter-spacing: .3px;
  color: #14103a;
  margin-right: 6px;
}

.ph h2.s {
  font-size: 13.5px;
  letter-spacing: .2px;
  margin: 0;
}

.ph h2 small {
  font-size: 10px;
  font-weight: 600;
  color: #7b7899;
  margin-left: 6px;
  letter-spacing: .5px;
}

.ph > small {
  font-size: 11.5px;
  color: #4a4670;
  font-weight: 500;
}

.ph .sm {
  font-size: 10.5px;
  color: #5e5a7a;
  margin-top: 1px;
}

.hi {
  display: grid;
  place-items: center;
  font-size: 20px;
}

.hi.sq {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #e6e4ff;
  color: #5b4bdb;
  font-size: 15px;
}

.hi.flame {
  color: #ff3d6b;
  font-size: 20px;
}

.more {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: #1b4fd8;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: color .2s;
}

.more:hover {
  color: var(--pink);
}

/* ========================================================
   BARIS 1: GAME PILIHAN, TRENDING, FLASH SALE
   ======================================================== */
.r1 {
  display: grid;
  grid-template-columns: minmax(0, 2.8fr) minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
  margin-top: -18px;
  position: relative;
  z-index: 4;
}

.r1 .gp {
  min-height: 236px;
}

.r1 .tr {
  min-height: 236px;
}

.r1 .fs {
  min-height: 236px;
}

/* KARTU GAME CAROUSEL (1 BARIS SAJA) */
.gcards-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.gcards {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: visible; /* allow sakura flower and petal bleed */
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 16px 14px 18px 14px;
  flex: 1;
  align-items: stretch;
}

.gcards::-webkit-scrollbar {
  display: none;
}

/* =========================================================
   CARD WRAPPER
   overflow visible sangat penting agar bunga sakura
   boleh keluar dari batas card.
========================================================= */
.card-wrapper {
  position: relative;
  width: 118px;
  height: 164px;
  flex: 0 0 118px;
  overflow: visible;
  scroll-snap-align: start;
}

/* =========================================================
   CARD
========================================================= */
.category-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 11px;
  text-decoration: none;
  color: #fff;
  background: #111;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .30);
  transition: transform .35s ease, box-shadow .35s ease;
}

/* BORDER TIPIS */
.category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .20);
  pointer-events: none;
  z-index: 10;
}

/* BACKGROUND DECORATION */
.circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.circle-1 {
  width: 62px;
  height: 62px;
  top: 20px;
  left: 6px;
  background: rgba(150, 120, 255, .27);
}

.circle-2 {
  width: 48px;
  height: 48px;
  top: 52px;
  right: 6px;
  background: rgba(255, 255, 255, .14);
}

.circle-3 {
  width: 135px;
  height: 135px;
  left: -12px;
  bottom: -75px;
  background: rgba(18, 20, 78, .60);
}

.category-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-position: center center;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}

/* BADGE */
.category-card .badge,
.card-wrapper .badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 15;
  padding: 3px 6px;
  border-radius: 12px;
  background: linear-gradient(90deg, #ff2586, #ff5db5);
  font-size: 7px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 3px 8px rgba(255, 37, 134, .30);
  line-height: 1;
  pointer-events: none;
  letter-spacing: .2px;
}

/* HOVER NAME OVERLAY */
.card-hover-label {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  background: rgba(0, 0, 0, 0);
  opacity: 0;
  transition: opacity .28s ease, background .28s ease;
  pointer-events: none;
  border-radius: inherit;
}

.card-hover-label span {
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
  letter-spacing: .3px;
  line-height: 1.2;
  transform: translateY(6px);
  transition: transform .28s ease;
}

.category-card:hover .card-hover-label {
  opacity: 1;
  background: rgba(0, 0, 0, .52);
}

.category-card:hover .card-hover-label span {
  transform: translateY(0);
}

.category-card:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .40);
}



/* FOOTER */
.card-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  min-height: 42px;
  padding: 6px 8px 6px 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: linear-gradient(90deg, rgba(17, 17, 65, .97), rgba(29, 27, 91, .90));
}

/* Tablet */
@media (max-width: 1024px) {
  .card-footer {
    padding: 6px 8px 6px 28px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .card-footer {
    padding: 6px 8px 6px 16px;
  }
}

.card-footer h3 {
  margin: 0 0 1px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.card-footer p {
  margin: 0;
  color: rgba(255, 255, 255, .68);
  font-size: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.1;
}



/* SAKURA DECORATION LAYER */
.sakura-decoration {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  overflow: visible;
}

/* RANTING */
.branch {
  position: absolute;
  height: 2.2px;
  border-radius: 100%;
  background: linear-gradient(90deg, #3b183d, #74324e, #3c193b);
  box-shadow: 0 1px 3px rgba(25, 10, 35, .25);
}

/* RANTING KANAN ATAS */
.branch-top-1 {
  width: 54px;
  top: 8px;
  right: -8px;
  transform: rotate(-17deg);
}

.branch-top-2 {
  width: 28px;
  top: 2px;
  right: 25px;
  transform: rotate(32deg);
}

.branch-top-3 {
  width: 25px;
  top: 18px;
  right: 4px;
  transform: rotate(-55deg);
}

/* RANTING KIRI BAWAH */
.branch-bottom-1 {
  width: 56px;
  bottom: 9px;
  left: -8px;
  transform: rotate(20deg);
}

.branch-bottom-2 {
  width: 30px;
  bottom: 22px;
  left: 7px;
  transform: rotate(-43deg);
}

.branch-bottom-3 {
  width: 23px;
  bottom: 4px;
  left: 25px;
  transform: rotate(48deg);
}

/* BUNGA SAKURA */
.sakura {
  position: absolute;
  width: 18px;
  height: 18px;
  z-index: 30;
  filter: drop-shadow(0 2px 2.5px rgba(255, 70, 160, .22));
}

.sakura span {
  position: absolute;
  width: 7.5px;
  height: 10px;
  left: 5px;
  top: 4px;
  border-radius: 70% 70% 60% 60%;
  transform-origin: 4px 6px;
  background: radial-gradient(circle at 50% 80%, #ff7ab8 0%, #ffc0dc 35%, #ffe5f1 75%, #ffffff 100%);
  box-shadow: inset 0 -1px 1.5px rgba(255, 82, 156, .15);
}

.sakura span:nth-child(1) { transform: rotate(0deg) translateY(-4.5px); }
.sakura span:nth-child(2) { transform: rotate(72deg) translateY(-4.5px); }
.sakura span:nth-child(3) { transform: rotate(144deg) translateY(-4.5px); }
.sakura span:nth-child(4) { transform: rotate(216deg) translateY(-4.5px); }
.sakura span:nth-child(5) { transform: rotate(288deg) translateY(-4.5px); }

.sakura::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  left: 7px;
  top: 7px;
  border-radius: 50%;
  background: #ffcb4c;
  box-shadow: 0 0 2px rgba(255, 191, 51, .6);
}

/* POSISI BUNGA KANAN ATAS */
.sakura-top-1 { top: -9px; right: 3px; transform: scale(1.05); }
.sakura-top-2 { top: 2px; right: -10px; transform: scale(.78) rotate(20deg); }
.sakura-top-3 { top: -7px; right: 24px; transform: scale(.70) rotate(-10deg); }
.sakura-top-4 { top: 14px; right: 11px; transform: scale(.54) rotate(25deg); }

/* POSISI BUNGA KIRI BAWAH */
.sakura-bottom-1 { bottom: -8px; left: 3px; transform: scale(1.08) rotate(10deg); }
.sakura-bottom-2 { bottom: 4px; left: -10px; transform: scale(.80) rotate(-20deg); }
.sakura-bottom-3 { bottom: -7px; left: 23px; transform: scale(.68) rotate(18deg); }
.sakura-bottom-4 { bottom: 15px; left: 9px; transform: scale(.52) rotate(-15deg); }

/* DAUN / KELOPAK JATUH */
.petal {
  position: absolute;
  z-index: 25;
  width: 5px;
  height: 3px;
  border-radius: 90% 10% 90% 10%;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(255, 167, 207, .85));
  opacity: 0;
  filter: drop-shadow(0 1.5px 1.5px rgba(255, 80, 160, .12));
  animation: petalFall 7s linear infinite;
}

.petal-1 { top: -8px; left: 72%; animation-delay: 0s; }
.petal-2 { top: -14px; left: 85%; animation-delay: 2.4s; transform: scale(.7); }
.petal-3 { top: -11px; left: 61%; animation-delay: 4.7s; transform: scale(.8); }
.petal-4 { top: -11px; left: 93%; animation-delay: 6s; transform: scale(.55); }

@keyframes petalFall {
  0% {
    opacity: 0;
    transform: translate3d(0, -3px, 0) rotate(0deg);
  }
  10% {
    opacity: .55;
  }
  35% {
    transform: translate3d(-10px, 50px, 0) rotate(90deg);
  }
  60% {
    transform: translate3d(8px, 100px, 0) rotate(190deg);
    opacity: .45;
  }
  85% {
    opacity: .25;
  }
  100% {
    opacity: 0;
    transform: translate3d(-8px, 180px, 0) rotate(330deg);
  }
}

/* HOVER */
.card-wrapper:hover .category-card {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(40, 32, 120, .26);
}

.card-wrapper:hover .arrow {
  background: white;
  color: #4939ca;
  transform: translateX(2px);
}

.card-wrapper:hover .sakura-top-1,
.card-wrapper:hover .sakura-top-2,
.card-wrapper:hover .sakura-bottom-1 {
  filter: drop-shadow(0 3px 5px rgba(255, 70, 160, .35));
}

@media (max-width: 500px) {
  .card-wrapper {
    width: 108px;
    height: 152px;
    flex: 0 0 108px;
  }
  .card-title {
    font-size: 11.5px;
  }
  .card-footer {
    min-height: 38px;
    padding: 5px 6px;
  }
  .card-footer h3 {
    font-size: 9px;
  }
  .card-footer p {
    font-size: 6.5px;
  }
  .card-footer .arrow {
    width: 17px;
    height: 17px;
    font-size: 8.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .petal {
    animation: none;
    display: none;
  }
  .category-card,
  .arrow {
    transition: none;
  }
}

/* TRENDING LIST */
#trend {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

#trend li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  border-radius: 8px;
  border-bottom: 1px solid #f4f0fb;
  cursor: pointer;
  transition: background .2s;
  min-height: 36px;
}

#trend li:hover {
  background: #faf6ff;
}

#trend li:last-child {
  border: 0;
}

#trend .n {
  width: 20px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: #2a2452;
}

.th {
  width: 34px;
  height: 30px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: #fff;
  font: 800 10px 'Source Sans 3';
  flex: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#trend b {
  display: block;
  font-size: 11.5px;
  line-height: 1.15;
  color: #1a153b;
}

#trend small {
  font-size: 10px;
  color: #6b6788;
}

#trend .ch {
  margin-left: auto;
  font-size: 13px;
  color: #2a2452;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.th-wrap {
  width: 34px;
  height: 30px;
  border-radius: 7px;
  overflow: hidden;
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.th-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
  display: block;
}

.th-fb {
  width: 34px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7c5cff, #2a2452);
  color: #fff;
  font: 800 10px 'Source Sans 3';
  flex: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.sold-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  color: #e0267f;
  background: rgba(224,38,127,.1);
  border-radius: 4px;
  padding: 1px 5px;
  margin-top: 2px;
  letter-spacing: 0.3px;
}

/* FLASH SALE */
.fs-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.fs .bolt {
  font-size: 28px;
  color: #ff2f8e;
}

.fs-h > div:nth-child(2) b {
  display: block;
  font: 800 19px 'Montserrat', sans-serif;
  color: #ff2f8e;
  letter-spacing: .5px;
  line-height: 1;
}

.fs-h > div:nth-child(2) small {
  font-size: 10.5px;
  color: #8a88a5;
  letter-spacing: 2px;
  font-weight: 600;
}

.cd {
  margin-left: auto;
  display: flex;
  align-items: flex-start;
  gap: 3px;
}

.cd div {
  text-align: center;
}

.cd div b {
  display: block;
  min-width: 32px;
  height: 30px;
  padding: 0 4px;
  border-radius: 7px;
  background: linear-gradient(180deg, #ff3d98, #ff2f8e);
  color: #fff;
  font: 800 16px/30px 'Montserrat', sans-serif;
  box-shadow: 0 3px 8px rgba(255, 47, 142, 0.28);
}

.cd small {
  font-size: 7.5px;
  letter-spacing: .8px;
  color: #6b6788;
  font-weight: 700;
}

.cd i {
  font-style: normal;
  font-weight: 800;
  color: #ff2f8e;
  margin-top: 3px;
}

.fs-b {
  display: flex;
  gap: 14px;
  align-items: center;
  position: relative;
  transition: opacity .25s ease;
  flex: 1;
  padding: 6px 0;
}

.fs-img {
  position: relative;
  width: 120px;
  height: 110px;
  border-radius: 12px;
  overflow: hidden;
  flex: none;
}

.fs-img > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; }
.fs-img svg {
  width: 100%;
  height: 100%;
}

.fs-img em {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #ff3d6b;
  color: #fff;
  font: 800 11px 'Source Sans 3';
  font-style: normal;
  padding: 2px 7px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.fs-i {
  flex: 1;
}

.fs-i b {
  display: block;
  font-size: 13px;
  color: #14103a;
  line-height: 1.2;
}

.fs-i > small {
  font-size: 11px;
  color: #6a668c;
  font-weight: 600;
}

.fs-i s {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: #9a97b0;
}

.fs-i strong {
  display: block;
  font: 800 21px 'Source Sans 3', sans-serif;
  color: #ff2f8e;
  line-height: 1.1;
}

.fs-add {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #ff2f8e;
  color: #fff;
  font-size: 20px;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 14px rgba(255, 47, 142, 0.35);
  transition: transform .2s, filter .2s;
  flex-shrink: 0;
  align-self: flex-end;
}

.fs-add:hover {
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.08);
}

.fs-f {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e0dbf0;
  cursor: pointer;
  transition: all .2s;
}

.dots i.on {
  background: #ff2f8e;
  width: 18px;
  border-radius: 4px;
}

.arr {
  display: flex;
  gap: 6px;
}

.arr button {
  width: 24px;
  height: 24px;
  border: 1px solid #e0dbf0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  background: #fff;
  transition: all .2s;
  color: #2a2452;
}

.arr button:hover {
  background: #ffe4f0;
  border-color: #ffb4d4;
  color: var(--pink);
}

/* ========================================================
   BARIS 2: PROMO MATSURI, QRIS LEBIH HEMAT, CARA TOP UP
   ======================================================== */
.r2 {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 14px;
  margin-top: 14px;
}

.matsuri {
  position: relative;
  border-radius: var(--radius-lg);
  min-height: 164px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(240, 235, 250, 0.8);
}

.matsuri > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.matsuri-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.matsuri[data-banner-mode], .qris[data-banner-mode] { background:var(--banner-fill); }
.matsuri[data-banner-mode] > svg { display:none; }
.matsuri[data-banner-mode] .matsuri-overlay, .qris[data-banner-mode] .qris-overlay { background:var(--banner-fill); opacity:.35; }
.matsuri[data-banner-mode="none"] .matsuri-overlay, .qris[data-banner-mode="none"] .qris-overlay { display:none; }
.matsuri-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(25, 8, 38, 0.90) 0%, rgba(25, 8, 38, 0.55) 50%, rgba(25, 8, 38, 0.15) 100%);
  z-index: 1;
  pointer-events: none;
}

.m-t {
  position: absolute;
  left: 30px;
  top: 18px;
  color: #fff;
  text-align: left;
  max-width: 280px;
  z-index: 2;
}

.m-t h3 {
  font: 900 24px 'Montserrat', sans-serif;
  color: #ff7ab5;
  text-shadow: 0 2px 0 #4a0b2f, 0 0 16px rgba(255, 111, 176, 0.8);
  line-height: 1;
}

.jp2 {
  font-size: 11px;
  margin: 4px 0 8px;
  color: #ffd0e6;
  font-weight: 600;
}

.m-t b {
  display: block;
  font: 800 15px/1.2 'Montserrat', sans-serif;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  color: #fff;
}

.wbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  background: #fff;
  color: #2a1450;
  padding: 7px 18px;
  border-radius: 8px;
  font: 800 11px 'Montserrat', sans-serif;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  transition: all .2s;
}

.wbtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  color: #ff2f8e;
}

.qris {
  position: relative;
  border-radius: var(--radius-lg);
  min-height: 164px;
  overflow: hidden;
  background: linear-gradient(105deg, #fdf6ff 0%, #f2e7ff 50%, #9d79e6 100%);
  box-shadow: var(--shadow);
  display: flex;
  border: 1px solid rgba(240, 235, 250, 0.8);
}

.qris-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.qris-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(253, 246, 255, 0.95) 0%, rgba(242, 231, 255, 0.82) 55%, rgba(242, 231, 255, 0.35) 100%);
  z-index: 1;
  pointer-events: none;
}

.q-t {
  padding: 14px 16px;
  flex: 1;
  position: relative;
  z-index: 2;
}

.q-t small {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 13px 'Source Sans 3', sans-serif;
  color: #2a2452;
  letter-spacing: .5px;
  margin-bottom: 2px;
}

.q-t small span {
  font-size: 18px;
  color: #6a55d6;
}

.q-t h3 {
  font: 900 18px 'Montserrat', sans-serif;
  color: #d41d84;
  margin: 0 0 6px 0;
  line-height: 1.1;
}

.q-t ul {
  font-size: 10px;
  line-height: 1.6;
  color: #2a2452;
  font-weight: 600;
}

.q-t li::before {
  content: "✔";
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ff2f8e;
  color: #fff;
  font-size: 8px;
  text-align: center;
  line-height: 13px;
  margin-right: 6px;
}

.pbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  height: 30px;
  padding: 0 16px;
  border-radius: 8px;
  background: linear-gradient(90deg, #ff2f8e, #ff4f9f);
  color: #fff;
  font: 800 10px 'Montserrat', sans-serif;
  box-shadow: 0 6px 12px rgba(255, 47, 142, 0.3);
  transition: all .2s;
}

.pbtn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.phone {
  position: absolute;
  right: 20px;
  top: 10px;
  width: 90px;
  height: 154px;
  border-radius: 16px;
  background: #14103a;
  padding: 5px;
  transform: rotate(6deg);
  box-shadow: 0 12px 24px rgba(40, 20, 100, 0.35);
  flex-shrink: 0;
}

.scr {
  background: #fff;
  border-radius: 12px;
  height: 100%;
  padding: 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.scr b {
  display: block;
  font: 900 13px 'Montserrat';
  color: #c8195f;
  margin-bottom: 2px;
}

.scr svg {
  width: 80%;
  aspect-ratio: 1;
  fill: #14103a;
}

.how {
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  min-height: 164px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(240, 235, 250, 0.8);
  display: flex;
  flex-direction: column;
}

.how-h {
  display: flex;
  gap: 10px;
  align-items: center;
}

.how-h h3 {
  font: 800 16px 'Source Sans 3', sans-serif;
  letter-spacing: .3px;
  color: #14103a;
  line-height: 1.15;
}

.how-h h3 small {
  font-size: 10px;
  font-weight: 600;
  color: #8a88a5;
  margin-left: 6px;
}

.how-h p {
  font-size: 11.5px;
  color: #4a4670;
  font-weight: 500;
}

.how-h .hi.sq {
  width: 30px;
  height: 30px;
  font-size: 18px;
  background: #e0defc;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
  flex: 1;
}

.st {
  position: relative;
  background: #fff;
  border: 1px solid #f0eaff;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(120, 80, 200, 0.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  min-height: 98px;
  box-sizing: border-box;
}

.st:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(120, 80, 200, 0.12);
  border-color: #dfd4fa;
}

/* Numbering di pojok kiri atas */
.st-num {
  position: absolute;
  top: 9px;
  left: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  color: #ff3388;
  background: rgba(255, 51, 136, 0.08);
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 51, 136, 0.18);
  letter-spacing: .5px;
}

/* Row atas penampung icon (di kanan atas) */
.st-top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 38px;
}

/* Icon lebih besar & ganti style */
.st-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease;
}

.st:hover .st-icon {
  transform: scale(1.08);
}

.st-icon-1 {
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.12), rgba(162, 155, 254, 0.22));
  color: #6c5ce7;
}

.st-icon-2 {
  background: linear-gradient(135deg, rgba(255, 51, 136, 0.12), rgba(255, 118, 117, 0.22));
  color: #ff3388;
}

.st-icon-3 {
  background: linear-gradient(135deg, rgba(0, 184, 148, 0.12), rgba(0, 206, 201, 0.22));
  color: #00b894;
}

.st-icon .st-svg,
.st-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
  fill: none;
  stroke: currentColor;
}

/* Body teks */
.st-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.st-title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #1a1440;
  line-height: 1.25;
}

.st-desc {
  display: block;
  font-size: 9.5px;
  color: #6b6788;
  line-height: 1.35;
}

/* ========================================================
   BARIS 3: TESTIMONI, METODE PEMBAYARAN, FAQ
   ======================================================== */
.r3 {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1.05fr) minmax(0, 1.3fr);
  gap: 14px;
  margin-top: 14px;
}

.r3 .panel {
  min-height: 154px;
  padding: 14px 16px;
}

/* TESTIMONI PANEL & CARDS */
.panel.tes {
  display: flex;
  flex-direction: column;
}

.panel.tes .ph {
  flex-wrap: nowrap;
  gap: 10px;
}

.panel.tes .ph > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.panel.tes .ph h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel.tes .ph .sm {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tgrid {
  display: flex;
  gap: 10px;
  flex: 1;
  align-items: stretch;
  margin-top: 8px;
}

.tc {
  flex: 1;
  min-width: 0;
  background: #fff;
  border-radius: 12px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  box-shadow: 0 2px 10px rgba(120, 80, 200, 0.06);
  border: 1px solid #f0eaff;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-sizing: border-box;
}

.tc:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(120, 80, 200, 0.12);
  border-color: #dfd4fa;
}

/* Baris atas: { GAMBAR PROFILE } Nama & Bintang */
.tc-head {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.tc-avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  border: 1.5px solid #f2e6f2;
  flex-shrink: 0;
  background: #f0e8f0;
}

.tc-avatar .av-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tc-user {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.tc-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #1a1440;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  line-height: 1;
}

.tc-badge {
  display: none !important;
}

/* Baris bawah: Review ( Maksimal 2 baris dan buatkan elipsis ... ) */
.tc-comment {
  font-size: 11px;
  color: #555075;
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  max-height: calc(1.45em * 2);
}

/* METODE PEMBAYARAN */
.pgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 4px;
  flex: 1;
  align-content: center;
}

.pm {
  height: 36px;
  background: #fff;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font: 800 12.5px 'Montserrat', sans-serif;
  box-shadow: 0 2px 8px rgba(120, 80, 200, 0.08);
  border: 1px solid #f0eaff;
  transition: transform .2s, box-shadow .2s;
  letter-spacing: -.3px;
  padding: 0 4px;
}

.pm:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(120, 80, 200, 0.16);
}

.pm.more-t {
  background: none;
  box-shadow: none;
  border: 0;
  font: 600 9.5px 'Source Sans 3';
  color: #8a88a5;
  text-align: left;
  padding-left: 6px;
  justify-items: start;
}

/* FAQ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.faq-list li {
  background: #fff;
  border: 1px solid #f0eaff;
  border-radius: 8px;
  font-size: 10.5px;
  cursor: pointer;
  overflow: hidden;
  transition: all .2s;
}

.faq-list li .q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 12px;
  font-weight: 600;
  color: #241d4a;
}

.faq-list li .a {
  display: none;
  padding: 4px 12px 8px;
  color: #5e5a7a;
  font-size: 10px;
  line-height: 1.4;
  border-top: 1px dashed #f2ecfb;
}

.faq-list li.open {
  box-shadow: 0 4px 14px rgba(120, 80, 200, 0.12);
  border-color: #dfd4fa;
}

.faq-list li.open .a {
  display: block;
}

.faq-list li .q span {
  display: inline-flex;
  transition: transform .2s;
  font-size: 11px;
  color: #8a85a8;
}

.faq-list li.open .q span {
  transform: rotate(180deg);
  color: var(--pink);
}

/* FOOTER */
.foot-wrap {
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid #ece7f7;
  margin-top: 24px;
}

.foot {
  max-width: 1640px;
  margin: 0 auto;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  font-size: 11px;
  color: #3d3963;
  gap: 16px;
  flex-wrap: wrap;
}

.f-l {
  display: flex;
  align-items: center;
  gap: 14px;
}

.f-l p {
  font-size: 10px;
  line-height: 1.35;
  color: #555075;
}

.logo.sm {
  margin: 0;
}

.logo.sm b {
  font-size: 19px;
}

.logo.sm small {
  font-size: 7px;
  letter-spacing: 5px;
}

.foot nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.foot nav a {
  font-size: 10.5px;
  color: #4a4670;
  transition: color .2s;
  font-weight: 500;
}

.foot nav a:hover {
  color: var(--pink);
}

.foot nav i {
  font-style: normal;
  color: #bbb6d4;
  font-size: 9px;
}

.soc {
  display: flex;
  gap: 14px;
  font-size: 16px;
}

.soc a {
  display: inline-flex;
  transition: all .2s;
  color: #4a4670;
}

.soc a:hover {
  color: var(--pink);
  transform: translateY(-2px);
}

.copy {
  font-size: 10px;
  color: #7d7899;
}

/* TOAST */
.toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translate(-50%, 16px);
  background: #14103a;
  color: #fff;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
  box-shadow: 0 10px 30px rgba(20, 10, 50, 0.35);
  display: flex;
  align-items: center;
  gap: 10px;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* MOBILE NAV DRAWER */
.mobile-drawer {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid #ece7f7;
  box-shadow: 0 14px 30px rgba(100, 60, 180, 0.15);
  padding: 16px 24px;
  display: none;
  flex-direction: column;
  gap: 12px;
  z-index: 99;
  transform: translateY(-10px);
  opacity: 0;
  transition: all .25s ease;
}

.mobile-drawer.open {
  display: flex;
  transform: translateY(0);
  opacity: 1;
}

.mobile-drawer .search {
  max-width: 100%;
}

.mobile-drawer .links {
  flex-direction: column;
  align-items: flex-start;
  margin-left: 0;
  width: 100%;
}

.mobile-drawer .links a {
  width: 100%;
  height: 38px;
  border-radius: 8px;
  font-size: 14px;
}

/* Fluid layout: grid children must be allowed to shrink below their content. */
:root { --page-gutter: clamp(16px, 2.5vw, 36px); }
html { scroll-padding-top: 84px; }
.nav, .hero-container, .section-wrap, .foot {
  max-width: 1480px;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}
.r1, .r2, .r3 { gap: 20px; }
.r1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.3fr); }
.r2 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
.r3 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr); margin-top: 20px; }
.r1 > *, .r2 > *, .r3 > *, .fs-i, .q-t, .st, .search, .search input { min-width: 0; }
.panel, .how { padding: 20px; }
.r3 .panel { padding: 20px; }
.nav .search { min-width: 140px; }
.hi, .arr, .fs .bolt, .faq-list .q > span { flex-shrink: 0; }
.ph { row-gap: 10px; }
.ph h2, .ph h2.s { font-size: 16px; }
.ph h2 small, .how-h h3 small { display: block; margin: 4px 0 0; }
.ph > small, .ph .sm, .how-h p { font-size: 13px; line-height: 1.5; }
.panel.tes .ph h2, .panel.tes .ph .sm { white-space: normal; overflow: visible; }
.arr button { width: 36px; height: 36px; font-size: 16px; }
.cart, .menu-toggle, .login, .user-badge { min-height: 44px; }
.cart, .menu-toggle { width: 44px; }
.cart i[hidden] { display: none; }
.hero-in { max-width: 660px; padding: 48px 0 56px; }
.hf { flex-wrap: wrap; overflow: visible; }
.hf li { max-width: 100%; }
.hf li, .hf li p { white-space: normal; }
.hero-search input, .search input { font-size: 16px; }
.hs-btn { min-height: 44px; }
.gcards { min-width: 0; gap: 14px; padding: 16px 10px 20px; }
.card-wrapper { width: 144px; height: 200px; flex: 0 0 144px; }
.category-bg-img { object-fit: cover; }
.category-card { background: linear-gradient(145deg, #6c4cff, #211a52); }
.card-hover-label {
  opacity: 0;
  inset: 0;
  min-height: 0;
  align-items: center;
  padding: 10px;
  background: transparent;
}
.card-hover-label span { transform: none; font-size: 12px; overflow-wrap: anywhere; }
.fs-h { flex-wrap: wrap; row-gap: 12px; }
.fs-h > div:nth-child(2) b { font-size: 18px; }
.fs-h > div:nth-child(2) small { letter-spacing: 1px; }
.fs-img { width: 90px; height: 100px; }
.fs-b { gap: 12px; flex-wrap: wrap; }
.fs-i { flex: 1 1 100px; overflow-wrap: anywhere; }
.fs-i b { font-size: 15px; }
.fs-add { width: 44px; height: 44px; }
.matsuri { min-height: 220px; }
.m-t { position: relative; left: auto; top: auto; max-width: none; padding: 24px; overflow-wrap: anywhere; }
.q-t { padding: 24px 120px 24px 24px; overflow-wrap: anywhere; }
.q-t ul { font-size: 13px; line-height: 1.8; }
.q-t h3 { font-size: 20px; }
.phone { right: 18px; top: 50%; margin-top: -77px; z-index: 2; }
.wbtn, .pbtn { min-height: 44px; height: auto; padding: 10px 14px; line-height: 1.4; }
.steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.st-title { font-size: 14px; }
.st-desc { font-size: 12px; line-height: 1.5; }
.st-body { overflow-wrap: anywhere; }
.tc-comment { display: block; max-height: none; font-size: 13px; line-height: 1.6; }
.tc-name { font-size: 14px; }
.tgrid { gap: 12px; }
.pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pm { height: 44px; font-size: 12px; min-width: 0; overflow-wrap: anywhere; }
.faq-list li .q { width: 100%; min-height: 44px; text-align: left; font-size: 14px; gap: 12px; }
.faq-list li .a { font-size: 13px; line-height: 1.6; padding: 10px 12px; }
#trend { justify-content: flex-start; gap: 4px; }
#trend li { min-height: 44px; padding: 6px; }
#trend .th-wrap, #trend .th {
  width: 44px;
  height: auto;
  aspect-ratio: 118 / 164;
  background-color: #f3ecff;
}
#trend .th-img { object-fit: contain; }
#trend .th-fb { width: 100%; height: 100%; }
#trend .trend-copy { display: flex; flex-direction: column; gap: 2px; }
#trend .trend-copy b, #trend .trend-copy small { margin: 0; line-height: 1.25; }
#trend li > div:not(.th-wrap) { min-width: 0; overflow-wrap: anywhere; }
#trend b { font-size: 13px; }
#trend small { font-size: 12px; }
.toast { width: max-content; max-width: calc(100% - 32px); bottom: max(24px, env(safe-area-inset-bottom)); }
.mobile-drawer { max-height: calc(100dvh - 60px); overflow-y: auto; overscroll-behavior: contain; padding: 20px var(--page-gutter); }
.mobile-drawer .search { flex: none; width: 100%; height: 44px; }
.mobile-drawer .links a { min-height: 44px; }
.foot { padding-top: 24px; padding-bottom: 24px; }
.foot nav a, .copy, .f-l p { font-size: 12px; line-height: 1.6; }
.soc a { min-width: 36px; min-height: 44px; align-items: center; justify-content: center; }
:is(a, button, input):focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }

@media (max-width: 1399px) {
  .vt { display: none; }
  .hero-in { margin-left: 0; }
  .r1, .r2, .r3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r1 .gp, .how, .r3 .tes { grid-column: 1 / -1; }
  .nav .links { margin-left: 0; }
  .nav .links a { padding: 0 10px; }
}
@media (max-width: 1199px) {
  .nav .links, .nav > .search { display: none; }
  .menu-toggle { display: grid; }
}
@media (min-width: 1200px) {
  .mobile-drawer.open { display: none; }
}
@media (max-width: 767px) {
  .r1 .gp { min-height: 0; }
  .gp .gcards { gap: 10px; padding: 16px 8px 20px; scroll-padding-inline: 8px; align-items: flex-start; }
  .gp .card-wrapper {
    width: calc((100% - 40px) / 4.5);
    flex-basis: calc((100% - 40px) / 4.5);
    height: auto;
    aspect-ratio: 118 / 164;
  }
  .gp .sakura-decoration {
    width: 166.6667%;
    height: 166.6667%;
    right: auto;
    bottom: auto;
    transform: scale(.6);
    transform-origin: top left;
  }
  .gp .card-hover-label { min-height: 0; padding: 4px; }
  .gp .card-hover-label span { font-size: 9px; line-height: 1.2; }
  .gp .badge { font-size: 5px; padding: 3px; top: 4px; left: 3px; }
  .r1, .r2, .r3 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .r2, .r3 { margin-top: 16px; }
  .r1 .gp, .how, .r3 .tes { grid-column: auto; }
  .nav { gap: 8px; }
  .nav-right { gap: 8px; }
  .hero { min-height: auto; }
  .hero-in { max-width: 100%; padding: 32px 0 48px; }
  .hero h1 { font-size: clamp(28px, 6vw, 40px); }
  .hero h1 em { font-size: clamp(34px, 7vw, 48px); }
  .hero-fade { background: linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,255,255,.78) 60%, rgba(255,255,255,.5)); }
  .hf { gap: 8px; margin-bottom: 20px; }
  .hf li { font-size: 12px; padding: 8px 10px; }
  .panel, .how, .r3 .panel { padding: 16px; }
  .gp .ph { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
  .gp .ph > small { grid-column: 2; grid-row: 2; }
  .gp .ph .arr { grid-column: 3; grid-row: 1 / 3; }
  .ph h2 { margin: 0; }
  .tgrid { flex-direction: column; }
  .fs-b { flex-direction: row; align-items: center; }
  .fs-add { align-self: center; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .st { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; min-height: 90px; padding: 16px 16px 16px 52px; }
  .st-num { left: 10px; top: 50%; transform: translateY(-50%); }
  .st-top { justify-content: flex-start; }
  .foot { flex-direction: column; align-items: flex-start; gap: 16px; }
  .foot nav { gap: 8px 12px; }
  .f-l { flex-wrap: wrap; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .gp .card-hover-label span { font-size: 10px; }
}
@media (max-width: 479px) {
  .nav .logo-t b { font-size: 20px; }
  .nav .logo-t small { font-size: 7px; letter-spacing: 4px; }
  .nav .logo > span:first-child svg { width: 30px; height: 30px; }
  .login, .user-badge { width: 44px; padding: 0; justify-content: center; font-size: 18px; }
  .login > span:last-child, .user-badge > span:last-child { display: none; }
  .hero-search { padding-left: 10px; }
  .hs-icon { margin-right: 8px; }
  .hs-btn { padding: 10px 12px; }
  .hs-btn > span:last-child { display: none; }
  .ph h2, .ph h2.s { font-size: 14px; }
  .gp .ph > small { grid-column: 1 / -1; grid-row: 2; }
  .gp .ph .arr { grid-row: 1; }
  .ph .more { font-size: 12px; }
  .fs-h { gap: 8px; }
  .fs .bolt { font-size: 22px; }
  .fs-h > div:nth-child(2) b { font-size: 16px; }
  .fs-h > div:nth-child(2) small { font-size: 9px; }
  .cd div b { min-width: 28px; font-size: 14px; }
  .fs-b { gap: 10px; }
  .fs-img { width: 76px; height: 88px; }
  .fs-i strong { font-size: 20px; }
  .fs-i { flex-basis: 90px; }
  .q-t { padding: 24px; }
  .phone { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html, .gcards { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


.support-link{display:inline-flex;align-items:center;justify-content:center;color:inherit;text-decoration:none}
/* Homepage catalog and balanced content rows */
.r1{grid-template-columns:minmax(0,7fr) minmax(0,3fr)}.r1 .gp{grid-column:auto}.r2{grid-template-columns:minmax(0,3fr) minmax(0,3fr) minmax(0,4fr)}.r2 .how{grid-column:auto}.r3{grid-template-columns:repeat(2,minmax(0,1fr))}.r3 .tes{grid-column:auto}.product-catalog,.payment-section{margin-top:20px;min-width:0}.catalog-tabs{display:flex;gap:9px;overflow-x:auto;padding:6px 0 18px}.catalog-tabs button{display:flex;align-items:center;gap:8px;flex:none;min-height:44px;padding:10px 18px;border:1px solid #eddaea;border-radius:12px;background:#fff;color:#73547b;font:inherit;font-size:13px;cursor:pointer}.catalog-tabs button.active{background:#862054;border-color:#862054;color:#fff}.catalog-tabs img{width:22px;height:22px;object-fit:contain}.catalog-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:16px}.catalog-card{position:relative;min-width:0;border-radius:14px;overflow:hidden;text-decoration:none;aspect-ratio:11/16;background:#f4e8f6}.catalog-card[hidden]{display:none}.catalog-image{position:absolute;inset:0}.catalog-image img{width:100%;height:100%;object-fit:cover}.catalog-card strong{position:absolute;bottom:0;left:0;right:0;padding:28px 8px 12px;background:linear-gradient(transparent,#241334e6);color:#fff;font-size:12px;text-align:center;line-height:1.5}.home-article-list{display:grid;gap:14px}.home-article{display:flex;align-items:center;gap:14px;color:inherit;text-decoration:none;min-width:0}.home-article img{width:100px;aspect-ratio:16/9;object-fit:cover;border-radius:10px;flex:none}.home-article time{font-size:11px;color:#91789c}.home-article h3{font-size:14px;line-height:1.5;margin:5px 0;overflow-wrap:anywhere}.home-articles .ph{flex-wrap:wrap}.home-articles .more{margin-left:auto}.r3 .tgrid{flex-direction:column}.payment-section{width:100%;box-sizing:border-box}.payment-marquee{overflow:hidden;width:100%;padding:12px 0}.payment-track{display:flex;width:max-content;animation:paymentMarquee 28s linear infinite}.payment-group{display:flex;align-items:center;gap:20px;padding-right:20px;min-width:calc(100vw - 64px);justify-content:space-around}.payment-brand{display:flex;align-items:center;justify-content:center;width:140px;min-height:64px;flex:none;background:#fff;border:1px solid #eedfee;border-radius:12px;padding:10px;box-sizing:border-box}.payment-brand img{max-width:100%;height:40px;object-fit:contain}.payment-brand strong{font-size:14px;color:#543365}@keyframes paymentMarquee{to{transform:translateX(-50%)}}
@media(min-width:768px) and (max-width:1100px){.r2{grid-template-columns:repeat(2,minmax(0,1fr))}.r2 .how{grid-column:1/-1}.catalog-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.r1 .gp .ph{flex-wrap:wrap}.r1 .gp .ph>small{display:none}.q-t{padding:20px}.phone{display:none}.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){.r1,.r2,.r3{grid-template-columns:minmax(0,1fr)}.r1 .gp,.r2 .how,.r3 .tes{grid-column:auto}.catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.catalog-card strong{font-size:10px;padding:22px 5px 8px}.catalog-tabs button{padding:10px 13px;font-size:12px}.product-catalog,.payment-section{margin-top:16px}.home-article img{width:86px}.home-article h3{font-size:13px}.payment-brand{width:110px}.payment-group{gap:12px;padding-right:12px;min-width:calc(100vw - 32px)}.foot-wrap .foot{align-items:center;text-align:center}.foot-wrap .f-l{flex-direction:column;align-items:center;justify-content:center;width:100%;gap:10px}.foot-wrap .foot nav,.foot-wrap .soc{justify-content:center;width:100%}.foot-wrap .copy{width:100%;text-align:center}.foot-wrap .f-l p{margin:0}}
@media(prefers-reduced-motion:reduce){.payment-track{animation:none;flex-wrap:wrap;width:100%}.payment-group{flex-wrap:wrap;min-width:0;width:100%;padding:0}.payment-group[aria-hidden=true]{display:none}}
/* Compact catalog, sliding content, and mobile hero */
.catalog-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.catalog-more{display:block;margin:20px auto 0;padding:12px 25px;border:1px solid #e4cadd;border-radius:12px;background:#fff;color:#862054;font:inherit;font-size:13px;cursor:pointer;min-height:44px}.catalog-more[hidden]{display:none}.r2{grid-template-columns:minmax(0,30fr) minmax(0,25fr) minmax(0,45fr)}.r2>.how{grid-column:1/-1}.r2 .payment-section{margin:0}.r2 .payment-group{min-width:0;justify-content:flex-start}.r2 .payment-marquee{margin:auto 0}.r2 .payment-section{display:flex;flex-direction:column;justify-content:center}.r2 .payment-brand{width:125px}.r2 .q-t{padding:22px}.r2 .phone{display:none}.r3 .tgrid,.home-article-list{display:flex;flex-direction:row;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;align-items:stretch}.tgrid::-webkit-scrollbar,.home-article-list::-webkit-scrollbar{display:none}.r3 .tc,.home-article{flex:0 0 calc((100% - 18px)/2.5);min-width:0;scroll-snap-align:start;box-sizing:border-box}.r3 .tc{padding:15px;display:flex;flex-direction:column}.tc-head{flex-wrap:wrap}.home-article{display:flex;flex-direction:column;align-items:stretch;border:1px solid #efdeec;border-radius:12px;overflow:hidden;gap:0;background:#fff}.home-article img{width:100%;aspect-ratio:16/9;border-radius:0;object-fit:cover}.home-article>div{padding:12px}.home-article h3{font-size:12px}.r3 .panel{overflow:hidden}.r3 .tc-comment{font-size:12px}.r3 .tc-name{font-size:12px}.r3 .tc-avatar{width:34px;height:34px;flex:none}.r3 .tc-user{min-width:0}.r3 .tes .ph{flex-wrap:wrap}.r3 .tes .ph>div:not(.arr){flex:1;min-width:120px}
@media(max-width:1100px) and (min-width:768px){.r2{grid-template-columns:minmax(0,30fr) minmax(0,25fr) minmax(0,45fr)}.r2 .ph{flex-wrap:wrap}.r2 .ph h2{font-size:14px}.r2 .q-t{padding:16px}.r2 .q-t h3{font-size:18px}.r2 .q-t li{font-size:11px}.r2 .pbtn{font-size:10px;padding:10px}.m-t{padding:20px}}
@media(max-width:767px){.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.r2{grid-template-columns:minmax(0,1fr)}.r2>.how{grid-column:auto}.gp .card-wrapper{width:calc((100% - 30px)/3.5);flex-basis:calc((100% - 30px)/3.5)}.hero{min-height:0;overflow:visible}.hero-in{padding:32px 0 38px;text-align:left;max-width:100%}.hero-art-img{object-position:70% center;opacity:.65}.hero-fade{background:linear-gradient(90deg,#fffffff2,#ffffffe0 50%,#ffffff9c)}.hero h1{font-size:clamp(28px,7vw,38px);line-height:1.2;overflow-wrap:anywhere}.hero h1 em{font-size:clamp(32px,8vw,44px);line-height:1.2}.hero .jp{font-size:10px;letter-spacing:1px;line-height:1.6}.hero .hsub{font-size:14px;line-height:1.7;max-width:280px}.hf{display:flex;flex-direction:column;align-items:flex-start;gap:7px}.hf li{font-size:11px;padding:7px 10px}.hero-search{width:100%;box-sizing:border-box;min-height:52px;margin-top:20px}.hero-search input{font-size:12px;min-width:0}.r3 .tc,.home-article{flex-basis:calc((100% - 15px)/2.5)}.r3 .tc{padding:10px}.tc-head{gap:5px}.r3 .tc-name{font-size:10px}.r3 .tc-comment{font-size:10px;line-height:1.7}.home-article>div{padding:8px}.home-article h3{font-size:10px}.home-article time{font-size:9px}.r2 .payment-section{min-height:180px}.r2 .q-t{padding:24px}.r2 .payment-group{min-width:0}}

.product-search-host{position:relative;overflow:visible}.product-search-dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;min-width:240px;max-height:360px;overflow-y:auto;background:#fff;border:1px solid #eddcea;border-radius:14px;box-shadow:0 12px 35px #3d174526;padding:6px;z-index:110;text-align:left}.product-search-dropdown[hidden]{display:none}.product-search-dropdown a{display:flex;align-items:center;gap:10px;padding:11px;border-radius:9px;color:#392344;text-decoration:none}.product-search-dropdown a:hover,.product-search-dropdown a.selected{background:#fff0f7}.product-search-dropdown img{width:36px;height:48px;object-fit:cover;border-radius:6px;flex:none}.product-search-dropdown strong,.product-search-dropdown small{display:block;line-height:1.6}.product-search-dropdown strong{font-size:12px}.product-search-dropdown small,.product-search-dropdown p{font-size:11px;color:#8b718f}.product-search-dropdown p{padding:12px}.hero-container{position:relative;z-index:6}.hero-search .product-search-dropdown{min-width:0}.nav-wrap{z-index:100}


.hero{overflow:visible}.hero-search{z-index:12}.product-search-dropdown{overscroll-behavior:contain}.r3 .tgrid{flex:1}

/* Review data and final homepage placement */
.catalog-grid{grid-template-columns:repeat(8,minmax(0,1fr))}.r2>.how{grid-column:auto}.payment-section{width:100%;margin-top:20px;box-sizing:border-box}.payment-group{min-width:calc(min(100vw,1480px) - 100px)}.r3 .tc{justify-content:center;gap:16px}.r3 .tc-head{align-items:center;justify-content:center}.r3 .tc-name{font-size:15px;line-height:1.5;white-space:normal}.r3 .tc-comment{font-size:14px;line-height:1.8;margin:0;text-align:center;overflow-wrap:anywhere}.review-initial{display:flex;align-items:center;justify-content:center;background:#fbe5f1;color:#862054;font-size:16px;font-weight:800}.review-empty{font-size:14px;color:#886c90;padding:24px;text-align:center;width:100%;align-self:center}.r3 .tgrid{align-items:stretch}.r2 .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:768px) and (max-width:1100px){.r2>.how{grid-column:auto}.r2 .how{padding:16px}.r2 .steps{grid-template-columns:minmax(0,1fr)}.r2 .st{min-height:0;padding:12px}.r2 .how-h h3{font-size:13px}}
@media(max-width:767px){.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero .hf{display:flex;flex-wrap:nowrap;flex-direction:row;align-items:stretch;gap:5px;width:100%;margin-bottom:16px;overflow-x:auto}.hero .hf li{flex:0 0 auto;min-width:0;max-width:none;box-sizing:border-box;padding:8px clamp(6px,2vw,10px);gap:5px;font-size:clamp(8px,2.2vw,11px);white-space:nowrap;line-height:1}.hero .hf li p{white-space:nowrap;overflow-wrap:normal;font-size:inherit}.hero .hf li>span{font-size:14px;flex:none}.r3 .tc{gap:10px;padding:12px 8px}.r3 .tc-name{font-size:12px}.r3 .tc-comment{font-size:12px;line-height:1.7}.r3 .tc-head{gap:7px}.payment-group{min-width:calc(100vw - 64px)}.r2 .steps{grid-template-columns:minmax(0,1fr)}}