/* ========== RIZZI STORE - MODERN UI DESIGN ========== */

/* Variables */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface2: #f8fafb;
  --text: #0a0e11;
  --muted: #5f6b75;
  --line: #e5e8eb;
  --brand: #00ff77;
  --brand-dark: #00dd66;
  --brand2: #007aff;
  --brand2-dark: #0051d5;
  --danger: #ff3b30;
  --warning: #ff9500;
  --success: #34c759;
  --glass: rgba(255,255,255,0.80);
  --shadow: 0 8px 32px rgba(0,0,0,0.08);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.12);
  --radius: 12px;
  --radius-lg: 20px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --bg: #000000;
  --surface: #121212;
  --surface2: #1a1a1a;
  --text: #f5f5f7;
  --muted: #8e92a0;
  --line: #2c2c2e;
  --glass: rgba(18,18,18,0.85);
  --shadow: 0 8px 32px rgba(0,0,0,0.30);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.40);
}

/* ========== RESET & BASE ========== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

img {
  max-width: 100%;
  display: block;
}

/* ========== LAYOUT ========== */
.container {
  width: min(1200px, calc(100% - 24px));
  margin: 0 auto;
}

@media (max-width: 768px) {
  .container {
    width: min(100%, calc(100% - 16px));
  }
}

@media (max-width: 480px) {
  .container {
    width: 100%;
    padding: 0 12px;
  }
}

/* ========== TOPBAR ========== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}

.nav {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
}

@media (max-width: 768px) {
  .nav {
    height: 64px;
    padding: 0 12px;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .brand {
    font-size: 18px;
    gap: 10px;
  }
}

.brand-logo {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, #00ff77, #00dd66);
  display: grid;
  place-items: center;
  color: #000;
  font-weight: 1000;
  font-size: 24px;
  box-shadow: 0 8px 24px rgba(0,255,119,0.25);
  flex: 0 0 46px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ========== BUTTONS ========== */
.btn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(0,255,119,0.10);
}

.btn.primary {
  background: linear-gradient(135deg, #00ff77, #00dd66);
  border-color: transparent;
  color: #000;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(0,255,119,0.25);
}

.btn.primary:hover {
  box-shadow: 0 12px 32px rgba(0,255,119,0.35);
  transform: translateY(-2px);
}

.btn.blue {
  background: linear-gradient(135deg, #007aff, #0051d5);
  border-color: transparent;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(0,122,255,0.25);
}

.btn.blue:hover {
  box-shadow: 0 12px 32px rgba(0,122,255,0.35);
  transform: translateY(-2px);
}

.btn.ghost {
  background: transparent;
  border-color: var(--line);
}

/* ========== HERO SECTION ========== */
.hero {
  padding: 34px 0 18px;
}

.welcome {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.welcome h1 {
  font-size: clamp(28px, 5vw, 62px);
  line-height: 1.02;
  margin: 0;
  font-weight: 950;
  letter-spacing: -0.055em;
}

.welcome p {
  max-width: 560px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

/* ========== SLIDER / BANNERS ========== */
.slider {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface2);
  box-shadow: var(--shadow-lg);
}

.slides {
  display: flex;
  transition: transform 0.45s ease;
}

.slide {
  min-width: 100%;
  min-height: 268px;
  padding: 34px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 24px;
  position: relative;
  overflow: hidden;
}

.slide h2 {
  font-size: clamp(30px, 4vw, 54px);
  margin: 0 0 10px;
  font-weight: 950;
}

.slide p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.7;
}

.banner-visual {
  height: 210px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.banner-visual .bigicon {
  font-size: 72px;
}

.slider-dots {
  position: absolute;
  left: 34px;
  bottom: 24px;
  display: flex;
  gap: 8px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: var(--muted);
  opacity: 0.5;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  width: 28px;
  background: linear-gradient(135deg, #00ff77, #00dd66);
  opacity: 1;
}

/* ========== SECTIONS ========== */
.section {
  padding: 22px 0;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-head h2 {
  font-size: 28px;
  margin: 0;
  font-weight: 950;
}

.section-head p {
  color: var(--muted);
  margin: 8px 0 0;
  font-size: 15px;
}

/* ========== PRODUCT SCROLLER ========== */
.scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .scroller {
    grid-auto-columns: minmax(200px, 1fr);
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .scroller {
    grid-auto-columns: minmax(160px, 1fr);
    gap: 10px;
  }
}

.product-card {
  scroll-snap-align: start;
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--surface2);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow);
  transition: var(--transition);
  cursor: pointer;
  flex: 0 0 auto;
  min-width: 0;
}

@media (max-width: 768px) {
  .product-card {
    padding: 12px;
    gap: 10px;
  }
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand);
  box-shadow: 0 12px 32px rgba(0,255,119,0.15);
}

.product-icon {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: var(--surface);
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  flex: 0 0 52px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .product-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
  }
}

.product-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .product-icon img {
    width: 28px;
    height: 28px;
  }
}

.product-card h3 {
  font-size: 15px;
  margin: 0 0 4px;
  font-weight: 800;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .product-card h3 {
    font-size: 13px;
  }
}

.price {
  font-size: 16px;
  font-weight: 950;
  background: linear-gradient(135deg, #00ff77, #00dd66);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (max-width: 768px) {
  .price {
    font-size: 14px;
  }
}

.desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* ========== CATEGORY CARDS ========== */
.category-list {
  display: grid;
  gap: 12px;
}

.cat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow);
  transition: var(--transition);
  cursor: pointer;
}

@media (max-width: 768px) {
  .cat-card {
    padding: 14px;
    gap: 12px;
  }
}

.cat-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand);
  box-shadow: 0 12px 32px rgba(0,255,119,0.15);
}

.cat-card .product-icon {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
}

@media (max-width: 768px) {
  .cat-card .product-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
  }
}
  flex: 0 0 62px;
}

.cat-card h3 {
  font-size: 20px;
  margin: 0 0 6px;
  font-weight: 800;
}

.cat-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

/* ========== FLASH SALE ========== */
.flash-card {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  transition: all 0.3s ease;
}

.flash-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand);
  box-shadow: var(--shadow-lg);
}

.old {
  text-decoration: line-through;
  color: var(--muted);
}

/* ========== FOOTER ========== */
.footer {
  margin-top: 28px;
  padding: 42px 0;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
}

