/* ═══════════════════════════════════════════════════════════════
   siapnikah.id — Main CSS
   Brand: Hijau #2D6A4F | CTA Oranye #E76F51 | Krem #F8F4E3
   Font: Plus Jakarta Sans (heading), Inter (body)
═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@600;700&display=swap');

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --sn-green-dark:   #2D6A4F;
  --sn-green-light:  #95D5B2;
  --sn-cream:        #F8F4E3;
  --sn-orange:       #E76F51;
  --sn-navy:         #1B1B2F;
  --sn-white:        #ffffff;
  --sn-gray-100:     #f5f5f5;
  --sn-gray-300:     #d1d5db;
  --sn-gray-500:     #6b7280;
  --sn-gray-700:     #374151;
  --sn-error:        #dc2626;
  --sn-success:      #16a34a;

  --sn-radius-sm:    6px;
  --sn-radius-md:    12px;
  --sn-radius-lg:    20px;
  --sn-shadow:       0 2px 12px rgba(0,0,0,.08);
  --sn-shadow-md:    0 4px 24px rgba(0,0,0,.12);

  --sn-font-heading: 'Plus Jakarta Sans', sans-serif;
  --sn-font-body:    'Inter', sans-serif;
}

/* ── Base ──────────────────────────────────────────────────── */
.sn-auth-wrap,
.sn-dashboard,
.sn-profile,
.sn-edit-profile {
  font-family: var(--sn-font-body);
  color: var(--sn-navy);
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* ── Alerts ────────────────────────────────────────────────── */
.sn-alert {
  padding: 12px 16px;
  border-radius: var(--sn-radius-sm);
  margin-bottom: 20px;
  font-size: .9rem;
  line-height: 1.5;
}
.sn-alert--success {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
}
.sn-alert--error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

/* ── Forms ─────────────────────────────────────────────────── */
.sn-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sn-form__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sn-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 480px) {
  .sn-form__row { grid-template-columns: 1fr; }
}
.sn-form__label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--sn-gray-700);
}
.sn-required { color: var(--sn-error); }
.sn-form__input,
.sn-form__select,
.sn-form__textarea {
  padding: 10px 14px;
  border: 1.5px solid var(--sn-gray-300);
  border-radius: var(--sn-radius-sm);
  font-family: var(--sn-font-body);
  font-size: .9rem;
  color: var(--sn-navy);
  background: var(--sn-white);
  transition: border-color .2s;
  width: 100%;
  box-sizing: border-box;
}
.sn-form__input:focus,
.sn-form__select:focus,
.sn-form__textarea:focus {
  outline: none;
  border-color: var(--sn-green-dark);
  box-shadow: 0 0 0 3px rgba(45,106,79,.1);
}
.sn-form__textarea { resize: vertical; min-height: 100px; }
.sn-form__hint { font-size: .78rem; color: var(--sn-gray-500); }
.sn-form__input-wrap { position: relative; }
.sn-toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 1rem;
}
.sn-form__group--inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.sn-form__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Radio & Checkbox ──────────────────────────────────────── */
.sn-radio-group { display: flex; gap: 16px; }
.sn-radio, .sn-form__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: .9rem;
}

