/* Halaman e-book Kenali Obat Reumatologi Anda. Memakai token dari ../styles.css; teal = warna e-book. */
.ko{--teal:#1E5966;--teal-tua:#0E3540;--mint:#A9D3CE;--oranye:#C2410C}
@media (prefers-color-scheme: dark){.ko{--teal:#6CC4AE;--oranye:#F08A5D}}
.ko main{padding-bottom:40px}
.ko-sec{padding-top:88px;padding-bottom:88px}
.ko-sec h2{max-width:22ch}
.ko-band{background:var(--surface-2)}

/* Hero */
.ko-hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;padding-top:24px;padding-bottom:40px}
.ko-hero h1{font-size:clamp(44px,6vw,76px);margin-bottom:22px}
.ko-hero .lead{margin-bottom:28px}
.ko-stage{background:radial-gradient(70% 60% at 50% 40%,rgb(30 89 102 / .28),transparent 70%),var(--surface-2);padding:48px 0}
.ko-stage .book-3d{height:440px}
.ko-harga{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;padding:20px 24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);scroll-margin-top:24px}
.ko-harga>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.ko-harga-baru{font-size:32px;font-weight:600;letter-spacing:-.03em}
.ko-harga s{color:var(--ink-3)}
.ko-harga small{flex-basis:100%;font-family:var(--mono);font-size:12.5px;color:var(--teal)}
.ko-checks{margin:24px 0 0}
.ko-checks .ph{color:var(--teal)}

/* Tiga masalah */
.ko-tiga{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.ko-kartu{padding:24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);display:grid;gap:8px;align-content:start}
.ko-kartu .ph{font-size:28px;color:var(--oranye)}
.ko-kartu b{font-size:19px;letter-spacing:-.01em}
.ko-kartu p{color:var(--ink-2)}

/* Fitur */
.ko-fitur{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ko-fitur li{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
.ko-fitur .ph{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;color:#fff;background:var(--teal)}
.ko-fitur b{display:block;font-weight:600;color:var(--ink)}
.ko-fitur span{color:var(--ink-2);font-size:15.5px;line-height:1.45}
.ko-fitur .ko-bahaya .ph{background:var(--oranye)}

/* Galeri halaman */
.ko-galeri{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px}
.ko-galeri figure{margin:0}
.ko-galeri img{border-radius:10px;border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .5s var(--ease)}
.ko-galeri figure:hover img{transform:translateY(-6px) rotate(-.6deg)}
.ko-galeri figcaption{margin-top:12px;font-size:14.5px;color:var(--ink-2)}

/* Daftar obat */
.ko-bab{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.ko-bab>div{padding:20px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);display:grid;gap:6px}
.ko-bab b{font-weight:600}
.ko-bab span{color:var(--ink-2);font-size:15.5px}

/* Penulis */
.ko-penulis{display:grid;grid-template-columns:.55fr 1.45fr;gap:56px;align-items:center}
.ko-penulis img{border-radius:var(--r-lg);background:linear-gradient(180deg,var(--surface-2),color-mix(in srgb,var(--teal) 18%,var(--surface-2)));padding-top:16px}
.ko-penulis h2{font-size:clamp(28px,3.4vw,44px);max-width:none}
.ko-penulis .body+.body{margin-top:14px;font-style:italic}

/* FAQ */
.ko-faq details{border-bottom:1px solid var(--line);padding:18px 0;max-width:820px}
.ko-faq summary{cursor:pointer;font-weight:500;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.ko-faq summary::-webkit-details-marker{display:none}
.ko-faq summary::after{content:"+";color:var(--accent);font-size:22px;line-height:1}
.ko-faq details[open] summary::after{content:"\2212"}
.ko-faq details p{margin-top:10px;color:var(--ink-2);max-width:70ch}

/* Penutup */
.ko-akhir{text-align:center;display:grid;justify-items:center;gap:8px}
.ko-akhir h2{margin-inline:auto}
.ko-akhir .fine{margin-inline:auto}

@media (max-width:900px){
  .ko-hero,.ko-penulis{grid-template-columns:1fr;gap:32px}
  .ko-stage .book-3d{height:340px}
  .ko-tiga,.ko-fitur,.ko-bab{grid-template-columns:1fr}
  .ko-galeri{grid-template-columns:1fr 1fr}
  .ko-penulis img{max-width:240px}
  .ko-sec{padding-top:64px;padding-bottom:64px}
}
@media (max-width:520px){
  .ko-stage .book-3d{height:280px}
  .ko-harga{padding:18px}
  .ko-harga .btn{width:100%;justify-content:center}
}