.footer strong {
  display: block;
  color: var(--text);
  font-size: 22px;
  margin-bottom: 10px;
}

.legal {
  max-width: 840px;
  margin: 18px auto 0;
  font-size: 13px;
  line-height: 1.65;
}

/* ========== FORMS ========== */
.form-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}

.auth-card {
  width: min(460px, 100%);
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--shadow-lg);
}

.auth-card h1 {
  font-size: 36px;
  margin: 0 0 12px;
  font-weight: 950;
}

.field {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.field label {
  font-weight: 850;
  color: var(--text);
}

.input,
input,
select,
textarea {
  width: 100%;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface2);
  color: var(--text);
  padding: 0 16px;
  font: inherit;
  outline: none;
  transition: all 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(0,255,119,0.10);
}

textarea {
  height: 120px;
  padding: 14px 16px;
  resize: vertical;
}

/* ========== ALERTS ========== */
.alert {
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 800;
  margin: 10px 0;
  border: 1px solid;
}

.alert.error {
  background: rgba(255,59,48,0.10);
  color: #ff3b30;
  border-color: rgba(255,59,48,0.30);
}

.alert.success {
  background: rgba(0,255,119,0.10);
  color: #00ff77;
  border-color: rgba(0,255,119,0.30);
}

/* ========== GRID ========== */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  width: 100%;
}

@media (max-width: 1024px) {
  .grid {
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .grid {
    gap: 10px;
  }
}

.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* Responsive columns untuk tablet */
@media (max-width: 1024px) {
  .col-2 { grid-column: span 3; }
  .col-3 { grid-column: span 4; }
  .col-4 { grid-column: span 6; }
  .col-6 { grid-column: span 12; }
  .col-8 { grid-column: span 12; }
}

/* Responsive columns untuk mobile */
@media (max-width: 768px) {
  .col-2 { grid-column: span 6; }
  .col-3 { grid-column: span 6; }
  .col-4 { grid-column: span 6; }
  .col-6 { grid-column: span 12; }
  .col-8 { grid-column: span 12; }
}

@media (max-width: 480px) {
  .col-2 { grid-column: span 12; }
  .col-3 { grid-column: span 12; }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
}

/* ========== THEME TOGGLE ========== */
.theme-toggle {
  width: 46px;
  min-width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-toggle:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
}

.theme-icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

/* ========== PROFILE CHIP ========== */
.profile-chip {
  height: 46px;
  padding: 0 15px 0 7px;
  gap: 9px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
}

.profile-chip:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
}

.wa-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 34px;
  border: 1px solid var(--line);
  background: var(--surface2);
  overflow: hidden;
}

.wa-avatar::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: var(--muted);
  opacity: 0.88;
}

.wa-avatar::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 22px;
  height: 15px;
  border-radius: 16px 16px 9px 9px;
  transform: translateX(-50%);
  background: var(--muted);
  opacity: 0.88;
}

.profile-text {
  font-weight: 950;
}

/* ========== PRODUCT DETAIL ========== */
.product-detail-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 0 8px;
}

.product-detail-logo {
  width: 74px;
  height: 74px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface2);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 74px;
  box-shadow: var(--shadow);
}

.product-detail-logo img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 12px;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 760px) {
  .container {
    width: min(100% - 26px, 1160px);
  }

  .nav {
    height: 66px;
  }

  .brand span {
    font-size: 18px;
  }

  .nav-actions .hide-sm {
    display: none;
  }

  .slide {
    grid-template-columns: 1fr;
    min-height: 360px;
    padding: 24px;
  }

  .banner-visual {
    height: 140px;
  }

  .welcome {
    display: block;
  }

  .scroller {
    grid-auto-columns: 85%;
  }

  .grid {
    display: block;
  }

  .col-4,
  .col-6,
  .col-8,
  .col-12 {
    margin-bottom: 14px;
  }

  .cat-card {
    border-radius: 18px;
    padding: 16px;
  }

  .section-head {
    display: block;
  }

  .welcome p {
    font-size: 15px;
  }

  .slider-dots {
    left: 24px;
  }

  .theme-toggle {
    width: 42px;
    min-width: 42px;
    height: 42px;
  }

  .profile-chip {
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
  }

  .profile-chip .profile-text {
    display: none;
  }

  .wa-avatar {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .product-detail-head {
    align-items: flex-start;
  }

  .product-detail-logo {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    border-radius: 16px;
  }

  .product-detail-logo img {
    width: 46px;
    height: 46px;
  }

  .product-detail-head h1 {
    font-size: 24px;
  }
}

/* ========== ANIMATIONS ========== */
body {
  animation: pageIn 0.5s ease forwards;
}

@keyframes pageIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.dot {
  animation: dotPulse 0.3s ease;
}

@keyframes dotPulse {
  from {
    transform: scale(0.8);
  }
  to {
    transform: scale(1);
  }
}

/* ========== RIZZI STORE - SEKALIPAY-INSPIRED LAYOUT PATCH ========== */
:root{
  --card: var(--surface);
  --soft: color-mix(in srgb, var(--surface2) 88%, transparent);
  --layout-gap: 18px;
}

body{
  min-height:100vh;
  background:
    radial-gradient(circle at 10% -10%, color-mix(in srgb, var(--brand) 18%, transparent) 0, transparent 34%),
    radial-gradient(circle at 105% 18%, color-mix(in srgb, var(--brand2) 18%, transparent) 0, transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 94%, var(--surface2)) 0%, var(--bg) 52%);
}

main{position:relative;z-index:1;}
.container{width:min(1180px,calc(100% - 28px));}

.topbar{border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);}
.nav{height:68px;}
.brand-logo{border-radius:16px;}
.brand span:last-child{letter-spacing:-.04em;}
.nav-actions{gap:8px;}
.btn{height:42px;border-radius:14px;white-space:nowrap;}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 14px 34px color-mix(in srgb,var(--brand) 22%,transparent);}
.btn.ghost,.btn:not(.primary):not(.blue){background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:blur(18px);}

