/* Gaya tambahan untuk halaman yang hanya ada di situs publik: /panduan dan
   /bantuan. Kepala, kaki, tombol, dan tipografi dasarnya dipinjam dari
   landing.css supaya keduanya terbaca sebagai bagian dari situs yang sama.

   Blok .tut-* di bawah disalin apa adanya dari dashboard.css - halaman panduan
   memakai markup tutorial yang sama persis dengan yang ada di dalam extension,
   jadi menulis ulang gayanya hanya akan membuat keduanya perlahan berbeda. */

/* Variabel yang dipakai blok tutorial tapi tidak ada di landing.css.
   theme-dark.css dimuat SESUDAH berkas ini dan menimpa ketiganya lewat
   [data-theme="dark"] yang kekhususannya sama, jadi mode gelap tetap menang. */
:root {
  --orange-2: #ff7337;
  --orange-ink: #c9341b;
  --bg: #f6f7f9;
}

body.halaman-panduan, body.halaman-bantuan { background: var(--soft); }
.situs-main { padding: 40px 0 72px; }
.situs-main .view-head { margin-bottom: 22px; }
.situs-main .view-head h1 {
  margin: 0 0 6px; font-size: clamp(30px, 4vw, 42px);
  letter-spacing: -1.1px; color: var(--ink);
}
.situs-main .view-sub { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* Jangkar bagian harus berhenti di bawah kepala yang sticky (76px), bukan di
   belakangnya - kalau tidak, judul bagian yang baru diklik tertutup kepala. */
.tut-sec, .tut-link { scroll-margin-top: 96px; }

.situs-cta {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 14px;
}

/* --- Kartu kanal dukungan ------------------------------------------------ */
.kontak-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.kontak-kartu {
  display: block; padding: 16px 18px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--soft);
  transition: border-color .16s, transform .16s;
}
a.kontak-kartu:hover { border-color: var(--orange); transform: translateY(-2px); }
/* Kartu yang berupa tautan tidak ikut gaya tautan teks di .tut-sec. */
.tut-sec a.kontak-kartu { color: inherit; font-weight: inherit; text-decoration: none; }
.kontak-kartu small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .6px; color: var(--muted); }
.kontak-kartu strong { display: block; margin: 6px 0 3px; font-size: 16px; color: var(--ink); word-break: break-word; }
.kontak-kartu span { font-size: 13px; line-height: 1.55; color: var(--muted); }
.kontak-kartu.kosong { border-style: dashed; }

/* --- Salinan blok tutorial dari dashboard.css ---------------------------- */
.tut-wrap { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 24px; align-items: start; }
.tut-nav {
  position: sticky; top: 92px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 8px; max-height: calc(100vh - 116px); overflow-y: auto;
}
.tut-link {
  text-align: left; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2);
  padding: 9px 12px; border-radius: 9px; line-height: 1.35;
  border-left: 3px solid transparent; transition: background 0.12s, color 0.12s;
}
.tut-link:hover { background: var(--bg); color: var(--ink); }
.tut-link.on {
  background: var(--orange-soft); color: var(--orange-ink);
  border-left-color: var(--orange); font-weight: 800;
}
.tut-body { display: flex; flex-direction: column; gap: 16px; }
.tut-sec {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 24px;
}
.tut-tag {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.6px;
  color: var(--orange-ink); background: var(--orange-soft);
  padding: 3px 9px; border-radius: 99px; margin-bottom: 8px;
}
.tut-sec h2 { margin: 0 0 12px; font-size: 19px; letter-spacing: -0.3px; color: var(--ink); }
.tut-sec h3 { margin: 16px 0 6px; font-size: 15px; letter-spacing: -0.2px; color: var(--ink); }
.tut-sec p { margin: 0 0 10px; font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.tut-sec a { color: var(--orange-ink); font-weight: 700; text-decoration: underline; }
.tut-ol, .tut-ul { margin: 0 0 10px; padding-left: 20px; }
.tut-ol li, .tut-ul li { font-size: 14px; line-height: 1.65; color: var(--ink-2); margin-bottom: 7px; }
.tut-ol li::marker { font-weight: 800; color: var(--orange); }
.tut-ul li::marker { color: var(--orange); }
.tut-note {
  margin-top: 12px; padding: 11px 14px; border-radius: 10px;
  background: var(--orange-soft); border: 1px solid #ffd9c9;
  font-size: 13px; line-height: 1.6; color: var(--ink-2);
}
/* Tautan pemasangan di awal tutorial. Di /panduan situs inilah tombol unduhnya;
   di dalam extension ia gunanya untuk dibagikan ke rekan satu tim. */
.tut-pasang {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px 16px; margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px;
  background: var(--orange-soft); border: 1px solid #ffd9c9;
}
.tut-sec .tut-pasang p { flex: 1 1 260px; margin: 0; font-size: 13px; line-height: 1.6; }
.tut-sec .tut-pasang-btn {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  /* Warna tetap, bukan var(--orange-ink): di mode gelap variabel itu jadi oranye
     muda dan tulisan putihnya tak terbaca lagi. #c9341b vs putih = kontras 5:1. */
  padding: 9px 14px; border-radius: 10px; color: #fff; background: #c9341b;
  font-size: 13px; font-weight: 800; text-decoration: none; transition: background .16s;
}
.tut-sec .tut-pasang-btn:hover { color: #fff; background: #b32d16; text-decoration: none; }
.tut-sec .tut-pasang-btn:focus-visible { outline: 3px solid rgba(238, 77, 45, .3); outline-offset: 2px; }
.tut-fig { margin: 14px 0 2px; }
.tut-fig a {
  display: block; overflow: hidden; text-decoration: none;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
  transition: border-color .16s;
}
.tut-fig a:hover { border-color: var(--orange); }
.tut-fig img { display: block; width: 100%; height: auto; }
/* Popup ekstensi lebarnya cuma 300px sungguhan. Direntangkan selebar kartu
   tutorial ia jadi buram sekaligus berbohong soal ukurannya. */
.tut-fig.sempit a { max-width: 330px; }
.tut-fig figcaption { margin-top: 7px; font-size: 12px; line-height: 1.55; color: var(--muted); }
.tut-fig figcaption b { color: var(--ink-2); }
.tut-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.tut-duo .tut-fig { margin: 14px 0 2px; }
.tut-duo .tut-fig.sempit a { max-width: none; }
@media (max-width: 720px) { .tut-duo { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .tut-wrap { grid-template-columns: 1fr; }
  .tut-nav {
    position: static; max-height: none;
    flex-direction: row; overflow-x: auto; gap: 6px;
  }
  .tut-link { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; }
  .tut-link.on { border-left: 0; border-bottom-color: var(--orange); }
}