/* Landing page agent.kesia.id dan agent.inagi.id. Satu kerangka, dua merek lewat data-merek di <html>:
   Kesia terang (cyan #16B3AC, Plus Jakarta Sans), Inagi gelap (merah #E8352A, Instrument Sans).
   Warna dan huruf sama dengan dashboard ProjectAgentic merek yang sama. Tanpa JavaScript. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/bersama/huruf/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/bersama/huruf/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

/* Kesia: latar sejuk, aksen cyan, tinta biru tua */
:root[data-merek="kesia"] {
  color-scheme: light;
  --latar: #f3f8f9;
  --latar-2: #e8f2f3;
  --kartu: #ffffff;
  --garis: #d8e5e8;
  --teks: #0b2730;
  --redup: #4e6871;
  --utama: #16b3ac;
  --utama-tinta: #05313d; /* tinta di atas cyan (putih hanya 2,6:1) */
  --utama-hover: #14a7a0;
  --aksen: #097989;
  --tint: #e3f6f5;
  --panel: linear-gradient(160deg, #087a8d 0%, #066079 60%, #05536b 100%);
  --panel-teks: #ffffff;
  --chat-latar: #eaf3f4;
  --balon-masuk: #ffffff;
  --balon-bot: #d9f3f1;
  --huruf: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --spasi-kata: 0.06em;
}

/* Inagi: hampir hitam, aksen merah, teks putih hangat (warna situs inagi.id) */
:root[data-merek="inagi"] {
  color-scheme: dark;
  --latar: #0c0c0e;
  --latar-2: #111115;
  --kartu: #16161a;
  --garis: #26262d;
  --teks: #f0ede8;
  --redup: #a3a1aa;
  --utama: #e8352a;
  --utama-tinta: #140504; /* tinta di atas merah (kontras 4,7:1) */
  --utama-hover: #f0473c;
  --aksen: #ff6b5b;
  --tint: #2a1210;
  --panel: radial-gradient(60% 80% at 100% 0%, rgba(232, 53, 42, 0.45) 0%, rgba(232, 53, 42, 0) 100%),
    linear-gradient(160deg, #1c1c22 0%, #111115 100%);
  --panel-teks: #f0ede8;
  --chat-latar: #111115;
  --balon-masuk: #1c1c22;
  --balon-bot: #3a1713;
  --huruf: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --spasi-kata: normal;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--latar);
  color: var(--teks);
  font-family: var(--huruf);
  font-size: 17px;
  line-height: 1.6;
  word-spacing: var(--spasi-kata);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--aksen);
}

a:focus-visible,
.tombol:focus-visible {
  outline: 3px solid var(--aksen);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 800;
}

h3 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

.bungkus {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 20px;
}

.label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aksen);
}

.redup {
  color: var(--redup);
}

/* Tombol */
.tombol {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.35rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background-color 0.15s ease;
}

.tombol svg {
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
}

.tombol.utama {
  background: var(--utama);
  color: var(--utama-tinta);
}

.tombol.utama:hover {
  background: var(--utama-hover);
}

.tombol.garis {
  border-color: var(--garis);
  color: var(--teks);
  background: var(--kartu);
}

.tombol.garis:hover {
  border-color: var(--aksen);
}

.aksi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Navigasi */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--latar) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--garis);
}

.nav .bungkus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.8rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--teks);
  font-weight: 800;
  font-size: 1.05rem;
}

.logo img {
  height: 30px;
  width: auto;
}

.logo span {
  color: var(--redup);
  font-weight: 600;
}

.nav-tautan {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-tautan a:not(.tombol) {
  color: var(--redup);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}

.nav-tautan a:not(.tombol):hover {
  color: var(--teks);
}

.nav .tombol {
  padding: 0.55rem 1rem;
  font-size: 0.92rem;
}

/* Pembuka */
.pembuka {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem);
}