.hero{padding:24px 0 10px;}
.hero>.container{display:grid;grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);gap:var(--layout-gap);align-items:stretch;}
.welcome{margin:0;padding:28px;border:1px solid color-mix(in srgb,var(--line) 85%,transparent);border-radius:28px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 84%,transparent),color-mix(in srgb,var(--surface2) 68%,transparent));box-shadow:var(--shadow-lg);backdrop-filter:blur(22px);flex-direction:column;align-items:flex-start;justify-content:space-between;overflow:hidden;position:relative;}
.welcome:before{content:"";position:absolute;inset:-1px;background:radial-gradient(circle at 20% 0%,color-mix(in srgb,var(--brand) 22%,transparent),transparent 42%);pointer-events:none;}
.welcome>*{position:relative;z-index:1;}
.welcome h1{font-size:clamp(34px,4.6vw,60px);max-width:9ch;}
.welcome p{font-size:15px;line-height:1.55;margin:14px 0 22px;}
.welcome .nav-actions{flex-wrap:wrap;}
.slider{height:100%;min-height:326px;border-radius:28px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface2) 82%,transparent),color-mix(in srgb,var(--surface) 72%,transparent));}
.slide{min-height:326px;padding:30px;grid-template-columns:1.05fr .95fr;}
.slide h2{font-size:clamp(30px,4.8vw,56px);letter-spacing:-.06em;}
.slide p{max-width:520px;}
.banner-visual{height:230px;border-radius:24px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 80%,transparent),color-mix(in srgb,var(--brand2) 8%,transparent));}
.slider-dots{bottom:20px;}

.section{padding:18px 0;}
.section-head{padding:2px 2px 0;margin-bottom:14px;}
.section-head h2{font-size:clamp(22px,3vw,32px);letter-spacing:-.05em;}
.section-head p{max-width:660px;}
.eyebrow{display:inline-flex;margin:0 0 8px;padding:6px 10px;border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line));border-radius:999px;color:var(--brand);font-size:11px;font-weight:950;letter-spacing:.12em;}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch;}
.col-4,.col-6,.col-8,.col-12{grid-column:auto;min-width:0;}
.col-12{grid-column:1/-1;}

.scroller{grid-auto-columns:minmax(190px,218px);gap:14px;padding:2px 2px 12px;scrollbar-width:none;}
.scroller::-webkit-scrollbar{display:none;}
.product-card{position:relative;isolation:isolate;overflow:hidden;min-height:172px;align-items:flex-start;flex-direction:column;padding:15px;border-radius:22px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 86%,transparent),color-mix(in srgb,var(--surface2) 72%,transparent));border:1px solid color-mix(in srgb,var(--line) 88%,transparent);box-shadow:0 12px 32px rgba(0,0,0,.10);}
.product-card:before,.cat-card:before,.flash-card:before,.slider:before,.welcome:after,.buy-card:before,.auth-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--rz-shine-x,24%) var(--rz-shine-y,0%),rgba(255,255,255,.18),transparent 34%);opacity:.65;pointer-events:none;z-index:-1;}
.product-card:hover{transform:translateY(-5px);box-shadow:0 18px 42px color-mix(in srgb,var(--brand) 14%,rgba(0,0,0,.18));}
.product-card .product-icon{width:58px;height:58px;flex-basis:58px;border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface2) 80%,transparent),color-mix(in srgb,var(--surface) 75%,transparent));}
.product-card h3{font-size:15px;line-height:1.25;margin:8px 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px;}
.product-card .desc{min-height:20px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.product-card .price{margin-top:auto;font-size:17px;}

.category-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;}
.cat-card{position:relative;isolation:isolate;overflow:hidden;min-height:184px;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:18px;border-radius:24px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 88%,transparent),color-mix(in srgb,var(--surface2) 68%,transparent));border:1px solid color-mix(in srgb,var(--line) 86%,transparent);}
.cat-card .product-icon{width:64px;height:64px;flex-basis:64px;border-radius:20px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 12%,transparent);}
.cat-card h3{font-size:17px;line-height:1.2;margin:2px 0 7px;}
.cat-card p{font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

.flash-card{position:relative;isolation:isolate;overflow:hidden;min-height:118px;border-radius:22px;align-items:flex-start;flex-direction:column;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 88%,transparent),color-mix(in srgb,var(--surface2) 72%,transparent));}
.flash-card .price{font-size:20px;}

.card{border:1px solid var(--line);border-radius:22px;background:var(--surface);padding:20px;box-shadow:var(--shadow);}
.muted{color:var(--muted);}

.auth-card,.buy-card{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 88%,transparent),color-mix(in srgb,var(--surface2) 68%,transparent))!important;backdrop-filter:blur(22px);}
.input,input,select,textarea{border-radius:16px;background:color-mix(in srgb,var(--surface2) 86%,transparent);}

.rz-liquid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.55;}
.rz-liquid-bg span{position:absolute;width:360px;height:360px;border-radius:999px;filter:blur(60px);opacity:.32;transform:translate3d(0,0,0);}
.rz-liquid-bg span:nth-child(1){left:-90px;top:8%;background:var(--brand);animation:rzFloat1 16s ease-in-out infinite;}
.rz-liquid-bg span:nth-child(2){right:-120px;top:18%;background:var(--brand2);animation:rzFloat2 18s ease-in-out infinite;}
.rz-liquid-bg span:nth-child(3){left:40%;bottom:-180px;background:color-mix(in srgb,var(--brand) 52%,var(--brand2));animation:rzFloat3 20s ease-in-out infinite;}
@keyframes rzFloat1{50%{transform:translate(80px,60px) scale(1.12)}}
@keyframes rzFloat2{50%{transform:translate(-70px,90px) scale(1.08)}}
@keyframes rzFloat3{50%{transform:translate(50px,-80px) scale(1.1)}}

.rz-preloader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:var(--bg);transition:opacity .35s ease,visibility .35s ease;}
.rz-preloader.hide{opacity:0;visibility:hidden;}
.rz-loader-box{width:min(320px,calc(100% - 44px));border:1px solid var(--line);border-radius:26px;background:var(--glass);box-shadow:var(--shadow-lg);padding:26px;text-align:center;backdrop-filter:blur(20px);}
.rz-loader-logo{width:56px;height:56px;border-radius:18px;margin:0 auto 12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#00130a;font-weight:1000;font-size:28px;}
.rz-loader-title{font-weight:950;font-size:18px;margin-bottom:12px;}
.rz-loader-bar{height:8px;border-radius:999px;background:var(--surface2);overflow:hidden;}
.rz-loader-bar span{display:block;height:100%;width:42%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),var(--brand2));animation:rzLoad 1s ease-in-out infinite;}
@keyframes rzLoad{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}

