/* ==========================================================================
   DIPZ STUDIO (studio.dipzstore.com)
   Clean Editorial Studio System (v2)
   ========================================================================== */

:root {
  --krem: #f8f7f4;
  --susu: #ffffff;
  --susu-2: #f1efe9;
  --arang: #1e1c19;
  --tanah: #655f59;
  --garis: #e4e0d8;
  --rubah: #4f46e5;
  --rubah-hover: #4338ca;
  --rubah-teks: #4338ca;
  --on-rubah: #ffffff;
  --syal: #181715;
  --on-syal: #f8f7f4;
  --on-syal-2: #b5b0a8;
  --hijau: #15803d;
  --hijau-bg: #dcfce7;
  --kuning: #b45309;
  --kuning-bg: #fef3c7;
  --merah: #b91c1c;
  --merah-bg: #fee2e2;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --body: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --font-display: var(--display);
  --font-sans: var(--body);
  --font-mono: var(--mono);

  /* Compatibility tokens for auth, dashboard & admin */
  --background: 40 20% 97%;
  --foreground: 36 9% 11%;
  --card: 0 0% 100%;
  --card-foreground: 36 9% 11%;
  --primary: 243 75% 59%;
  --primary-foreground: 0 0% 100%;
  --secondary: 211 88% 54%;
  --secondary-foreground: 0 0% 100%;
  --muted: 38 18% 93%;
  --muted-foreground: 27 6% 38%;
  --accent: 243 75% 96%;
  --accent-foreground: 243 75% 45%;
  --destructive: 0 72% 45%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 71% 29%;
  --warning: 32 95% 37%;
  --border: 38 16% 86%;
  --input: 38 16% 84%;
  --ring: 243 75% 59%;

  --bg-elevated: var(--susu-2);
  --border-color: var(--garis);
  --text-muted: var(--tanah);
}

html.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --krem: #0e0e0c;
  --susu: #161613;
  --susu-2: #20201c;
  --arang: #f3f2ec;
  --tanah: #a09e96;
  --garis: #2a2a24;
  --rubah: #818cf8;
  --rubah-hover: #6366f1;
  --rubah-teks: #a5b4fc;
  --on-rubah: #0e0e0c;
  --syal: #141411;
  --on-syal: #f3f2ec;
  --on-syal-2: #a09e96;
  --hijau: #4ade80;
  --hijau-bg: rgba(74, 222, 128, 0.14);
  --kuning: #fbbf24;
  --kuning-bg: rgba(251, 191, 36, 0.14);
  --merah: #f87171;
  --merah-bg: rgba(248, 113, 113, 0.14);

  --background: 60 8% 5%;
  --foreground: 51 23% 94%;
  --card: 60 7% 8%;
  --card-foreground: 51 23% 94%;
  --primary: 234 89% 74%;
  --primary-foreground: 60 8% 5%;
  --secondary: 210 92% 68%;
  --secondary-foreground: 60 8% 5%;
  --muted: 60 7% 12%;
  --muted-foreground: 53 5% 60%;
  --accent: 235 30% 18%;
  --accent-foreground: 234 89% 82%;
  --destructive: 0 84% 65%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 69% 58%;
  --warning: 38 92% 60%;
  --border: 60 8% 16%;
  --input: 60 8% 18%;
  --ring: 234 89% 74%;
}

*, *::before, *::after {
  box-sizing: border-box;
}

::selection {
  background: var(--rubah);
  color: var(--on-rubah);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--krem);
  color: var(--arang);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100svh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, p, ul, ol, figure, fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

ul, ol {
  list-style: none;
}

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

a[href],
button:not(:disabled),
summary,
select,
label[for],
input[type="range"],
input[type="checkbox"],
input[type="radio"] {
  cursor: pointer;
}

button:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

:focus-visible {
  outline: 2.5px solid var(--rubah);
  outline-offset: 3px;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

.font-mono {
  font-family: var(--mono);
}

.v2-skip,
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  background: var(--arang);
  color: var(--krem);
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 0.2s;
}

.v2-skip:focus,
.skip-link:focus {
  transform: translateY(0);
}

/* ==========================================================================
   TYPOGRAPHY & BUTTONS
   ========================================================================== */

.v2-wrap,
.shell-width,
.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 52px);
}

.v2-display {
  font-family: var(--display);
  letter-spacing: -0.028em;
  font-weight: 700;
}

.v2-h2 {
  text-wrap: balance;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.v2-lead {
  color: var(--tanah);
  max-width: 52ch;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
}

.v2-fine {
  color: var(--tanah);
  font-size: 14px;
  line-height: 1.5;
}

.v2-link {
  text-underline-offset: 4px;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--rubah);
  font-weight: 700;
}

.v2-btn {
  min-height: 48px;
  font: 700 15.5px/1 var(--body);
  transition: transform 0.2s var(--ease), background-color 0.18s;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 26px;
  text-decoration: none;
  display: inline-flex;
}

.v2-btn:hover {
  transform: translateY(-1px);
}

.v2-btn--primary {
  background: var(--rubah);
  color: var(--on-rubah);
}

.v2-btn--primary:hover {
  background: var(--rubah-hover);
}

.v2-btn--ink {
  background: var(--arang);
  color: var(--krem);
}

.v2-btn--ghost {
  background: var(--susu);
  color: var(--arang);
  box-shadow: inset 0 0 0 1.5px var(--garis);
}

.v2-btn--sm {
  min-height: 40px;
  padding: 0 18px;
  font-size: 14px;
}

.v2-btn--block,
.w-full,
.btn-full {
  width: 100%;
}

