/* ViralPlus — landing page.
 *
 * Ported from the locked Claude Design export (`ViralPlus v2.dc.html`,
 * palette "Ember merah", backdrop "Wedge + garis"). Values here are the
 * design's, not invented: where the design computed a number per breakpoint,
 * the same number appears under the matching media query.
 *
 * The design's `phoneMode` prop draws a 390x844 device frame around the app —
 * that is a preview affordance for the design tool, so it is NOT reproduced.
 * What it demonstrates (how the app looks at 390px wide) is reproduced, as the
 * <900px branch the design itself calls `narrow`.
 */

:root {
  --vp-red: #e01414;
  --vp-red2: #ff3b3b;
  --vp-ink: #0a0708;
  --vp-ink-rgb: 10, 7, 8;

  /* Desktop scale. The narrow/short branches below override these. */
  --vp-gap: 16px;
  --vp-pad: 14px 20px;
  --vp-panel-pad: 15px;
  --vp-word-size: 30px;
  --vp-sticker-size: 26px;
  --vp-brief-size: 27px;
  --vp-brief-min: 196px;
  --vp-field-gap: 8px;
  --vp-field-max: 5.8em;
  --vp-head-max: 3.4em;
  --vp-row-gap: 6px;
}

* { box-sizing: border-box; }

/* The brief's three states and the modal are toggled with the `hidden`
 * attribute. That is only a UA-stylesheet `display: none`, so any class rule
 * with a `display` beats it — hence the !important. Without this every brief
 * state renders at once. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--vp-ink);
}

body {
  font-family: 'Plus Jakarta Sans', Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--vp-red2); text-decoration: none; }
a:hover { color: #fff; }

/* ------------------------------------------------------------------ shell */

.vp-app {
  position: relative;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--vp-ink);
}

.vp-bg { position: absolute; inset: 0; pointer-events: none; }
.vp-bg-wedge { background: var(--vp-red); clip-path: polygon(0 0, 46% 0, 30% 100%, 0 100%); }
.vp-bg-wedge2 { background: var(--vp-ink); clip-path: polygon(0 0, 22% 0, 9% 100%, 0 100%); }
.vp-bg-texture {
  opacity: 0.06;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.9) 0 2px, transparent 2px 12px);
}

/* ----------------------------------------------------------------- header */

.vp-header {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
}

.vp-word {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-size: var(--vp-word-size);
  line-height: 1;
  letter-spacing: -0.03em;
}
.vp-word-a { font-weight: 800; }
.vp-word-b { font-weight: 500; }

.vp-live { display: flex; align-items: center; gap: 8px; }
.vp-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--vp-red);
  animation: vpPulse 1.5s ease-in-out infinite;
}
.vp-live-text {
  font-size: 11.5px; font-weight: 500;
  letter-spacing: -0.005em; opacity: .75;
}

/* ------------------------------------------------------------------- main */

.vp-main {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  gap: var(--vp-gap);
  padding: var(--vp-pad);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
}

.vp-left {
  min-width: 0; min-height: 0;
  display: grid;
  gap: var(--vp-gap);
  grid-template-rows: minmax(var(--vp-brief-min), 1fr) auto;
}

/* ------------------------------------------------------------ brief panel */

.vp-brief {
  position: relative;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  background: var(--vp-ink);
  border: 3px solid #fff;
  padding: var(--vp-panel-pad);
  transform: rotate(-0.7deg);
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
}

.vp-sticker {
  display: inline-block;
  background: #fff;
  color: var(--vp-ink);
  font-size: var(--vp-sticker-size);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  padding: 8px 16px 9px;
  transform: rotate(-2.4deg);
  box-shadow: 0 0 0 3px var(--vp-ink), 0 8px 18px rgba(0,0,0,.55);
}
.vp-sticker-brief { position: absolute; top: -24px; left: -14px; z-index: 2; }