.rz-reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease var(--rz-delay,0ms),transform .5s ease var(--rz-delay,0ms);}
.rz-reveal.is-visible{opacity:1;transform:none;}
.rz-page-leave{opacity:.5;transition:opacity .16s ease;}
.btn{position:relative;overflow:hidden;}
.rz-ripple{position:absolute;border-radius:999px;background:rgba(255,255,255,.35);transform:translate(-50%,-50%) scale(0);animation:rzRipple .55s ease;pointer-events:none;}
@keyframes rzRipple{to{transform:translate(-50%,-50%) scale(2.4);opacity:0}}
.btn.is-loading{opacity:.75;pointer-events:none;}

@media (max-width: 1020px){
  .hero>.container{grid-template-columns:1fr;}
  .welcome h1{max-width:none;}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .category-list{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media (max-width: 760px){
  .container{width:min(100% - 22px,1180px);}
  .nav{height:62px;gap:10px;}
  .brand{gap:9px;font-size:18px;min-width:0;}
  .brand-logo{width:42px;height:42px;flex-basis:42px;border-radius:15px;}
  .nav-actions{gap:7px;}
  .nav-actions .btn.primary[href*="topup_saldo"]{display:none;}
  .hero{padding-top:14px;}
  .welcome{padding:22px;border-radius:26px;}
  .welcome h1{font-size:38px;max-width:8ch;}
  .welcome .nav-actions .btn{flex:1;min-width:132px;}
  .slide{grid-template-columns:1fr;min-height:330px;padding:22px;}
  .banner-visual{height:128px;}
  .section{padding:15px 0;}
  .section-head{display:flex;align-items:flex-end;gap:10px;}
  .section-head h2{font-size:24px;}
  .section-head p{font-size:13px;}
  .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;}
  .col-4,.col-6,.col-8,.col-12{margin-bottom:0;grid-column:auto;}
  .col-12{grid-column:1/-1;}
  .scroller{grid-auto-columns:minmax(164px,78vw);gap:11px;}
  .product-card{min-height:164px;padding:13px;border-radius:20px;}
  .product-card .product-icon{width:52px;height:52px;flex-basis:52px;border-radius:16px;}
  .product-card h3{font-size:14px;min-height:35px;}
  .product-card .price{font-size:15px;}
  .category-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;}
  .cat-card{min-height:160px;padding:14px;border-radius:22px;}
  .cat-card .product-icon{width:54px;height:54px;flex-basis:54px;border-radius:17px;}
  .cat-card h3{font-size:15px;}
  .cat-card p{font-size:12px;}
  .footer{padding-bottom:84px;}
}

@media (max-width: 390px){
  .grid,.category-list{grid-template-columns:1fr 1fr;gap:9px;}
  .product-card,.cat-card{padding:12px;}
  .welcome h1{font-size:34px;}
  .btn{padding:0 13px;font-size:13px;}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}

