/* Rupa halaman dalam (panduan, artikel, bantuan, syarat): kepala halaman
   bercahaya seperti hero beranda, daftar isi dan kartu yang lebih lapang.
   Dimuat sesudah situs.css dan situs-artikel.css, sebelum theme-dark.css.
   Aturan gelap memakai html[data-theme="dark"] supaya menang atas
   theme-dark.css, yang dibangkitkan dan dimuat SESUDAH berkas ini. */

/* --- Latar: cahaya di belakang judul halaman ------------------------------- */
/* Header pil transparan tetap memakan tempat (12 + 64px), jadi isi ditarik
   ke bawahnya supaya cahayanya menyambung sampai tepi atas layar. */
.situs-main {
  position: relative; margin-top: -76px; padding: 136px 0 88px;
  background:
    radial-gradient(46% 420px at 90% 0, #ffd7c6 0%, rgba(255, 215, 198, 0) 70%) no-repeat,
    radial-gradient(34% 380px at 4% 40px, #ffebc9 0%, rgba(255, 235, 201, 0) 72%) no-repeat,
    linear-gradient(#fbf6f1 0, var(--soft) 520px) no-repeat;
}
.situs-main::before {
  position: absolute; top: 0; right: 0; left: 0; height: 420px; content: ""; pointer-events: none;
  background-image: radial-gradient(rgba(23, 25, 31, .13) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(56% 78% at 78% 22%, #000 0%, transparent 76%);
  mask-image: radial-gradient(56% 78% at 78% 22%, #000 0%, transparent 76%);
}
.situs-main > .container { position: relative; }
html[data-theme="dark"] .situs-main {
  background:
    radial-gradient(46% 420px at 90% 0, rgba(238, 77, 45, .2) 0%, rgba(238, 77, 45, 0) 70%) no-repeat,
    radial-gradient(34% 380px at 4% 40px, rgba(255, 170, 60, .09) 0%, rgba(255, 170, 60, 0) 72%) no-repeat,
    var(--soft);
}
html[data-theme="dark"] .situs-main::before { background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.2px); }

/* --- Kepala halaman ---------------------------------------------------------- */
.situs-main .view-head { margin-bottom: 36px; }
.view-label {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 8px 14px 8px 11px;
  border: 1px solid #f6d3c4; border-radius: 999px; background: #fff; box-shadow: 0 6px 16px -8px rgba(238, 77, 45, .35);
  color: var(--orange-text); font-size: 10px; font-weight: 900; letter-spacing: 1.55px; text-transform: uppercase;
}
.view-label::before { width: 7px; height: 7px; border-radius: 50%; content: ""; background: var(--orange); box-shadow: 0 0 0 5px rgba(238, 77, 45, .1); }
.situs-main .view-head h1 { margin: 0 0 12px; font-size: clamp(34px, 4.8vw, 54px); line-height: 1.08; letter-spacing: -1.8px; }
.situs-main .view-sub { max-width: 660px; font-size: 17px; line-height: 1.6; }
html[data-theme="dark"] .view-label { border-color: #4a2a1f; background: #1b1614; box-shadow: none; }

/* --- Daftar isi dan kartu bagian ---------------------------------------------- */
.tut-wrap { gap: 28px; }
.tut-nav { top: 96px; gap: 3px; padding: 10px; border-radius: 22px; box-shadow: 0 22px 44px -32px rgba(52, 41, 33, .5); }
.tut-link { padding: 10px 14px; border-left: 0; border-radius: 12px; text-decoration: none; }
.tut-link.on { background: var(--orange-soft); color: var(--orange-ink); }
.tut-sec { padding: 30px 32px; border-radius: 24px; box-shadow: 0 22px 44px -34px rgba(52, 41, 33, .5); }
.tut-tag { margin-bottom: 12px; padding: 5px 11px; font-size: 10.5px; letter-spacing: .9px; }
.tut-sec h2 { margin-bottom: 14px; font-size: 23px; letter-spacing: -.5px; }
.tut-sec p, .tut-ol li, .tut-ul li { font-size: 15px; line-height: 1.7; }
.tut-note, .tut-pasang { border-radius: 14px; }
.tut-sec .tut-pasang-btn { padding: 11px 16px; border-radius: 12px; }
.tut-fig a { border-radius: 16px; }
.kontak-grid { gap: 14px; margin: 18px 0; }
.kontak-kartu { padding: 20px; border-radius: 18px; background: var(--card); box-shadow: 0 16px 30px -26px rgba(52, 41, 33, .55); }
.kontak-kartu small { color: var(--orange-text); letter-spacing: 1px; }
html[data-theme="dark"] .tut-nav, html[data-theme="dark"] .tut-sec, html[data-theme="dark"] .kontak-kartu { box-shadow: none; }
@media (max-width: 900px) {
  .tut-nav { top: auto; padding: 8px; border-radius: 16px; }
  .tut-link, .tut-link.on { border-bottom: 0; }
}
@media (max-width: 600px) {
  .situs-main { padding: 116px 0 64px; }
  .situs-main .view-head { margin-bottom: 26px; }
  .situs-main .view-head h1 { letter-spacing: -1.1px; }
  .situs-main .view-sub { font-size: 15.5px; }
  .tut-sec { padding: 22px 20px; border-radius: 20px; }
  .tut-sec h2 { font-size: 20px; }
}

/* --- /artikel: daftar ------------------------------------------------------- */
.artikel-alat { margin-bottom: 26px; }
.artikel-cari { border-radius: 14px; box-shadow: 0 14px 28px -24px rgba(52, 41, 33, .55); }
.artikel-chip { padding: 10px 16px; }
.artikel-grid { gap: 20px; }
.artikel-kartu {
  position: relative; gap: 12px; padding: 26px 26px 24px; border-radius: 24px; overflow: hidden;
  box-shadow: 0 22px 44px -34px rgba(52, 41, 33, .5); transition: border-color .18s, transform .18s, box-shadow .18s;
}
.artikel-kartu:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgba(120, 44, 20, .45); }
.artikel-kartu .artikel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; letter-spacing: .3px; }
.artikel-kartu .artikel-kategori { padding: 5px 10px; border-radius: 999px; background: var(--orange-soft); letter-spacing: .8px; }
.artikel-kartu h2 { font-size: 20px; line-height: 1.3; letter-spacing: -.4px; }
.artikel-baca { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.artikel-baca::after { content: "\2192"; transition: transform .18s; }
.artikel-kartu:hover .artikel-baca::after { transform: translateX(4px); }
.artikel-baru {
  padding: 5px 10px; border-radius: 999px; color: #fff; background: var(--orange);
  font-size: 10px; font-weight: 900; letter-spacing: .9px; text-transform: uppercase;
}
/* Artikel terbaru: kartu lebar dengan cahaya, hanya kalau lajurnya muat dua. */
@media (min-width: 700px) {
  .artikel-grid > .artikel-utama { grid-column: span 2; }
  .artikel-utama .artikel-kartu {
    justify-content: center; padding: 34px 34px 30px;
    background: radial-gradient(70% 120% at 100% 0, #ffe1d4 0%, rgba(255, 225, 212, 0) 62%), var(--card);
  }
  .artikel-utama .artikel-kartu h2 { font-size: 28px; line-height: 1.2; letter-spacing: -.8px; }
  .artikel-utama .artikel-kartu p { flex: none; font-size: 15.5px; }
}
html[data-theme="dark"] .artikel-kartu, html[data-theme="dark"] .artikel-cari { box-shadow: none; }
html[data-theme="dark"] .artikel-utama .artikel-kartu { background: radial-gradient(70% 120% at 100% 0, rgba(238, 77, 45, .2) 0%, rgba(238, 77, 45, 0) 62%), var(--card); }

/* --- /artikel/<slug>: satu artikel -------------------------------------------- */
.artikel-isi { max-width: 820px; }
.artikel-kembali {
  margin-bottom: 22px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  transition: border-color .18s;
}
.artikel-kembali:hover { border-color: var(--orange); }
.artikel-isi > .artikel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; letter-spacing: .3px; }
.artikel-isi > .artikel-meta .artikel-kategori { padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid #f6d3c4; letter-spacing: .8px; }
.artikel-isi h1 { margin-bottom: 16px; font-size: clamp(30px, 4.6vw, 46px); line-height: 1.12; letter-spacing: -1.3px; }
.artikel-lead { margin-bottom: 32px; font-size: 19px; }
.artikel-badan {
  padding: 40px 48px 32px; border: 1px solid var(--line); border-radius: 28px; background: var(--card);
  box-shadow: 0 30px 60px -44px rgba(52, 41, 33, .55);
}
.artikel-badan > :first-child { margin-top: 0; }
.artikel-badan h2 { margin-top: 40px; font-size: 24px; letter-spacing: -.5px; }
.artikel-faq { margin-top: 44px; }
.artikel-faq h2 { font-size: 24px; letter-spacing: -.5px; }
.artikel-ajak {
  position: relative; margin-top: 48px; padding: 38px 40px; border: 0; border-radius: 28px; overflow: hidden;
  background: linear-gradient(135deg, #ef5a34 0%, #c9341b 100%); box-shadow: 0 30px 60px -34px rgba(201, 52, 27, .8);
}
.artikel-ajak::after {
  position: absolute; top: -90px; right: -70px; width: 260px; height: 260px; border-radius: 50%; content: "";
  background: radial-gradient(closest-side, rgba(255, 224, 122, .45), rgba(255, 224, 122, 0)); pointer-events: none;
}
.artikel-ajak h2 { position: relative; font-size: 26px; letter-spacing: -.6px; color: #fff; }
.artikel-ajak p { position: relative; max-width: 520px; font-size: 16px; color: rgba(255, 255, 255, .9); }
.artikel-ajak .situs-cta { position: relative; margin-top: 22px; }
.artikel-ajak .btn { padding: 15px 20px; border-radius: 13px; font-size: 14px; }
.artikel-ajak .btn-primary, .artikel-ajak .btn-primary:hover { color: #c9341b; background: #fff; box-shadow: 0 14px 26px -12px rgba(80, 20, 8, .6); }
.artikel-ajak .btn-quiet, .artikel-ajak .btn-quiet:hover { border-color: rgba(255, 255, 255, .55); color: #fff; background: transparent; }
html[data-theme="dark"] .artikel-isi > .artikel-meta .artikel-kategori { border-color: #4a2a1f; background: #1b1614; }
html[data-theme="dark"] .artikel-badan { box-shadow: none; }
html[data-theme="dark"] .artikel-ajak { background: linear-gradient(135deg, #c9341b 0%, #8f2412 100%); box-shadow: none; }
html[data-theme="dark"] .artikel-ajak .btn-primary { color: #c9341b; background: #fff; }
html[data-theme="dark"] .artikel-ajak .btn-quiet { border-color: rgba(255, 255, 255, .55); color: #fff; background: transparent; }
@media (max-width: 700px) {
  .artikel-badan { padding: 24px 20px 18px; border-radius: 22px; }
  .artikel-lead { font-size: 17px; }
  .artikel-ajak { padding: 30px 24px; border-radius: 22px; }
  .artikel-ajak .btn { width: 100%; }
}
/* Kartu biasa: tanggal turun ke baris sendiri, supaya pil kategori yang
   panjang dan yang pendek tidak membuat kartu bersebelahan beda susunan. */
.artikel-grid > li:not(.artikel-utama) .artikel-waktu { flex-basis: 100%; }
@media (max-width: 699px) { .artikel-grid > .artikel-utama .artikel-waktu { flex-basis: 100%; } }