/* ============================================================
   GUA HEBAT — Penyuluhan Kesehatan Remaja
   Stylesheet bersama (SaaS style) — unair.abba.web.id
   Tidak ada dependensi eksternal / CDN.
   ============================================================ */

:root{
  --navy-900:#0F1B27;
  --navy-800:#152230;
  --navy-700:#1E293B;
  --navy-600:#2A3B4D;
  --teal-500:#14B8A6;
  --teal-600:#0D9488;
  --teal-050:#E6FAF7;
  --rose-500:#BE5A73;
  --rose-700:#7C4257;
  --rose-050:#FCEFF3;
  --amber-500:#F59E0B;
  --amber-050:#FEF5E3;
  --slate-400:#94A3B8;
  --slate-500:#64748B;
  --slate-600:#475569;
  --slate-200:#E2E8F0;
  --slate-100:#F1F5F9;
  --slate-050:#F8FAFC;
  --ink:#1B2733;
  --white:#FFFFFF;

  --radius:14px;
  --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(15,27,39,.06), 0 1px 3px rgba(15,27,39,.08);
  --shadow-md:0 4px 12px rgba(15,27,39,.08), 0 2px 4px rgba(15,27,39,.04);
  --shadow-lg:0 18px 40px rgba(15,27,39,.14), 0 4px 10px rgba(15,27,39,.06);

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman","Bookman Old Style",serif;

  --maxw:1160px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  background:var(--slate-050);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--teal-600); text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* Tautan lewati-navigasi untuk pengguna keyboard & pembaca layar. */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--teal-600); color:#fff; padding:10px 18px;
  border-radius:0 0 10px 0; font-size:14px; font-weight:600;
}
.skip-link:focus{left:0; text-decoration:none}