/* ===== HOTFIX: buyer/reseller bottom nav + support, keep SekaliPay-style layout ===== */
.glass-panel{border:1px solid var(--line);border-radius:26px;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(18px);box-shadow:0 18px 45px rgba(0,0,0,.16);padding:18px}.support-page{padding:28px 0 110px}.support-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.support-head h1{margin:6px 0 4px}.support-shell{display:grid;grid-template-columns:320px 1fr;gap:16px}.support-list{max-height:72vh;overflow:auto}.support-ticket{display:block;text-decoration:none;color:var(--text);border:1px solid var(--line);border-radius:18px;padding:12px;margin:8px 0;background:color-mix(in srgb,var(--surface2) 75%,transparent)}.support-ticket.active{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}.support-ticket b{display:block}.support-ticket span{display:block;color:var(--muted);font-size:12px;margin-top:5px}.chat-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.chat-box{height:55vh;min-height:340px;overflow:auto;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface2) 70%,transparent),color-mix(in srgb,var(--surface) 70%,transparent));padding:14px;display:flex;flex-direction:column;gap:10px}.bubble{max-width:min(76%,620px);padding:11px 13px;border-radius:18px;border:1px solid var(--line);box-shadow:0 8px 22px rgba(0,0,0,.10)}.bubble p{margin:0;white-space:pre-wrap;line-height:1.45}.bubble small{display:block;margin-top:6px;font-size:11px;opacity:.72}.bubble.me{align-self:flex-end;border-bottom-right-radius:6px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#07130f}.bubble.admin{align-self:flex-start;border-bottom-left-radius:6px;background:var(--surface);color:var(--text)}.chat-input{display:flex;gap:10px;align-items:flex-end;margin-top:12px}.chat-input textarea{flex:1;min-height:46px;max-height:140px;resize:vertical}.support-new-form textarea{width:100%;resize:vertical}.buyer-bottom-nav{position:fixed;left:12px;right:12px;bottom:10px;z-index:80;display:none;grid-template-columns:repeat(5,1fr);gap:6px;padding:8px;border:1px solid color-mix(in srgb,var(--line) 80%,transparent);border-radius:24px;background:color-mix(in srgb,var(--surface) 84%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 18px 40px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.12)}.buyer-bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:var(--muted);min-height:52px;border-radius:17px;font-size:11px;font-weight:900}.buyer-bottom-nav a span{font-size:20px;line-height:1}.buyer-bottom-nav a b{font-size:10px;margin-top:4px}.buyer-bottom-nav a.active,.buyer-bottom-nav a:hover{color:var(--text);background:color-mix(in srgb,var(--brand) 18%,transparent)}
@media(max-width:820px){body{padding-bottom:84px}.buyer-bottom-nav{display:grid}.support-page{padding-top:16px}.support-head{align-items:flex-start;flex-direction:column}.support-shell{grid-template-columns:1fr}.support-list{max-height:220px}.chat-box{height:52vh;min-height:330px}.bubble{max-width:88%}.chat-input{position:sticky;bottom:82px;background:color-mix(in srgb,var(--surface) 86%,transparent);padding:8px;border-radius:20px;backdrop-filter:blur(18px)}}

/* ===== Rizzi final mobile restore: buyer/reseller bottom nav + clean phone layout ===== */
#kategori{scroll-margin-top:90px}
@media (hover:none) and (pointer:coarse), (max-width: 920px){
  html,body{overflow-x:hidden!important;}
  body{padding-bottom:calc(92px + env(safe-area-inset-bottom))!important;}
  body:has(.buyer-bottom-nav){padding-bottom:calc(92px + env(safe-area-inset-bottom))!important;}
  .buyer-bottom-nav{display:grid!important;position:fixed!important;left:10px!important;right:10px!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;height:66px!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px!important;padding:7px!important;border-radius:24px!important;border:1px solid color-mix(in srgb,var(--line) 82%,transparent)!important;background:color-mix(in srgb,var(--surface) 88%,transparent)!important;backdrop-filter:blur(26px) saturate(1.25)!important;-webkit-backdrop-filter:blur(26px) saturate(1.25)!important;box-shadow:0 18px 55px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12)!important;z-index:99999!important;}
  .buyer-bottom-nav a{min-width:0!important;min-height:0!important;height:52px!important;border-radius:18px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;color:var(--muted)!important;font-size:10px!important;font-weight:950!important;text-decoration:none!important;background:transparent!important;border:0!important;padding:0!important;line-height:1!important;}
  .buyer-bottom-nav a span{font-size:20px!important;line-height:1!important;display:block!important;filter:drop-shadow(0 5px 14px rgba(0,0,0,.24));}
  .buyer-bottom-nav a b{font-size:10px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important;}
  .buyer-bottom-nav a.active{background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 26%,transparent),color-mix(in srgb,var(--brand2) 20%,transparent))!important;color:var(--text)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 24%,transparent)!important;}
  .topbar{top:8px!important;margin:8px 10px 0!important;border-radius:22px!important;border:1px solid color-mix(in srgb,var(--line) 75%,transparent)!important;box-shadow:0 12px 36px rgba(0,0,0,.22)!important;background:color-mix(in srgb,var(--surface) 88%,transparent)!important;}
  .nav{height:62px!important;padding:0 8px!important;}
  .brand{font-size:18px!important;min-width:0!important;}
  .brand span:last-child{max-width:40vw!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .brand-logo{width:42px!important;height:42px!important;flex-basis:42px!important;border-radius:16px!important;}
  .nav-actions{gap:7px!important;}
  .nav-actions .hide-sm,.nav-actions a[href*="login.php"]{display:none!important;}
  .nav-actions .btn.primary[href*="topup_saldo"]{display:none!important;}
  .theme-toggle{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border-radius:17px!important;}
  .profile-chip{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border-radius:17px!important;}
  .profile-chip .profile-text{display:none!important;}
  .container{width:min(100% - 22px,1180px)!important;}
  .hero{padding:14px 0 6px!important;}
  .hero>.container{display:block!important;}
  .welcome{display:none!important;}
  .slider{min-height:292px!important;border-radius:26px!important;margin:8px 0 0!important;overflow:hidden!important;}
  .slide{min-height:292px!important;display:grid!important;grid-template-columns:1fr!important;padding:22px!important;align-content:start!important;}
  .slide h2{font-size:clamp(30px,9vw,42px)!important;line-height:1.03!important;max-width:10ch!important;margin:12px 0!important;}
  .slide p{font-size:14px!important;line-height:1.55!important;max-width:100%!important;display:-webkit-box!important;-webkit-line-clamp:4!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
  .slide .btn{margin-top:10px!important;width:max-content!important;}
  .banner-visual{height:86px!important;min-height:0!important;margin-top:12px!important;border-radius:20px!important;}
  .bigicon{font-size:46px!important;}
  .slider-dots{bottom:14px!important;left:22px!important;justify-content:flex-start!important;}
  .section{padding:13px 0!important;}
  .section-head{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:10px!important;margin-bottom:10px!important;}
  .section-head h2{font-size:22px!important;line-height:1.1!important;margin:0 0 4px!important;}
  .section-head p{font-size:12px!important;line-height:1.35!important;margin:0!important;}
  .category-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px!important;}
  .cat-card{min-height:148px!important;border-radius:21px!important;padding:14px!important;}
  .cat-card .product-icon{width:52px!important;height:52px!important;flex-basis:52px!important;border-radius:17px!important;}
  .cat-card h3{font-size:14px!important;line-height:1.18!important;margin:6px 0 5px!important;}
  .cat-card p{font-size:11px!important;line-height:1.35!important;-webkit-line-clamp:2!important;}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px!important;}
  .scroller{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-columns:auto!important;overflow:visible!important;gap:11px!important;padding:0!important;}
  .product-card{min-height:154px!important;border-radius:20px!important;padding:13px!important;}
  .product-card .product-icon{width:50px!important;height:50px!important;flex-basis:50px!important;border-radius:16px!important;}
  .product-card h3{font-size:13.5px!important;line-height:1.22!important;min-height:34px!important;}
  .product-card .desc{font-size:11px!important;}
  .product-card .price{font-size:15px!important;}
  .footer{padding-bottom:112px!important;}
  .reseller-wrap{padding:14px 12px calc(104px + env(safe-area-inset-bottom))!important;max-width:100%!important;}
  .reseller-top{position:sticky!important;top:8px!important;z-index:30!important;border:1px solid var(--line)!important;border-radius:22px!important;background:color-mix(in srgb,var(--surface) 88%,transparent)!important;backdrop-filter:blur(24px)!important;padding:10px!important;margin-bottom:12px!important;}
  .reseller-nav{display:none!important;}
  .rs-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .rs-col-3,.rs-col-4,.rs-col-6,.rs-col-8,.rs-col-12{grid-column:span 2!important;}
  .glass-card{border-radius:22px!important;padding:14px!important;}
}
@media (max-width:420px), (hover:none) and (pointer:coarse) and (max-device-width:480px){
  .buyer-bottom-nav{left:8px!important;right:8px!important;height:64px!important;border-radius:22px!important;}
  .buyer-bottom-nav a span{font-size:19px!important}.buyer-bottom-nav a b{font-size:9.5px!important}
  .slide h2{font-size:32px!important}.slider,.slide{min-height:276px!important}
  .cat-card{min-height:140px!important}.product-card{min-height:150px!important}
}

/* ===== HOTFIX: rekomendasi pembelian mobile card tidak gepeng ===== */
@media (hover:none) and (pointer:coarse), (max-width: 920px){
  .scroller{
    display:grid!important;
    grid-auto-flow:row!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-columns:unset!important;
    grid-auto-rows:auto!important;
    overflow:visible!important;
    gap:11px!important;
    padding:0!important;
    scroll-snap-type:none!important;
  }
  .scroller > .product-card{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    flex:initial!important;
    scroll-snap-align:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:8px!important;
    min-height:162px!important;
    overflow:hidden!important;
  }
  .scroller > .product-card .product-icon{
    flex:0 0 50px!important;
    width:50px!important;
    height:50px!important;
  }
  .scroller > .product-card h3,
  .scroller > .product-card .desc,
  .scroller > .product-card .price{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }
  .scroller > .product-card h3{
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
    min-height:34px!important;
  }
  .scroller > .product-card .price{
    margin-top:auto!important;
    white-space:nowrap!important;
  }
}