/* ==========================================================================
   HEADER & NAVIGATION (.v2-nav & .store-head)
   ========================================================================== */

.v2-nav,
.store-head {
  z-index: 50;
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--krem) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--garis);
}

.v2-nav__bar {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  max-width: 1240px;
  min-height: 64px;
  margin-inline: auto;
  padding: 10px clamp(18px, 4vw, 52px);
  display: flex;
}

.v2-brand,
.store-brand {
  font: 800 19px/1 var(--display);
  letter-spacing: -0.03em;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  display: inline-flex;
}

.v2-brand img,
.store-brand__mark {
  border-radius: 9px;
  width: 34px;
  height: 34px;
  object-fit: contain;
  border: 1px solid var(--garis);
  background: var(--susu);
}

.v2-nav__links {
  gap: 28px;
  display: flex;
}

.v2-nav__links a,
.v2-nav__login {
  padding: 8px 2px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tanah);
  transition: color 0.16s;
}

.v2-nav__links a:hover,
.v2-nav__login:hover {
  color: var(--arang);
}

.v2-nav__actions {
  align-items: center;
  gap: 10px;
  display: flex;
}

.v2-theme-btn,
.v2-nav__menu {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1.5px solid var(--garis);
  background: var(--susu);
  color: var(--arang);
  display: grid;
  place-items: center;
  transition: background-color 0.16s;
}

.v2-theme-btn:hover,
.v2-nav__menu:hover {
  background: var(--susu-2);
}

.v2-nav__menu {
  display: none;
}

.v2-nav__sheet {
  border-top: 1px solid var(--garis);
  background: var(--susu);
  padding: 12px clamp(18px, 4vw, 52px) 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.v2-nav__sheet[hidden] {
  display: none;
}

.v2-nav__sheet a {
  padding: 10px 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--arang);
  border-bottom: 1px solid var(--garis);
}

.v2-nav__sheet a:last-child {
  border-bottom: 0;
}

/* ==========================================================================
   1. HERO (.v2-hero)
   ========================================================================== */

.v2-hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 40px;
  max-width: 1240px;
  min-height: calc(88svh - 64px);
  margin-inline: auto;
  padding: clamp(32px, 5vh, 64px) clamp(18px, 4vw, 52px) 68px;
  display: grid;
}

.v2-hero__title {
  letter-spacing: -0.036em;
  margin-bottom: 20px;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.0;
}

.v2-hero__title span {
  display: block;
}

.v2-hero__ctas {
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin: 26px 0 18px;
  display: flex;
}

.v2-hero__stage {
  height: min(580px, 74svh);
  min-height: 460px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.v2-hero__frame {
  aspect-ratio: 9 / 16;
  width: min(290px, 70%);
  position: relative;
  z-index: 2;
}

.v2-hero__result {
  background: var(--syal);
  border-radius: 26px;
  position: absolute;
  inset: 0;
  overflow: hidden;
  box-shadow: 0 24px 48px -20px rgba(24, 23, 21, 0.35), 0 0 0 5px var(--susu), 0 0 0 6.5px var(--garis);
}

.v2-hero__result video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.v2-chip {
  background: var(--susu);
  color: var(--arang);
  border: 1.5px solid var(--garis);
  border-radius: 14px;
  align-items: center;
  gap: 10px;
  padding: 8px 13px 8px 8px;
  font-size: 13px;
  display: flex;
  position: absolute;
  z-index: 3;
  box-shadow: 0 12px 28px -10px rgba(24, 23, 21, 0.18);
}

.v2-chip b {
  white-space: nowrap;
  font-weight: 700;
  display: block;
}

.v2-chip small {
  white-space: nowrap;
  color: var(--tanah);
  font-size: 11.5px;
  display: block;
}

.v2-chip img,
.v2-chip video {
  object-fit: cover;
  border-radius: 8px;
  width: 42px;
  height: 54px;
  flex-shrink: 0;
}

.v2-chip--photo {
  top: 18%;
  left: 2%;
  rotate: -3deg;
}

.v2-chip--motion {
  bottom: 14%;
  right: 2%;
  rotate: 2.5deg;
}

/* ==========================================================================
   2. HASIL SEMUA MODEL AI (#hasil / .v2-mc-section)
   ========================================================================== */

.v2-mc-section {
  background: var(--susu);
  border-block: 1px solid var(--garis);
  padding-block: clamp(64px, 9vh, 100px);
}

.v2-mc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

.v2-model-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--krem);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--garis);
}

.v2-model-pill {
  border: 0;
  background: transparent;
  color: var(--tanah);
  border-radius: 9px;
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 700;
  transition: background-color 0.16s, color 0.16s;
}

.v2-model-pill.is-active {
  background: var(--arang);
  color: var(--krem);
}

.v2-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 28px;
}

.v2-showcase-card {
  background: var(--krem);
  border: 1.5px solid var(--garis);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s;
}

.v2-showcase-card:hover {
  border-color: var(--tanah);
}

.v2-showcase-media {
  position: relative;
  aspect-ratio: 9 / 13;
  max-height: 360px;
  background: var(--syal);
  overflow: hidden;
  border-bottom: 1px solid var(--garis);
}

.v2-showcase-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.v2-showcase-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: color-mix(in srgb, var(--susu) 92%, transparent);
  backdrop-filter: blur(6px);
  color: var(--arang);
  border: 1px solid var(--garis);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}

.v2-showcase-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.v2-showcase-body h3 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.v2-showcase-body p {
  color: var(--tanah);
  font-size: 14px;
  line-height: 1.5;
  flex: 1;
}

