/* Satu berkas gaya untuk seluruh dapurpintarku.id.
   Warna dan hurufnya sama persis dengan yang dipakai aplikasinya — situs yang
   warnanya meleset sedikit saja terbaca sebagai situs orang lain. */

:root {
  --tinta:  #2A211C;   /* warm ink, 5.56:1 di atas latar */
  --redup:  #6E5F58;
  --latar:  #FFF6F0;
  --latar2: #FDF8F5;
  --kartu:  #FFFFFF;
  --garis:  #EADFD8;
  --garis2: #DCCCC2;
  --merek:  #FF6B35;   /* hanya untuk bidang, tidak pernah untuk teks kecil */
  --tanda:  #C94214;   /* oranye untuk teks, 4.91:1 di atas putih */
  --lembut: #FFEDE4;
  --motif:  rgba(255, 107, 53, .10);

  /* Semantik. Terpisah dari warna merek: "hampir basi" bukan aksen, ia
     keadaan, dan keadaan yang sewarna hiasan berhenti terbaca sebagai
     peringatan. */
  --bahaya: #B3261E;
  --bahaya-l: #FDE7E5;
  --siaga:  #8A5A00;
  --siaga-l: #FDF0D8;
  --aman:   #2E6B3E;
  --aman-l: #E4F2E7;

  --bayang: 0 1px 2px rgba(120, 72, 48, .05), 0 8px 24px rgba(120, 72, 48, .07);
  --bayang2: 0 2px 6px rgba(120, 72, 48, .07), 0 24px 56px rgba(120, 72, 48, .12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tinta: #F4ECE7; --redup: #B6A89F;
    --latar: #1A1412; --latar2: #150F0E; --kartu: #221A17;
    --garis: #362B26; --garis2: #46372F;
    --merek: #FF6B35; --tanda: #FF9A6A; --lembut: #33211B;
    /* Lebih samar daripada di mode terang: garis terang di atas bidang gelap
       terbaca jauh lebih kuat pada opasitas yang sama. */
    --motif: rgba(255, 154, 106, .05);
    --bahaya: #FFB4AB; --bahaya-l: #3A211E;
    --siaga:  #F2C46B; --siaga-l: #322516;
    --aman:   #9BD5A8; --aman-l: #1E2E22;
    --bayang: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --bayang2: 0 2px 6px rgba(0,0,0,.35), 0 24px 56px rgba(0,0,0,.5);
  }
}

:root[data-theme="dark"] {
  --tinta: #F4ECE7; --redup: #B6A89F;
  --latar: #1A1412; --latar2: #150F0E; --kartu: #221A17;
  --garis: #362B26; --garis2: #46372F;
  --merek: #FF6B35; --tanda: #FF9A6A; --lembut: #33211B;
  --motif: rgba(255, 154, 106, .05);
  --bahaya: #FFB4AB; --bahaya-l: #3A211E;
  --siaga:  #F2C46B; --siaga-l: #322516;
  --aman:   #9BD5A8; --aman-l: #1E2E22;
  --bayang: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --bayang2: 0 2px 6px rgba(0,0,0,.35), 0 24px 56px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clip, bukan hidden. overflow-x: hidden pada <html> menjadikannya wadah
     gulir, dan bilah atas yang position:sticky berhenti menempel di dalam
     wadah gulir. clip memotong tanpa membuat wadah. */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--latar) 0, var(--latar2) 55%);
  background-attachment: fixed;
  color: var(--tinta);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: clip;
}

/* Busur sinyal dari logo, dibesarkan jauh melewati tepi layar sampai terbaca
   sebagai tekstur, bukan sebagai gambar. Sama seperti LatarBrand di aplikasi. */
.motif {
  position: fixed;
  top: -38vmax; right: -30vmax;
  width: 92vmax; height: 92vmax;
  pointer-events: none;
  z-index: 0;
}

main, header, footer, nav { position: relative; z-index: 1; }

h1, h2, h3 {
  font-family: Nunito, ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  text-wrap: balance;
  line-height: 1.18;
  margin: 0;
}