@media (max-width: 380px){
  .scroller{gap:9px!important;}
  .scroller > .product-card{padding:11px!important;min-height:156px!important;}
  .scroller > .product-card h3{font-size:12.5px!important;}
}

/* ===== PATCH: Liquid Glass Cards - clear in light, dark glass in dark mode ===== */
:root{
  --rz-glass-card: rgba(255,255,255,.54);
  --rz-glass-card-strong: rgba(255,255,255,.68);
  --rz-glass-line: rgba(255,255,255,.72);
  --rz-glass-line-soft: rgba(10,14,17,.10);
  --rz-glass-shadow: 0 18px 48px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.70);
  --rz-glass-blur: blur(28px) saturate(1.45);
}
[data-theme="dark"]{
  --rz-glass-card: rgba(17,23,24,.58);
  --rz-glass-card-strong: rgba(18,22,24,.72);
  --rz-glass-line: rgba(255,255,255,.13);
  --rz-glass-line-soft: rgba(255,255,255,.08);
  --rz-glass-shadow: 0 20px 58px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.10);
}

/* background biar liquid glass kelihatan, tanpa ubah warna brand utama */
body::before{
  content:"";
  position:fixed;
  inset:-20%;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 8%, rgba(0,255,119,.18), transparent 28%),
    radial-gradient(circle at 88% 22%, rgba(0,122,255,.14), transparent 30%),
    radial-gradient(circle at 55% 92%, rgba(0,255,119,.10), transparent 34%);
  filter: blur(18px);
}
[data-theme="dark"] body::before{
  background:
    radial-gradient(circle at 10% 10%, rgba(0,255,119,.13), transparent 30%),
    radial-gradient(circle at 90% 20%, rgba(0,122,255,.12), transparent 30%),
    radial-gradient(circle at 55% 92%, rgba(0,255,119,.07), transparent 34%);
}

/* card-card utama */
.slider,
.slide,
.product-card,
.cat-card,
.glass-card,
.card,
.panel,
.auth-card,
.profile-card,
.order-card,
.payment-card,
.ticket-card,
.support-card,
.support-shell,
.banner-card,
.feature-card,
.info-card,
.table-card,
.form-card,
.checkout-card,
.reseller-top,
.rs-card{
  background: var(--rz-glass-card)!important;
  border: 1px solid var(--rz-glass-line)!important;
  box-shadow: var(--rz-glass-shadow)!important;
  backdrop-filter: var(--rz-glass-blur)!important;
  -webkit-backdrop-filter: var(--rz-glass-blur)!important;
  color: var(--text)!important;
  position: relative;
  overflow: hidden;
}

/* dark mode: glass gelap, bukan hitam solid */
[data-theme="dark"] .slider,
[data-theme="dark"] .slide,
[data-theme="dark"] .product-card,
[data-theme="dark"] .cat-card,
[data-theme="dark"] .glass-card,
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .order-card,
[data-theme="dark"] .payment-card,
[data-theme="dark"] .ticket-card,
[data-theme="dark"] .support-card,
[data-theme="dark"] .support-shell,
[data-theme="dark"] .banner-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .info-card,
[data-theme="dark"] .table-card,
[data-theme="dark"] .form-card,
[data-theme="dark"] .checkout-card,
[data-theme="dark"] .reseller-top,
[data-theme="dark"] .rs-card{
  background: var(--rz-glass-card)!important;
  border-color: var(--rz-glass-line)!important;
}

/* shine tipis ala liquid glass, tetap kalem */
.slider::before,
.slide::before,
.product-card::before,
.cat-card::before,
.glass-card::before,
.card::before,
.panel::before,
.auth-card::before,
.profile-card::before,
.order-card::before,
.payment-card::before,
.ticket-card::before,
.support-card::before,
.support-shell::before,
.banner-card::before,
.feature-card::before,
.info-card::before,
.table-card::before,
.form-card::before,
.checkout-card::before,
.rs-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: linear-gradient(145deg, rgba(255,255,255,.45), rgba(255,255,255,.08) 36%, transparent 68%);
  opacity:.72;
  z-index:0;
}
[data-theme="dark"] .slider::before,
[data-theme="dark"] .slide::before,
[data-theme="dark"] .product-card::before,
[data-theme="dark"] .cat-card::before,
[data-theme="dark"] .glass-card::before,
[data-theme="dark"] .card::before,
[data-theme="dark"] .panel::before,
[data-theme="dark"] .auth-card::before,
[data-theme="dark"] .profile-card::before,
[data-theme="dark"] .order-card::before,
[data-theme="dark"] .payment-card::before,
[data-theme="dark"] .ticket-card::before,
[data-theme="dark"] .support-card::before,
[data-theme="dark"] .support-shell::before,
[data-theme="dark"] .banner-card::before,
[data-theme="dark"] .feature-card::before,
[data-theme="dark"] .info-card::before,
[data-theme="dark"] .table-card::before,
[data-theme="dark"] .form-card::before,
[data-theme="dark"] .checkout-card::before,
[data-theme="dark"] .rs-card::before{
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04) 36%, transparent 70%);
  opacity:.72;
}

.slider > *,
.slide > *,
.product-card > *,
.cat-card > *,
.glass-card > *,
.card > *,
.panel > *,
.auth-card > *,
.profile-card > *,
.order-card > *,
.payment-card > *,
.ticket-card > *,
.support-card > *,
.support-shell > *,
.banner-card > *,
.feature-card > *,
.info-card > *,
.table-card > *,
.form-card > *,
.checkout-card > *,
.rs-card > *{
  position:relative;
  z-index:1;
}

/* kartu hero/slider jangan hitam pekat di light mode */
.slide{
  background: rgba(255,255,255,.42)!important;
}
[data-theme="dark"] .slide{
  background: rgba(13,18,19,.66)!important;
}
.slide h1,.slide h2,.slide h3,.slide p{color:var(--text)!important;}
.slide .muted,.slide p{color:var(--muted)!important;}