.v2-showcase-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--garis);
  font-size: 13px;
}

.v2-showcase-prices {
  font-variant-numeric: tabular-nums;
  color: var(--tanah);
  font-weight: 600;
}

.v2-showcase-prices b {
  color: var(--arang);
}

.v2-showcase-cta {
  font-weight: 700;
  color: var(--rubah);
  white-space: nowrap;
}

.v2-showcase-cta:hover {
  text-decoration: underline;
}

/* ==========================================================================
   3. PRICING & CALCULATOR (#harga / .v2-price-section)
   ========================================================================== */

.v2-price-section {
  background: var(--krem);
  padding-block: clamp(68px, 10vh, 108px);
}

.v2-price-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
  display: grid;
}

.v2-price__card {
  background: var(--susu);
  border: 1.5px solid var(--garis);
  border-radius: 22px;
  padding: clamp(20px, 2.8vw, 30px);
  display: flex;
  flex-direction: column;
}

.v2-price__rate {
  margin-bottom: 10px;
  font-size: clamp(20px, 2vw, 26px);
}

.v2-price__list li {
  border-bottom: 1px solid var(--garis);
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  display: flex;
}

.v2-price__list li:last-child {
  border-bottom: 0;
}

.v2-price__list b {
  font-size: 15.5px;
  font-weight: 700;
  display: block;
}

.v2-price__list small {
  color: var(--tanah);
  font-size: 13px;
  display: block;
}

.v2-calc {
  background: var(--krem);
  border: 1.5px solid var(--garis);
  border-radius: 18px;
  margin-bottom: 18px;
  padding: 18px;
}

.v2-calc__label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}

.v2-calc__options {
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  display: flex;
}

.v2-calc__pill {
  min-height: 34px;
  border: 1.5px solid var(--garis);
  background: var(--susu);
  color: var(--arang);
  border-radius: 9px;
  padding: 0 11px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s;
}

.v2-calc__pill.is-active {
  background: var(--arang);
  color: var(--krem);
  border-color: var(--arang);
}

.v2-calc input[type="range"] {
  width: 100%;
  accent-color: var(--rubah);
  height: 24px;
  margin: 6px 0;
}

.v2-calc__result {
  color: var(--tanah);
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--garis);
  font-weight: 600;
  font-size: 14px;
  display: flex;
}

.v2-calc__total {
  color: var(--arang);
  font-variant-numeric: tabular-nums;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1;
}

.v2-rules {
  border-top: 1px solid var(--garis);
  gap: 9px;
  margin-top: 18px;
  padding-top: 16px;
  display: grid;
}

.v2-rules li {
  color: var(--tanah);
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  line-height: 1.45;
  display: flex;
}

/* ==========================================================================
   4. FAQ & TIDY FOOTER (.v2-faq & .v2-end)
   ========================================================================== */

.v2-faq-section {
  background: var(--susu);
  border-top: 1px solid var(--garis);
}

.v2-faq {
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 76px);
  padding-block: clamp(68px, 10vh, 104px);
  display: grid;
}

.v2-faq__left {
  align-self: start;
  position: sticky;
  top: 90px;
}

.v2-faq__item {
  border-bottom: 1px solid var(--garis);
}

.v2-faq__item button {
  width: 100%;
  min-height: 62px;
  color: var(--arang);
  text-align: left;
  background: transparent;
  border: 0;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  display: flex;
}

.v2-faq__item button .v2-display {
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.3;
}

.v2-faq__panel {
  display: none;
  padding-bottom: 18px;
  color: var(--tanah);
  font-size: 15px;
  line-height: 1.6;
}

.v2-faq__item.is-open .v2-faq__panel {
  display: block;
}

/* Tidy Footer */
.v2-end {
  background: var(--syal);
  color: var(--on-syal);
  padding-top: 52px;
}

.v2-end__card {
  background: var(--rubah);
  color: var(--on-rubah);
  border-radius: 24px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 32px;
  padding: clamp(24px, 3.6vw, 40px);
  margin-bottom: 44px;
  display: grid;
}

.v2-end__picks {
  display: grid;
  gap: 10px;
}

.v2-end__pick {
  background: var(--susu);
  color: var(--arang);
  border-radius: 14px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: transform 0.18s var(--ease);
}

.v2-end__pick:hover {
  transform: translateY(-1px);
}

.v2-end__pick b {
  font: 700 16px/1.2 var(--display);
  display: block;
}

.v2-end__pick small {
  color: var(--tanah);
  font-size: 13px;
}

.v2-end__grid {
  border-top: 1px solid rgba(248, 247, 244, 0.12);
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) repeat(3, minmax(120px, 0.75fr));
  gap: 28px;
  padding-block: 36px;
}

.v2-end__brand-col p {
  color: var(--on-syal-2);
  font-size: 14px;
  line-height: 1.6;
  max-width: 30ch;
  margin-top: 10px;
}

.v2-end__col h2 {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-syal);
  margin-bottom: 12px;
}

.v2-end__col ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.v2-end__col a {
  font-size: 14px;
  color: var(--on-syal-2);
  transition: color 0.15s;
}

.v2-end__col a:hover {
  color: var(--on-syal);
}

.v2-end__bottom {
  border-top: 1px solid rgba(248, 247, 244, 0.1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  padding-block: 20px 28px;
  font-size: 13.5px;
  color: var(--on-syal-2);
}

/* Also support .store-footer in dashboard */
.store-footer {
  border-top: 1px solid var(--garis);
  background: var(--susu);
  margin-top: auto;
}

.store-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 20px;
  padding-block: 16px;
  font-size: 13px;
  color: var(--tanah);
}