a { color: var(--tanda); text-underline-offset: .18em; }
a:focus-visible { outline: 2px solid var(--tanda); outline-offset: 3px; border-radius: 4px; }

.sampul { max-width: 68rem; margin: 0 auto; padding: 0 20px; }
.sempit { max-width: 42rem; margin: 0 auto; padding: 0 20px; }

/* ---------- tombol bantuan yang menempel ---------- */

.bantuan-tombol {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px 12px 15px; border: 0; border-radius: 999px;
  background: var(--merek); color: #2A211C;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: .92rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 16px rgba(120,72,48,.22), 0 18px 40px rgba(120,72,48,.20);
}
.bantuan-tombol svg { width: 19px; height: 19px; flex: none; }
.bantuan-tombol:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
/* Di layar sempit tulisannya hilang, tombolnya jadi bundar — pil selebar
   sepertiga layar menutupi isi halaman yang sedang dibaca orangnya. */
@media (max-width: 30rem) {
  .bantuan-tombol span { display: none; }
  .bantuan-tombol { padding: 14px; }
}

.bantuan-panel {
  position: fixed; right: 16px; bottom: 76px; z-index: 61;
  width: min(370px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 110px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--kartu); color: var(--tinta);
  border: 1px solid var(--garis); border-radius: 20px;
  box-shadow: var(--bayang2);
  /* Tidak digambar sampai dibuka, dan tidak bisa difokus keyboard sebelum
     itu: panel tersembunyi yang masih menangkap Tab adalah jebakan buat
     orang yang menjelajah tanpa tetikus. */
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.bantuan-panel.terbuka { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) { .bantuan-panel { transition: none; } }

.bantuan-kepala {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 12px 14px 18px;
  background: var(--lembut); color: var(--tanda);
  font-family: Nunito, sans-serif; font-size: 1rem;
}
.bantuan-kepala strong { flex: 1; }
.bantuan-tutup {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: transparent; color: var(--tanda);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.bantuan-tutup:hover { background: rgba(0,0,0,.06); }

.bantuan-isi { padding: 16px 18px 18px; overflow-y: auto; }
.bantuan-cepat { margin: 0 0 14px; font-size: .88rem; color: var(--redup); }

.bantuan-form { display: grid; gap: 11px; }
.bantuan-form label {
  display: grid; gap: 5px;
  font-size: .82rem; font-weight: 600; color: var(--redup);
}
.bantuan-form input,
.bantuan-form textarea {
  font-family: inherit; font-size: .93rem; font-weight: 400; color: var(--tinta);
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--garis); background: var(--latar2);
  width: 100%; resize: vertical;
}
.bantuan-form input:focus, .bantuan-form textarea:focus {
  outline: 2px solid var(--tanda); outline-offset: 1px; border-color: transparent;
}
/* Kolom jebakan. Bukan display:none — sebagian mesin melewati yang
   display:none justru karena tahu itu jebakan. */
.bantuan-jebakan {
  position: absolute !important; left: -9999px !important;
  width: 1px !important; height: 1px !important; opacity: 0 !important;
}
.bantuan-kirim {
  margin-top: 3px; padding: 12px 18px; border: 0; border-radius: 13px;
  background: var(--merek); color: #2A211C;
  font-family: inherit; font-size: .95rem; font-weight: 700; cursor: pointer;
}
.bantuan-kirim:disabled { opacity: .65; cursor: default; }
.bantuan-janji { margin: 2px 0 0; font-size: .78rem; line-height: 1.5; color: var(--redup); }
.bantuan-galat {
  margin: 0; padding: 9px 12px; border-radius: 11px;
  background: var(--bahaya-l); color: var(--bahaya);
  font-size: .84rem; line-height: 1.45;
}
.bantuan-selesai strong { display: block; font-size: 1rem; color: var(--tanda); }
.bantuan-selesai p { margin: 6px 0 0; font-size: .9rem; color: var(--redup); }