/* ==========================================================================
   Dashboard pengguna Kaffah Pro - gaya tampilan
   Tanpa pustaka luar, tanpa gaya sebaris. Warna diambil dari tema aplikasi:
   hijau 0F766E / 0B4F4A, emas D4AF37, krem F8F6F2 dan FFFDF9.
   ========================================================================== */

:root {
  --hijau: #0F766E;
  --hijau-soft: #2D8C7F;
  --hijau-tua: #0B4F4A;
  --emas: #D4AF37;
  --emas-muda: #F3E3AE;
  --latar: #F8F6F2;
  --kartu: #FFFDF9;
  --krem: #F4EFE7;
  --tinta: #2E2A26;
  --redup: #6F675F;
  --redup-soft: #9A9188;
  --garis: #E6E0D4;
  --bahaya: #D64545;
  --baik: #1B7F4B;
  --bayang: 0 10px 30px rgba(46, 42, 38, 0.08);
  --radius: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--latar);
  color: var(--tinta);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, p { margin: 0; }
a { color: var(--hijau); }
button { font: inherit; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid rgba(15, 118, 110, 0.35);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- pesan */
.pesan {
  position: fixed;
  z-index: 60;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--hijau-tua);
  color: #fff;
  font-size: 0.92rem;
  box-shadow: var(--bayang);
}
.pesan--galat { background: var(--bahaya); }

/* ---------------------------------------------------------------- merek */
.merek {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.merek__logo {
  width: clamp(46px, 4.6vw, 58px);
  height: clamp(46px, 4.6vw, 58px);
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 3px 7px rgba(15, 118, 110, 0.28));
}
.merek__teks {
  font-weight: 900;
  font-size: clamp(1.7rem, 2.6vw, 2.15rem);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
  background: linear-gradient(90deg, #1e63d6 0%, #1e63d6 18%, #d64545 34%, #d64545 58%, #1b7f4b 74%, #1b7f4b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.merek--kecil .merek__logo { width: clamp(40px, 3.4vw, 48px); height: clamp(40px, 3.4vw, 48px); }
.merek--kecil .merek__teks { font-size: clamp(1.35rem, 2.1vw, 1.6rem); letter-spacing: 0.5px; }

/* ---------------------------------------------------------------- masuk */
.masuk {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
.masuk__kiri {
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(212, 175, 55, 0.18), transparent 60%),
    linear-gradient(150deg, var(--hijau-tua), var(--hijau) 55%, #164a63);
  color: #f6fbf9;
  padding: clamp(28px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.masuk__kiri .merek__teks small { color: rgba(255, 255, 255, 0.7); }
.masuk__judul {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.25;
  max-width: 24ch;
}
.masuk__ket {
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.86);
}
.masuk__daftar {
  margin: 6px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
}
.masuk__kaki {
  margin-top: 18px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.66);
}
.masuk__kanan {
  display: grid;
  place-items: center;
  padding: clamp(20px, 4vw, 48px);
  background: var(--latar);
}
.kartu-masuk {
  width: min(440px, 100%);
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: 22px;
  padding: clamp(22px, 3vw, 32px);
  box-shadow: var(--bayang);
  display: grid;
  gap: 14px;
}
.kartu-masuk h2 { font-size: 1.35rem; }
#reset-langkah2 { display: grid; gap: 14px; }
.bantuan { color: var(--redup); font-size: 0.92rem; }
.tautan-kecil { color: var(--redup); font-size: 0.88rem; }
.tautan {
  border: 0;
  background: none;
  color: var(--hijau);
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- medan */
.medan {
  display: grid;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--redup);
}
.medan input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--garis);
  border-radius: 12px;
  background: #fff;
  color: var(--tinta);
  font-size: 1rem;
}
.medan input:focus {
  border-color: var(--hijau);
  outline: 3px solid rgba(15, 118, 110, 0.15);
}
.medan__sandi { position: relative; display: block; }
.medan__sandi input { padding-right: 72px; }
.tombol-lihat {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: var(--krem);
  color: var(--hijau-tua);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.8rem;
  cursor: pointer;
}
.galat { color: var(--bahaya); font-size: 0.9rem; }

/* ---------------------------------------------------------------- tombol */
.tombol {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 11px 16px;
  cursor: pointer;
  background: var(--krem);
  color: var(--tinta);
  font-weight: 600;
}
.tombol:hover { filter: brightness(0.98); }
.tombol--utama {
  background: linear-gradient(135deg, var(--hijau), var(--hijau-tua));
  color: #fff;
}
.tombol--halus {
  background: transparent;
  border-color: var(--garis);
  color: var(--tinta);
}
.tombol--penuh { width: 100%; }
.tombol:disabled { opacity: 0.6; cursor: default; }
.tombol-ikon {
  position: relative;
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 11px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.95) 0 22%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(165deg, #ffffff 0%, #f6f1e7 55%, #e9e0cf 100%);
  color: var(--hijau-tua);
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 -1px 0 rgba(120, 100, 70, 0.12) inset,
    0 3px 7px rgba(46, 42, 38, 0.14),
    0 1px 2px rgba(46, 42, 38, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tombol-ikon::after {
  content: "";
  position: absolute;
  inset: 1px 1px 52% 1px;
  border-radius: 9px 9px 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.tombol-ikon > * { position: relative; z-index: 1; }
.tombol-ikon:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 -1px 0 rgba(120, 100, 70, 0.12) inset,
    0 5px 11px rgba(46, 42, 38, 0.18),
    0 1px 2px rgba(46, 42, 38, 0.08);
}
.tombol-ikon:active {
  transform: translateY(0);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 1px 2px rgba(0, 0, 0, 0.16) inset;
}
.tombol-ikon__svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- akun */
.akun { min-height: 100vh; }
.kepala {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 clamp(12px, 2.4vw, 24px);
  background: rgba(255, 253, 249, 0.94);
  border-bottom: 1px solid var(--garis);
  backdrop-filter: blur(8px);
}
#buka-menu { display: none; }
#buka-menu .menu-ikon-modern {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 3px 3px;
  gap: 4px 5px;
  align-items: center;
  width: 20px;
}
#buka-menu .menu-ikon-modern__bar {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0b5b55, #2fa79b);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
  transition: transform 0.24s ease, width 0.24s ease, opacity 0.18s ease;
  transform-origin: center;
}
#buka-menu .menu-ikon-modern__bar--atas {
  grid-column: 1;
  grid-row: 1;
  width: 16px;
  justify-self: start;
}
#buka-menu .menu-ikon-modern__bar--bawah {
  grid-column: 1;
  grid-row: 2;
  width: 11px;
  justify-self: start;
}
#buka-menu .menu-ikon-modern__dot {
  grid-column: 2;
  grid-row: 2;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff3c4, #d4af37 55%, #a57d12);
  box-shadow: 0 1px 2px rgba(122, 92, 10, 0.35);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