.store-footer__badges {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.store-footer__badges i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hijau);
  display: inline-block;
  margin-right: 4px;
}

/* ==========================================================================
   DASHBOARD, AUTH & ADMIN WORKSPACE
   ========================================================================== */

.store-shell {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.store-main {
  flex: 1;
  min-width: 0;
}

.store-head__inner {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 52px);
}

.store-head__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 64px;
}

.store-brand__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
}

.store-head__tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.store-icon-link,
.store-wallet-pill {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1.5px solid var(--garis);
  background: var(--susu);
  color: var(--arang);
  font-size: 13.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.store-wallet-pill strong {
  color: var(--rubah);
  font-variant-numeric: tabular-nums;
}

.store-nav-btn {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--tanah);
  font-size: 13.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all 0.15s;
}

.store-nav-btn svg {
  width: 15px;
  height: 15px;
}

.store-nav-btn:hover {
  color: var(--arang);
  background: var(--susu-2);
}

.store-nav-btn.active {
  background: var(--arang);
  color: var(--krem);
}

.view-section {
  display: none;
  padding-block: 22px 56px;
}

.view-section.active {
  display: block;
}

.member-workspace { padding-block: 26px 88px; }
.member-account-banner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:18px; border-bottom:1px solid var(--garis); }
.member-account-info, .member-account-actions { display:flex; align-items:center; gap:12px; }
.member-avatar { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:var(--rubah); color:var(--on-rubah); font-weight:800; font-size:17px; }
.member-account-meta { display:grid; gap:3px; }
.member-account-meta strong { font-size:15px; }
.member-account-meta span { color:var(--tanah); font-size:13px; }
.member-account-actions .btn { min-height:40px; font-size:13px; }
.member-nav { display:flex; align-items:center; gap:5px; padding-block:9px; border-bottom:1px solid var(--garis); overflow-x:auto; scrollbar-width:thin; }
.member-nav .store-nav-btn { min-height:42px; }
.member-subnav { display:flex; gap:6px; margin:0 0 18px; padding-bottom:10px; border-bottom:1px solid var(--garis); overflow-x:auto; }
.member-subnav__button { flex:0 0 auto; min-height:40px; padding:8px 13px; border:1px solid transparent; border-radius:9px; color:var(--tanah); background:transparent; font:600 13px/1.2 var(--body); cursor:pointer; }
.member-subnav__button:hover { color:var(--arang); background:var(--susu-2); }
.member-subnav__button.active { color:var(--arang); background:var(--susu); border-color:var(--garis); }
.member-subnav__button:focus-visible { outline:3px solid color-mix(in srgb,hsl(var(--primary)) 40%,transparent); outline-offset:2px; }
.member-finance-panel { display:none; }
.member-finance-panel.active { display:block; }
.member-finance-panel .studio-stage { margin-top:0; }
.member-history-tools { display:flex; gap:8px; margin:0 0 12px; }
.member-history-tools .form-input { max-width:360px; }
.member-history-tools .form-select { max-width:220px; }
.member-history-pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; color:var(--tanah); font-size:12px; }
.member-history-pagination > div { display:flex; align-items:center; gap:10px; }
.table-subtext { margin-top:3px; color:var(--tanah); font-size:11.5px; line-height:1.45; }
.ledger-delta { font-weight:700; white-space:nowrap; }
.ledger-delta.is-positive { color:var(--hijau); }
.ledger-delta.is-negative { color:var(--arang); }
.member-task-badge { padding:2px 7px; border-radius:99px; background:var(--rubah); color:var(--on-rubah); font-size:11px; font-weight:700; }
.member-view { padding-top:20px; }
.prompt-layout { display:grid; grid-template-columns:minmax(150px,1fr) minmax(0,2fr); gap:14px; }

.studio-stage,
.studio-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(280px, 0.62fr);
  align-items: start;
  gap: 24px;
}

.studio-sidebar {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card,
.glass-card {
  background: var(--susu);
  border: 1.5px solid var(--garis);
  border-radius: 18px;
  padding: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--garis);
  flex-wrap: wrap;
}

.card-title {
  font-family: var(--display);
  font-size: 17.5px;
  font-weight: 700;
}

.mode-switch {
  display: inline-flex;
  background: var(--krem);
  padding: 4px;
  border-radius: 11px;
  border: 1px solid var(--garis);
}

.mode-btn {
  border: 0;
  background: transparent;
  color: var(--tanah);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}

.mode-btn.active {
  background: var(--arang);
  color: var(--krem);
}

.form-step-block {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--garis);
}

.form-step-block:last-of-type {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.step-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.step-heading label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
}

.step-heading span {
  font-size: 12px;
  color: var(--tanah);
}

.model-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.model-pick-card {
  background: var(--krem);
  border: 1.5px solid var(--garis);
  border-radius: 14px;
  padding: 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7px;
  transition: all 0.15s;
}

.model-pick-card.selected {
  background: var(--susu);
  border-color: var(--rubah);
  box-shadow: 0 0 0 1px var(--rubah);
}

.model-pick-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
}

.model-pick-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
}

.model-type-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--susu-2);
  color: var(--tanah);
}

.model-pick-card.selected .model-type-pill {
  background: var(--rubah);
  color: var(--on-rubah);
}

.model-pick-prices {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--tanah);
  font-variant-numeric: tabular-nums;
}

.model-pick-prices strong {
  color: var(--arang);
}