/* product/category card lebih bening di light mode, lebih gelap di dark */
.product-card,
.cat-card{
  background: rgba(255,255,255,.46)!important;
}
[data-theme="dark"] .product-card,
[data-theme="dark"] .cat-card{
  background: rgba(15,20,21,.62)!important;
}
.product-card:hover,
.cat-card:hover,
.glass-card:hover{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand) 45%, var(--rz-glass-line))!important;
}

/* icon di dalam card tetap clean */
.product-icon,
.cat-icon,
.brand-logo,
.avatar,
.icon-box{
  background: rgba(255,255,255,.42)!important;
  border:1px solid var(--rz-glass-line)!important;
  backdrop-filter: blur(18px) saturate(1.35)!important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35)!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 26px rgba(0,0,0,.10)!important;
}
[data-theme="dark"] .product-icon,
[data-theme="dark"] .cat-icon,
[data-theme="dark"] .brand-logo,
[data-theme="dark"] .avatar,
[data-theme="dark"] .icon-box{
  background: rgba(255,255,255,.08)!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 28px rgba(0,0,0,.32)!important;
}

/* topbar & bottom nav ikut liquid glass, tapi tetap solid rapi */
.topbar,
.buyer-bottom-nav,
.reseller-bottom-nav{
  background: rgba(255,255,255,.58)!important;
  border:1px solid var(--rz-glass-line)!important;
  box-shadow: 0 18px 48px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.70)!important;
  backdrop-filter: blur(30px) saturate(1.45)!important;
  -webkit-backdrop-filter: blur(30px) saturate(1.45)!important;
}
[data-theme="dark"] .topbar,
[data-theme="dark"] .buyer-bottom-nav,
[data-theme="dark"] .reseller-bottom-nav{
  background: rgba(12,14,15,.74)!important;
  border-color: rgba(255,255,255,.12)!important;
  box-shadow: 0 18px 52px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10)!important;
}

/* pill aktif tetap solid hijau, bukan gradient */
.buyer-bottom-nav a.active,
.reseller-bottom-nav a.active,
.nav-pill,
.nav-indicator,
.bottom-nav-indicator{
  background: var(--brand)!important;
  color:#00140a!important;
  box-shadow: 0 12px 30px rgba(0,255,119,.28)!important;
}

/* input/form juga glass tipis */
input,select,textarea,
.form-control{
  background: rgba(255,255,255,.48)!important;
  border:1px solid var(--rz-glass-line)!important;
  color:var(--text)!important;
  backdrop-filter: blur(18px) saturate(1.25)!important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25)!important;
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .form-control{
  background: rgba(255,255,255,.07)!important;
  border-color: rgba(255,255,255,.12)!important;
}

@media (max-width: 640px), (hover:none) and (pointer:coarse){
  .slide,.slider,.product-card,.cat-card,.glass-card,.card{
    border-radius:24px!important;
  }
  .product-card,.cat-card{
    background: rgba(255,255,255,.42)!important;
  }
  [data-theme="dark"] .product-card,
  [data-theme="dark"] .cat-card{
    background: rgba(14,18,19,.66)!important;
  }
}


/* ==========================================================
   Rizzi Performance Mode — HP kentang tetap smooth
   Tidak menghapus fitur; hanya meringankan efek berat di HP.
   ========================================================== */