/* ── Buttons ────────────────────────────────────────────────── */
.sn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--sn-radius-sm);
  font-family: var(--sn-font-body);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  transition: all .2s;
  white-space: nowrap;
}
.sn-btn--primary {
  background: var(--sn-green-dark);
  color: var(--sn-white);
  border-color: var(--sn-green-dark);
}
.sn-btn--primary:hover {
  background: #245840;
  border-color: #245840;
  color: var(--sn-white);
}
.sn-btn--accent {
  background: var(--sn-orange);
  color: var(--sn-white);
  border-color: var(--sn-orange);
}
.sn-btn--accent:hover { background: #d4603e; border-color: #d4603e; color: var(--sn-white); }
.sn-btn--outline {
  background: transparent;
  color: var(--sn-green-dark);
  border-color: var(--sn-green-dark);
}
.sn-btn--outline:hover { background: var(--sn-green-dark); color: var(--sn-white); }
.sn-btn--danger {
  background: var(--sn-error);
  color: var(--sn-white);
  border-color: var(--sn-error);
}
.sn-btn--danger-ghost {
  background: transparent;
  color: var(--sn-error);
  border-color: var(--sn-error);
  font-size: .8rem;
  padding: 6px 12px;
}
.sn-btn--full { width: 100%; }
.sn-btn--sm { padding: 6px 14px; font-size: .8rem; }

/* ── Auth wrap ──────────────────────────────────────────────── */
.sn-auth-wrap {
  max-width: 440px;
  background: var(--sn-white);
  border-radius: var(--sn-radius-md);
  box-shadow: var(--sn-shadow);
  padding: 36px 32px;
}
.sn-auth-switch {
  text-align: center;
  font-size: .85rem;
  color: var(--sn-gray-500);
  margin-top: 8px;
}
.sn-link { color: var(--sn-green-dark); text-decoration: underline; }
.sn-link--muted { color: var(--sn-gray-500); font-size: .85rem; }

/* ── Dashboard ──────────────────────────────────────────────── */
.sn-dashboard__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: var(--sn-cream);
  border-radius: var(--sn-radius-md);
  margin-bottom: 24px;
}
.sn-dashboard__name {
  font-family: var(--sn-font-heading);
  font-size: 1.3rem;
  margin: 0 0 6px;
}
.sn-dashboard__status { margin: 0; display: flex; align-items: center; gap: 8px; }
.sn-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
@media (min-width: 480px) {
  .sn-dashboard__grid { grid-template-columns: repeat(4, 1fr); }
}
.sn-card--action, .sn-card--locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px;
  background: var(--sn-white);
  border: 1.5px solid var(--sn-gray-300);
  border-radius: var(--sn-radius-md);
  text-decoration: none;
  color: var(--sn-navy);
  font-size: .85rem;
  font-weight: 600;
  transition: all .2s;
  cursor: pointer;
}
.sn-card--action:hover {
  border-color: var(--sn-green-dark);
  color: var(--sn-green-dark);
  box-shadow: var(--sn-shadow);
}
.sn-card--locked { opacity: .6; cursor: not-allowed; }
.sn-card__icon { font-size: 1.5rem; }
.sn-lock { font-size: .75rem; }
.sn-dashboard__completion {
  background: var(--sn-gray-100);
  padding: 16px;
  border-radius: var(--sn-radius-sm);
  margin-bottom: 20px;
}
.sn-progress {
  height: 8px;
  background: var(--sn-gray-300);
  border-radius: 99px;
  overflow: hidden;
  margin: 8px 0;
}
.sn-progress__bar {
  height: 100%;
  background: var(--sn-green-dark);
  border-radius: 99px;
  transition: width .5s ease;
}
.sn-hint { font-size: .8rem; color: var(--sn-gray-500); margin: 4px 0 0; }
.sn-dashboard__footer { margin-top: 24px; text-align: center; }

/* ── Avatar ─────────────────────────────────────────────────── */
.sn-avatar {
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--sn-green-light);
}
.sn-avatar--lg { width: 72px; height: 72px; }
.sn-avatar--xl { width: 100px; height: 100px; }

/* ── Badges ─────────────────────────────────────────────────── */
.sn-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 600;
}
.sn-badge--verified { background: #d1fae5; color: #065f46; }
.sn-badge--paid     { background: #fef3c7; color: #92400e; }
.sn-badge--free     { background: var(--sn-gray-100); color: var(--sn-gray-500); }

/* ── Profile View ────────────────────────────────────────────── */
.sn-profile__photo-wrap {
  text-align: center;
  margin-bottom: 24px;
  position: relative;
}
.sn-profile__photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--sn-green-light);
}
.sn-photo--blurred { filter: blur(16px); }
.sn-photo-blur-hint {
  font-size: .8rem;
  color: var(--sn-gray-500);
  margin-top: 8px;
}
.sn-profile__name {
  font-family: var(--sn-font-heading);
  font-size: 1.5rem;
  margin: 0 0 8px;
}
.sn-profile__age { font-weight: 400; color: var(--sn-gray-500); }
.sn-profile__location { color: var(--sn-gray-500); margin: 0 0 20px; }
.sn-profile__section { margin: 20px 0; }
.sn-profile__section h3 {
  font-family: var(--sn-font-heading);
  font-size: 1rem;
  color: var(--sn-green-dark);
  margin: 0 0 8px;
}
.sn-profile__details {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
  font-size: .85rem;
}
.sn-profile__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* ── Avatar Upload ───────────────────────────────────────────── */
.sn-avatar-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  border: 2px dashed var(--sn-gray-300);
  border-radius: var(--sn-radius-md);
  margin-bottom: 32px;
}

/* ── Danger Zone ─────────────────────────────────────────────── */
.sn-danger-zone {
  margin-top: 48px;
  padding: 20px;
  border: 1.5px solid #fca5a5;
  border-radius: var(--sn-radius-md);
  background: #fff5f5;
}
.sn-danger-zone h3 { color: var(--sn-error); margin: 0 0 8px; }
.sn-danger-zone p  { font-size: .85rem; color: var(--sn-gray-700); margin: 0 0 16px; }