.duration-grid,
.upload-pair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.duration-card {
  background: var(--krem);
  border: 1.5px solid var(--garis);
  border-radius: 14px;
  padding: 13px 15px;
  text-align: left;
  transition: all 0.15s;
}

.duration-card.selected {
  background: var(--susu);
  border-color: var(--rubah);
  box-shadow: 0 0 0 1px var(--rubah);
}

.duration-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.duration-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
}

.duration-cost {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 14px;
  color: var(--rubah);
}

.duration-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--tanah);
}

.dropzone-card {
  border: 1.5px dashed var(--garis);
  background: var(--krem);
  border-radius: 14px;
  min-height: 155px;
  padding: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  transition: border-color 0.15s;
}

.dropzone-card:hover {
  border-color: var(--rubah);
}

.dropzone-card.has-file {
  border-style: solid;
  border-color: var(--rubah);
  padding: 0;
}

.dropzone-card input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
}

.dropzone-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  pointer-events: none;
}

.dropzone-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--susu);
  border: 1px solid var(--garis);
  color: var(--rubah);
  display: grid;
  place-items: center;
}

.dropzone-icon-circle svg {
  width: 17px;
  height: 17px;
}

.dropzone-title {
  font-weight: 700;
  font-size: 13.5px;
}

.dropzone-hint {
  font-size: 11.5px;
  color: var(--tanah);
}

.dropzone-preview-wrap {
  display: none;
  width: 100%;
  height: 155px;
  position: relative;
  background: #0c0e14;
}

.dropzone-card.has-file .dropzone-empty-state {
  display: none;
}

.dropzone-card.has-file .dropzone-preview-wrap {
  display: block;
}

.dropzone-preview-wrap img,
.dropzone-preview-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dropzone-preview-bar {
  position: absolute;
  inset: auto 0 0 0;
  padding: 5px 10px;
  background: rgba(15, 17, 26, 0.85);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  z-index: 4;
}

.dropzone-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropzone-remove-btn {
  background: #ef4444;
  color: #fff;
  border: 0;
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
}

.multi-slot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.multi-slot-grid .dropzone-card {
  min-height: 120px;
}

.multi-slot-grid .dropzone-preview-wrap {
  height: 120px;
}

.prompt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 7px;
}

.prompt-chip {
  border: 1px solid var(--garis);
  background: var(--krem);
  color: var(--tanah);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
}

.prompt-chip:hover {
  border-color: var(--rubah);
  color: var(--arang);
}

.form-group {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 5px;
}

.form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.form-label-row .form-label {
  margin-bottom: 0;
}

.form-hint {
  display: block;
  font-size: 12px;
  color: var(--tanah);
  margin-bottom: 5px;
}

.input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon-left {
  position: absolute;
  left: 12px;
  color: var(--tanah);
  pointer-events: none;
  display: flex;
}

.input-icon-right {
  position: absolute;
  right: 10px;
  border: 0;
  background: transparent;
  color: var(--tanah);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-icon-right:hover {
  color: var(--arang);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  min-height: 42px;
  border: 1.5px solid var(--garis);
  background: var(--krem);
  color: var(--arang);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
}

.form-input.has-icon-left {
  padding-left: 38px;
}

.form-input.has-icon-right {
  padding-right: 38px;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--rubah);
}

.form-textarea {
  min-height: 84px;
  resize: vertical;
}

.btn,
.btn-premium {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  border: 1.5px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: transform 0.16s var(--ease), opacity 0.16s, background-color 0.16s;
}

.btn svg,
.btn-premium svg {
  width: 15px;
  height: 15px;
}

.btn-primary,
.btn-premium {
  background: var(--rubah);
  color: var(--on-rubah);
}

.btn-primary:hover:not(:disabled),
.btn-premium:hover:not(:disabled) {
  background: var(--rubah-hover);
}

.btn-secondary {
  background: var(--susu);
  color: var(--arang);
  border-color: var(--garis);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--susu-2);
}

.btn-danger {
  background: var(--merah-bg);
  color: var(--merah);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 7px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
}

.status-SUCCESS,
.status-PAID {
  background: var(--hijau-bg);
  color: var(--hijau);
}

.status-QUEUED,
.status-PENDING,
.status-RUNNING,
.status-PROCESSING,
.status-UPLOADING,
.status-POST_PROCESSING {
  background: var(--kuning-bg);
  color: var(--kuning);
}

.status-FAILED,
.status-CANCELLED,
.status-EXPIRED {
  background: var(--merah-bg);
  color: var(--merah);
}

.alert {
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 14px;
  border: 1.5px solid var(--garis);
  background: var(--krem);
}

.alert-error,
.alert-danger {
  background: var(--merah-bg);
  color: var(--merah);
  border-color: transparent;
}

.alert-success {
  background: var(--hijau-bg);
  color: var(--hijau);
  border-color: transparent;
}

.metrics-line {
  background: var(--susu);
  border: 1.5px solid var(--garis);
  border-radius: 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 20px;
  overflow: hidden;
}

