/* ============================================================
   Stranger — daftar sosmed standalone (stranger.datealarm.app)
   Kelas .moots-* = identitas CSS lama; halaman /stranger.
   ============================================================ */

.moots-body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
}

.moots-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  padding: 16px 22px;
  pointer-events: none;
}
.moots-brand {
  pointer-events: auto;
  font-family: var(--font-display);
  font-weight: var(--wt-display);
  font-size: 22px;
  letter-spacing: -.03em;
  text-decoration: none;
  color: var(--ink);
}

.moots-page {
  position: relative;
  isolation: isolate;
  max-width: 560px;
  margin: 0 auto;
  padding: 96px 22px 56px;
  /* Latar hias di bawah MENJOROK 80px ke kiri & kanan (inset: -40px
     -80px auto). Di layar lebih sempit dari 560px, .moots-page sudah
     selebar layar — jadi jorokan itu menambah lebar dokumen, dan
     halamannya bisa digeser ke samping. Yang terlihat: judul dan
     formulir terpotong di kiri, ruang kosong di kanan.

     `clip`, bukan `hidden`: hidden membuat elemen ini jadi wadah
     gulir dan bisa ikut menggeser isinya sendiri. Aturan umumnya
     sudah tertulis di CLAUDE.md — badan halaman tidak boleh pernah
     bisa digulir ke samping. */
  overflow-x: clip;
}

.moots-bg {
  position: absolute;
  inset: -40px -80px auto;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  height: 420px;
}
.moots-bg img {
  width: 140%;
  max-width: none;
  opacity: .18;
  filter: blur(1.5px);
  transform: translateX(-12%);
}
.moots-glow {
  position: absolute;
  top: -10%;
  right: -20%;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 64, 92, .18), transparent 68%);
}

.moots-eyebrow {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-2);
}
.moots-judul {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--wt-display);
  font-size: clamp(34px, 9vw, 48px);
  line-height: 1.05;
  letter-spacing: -.03em;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.moots-sub {
  margin: 14px 0 0;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 36em;
}

.moots-segel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 8px 12px 8px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ring);
  font-size: 12.5px;
  font-weight: 600;
}
.moots-segel-titik {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2FBF71;
  box-shadow: 0 0 0 3px rgba(47, 191, 113, .22);
}

.moots-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 26px;
  padding: 20px 18px 22px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  box-shadow: var(--rim-dark), var(--spec-soft), var(--lift-1);
}
.moots-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.moots-field em {
  font-style: normal;
  font-weight: 500;
  color: var(--ink-3);
}

/* Halaman ini tidak memuat auth.css — field sengaja lebih besar
   (tap target) dan font 16px supaya Safari iOS tidak auto-zoom. */
.moots-form .auth-input,
.moots-cari.auth-input {
  width: 100%;
  margin: 0;
  padding: 16px 18px;
  min-height: 56px;
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink);
  background: var(--bg-card);
  border: 0;
  border-radius: var(--radius-sm);
  -webkit-appearance: none;
  appearance: none;
  box-shadow: var(--rim-dark), inset 0 1px 2px rgba(21, 22, 30, .05);
}
.moots-form select.auth-input {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E5559' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.moots-form .auth-input::placeholder { color: var(--ink-3); }
.moots-form .auth-input:focus,
.moots-cari.auth-input:focus {
  outline: 2px solid var(--brand-2);
  outline-offset: 1px;
}

.moots-form .btn {
  align-self: stretch;
  margin-top: 6px;
  min-height: 52px;
  font-size: 16px;
}
.moots-form .btn-sm {
  min-height: 44px;
  font-size: 15px;
}
.moots-form-msg {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
}
.moots-form-msg.is-ok { color: #1f7a45; font-weight: 600; }
.moots-form-msg.is-err { color: #a1262f; font-weight: 600; }
.moots-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.moots-cari-wrap { margin-top: 22px; }
.moots-cari { width: 100%; }

.moots-daftar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.moots-muat,
.moots-kosong {
  margin: 8px 0 0;
  padding: 28px 18px;
  text-align: center;
  color: var(--ink-2);
  font-size: 15px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  box-shadow: var(--rim-dark), var(--spec-soft);
}

.moots-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 14px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  box-shadow: var(--rim-dark), var(--spec-soft), var(--lift-1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.moots-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--rim-dark), var(--spec-soft), var(--lift-2);
}
.moots-item:focus-visible {
  outline: 3px solid var(--accent-ring);
  outline-offset: 2px;
}

.moots-plat {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.moots-nama {
  margin: 3px 0 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}
.moots-handle {
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--ink-2);
  word-break: break-all;
}

.moots-catatan {
  margin: 36px 0 0;
  font-size: 13.5px;
  color: var(--ink-3);
  text-align: center;
}
.moots-catatan a {
  color: var(--brand-2);
  font-weight: 600;
  text-decoration: none;
}
.moots-catatan a:hover { text-decoration: underline; }

.moots-ilus {
  display: block;
  width: min(220px, 52vw);
  height: auto;
  margin: 0 auto 8px;
}

.moots-urls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.moots-form-hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.45;
}

.moots-kosong-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 20px;
}
.moots-kosong-box .ilus-kosong {
  width: min(180px, 48vw);
  height: auto;
}