#buka-menu[aria-expanded="true"] .menu-ikon-modern__bar--atas {
  width: 18px;
  transform: translateY(3.5px) rotate(45deg);
}
#buka-menu[aria-expanded="true"] .menu-ikon-modern__bar--bawah {
  width: 18px;
  transform: translateY(-3.5px) rotate(-45deg);
}
#buka-menu[aria-expanded="true"] .menu-ikon-modern__dot {
  opacity: 0;
  transform: scale(0.4);
}
.kepala__kanan {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.merek--kecil {
  min-width: 0;
  flex: 0 1 auto;
}
.merek--kecil .merek__teks {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tata {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  align-items: start;
  min-width: 0;
}
.sisi {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow: auto;
  border-right: 1px solid var(--garis);
  background: linear-gradient(180deg, #fffdf9, #faf7f1);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sisi__identitas {
  display: grid;
  gap: 2px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--garis);
}
.sisi__label {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--redup-soft);
}
.sisi__nama {
  margin: 2px 0 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tinta);
  overflow-wrap: anywhere;
}
.sisi__email {
  margin: 0;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--redup-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu { display: grid; gap: 6px; }
.menu__grup { display: grid; gap: 4px; margin-bottom: 10px; }
.menu__judul {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--redup-soft);
  padding: 6px 10px;
}
.menu__tautan {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  color: var(--tinta);
  text-decoration: none;
  font-size: 0.94rem;
  border: 1px solid transparent;
}
.menu__tautan:hover { background: var(--krem); }
.menu__tautan--aktif {
  background: rgba(15, 118, 110, 0.1);
  border-color: rgba(15, 118, 110, 0.18);
  color: var(--hijau-tua);
  font-weight: 700;
}
.menu__ikon {
  width: 34px;
  height: 34px;
  flex: none;
  padding: 8px;
  border-radius: 11px;
  color: #ffffff;
  background-color: #0f766e;
  background-image:
    radial-gradient(circle at 30% 16%, rgba(255, 255, 255, 0.7) 0 20%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, #43b8aa 0%, #128577 48%, #0a5b55 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 -2px 3px rgba(0, 0, 0, 0.22) inset,
    0 4px 8px rgba(10, 91, 85, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.menu__tautan:hover .menu__ikon {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 -2px 3px rgba(0, 0, 0, 0.2) inset,
    0 6px 12px rgba(10, 91, 85, 0.34),
    0 1px 2px rgba(0, 0, 0, 0.12);
}
.menu__tautan--aktif .menu__ikon {
  color: #58430a;
  background-image:
    radial-gradient(circle at 30% 16%, rgba(255, 255, 255, 0.9) 0 20%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, #ffeaa8 0%, #e3ba52 48%, #c49a2c 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 -2px 3px rgba(122, 92, 10, 0.28) inset,
    0 4px 9px rgba(160, 122, 20, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.12);
}
.menu__ket {
  display: block;
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--redup);
}
.menu__teks { display: grid; }
.sisi__kaki { margin-top: auto; display: grid; gap: 10px; }
.sisi__versi { font-size: 0.74rem; color: var(--redup-soft); }

.isi {
  padding: clamp(18px, 3vw, 34px);
  max-width: 1180px;
  width: 100%;
  min-width: 0;
}
.halaman { min-width: 0; }
.isi__kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.isi__judul { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.isi__ket { color: var(--redup); font-size: 0.94rem; }
.isi__alat { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- kartu */
.kartu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.kartu {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: grid;
  gap: 4px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.kartu__label {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--redup-soft);
}
.kartu__nilai {
  font-size: 1.2rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.kartu__ket { font-size: 0.85rem; color: var(--redup); }
.kartu__tautan {
  margin-top: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--hijau);
}
.kartu--emas { border-color: var(--emas-muda); background: linear-gradient(180deg, #fffdf6, #fff9ea); }

.bagian { margin-bottom: 26px; }
.bagian__judul {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.02rem;
  margin-bottom: 10px;
}
.panel {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  padding: 16px 18px;
  min-width: 0;
}
.panel--peringatan {
  border-color: #f0d38f;
  background: #fffaf0;
}
.panel--kosong { color: var(--redup); }
.panel p + p { margin-top: 8px; }

/* ------------------------------------------------------- tab dan kartu paket */
.tab-bar {
  display: flex;
  gap: 6px;
  padding: 5px;
  background: #f1ece3;
  border: 1px solid var(--garis);
  border-radius: 14px;
  overflow-x: auto;
  margin-bottom: 18px;
}
.tab {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--redup);
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { background: rgba(255, 255, 255, 0.6); }
.tab--aktif {
  background: #fff;
  color: var(--hijau-tua);
  box-shadow: 0 2px 10px rgba(46, 42, 38, 0.08);
}
.tab__jumlah {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.12);
  color: var(--hijau-tua);
  font-size: 0.76rem;
}
.tab--aktif .tab__jumlah { background: var(--hijau); color: #fff; }
.tab-bar--sub {
  width: fit-content;
  max-width: 100%;
  margin: -4px 0 14px;
  padding: 4px;
  background: #f8f4ec;
  border-radius: 12px;
}
.tab--sub {
  flex: 0 0 auto;
  padding: 7px 16px;
  font-size: 0.84rem;
}
.tab-isi { margin-bottom: 20px; }
.paket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px;
}
.paket-kartu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: 18px;
  padding: 20px;
  min-width: 0;
}
.paket-kartu--aktif {
  border-color: var(--emas);
  box-shadow: 0 10px 26px rgba(212, 175, 55, 0.16);
}
.paket-kartu__atas {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.paket-kartu__nama { font-size: 1.15rem; line-height: 1.3; }
.paket-kartu__harga {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--hijau-tua);
  line-height: 1.2;
}
.paket-kartu__periode { font-size: 0.86rem; color: var(--redup); }
.paket-kartu__harga-normal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}
.paket-kartu__label-normal {
  font-size: 0.8rem;
  color: var(--redup);
}
.paket-kartu__coret {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--redup);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.paket-kartu__baris-hemat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.paket-kartu__perbulan { font-size: 0.8rem; color: var(--redup); }
.paket-kartu__ket { font-size: 0.9rem; color: var(--redup); }
.paket-fitur {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
  font-size: 0.88rem;
}
.paket-fitur li { display: flex; gap: 8px; align-items: flex-start; }
.paket-fitur li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hijau);
  margin-top: 7px;
  flex: none;
}
.paket-kartu__kaki { margin-top: auto; padding-top: 12px; display: grid; gap: 8px; }
.variansi { display: grid; gap: 6px; margin-top: 6px; }
.variansi__baris {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--garis);
  border-radius: 10px;
  background: #fcfaf6;
  font-size: 0.9rem;
}
.variansi__harga { font-weight: 700; }
.tirai {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(30, 25, 20, 0.45);
}
.tirai__kartu {
  width: min(440px, 100%);
  background: #fff;
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--bayang);
  display: grid;
  gap: 12px;
}
.tirai__kartu h3 { font-size: 1.1rem; }
.tirai__kartu ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 7px;
  color: var(--redup);
  font-size: 0.92rem;
}

