/* ============================================================
   Form Testimoni Klien — testimoni.<domain>
   Dimuat SETELAH core-v1.0.13.css dan hanya pada halaman ini.

   Warna dipegang token, bukan nilai mentah. Alasannya bukan gaya:
   .lily-app-shell milik core memaku background:#fff, sehingga pada
   mode gelap kartunya menyala putih dan teksnya tidak terbaca.
   Semua permukaan di halaman ini memakai var(--tm-*) supaya satu
   blok prefers-color-scheme cukup untuk membalik seluruh halaman.
   ============================================================ */

.lily-testimoni-body{
  --tm-canvas:#eeeae2;
  --tm-surface:#fff;
  --tm-surface-soft:#fbf8f1;
  --tm-ink:#171512;
  --tm-muted:#6e6658;
  --tm-line:rgba(23,21,18,.14);
  --tm-field-bg:#fff;
  --tm-field-line:#8f887c;
  --tm-gold:#a9905f;
  --tm-gold-ink:#8a7038;      /* Varian gelap: dipakai untuk TEKS kecil (4.7:1). */
  --tm-gold-soft:#f3ead7;
  --tm-danger:#8f2019;
  --tm-danger-bg:#fff2f1;
  --tm-danger-line:#c86b65;
  --tm-ok:#1c6343;
  --tm-ok-bg:#eef8f2;
  --tm-ok-line:#8bc3a5;
  --tm-shadow:0 20px 70px rgba(0,0,0,.08);
  color-scheme:light;
  background:var(--tm-canvas);
  color:var(--tm-ink);
}