.moots-kartu {
  padding: 16px 18px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  box-shadow: var(--rim-dark), var(--spec-soft), var(--lift-1);
}
.moots-kartu .moots-nama {
  margin: 0;
  font-size: 18px;
}
.moots-bidang {
  margin: 6px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-2);
}
.moots-kartu .moots-meta {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}
.moots-tautan {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.moots-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  background: var(--bg-alt);
  transition: background .15s ease;
}
.moots-link:hover {
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--bg-alt));
}
.moots-link .moots-plat {
  margin: 0;
}
.moots-link .moots-handle {
  margin: 0;
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .moots-item { transition: none; }
  .moots-item:hover { transform: none; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Baris tautan: ikon platform + panah keluar ──────────────
   Ditambahkan 16 Sep 2026. Sebelumnya barisnya cuma teks
   "instagram @nama" — terbaca sebagai keterangan, bukan sesuatu yang
   bisa diketuk. Ikon di kiri menandai platformnya, panah di kanan
   menandai bahwa ketukan ini meninggalkan halaman. */
.moots-link { display: flex; align-items: center; gap: 10px; }
/* Lingkaran latar DICABUT 16 Sep 2026. Dulu warna merek dipakai
   tipis 12% sebagai lingkaran 34px; dengan daftar yang isinya
   kebanyakan Instagram (#C13584), yang terlihat deretan bulatan
   merah muda — terbaca sebagai hiasan yang tidak ada artinya.

   Warnanya TIDAK ikut dicabut: yang tinggal logo merek dalam warna
   aslinya, dan itu justru lebih cepat dikenali daripada bentuk
   di dalam bulatan pucat. `currentColor` masih datang dari style
   inline per platform di js/stranger.js — jangan hapus itu. */
.moots-ikon-bulat {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px;
}
/* Logo merek digambar TERISI, bukan bergaris — itu memang bentuk
   aslinya. Ikon Lucide di repo ini kebalikannya (fill:none + stroke),
   jadi jangan disamakan: logo yang diberi stroke jadi siluet kosong. */
.moots-ikon {
  width: 20px; height: 20px;
  fill: currentColor; stroke: none;
}
/* Cadangan ikon tautan generik — yang ini memang bergaris. */
.moots-ikon-garis {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.moots-link-teks { display: flex; flex-direction: column; min-width: 0; flex: 1; }
/* SATU-SATUNYA aturan .moots-panah. Sampai 16 Sep 2026 ada dua di
   berkas ini: sisa versi lama waktu panahnya masih <span> pembungkus
   berisi <svg>, lengkap dengan lingkaran 36px ber-background
   var(--accent).

   Aturan ini menang untuk properti yang DIA sebut — ukuran, stroke,
   warna — tapi `background` dan `border-radius` cuma ada di aturan
   lama, jadi tidak ada yang menimpanya. Hasilnya panah kecil
   bertengger di atas lingkaran burgundy pekat, dan dari layar itu
   terbaca seperti ikon yang rusak.

   Jangan menambah aturan .moots-panah kedua. Kalau perlu varian,
   pakai kelas lain. */
.moots-panah {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--ink-3); opacity: .7;
}
.moots-link:hover .moots-panah { opacity: 1; }

.moots-oleh {
  margin: 18px 0 8px; text-align: center;
  font-size: 12.5px; color: var(--ink-3);
}
.moots-oleh a { color: var(--accent); font-weight: 700; text-decoration: none; }
.moots-oleh a:hover { text-decoration: underline; }

/* Baris "powered by" di kepala halaman. Tenang dan kecil — dia
   menjelaskan siapa yang menjalankan halaman ini, bukan merebut
   perhatian dari formulirnya. */
.moots-oleh-atas {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 18px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: var(--bg-card);
  box-shadow: var(--rim-dark), var(--spec-soft), var(--lift-1);
  font-size: 12.5px; color: var(--ink-3);
  text-decoration: none;
}
.moots-oleh-atas img { border-radius: 7px; display: block; }
/* `a`, bukan `b`: isinya sekarang dua tautan terpisah. Angkat-hover
   pindah ke tautannya — badge-nya sendiri bukan lagi satu tombol,
   jadi mengangkat seluruhnya saat disentuh menjanjikan sesuatu yang
   tidak bisa ditepatinya. */
.moots-oleh-atas a {
  color: var(--accent); font-weight: 700; text-decoration: none;
}
.moots-oleh-atas a:hover { text-decoration: underline; }
.moots-oleh-atas > span[aria-hidden] { opacity: .5; }

/* ============================================================
   Desktop — daftar jadi kartu bersebelahan, bukan kolom panjang
   ============================================================

   Halaman ini dipatok 560px supaya terbaca di HP, dan di layar
   lebar itu menyisakan dua bidang kosong besar sementara daftarnya
   memanjang ke bawah tanpa ujung.

   Yang dilebarkan HANYA daftarnya. Judul, formulir, dan pencarian
   tetap 560px: kolom teks selebar 1000px susah dibaca, dan input
   yang membentang selebar layar tidak membuat siapa pun lebih cepat
   mengetik.

   Ditaruh di AKHIR berkas dengan sengaja — `@media` tidak menambah
   spesifisitas, jadi aturan ini menang cuma karena urutannya. Kalau
   dipindah ke atas `.moots-daftar` (baris 209), yang menang justru
   flex column-nya dan gridnya diam tanpa galat. */
@media (min-width: 900px) {
  .moots-page {
    max-width: 960px;
  }

  /* Anak-anak yang TETAP sempit. Didaftar satu per satu, bukan
     lewat `.moots-page > *`, supaya elemen baru tidak diam-diam
     ikut menyempit tanpa ada yang memutuskan. */
  .moots-page > .moots-oleh-atas,
  .moots-page > .moots-eyebrow,
  .moots-page > .moots-judul,
  .moots-page > .moots-sub,
  .moots-page > .moots-form,
  .moots-page > .moots-cari-wrap,
  .moots-page > .moots-catatan,
  .moots-page > .moots-oleh {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  /* `auto-fill`, bukan `auto-fit`: dengan auto-fit satu kartu
     sendirian melar selebar 916px dan terlihat seperti galat.

     `dense` supaya lubang yang ditinggalkan kartu lebar diisi kartu
     kecil berikutnya — tanpa itu bento-nya berlubang-lubang. Efek
     sampingnya urutan VISUAL bisa berbeda dari urutan DOM; di sini
     tidak masalah karena daftarnya bukan peringkat. */
  .moots-daftar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    grid-auto-flow: dense;
    align-items: start;
    gap: 14px;
    margin-top: 18px;
  }

  /* Bento: ubin yang isinya lebih banyak mengambil dua kolom.
     Lebarnya ditentukan ISI (jumlah sosmed), bukan nomor urut —
     `:nth-child(3n)` akan melebarkan kartu yang kebetulan jatuh di
     posisi itu, dan susunannya berubah tiap kali ada orang baru. */
  .moots-kartu[data-lebar="2"] { grid-column: span 2; }
  .moots-kartu[data-lebar="2"] .moots-tautan {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* "Memuat…" dan layar kosong bukan kartu — mereka harus
     membentang, bukan duduk sempit di kolom pertama. Keduanya anak
     LANGSUNG .moots-daftar; `.moots-kosong` sendiri tidak didaftar
     karena dia ada DI DALAM .moots-kosong-box. */
  .moots-daftar > .moots-muat,
  .moots-daftar > .moots-kosong-box {
    grid-column: 1 / -1;
  }
}

/* ── Baris tautan di formulir ─────────────────────────────────
   Satu baris = pilihan platform + kolom + tombol hapus. */
.moots-url-baris {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.moots-url-baris + .moots-url-baris { margin-top: 12px; }
.moots-url-field { flex: 1; min-width: 0; }
.moots-url-kontrol {
  display: grid;
  /* Dropdown selebar isinya, kolom mengambil sisanya. `minmax(0,1fr)`
     bukan `1fr`: tanpa itu kolomnya mendorong baris melewati lebar
     kartu begitu placeholder-nya panjang. */
  grid-template-columns: minmax(0, 9.75rem) minmax(0, 1fr);
  gap: 8px;
}
.moots-url-plat { padding-left: 12px; padding-right: 30px; }
.moots-url-hapus {
  flex: none;
  width: 42px; height: 46px;
  display: grid; place-items: center;
  border: 0; border-radius: 14px;
  background: var(--bg-alt);
  color: var(--ink-3);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.moots-url-hapus:hover {
  background: color-mix(in srgb, #a1262f 12%, var(--bg-alt));
  color: #a1262f;
}
/* [hidden] kalah dari aturan `display` bersselektor kelas — jebakan
   yang sudah empat kali kena di repo ini (lihat CLAUDE.md). */
.moots-url-hapus[hidden] { display: none; }
.moots-tambah-url[hidden] { display: none; }

@media (max-width: 460px) {
  /* Di layar sempit dropdown + kolom sebaris membuat keduanya
     terlalu pendek untuk dibaca. Tumpuk. */
  .moots-url-kontrol { grid-template-columns: minmax(0, 1fr); }
}