/* ============================================================
   Bintang Lima — Design System (light, merah)
   Layer: Primitive → Semantic → Component
   ============================================================ */

:root {
  /* ---------- 1. PRIMITIVE (nilai mentah) ---------- */
  --red-50:  #FEF2F2;
  --red-100: #FEE2E2;
  --red-200: #FECACA;
  --red-500: #EF4444;
  --red-600: #DC2626;
  --red-700: #B91C1C;

  --gray-0:   #FFFFFF;
  --gray-50:  #FAFAFA;
  --gray-100: #F4F4F5;
  --gray-200: #E4E4E7;
  --gray-300: #D4D4D8;
  --gray-400: #A1A1AA;
  --gray-500: #71717A;
  --gray-600: #52525B;
  --gray-900: #18181B;

  --green-50:  #F0FDF4;
  --green-600: #16A34A;
  --green-700: #15803D;

  --amber-300: #FCD34D;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;

  /* type & ruang */
  --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-xs: 12px; --text-sm: 13.5px; --text-base: 15px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 22px; --space-6: 28px; --space-8: 40px;
  --radius: 12px; --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(24,24,27,.06);
  --shadow-md: 0 8px 28px rgba(24,24,27,.10);

  /* ---------- 2. SEMANTIC (peran) ---------- */
  --bg: var(--gray-50);
  --surface: var(--gray-0);
  --border: var(--gray-200);
  --text: var(--gray-900);
  --muted: var(--gray-500);

  --primary: var(--red-600);
  --primary-hover: var(--red-700);
  --primary-soft: var(--red-50);
  --on-primary: var(--gray-0);

  --success: var(--green-600);
  --field-bg: var(--gray-0);
  --star-off: var(--gray-300);
  --star-on: var(--amber-400); /* bintang emas — hindari kesan negatif dari merah */

  /* ---------- 3. COMPONENT ---------- */
  --card-bg: var(--surface);
  --card-border: var(--border);
  --input-bg: var(--field-bg);
  --input-border: var(--gray-300);
  --input-focus: var(--primary);
  --button-bg: var(--primary);
  --button-bg-hover: var(--primary-hover);
  --button-fg: var(--on-primary);
  --nav-bg: var(--surface);
  --nav-border: var(--border);
}

* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg); color: var(--text);
  font: var(--text-base)/1.55 var(--font);
  padding: var(--space-6) var(--space-4) var(--space-8);
}

/* ---------- Nav (platform shell — sisi admin) ---------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  max-width: 980px; margin: calc(var(--space-6) * -1) auto var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: var(--nav-bg); border: 1px solid var(--nav-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.nav-brand { font-weight: 800; letter-spacing: -.2px; }
.nav-brand .s { color: var(--star-on); }
.nav-links { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.nav-links a {
  text-decoration: none; color: var(--muted); font-size: var(--text-sm); font-weight: 600;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
}
.nav-links a:hover { color: var(--text); background: var(--gray-100); }
.nav-links a.active { color: var(--primary); background: var(--primary-soft); }

/* ---------- Card ---------- */
.card {
  width: 100%; max-width: 440px; margin: 0 auto;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 18px; padding: var(--space-8) var(--space-6) var(--space-6);
  box-shadow: 0 12px 40px rgba(24,24,27,.09), 0 2px 6px rgba(24,24,27,.05);
  position: relative; overflow: hidden;
}
.card::before { /* aksen identitas merah */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--red-500), var(--red-700));
}
.brand { text-align: center; margin-bottom: var(--space-6); }
.brand .stars { color: var(--star-on); letter-spacing: 5px; font-size: var(--text-base); }
.brand h1 { font-weight: 800; font-size: var(--text-xl); letter-spacing: -.3px; margin: var(--space-2) 0 2px; }
.brand .outlet { color: var(--muted); font-size: var(--text-sm); }

/* ---------- Form fields ---------- */
label { display: block; margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--text); }
input, textarea, select {
  width: 100%; padding: var(--space-3);
  background: var(--input-bg); color: var(--text);
  border: 1px solid var(--input-border); border-radius: var(--radius-sm);
  font: inherit; outline: none; transition: border-color .12s, box-shadow .12s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--input-focus); box-shadow: 0 0 0 3px var(--red-100);
}
textarea { resize: vertical; min-height: 84px; }
input:disabled { background: var(--gray-100); color: var(--muted); cursor: not-allowed; }
.hint { font-size: var(--text-xs); color: var(--muted); margin-top: var(--space-1); }

/* ---------- Rating bintang ---------- */
.stars-input { display: flex; gap: var(--space-2); direction: rtl; justify-content: center; }
.stars-input input { display: none; }
.stars-input label {
  margin: 0; cursor: pointer; font-size: 40px; line-height: 1;
  color: var(--star-off); transition: color .12s, transform .12s, text-shadow .12s;
}
.stars-input label:hover { transform: scale(1.12); }
.stars-input label:hover, .stars-input label:hover ~ label,
.stars-input input:checked ~ label {
  color: var(--star-on); text-shadow: 0 2px 10px rgba(245,158,11,.45);
}
.rating-label {
  text-align: center; margin-top: var(--space-3); min-height: 1.3em;
  font-size: var(--text-sm); font-weight: 700; color: var(--amber-500);
}

/* ---------- Button ---------- */
button {
  width: 100%; margin-top: var(--space-5); padding: var(--space-4);
  background: var(--button-bg); color: var(--button-fg);
  font-weight: 700; font-size: var(--text-base); letter-spacing: .2px;
  border: none; border-radius: var(--radius-sm); cursor: pointer;
  box-shadow: 0 6px 16px rgba(220,38,38,.24);
  transition: background .12s, box-shadow .12s, transform .06s;
}
button:hover { background: var(--button-bg-hover); box-shadow: 0 8px 22px rgba(220,38,38,.30); }
button:active { transform: translateY(1px); box-shadow: 0 3px 10px rgba(220,38,38,.24); }
button:disabled { opacity: .55; cursor: default; }

.consent { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-4); }
.consent input { width: auto; margin-top: 3px; }
.consent label { margin: 0; font-weight: 400; font-size: var(--text-sm); }

/* ---------- Link buttons ---------- */
.wa-btn, .link-btn, .action-btn {
  display: block; text-align: center; text-decoration: none;
  margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); font-weight: 600;
}
.wa-btn { background: var(--green-50); color: var(--green-700); border: 1px solid #BBF7D0; }
.wa-btn:hover { background: #DCFCE7; }
.link-btn { background: var(--surface); color: var(--muted); border: 1px solid var(--border); font-weight: 500; }
.link-btn:hover { color: var(--text); border-color: var(--gray-300); }
.action-btn { background: var(--primary); color: var(--on-primary); border: 1px solid var(--primary); box-shadow: 0 4px 12px rgba(220,38,38,.2); }
.action-btn:hover { background: var(--primary-hover); }

#logout:hover { color: var(--primary); background: var(--primary-soft); }

/* ---------- Thank-you ---------- */
.hidden { display: none; }
.thanks { text-align: center; }
.thanks h2 { font-weight: 800; margin: var(--space-2) 0 var(--space-3); }
.thanks p { color: var(--muted); }
.thanks .promo {
  margin: var(--space-4) 0; padding: var(--space-4);
  border: 1px dashed var(--primary); background: var(--primary-soft);
  border-radius: var(--radius-sm); color: var(--primary-hover); font-weight: 600;
}

.foot { text-align: center; color: var(--gray-400); font-size: var(--text-xs); margin-top: var(--space-6); }