/* gaya — chatbot ID */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Work Sans", system-ui, sans-serif;
  background: #0c1114;
  color: #eaf0f0;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: "Outfit", system-ui, sans-serif; line-height: 1.18; }
a { color: #ff8a4d; }
b, strong { color: #fff; }

.kotak { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.kotak-sempit { width: 100%; max-width: 730px; margin: 0 auto; padding: 0 24px; }

.bilah { width: 100%; padding: clamp(48px, 7vw, 86px) 0; background: #0c1114; }
.bilah-gelap { background: #0f171a; border-block: 1px solid #1f2e30; }
.bilah-akhir {
  background: radial-gradient(660px 320px at 50% 40%, rgba(255,106,61,.18), transparent 70%), #0f171a;
  border-top: 1px solid #1f2e30;
}

/* Cek usia */
.cek-usia {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(4,7,8,.95);
  display: grid; place-items: center; padding: 24px;
}
.cek-usia.lewat { display: none; }
.bingkai {
  background: #11181c; border: 1px solid #2a3a3d;
  border-radius: 4px; padding: clamp(28px, 6vw, 42px);
  max-width: 450px; text-align: center;
}
.lencana {
  display: inline-block; font-family: "Outfit", sans-serif;
  font-weight: 800; font-size: 19px; color: #0c1114;
  background: #ff6a3d; padding: 5px 16px; margin-bottom: 16px;
}
.bingkai h2 { margin-bottom: 10px; }
.bingkai p { color: #8fa3a6; margin-bottom: 22px; }
.bingkai-aksi { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.pita {
  background: #ff6a3d; color: #0c1114;
  text-align: center; font-weight: 700; font-size: 13px;
  padding: 9px 14px; letter-spacing: .3px;
}

/* Hero */
.hero {
  padding: clamp(54px, 8vw, 100px) 0; text-align: center;
  background: radial-gradient(860px 440px at 50% -10%, rgba(255,106,61,.2), transparent 60%);
}
.label {
  display: inline-block; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 3px; color: #19c3b2; margin-bottom: 20px;
}
.hero h1 { font-size: clamp(28px, 5.4vw, 52px); color: #fff; margin-bottom: 16px; }
.intro { color: #a9bcbc; font-size: clamp(15px, 2vw, 18px); max-width: 60ch; margin: 0 auto 28px; }

/* Teks */
.teks h2 { font-size: clamp(24px, 3.8vw, 36px); color: #fff; margin-bottom: 18px; }
.teks p { color: #c3d2d2; margin-bottom: 16px; font-size: 16.5px; }
.teks-tengah { text-align: center; }
.teks-tengah p { margin-inline: auto; max-width: 62ch; }
.intro-bagian { color: #7d9396; }

.daftar-tik { list-style: none; display: grid; gap: 0; margin-top: 18px; counter-reset: tik; }
.daftar-tik li {
  padding: 15px 8px 15px 44px; position: relative; color: #c3d2d2;
  border-bottom: 1px solid #1f2e30;
}
.daftar-tik li::before {
  counter-increment: tik; content: counter(tik);
  position: absolute; left: 8px; top: 14px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #19c3b2; color: #062; font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
}

/* Unggulan */
.unggulan {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(255,106,61,.16), rgba(25,195,178,.1));
  border: 1px solid #2f4a44; border-radius: 4px;
  padding: clamp(20px, 4vw, 30px); margin: 28px 0;
}
.unggulan-info { flex: 1 1 340px; }
.unggulan-pita {
  display: inline-block; background: #ff6a3d; color: #0c1114;
  font-family: "Outfit", sans-serif; font-weight: 700; font-size: 12px;
  padding: 5px 14px; margin-bottom: 10px;
}
.unggulan-info h3 { font-size: clamp(20px, 3vw, 26px); color: #fff; margin-bottom: 6px; }
.unggulan-info p { color: #c3d2d2; }
.lencana-kecil {
  display: inline-block; font-family: "Work Sans", sans-serif;
  font-size: 11px; font-weight: 700; vertical-align: middle;
  background: #19c3b2; color: #062; padding: 3px 10px;
}

/* Daftar perbandingan (list peringkat) */
.daftar-banding { list-style: none; display: grid; gap: 10px; }
.banding-baris {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: #11181c; border: 1px solid #1f2e30;
  border-left: 4px solid #ff6a3d; padding: 16px 20px;
}
.banding-baris.banding-tambahan { display: none; }
.daftar-banding.terbuka .banding-baris.banding-tambahan { display: flex; }
.banding-no {
  font-family: "Outfit", sans-serif; font-weight: 800; font-size: 22px;
  color: #2f4a44; min-width: 38px;
}
.banding-utama { flex: 1 1 220px; }
.banding-utama h4 { font-size: 18px; color: #fff; }
.banding-utama p { color: #a9bcbc; font-size: 14px; }
.banding-tag { color: #8fa3a6; font-size: 13px; }

.lainnya-area { text-align: center; margin-top: 20px; }

.catatan {
  margin-top: 22px; padding: 16px 20px; color: #f3d0bd;
  background: #1c130d; border-left: 3px solid #ff6a3d;
}

/* Entri akordeon (<details>) */
.entri {
  border: 1px solid #1f2e30; border-radius: 4px;
  background: #10171a; margin-top: 12px;
}
.entri[open] { border-color: #2f4a44; }
.entri-kepala {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 22px; cursor: pointer; list-style: none;
}
.entri-kepala::-webkit-details-marker { display: none; }
.entri-kepala::after {
  content: "＋"; margin-left: auto; color: #ff6a3d; font-size: 20px; font-weight: 700;
}
.entri[open] .entri-kepala::after { content: "－"; }
.peringkat {
  font-family: "Outfit", sans-serif; font-weight: 800; font-size: 13px;
  letter-spacing: 1px; color: #0c1114; background: #ff6a3d; padding: 5px 12px;
}
.peringkat-bonus { background: #19c3b2; color: #062; }
.entri-nama { font-family: "Outfit", sans-serif; font-weight: 700; font-size: clamp(18px, 3vw, 24px); color: #fff; }
.entri-isi { padding: 4px 24px 26px; border-top: 1px solid #1f2e30; }
.entri-isi p { color: #c3d2d2; margin: 14px 0; font-size: 16px; }

.fitur-judul { margin: 22px 0 12px; color: #19c3b2; font-size: 17px; }
.fitur { list-style: none; display: grid; gap: 8px; }
.fitur li {
  padding: 12px 16px; background: #0f171a; border: 1px solid #1f2e30;
  color: #c3d2d2; font-size: 14.5px;
}

/* Plus / minus */
.plus-minus { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0; }
.kelebihan, .kekurangan { padding: 18px 20px; border: 1px solid #1f2e30; }
.kelebihan { border-top: 3px solid #19c3b2; }
.kekurangan { border-top: 3px solid #ff5d6c; }
.kelebihan h4 { color: #19c3b2; margin-bottom: 10px; font-size: 15px; }
.kekurangan h4 { color: #ff5d6c; margin-bottom: 10px; font-size: 15px; }
.kelebihan ul, .kekurangan ul { padding-left: 18px; display: grid; gap: 6px; }
.kelebihan li, .kekurangan li { color: #c3d2d2; font-size: 14px; }

.catatan-tambahan {
  margin-top: 16px; font-size: 13.5px; color: #8fa3a6;
  background: #0f171a; padding: 14px 18px;
}

/* Tombol (sudut tajam) */
.tombol {
  display: inline-block; cursor: pointer; text-decoration: none;
  font-family: "Outfit", sans-serif; font-weight: 700; font-size: 15px;
  padding: 14px 28px; border-radius: 2px; border: 2px solid transparent;
  transition: filter .15s, transform .15s;
}
.tombol:hover { transform: translateY(-2px); filter: brightness(1.08); }
.tombol-besar { font-size: 17px; padding: 17px 36px; }
.tombol-kecil { font-size: 13px; padding: 8px 16px; }
.tombol-utama { background: #ff6a3d; color: #0c1114; }
.tombol-kedua { background: #19c3b2; color: #052b27; }
.tombol-kosong { background: transparent; color: #a9bcbc; border-color: #2a3a3d; }
.tombol-kosong:hover { color: #fff; border-color: #ff6a3d; }
.entri-isi > .tombol { display: block; width: -moz-fit-content; width: fit-content; margin: 12px auto 0; }

/* Tombol apung — bar atas yang turun */
.tombol-apung {
  position: fixed; left: 0; right: 0; top: 0; z-index: 850;
  display: none; align-items: center; justify-content: center; gap: 10px;
  font-family: "Outfit", sans-serif; font-weight: 700; font-size: 15px;
  color: #0c1114; text-decoration: none;
  background: #ff6a3d; padding: 13px 20px;
  transform: translateY(-100%); transition: transform .28s ease;
}
.tombol-apung.tampil { display: flex; transform: translateY(0); }
.tombol-apung b { background: #0c1114; color: #ff6a3d; font-size: 12px; padding: 2px 8px; }

.kaki {
  border-top: 1px solid #1f2e30; padding: 34px 0;
  text-align: center; color: #7d9396; font-size: 13px; background: #0f171a;
}
.kaki-redup { opacity: .55; margin-top: 6px; }

/* Tablet */
@media (max-width: 1000px) {
  .kotak { max-width: 880px; }
  .unggulan .tombol { width: 100%; text-align: center; }
}

/* Mobile */
@media (max-width: 660px) {
  .plus-minus { grid-template-columns: 1fr; }
  .hero .tombol, .bilah-akhir .tombol,
  .entri-isi > .tombol, .unggulan .tombol { width: 100%; text-align: center; }
  .tombol-kecil { width: auto; }
  .banding-baris { gap: 10px; }
  .banding-tag { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tombol, .tombol-apung { transition: none; }
  .tombol:hover { transform: none; }
}