/* ============ Base & Utilities ============ */
* { -webkit-tap-highlight-color: transparent; }

.safe-b { padding-bottom: max(env(safe-area-inset-bottom), 0px); }
.sticky-cta { box-shadow: 0 -6px 20px rgba(15,23,42,.08); }

ul.list { margin-left: 1rem; }
ul.list > li { margin: .4rem 0; }

.row {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .625rem .75rem;
  border-radius: .75rem;
}
.key { font-size: .7rem; color: #64748b; line-height: 1; }
.val { font-weight: 600; user-select: text; }

/* ============ Tokens / Gradients ============ */
:root{
  --blue-from:#2563eb; /* blue-600 */
  --blue-via:#3b82f6;  /* blue-500 */
  --blue-to:#38bdf8;   /* sky-400 */
  --emerald-from:#059669; /* emerald-600 */
  --emerald-via:#10b981;  /* emerald-500 */
  --emerald-to:#34d399;   /* emerald-400 */
  --ring:2px;
  --blue-ring:rgba(59,130,246,.45);
}

/* ============ Buttons ============ */
.btn-primary{
  --tw-shadow:0 6px 20px -6px rgba(59,130,246,.35);
  background-image:linear-gradient(90deg,var(--blue-from),var(--blue-via),var(--blue-to));
  color:#fff; font-weight:600; border-radius:.75rem;
  transition:transform .12s ease,filter .2s ease,box-shadow .2s ease,opacity .2s ease;
  box-shadow:var(--tw-shadow);
}
.btn-primary:hover{ filter:saturate(1.06) brightness(1.02); }
.btn-primary:active{ transform:scale(.985); }
.btn-primary:focus-visible{ outline:none; box-shadow:0 0 0 var(--ring) var(--blue-ring), var(--tw-shadow); }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; }

.btn-ghost-blue{
  background:linear-gradient(0deg,rgba(59,130,246,.10),rgba(59,130,246,.10));
  color:#1d4ed8; border-radius:9999px;
  transition:background .15s ease, transform .12s ease, box-shadow .2s ease;
}
.btn-ghost-blue:hover{ background:linear-gradient(0deg,rgba(59,130,246,.18),rgba(59,130,246,.18)); }
.btn-ghost-blue:active{ transform:scale(.97); }
.btn-ghost-blue:focus-visible{ outline:none; box-shadow:0 0 0 var(--ring) var(--blue-ring); }

/* ============ Chips ============ */
.chip-blue{
  background-image:linear-gradient(90deg,var(--blue-from),var(--blue-via),var(--blue-to));
  color:#fff; border-radius:9999px; padding:.25rem .5rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.375rem;
  box-shadow:0 4px 14px -6px rgba(59,130,246,.45);
  font-size:.7rem;
}
.chip-emerald{
  background-image:linear-gradient(90deg,var(--emerald-from),var(--emerald-via),var(--emerald-to));
  color:#fff; border-radius:9999px; padding:.25rem .5rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.375rem;
  box-shadow:0 4px 14px -6px rgba(16,185,129,.45);
  font-size:.7rem;
}

/* Checkbox accent */
.accent-blue { accent-color:#3b82f6; }

/* ========================================= */
/*           IKLAN: Tanpa Card, Gutter       */
/* ========================================= */

/* Jarak vertikal default; saat filled ditambah oleh JS (class .is-filled) */
.ad-manual { margin: 8px 0; width: 100%; }
.ad-manual.is-filled { margin: 14px 0; }
.ad-manual.is-unfilled { margin: 0; }

/* Gutter adaptif di ponsel + hormati safe area (iPhone notch) */
.ad-gutter{
  box-sizing: border-box;
  padding-left:  max(clamp(12px, 4vw, 20px), env(safe-area-inset-left));
  padding-right: max(clamp(12px, 4vw, 20px), env(safe-area-inset-right));
}

/* Di layar >=640px, biarkan mengikuti container (px-4 Tailwind sudah cukup) */
@media (min-width: 640px){
  .ad-gutter{ padding-left: 0; padding-right: 0; }
}

/* Pastikan <ins> mengisi lebar wrapper dan tidak overflow */
.ad-manual > .adsbygoogle{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}