/* Inspirasi Kopi: palet dari perjalanan biji kopi (daun, ceri merah, gabah, kuningan, sangrai) */
:root {
  --daun: #10241c;
  --daun-terang: #18362a;
  --sangrai: #24150e;
  --gabah: #ebe2cd;
  --gabah-redup: #b9b19c;
  --kuningan: #c09a5b;
  --ceri: #b23a32;
  --garis: rgba(192, 154, 91, 0.32);
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --teks: "Figtree", "Segoe UI", system-ui, sans-serif;
  --lebar: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--daun);
  color: var(--gabah);
  font-family: var(--teks);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--kuningan); outline-offset: 3px; }
.wadah { max-width: var(--lebar); margin: 0 auto; padding: 0 28px; }

/* Kepala */
.kepala { border-bottom: 1px solid var(--garis); }
.kepala .wadah { display: flex; align-items: baseline; justify-content: space-between; padding-top: 22px; padding-bottom: 18px; gap: 20px; }
.merek { font-family: var(--display); font-size: 1.45rem; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; }
.merek span { color: var(--kuningan); font-style: italic; }
.menu { display: flex; gap: 26px; font-size: 0.95rem; white-space: nowrap; }
.menu a { text-decoration: none; color: var(--gabah-redup); }
.menu a:hover { color: var(--gabah); }

/* Pembuka */
.pembuka { padding: 84px 0 40px; }
.pembuka h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.5rem, 6.4vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 26px;
  max-width: 15ch;
}
.pembuka p { max-width: 56ch; margin: 0 0 34px; color: var(--gabah-redup); font-size: 1.1rem; }
.aksi { display: flex; flex-wrap: wrap; gap: 14px; }
.tombol {
  display: inline-block; font: inherit; font-weight: 600; font-size: 0.98rem; cursor: pointer;
  padding: 13px 24px; border-radius: 2px; text-decoration: none; border: 1px solid var(--kuningan);
  background: var(--kuningan); color: var(--sangrai);
}
.tombol:hover { background: #d2ae70; border-color: #d2ae70; }
.tombol.garis { background: transparent; color: var(--gabah); }
.tombol.garis:hover { background: rgba(192, 154, 91, 0.14); }

/* Jalur asal: dari barat ke timur */
.jalur { padding: 30px 0 70px; }
.jalur h2 { font-family: var(--teks); font-weight: 500; font-size: 0.98rem; color: var(--gabah-redup); margin: 0 0 30px; }
.jalur ol { list-style: none; margin: 0; padding: 0; display: flex; position: relative; }
.jalur ol::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--garis); }
.jalur li { flex: 1; min-width: 0; position: relative; }
.jalur a { display: block; text-decoration: none; padding-top: 26px; position: relative; }
.jalur a::before {
  content: ""; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%;
  background: var(--daun); border: 1px solid var(--kuningan); transition: background 0.2s;
}
.jalur a:hover::before, .jalur a:focus-visible::before { background: var(--ceri); border-color: var(--ceri); }
.jalur .asal { display: block; font-family: var(--display); font-size: clamp(0.9rem, 1.35vw, 1.08rem); line-height: 1.15; padding-right: 8px; }
.jalur .pulau { display: block; font-size: 0.82rem; color: var(--gabah-redup); margin-top: 3px; }
.jalur .arah { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--gabah-redup); margin-top: 26px; }