.vp-brief-nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 10px;
  padding-right: 4px;
}
.vp-navbtn {
  appearance: none; cursor: pointer;
  border: 2px solid #fff; background: transparent; color: #fff;
  font-family: inherit; font-weight: 800; font-size: 11px; line-height: 1;
  padding: 6px 10px;
  transform: skewX(-9deg);
  transition: background .16s ease, color .16s ease;
}
.vp-navbtn:hover { background: #fff; color: var(--vp-ink); }
/* Sized to sit where the ◀ / ▶ glyphs did, and skewed back so the triangle
 * reads straight inside the button's own skewX(-9deg). */
.vp-caret {
  display: block;
  width: 9px; height: 11px;
  fill: currentColor;
  transform: skewX(9deg);
}
.vp-brief-counter { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #8d8683; }
.vp-dots { display: flex; gap: 4px; margin-left: 4px; }
.vp-dots button {
  width: 17px; height: 5px; border: 0; padding: 0; cursor: pointer;
  transform: skewX(-22deg);
  background: #4a4341;
  transition: background .3s ease;
}
.vp-dots button[aria-current="true"] { background: var(--vp-red); }

.vp-brief-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.vp-empty-title { margin: 0; font-size: 15px; font-weight: 800; font-style: italic; text-transform: uppercase; }
.vp-empty-sub { margin: 0; font-size: 12px; color: #9b9490; }

.vp-brief-loading { align-items: stretch; justify-content: flex-start; gap: 9px; }
.vp-skel { animation: vpBreathe 1.3s ease-in-out infinite; }
.vp-skel-1 { height: 17px; width: 72%; background: #2a2224; }
.vp-skel-2 { height: 11px; width: 96%; background: #1e1819; }
.vp-skel-3 { height: 11px; width: 86%; background: #1e1819; }

.vp-brief-live {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--vp-field-gap);
  animation: vpFade .3s ease-out;
}
.vp-brief-head {
  margin: 0; flex: 0 0 auto;
  line-height: 1.18;
  max-height: var(--vp-head-max);
  overflow: hidden;
  letter-spacing: -0.035em;
  font-weight: 800;
  font-style: italic;
  text-wrap: pretty;
  font-size: var(--vp-brief-size);
}
.vp-brief-field {
  margin: 0; flex: 0 0 auto;
  font-size: 12.5px; line-height: 1.45;
  max-height: var(--vp-field-max);
  overflow: hidden;
  color: #ddd6d3;
}
.vp-brief-label { font-weight: 800; color: var(--vp-red2); }

/* ------------------------------------------------------------ brand strip */

.vp-brand {
  background: #fff;
  color: var(--vp-ink);
  padding: var(--vp-panel-pad);
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  transform: rotate(0.6deg);
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
}
.vp-brand-copy { flex: 1 1 240px; min-width: 0; }
.vp-brand-tag {
  display: inline-block;
  background: var(--vp-ink); color: #fff;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px;
  transform: rotate(-1.4deg);
  margin-bottom: 7px;
}
.vp-brand-text {
  margin: 0;
  font-size: 13px; line-height: 1.4; font-weight: 700;
  color: #1a1516; text-wrap: pretty;
}
.vp-brand-btn {
  flex: 0 0 auto;
  appearance: none; cursor: pointer;
  background: var(--vp-ink); border: 0; color: #fff;
  font-family: inherit; font-weight: 800; font-style: italic;
  font-size: 12px; text-transform: uppercase;
  padding: 10px 17px;
  transform: rotate(-1.2deg);
  transition: background .16s ease, transform .16s ease;
}
.vp-brand-btn:hover {
  background: var(--vp-red);
  transform: rotate(-1.2deg) translateY(-2px) scale(1.03);
}

/* --------------------------------------------------------- trending rows */

.vp-right { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); }
.vp-right > .vp-sticker-row { display: none; } /* placed inside .vp-rows wrapper below */

.vp-right { display: flex; flex-direction: column; min-height: 0; }
.vp-sticker-row {
  display: flex !important;
  flex: 0 0 auto;
  height: 0;
  margin-top: -17px;
  margin-bottom: 30px;
  align-items: flex-start;
  position: relative;
  z-index: 5;
}

.vp-rows {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--vp-row-gap);
  padding: 6px 6px 7px;
}
.vp-rows-open {
  flex: 3 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--vp-row-gap);
}

/* One row = white "frame" (outer) clipped torn, holding an ink plate (inner). */
.vp-row {
  min-height: 30px;
  width: auto;
  align-self: center;
  background: #fff;
  animation: vpSlam .36s ease-out both;
  transition: transform .16s ease;
}
.vp-row-open { cursor: pointer; }
.vp-row-plate {
  display: flex;
  align-items: center;
  height: 100%;
  background: var(--vp-ink);
  color: #fff;
  transition: background .16s ease;
}
.vp-row-open:hover .vp-row-plate { background: var(--vp-red); }
.vp-row-label {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vp-row-move { font-size: 11px; font-weight: 800; white-space: nowrap; }

.vp-rows-locked {
  min-height: 0;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: 5px 0;
}
.vp-rows-locked-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--vp-row-gap);
}
.vp-rows-locked .vp-row-label { user-select: none; }
.vp-locked-cta {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 10px 4px;
}
.vp-locked-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--vp-red);
  color: #fff;
  font-size: 12px; font-weight: 800; font-style: italic;
  text-transform: uppercase;
  padding: 9px 16px;
  transform: rotate(-1.2deg);
  clip-path: polygon(5px 0, 100% 3px, calc(100% - 6px) 100%, 0 calc(100% - 3px));
  box-shadow: 0 0 0 3px var(--vp-ink), 0 8px 20px rgba(0,0,0,.6);
  transition: transform .16s ease;
}
.vp-rows-locked:hover .vp-locked-badge { transform: rotate(-1.2deg) translateY(-3px) scale(1.03); }