/* ---------------------------------------------------------------- lencana */
.lencana {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
.lencana--netral { background: var(--krem); color: var(--redup); border-color: var(--garis); }
.lencana--aktif { background: rgba(27, 127, 75, 0.12); color: var(--baik); border-color: rgba(27, 127, 75, 0.25); }
.lencana--emas { background: rgba(212, 175, 55, 0.18); color: #7a5c0a; border-color: rgba(212, 175, 55, 0.4); }
.lencana--bahaya { background: rgba(214, 69, 69, 0.12); color: var(--bahaya); border-color: rgba(214, 69, 69, 0.28); }

/* ---------------------------------------------------------------- tabel */
.tabel-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--garis); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 560px; }
th, td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--garis); vertical-align: top; }
th { font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--redup-soft); background: #fbf8f2; }
tr:last-child td { border-bottom: 0; }
td strong { display: block; }
td small { color: var(--redup); }

.daftar { display: grid; gap: 10px; }
.baris {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--garis);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}
a.baris:hover { background: #fdfbf7; border-color: #d9d1c2; }
.baris__utama { display: grid; gap: 2px; min-width: 0; }
.baris__judul { font-weight: 700; }
.baris__ket { font-size: 0.84rem; color: var(--redup); }
.baris__kanan { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- keadaan */
.memuat, .kosong, .galat-kotak {
  padding: 18px;
  border-radius: 12px;
  border: 1px dashed var(--garis);
  color: var(--redup);
  background: #fdfbf7;
}
.galat-kotak { border-color: rgba(214, 69, 69, 0.35); color: var(--bahaya); background: #fff7f7; }
.petunjuk { font-size: 0.86rem; color: var(--redup); }
.daftar-sederhana { margin: 8px 0 0; padding-left: 20px; color: var(--redup); font-size: 0.9rem; }
.form-sandi {
  display: grid;
  gap: 10px;
  max-width: 440px;
  margin-top: 12px;
}
.form-sandi .galat { margin: 0; }
.form-sandi + .tombol { margin-top: 14px; }

/* ---------------------------------------------------------------- perpanjang koin */
.koin-perpanjang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 16px;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--emas-muda);
  background:
    radial-gradient(500px 180px at 0% 0%, rgba(212, 175, 55, 0.18), transparent 60%),
    linear-gradient(160deg, #fffdf5, #fbf2d8);
  box-shadow: 0 6px 18px rgba(160, 122, 20, 0.1);
}
.koin-perpanjang__teks { display: grid; gap: 2px; min-width: 0; }
.koin-perpanjang__judul { font-weight: 800; color: #6d5309; font-size: 1rem; }
.koin-perpanjang__ket { font-size: 0.86rem; color: var(--redup); }
.koin-perpanjang__kurang { font-size: 0.84rem; color: #a16207; font-weight: 600; }
.koin-perpanjang__aksi { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.koin-perpanjang__aksi .tombol { text-decoration: none; text-align: center; }
.koin-perpanjang__status { margin: 0; font-size: 0.8rem; }
.koin-perpanjang__status--ok { color: var(--baik); }
.koin-perpanjang__status--galat { color: var(--bahaya); }
/* ---------------------------------------------------------------- responsif */
@media (max-width: 960px) {
  .masuk { grid-template-columns: 1fr; }
  .masuk__kiri { padding: 28px 22px; }
  .masuk__judul { font-size: 1.5rem; }
  .tata { grid-template-columns: 1fr; }
  #buka-menu { display: inline-grid; }
  .sisi {
    position: fixed;
    top: 64px;
    left: 0;
    bottom: 0;
    width: min(320px, 86vw);
    height: auto;
    z-index: 40;
    box-shadow: 20px 0 40px rgba(0, 0, 0, 0.12);
    transform: translateX(-105%);
    transition: transform 0.18s ease;
  }
  .akun--sisi-terbuka .sisi { transform: translateX(0); }
  .isi { padding: 18px 14px 34px; }
}

@media (max-width: 560px) {
  .kepala { gap: 8px; }
  .merek--kecil .merek__teks small { display: none; }
  .kartu-grid { grid-template-columns: 1fr; }
  .paket-grid { grid-template-columns: 1fr; }
  .tab { flex: 0 0 auto; padding: 9px 13px; }
  .isi__alat { width: 100%; margin-left: 0; }
  .lencana { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .kepala__kanan { gap: 6px; }
  .kepala__kanan .lencana { display: none; }
  .tombol-ikon { width: 36px; height: 36px; border-radius: 10px; }
  .merek--kecil { flex: 1 1 auto; }
  .merek { gap: 9px; }
  .merek--kecil .merek__logo { width: 38px; height: 38px; }
  .merek--kecil .merek__teks { font-size: clamp(1.15rem, 5vw, 1.3rem); letter-spacing: 0.35px; }
  .menu__ikon { width: 32px; height: 32px; padding: 7px; border-radius: 10px; }
}

/* Modal pembelian QRIS */
.tirai { overflow: auto; padding: 16px; }
.tirai__kartu { max-height: 92vh; overflow: auto; }
.tirai__kepala { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tirai__kepala h3 { margin: 0; font-size: 1.05rem; }
.tirai__isi { display: grid; gap: 12px; }
.beli-ringkas { display: grid; gap: 6px; padding: 12px 14px; background: #FCFAF6; border: 1px solid var(--garis); border-radius: 12px; font-size: 0.9rem; }
.beli-ringkas__baris { display: flex; justify-content: space-between; gap: 12px; }
.beli-ringkas__baris strong { text-align: right; }
.qr-gambar { display: block; width: min(280px, 72vw); height: auto; margin: 0 auto; background: #fff; border: 10px solid #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.beli-status { margin: 0; text-align: center; font-size: 0.92rem; color: var(--redup); }
.beli-hitung { margin: 0; text-align: center; font-size: 0.82rem; color: var(--redup-soft); }
.beli-aksi { display: grid; gap: 8px; }
.beli-sukses { display: grid; gap: 8px; text-align: center; padding: 8px 0; }
.beli-sukses h3 { margin: 0; }
.beli-sukses .bantuan { margin: 0; }
.beli-sukses__tanda { width: 56px; height: 56px; line-height: 56px; margin: 0 auto; border-radius: 50%; background: #E7F3F0; color: #0F766E; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.5px; }
.variansi__kanan { display: flex; align-items: center; gap: 10px; }
.tombol--kecil { padding: 6px 12px; font-size: 0.82rem; }
/* ------------------------------------------------------------- afiliasi web */
.form-afiliasi .medan { margin-bottom: 12px; }
.medan select,
.medan textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--garis);
  border-radius: 12px;
  background: #fff;
  color: var(--tinta);
  font-size: 1rem;
  font-family: inherit;
}
.medan select:focus,
.medan textarea:focus {
  border-color: var(--hijau);
  outline: 3px solid rgba(15, 118, 110, 0.15);
}
.medan textarea { resize: vertical; }
.aksi-baris { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.aksi-baris .tombol { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.centang { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9rem; color: var(--tinta); margin: 8px 0; }
.centang input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--hijau); }
.centang-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2px 12px; margin: 8px 0 12px; }
.kode-kotak { background: linear-gradient(180deg, #fffdf6, #fff9ea); border: 1px solid var(--emas-muda); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 6px; margin-bottom: 22px; }
.kode-kotak__label { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--redup-soft); margin: 0; }
.kode-kotak__nilai { font-size: 1.4rem; letter-spacing: 0.06em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.kode-kotak .aksi-baris { margin: 6px 0 0; }
.daftar-akad { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 0.92rem; color: var(--redup); }
@media (max-width: 560px) {
  .tirai { padding: 10px; }
  .tirai__kartu { padding: 14px; gap: 10px; }
  .tirai__isi { gap: 10px; }
  .beli-ringkas { padding: 10px 12px; font-size: 0.86rem; }
  .beli-aksi { gap: 6px; }
  .qr-gambar { width: min(200px, 54vw); border-width: 8px; }
}
.daftar-tagihan { display: grid; gap: 8px; margin-top: 8px; }
.daftar-tagihan__baris { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 10px; background: #fcfaf6; }
.daftar-tagihan__kiri { display: grid; gap: 2px; min-width: 0; }
.daftar-tagihan__kiri strong { font-size: 0.92rem; overflow-wrap: anywhere; }
.daftar-tagihan__kiri .petunjuk { margin: 0; }
.sisi__koin { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sisi__koin-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; border: 1px solid var(--garis); border-radius: 999px; background: #fcfaf6; color: var(--tinta); font-size: 0.78rem; line-height: 1; }
.sisi__koin-gambar { width: 16px; height: 16px; display: block; }
.sisi__koin-nilai { font-weight: 700; }
.sisi__koin-label { color: var(--redup-soft); font-size: 0.72rem; }
.kartu__gambar { width: 38px; height: 38px; display: block; margin-bottom: 6px; filter: drop-shadow(0 2px 3px rgba(46,42,38,0.18)); }
.paket-kartu__judul { display: flex; align-items: center; gap: 8px; min-width: 0; }
.koin-ikon { width: 22px; height: 22px; flex: none; }
@media (max-width: 560px) {
  .kartu__gambar { width: 32px; height: 32px; }
}
.medan__ket { font-size: 0.78rem; color: var(--redup-soft); }
.medan__teks { min-height: 220px; resize: vertical; }
.studio-kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--garis); border-radius: var(--radius); background: linear-gradient(180deg, #fffdf9, #faf7f1); }
.studio-kepala__nama { margin: 0; font-size: 1.15rem; }
.studio-kepala__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.studio-badan { display: grid; gap: 12px; margin-top: 12px; }
.studio-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 6px 0; }
.studio-form .medan--penuh { grid-column: 1 / -1; }
.studio-form__aksi { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.studio-karya { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--garis); border-radius: 12px; background: #fff; }
.studio-karya__atas { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; }
.studio-karya__judul { margin: 0; font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
.studio-karya__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; color: var(--redup); font-size: 0.82rem; }
.studio-karya__aksi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.studio-baris { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.studio-panel { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--garis); border-radius: 12px; background: #fff; }
.studio-teks { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 440px; overflow: auto; padding: 12px; border: 1px solid var(--garis); border-radius: 10px; background: #fcfaf6; font-size: 0.92rem; line-height: 1.65; }
@media (max-width: 700px) {
  .studio-form { grid-template-columns: 1fr; }
}
.bar-laporan { flex-basis: 100%; height: 7px; background: #f1ece3; border-radius: 6px; overflow: hidden; }
.bar-laporan span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--hijau), var(--hijau-tua)); }

/* ------------------------------------------------------------- tukar koin */
.tukar-koin { gap: 10px; }
.tukar-koin .petunjuk { margin: 0; }
.tukar-koin .galat { margin: 0; }

/* ------------------------------------------------------ pilih metode bayar */
.metode-judul { margin: 2px 0 0; font-size: 0.98rem; }
.metode-bayar { display: grid; gap: 8px; }
.metode-opsi {
  display: grid;
  gap: 3px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--garis);
  background: #fff;
  border-radius: 12px;
  padding: 11px 13px;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.metode-opsi--aktif {
  border-color: var(--hijau);
  background: #F0F8F6;
  box-shadow: 0 0 0 1px var(--hijau) inset;
}
.metode-opsi--nonaktif { opacity: 0.55; cursor: not-allowed; }
.metode-opsi__judul { font-size: 0.93rem; font-weight: 700; }
.metode-opsi__ket { font-size: 0.82rem; line-height: 1.35; color: var(--redup); }
.transfer-rekening {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  background: #FCFAF6;
  border: 1px solid var(--garis);
  border-radius: 12px;
}
.transfer-rekening strong { font-size: 0.95rem; }
.transfer-rekening p { margin: 0; font-size: 0.86rem; }
/* Empat kartu ringkasan langganan: satu baris di layar web. */
.kartu-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 899px) {
  .kartu-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ------------------------------------------------ kartu lisensi gaya baru */
.paket-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 290px));
  justify-content: center;
  align-items: stretch;
}
.paket-kartu {
  position: relative;
  gap: 10px;
  padding: 22px 20px 20px;
  border-radius: 20px;
  border: 1px solid #E6E0D6;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF9 100%);
  box-shadow: 0 8px 20px rgba(62, 48, 30, 0.06);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.paket-kartu::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #0F766E, #D4AF37);
  opacity: 0.85;
}
.paket-kartu:hover {
  transform: translateY(-3px);
  border-color: #CFC5B4;
  box-shadow: 0 14px 30px rgba(62, 48, 30, 0.12);
}
.paket-kartu--aktif {
  border-color: #D4AF37;
  box-shadow: 0 14px 32px rgba(212, 175, 55, 0.18);
}
.paket-kartu--aktif::before {
  height: 5px;
  background: linear-gradient(90deg, #D4AF37, #0F766E);
  opacity: 1;
}
.paket-kartu__nama {
  margin: 0;
  font-size: 1.22rem;
  letter-spacing: -0.01em;
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.paket-kartu__ket {
  margin: 0;
  line-height: 1.45;
  min-height: 7.25em;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.paket-kartu .petunjuk {
  margin: 0;
  line-height: 1.4;
}
.paket-kartu__blok-harga {
  display: grid;
  gap: 4px;
  margin: 2px 0;
  padding: 13px 14px;
  border: 1px solid #E3EDE8;
  border-radius: 14px;
  background: linear-gradient(180deg, #F5FBF8 0%, #FFFCF5 100%);
}
.paket-kartu__harga-normal {
  margin: 0;
  gap: 7px;
  align-items: center;
}
.paket-kartu__label-normal {
  font-size: 0.76rem;
  color: #7B746B;
}
.paket-kartu__coret {
  font-size: 0.9rem;
  color: #8A8177;
}
.paket-kartu__diskon {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #FDE8E4;
  color: #C2410C;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}
.paket-kartu__harga-baris {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
}
.paket-kartu__harga {
  font-size: 2rem;
  font-weight: 900;
  color: #0F5C4D;
  letter-spacing: -0.02em;
}
.paket-kartu__periode {
  font-size: 0.84rem;
  color: #7B746B;
}
.paket-kartu__perbulan {
  font-size: 0.78rem;
  color: #0F766E;
  font-weight: 600;
}
.paket-fitur {
  gap: 9px;
  margin-top: 4px;
  font-size: 0.9rem;
}
.paket-fitur li {
  gap: 9px;
  line-height: 1.4;
}
.paket-fitur li::before {
  content: "\2713";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #E7F3EF;
  color: #0F766E;
  font-size: 11px;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
  margin-top: 1px;
  flex: none;
}
.paket-kartu__kaki {
  padding-top: 14px;
}
.paket-kartu__kaki .tombol {
  border-radius: 12px;
}
/* Warna tombol berbeda tiap kartu agar mudah dibedakan, tetap satu keluarga
   warna hijau, biru, emas, dan marun. */
.paket-grid .paket-kartu:nth-child(4n+1) .tombol--utama {
  background: linear-gradient(135deg, #10B981, #047857);
  box-shadow: 0 8px 18px rgba(5, 150, 105, 0.3);
}
.paket-grid .paket-kartu:nth-child(4n+2) .tombol--utama {
  background: linear-gradient(135deg, #FF3D77, #E11D48);
  box-shadow: 0 8px 18px rgba(225, 29, 72, 0.3);
}
.paket-grid .paket-kartu:nth-child(4n+3) .tombol--utama {
  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
  box-shadow: 0 8px 18px rgba(59, 130, 246, 0.3);
}
.paket-grid .paket-kartu:nth-child(4n) .tombol--utama {
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
  box-shadow: 0 8px 18px rgba(109, 40, 217, 0.3);
}
.paket-grid .paket-kartu .tombol--utama:hover {
  filter: brightness(1.07);
}
.paket-grid .paket-kartu .tombol--utama:disabled {
  background: #D9D3C7;
  color: #6B6459;
  box-shadow: none;
  filter: none;
}
/* Kartu Kaffah Play ditandai populer dengan tepi terang dan lencana. */
.paket-grid .paket-kartu.paket-kartu--populer {
  border-color: #FF6F9E;
  box-shadow: inset 0 0 0 1px #FFB3CB, 0 14px 34px rgba(225, 29, 72, 0.18);
}
.paket-grid .paket-kartu.paket-kartu--populer:hover {
  border-color: #FF4D86;
  box-shadow: inset 0 0 0 1px #FF9EC0, 0 18px 38px rgba(225, 29, 72, 0.24);
}
.paket-grid .paket-kartu.paket-kartu--populer::before {
  height: 5px;
  background: linear-gradient(90deg, #FF3D77, #FB923C);
  opacity: 1;
}
.lencana--populer {
  background: linear-gradient(135deg, #FF3D77, #E11D48);
  color: #FFFFFF;
  border-color: rgba(225, 29, 72, 0.4);
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 10px rgba(225, 29, 72, 0.25);
}
@media (max-width: 560px) {
  .paket-grid { grid-template-columns: 1fr; }
  .paket-kartu { padding: 20px 16px 16px; }
}
/* Kartu lisensi + add-on: geser samping agar ukuran kartu tetap ideal. */
.paket-grid--4 {
  display: flex;
  grid-template-columns: none;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 14px;
  justify-content: flex-start;
  cursor: grab;
  scrollbar-width: thin;
  scrollbar-color: #D8D1C4 transparent;
}
.paket-grid--4 .paket-kartu {
  flex: 0 0 290px;
  width: 290px;
  max-width: 290px;
  scroll-snap-align: start;
  padding: 22px 20px 20px;
  border-radius: 20px;
}
.paket-grid--4::-webkit-scrollbar { height: 8px; }
.paket-grid--4::-webkit-scrollbar-track { background: transparent; }
.paket-grid--4::-webkit-scrollbar-thumb {
  background: #D8D1C4;
  border-radius: 999px;
}
.paket-grid--4.sedang-geser {
  cursor: grabbing;
  scroll-snap-type: none;
}
.paket-grid--4.sedang-geser .paket-kartu {
  pointer-events: none;
}
@media (max-width: 899px) {
  .paket-grid--4 .paket-kartu {
    flex-basis: 270px;
    width: 270px;
    max-width: 270px;
  }
}
@media (max-width: 560px) {
  /* Ponsel kecil: tab dibuat ringkas agar ketiganya tampil tanpa terpotong. */
  .tab-bar {
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
  }
  .tab {
    padding: 9px 7px;
    gap: 4px;
    font-size: 0.78rem;
  }
  .tab__jumlah {
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 0.68rem;
  }
  .paket-grid--4 { gap: 12px; }
  .paket-grid--4 .paket-kartu {
    flex-basis: 88%;
    width: 88%;
    max-width: 88%;
    padding: 18px 14px 14px;
  }
  .paket-kartu__ket {
    min-height: 8.7em;
    -webkit-line-clamp: 6;
  }
  .paket-kartu__nama { font-size: 1.12rem; }
  .paket-kartu__harga { font-size: 1.75rem; }
  .paket-fitur { font-size: 0.86rem; }
}
/* ===================== halaman daftar akun ===================== */
.medan__bantuan {
  display: block;
  margin-top: 5px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--redup);
}
.kode-akses {
  display: grid;
  gap: 4px;
  margin: 4px 0 14px;
  padding: 14px 16px;
  border: 1px dashed rgba(15, 118, 110, 0.45);
  border-radius: 14px;
  background: rgba(15, 118, 110, 0.06);
  text-align: center;
}
.kode-akses__label {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--redup);
}
.kode-akses__nilai {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--utama);
}
.kode-akses__sisa {
  font-size: 0.8rem;
  color: var(--redup);
}
#daftar-wa-link {
  margin-bottom: 8px;
}
#daftar-salin {
  margin-bottom: 14px;
}
/* ===================== masuk dan daftar: rapi dan ringkas ===================== */
#daftar-langkah1,
#daftar-langkah2 {
  display: grid;
  gap: 12px;
}

#daftar-langkah2 > .kode-akses { margin: 0; }
#daftar-wa-link,
#daftar-salin { margin-bottom: 0 !important; }

.masuk__tautan-daftar {
  display: block;
  margin-top: 4px;
  text-align: center;
  text-decoration: none;
}

.masuk__kiri .merek__teks {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

@media (max-width: 960px) {
  .masuk {
    grid-template-columns: 1fr;
    min-height: 100dvh;
    align-content: start;
  }
  .masuk__kiri {
    padding: 16px 18px 20px;
    gap: 4px;
    border-radius: 0 0 20px 20px;
    text-align: left;
  }
  .masuk__kiri .merek { gap: 10px; }
  .masuk__kiri .merek__logo { width: 38px; height: 38px; }
  .masuk__kiri .merek__teks { font-size: 1.15rem; letter-spacing: 0.4px; }
  .masuk__judul {
    margin: 8px 0 0;
    font-size: 1.12rem;
    line-height: 1.3;
    max-width: none;
  }
  .masuk__ket {
    margin: 2px 0 0;
    font-size: 0.84rem;
    max-width: none;
    color: rgba(255, 255, 255, 0.82);
  }
  .masuk__daftar,
  .masuk__kaki { display: none; }
  .masuk__kanan {
    padding: 14px 14px calc(24px + env(safe-area-inset-bottom));
    place-items: start center;
    background: var(--latar);
  }
  .kartu-masuk {
    width: min(460px, 100%);
    padding: 18px 16px;
    gap: 12px;
    border-radius: 18px;
    border-color: rgba(15, 118, 110, 0.14);
    box-shadow: 0 8px 22px rgba(15, 62, 55, 0.07);
  }
  .kartu-masuk h2 { font-size: 1.15rem; }
  .kartu-masuk .bantuan { font-size: 0.85rem; margin: 0; }
  .medan { font-size: 0.82rem; gap: 5px; }
  .medan input {
    font-size: 16px;
    padding: 13px 14px;
    border-radius: 11px;
  }
  .medan__bantuan { font-size: 0.74rem; margin-top: 2px; }
  .tombol { padding: 12px 16px; }
  .kode-akses { padding: 12px 14px; }
  .kode-akses__nilai { font-size: 1.3rem; letter-spacing: 0.12em; }
  .tautan-kecil { font-size: 0.84rem; margin: 0; }
}
/* Tautan yang dipakai sebagai tombol tidak boleh bergaris bawah */
a.tombol,
a.tombol:hover {
  text-decoration: none;
}
.masuk__tautan-daftar { margin-top: -6px; }
/* Kotak pindai QR pada langkah kode akses */
.daftar-qr {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 14px 12px;
  border: 1px solid var(--garis);
  border-radius: 14px;
  background: #fff;
  text-align: center;
}
.daftar-qr[hidden] { display: none; }
.daftar-qr__label {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--redup);
}
.daftar-qr__gambar-isi {
  width: 148px;
  height: 148px;
  display: block;
  border-radius: 8px;
}
.daftar-qr__ket {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--redup);
  max-width: 28ch;
}
/* Kolom pilihan (negara, provinsi, kota) pada formulir daftar */
.medan select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--garis);
  border-radius: 12px;
  background: #fff;
  color: var(--tinta);
  font-size: 1rem;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7f7a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 38px;
}
.medan select:focus {
  border-color: var(--hijau);
  outline: 3px solid rgba(15, 118, 110, 0.15);
}
.medan[hidden] { display: none; }

.medan__telepon {
  display: flex;
  align-items: center;
  gap: 8px;
}
.medan__kode-negara {
  flex: none;
  padding: 12px 10px;
  border: 1px solid var(--garis);
  border-radius: 12px;
  background: var(--krem);
  color: var(--hijau-tua);
  font-weight: 700;
  font-size: 0.95rem;
}
.medan__telepon input { flex: 1 1 auto; }

@media (max-width: 960px) {
  .medan select { font-size: 16px; padding: 13px 14px; padding-right: 38px; }
  .medan__kode-negara { padding: 13px 10px; }
}