.metric-cell {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.metric-cell + .metric-cell {
  border-left: 1px solid var(--garis);
}

.metric-cell > span {
  font-size: 12px;
  color: var(--tanah);
  font-weight: 600;
}

.metric-cell > strong {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.history-card {
  background: var(--susu);
  border: 1.5px solid var(--garis);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.history-card-media {
  position: relative;
  aspect-ratio: 9 / 13;
  background: #0c0e14;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.history-card-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0c0e14;
}

.history-video-placeholder {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:20px;
  color:#eef0f8;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.42));
  text-align:center;
  font-size:13px;
  pointer-events:none;
}
.history-card-media.has-frame:not(.is-loading) .history-video-placeholder:not(.is-error) {
  display:none;
}
.history-card-media.has-frame.is-loading .history-video-placeholder:not(.is-error) {
  background:rgba(0,0,0,.28);
}
.history-video-placeholder.is-error {
  background:rgba(0,0,0,.72);
}
.history-card-media.is-loading .history-video-placeholder::before {
  content:"";
  position:absolute;
  width:26px;
  height:26px;
  margin-top:-46px;
  border:3px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:history-spin .8s linear infinite;
}
@keyframes history-spin { to { transform:rotate(360deg); } }
.history-video-controls {
  display:grid;
  grid-template-columns:auto auto minmax(36px,1fr) auto;
  align-items:center;
  gap:7px;
  padding:8px 10px;
  background:#0c0e14;
  color:#f8fafc;
}
.history-video-control {
  min-height:32px;
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:7px;
  background:#181b24;
  color:#fff;
  font:600 11px/1.2 var(--body);
  cursor:pointer;
}
.history-video-control:hover { background:#252a36; }
.history-video-control:focus-visible,
.history-video-controls input:focus-visible { outline:3px solid hsl(var(--primary)); outline-offset:2px; }
.history-video-controls input[type="range"] { width:100%; min-width:36px; accent-color:hsl(var(--primary)); }
.history-video-time { font-size:10px; font-variant-numeric:tabular-nums; white-space:nowrap; color:#e5e7eb; }
@media (max-width:380px) {
  .history-video-controls { gap:5px; padding-inline:7px; }
  .history-video-control { padding-inline:6px; }
  .history-video-time { font-size:9px; }
}

.history-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.table-wrap,
.table-responsive {
  width: 100%;
  overflow-x: auto;
  border: 1.5px solid var(--garis);
  border-radius: 14px;
  background: var(--susu);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th, td {
  padding: 10px 13px;
  text-align: left;
  border-bottom: 1px solid var(--garis);
}

th {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tanah);
  background: var(--krem);
}

tr:last-child td {
  border-bottom: 0;
}

.bulk-item-card,
.bulk-row-card {
  background: var(--krem);
  border: 1.5px solid var(--garis);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
}

.empty-state {
  padding: 32px;
  text-align: center;
  color: var(--tanah);
  font-size: 14px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 26, 0.55);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-backdrop.open {
  display: flex;
}

.modal-dialog {
  width: min(100%, 400px);
  background: var(--susu);
  border: 1.5px solid var(--garis);
  border-radius: 20px;
  padding: 22px;
}

.floating-cs-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 45;
  background: var(--susu);
  color: var(--arang);
  border: 1.5px solid var(--garis);
  border-radius: 999px;
  padding: 9px 15px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 8px 20px -6px rgba(24, 23, 21, 0.16);
  transition: transform 0.18s var(--ease), border-color 0.18s;
}

.floating-cs-btn:hover {
  transform: translateY(-2px);
  border-color: var(--rubah);
}

.floating-cs-btn svg {
  width: 16px;
  height: 16px;
  color: var(--rubah);
}

.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--susu);
  border-top: 1px solid var(--garis);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 6px 4px;
}

.mobile-nav-item {
  border: 0;
  background: transparent;
  color: var(--tanah);
  padding: 6px 4px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.mobile-nav-item svg {
  width: 18px;
  height: 18px;
}

.mobile-nav-item.active {
  color: var(--rubah);
}

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

@media (max-width: 1024px) {
  .v2-hero,
  .v2-price-grid,
  .v2-faq,
  .v2-end__card,
  .studio-stage,
  .studio-layout {
    grid-template-columns: 1fr;
  }
  .v2-showcase-grid,
  .v2-end__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .v2-faq__left,
  .studio-sidebar {
    position: static;
  }
}

@media (max-width: 720px) {
  .v2-nav__links {
    display: none;
  }
  .v2-nav__menu {
    display: grid;
  }
  .v2-hero__stage {
    min-height: 410px;
  }
  .v2-showcase-grid,
  .v2-end__grid,
  .duration-grid,
  .upload-pair-grid,
  .metrics-line {
    grid-template-columns: 1fr;
  }
  .model-picker-grid,
  .multi-slot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .metric-cell + .metric-cell {
    border-left: 0;
    border-top: 1px solid var(--garis);
  }
  .mobile-bottom-nav {
    display: grid;
  }
  .member-workspace { padding-top:18px; }
  .member-account-banner { align-items:flex-start; flex-direction:column; }
  .member-account-actions { width:100%; }
  .member-account-actions .btn { flex:1; }
  .member-nav { display:none; }
  .prompt-layout { grid-template-columns:1fr; }
  .floating-cs-btn {
    bottom: 70px;
  }
}

/* Clean & Simple Admin Workspace */
.adm-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

.adm-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.adm-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--krem);
  border: 1.5px solid var(--garis);
  border-radius: 12px;
  padding: 4px;
}

.adm-tab {
  border: 0;
  background: transparent;
  color: var(--tanah);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.adm-tab:hover {
  color: var(--arang);
}

.adm-tab.active {
  background: var(--susu);
  color: var(--arang);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.adm-finance-tabs { margin-bottom:14px; }
.adm-finance-view { display:none; }
.adm-finance-view.active { display:block; }
.adm-finance-tools { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.adm-finance-tools .form-input { max-width:360px; }
.adm-finance-tools .form-select { max-width:220px; }
.adm-date-filter { display:flex; align-items:center; gap:6px; color:var(--tanah); font-size:12px; white-space:nowrap; }
.adm-date-filter .form-input { max-width:155px; min-height:38px; padding:7px 8px; }
.adm-export-button { margin-top:12px; }
.adm-table-pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; color:var(--tanah); font-size:12px; }
.adm-table-pagination > div { display:flex; align-items:center; gap:10px; }

.adm-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.adm-stat {
  background: var(--susu);
  border: 1.5px solid var(--garis);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.adm-stat__label {
  font-size: 12px;
  color: var(--tanah);
  font-weight: 600;
}

.adm-stat__val {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  color: var(--arang);
}

.adm-stat__sub {
  font-size: 11.5px;
  color: var(--tanah);
}

.adm-revenue { margin:0 0 20px; }
.adm-revenue__summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:0 0 20px; }
.adm-revenue__summary > div { display:flex; flex-direction:column; gap:4px; }
.adm-revenue__summary span { color:var(--tanah); font-size:12px; }
.adm-revenue__summary strong { color:var(--arang); font-size:20px; font-variant-numeric:tabular-nums; }
.adm-revenue__chart { display:grid; grid-template-columns:repeat(14,minmax(16px,1fr)); align-items:end; gap:8px; min-height:132px; padding:12px 4px 0; border-bottom:1px solid var(--garis); }
.adm-revenue__day { display:flex; height:116px; flex-direction:column; align-items:center; justify-content:flex-end; gap:7px; min-width:0; }
.adm-revenue__bar { display:block; width:min(100%,28px); min-height:2px; border-radius:5px 5px 0 0; background:hsl(var(--primary)); }
.adm-revenue__day small { color:var(--tanah); font-size:10px; white-space:nowrap; }

.adm-grid-2 {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  align-items: start;
}

.adm-grid-equal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.adm-card {
  background: var(--susu);
  border: 1.5px solid var(--garis);
  border-radius: 16px;
  padding: 20px;
}

.adm-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.adm-card__title {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: var(--arang);
  margin: 0;
}

.adm-card__desc {
  font-size: 12.5px;
  color: var(--tanah);
  margin: 3px 0 0;
}

.adm-model-row {
  background: var(--krem);
  border: 1.5px solid var(--garis);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.adm-model-row__main {
  display: grid;
  grid-template-columns: minmax(260px, 1.8fr) minmax(140px, .55fr) minmax(140px, .55fr) auto auto;
  gap: 10px;
  align-items: end;
}

.adm-model-row__adv {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--garis);
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.adm-model-row__adv.open {
  display: grid;
}

.adm-copy-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--krem);
  border: 1.5px solid var(--garis);
  border-radius: 10px;
  padding: 9px 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--arang);
  overflow-x: auto;
}

.voucher-create { margin:0 0 18px; padding-bottom:18px; border-bottom:1px solid var(--garis); }
.voucher-create > summary { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; list-style:none; }
.voucher-create > summary::-webkit-details-marker { display:none; }
.voucher-create[open] > summary { margin-bottom:14px; }
.voucher-create__panel { padding:16px; border:1px solid var(--garis); border-radius:12px; background:var(--krem); }
.voucher-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; }
.voucher-form-grid .form-group { margin-bottom:12px; }
.adm-voucher-benefit { margin-top:4px; color:var(--tanah); font-size:11.5px; }
.adm-voucher-actions { display:flex; flex-wrap:wrap; gap:6px; }
.adm-voucher-actions .btn { min-height:32px; padding:5px 9px; font-size:11.5px; }