/* ----------------------------------------------------------------- footer */

.vp-footer {
  position: relative;
  flex: 0 0 auto;
  background: var(--vp-ink);
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  align-items: center;
  padding: 8px 16px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #8d8683;
}
.vp-footer a { color: #fff; }

/* ------------------------------------------------------------------ modal */

.vp-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(var(--vp-ink-rgb), .84);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: vpFade .16s ease-out;
}
.vp-modal[hidden] { display: none; }
.vp-modal-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: 92dvh;
  overflow: auto;
  background: #fff;
  color: var(--vp-ink);
  padding: 22px;
  border: 3px solid var(--vp-ink);
  animation: vpRise .22s cubic-bezier(.2,.8,.2,1);
  box-shadow: 14px 14px 0 var(--vp-red);
}
/* Corner close. Skewed like the rest of the furniture; the padding-right on the
 * titles below keeps a long headline from running underneath it. */
.vp-x {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 1;
  appearance: none; cursor: pointer;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border: 2px solid #d8d2ce;
  background: #fff;
  color: var(--vp-ink);
  transform: skewX(-8deg);
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.vp-x svg { width: 12px; height: 12px; transform: skewX(8deg); }
.vp-x:hover { background: var(--vp-red); border-color: var(--vp-red); color: #fff; }

.vp-modal-title {
  margin: 0 0 5px;
  padding-right: 34px;
  font-size: 25px; font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: -0.04em; line-height: .94;
}
.vp-required { color: var(--vp-red); }
.vp-modal-title-sm { font-size: 23px; letter-spacing: -0.035em; line-height: .98; margin-bottom: 8px; }
.vp-modal-sub { margin: 0 0 18px; font-size: 12.5px; line-height: 1.4; color: #8d8683; }
.vp-success-lead { margin: 0 0 5px; font-size: 13.5px; line-height: 1.45; color: #3d3835; }
.vp-success-sub { margin: 0 0 18px; font-size: 12px; color: #8d8683; }

.vp-label {
  display: block;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 6px;
}
.vp-label-gap { margin-top: 14px; margin-bottom: 8px; }
.vp-optional { color: #b3aca8; }

.vp-input {
  width: 100%;
  padding: 11px 12px;
  font-family: inherit;
  font-size: 15px;
  outline: none;
  margin-bottom: 5px;
  border-radius: 0;
  border: 2px solid #d8d2ce;
  color: var(--vp-ink);
  background: #fff;
}
.vp-input:focus { border-color: var(--vp-ink); }
.vp-input.is-error { border-color: var(--vp-red); }
.vp-input-last { margin-bottom: 18px; }

.vp-error { margin: 0 0 5px; font-size: 11.5px; font-weight: 700; color: var(--vp-red); }

.vp-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 5px; }
.vp-role {
  appearance: none; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 800;
  padding: 8px 12px;
  transform: skewX(-8deg);
  transition: background .14s ease, color .14s ease;
  border: 2px solid #d8d2ce;
  background: #fff;
  color: #3d3835;
}
.vp-role[aria-pressed="true"] { border-color: var(--vp-ink); background: var(--vp-ink); color: #fff; }

.vp-submit {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  appearance: none; border: 0;
  background: var(--vp-red); color: #fff;
  font-family: inherit; font-weight: 800; font-style: italic;
  font-size: 14px; text-transform: uppercase;
  padding: 13px;
  cursor: pointer;
}
.vp-submit[disabled] { opacity: .7; cursor: default; }
.vp-spinner {
  width: 13px; height: 13px; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: vpSpin .7s linear infinite;
}

.vp-close {
  width: 100%;
  appearance: none;
  border: 2px solid var(--vp-ink);
  background: #fff; color: var(--vp-ink);
  cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: 13px;
  text-transform: uppercase;
  padding: 12px;
  transition: background .16s ease, color .16s ease;
}
.vp-close:hover { background: var(--vp-ink); color: #fff; }

/* ------------------------------------------------------------ breakpoints */

/* The design's `narrow` branch (viewport < 900px): one column, tighter
 * everything. This is what its phoneMode preview renders at 390px. */
@media (max-width: 899px) {
  :root {
    --vp-gap: 10px;
    --vp-pad: 10px 14px;
    --vp-panel-pad: 12px;
    --vp-word-size: 22px;
    --vp-sticker-size: 19px;
    --vp-brief-size: 19px;
    --vp-row-gap: 5px;
    /* 4.4em = 3 lines at this size, which is what the longest mock field
     * actually uses. The desktop 5.8em was a CEILING that cost nothing while
     * the panel was content-sized; once the space below is reserved
     * unconditionally it is 35px taken straight off the trending list, which
     * squeezed the rows into each other. Matches the design's own `short`
     * value, so narrow and short now agree. */
    --vp-field-max: 4.4em;
  }
  /* One column is the only structural change the design makes here. Every
   * other rule stays as-is on purpose: the brief still takes the slack row
   * (`minmax(--vp-brief-min, 1fr)`) and the brand strip still sizes to its
   * content, so the column keeps the same proportions it has on desktop. An
   * earlier version relaxed those to `auto auto` and the stretched brand card
   * grew a 170px void and pushed the trending list off the viewport. */
  /* Stacked, give the slack to the trending list instead of the brief. On
   * desktop the brief holds a `1fr` row and absorbing spare height is exactly
   * right — there is nothing else to give it to. Stacked, that same rule let a
   * 283px brief sit above a list too short to seat its own rows. Now both
   * left-column panels are content-sized (and the brief's content height is
   * fixed by the rules below, which is what makes `auto` safe here — it was
   * NOT safe while the brief was content-driven: that combination is what grew
   * a 170px void in the brand strip once before). */
  .vp-main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .vp-left { grid-template-rows: auto auto; align-content: start; }

  /* Stacked, the brief panel is sized by its own content, so rotating to a
   * longer headline grew it and shoved the brand strip and the whole trending
   * list down the page every 6 seconds. (Measured: 334 / 353 / 334px at 390w,
   * 264 / 273 / 292px at 360w. Two columns don't have this problem — there the
   * brief takes a `1fr` row and is already pinned.)
   *
   * The fix reserves the space the design ALREADY permits rather than inventing
   * a height: `max-height` becomes `height` on the three text blocks, so each
   * one always occupies the box it was allowed to grow into. The panel's
   * content height stops depending on which brief is showing, which is what
   * the row below it is measured against. Clipping is unchanged — anything
   * that overflowed these boxes was being cut before this too. */
  .vp-brief-head { height: var(--vp-head-max); }
  .vp-brief-field { height: var(--vp-field-max); }
  /* The strip's 240px copy basis no longer fits beside the button at this
   * width, so the flex line wraps on its own — no direction change needed. */
}

/* The design's `short` branch (viewport height < 680px). */
@media (max-height: 679px) {
  :root {
    --vp-brief-size: 22px;
    --vp-brief-min: 178px;
    --vp-field-gap: 5px;
    --vp-field-max: 4.4em;
  }
}
@media (max-width: 899px) and (max-height: 679px) {
  :root { --vp-brief-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------- animations */

@keyframes vpPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .12; transform: scale(.55); } }
@keyframes vpFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vpRise { from { opacity: 0; transform: translateY(18px) rotate(-1.5deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes vpSpin { to { transform: rotate(360deg); } }
@keyframes vpBreathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes vpSlam { from { opacity: 0; transform: translateX(-26px) skewX(-10deg); } to { opacity: 1; } }