/* Katalog bergaya daftar menu */
.katalog { background: var(--sangrai); padding: 76px 0 90px; }
.katalog h2, .barista h2, .tentang h2 {
  font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.12; margin: 0 0 12px;
}
.katalog .pengantar { color: var(--gabah-redup); max-width: 60ch; margin: 0 0 30px; }
.saring { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.saring button {
  font: inherit; font-size: 0.93rem; cursor: pointer; padding: 8px 16px; border-radius: 999px;
  background: transparent; color: var(--gabah-redup); border: 1px solid var(--garis);
}
.saring button[aria-pressed="true"] { background: var(--gabah); color: var(--sangrai); border-color: var(--gabah); }
.kelompok { margin-bottom: 54px; }
.kelompok h3 {
  font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.5rem; color: var(--kuningan);
  margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--garis);
}
.daftar { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
.produk { display: flex; gap: 18px; padding: 24px 0; border-bottom: 1px solid rgba(192, 154, 91, 0.16); scroll-margin-top: 20px; }
.produk.sorot { animation: sorot 2.2s ease-out; }
@keyframes sorot { 0% { background: rgba(178, 58, 50, 0.28); } 100% { background: transparent; } }
.produk img { width: 92px; height: 92px; object-fit: cover; border-radius: 2px; flex: none; }
.produk .isi { flex: 1; min-width: 0; }
.produk h4 { font-family: var(--display); font-weight: 500; font-size: 1.24rem; line-height: 1.25; margin: 0 0 7px; }
.produk p { margin: 0 0 10px; font-size: 0.95rem; color: var(--gabah-redup); }
.produk .dicoba { color: var(--gabah); font-style: italic; }
.produk .dicoba::before { content: "Sudah kami coba: "; font-style: normal; color: var(--kuningan); }
.produk a.beli { font-weight: 600; font-size: 0.93rem; color: var(--kuningan); text-underline-offset: 4px; }
.produk a.beli:hover { color: var(--gabah); }
.kosong { color: var(--gabah-redup); }

/* Barista */
.barista { padding: 84px 0; }
.barista .wadah { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.barista p { color: var(--gabah-redup); max-width: 48ch; }
.contoh { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--garis); }
.contoh li { border-bottom: 1px solid var(--garis); }
.contoh button {
  width: 100%; text-align: left; font-family: var(--display); font-size: 1.22rem; line-height: 1.3; cursor: pointer;
  background: none; border: 0; color: var(--gabah); padding: 18px 0;
}
.contoh button:hover { color: var(--kuningan); }

/* Tentang dan kaki */
.tentang { border-top: 1px solid var(--garis); padding: 64px 0; }
.tentang p { max-width: 64ch; color: var(--gabah-redup); }
.kaki { border-top: 1px solid var(--garis); padding: 30px 0 110px; font-size: 0.88rem; color: var(--gabah-redup); }
.kaki .wadah { display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: space-between; }
.kaki p { margin: 0; max-width: 62ch; }

/* Halaman teks */
.halaman { padding: 60px 0 80px; }
.halaman h1 { font-family: var(--display); font-weight: 400; font-size: 2.6rem; line-height: 1.1; margin: 0 0 26px; }
.halaman h2 { font-family: var(--display); font-weight: 500; font-size: 1.45rem; margin: 40px 0 10px; }
.halaman p, .halaman li { max-width: 66ch; color: var(--gabah-redup); }

/* Obrolan */
.buka-obrolan {
  position: fixed; right: 22px; bottom: 22px; z-index: 30; font: inherit; font-weight: 600; cursor: pointer;
  padding: 14px 22px; border-radius: 999px; border: 0; background: var(--ceri); color: #fff5e9;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.buka-obrolan:hover { background: #c5463d; }
.obrolan {
  position: fixed; right: 22px; bottom: 22px; z-index: 40; width: min(400px, calc(100vw - 24px)); height: min(620px, calc(100vh - 40px));
  display: none; flex-direction: column; background: var(--gabah); color: var(--sangrai); border-radius: 6px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
.obrolan.terbuka { display: flex; }
.obrolan header { background: var(--sangrai); color: var(--gabah); padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; }
.obrolan header strong { font-family: var(--display); font-weight: 500; font-size: 1.2rem; }
.obrolan header small { display: block; color: var(--gabah-redup); font-size: 0.8rem; }
.obrolan header button { background: none; border: 0; color: var(--gabah); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 4px 8px; }
.pesan { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.balon { max-width: 88%; padding: 11px 14px; border-radius: 4px; font-size: 0.95rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.balon.barista-b { background: #fbf6ea; border: 1px solid #d8cdb2; align-self: flex-start; }
.balon.tamu { background: var(--daun-terang); color: var(--gabah); align-self: flex-end; }
.balon.menunggu { color: #7a6f5c; font-style: italic; }
.saran-produk { align-self: flex-start; display: flex; flex-direction: column; gap: 6px; max-width: 88%; }
.saran-produk a {
  display: block; text-decoration: none; font-size: 0.9rem; font-weight: 600; padding: 9px 13px; border-radius: 4px;
  border: 1px solid var(--sangrai); color: var(--sangrai);
}
.saran-produk a:hover { background: var(--sangrai); color: var(--gabah); }
.saran-produk a span { display: block; font-weight: 400; font-size: 0.8rem; opacity: 0.75; }
.obrolan form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #d8cdb2; background: #f4eddc; }
.obrolan textarea {
  flex: 1; resize: none; font: inherit; font-size: 0.95rem; padding: 10px 12px; border-radius: 4px; border: 1px solid #c7bb9d;
  background: #fffaf0; color: var(--sangrai); height: 46px;
}
.obrolan form button { font: inherit; font-weight: 600; cursor: pointer; padding: 0 18px; border-radius: 4px; border: 0; background: var(--sangrai); color: var(--gabah); }
.obrolan form button:disabled { opacity: 0.5; cursor: default; }
.obrolan .catatan { margin: 0; padding: 0 14px 12px; font-size: 0.74rem; color: #6d6351; background: #f4eddc; }

@media (max-width: 860px) {
  body { font-size: 16px; }
  .wadah { padding: 0 20px; }
  .menu { gap: 16px; font-size: 0.88rem; }
  .pembuka { padding: 54px 0 30px; }
  .daftar { grid-template-columns: 1fr; }
  .barista .wadah { grid-template-columns: 1fr; gap: 30px; }
  .jalur ol { flex-direction: column; gap: 0; }
  .jalur ol::before { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .jalur a { padding: 0 0 20px 34px; }
  .jalur .asal { font-size: 1.2rem; }
  .jalur .arah { display: none; }
  .obrolan { right: 12px; bottom: 12px; }
}
@media (max-width: 480px) {
  .menu a.sembunyi-hp { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .produk.sorot { animation: none; }
  .jalur a::before { transition: none; }
}