@media (prefers-color-scheme:dark){
  .lily-testimoni-body{
    --tm-canvas:#100f0d;
    --tm-surface:#1c1b18;
    --tm-surface-soft:#232119;
    --tm-ink:#f3efe8;
    --tm-muted:#b3aa9b;
    --tm-line:rgba(243,239,232,.16);
    --tm-field-bg:#141311;
    --tm-field-line:#6b6559;
    --tm-gold:#c9ad76;
    --tm-gold-ink:#d8c59a;
    --tm-gold-soft:#2a2519;
    --tm-danger:#f4a9a2;
    --tm-danger-bg:#2c1a18;
    --tm-danger-line:#7d3c36;
    --tm-ok:#8ed5b0;
    --tm-ok-bg:#152520;
    --tm-ok-line:#3c6b56;
    --tm-shadow:0 20px 70px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}

/* Kartu utama. Lebarnya lebih sempit daripada booking: form ini
   dominan teks panjang, dan baris 45–75 karakter jauh lebih enak dibaca. */
.lily-testimoni-body .lily-app-shell{
  width:min(720px,calc(100% - 24px));
  background:var(--tm-surface);
  color:var(--tm-ink);
  box-shadow:var(--tm-shadow);
}
.lily-testimoni-body .lily-app-header{border-bottom-color:var(--tm-line)}
.lily-testimoni-body .lily-app-kicker{color:var(--tm-gold-ink);font-size:.8rem}
.lily-testimoni-body h1{color:var(--tm-ink);font-size:clamp(2rem,5.4vw,3.2rem);letter-spacing:-.03em}
.lily-testimoni-body h2{color:var(--tm-ink)}

.tm-intro{margin:0 0 28px}
.tm-intro p{margin:.6rem 0 0;color:var(--tm-muted);font-size:1rem;line-height:1.7}

/* --- Ringkasan kesalahan -------------------------------------
   Dilengkapi tautan ke tiap field yang bermasalah. Pesan per-field
   TETAP dicetak di bawah input-nya; ringkasan ini tambahan, bukan
   pengganti — pengguna keyboard/pembaca layar butuh keduanya. */
.tm-errors{
  margin:0 0 26px;padding:16px 18px;
  border:1px solid var(--tm-danger-line);border-radius:14px;
  background:var(--tm-danger-bg);color:var(--tm-danger);
}
.tm-errors:focus-visible{outline:3px solid var(--tm-gold);outline-offset:3px}
.tm-errors h2{margin:0 0 .4rem;font-size:1.05rem;color:var(--tm-danger)}
.tm-errors ul{margin:0;padding-left:1.15rem}
.tm-errors li{margin:.35rem 0}
.tm-errors a{color:inherit;font-weight:750}

.tm-form{display:grid;gap:22px}
.tm-fieldset{
  display:grid;gap:18px;margin:0;padding:22px;
  border:1px solid var(--tm-line);border-radius:18px;background:var(--tm-surface);
}
.tm-fieldset>legend{padding:0 8px;font-size:1.05rem;font-weight:900;color:var(--tm-ink)}
.tm-row{display:grid;gap:18px}
@media (min-width:640px){ .tm-row--split{grid-template-columns:repeat(2,minmax(0,1fr))} }

.tm-field{display:grid;gap:7px;min-width:0}
.tm-label{font-weight:750;font-size:.95rem;color:var(--tm-ink)}
.tm-req{color:var(--tm-danger);margin-left:.15rem}
.tm-optional{color:var(--tm-muted);font-weight:600}
.tm-help{color:var(--tm-muted);font-size:.85rem;line-height:1.5}

.tm-field input[type=text],
.tm-field textarea{
  display:block;width:100%;min-width:0;
  /* 16px mencegah iOS Safari melakukan zoom paksa saat field difokus. */
  font:inherit;font-size:16px;line-height:1.5;
  min-height:52px;padding:.85rem 1rem;
  border:1px solid var(--tm-field-line);border-radius:12px;
  background:var(--tm-field-bg);color:var(--tm-ink);
}
.tm-field textarea{min-height:150px;resize:vertical}
.tm-field input::placeholder,
.tm-field textarea::placeholder{color:var(--tm-muted);opacity:1}
.tm-field input:focus-visible,
.tm-field textarea:focus-visible{outline:3px solid var(--tm-gold);outline-offset:2px;border-color:var(--tm-gold)}
.tm-field.has-error input,
.tm-field.has-error textarea{border-color:var(--tm-danger-line);background:var(--tm-danger-bg)}

.tm-error{
  display:flex;gap:6px;align-items:flex-start;
  margin:0;color:var(--tm-danger);font-size:.86rem;font-weight:700;line-height:1.45;
}
.tm-error::before{content:"!";flex:0 0 17px;height:17px;margin-top:1px;border-radius:50%;background:var(--tm-danger);color:var(--tm-danger-bg);font-size:12px;font-weight:900;line-height:17px;text-align:center}

.tm-count{color:var(--tm-muted);font-size:.8rem;text-align:right;font-variant-numeric:tabular-nums}

/* --- Foto profil ---------------------------------------------
   Lingkaran preview selalu ada (juga saat kosong) supaya tidak ada
   pergeseran layout ketika foto dipilih. */
.tm-photo{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.tm-photo__preview{
  flex:0 0 88px;width:88px;height:88px;overflow:hidden;
  display:grid;place-items:center;border-radius:50%;
  border:1px dashed var(--tm-field-line);background:var(--tm-gold-soft);
  /* Tidak boleh turun di bawah 12px — pelajaran dari teks 6,7px di pricelist. */
  color:var(--tm-gold-ink);font-size:.78rem;font-weight:800;text-align:center;letter-spacing:.02em;
}
.tm-photo__preview img{width:100%;height:100%;object-fit:cover;display:block}
.tm-photo__preview.has-image{border-style:solid;border-color:var(--tm-gold)}
.tm-photo__controls{display:grid;gap:8px;flex:1 1 220px;min-width:0}
.tm-photo__buttons{display:flex;flex-wrap:wrap;gap:10px}

/* input[type=file] disembunyikan secara VISUAL saja — tetap fokusabel
   keyboard, dan cincin fokusnya dipinjamkan ke tombol lewat :has(). */
.tm-photo__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.tm-photo__pick,
.tm-photo__clear{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.65rem 1.15rem;
  border:1px solid var(--tm-ink);border-radius:999px;
  background:transparent;color:var(--tm-ink);
  font:inherit;font-size:.92rem;font-weight:800;cursor:pointer;
}
.tm-photo__clear{border-color:var(--tm-field-line);color:var(--tm-muted)}
/* `display:inline-flex` di atas mengalahkan aturan [hidden] milik browser,
   sehingga tombol Hapus Foto tetap terlihat walau belum ada foto dipilih. */
.lily-testimoni-body [hidden]{display:none!important}
.tm-photo__pick:hover,.tm-photo__clear:hover{border-color:var(--tm-gold);color:var(--tm-gold-ink)}
.tm-photo__buttons:has(.tm-photo__input:focus-visible) .tm-photo__pick,
.tm-photo__pick:focus-visible,
.tm-photo__clear:focus-visible{outline:3px solid var(--tm-gold);outline-offset:2px}
/* Jarak diatur oleh gap kolom; margin bawaan <p> hanya menambah celah ganda,
   dan paragraf nama berkas yang masih kosong tidak boleh memakan ruang. */
.tm-photo__controls>p{margin:0}
.tm-photo__name{color:var(--tm-muted);font-size:.85rem;overflow-wrap:anywhere}
.tm-photo__name:empty{display:none}

.tm-actions{display:grid;gap:12px;justify-items:start}
.tm-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:.9rem 1.7rem;width:100%;
  border:1px solid var(--tm-ink);border-radius:999px;
  background:var(--tm-ink);color:var(--tm-surface);
  font:inherit;font-size:1rem;font-weight:850;cursor:pointer;
}
.tm-submit:hover{background:var(--tm-gold-ink);border-color:var(--tm-gold-ink)}
.tm-submit:focus-visible{outline:3px solid var(--tm-gold);outline-offset:3px}
.tm-submit[aria-disabled=true]{opacity:.65;cursor:progress}
@media (min-width:640px){ .tm-submit{width:auto;min-width:280px} }
.tm-actions .tm-help{justify-self:stretch}

/* --- Halaman terima kasih ------------------------------------ */
.tm-done{
  display:grid;gap:14px;justify-items:start;
  padding:26px;border:1px solid var(--tm-ok-line);border-radius:18px;
  background:var(--tm-ok-bg);color:var(--tm-ok);
}
.tm-done h1{margin:0;color:var(--tm-ink)}
.tm-done p{margin:0;color:var(--tm-ink);line-height:1.7}
.tm-done__mark{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--tm-ok);color:var(--tm-ok-bg);font-size:26px;font-weight:900;line-height:1;
}
.tm-done__again{
  display:inline-flex;align-items:center;min-height:44px;padding:.6rem 1.2rem;
  border:1px solid currentColor;border-radius:999px;
  color:var(--tm-ink);text-decoration:none;font-weight:800;
}
.tm-done__again:focus-visible{outline:3px solid var(--tm-gold);outline-offset:3px}

@media (max-width:700px){
  .lily-testimoni-body .lily-app-shell{width:100%;margin:0;padding:22px 18px}
  .tm-fieldset{padding:18px 15px}
}

@media (prefers-reduced-motion:reduce){
  .lily-testimoni-body *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}