.package-picker { min-width:0; margin:0 0 18px; padding:0; border:0; }
.package-picker__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.package-choice { min-width:0; min-height:120px; padding:14px; display:flex; flex-direction:column; align-items:flex-start; gap:5px; text-align:left; color:var(--arang); background:var(--susu); border:1px solid var(--garis); border-radius:12px; cursor:pointer; transition:border-color .15s,box-shadow .15s,background .15s; }
.package-choice:hover { border-color:hsl(var(--primary)); }
.package-choice.selected { border-color:hsl(var(--primary)); box-shadow:0 0 0 2px color-mix(in srgb,hsl(var(--primary)) 14%,transparent); }
.package-choice:focus-visible { outline:3px solid color-mix(in srgb,hsl(var(--primary)) 38%,transparent); outline-offset:2px; }
.package-choice__name { font-size:12px; font-weight:600; color:var(--tanah); }
.package-choice__credits { font-size:18px; font-family:var(--display); }
.package-choice__bonus { font-size:11px; color:var(--hijau); }
.package-choice__price { margin-top:auto; font-size:14px; font-weight:700; color:hsl(var(--primary)); }
.topup-submit-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding-top:14px; border-top:1px solid var(--garis); }
.topup-submit-row > div { display:flex; flex-direction:column; gap:2px; }
.topup-submit-row > strong { font-size:20px; }
.form-hint-inline { margin-left:4px; color:var(--tanah); font-weight:400; }

@media (max-width: 960px) {
  .adm-stats,
  .adm-grid-2,
  .adm-grid-equal {
    grid-template-columns: 1fr;
  }
  .adm-model-row__main,
  .adm-model-row__adv.open {
    grid-template-columns: 1fr 1fr;
  }
}