html.rz-perf-lite {
  --rz-perf-shadow: 0 8px 22px rgba(0,0,0,.12);
}
html.rz-perf-lite .rz-liquid-bg,
html.rz-perf-lite .rz-preloader,
html.rz-perf-lite .rz-loader-box,
html.rz-perf-lite .rz-loader-bar,
html.rz-perf-lite .rz-loader-ring {
  display: none !important;
}
html.rz-perf-lite *,
html.rz-perf-lite *::before,
html.rz-perf-lite *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}
html.rz-perf-lite .rz-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html.rz-perf-lite .product-card,
html.rz-perf-lite .cat-card,
html.rz-perf-lite .flash-card,
html.rz-perf-lite .card,
html.rz-perf-lite .welcome,
html.rz-perf-lite .slider,
html.rz-perf-lite .auth-card,
html.rz-perf-lite .buy-card,
html.rz-perf-lite .topbar,
html.rz-perf-lite .buyer-bottom-nav,
html.rz-perf-lite .reseller-bottom-nav,
html.rz-perf-lite .support-shell,
html.rz-perf-lite .support-chat,
html.rz-perf-lite .support-list {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: var(--rz-perf-shadow) !important;
}
html.rz-perf-lite .product-card::before,
html.rz-perf-lite .cat-card::before,
html.rz-perf-lite .flash-card::before,
html.rz-perf-lite .slider::before,
html.rz-perf-lite .welcome::after,
html.rz-perf-lite .buy-card::before,
html.rz-perf-lite .auth-card::before,
html.rz-perf-lite .card::before,
html.rz-perf-lite .stat::before,
html.rz-perf-lite .table-wrap::before,
html.rz-perf-lite .logo-admin-card::before {
  display: none !important;
}
html.rz-perf-lite .product-card:hover,
html.rz-perf-lite .cat-card:hover,
html.rz-perf-lite .flash-card:hover,
html.rz-perf-lite .btn:hover {
  transform: none !important;
}
html.rz-perf-lite img {
  content-visibility: auto;
}
html.rz-perf-lite .slides,
html.rz-perf-lite .slide,
html.rz-perf-lite .banner-visual,
html.rz-perf-lite .product-icon,
html.rz-perf-lite .product-detail-logo {
  will-change: auto !important;
}
@media (max-width: 640px), (pointer: coarse) {
  html:not(.rz-force-effects) .rz-liquid-bg {
    opacity: .28 !important;
  }
  .product-card,
  .cat-card,
  .flash-card,
  .card,
  .welcome,
  .slider,
  .auth-card,
  .buy-card {
    transition: transform .16s ease, border-color .16s ease, background-color .16s ease !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rz-liquid-bg,
  .rz-preloader { display:none !important; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* Growth features: best seller, review, trust cards */
.growth-section,.trust-section{margin:24px auto;max-width:1180px;padding:0 14px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:14px}.section-head h2{margin:0;font-size:clamp(20px,4vw,32px)}.mini-badge{border:1px solid var(--line);background:var(--soft);border-radius:999px;padding:7px 10px;font-weight:900;font-size:12px;color:var(--muted)}.trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.trust-card{border:1px solid var(--line);background:color-mix(in srgb,var(--card) 72%,transparent);border-radius:22px;padding:16px;backdrop-filter:blur(14px)}.trust-card b{display:block;margin-bottom:7px}.trust-card small{color:var(--muted);line-height:1.55}.product-card strong{display:block;margin-top:auto;color:var(--brand)}@media(max-width:760px){.trust-grid{grid-template-columns:1fr}.growth-section,.trust-section{margin:18px auto}.section-head{align-items:flex-start}.mini-badge{display:none}}

/* ========== AUTO WARRANTY BADGES ========== */
.warranty-badge,
.product-warranty-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.1;
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--text);
  letter-spacing: -.01em;
}
.warranty-replace,
.warranty-supplier,
.product-warranty-badge.replace,
.product-warranty-badge.supplier {
  border-color: rgba(52,199,89,.38);
  background: rgba(52,199,89,.13);
  color: #8ff0b0;
}
.warranty-refund,
.product-warranty-badge.refund {
  border-color: rgba(0,122,255,.38);
  background: rgba(0,122,255,.13);
  color: #93c5fd;
}
.warranty-none,
.product-warranty-badge.none {
  border-color: rgba(239,68,68,.38);
  background: rgba(239,68,68,.13);
  color: #fecaca;
}
.warranty-check,
.product-warranty-badge.check {
  border-color: rgba(245,158,11,.38);
  background: rgba(245,158,11,.13);
  color: #fde68a;
}
.product-card .product-warranty-badge { margin: 6px 0 2px; }

/* Rizzi patch: warranty claim + product health */
.product-health-badge{display:inline-flex;align-items:center;gap:5px;width:max-content;margin:4px 0;padding:5px 9px;border-radius:999px;border:1px solid var(--line);font-size:11px;font-weight:900;background:var(--soft);color:var(--muted)}
.product-health-badge.safe{border-color:rgba(18,214,139,.35);background:rgba(18,214,139,.12);color:#19d98f}
.product-health-badge.watch{border-color:rgba(245,158,11,.38);background:rgba(245,158,11,.13);color:#fbbf24}
.product-health-badge.danger{border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.14);color:#fca5a5}
.claim-status{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;border:1px solid var(--line);background:var(--soft);font-weight:900}

/* ==========================================================
   Rizzi Home Compact UI Patch
   Produk terlaris/garansi/testimoni dipindah ke atas,
   dibuat kecil, horizontal scroll, dan footer tetap paling bawah.
   ========================================================== */
.home-compact-zone{
  padding:10px 0 4px;
  margin-top:-4px;
}
.home-compact-zone .container{
  display:grid;
  gap:10px;
}
.compact-head,
.compact-subhead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  padding:0 2px;
}
.compact-head h2{
  margin:0;
  font-size:clamp(18px,2.6vw,24px);
  letter-spacing:-.04em;
  line-height:1.05;
}
.compact-head .eyebrow{
  margin:0 0 3px;
  font-size:11px;
  font-weight:950;
  color:var(--brand);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.compact-subhead{
  margin-top:2px;
  align-items:center;
}
.compact-subhead b{
  font-size:14px;
  letter-spacing:-.02em;
}
.compact-subhead small{
  color:var(--muted);
  font-size:11px;
  white-space:nowrap;
}
.mini-info-scroll,
.mini-product-scroll,
.mini-review-scroll{
  display:grid;
  grid-auto-flow:column;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:1px 2px 9px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.mini-info-scroll::-webkit-scrollbar,
.mini-product-scroll::-webkit-scrollbar,
.mini-review-scroll::-webkit-scrollbar{display:none}
.mini-info-scroll{grid-auto-columns:minmax(172px,198px)}
.mini-product-scroll{grid-auto-columns:minmax(210px,245px)}
.mini-review-scroll{grid-auto-columns:minmax(205px,260px)}
.mini-info-card,
.mini-product-card,
.mini-review-card{
  scroll-snap-align:start;
  min-width:0;
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--card) 70%,transparent);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);
  backdrop-filter:blur(12px) saturate(1.15);
  border-radius:17px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  color:var(--text);
}
.mini-info-card{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:9px;
  row-gap:2px;
  padding:10px;
}
.mini-info-card span{
  grid-row:1 / 3;
  width:32px;
  height:32px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:var(--soft);
  border:1px solid var(--line);
}
.mini-info-card b,
.mini-product-card b,
.mini-review-card b{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  line-height:1.2;
}
.mini-info-card small,
.mini-product-card small,
.mini-review-card small{
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}
.mini-product-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
}
.mini-product-logo{
  flex:0 0 38px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--soft);
  overflow:hidden;
  font-size:18px;
}
.mini-product-logo img{
  width:28px;
  height:28px;
  object-fit:contain;
}
.mini-product-body{
  min-width:0;
  display:grid;
  gap:2px;
}
.mini-product-card strong{
  color:var(--brand);
  font-size:12px;
  line-height:1.15;
}
.mini-review-card{
  display:grid;
  gap:5px;
  padding:10px 12px;
}
.mini-review-card small{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.footer-terms{
  margin-top:24px;
}
.footer-terms-card{
  margin-top:10px;
  border:1px solid var(--line);
  background:var(--soft);
  border-radius:18px;
  padding:13px 14px;
  text-align:left;
}
.footer-terms-card b{
  display:block;
  margin-bottom:4px;
}
.footer-terms-card p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
  font-size:13px;
}
@media(max-width:640px){
  .home-compact-zone{padding-top:8px}
  .compact-head{align-items:center}
  .compact-head h2{font-size:19px}
  .compact-head .mini-badge{display:inline-flex;font-size:10px;padding:5px 8px}
  .mini-info-scroll{grid-auto-columns:minmax(158px,174px)}
  .mini-product-scroll{grid-auto-columns:minmax(188px,214px)}
  .mini-review-scroll{grid-auto-columns:minmax(188px,225px)}
  .mini-info-card{grid-template-columns:28px minmax(0,1fr);padding:9px;border-radius:15px}
  .mini-info-card span{width:28px;height:28px;border-radius:10px;font-size:14px}
  .mini-product-card{padding:9px;border-radius:15px}
  .mini-product-logo{width:34px;height:34px;flex-basis:34px;border-radius:12px}
  .mini-product-logo img{width:24px;height:24px}
}