/* Cincin fokus yang terlihat jelas di seluruh elemen interaktif. */
a:focus-visible,button:focus-visible{
  outline:3px solid var(--teal-500); outline-offset:2px; border-radius:6px;
}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:60;
  background:var(--navy-800);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar-in{
  max-width:var(--maxw); margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.brand:hover{text-decoration:none}
.brand-mark{
  width:36px; height:36px; border-radius:10px; flex:0 0 36px;
  background:linear-gradient(135deg,var(--teal-500),var(--teal-600));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:13px; letter-spacing:.04em;
}
.brand-text{display:flex; flex-direction:column; line-height:1.2}
.brand-title{color:#fff; font-weight:700; font-size:15px; letter-spacing:.01em}
.brand-sub{color:var(--slate-400); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase}

.topnav{margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.topnav a{
  color:#CBD5E1; font-size:14px; font-weight:500;
  padding:8px 13px; border-radius:9px; text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
.topnav a:hover{background:rgba(255,255,255,.08); color:#fff; text-decoration:none}
.topnav a.active{background:rgba(20,184,166,.18); color:#5EEAD4}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:11px; border:1px solid transparent;
  font-family:var(--sans); font-size:14.5px; font-weight:600; line-height:1;
  cursor:pointer; text-decoration:none; transition:all .16s ease;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--teal-600); color:#fff; box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--teal-500); color:#fff}
.btn-dark{background:var(--navy-700); color:#fff}
.btn-dark:hover{background:var(--navy-600); color:#fff}
.btn-ghost{background:#fff; color:var(--navy-700); border-color:var(--slate-200); box-shadow:var(--shadow-sm)}
.btn-ghost:hover{border-color:var(--teal-500); color:var(--teal-600)}
.btn-sm{padding:8px 14px; font-size:13.5px; border-radius:9px}
.btn svg{width:17px; height:17px; flex:0 0 17px}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--navy-800); color:#fff;
  padding:74px 0 82px;
}
.hero::before,.hero::after{content:""; position:absolute; border-radius:50%; pointer-events:none}
.hero::before{
  width:560px; height:560px; right:-170px; top:-260px;
  background:rgba(13,148,136,.32);
}
.hero::after{
  width:420px; height:420px; left:-190px; bottom:-250px;
  background:rgba(124,66,87,.36);
}
.hero-in{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 24px}
.eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:#5EEAD4; margin:0 0 18px;
}
.hero h1{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(30px,5vw,50px); line-height:1.16;
  margin:0 0 20px; max-width:17ch; letter-spacing:-.01em;
}
.hero h1 em{font-style:normal; color:#5EEAD4}
.hero-lead{
  font-size:16.5px; line-height:1.7; color:#CBD5E1;
  max-width:62ch; margin:0 0 26px;
}
.hero-meta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px}
.chip{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  padding:9px 15px; border-radius:11px;
  font-size:13.5px; font-weight:600; color:#E2E8F0;
}
.chip-dot{width:8px; height:8px; border-radius:50%; background:var(--teal-500); flex:0 0 8px}
.chip-dot.rose{background:var(--rose-500)}
.chip-dot.amber{background:var(--amber-500)}
.tagline{
  font-family:var(--serif); font-style:italic;
  font-size:15px; color:var(--slate-400);
  margin:0; padding-top:22px; border-top:1px solid rgba(255,255,255,.1);
}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:30px}

/* ---------- Section ---------- */
.section{padding:62px 0}
.section-head{margin-bottom:34px; max-width:64ch}
.section-head .eyebrow{color:var(--teal-600); margin-bottom:10px}
.section-head h2{
  font-family:var(--serif); font-size:clamp(23px,3.2vw,32px);
  line-height:1.25; margin:0 0 10px; color:var(--navy-800);
}
.section-head p{margin:0; color:var(--slate-600); font-size:15.5px}

/* ---------- Menu cards ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.card{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--slate-200);
  border-radius:var(--radius-lg); padding:28px;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:#CBD5E1}
.card-icon{
  width:52px; height:52px; border-radius:15px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
}
.card-icon svg{width:25px; height:25px; stroke-width:1.9}
.ic-teal{background:var(--teal-050); color:var(--teal-600)}
.ic-rose{background:var(--rose-050); color:var(--rose-700)}
.ic-amber{background:var(--amber-050); color:#B45309}
.card-kicker{
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate-500); margin:0 0 7px;
}
.card h3{font-family:var(--serif); font-size:21px; margin:0 0 10px; color:var(--navy-800); line-height:1.3}
.card p{margin:0 0 20px; color:var(--slate-600); font-size:14.8px; line-height:1.65; flex:1}
.card-meta{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;
  font-size:12.5px; color:var(--slate-500);
}
.pill{background:var(--slate-100); border-radius:999px; padding:4px 11px; font-weight:600}

/* ---------- Info strip ---------- */
.strip{
  background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-lg);
  padding:28px 30px; box-shadow:var(--shadow-sm);
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
.strip-item h4{
  margin:0 0 6px; font-size:14.5px; color:var(--navy-800);
  display:flex; align-items:center; gap:9px;
}
.strip-item h4 span{
  width:9px; height:9px; border-radius:3px; background:var(--teal-500); flex:0 0 9px;
}
.strip-item h4 span.rose{background:var(--rose-500)}
.strip-item h4 span.amber{background:var(--amber-500)}
.strip-item p{margin:0; font-size:14px; color:var(--slate-600); line-height:1.6}

/* ---------- Callout ---------- */
.callout{
  background:var(--amber-050); border:1px solid #F5D9A3;
  border-radius:var(--radius); padding:20px 24px; margin:28px 0;
}
.callout h4{margin:0 0 9px; font-size:15px; color:#92400E}
.callout ul{margin:0; padding-left:20px; color:#78350F; font-size:14.5px}
.callout li{margin-bottom:6px}
.callout li:last-child{margin-bottom:0}

/* ---------- Footer ---------- */
.footer{background:var(--navy-900); color:var(--slate-400); padding:44px 0 34px; margin-top:0}
.footer-in{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:34px; margin-bottom:28px}
.footer h5{color:#fff; font-size:14px; margin:0 0 12px; letter-spacing:.02em}
.footer p{margin:0 0 8px; font-size:13.8px; line-height:1.7}
.footer ul{list-style:none; margin:0; padding:0}
.footer li{margin-bottom:8px; font-size:13.8px}
.footer a{color:var(--slate-400)}
.footer a:hover{color:#5EEAD4}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.09); padding-top:20px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:12.8px;
}
.footer-bottom em{font-family:var(--serif); color:var(--slate-400)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .cards{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr; gap:20px}
  .footer-grid{grid-template-columns:1fr; gap:26px}
}
@media (max-width:640px){
  .wrap,.topbar-in,.hero-in,.footer-in{padding-left:18px; padding-right:18px}
  .hero{padding:52px 0 58px}
  .section{padding:46px 0}
  .topnav{margin-left:0; width:100%}
  .topnav a{padding:7px 10px; font-size:13.5px}
}

/* Hormati preferensi pengguna yang mengurangi animasi. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .btn:hover,.card:hover,.thumb:hover{transform:none}
}

/* ---------- Print ---------- */
@media print{
  .topbar,.footer,.hero-actions,.no-print,.skip-link,.toc{display:none !important}
  body{background:#fff; color:#000}
  .ebook-layout{display:block; padding:0}
  .sec,.box,.mf,.notice{page-break-inside:avoid; box-shadow:none}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:11px; color:#555}
}