/* Admin navigation and page rhythm */
.v2-top { position:sticky; top:0; z-index:50; background:var(--susu); border-bottom:1px solid var(--garis); }
.v2-top__bar { max-width:1320px; min-height:68px; margin:0 auto; padding:10px clamp(16px, 3vw, 36px); display:flex; align-items:center; justify-content:space-between; gap:18px; }
.v2-logo { display:inline-flex; align-items:center; gap:10px; color:var(--arang); text-decoration:none; font-weight:700; white-space:nowrap; }
.v2-logo__mark { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; overflow:hidden; background:var(--krem); }
.v2-logo__mark img { display:block; width:100%; height:100%; object-fit:contain; }
.v2-logo__name { font:700 16px/1.2 var(--display); }
.v2-nav__right { display:flex; align-items:center; gap:14px; }
.v2-link-muted { color:var(--tanah); text-decoration:none; font-size:13px; font-weight:600; }
.v2-link-muted:hover { color:var(--arang); }
.v2-icon-btn { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--garis); border-radius:10px; color:var(--arang); background:var(--susu); cursor:pointer; }
.adm-shell { max-width: 1240px; padding: 28px clamp(16px, 3vw, 36px) 72px; }
.adm-page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.adm-page-heading h1 { margin:0; font:700 clamp(24px, 3vw, 32px)/1.15 var(--display); letter-spacing:-.025em; }
.adm-page-heading p { margin:7px 0 0; color:var(--tanah); font-size:14px; }
.adm-stats { border-radius:14px; }
.adm-stat { padding:16px 18px; }
.adm-topbar { position:sticky; top:0; z-index:30; margin:0 -8px 18px; padding:8px; background:var(--krem); }
.adm-tabs { flex-wrap:nowrap; max-width:100%; overflow-x:auto; scrollbar-width:thin; }
.adm-tab { min-height:40px; white-space:nowrap; }
.adm-card { border-radius:14px; }
.adm-card__title { letter-spacing:-.015em; }
.adm-pricing-note { margin:0 0 16px; padding:12px 14px; border:1px solid var(--garis); border-radius:10px; background:var(--krem); color:var(--tanah); font-size:13px; }
.adm-pricing-note strong { color:var(--arang); font-variant-numeric:tabular-nums; }
.adm-business-fields { padding:16px; border:1px solid var(--garis); border-radius:12px; background:var(--krem); }
.adm-business-save { display:flex; justify-content:flex-end; margin-top:14px; }
.view-section.active { animation:admin-view-in .18s ease-out both; }
@keyframes admin-view-in { from { opacity:.7; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:720px) {
  .v2-top__bar { min-height:60px; gap:10px; }
  .v2-nav__right { gap:8px; }
  .v2-link-muted { font-size:12px; }
  .v2-logo__name { font-size:14px; }
  .adm-shell { padding-top:18px; }
  .adm-page-heading { align-items:flex-start; margin-bottom:16px; }
  .adm-finance-tools { align-items:stretch; flex-direction:column; }
  .adm-finance-tools .form-input,
  .adm-finance-tools .form-select { width:100%; max-width:none; }
  .adm-table-pagination { align-items:flex-start; flex-direction:column; }
  .adm-table-pagination > div { width:100%; justify-content:space-between; }
  .adm-live-state { margin-top:6px; }
  .adm-topbar { margin-inline:-16px; padding-inline:16px; }
  .adm-topbar > .btn { flex:0 0 auto; }
  .adm-model-row__main, .adm-model-row__adv.open { grid-template-columns:1fr; }
  .adm-card { padding:16px; }
  .adm-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .adm-revenue__summary { grid-template-columns:1fr; gap:10px; }
  .adm-revenue__chart { gap:3px; overflow-x:auto; }
  .adm-business-fields > div[style*="grid-template-columns"] { grid-template-columns:1fr !important; }
  .adm-business-save .btn { width:100%; }
  .voucher-form-grid,
  .package-picker__grid { grid-template-columns:1fr; }
  .package-choice { min-height:unset; display:grid; grid-template-columns:1fr auto; align-items:center; gap:3px 10px; }
  .package-choice__credits { grid-column:2; grid-row:1 / span 2; text-align:right; }
  .package-choice__price { margin-top:4px; }
  .topup-submit-row { align-items:flex-end; }
  .topup-submit-row .btn { flex:0 0 auto; }
  .adm-voucher-actions { min-width:150px; }
  .member-history-tools { flex-direction:column; }
  .member-history-tools .form-input,
  .member-history-tools .form-select { width:100%; max-width:none; }
  .member-history-pagination { align-items:flex-start; flex-direction:column; }
  .member-history-pagination > div { width:100%; justify-content:space-between; }
  .affiliate-action-grid { grid-template-columns:1fr; }
  .affiliate-support-note { align-items:stretch; flex-direction:column; }
}
.affiliate-action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.affiliate-action-grid > .card { min-width:0; }
.affiliate-action-grid .btn { width:100%; }
.affiliate-welcome-dialog { max-width:440px; text-align:left; }
.affiliate-welcome-dialog h3 { margin:0 0 .6rem; font-size:1.2rem; }
.affiliate-welcome-dialog > p { margin:0 0 1rem; color:hsl(var(--muted-foreground)); line-height:1.6; }
.affiliate-welcome-actions { display:grid; gap:.6rem; margin-bottom:.85rem; }
.affiliate-welcome-dialog .form-hint { display:block; line-height:1.5; }
.affiliate-support-note { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.affiliate-support-note > div { display:grid; gap:.25rem; }
.affiliate-support-note > div span { color:hsl(var(--muted-foreground)); font-size:.88rem; }
.affiliate-support-note > .form-hint { margin:0; }
.adm-withdraw-actions { display:flex; flex-wrap:wrap; gap:6px; min-width:160px; }
.adm-withdraw-actions .btn { min-height:32px; padding:5px 9px; font-size:12px; white-space:nowrap; }
@media (prefers-reduced-motion:reduce) {
  .view-section.active { animation:none; }
}