.pembuka .bungkus {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.pembuka-teks {
  display: grid;
  gap: 1.4rem;
  min-width: 0;
}

.pembuka-teks h1 em {
  font-style: normal;
  color: var(--aksen);
}

.pembuka-teks .sub {
  font-size: 1.15rem;
  color: var(--redup);
  max-width: 34rem;
}

.catatan-kecil {
  font-size: 0.88rem;
  color: var(--redup);
}

/* Contoh percakapan */
.ponsel {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: 28px;
  padding: 14px;
  box-shadow: 0 30px 60px -36px rgba(5, 30, 40, 0.45);
  min-width: 0;
}

.ponsel-kepala {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem 0.8rem;
  border-bottom: 1px solid var(--garis);
}

.ponsel-kepala img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  padding: 4px;
  object-fit: contain;
}

.ponsel-kepala strong {
  display: block;
  font-size: 0.95rem;
}

.ponsel-kepala small {
  color: var(--redup);
  font-size: 0.78rem;
}

.chat {
  background: var(--chat-latar);
  border-radius: 18px;
  margin-top: 12px;
  padding: 14px;
  display: grid;
  gap: 0.6rem;
}

.balon {
  max-width: 85%;
  padding: 0.6rem 0.8rem;
  border-radius: 14px;
  font-size: 0.93rem;
  line-height: 1.45;
}

.balon.masuk {
  background: var(--balon-masuk);
  border: 1px solid var(--garis);
  justify-self: start;
  border-bottom-left-radius: 4px;
}

.balon.bot {
  background: var(--balon-bot);
  justify-self: end;
  border-bottom-right-radius: 4px;
}

.balon small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.7rem;
  color: var(--redup);
  text-align: right;
}

.penanda {
  justify-self: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--aksen);
  background: var(--tint);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}

.ponsel figcaption {
  font-size: 0.78rem;
  color: var(--redup);
  text-align: center;
  padding-top: 0.6rem;
}

/* Bagian umum */
.bagian {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.bagian.selang {
  background: var(--latar-2);
  border-block: 1px solid var(--garis);
}

.kepala-bagian {
  display: grid;
  gap: 0.7rem;
  max-width: 44rem;
  margin-bottom: 2.5rem;
}

.kepala-bagian p {
  color: var(--redup);
  font-size: 1.08rem;
}

/* Tiga peran */
.peran {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.kartu {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: 20px;
  padding: 1.6rem;
  display: grid;
  gap: 0.8rem;
  align-content: start;
  min-width: 0;
}

.kartu .ikon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--tint);
  color: var(--aksen);
}

.kartu .ikon svg {
  width: 22px;
  height: 22px;
}

.kartu p {
  color: var(--redup);
}

.kartu ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.35rem;
  color: var(--teks);
  font-size: 0.95rem;
}

.kartu ul li::marker {
  color: var(--aksen);
}

/* Fitur dashboard */
.fitur {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2.5rem;
}

.fitur > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 1rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--garis);
  min-width: 0;
}

.fitur .ikon {
  grid-row: span 2;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--tint);
  color: var(--aksen);
}

.fitur .ikon svg {
  width: 20px;
  height: 20px;
}

.fitur p {
  color: var(--redup);
  font-size: 0.97rem;
}

/* Langkah */
.langkah {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  counter-reset: langkah;
}

.langkah li {
  counter-increment: langkah;
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding-top: 1.1rem;
  border-top: 3px solid var(--utama);
  min-width: 0;
}

.langkah li::before {
  content: counter(langkah);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--aksen);
}

.langkah p {
  color: var(--redup);
  font-size: 0.97rem;
}

/* Tanya jawab */
.tanya {
  display: grid;
  gap: 0.75rem;
  max-width: 50rem;
}

.tanya details {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: 14px;
  padding: 1rem 1.25rem;
}

.tanya summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.tanya summary::-webkit-details-marker {
  display: none;
}

.tanya summary::after {
  content: "+";
  color: var(--aksen);
  font-weight: 800;
}

.tanya details[open] summary::after {
  content: "–";
}

.tanya details p {
  color: var(--redup);
  margin-top: 0.6rem;
}

/* Ajakan akhir */
.ajakan {
  background: var(--panel);
  color: var(--panel-teks);
  border-radius: 28px;
  padding: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
}

.ajakan p {
  opacity: 0.92;
  margin-top: 0.7rem;
  max-width: 36rem;
}

.ajakan .kontak {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

.ajakan .kontak .tombol.garis {
  background: transparent;
  color: var(--panel-teks);
  border-color: color-mix(in srgb, var(--panel-teks) 40%, transparent);
}

.ajakan .alamat {
  font-size: 0.92rem;
  opacity: 0.9;
}

/* Kaki */
.kaki {
  padding-block: 2.5rem;
  color: var(--redup);
  font-size: 0.9rem;
}

.kaki .bungkus {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}

@media (max-width: 900px) {
  .pembuka .bungkus,
  .ajakan {
    grid-template-columns: 1fr;
  }
  .peran {
    grid-template-columns: 1fr;
  }
  .langkah {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }
  .nav-tautan a:not(.tombol) {
    display: none;
  }
  .fitur,
  .langkah {
    grid-template-columns: 1fr;
  }
  .logo span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .tombol {
    transition: none;
  }
}

/* Contoh bidang lain (Kesia) dan proyek perusahaan (Inagi) */
.sektor {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.sektor .kartu {
  gap: 0.6rem;
}

.contoh-tanya {
  background: var(--chat-latar);
  border-radius: 12px;
  padding: 0.65rem 0.8rem;
  font-size: 0.9rem;
  color: var(--teks);
}

.contoh-tanya::before {
  content: "Contoh pertanyaan";
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--redup);
  margin-bottom: 0.2rem;
}

.dua-kolom {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.daftar-cek {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.daftar-cek li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.8rem;
}

.daftar-cek li::before {
  content: "";
  grid-row: span 2;
  width: 22px;
  height: 22px;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: var(--tint) center / 12px no-repeat;
  box-shadow: inset 0 0 0 2px var(--aksen);
}

.daftar-cek strong {
  font-weight: 700;
}

.daftar-cek span {
  color: var(--redup);
  font-size: 0.97rem;
}

.lencana-khusus {
  justify-self: start;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--garis);
  color: var(--redup);
}

@media (max-width: 900px) {
  .sektor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dua-kolom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .sektor {
    grid-template-columns: 1fr;
  }
}

.peran.satu {
  grid-template-columns: 1fr;
}

/* dibrework: cokelat kopi, krem, emas #C9A24B (warna situs dibrework.com). Label kecil memakai JetBrains Mono
   seperti situsnya; judul dan isi tetap Plus Jakarta Sans supaya enak dibaca. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("/bersama/huruf/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root[data-merek="dibrework"] {
  color-scheme: dark;
  --latar: #18140f;
  --latar-2: #1d1812;
  --kartu: #221c15;
  --garis: #39301f;
  --teks: #f2e8d6;
  --redup: #a89a82;
  --utama: #c9a24b;
  --utama-tinta: #18140f; /* tinta di atas emas (kontras 7,6:1) */
  --utama-hover: #dcb35a;
  --aksen: #dcb35a;
  --tint: #2e2617;
  --panel: radial-gradient(60% 80% at 100% 0%, rgba(201, 162, 75, 0.35) 0%, rgba(201, 162, 75, 0) 100%),
    linear-gradient(160deg, #2a2219 0%, #1d1812 100%);
  --panel-teks: #f2e8d6;
  --chat-latar: #1d1812;
  --balon-masuk: #2a2219;
  --balon-bot: #3a301c;
  --huruf: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --spasi-kata: 0.06em;
}

:root[data-merek="dibrework"] .label,
:root[data-merek="dibrework"] .logo,
:root[data-merek="dibrework"] .penanda,
:root[data-merek="dibrework"] .nav-tautan a:not(.tombol) {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.01em;
}

:root[data-merek="dibrework"] .label {
  text-transform: none;
  font-weight: 500;
}

/* ikon dibrework sudah berlatar cokelat sendiri: tanpa lingkaran putih */
:root[data-merek="dibrework"] .ponsel-kepala img {
  background: transparent;
  padding: 0;
  border-radius: 9px;
}